/* ── Typography, per brief §12 ────────────────────────────────
   Canela (Commercial Type) and Neue Haas Grotesk (Monotype) are both licensed
   commercial faces. The web-font files cannot be included here — they have to be
   bought and dropped into dist/fonts/ (see dist/fonts/README.md for the exact
   filenames). Until then every rule below resolves to the alternative the brief
   closest free matches: Fraunces for display, Inter for text.

   Each src list starts with local(), so a licensed copy already installed on the
   machine is used for review. If neither a local install nor a file in dist/fonts/
   resolves, the face is unavailable and the stack falls through to the fallback —
   which is why the family stacks, not just these declarations, carry the fallback. */

@font-face{
  font-family: 'Canela';
  src: local('Canela Regular'), local('Canela-Regular') /* , url('dist/fonts/Canela-Regular.woff2') format('woff2') — uncomment once the file is in dist/fonts/ */;
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Canela';
  src: local('Canela Italic'), local('Canela-Italic') /* , url('dist/fonts/Canela-Italic.woff2') format('woff2') — uncomment once the file is in dist/fonts/ */;
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Canela';
  src: local('Canela Bold'), local('Canela-Bold') /* , url('dist/fonts/Canela-Bold.woff2') format('woff2') — uncomment once the file is in dist/fonts/ */;
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face{
  font-family: 'Neue Haas Grotesk';
  src: local('Neue Haas Grotesk Display Light'), local('NeueHaasDisplay-Light') /* , url('dist/fonts/NeueHaasGrotesk-Light.woff2') format('woff2') — uncomment once the file is in dist/fonts/ */;
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Neue Haas Grotesk';
  src: local('Neue Haas Grotesk Display Roman'), local('NeueHaasDisplay-Roman') /* , url('dist/fonts/NeueHaasGrotesk-Roman.woff2') format('woff2') — uncomment once the file is in dist/fonts/ */;
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Neue Haas Grotesk';
  src: local('Neue Haas Grotesk Display Mediu'), local('NeueHaasDisplay-Mediu') /* , url('dist/fonts/NeueHaasGrotesk-Medium.woff2') format('woff2') — uncomment once the file is in dist/fonts/ */;
  font-weight: 500; font-style: normal; font-display: swap;
}
/* ── Palette ─────────────────────────────────────────────── */
:root{
  --parchment: #fafaf8;
  --parchment-veil: #fcfcfa;
  --ink: #3a3a3a;       /* soft dark, not black */
  --ink-soft: #6f6f6f;
  --ink-faint: #a6a6a6;
  --rule: #dcdcdc;
  --white: #ffffff;
  --accent: #3a3a3a;
  --reveal-duration: 3000ms;
  --rhythm: 1;
  --ease: cubic-bezier(.16,.84,.20,1);
  /* Brief §12. --font-display carries the name, the chapter titles and the quotes;
     --font-text carries body copy, the discreet menu and the légendes. The fallback
     families sit inside each stack so the page still reads correctly before the
     licensed Canela / Neue Haas Grotesk files are dropped into dist/fonts/. */
  --font-display: 'Canela', 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Neue Haas Grotesk', 'Inter', "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Compatibility aliases — existing rules resolve through these. */
  --font-body: var(--font-text);
  --font-title: var(--font-display);

  /* Unified type scale (single source of truth) — one token per role so that
     same-role elements can never drift apart again. */
  --type-title: clamp(2.4rem, 6.5vw, 5rem);
  --type-title-page: clamp(1.9rem, 3.6vw, 2.6rem);
  --type-lead: clamp(1.25rem, 2.4vw, 1.65rem);
  --type-desc: clamp(1.05rem, 1.8vw, 1.3rem);
  --type-section: clamp(1.2rem, 2.4vw, 1.6rem);
  --type-body: 1rem;
  --type-label: .82rem;
  --type-meta: .74rem;
  --track-section: .16em;
  --track-meta: .2em;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin: 0; padding: 0; }
html{ background: var(--parchment); }
body{
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .06em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; -webkit-user-drag: none; user-drag: none; pointer-events: none; }
a{ color: inherit; }
::selection{ background: rgba(90,70,54,.14); color: var(--ink); }

/* ── Image protection ────────────────────────────────────── */
.frame, .gallery-item{ -webkit-user-select: none; user-select: none; }
/* Block image dragging / long-press save */
img, .img, .gallery-img{
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* Restore pointer-events for interactive elements that contain images */
a img, button img, .frame, .gallery-overlay{ pointer-events: auto; }

/* ── Layout ──────────────────────────────────────────────── */
main{ display: block; }

/* Universe sections */
.universe{
  position: relative;
  padding: 8vh 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.universe + .universe{ padding-top: 6vh; }

/* Photos */
.photo{
  margin: 0;
  width: 100%;
  max-width: 540px;
  display: flex;
  justify-content: center;
}
.photo + .photo{ margin-top: 1.2cm; }
.universe > .photo:first-child{ margin-top: 0; }

.frame{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
}
.frame > .img{
  width: 100%;
  height: auto;
  display: block;
  transition:
    opacity var(--reveal-duration) var(--ease);
  opacity: 0;
}
.frame > .placeholder{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #f3ede0 0%, #ede5d4 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--ease);
}
.frame > .placeholder .ph-meta{
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: .04em;
  line-height: 1.6;
}
.frame > .placeholder .ph-meta b{ display:block; color: var(--ink); font-weight:400; margin-bottom: 4px; }
.frame > .veil{
  position: absolute; inset: 0;
  background: var(--parchment-veil);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--reveal-duration) var(--ease);
}
.frame.is-revealed > .img,
.frame.is-revealed > .placeholder{ opacity: 1; }
.frame.is-revealed > .veil{ opacity: 0; }

/* Beyrouth — white border frame */
.universe.has-mat .photo .frame{
  border: 22px solid var(--white);
  box-shadow: 0 8px 32px rgba(90,70,54,.12), 0 1px 3px rgba(90,70,54,.07);
}
/* Placeholder stays full-frame */
.universe.has-mat .frame > .placeholder{ inset: 0; }

.universe-head{
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 2.5vh;
  padding-bottom: 0;
  text-align: center;
  pointer-events: none;
}
.universe-head h2{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--ink);
  margin: 0 0 .6rem;
  letter-spacing: .06em;
  opacity: .88;
}
.universe-head .subtitle{
  font-weight: 300;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: var(--ink);
  max-width: 640px;
  margin: 0 auto 2.6rem;
  letter-spacing: .04em;
  opacity: .88;
  line-height: 1.55;
}
.universe-head .series-title{
  font-family: var(--font-title);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--ink);
  letter-spacing: .12em;
  margin: 0 0 1.2rem;
  line-height: 1.1;
}
/* Matière sub-sections sit under the MATIÈRE series title → smaller */
#matiere-objets .universe-head h2,
#matiere-glace .universe-head h2,
#matiere-corp .universe-head h2,
#matiere-paysage .universe-head h2{
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
.universe-head .epigraph{
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  margin: 0 auto;
  line-height: 1.5;
  max-width: 480px;
  opacity: .75;
}

