/* The thread is the shared structure, from the opening to the colophon. */
:root {
  --journey-ink: #a77e53;
  --journey-gap: clamp(5rem, 10vw, 9rem);
  --journey-muted: #6d6151;
}
body { position: relative; }
.story-thread { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.story-thread svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.story-thread path { fill: none; stroke: var(--journey-ink); stroke-linecap: round; stroke-linejoin: round; }
#thread-guide { stroke-width: 1; opacity: .22; }
#thread-ink { stroke-width: 1.4; opacity: .95; }
.has-story-thread .transmission-thread,
.has-story-thread .footer-thread { visibility: hidden; }
.has-story-thread .trace-mark { visibility: hidden; }

/* One discreet reading landmark replaces the disconnected progress indicators. */
.journey-nav {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
  color: var(--paper);
  background: var(--charcoal);
  padding: .65rem 4.5vw;
  border-top: 1px solid var(--line-light);
  display: flex;
  justify-content: flex-end;
  min-height: 4rem;
}
.journey-caption { display: none; }
.journey-nav a { display: flex; align-items: center; gap: 1rem; min-height: 32px; min-width: 15rem; font-size: .8rem; }
#journey-count { font-size: .65rem; font-variant-numeric: tabular-nums; opacity: .7; }
.journey-nav a > :last-child { margin-left: auto; transition: transform .25s; }
.journey-nav a:hover > :last-child { transform: translateY(3px); }
.motion-toggle { border: 0; background: transparent; padding: .7rem 0; left: 4.5vw; bottom: .55rem; }
.nav { height: 5.5rem; transition: border-color .25s; }
.nav.scrolled { border-bottom-color: var(--line-light); }
html[data-surface=light] .nav,
html[data-surface=light] .journey-nav,
html[data-surface=light] .motion-toggle {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-dark);
}
html[data-surface=light] .nav-logo img { filter: none; }
.nav-mobile { color: var(--paper); }
.nav-mobile.open { padding-bottom: 6rem; }
.nav-links a { font-size: .75rem; letter-spacing: .04em; }