.universe-description{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.9rem, 1.3vw, 1.1rem);
  color: var(--ink);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  text-align: center;
  align-self: center;
  opacity: .85;
}
.universe-description p{ margin: 0 0 1.1rem; }
.universe-description p:last-child{ margin-bottom: 0; }
.feature-img{ margin: 1.5rem auto 0; max-width: 300px; width: 100%; }
.feature-img img{ width: 100%; height: auto; display: block; }
.desc-title{
  font-family: var(--font-title);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .1em;
  color: var(--ink);
  margin: .4rem 0 0;
  line-height: 1.25;
}
.section-label{
  display: none;
}

/* Bio */
.site-intro{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6vh 6vw 0;
}
.site-intro + .universe{ padding-top: 0; }
.intro-name{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: var(--ink);
  text-align: center;
  margin: 0 0 2rem;
  letter-spacing: .01em;
}
.site-intro .bio-portrait{
  max-width: 300px;
  margin: 0;
}
.bio{
  padding: 4vh 6vw 12vh;
  max-width: 720px;
  margin: 0 auto;
}
.bio-name{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--accent);
  text-align: center;
  margin: 0 0 2rem;
  letter-spacing: .01em;
}
.kicker{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink-faint);
  margin: 0 0 3rem;
  letter-spacing: .15em;
  text-transform: lowercase;
  text-align: center;
}
.narrow.text p{
  margin: 0 0 1.4rem;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
}
.narrow.text .lede{
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 2rem;
}
.bio-portrait{
  margin: 3vh auto 5vh;
  max-width: 380px;
  width: 100%;
}
.bio-portrait .frame{ /* natural ratio — no crop */ }

/* Bio + TITUS */
.bio,
.bio p,
#titus .universe-head .epigraph{
  font-family: var(--font-body);
}

/* ── Menu discret (brief §4) ───────────────────────────────────
   Fixed top right, mirroring where the cover puts the name, so the eye already knows
   to look there. Absent over the cover — the six chapters are on that screen in full —
   then a slow fade in, and it stays for the rest of the parcours.

   No background of any kind, at any point. What makes it legible over a full-bleed
   photograph is a parchment halo on the letters: invisible against the parchment page,
   and a soft separation over an image. A panel would put a surface over the work, which
   is the one thing this site does not do. */
.site-menu{
  position: fixed;
  top: clamp(2.4vh, 4vh, 5vh);
  right: 6vw;
  /* Under the PDF overlay (9000) and the gallery overlay (1000) — a menu floating over
     an opened portfolio would be a mistake. */
  z-index: 800;
  text-align: right;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s;
}
.site-menu.is-visible{
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s var(--ease), visibility 0s;
}
.site-menu-trigger,
.site-menu a{
  color: var(--ink);
  /* Layered so it reads as a glow rather than an outline. Invisible against the page,
     a soft separation over a pale photograph. */
  text-shadow:
    0 0 4px var(--parchment),
    0 0 10px var(--parchment),
    0 0 22px var(--parchment),
    0 0 34px var(--parchment);
  transition: color .8s var(--ease), text-shadow .8s var(--ease), opacity .6s var(--ease);
}
/* Over a photograph, the exact treatment the cover uses for the name and the chapter
   list — parchment on a soft dark halo — because the chapter openings are full-bleed and
   the darkest of them leaves dark ink unreadable. Applied per line: an open list can
   straddle the seam between an image and the page below it. */
.site-menu-trigger.is-over-image,
.site-menu a.is-over-image{
  color: var(--parchment);
  /* The cover's halo, tightened. The cover sits on one known photograph; the menu
     passes over all of them, including pale ones where a soft wide shadow alone leaves
     parchment text washed out. A denser inner shadow carries it without ever reading as
     a box. */
  text-shadow:
    0 0 2px rgba(58,58,58,.75),
    0 1px 14px rgba(58,58,58,.60),
    0 0 30px rgba(58,58,58,.35);
}
.site-menu-trigger{
  background: none;
  border: 0;
  cursor: pointer;
  /* Generous hit area on a phone; the visual size stays small. */
  padding: .55rem 0 .55rem 1.2rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity .6s var(--ease);
}
.site-menu-trigger:hover{ opacity: 1; }
.site-menu-list{
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.site-menu.is-open .site-menu-list{
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--ease), visibility 0s;
}
.site-menu-list li + li{ margin-top: .45rem; }
.site-menu-list a{
  display: inline-block;
  padding: .12rem 0;
  font-size: .86rem;
  letter-spacing: .06em;
  text-decoration: none;
  opacity: .68;
  transition: opacity .5s var(--ease);
}
.site-menu-list a:hover{ opacity: 1; }
/* The chapter being read, marked by presence rather than by a rule or a dot. */
.site-menu-list a[aria-current]{ opacity: 1; }
.site-menu-top{ margin-top: 1.3rem !important; }
.site-menu-top a{
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
}

@media (max-width: 700px){
  .site-menu{ right: 5vw; top: 2.2vh; }
  /* Touch targets: at least 44px tall on a phone, for the trigger and every entry.
     The padding does the work, so nothing grows visually — the tighter li spacing
     below gives the height back. */
  .site-menu-trigger{ padding: 1.05rem 0 1.05rem 1.6rem; }
  .site-menu-list{ margin-top: .2rem; }
  .site-menu-list li + li{ margin-top: 0; }
  .site-menu-list a{ font-size: .95rem; padding: .62rem 0; }
  .site-menu-top{ margin-top: .9rem !important; }
}

@media (prefers-reduced-motion: reduce){
  /* §4 asks that visitors who reduce animation be respected. The menu still appears
     and still opens — it simply stops fading. */
  .site-menu,
  .site-menu.is-visible,
  .site-menu-list,
  .site-menu.is-open .site-menu-list,
  .site-menu-trigger,
  .site-menu a{
    transition: none;
  }
}

/* ── Dernier écran (brief §10) ─────────────────────────────────
   « Le dernier écran doit être très vide. » A full screen of parchment holding one
   line of destinations and the coordonnées, centred, with nothing above them. The
   Expositions list and the portfolio blurb that used to sit here are gone: the list
   moved to expositions.html, which is what Expositions now links to, and §10 asks
   for no conclusion. */
.fin{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3vh, 5vh, 6vh);
  padding: clamp(3vh, 5vh, 7vh) 6vw clamp(8vh, 12vh, 14vh);
  text-align: center;
}
.fin-links ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2.8rem);
}
.fin-link{
  display: inline-block;
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .5s var(--ease);
  opacity: .82;
}
.fin-link:hover{ opacity: 1; }
/* The PDF entry is a button, since it opens the overlay rather than navigating.
   It has to be indistinguishable from the links beside it. */