/* A single paper chapter, opened by the archives and closed at the invitation. */
.witness-scene, .lili-sticky, .mission-scene, .partners-scene { background: var(--paper); }
.paper-transition { background: var(--paper) !important; }
.actions-scene { background: var(--paper); color: var(--ink); }
.actions-head h2 em { color: #817361; }
.actions-head .lead, .exhibit-meta, .exhibit-item p,
.event-n, .event-tag, .event-info p { color: var(--journey-muted); }
.event-ledger, .event-row { border-color: var(--line-dark); }
.mission-scene, .actions-scene, .partners-scene { padding-top: var(--journey-gap); padding-bottom: var(--journey-gap); }
.partners-scene { position: relative; padding-bottom: calc(var(--journey-gap) * 1.35); }
.partners-scene::before { content: ""; position: absolute; top: 0; left: 9vw; right: 9vw; height: 1px; background: var(--line-dark); }
.kicker, .scene-number { letter-spacing: .11em; font-size: .73rem; }
.kicker[data-chapter-number]::before, .scene-number[data-chapter-number]::before { content: attr(data-chapter-number); margin-right: 1.1rem; color: var(--journey-ink); font-variant-numeric: tabular-nums; }
.chapter-link { margin-top: 2.5rem; font-size: .85rem; }
.mission-intro .kicker, .actions-head .kicker, .partners-copy .kicker { color: var(--oxblood); }
.mission-intro, .actions-head { gap: 1.6rem 6vw; }
.mission-intro h2, .actions-head h2 { font-size: clamp(3rem, 5.2vw, 6rem); }
.exhibition { gap: 4.5vw; margin-bottom: 5rem; }
.exhibit-item:nth-child(2) { margin-top: 4rem; }
.exhibit-image { padding: .45rem; box-shadow: 0 12px 28px #302a2112; }
.exhibit-item h3 { font-size: clamp(1.8rem, 2.4vw, 2.75rem); }
.exhibit-item .text-link { min-height: 44px; }
.photo-edge { box-shadow: 1px 2px 0 #958a79, 0 18px 40px #100e0b1a; }
.body-copy { font-size: 1rem; line-height: 1.8; }
.editorial-copy h2 { font-size: clamp(3rem, 4.6vw, 5.4rem); }
.generation-planes { z-index: 0; }
.lili-copy { isolation: isolate; }
.lili-copy::before { content: ""; position: absolute; inset: -1rem; background: var(--paper); opacity: .87; z-index: -1; }
.partners-grid { gap: 2.5rem; }
.partner-card { min-height: 120px; }
.contact-scene { padding-top: calc(var(--journey-gap) * 1.3); }
.contact-form input, .contact-form textarea { transition: border-color .25s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #d6b68e; }
.submit-button, .button-light { transition: background-color .25s, transform .2s; }
.submit-button:active, .button-light:active { transform: translateY(1px); }
.footer { padding-bottom: 7rem; }


@media (max-width: 999px) {
  .nav { height: 5rem; }
  .journey-nav { padding-left: 9vw; padding-right: 9vw; }
  .journey-nav a { width: 100%; }
}
@media (max-width: 680px) {
  .journey-nav { right: 0; left: 0; bottom: 0; padding: .35rem 9vw calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-light); }
  .journey-nav a { min-height: 42px; font-size: .88rem; }
  #journey-count { font-size: .75rem; }
  .kicker, .scene-number, .lili-name { font-size: .76rem; }
  .hero-photo figcaption, .archive-plane figcaption, .founder-portrait figcaption, .lili-portrait figcaption { font-size: .8rem; }
  .status, .exhibit-meta, .event-tag, .event-n, .text-link, .event-link { font-size: .85rem; }
  .mission-intro h2, .actions-head h2 { font-size: 12vw; }
  .editorial-copy h2 { font-size: 12vw; }
  .exhibit-item:nth-child(2) { margin-top: 0; }
  .lili-copy::before { display: none; }
  .partners-scene { padding-bottom: 5rem; }
  .contact-form label, .form-note { font-size: .85rem; }
  .footer-address, .footer-bottom { font-size: .8rem; }
  .footer a { padding: .35rem 0; }
  .hero-copy .kicker, .kicker, .scene-number, .lili-name,
  .hero-photo figcaption, .archive-plane figcaption, .founder-portrait figcaption,
  .lili-portrait figcaption, .status, .exhibit-meta, .event-tag, .event-n,
  .text-link, .event-link, .mission-n, .contact-meta-item, .contact-meta-item .lbl,
  .contact-form label, .form-note, .footer-address, .footer-bottom, .footer-socials,
  .submit-button, .button-light, .nav-mobile > a,
  .scroll-cue, #journey-count { font-size: .875rem; }
  .contact-form small { font-size: 1em; }
}
@media print { .story-thread, .journey-nav { display: none !important; } }

/* Œuvres communes : les œuvres participatives publiées, sur fond de galerie. */
.oeuvres-scene { padding: var(--journey-gap, 9rem) 9vw; color: var(--paper); background: var(--charcoal); }
.oeuvres-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem 6vw; max-width: 88rem; margin: 0 auto 5rem; }
.oeuvres-head .kicker { grid-column: 1 / -1; color: #cdbda6; }
.oeuvres-head h2 em { color: var(--muted-light); }
.oeuvres-head .lead { align-self: end; color: #d8cfc2; }
.oeuvres-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 4vw; max-width: 88rem; margin: 0 auto; }
.oeuvre-card { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 1.6rem; }
.oeuvre-frame { margin: 0; padding: .55rem; background: #0f0e0c; box-shadow: 0 0 0 1px var(--line-light), 0 24px 60px #0008; }
.oeuvre-frame img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: #171614; }
.oeuvre-frame img:not([src]) { visibility: hidden; }
.oeuvre-frame img[src] { aspect-ratio: auto; }
.oeuvre-frame figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; color: #a99f90; font-size: .66rem; }
.oeuvre-n { display: block; margin-bottom: .8rem; color: #bfb5a5; font-size: .68rem; letter-spacing: .06em; }
.oeuvre-copy h3 { font-size: clamp(1.7rem, 2.4vw, 2.6rem); line-height: 1.12; }
.oeuvre-meta { margin-top: .9rem; color: #bfb5a5; font-size: .82rem; }
.oeuvre-words { margin-top: .6rem; color: #d8cfc2; font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; }
.oeuvre-copy .text-link { margin-top: 1.4rem; }
@media (max-width: 999px) { .oeuvres-head { grid-template-columns: 1fr; gap: 1.5rem; } }
@media (max-width: 680px) {
  .oeuvres-scene { padding: 5rem 9vw; }
  .oeuvres-head h2 { font-size: 13vw; }
  .oeuvres-list { grid-template-columns: 1fr; gap: 4rem; }
}