button.fin-link{
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: inherit;
}
.fin-coordonnees{
  font-style: normal;
  font-size: .82rem;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.fin-coordonnees a{
  color: inherit;
  text-decoration: none;
  transition: color .5s var(--ease);
}
.fin-coordonnees a:hover{ color: var(--ink); }

@media (max-width: 700px){
  /* Stacked rather than wrapped: uppercase labels reflowing mid-line read as a
     paragraph, not as navigation. The coordonnées stack for the same reason — wrapped
     inline, the « · » separator ends up dangling at the end of a line. */
  .fin-links ul{ flex-direction: column; gap: 1.5rem; }
  .fin-coordonnees{ display: flex; flex-direction: column; gap: .7rem; line-height: 1.5; }
  .fin-coordonnees span{ display: none; }
}

/* ── PDF Modal ───────────────────────────────────────────── */
.pdf-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10,8,6,.80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 2vh 3vw;
}
.pdf-overlay.is-open{ display: flex; }
.pdf-shell{
  position: relative;
  width: min(820px, 96vw);
  height: min(92vh, 1120px);
  background: #faf8f3;
  border-radius: 2px;
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdf-close{
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  color: #7a6a56;
  opacity: .7;
  transition: opacity .25s;
}
.pdf-close:hover{ opacity: 1; }
.pdf-frame{
  flex: 1;
  width: 100%;
  border: none;
  display: block;
}
.colophon{
  margin-top: 8vh;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .08em;
}


/* Desktop masonry columns (>=900px) */
@media (min-width: 900px){
  .universe{ padding: 10vh 5vw; }

  /* ── Default: 2-column masonry flow ── */
  .photos-grid{
    width: 100%;
    margin: 0 auto;
    columns: 2;
    column-gap: 1.8rem;
  }
  .photos-grid .photo{
    break-inside: avoid;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 0 1.8rem;
    padding: 0;
  }
  .photos-grid .photo + .photo{ margin-top: 0; }

  /* ── 3-column override ── */
  .photos-grid.cols-3{ columns: 3; column-gap: 1.2rem; }
  .photos-grid.cols-3 .photo{ margin-bottom: 1.2rem; }

  /* ── Givrée: row-major grid so order = left-to-right reading order ── */
  #glace .photos-grid{
    columns: unset;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  #glace .photos-grid .photo{ margin: 0; }

  /* ── Transformation: preserve explicit 12-col grid ── */
  .photos-grid.explicit{
    columns: unset;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1.2cm;
    row-gap: 1.2cm;
    align-items: start;
  }
  .photos-grid.explicit .photo{
    margin: 0;
    grid-column: span 12;
  }
  .photos-grid.explicit .photo.span-2{ grid-column: span 6; }
  .photos-grid.explicit .photo.fill{ align-self: start; }
  .photos-grid.explicit .photo.fill > .frame{ max-width: none; margin: 0; }

  /* ── Transformation + Matière paysage: 3-col bottom-aligned grid ── */
  #transformation .photos-grid.explicit,
  #matiere-paysage .photos-grid.explicit{
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.2rem;
    row-gap: 1.2rem;
    align-items: stretch;
  }
  #transformation .photos-grid.explicit .photo,
  #matiere-paysage .photos-grid.explicit .photo{
    grid-column: unset;
    min-height: 0;
  }
  #transformation .photos-grid.explicit .frame,
  #matiere-paysage .photos-grid.explicit .frame{ height: 100%; min-height: 0; }
  #transformation .photos-grid.explicit .frame > .img,
  #matiere-paysage .photos-grid.explicit .frame > .img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ── Expo: 3 equal-height columns, bottoms aligned ── */
  #expo .photos-grid.explicit{
    columns: unset;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    align-items: stretch;
  }
  /* Exposition: poster beside the description */
  #expo .feature-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: left;
  }
  #expo .feature-row .universe-description{
    margin: 0;
    max-width: none;
    text-align: left;
    align-self: center;
  }
  #expo .feature-img{
    margin: 0;
    flex: 0 0 300px;
    max-width: 300px;
  }
  #expo .photos-grid.explicit .photo{
    margin: 0;
    grid-column: unset;
    min-height: 0;
  }
  #expo .photos-grid.explicit .frame{ height: 100%; min-height: 0; }
  #expo .photos-grid.explicit .frame > .img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Mobile */
@media (max-width: 720px){
  .universe{ padding: 4vh 0; }
  .photo{ max-width: 100%; padding: 0 4vw; }
  .photo + .photo{ margin-top: 1.2cm; }
  .universe-head{ padding: 0 6vw; }
  .universe.has-mat .photo .frame{ border-width: 18px; }
  .bio{ padding: 10vh 6vw; }

}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .frame > .img, .frame > .placeholder, .frame > .veil{
    transition: opacity .4s ease;
    transform: none !important;
    filter: none !important;
  }
}

/* Gallery CTA + Modal */
.gallery-cta{
  display: block;
  margin: 2.5rem auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: clamp(.85rem, 1.2vw, .95rem);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: .1em;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0;
  transition: color .2s;
}
.gallery-cta:hover{ color: var(--ink); }

.gallery-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20,14,10,.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
}
.gallery-modal{
  position: relative;
  background: var(--parchment);
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 3.5rem 2.5rem 2.5rem;
}
.gallery-close{
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-soft);
  font-weight: 300;
  transition: color .2s;
}
.gallery-close:hover{ color: var(--ink); }
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  align-items: end;
}
.gallery-grid .gallery-item{ margin: 0; }
.gallery-grid .gallery-img{
  width: 100%;
  height: auto;
  display: block;
}
@media(max-width: 600px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-modal{ padding: 3rem 1.2rem 1.5rem; }
}

/* Hero fade (kept for compatibility; not currently rendered) */
.hero{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.hero-frame{ width: 100%; max-width: 540px; aspect-ratio: 9/16; }
.hero-img{ width: 100%; height: 100%; object-fit: contain; }

/* ── Titles: Futura, all-caps, no bold, wide tracking ─────── */
.universe-head h2,
#titus .universe-head h2,
.chapter-title,
.intro-name,
.bio-name,
.kicker{
  font-family: var(--font-title);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ── Page d'ouverture (brief §3) ──────────────────────────────
   Photograph full bleed. Name top right, six chapters bottom left, scroll hint
   bottom right. Text sits directly on the photograph, so it carries a very soft
   parchment glow rather than a scrim or a panel — enough to stay legible on a light
   image without putting a graphic element between the visitor and the work. */
.cover{
  position: relative;
  height: 100vh;   /* fallback: Safari < 15.4, Chrome < 108 have no svh */
  height: 100svh;
  /* No min-height. A floor taller than the viewport — which 32rem is on any landscape
     phone — pushes the chapter navigation below the fold, so the opening page arrives
     with no navigation on it at all. The viewport height is what "plein écran" means. */
  width: 100%;
  overflow: hidden;
  display: block;
  padding: 0;
}
.cover + .universe{ padding-top: 8vh; }

/* Two very soft veils, top and bottom, so the name and the chapters stay legible over
   any photograph — the cover image is meant to change, and dark ink on a mid-tone
   photograph disappears. Tinted from --ink rather than black, per the no-black rule.
   Nothing here reads as a panel or a graphic element. */
.cover::before,
.cover::after{
  content: '';
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 1;
}
.cover::before{
  top: 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(58,58,58,.30), rgba(58,58,58,0));
}
.cover::after{
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(58,58,58,.36), rgba(58,58,58,0));
}

.cover picture{ display: block; height: 100%; }
.cover-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cover-name,
.cover-nav,
.cover-scroll{
  position: absolute;
  z-index: 2;
  color: var(--parchment);
  text-shadow: 0 1px 20px rgba(58,58,58,.55), 0 0 3px rgba(58,58,58,.35);
}

.cover-name{
  top: 6vh;
  right: 6vw;
  margin: 0;
  /* Doubled at Julian's request, from clamp(.82rem, 1.15vw, 1.05rem). */
  font-size: clamp(1.64rem, 2.3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: .28em;
  line-height: 1.4;
  text-align: right;
}

.cover-nav{
  bottom: 8vh;
  left: 6vw;
}
.cover-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.cover-nav li + li{ margin-top: .35rem; }
.cover-nav a{
  text-decoration: none;
  font-size: clamp(.9rem, 1.05vw, 1.02rem);
  letter-spacing: .07em;
  line-height: 1.5;
  display: inline-block;
  transition: opacity .6s var(--ease);
  opacity: .88;
}
.cover-nav a:hover{ opacity: 1; }

.cover-scroll{
  bottom: 8vh;
  right: 6vw;
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .62;
  transition: opacity .6s var(--ease);
}
.cover-scroll:hover{ opacity: .9; }

/* Movement: slow, almost imperceptible. The photograph never animates — it is simply
   there. The name arrives, then each chapter in turn. */
@keyframes coverArrive{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.cover-name{
  opacity: 0;
  animation: coverArrive 2400ms var(--ease) 400ms both;
}
.cover-nav li{
  opacity: 0;
  animation: coverArrive 1800ms var(--ease) both;
  animation-delay: calc(1600ms + var(--i) * 260ms);
}
.cover-scroll{
  animation: coverArrive 1600ms var(--ease) 3400ms both;
}

@media (max-width: 720px){
  /* Composition has to hold on a phone: the name stays readable, the chapters stay
     reachable, and nothing is cropped arbitrarily tighter than on desktop. */
  .cover-name{ top: 4.5vh; right: 7vw; letter-spacing: .22em; }
  .cover-nav{ bottom: 11vh; left: 7vw; }
  .cover-nav a{ font-size: 1rem; }
  .cover-nav li + li{ margin-top: .5rem; }
  .cover-scroll{ bottom: 5vh; right: 7vw; font-size: .66rem; }
}

/* Short viewports — landscape phones above all. Six chapters plus the name plus the
   scroll hint have to fit in as little as ~320px of height, so the list tightens. */
@media (max-height: 540px){
  .cover-name{ top: 4vh; right: 5vw; font-size: 1.56rem; letter-spacing: .2em; }
  .cover-nav{ bottom: 5vh; left: 5vw; }
  .cover-nav a{ font-size: .84rem; line-height: 1.35; }
  .cover-nav li + li{ margin-top: .1rem; }
  .cover-scroll{ bottom: 5vh; right: 5vw; font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce){
  .cover-name,
  .cover-nav li,
  .cover-scroll{
    animation: none;
    opacity: 1;
  }
  .cover-scroll{ opacity: .62; }
}

/* ── Chapters (brief §5) ──────────────────────────────────────
   Each chapter runs: full-bleed opening → respiration → verb + sous-titre →
   corps visuel → one sentence → full-bleed exit. */
.chapter{ position: relative; display: block; }

/* 1 & 6 — the plates that open and close a chapter. Full width, cinematic height. */
.bleed{ margin: 0; width: 100%; }
.bleed .frame{
  width: 100%;
  height: 82vh;   /* fallback for browsers without svh */
  height: 82svh;
  overflow: hidden;
}
.bleed .img{ width: 100%; height: 100%; object-fit: cover; }

/* 2 — respiration. A large white space before the title arrives. */
.respiration{ height: clamp(14vh, 26vh, 30vh); }

/* 3 — the verb, then one very short line. Sentence case, per the brief's own
   chapter names: Apparaître, not APPARAÎTRE. */
.chapter-head{ text-align: center; padding: 0 6vw; }
.chapter-title{
  margin: 0;
  font-size: var(--type-title);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: none;
}
.chapter-subtitle{
  margin: 1.6rem auto 0;
  max-width: 42ch;
  font-size: var(--type-desc);
  line-height: 1.5;
  color: var(--ink-soft);
}
.chapter-intro{
  max-width: calc(44ch + 12vw);
  margin: clamp(3rem, 7vh, 6rem) auto 0;
  padding: 0 6vw;
  text-align: center;
  font-size: var(--type-body);
}

/* 4 — corps visuel. Two independent columns, each filled top to bottom, every
   image at its natural height. The two sides carry different heights, so they drift
   out of phase as you scroll: the sequence reads as a rhythm rather than a grid.
   Nothing is cropped to fit a cell. */
.plates{
  display: flex;
  align-items: flex-start;
  gap: clamp(1.1rem, 4.5vw, 4.5rem);
  max-width: 1440px;
  margin: clamp(6vh, 11vh, 14vh) auto clamp(3vh, 6vh, 8vh);
  padding: 0 6vw;
}
.plates-col{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 4.5vw, 4.5rem);
}
/* The second column starts lower — the staircase. On the reference site the drift
   comes for free, because its images mix portrait and landscape so the two columns
   accumulate different heights. Most of Sherine's series are uniformly 2:3, which
   would make the columns align row for row and read as a plain grid. This offset puts
   them out of phase deliberately, and keeps them that way whatever she swaps in.

   A percentage, not a vh clamp. `margin-top` resolves against the *width* of the
   containing block, which is also what sets the column width and therefore the image
   height — so the step stays the same share of an image at every window size. A
   viewport-height clamp drifted: the same page read as a staircase on one screen and
   as a plain grid on another. 21% of the container ≈ 30% of an image's height at 2:3. */
.plates-col:nth-child(2){ margin-top: 21%; }
/* One image on its own: centred at a column's width, rather than left in one half of a
   two-column row with the other half empty. */
.plates--single{ justify-content: center; }
.plates--single .plates-col{ flex: 0 1 50%; }
.plate{ margin: 0; width: 100%; }
.plate .frame{ width: 100%; }
.plate .img{ width: 100%; height: auto; }

/* Transmettre keeps the white passe-partout the Beirut series had. */
.chapter.has-mat .plate .frame{
  border: 22px solid var(--white);
  box-shadow: 0 8px 32px rgba(90,70,54,.12), 0 1px 3px rgba(90,70,54,.07);
}

/* Légende — discreet, but present, to identify the work (brief §12). */
.legende{
  margin: 0 auto clamp(6vh, 10vh, 13vh);
  padding: 0 6vw;
  text-align: center;
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* 5 — one sentence. Never a paragraph. */
.chapter-sentence{
  max-width: calc(42ch + 12vw);
  margin: 0 auto clamp(10vh, 16vh, 20vh);
  padding: 0 6vw;
  text-align: center;
  font-size: var(--type-lead);
  line-height: 1.65;
  color: var(--ink);
}

/* Coda of Transmettre — portrait, name, biography. No « Bio » heading (§9). */
.coda{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6vw clamp(3vh, 6vh, 8vh);
}
.coda-portrait{ margin: 0 0 clamp(4vh, 8vh, 10vh); width: 100%; max-width: 420px; }
.coda-portrait .img{ width: 100%; height: auto; }
.coda-name{
  margin: 0 0 clamp(3vh, 5vh, 6vh);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-align: center;
}
.coda-text{ max-width: 62ch; }
.coda-text p{ margin: 0 0 1.4rem; text-align: left; }
.coda-text p:last-child{ margin-bottom: 0; }

@media (max-width: 720px){
  /* One column on a phone. The images keep their own height, so the sequence
     survives — it simply becomes a single river. */
  .plates{ flex-direction: column; gap: 1.2cm; padding: 0 4vw; }
  .plates-col{ gap: 1.2cm; }
  /* No staircase in a single column — the offset would just open a gap in the middle
     of the river, wider than every other gap around it. */
  .plates-col:nth-child(2){ margin-top: 0; }
  .bleed .frame{ height: 68svh; }
  .respiration{ height: 12vh; }
  .chapter.has-mat .plate .frame{ border-width: 14px; }
  .coda-text p{ text-align: left; }
}

/* ── Brief §12 — per-element assignments ──────────────────────
   Nom → Canela Bold · Titres → Canela Regular · Citations → Canela Italic
   Textes → Neue Haas Grotesk · Menu → NHG Medium · Légendes → NHG Light
   The title/name selectors above already route through --font-title, which now
   resolves to --font-display; what follows sets the weights and styles the brief
   asks for, and moves légendes and the menu onto the text face. */

/* Nom « Sherine Geagea » — Canela Bold */
.intro-name,
.bio-name,
.cover-name,
.coda-name{
  font-family: var(--font-display);
  font-weight: 700;
}

/* Citations — Canela Italic */
.universe-head .epigraph,
.universe-head .subtitle,
#titus .universe-head .epigraph,
.cover-subtitle,
.chapter-subtitle,
.chapter-sentence,
.citation{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Légendes des œuvres — Neue Haas Grotesk Light */
.universe-head .series-title,
.legende{
  font-family: var(--font-text);
  font-style: normal;
  font-weight: 300;
}

/* Menu discret — Neue Haas Grotesk Medium */
.gallery-cta,
.cover-nav a,
.site-menu a,
.site-menu-trigger,
.cover-scroll,
.fin-link{
  font-family: var(--font-text);
  font-style: normal;
  font-weight: 500;
}

/* ── TITUS, inside Habiter (brief §7) ─────────────────────────
   The récit, then Titus en mouvement, then privatisation kept visibly apart from
   the artistic narrative and leading to its own page (§12). */
.titus{
  max-width: calc(62ch + 12vw);   /* +12vw so the padding does not eat the measure */
  /* Breathing room: without it the récit's opening line lands directly under the
     chapter's sous-titre and the two italic serif lines read as one block. */
  margin: clamp(6vh, 10vh, 12vh) auto 0;
  padding: 0 6vw clamp(4vh, 8vh, 10vh);
}
/* The TITUS wordmark, opening the Titus block — space above and below so it reads as
   a threshold into the maison. It links to titus.html; the click target is the mark
   itself, centred, with a quiet hover. */
.titus-logo-link{
  display: block;
  width: clamp(84px, 12vw, 128px);
  margin: clamp(3vh, 6vh, 8vh) auto clamp(4vh, 7vh, 9vh);
  opacity: .92;
  transition: opacity .45s var(--ease);
}
.titus-logo-link:hover{ opacity: 1; }
.titus-logo{
  display: block;
  width: 100%;
  height: auto;
}
.titus-quote{
  margin: 0 0 clamp(3vh, 6vh, 7vh);
  text-align: center;
  font-size: var(--type-lead);
  line-height: 1.55;
}
.titus-recit p{ margin: 0 0 1.4rem; }
.titus-recit p:last-child{ margin-bottom: 0; }

.titus-kicker{
  margin: clamp(6vh, 10vh, 12vh) 0 clamp(2vh, 4vh, 5vh);
  font-family: var(--font-text);
  font-size: var(--type-section);
  font-weight: 500;
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.titus-mouvement{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.8rem, 3vw, 2.6rem);
}
.titus-mouvement h4{
  margin: 0 0 .4rem;
  font-family: var(--font-text);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.titus-mouvement p{ margin: 0; }
.titus-mouvement a{ border-bottom: 1px solid var(--rule); text-decoration: none; }

/* Privatisation — a commercial offer sitting inside an artist's parcours, so it is
   set apart by a rule and quieter type rather than by a box or a button. */
.privatisation{
  margin-top: clamp(3vh, 5vh, 6vh);
  padding-top: clamp(2vh, 4vh, 5vh);
  border-top: 1px solid var(--rule);
}
.privatisation-lede{
  margin: 0 0 clamp(2vh, 4vh, 5vh);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-desc);
  line-height: 1.6;
}
.privatisation-links{
  margin: 0;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .84rem;
  letter-spacing: .1em;
}
.privatisation-links a{
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 2px;
  transition: border-color .5s var(--ease);
}
.privatisation-links a:hover{ border-color: var(--ink); }

/* « Découvrir l'espace » — an outlined CTA under the privatisation lede that leads to
   titus.html. Fills on hover; quiet enough to sit inside an artist's page. */
.privatisation-cta{
  display: inline-block;
  margin-top: clamp(2.5vh, 4vh, 5vh);
  padding: .9em 2.1em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.privatisation-cta:hover{ background: var(--ink); color: var(--parchment); }

/* Chapter galleries — a titled set of images (the TITUS space, the Barbie series),
   set within a chapter's scroll. A masonry keeps every file's natural aspect while
   the two columns drift out of phase, echoing the corps visuel; a small caps title
   names the set. Namespaced away from the .gallery-* lightbox above. */
.chapter-gallery{
  max-width: 1440px;
  margin: clamp(6vh, 11vh, 14vh) auto clamp(3vh, 6vh, 8vh);
  padding: 0 6vw;
}
.chapter-gallery-title{
  margin: 0 0 clamp(3.5vh, 6vh, 7vh);
  text-align: center;
  font-family: var(--font-text);
  font-weight: 500;
  /* ~3× the original .74rem kicker, at Julian's request — a proper section title. */
  font-size: var(--type-section);
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.chapter-gallery-grid{
  display: flex;
  align-items: flex-start;
  gap: clamp(1.1rem, 4.5vw, 4.5rem);
}
.chapter-gallery-col{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 4.5vw, 4.5rem);
}
/* The staircase: the second column starts lower, exactly like the corps visuel. */
.chapter-gallery-col:nth-child(2){ margin-top: 21%; }
@media (max-width: 720px){
  /* One river on a phone, like the corps visuel. */
  .chapter-gallery-grid{ flex-direction: column; gap: 1.2cm; }
  .chapter-gallery-col{ gap: 1.2cm; }
  .chapter-gallery-col:nth-child(2){ margin-top: 0; }
  .chapter-gallery{ padding: 0 4vw; }
}

/* ── Secondary page (titus.html) ──────────────────────────────
   Not part of the scroll — a quiet document you arrive at from Habiter. */
.page{
  max-width: calc(68ch + 12vw);
  margin: 0 auto;
  padding: clamp(8vh, 14vh, 16vh) 6vw clamp(10vh, 16vh, 18vh);
}
.page-back{
  display: inline-block;
  margin-bottom: clamp(5vh, 9vh, 11vh);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.page-back:hover{ color: var(--ink); }
/* TITUS wordmark as the masthead of titus.html — centred above the description. */
.page-logo{
  display: block;
  width: clamp(96px, 15vw, 148px);
  height: auto;
  margin: clamp(1vh, 3vh, 4vh) auto clamp(4vh, 7vh, 9vh);
  opacity: .92;
}
.page h1{
  margin: 0 0 clamp(3vh, 5vh, 6vh);
  font-family: var(--font-display);
  font-size: var(--type-title-page);
  font-weight: 400;
  line-height: 1.15;
}
.page-lede{
  margin: 0 0 clamp(3vh, 6vh, 7vh);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-desc);
  line-height: 1.6;
}
/* The opening line of titus.html — a touch larger than the other lede, as the page's
   first statement. */
.page-lede.page-lede--hero{  /* both classes -> wins over .page-lede regardless of source order */
  font-size: var(--type-lead);
  line-height: 1.4;
}
.page p{ margin: 0 0 1.4rem; }
.page h2{
  margin: clamp(7vh, 11vh, 13vh) 0 clamp(2vh, 4vh, 5vh);
  font-family: var(--font-text);
  font-size: var(--type-section);
  font-weight: 500;
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.page-contact{ list-style: none; margin: 0; padding: 0; }
.page-contact li{ margin-bottom: .6rem; }
.page-contact a{ text-decoration: none; border-bottom: 1px solid var(--rule); }

/* The TITUS space gallery on titus.html — the photography moved here from Habiter's
   « Découvrir l'espace ». A two-column masonry that keeps each file's natural aspect.
   Static: this page loads no app.js, so it must NOT use the .frame/.veil reveal (which
   stays at opacity 0 without the IntersectionObserver). Plain <img>/<video> instead. */
.espace-gallery{
  columns: 2;
  column-gap: clamp(.9rem, 2.5vw, 1.4rem);
  margin: clamp(3vh, 5vh, 6vh) 0 0;
}
.espace-plate{
  margin: 0 0 clamp(.9rem, 2.5vw, 1.4rem);
  break-inside: avoid;
}
.espace-plate img,
.espace-plate video{
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 560px){
  .espace-gallery{ columns: 1; }
}

/* The exhibition list on expositions.html — a year against its entry, one rule
   between them, nothing more. */
.page-list{ list-style: none; margin: 0 0 clamp(4vh, 7vh, 8vh); padding: 0; }
.page-list li{
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.page-list li:last-child{ border-bottom: none; }
.page-list-year{
  font-family: var(--font-text);
  font-weight: 300;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.page-list-meta{ display: block; }
.page-list-title{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-desc);
  line-height: 1.4;
}
.page-list-where{
  display: block;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* Images on a secondary page: a single column at natural ratio, nothing cropped. */
/* Exposition gallery — breaks out of the narrow reading column into a wide two-column
   staircase, echoing the parcours corps visuel: the second column drifts down. */
.page-figures{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 1180px);
  margin-top: clamp(6vh, 11vh, 14vh);
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3.2vw, 3.2rem);
}
.page-figures-col{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3.2vw, 3.2rem);
}
.page-figures-col:nth-child(2){ margin-top: 12%; }
.page-figures figure{ margin: 0; }
.page-figures img{ display: block; width: 100%; height: auto; }
@media (max-width: 700px){
  /* One river on a phone: no breakout, no staircase. */
  .page-figures{ left: auto; transform: none; width: 100%; flex-direction: column; gap: 1.2cm; }
  .page-figures-col{ gap: 1.2cm; }
  .page-figures-col:nth-child(2){ margin-top: 0; }
}

@media (max-width: 700px){
  .page-list li{ grid-template-columns: 1fr; gap: .3rem; }
}

/* A line attached to the images directly above it, not to the whole chapter. */
.body-note{
  max-width: calc(40ch + 12vw);
  margin: clamp(-2vh, -1vh, 0px) auto clamp(5vh, 9vh, 11vh);
  padding: 0 6vw;
  text-align: center;
  font-size: var(--type-desc);
  line-height: 1.6;
  color: var(--ink-soft);
}