/* ============================================================================
   The Ekiti Experience '26 — "Five Arcs"
   Built to the mechanism measured off styles.refero.design/style/6c0b77d3
   (Structured): a putty ground, a small centred stack, and one enormous word
   cropping both viewport edges with photographic masses pushing in from the
   bottom corners to OCCLUDE it. The occlusion is the trick — giant type on its
   own reads as bland.

   Three rules the page obeys:
     1. One idea owns each screen.
     2. Display type is Instrument Serif; Inter does body, lists and UI.
     3. Colour is the exception — the lockup and Register, nothing else.
   ========================================================================== */

:root{
  --putty:#E5E4E0; --black:#000000; --white:#FFFFFF;
  --bone:#EDECE8;  --vellum:#D7D5CE; --graphite:#595855;
  --beige:#F4F3F0; --ink:#1A1915;          /* the welcome's own paper */
  --magenta:#9912A5; --magenta-deep:#760080; --gold:#BD9439;
  --gut:4.1667vw;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--putty); color:var(--black);
  font-family:var(--grot);
  font-size:var(--t-body); line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 1;          /* tabular figures page-wide */
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- type tiers ----------------------------------------------------------- */
/* .reveal masks with overflow:hidden, so a line-height under 1 slices the
   bowls and the full stop. 1.02 clears descenders at every step. */
.statement{font-family:var(--serif); font-weight:700; font-size:var(--t-display);
  line-height:1.02; letter-spacing:normal; margin:0; text-wrap:balance}
.eyebrow{font-size:var(--t-micro); font-weight:700; letter-spacing:normal; line-height:1; margin:0}
.lede{font-size:var(--t-body); line-height:1.62; color:var(--graphite); max-width:36ch; margin:0}
.serif-lead{font-family:var(--serif); font-weight:700; font-size:var(--t-sub);
  line-height:1.12; letter-spacing:normal; margin:0}

/* ---- the one entrance the page uses --------------------------------------- */
.reveal{display:block; overflow:hidden}
.reveal > *{display:block; transform:translateY(102%); opacity:0;
  transition:transform .28s var(--ease), opacity .24s var(--ease); transition-delay:var(--d,0ms)}
.is-in .reveal > *{transform:translateY(0); opacity:1}
.fade{opacity:0; transition:opacity .26s var(--ease) var(--d,0ms)}
.is-in .fade{opacity:1}
@media (prefers-reduced-motion:reduce){
  .reveal > *,.fade{transform:none!important;opacity:1!important;transition:none!important}
}

/* ---- fixed chrome --------------------------------------------------------- */
@media (max-width:900px){.nav__mid{display:none}}

/* ============================ 1 — THE STAGE ===============================
   The lockup no longer sits on a black plate. Its artwork used black as an
   interior colour, which is why every attempt to place it on putty left holes
   or a halo; the interior blacks are now remapped to their own letter's hue,
   giving a solid two-colour mark (#A6158C / #2967ED — within a hair of the
   poster's own magenta and blue) that needs no ground at all.

   Detail layer borrowed from the best hero in the reference set (VISUAL):
   a tiny centred kicker, mono-set data against the serif, a paired button set,
   a hairline masthead rule, and printer's crop marks at the four corners —
   which this page has earned, since it is drawn from printed posters.        */
.stage{position:relative; height:100svh; min-height:660px; overflow:hidden; background:var(--putty)}

/* the masthead is printed on whatever sheet is under it */
.stage__rule{position:absolute; top:98px; left:var(--gut); right:var(--gut); z-index:4;
  display:flex; justify-content:space-between; gap:2vw; padding:14px 0;
  border-bottom:1px solid var(--vellum);
  font-size:var(--t-micro); font-weight:700; letter-spacing:normal; color:#56564f}

.stage__stack{position:absolute; left:50%; top:19%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center; z-index:2; width:92vw}
.kicker{margin:0 0 2.6vw; font-size:var(--t-micro); font-weight:700; letter-spacing:normal; color:#55554e}
.stage__lockup{width:min(31vw,446px); height:auto}
.stage__line{margin:2.6vw 0 0; font-family:var(--serif); font-weight:700;
  font-size:var(--t-sub); line-height:1.04; color:#111}
.stage__line i{font-style:normal}
.stage__acts{display:flex; gap:12px; margin-top:2vw; flex-wrap:wrap; justify-content:center}

.hex{display:inline-block; background:var(--black); color:#fff;
  font-size:var(--t-micro); font-weight:700; letter-spacing:normal; padding:15px 32px;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);
  transition:background .18s var(--ease), color .18s var(--ease)}
.hex:hover{background:#2b2b2b}
.hex--light{background:#fff; color:#000} .hex--light:hover{background:var(--bone)}
.hex--ghost{background:var(--vellum); color:var(--black)}
.hex--ghost:hover{background:#CBC9C1}

.stage__word{position:absolute; left:50%; bottom:-2.2vh; transform:translateX(-50%);
  margin:0; z-index:1; white-space:nowrap; pointer-events:none; font-family:var(--serif);
  font-weight:700; font-size:var(--t-hero); line-height:.86; letter-spacing:normal; color:var(--black)}
.stage__rock{position:absolute; bottom:0; z-index:5; height:auto; pointer-events:none}
/* the masses climb over the outer letters — the foot of the A, the lower half of
   the last i — so the word sits a step behind the hills rather than between them */
.stage__rock--l{left:0; width:32vw} .stage__rock--r{right:0; width:30vw}

/* crop marks — the sheet this page was printed from */
.crop{position:absolute; width:13px; height:13px; z-index:5; pointer-events:none; opacity:.55}
.crop--tl{top:150px;  left:18px;  border-left:1px solid #8e8e86; border-top:1px solid #8e8e86}
.crop--tr{top:150px;  right:18px; border-right:1px solid #8e8e86; border-top:1px solid #8e8e86}
.crop--bl{bottom:18px; left:18px;  border-left:1px solid #8e8e86; border-bottom:1px solid #8e8e86}
.crop--br{bottom:18px; right:18px; border-right:1px solid #8e8e86; border-bottom:1px solid #8e8e86}
/* the sheet no longer ends at the foot — it dissolves — so the foot carries no trim marks */
.crop--bl,.crop--br{display:none}

@media (max-width:860px){
  /* the 600-820 button overlap is fixed in its own range block at the foot of
     this file — a blanket rule here reached 390px too, where it drove the word
     off both edges and under the masses. */
  .crop{display:none}   /* the strip they bracketed is hidden here */
  /* the rule sat on the kicker, the masses covered 104vw between them, and the
     middle of the screen was dead air. Stack drops clear, masses shrink to
     bite only the foot of the word, and the word rises to meet them. */
  /* 600-820px: the centred stack grew and the hero word rose with the
     viewport, so the word sat over the two buttons — up to 163px of overlap
     at 820. More floor under the stack keeps them apart. */
  .stage{min-height:640px; display:flex; flex-direction:column; justify-content:center;
    padding:16vh 0 38vh}
  .stage__rule{position:static; display:flex; flex-direction:column; gap:3px; align-items:center;
    margin:0 var(--gut) 7vw; padding:0 0 14px; text-align:center;
    border-bottom:1px solid var(--vellum)}
  .stage__stack{position:static; transform:none; top:auto; margin:0 auto; width:88vw}
  .kicker{font-size:var(--t-micro); letter-spacing:normal; margin-bottom:6vw}
  .stage__lockup{width:74vw}
  .stage__line{font-size:var(--t-sub); margin-top:6vw}
  .stage__acts{margin-top:7vw; gap:10px; flex-direction:column; align-items:stretch; width:70vw}
  .hex{padding:16px 24px; font-size:var(--t-micro); text-align:center}
  .stage__word{font-size:var(--t-display); bottom:13vh}
  .stage__rock--l{width:44vw; left:-3vw} .stage__rock--r{width:40vw; right:-3vw}
  .crop--tl,.crop--tr{top:92px}
  .crop--bl,.crop--br{bottom:14px}
}

/* ---------------------------- 1b — THE FADE ------------------------------
   The hero is printed on putty; the welcome is printed on the reference's own
   paper (#F4F3F0 ground, #1A1915 ink), one step lighter. Nothing cuts between
   them: the putty dissolves into the beige across the foot of the hero and a
   short band below it, so the page brightens into the greeting before ARC 1
   takes it to black.                                                          */
.stage::after{content:""; position:absolute; left:0; right:0; bottom:0; height:9vh; z-index:4;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(229,228,224,0) 0%,rgba(229,228,224,.28) 70%,rgba(229,228,224,.75) 100%)}
.seam{position:relative; z-index:3; color:var(--ink);
  height:clamp(120px,17vh,180px);
  background:var(--putty)}
.seam::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; opacity:.05; mix-blend-mode:multiply}
.seam__seal{position:absolute; left:50%; top:clamp(28px,4vh,44px); transform:translateX(-50%);
  z-index:3; width:24px; height:auto; opacity:.9}
.seam__dateline{display:none}

/* ============================ 2 — THE WELCOME (the flight) ===============
   Ported from telescope.fyi's TheHero component: the same DOM shape, the same
   declarations, the same GSAP ScrollTrigger timeline in vh. Ours are the
   images, the words, and what the card opens onto.

   .fly (their .hero)     400svh tall. Theirs overlaps the next section by
                          200svh, but that section rides up invisible until its
                          own trigger; ARC 1 cannot, so the overlap here is
                          60svh — the card holds from 200 to 240vh, then ARC 1
                          rides up over it.
   .sticky                one viewport, sticky, overflow hidden, the camera
                          (perspective 100svh).
   .medias > .media ×12   absolute, aspect-ratio per slot, positions per
                          nth-child — a mobile base and a ≥1024px override.
                          GSAP moves them only along Z.
   .title-wrapper         rests at translateZ(−50lvh) and flies in on load;
                          the two .line spans lift on --p1 and part on --p2.
   .zoom-img              the card, scale(--p2): for them a curator, for us
                          Ado-Ekiti — the welcome opens onto the land.        */
.fly{position:relative; background:var(--putty); color:var(--ink);
  height:400svh; margin-bottom:-60svh;
  --p1:0; --p2:0; --intro-d:.25s;
  --ease-out-power1:cubic-bezier(.25,.46,.45,.94);
  --ease-smooth-out:cubic-bezier(.4,0,0,1);
  --ease-out:cubic-bezier(.37,.31,0,1)}
/* everything after the welcome paints above its pinned second half */
.fly ~ section,.fly ~ footer{position:relative; z-index:2}

.fly .sticky{align-items:center; display:flex; height:100lvh; justify-content:center;
  overflow:hidden; perspective:100svh; position:sticky; top:0; z-index:1}

.fly .medias{position:absolute; inset:0; overflow:hidden; perspective:100svh}
.fly .media{position:absolute; aspect-ratio:var(--ar); opacity:0}
.fly .media .img{position:absolute; inset:0; overflow:hidden}
.fly .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.01)}
.fly .media .hover{position:absolute; inset:-15%}
/* slot positions — theirs, verbatim; mobile base, desktop override */
.fly .media:nth-child(1) {left:-5vw; top:-2%;    width:25vw; --ar:1}
.fly .media:nth-child(2) {left:26%;  top:15%;    width:28vw; --ar:1.4}
.fly .media:nth-child(3) {left:48%;  top:3%;     width:36vw; --ar:1.1; z-index:-1}
.fly .media:nth-child(4) {right:-5%; top:25%;    width:16vw; --ar:.9}
.fly .media:nth-child(5) {right:10%; top:30%;    width:14vw; --ar:1.4}
.fly .media:nth-child(6) {bottom:27%; right:27%; width:15vw; --ar:.9}
.fly .media:nth-child(7) {bottom:15%; right:-10%;width:34vw; --ar:1.1}
.fly .media:nth-child(8) {bottom:-3%; right:20%; width:26vw; --ar:1.4}
.fly .media:nth-child(9) {bottom:22.5%; left:25%;width:16vw; --ar:1.4}
.fly .media:nth-child(10){bottom:7%;  left:-10%; width:32vw; --ar:1.1}
.fly .media:nth-child(11){bottom:34%; left:-5%;  width:18vw; --ar:1.15}
.fly .media:nth-child(12){left:-15%; top:20%;    width:36vw; --ar:1.2}
@media screen and (min-width:1024px){
  .fly .media:nth-child(1) {left:-5vw; top:21%;  width:11.5vw}
  .fly .media:nth-child(2) {left:29%;  top:15%;  width:9.2vw}
  .fly .media:nth-child(3) {left:36%;  top:3%;   width:11.5vw}
  .fly .media:nth-child(4) {right:30%; top:11%;  width:7.6vw}
  .fly .media:nth-child(5) {right:4%;  top:5%;   width:6.1vw}
  .fly .media:nth-child(6) {bottom:auto; right:7%; top:28%; width:13.2vw}
  .fly .media:nth-child(7) {bottom:32%; right:-1.5%; width:4.7vw}
  .fly .media:nth-child(8) {bottom:5.5%; right:15%; width:15vw}
  .fly .media:nth-child(9) {bottom:1.5%; left:auto; right:38%; width:8.3vw}
  .fly .media:nth-child(10){bottom:13.5%; left:16%; width:10.5vw}
  .fly .media:nth-child(11){bottom:24%; left:29%; width:5.9vw}
  .fly .media:nth-child(12){bottom:46%; left:7.5%; top:auto; width:5.2vw}
}

/* the title: their intro choreography, our type */
.fly .title-wrapper{position:relative; z-index:6; text-align:center; padding:0 var(--gut);
  transform:translateZ(-50lvh)}
.fly.is-active .title-wrapper{transform:translateZ(0); transition:transform 3s var(--ease-out-power1)}
.fly .title{margin:0; transform:translate3d(0,1.3rem,0); font-family:var(--serif); font-weight:700;
  font-size:var(--t-statement); line-height:1.16; letter-spacing:normal; text-wrap:balance}
.fly.is-active .title{transform:translateZ(0);
  transition:transform 2s var(--ease-smooth-out) calc(var(--intro-d) + 1s)}
@media screen and (min-width:1024px){ .fly.is-active .title{transform:translate3d(0,-1.5rem,0)} }
.fly .word{display:inline-block; opacity:0; transform:translate3d(0,100%,0); --duration:1.5s}
.fly.is-active .word{opacity:1; transform:translateZ(0);
  --d:calc(var(--intro-d) + var(--init-d,0s) + var(--index,0)*.1s);
  transition:opacity var(--duration) var(--ease-out) var(--d), transform var(--duration) var(--ease-out) var(--d)}
.fly .word span{display:inline-block}
.fly .line{display:block; --duration:1s; --init-d:calc(var(--intro-d) + .4s)}
.fly .line.left{--dir:-1} .fly .line.right{--dir:1}
.fly .line span{transform:translateY(calc(-50%*var(--p1))) translate(calc((55vw*var(--p2))*var(--dir))) translateZ(0)}
@media screen and (min-width:1024px){
  .fly .line span{transform:translateY(calc(-.65rem*var(--p1))) translate(calc((55vw*var(--p2))*var(--dir))) translateZ(0)}
}
.fly .gloss{margin:1.6vh 0 0; font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:var(--t-body); letter-spacing:normal; color:#55534A; --init-d:.9s}

/* the card: for them the curator, for us the land the welcome opens onto */
.fly .zoom-img{position:absolute; left:50%; top:50%; width:100%; height:100lvh; z-index:2;
  transform:translate(-50%,-50%) scale(var(--p2)); overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#0d0d0b}
.fly .zoom-img .bg{position:absolute; inset:0}
.fly .zoom-img .bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 30%; transform:scale(1.1); will-change:transform}
.fly .zoom-img .bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.54) 55%,rgba(0,0,0,.64) 100%)}
.fly .featuring{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 var(--gut); color:#fff}
.fly .featuring .word{opacity:0; transform:none; transition:none}   /* GSAP owns these */
.fly .featuring .fleuron{width:26px; height:auto; margin-bottom:4.4vh; opacity:0}
.fly .featuring p{margin:0; font-size:var(--t-micro); line-height:2.05; letter-spacing:.05em; color:rgba(255,255,255,.88)}

/* the ground, edited — held still on the camera */
.fly .sticky::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; opacity:.055; mix-blend-mode:multiply}

@media (prefers-reduced-motion:reduce){
  .fly{height:auto; margin-bottom:0}
  .fly .sticky{position:relative}
  .fly .title-wrapper,.fly .title,.fly .word{transform:none!important; opacity:1!important; transition:none!important}
  .fly .zoom-img{display:none}
}
@media (max-width:820px){
  /* the mobile hero is distilled to the lockup, the line and the buttons, so
     the dateline it drops is set here, on the trim, where there is room */
  .seam{height:auto; padding:clamp(70px,12vh,96px) var(--gut) clamp(28px,4.5vh,40px)}
  .seam__seal{top:clamp(26px,4.4vh,36px); width:21px}
  .stage::after{height:7vh}
  .seam__dateline{display:block; margin:0; text-align:center;
    font-size:var(--t-micro); line-height:1.5; letter-spacing:normal; color:#5C5A51}
  .fly .title{font-size:var(--t-sub); line-height:1.18; letter-spacing:normal}
  .fly .gloss{font-size:var(--t-micro); margin-top:1.4vh}
  .fly .featuring p{font-size:var(--t-micro); line-height:2.1}
  .fly .featuring .fleuron{width:22px; margin-bottom:3.6vh}
  .fly .sticky::after{background-size:150px 150px; opacity:.065}
}

/* ============================ 3 — THE FIVE ACTS ===========================
   Photography is never boxed. Every image is cut into a mass that rises into
   the frame and overlaps the type — the same òkìtì cut as the hero's rocks.
   Copy is the poster's: a day, an ARC number, and the session names.         */
.arc{position:relative; overflow:hidden}
.arc__folio{position:absolute; top:6.5vh; right:var(--gut); z-index:5; font-size:var(--t-micro);
  font-weight:400; letter-spacing:normal; opacity:.5}
.on-dark{background:var(--ink); color:#fff}
.on-light{background:var(--putty); color:var(--black)}

/* the day is the spine of every act */
.day{display:flex; align-items:baseline; gap:.28em; font-family:var(--serif);
  font-weight:700; line-height:.8; letter-spacing:normal; margin:0}
.day b{font-weight:700; font-size:var(--t-display)}
.day i{font-style:normal; font-size:var(--t-sub); letter-spacing:normal}
.day-name{margin:1.2vh 0 0; font-size:var(--t-micro); font-weight:400; letter-spacing:normal; opacity:.6}
.arcno{font-size:var(--t-micro); font-weight:400; letter-spacing:normal; opacity:.55}

/* sessions ARE the content, so they are set as display type */
.sessions{list-style:none; margin:0; padding:0}
.sessions li{font-family:var(--serif); font-size:var(--t-sub); line-height:1.28; letter-spacing:normal;
  padding:.42em 0; border-top:1px solid var(--vellum)}
.on-dark .sessions li{border-top-color:rgba(255,255,255,.2)}
.sessions li:last-child{border-bottom:1px solid var(--vellum)}
.on-dark .sessions li:last-child{border-bottom-color:rgba(255,255,255,.2)}
.sessions--plain li{border:0!important; padding:.12em 0}

/* --- ARC 1 · the arrival ------------------------------------------------
   One field, not a photo in a box. The aerial of the EKSU gate was graded so
   its overcast sky and its foot sink to the room's own near-black (#171826,
   a black carrying the picture's own green) — the picture has no edge to
   see, and what survives the grade is one lit slot across the middle where
   the gate is. Black still owns the section, as it does the acts either
   side; the photograph's colours are let into it in three low washes —
   hedge olive under, tree sage above, the gate's terracotta at its heart.
   Type sits inside the picture, not on a plate over it.                    */
.a1{--arc-c:var(--c1); --a1-ink:#171826; --a1-line:#D8E0CA;
  position:relative; min-height:100svh; overflow:hidden;
  background:var(--a1-ink); color:#E9EBE3;
  display:flex; flex-direction:column; justify-content:center}
.a1__wash{display:none}   /* was a three-stop radial wash on a bare surface */
.a1__band{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  z-index:1; aspect-ratio:16/9}
.a1__shot{display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.045); transition:transform 1.2s var(--ease)}
.a1.is-in .a1__shot{transform:scale(1)}
/* the picture dissolves into the room instead of ending */
/* ARC 1 and ARC 5 are full-bleed photographs with no plate to colour, so the
   photograph itself is seated — same grammar as every other arc's caption bar. */

.a1__band::after{content:""; position:absolute; inset:0; pointer-events:none;
  /* No top darkening: the old ramp blacked out 265px of sky serving no type,
     and had faded out entirely by the rail it was supposed to protect.
     What remains is a left-weighted wash under the caption block only. */
  /* 12 Sep: the 76deg wash ran corner to corner, so it laid ~75% ink over the
     TOP-left of the photograph — 390px of charcoal murk carrying no type, while
     the caption it exists for sits at the BOTTOM-left. Anchored to that corner
     instead: the hills and the sky come back and the caption is still seated. */
  background:
    radial-gradient(128% 82% at 0% 100%, rgba(23,24,38,.90) 0%, rgba(23,24,38,.52) 32%,
      rgba(23,24,38,.16) 55%, rgba(23,24,38,0) 72%),
    linear-gradient(180deg, rgba(23,24,38,0) 0%, rgba(23,24,38,0) 60%,
      rgba(23,24,38,.26) 74%, rgba(23,24,38,.70) 88%, rgba(23,24,38,.88) 100%)}
.a1::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; opacity:.14; mix-blend-mode:soft-light}

.a1__plate{position:relative; z-index:4; margin:2.6vh var(--gut) 0}
.a1 .day{margin:0; line-height:.8}
.a1 .day > span{display:flex; align-items:baseline; gap:.28em}
.a1 .day b{font-size:var(--t-display)}
.a1 .day i{font-size:var(--t-sub)}
/* the day numeral is in flow under the rail now; only the caption block
   still pins to the foot of the band */
.a1__over{position:absolute; left:var(--gut); right:var(--gut); bottom:8.5vh; z-index:3}
.a1__dayname{margin:0 0 1.5vh; font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:var(--t-sub); letter-spacing:normal; color:var(--a1-line);
  text-shadow:0 2px 26px rgba(6,10,8,.65)}
.a1__sessions{list-style:none; margin:0; padding:0}
.a1__sessions li{font-family:var(--serif); font-weight:700; font-size:var(--t-statement);
  line-height:1.02; letter-spacing:normal; color:#F2F3EC;
  text-shadow:0 3px 34px rgba(6,10,8,.6)}
.a1__sessions li + li{margin-top:.06em}
@media (prefers-reduced-motion:reduce){ .a1__shot,.a1.is-in .a1__shot{transform:none; transition:none} }

/* --- ARC 2 · the hall, said in one line ---------------------------------
   Alt-Border's mechanic, out of the monopo saigon reference set: a masthead
   rule, then ONE running line of display type with small square photographs
   set into it at cap height — the pictures punctuate the list instead of
   captioning it — then a hairline and a strip of the day's own rooms.      */
.a2{--arc-c:var(--c2); background:var(--putty); color:var(--black);
  display:flex; flex-direction:column; padding:12vh 0 0}

.a2__run,.a4__run{margin:6vh 0 0; padding:0 var(--gut); font-family:var(--serif); font-weight:700;
  font-size:var(--t-statement); line-height:1.16; letter-spacing:normal; text-wrap:pretty}
.a2.is-in 
.a2__rule,.a4__rule{margin:9vh 0 0; padding:0 var(--gut) 11px; border-bottom:1px solid var(--vellum);
  font-size:var(--t-micro); font-weight:700; letter-spacing:normal; color:#56564f}
.a2__run i,.a4__run i{font-style:normal; color:var(--arc-c); padding:0 .12em}
.a2__strip figure,.a4__strip figure{margin:0; position:relative; aspect-ratio:16/10; overflow:hidden}
.a2__strip figure > picture,.a4__strip figure > picture{display:block; position:absolute; inset:0}
.a2__strip figure img,.a4__strip figure img{width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block}
.a2__strip figure{position:relative}
.a2__strip figcaption,.a4__strip figcaption{position:absolute; left:0; bottom:0; z-index:2;
  background:var(--arc-c); color:#fff; padding:8px 11px 9px;
  font-family:var(--grot); font-size:var(--t-micro); font-weight:700; letter-spacing:normal}
.a2__strip,.a4__strip{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:5px 0 0}
.a2__strip figure,.a4__strip figure{margin:0; overflow:hidden; height:33svh; min-height:230px; background:var(--bone)}
.a2__strip img,.a4__strip img{width:100%; height:100%; object-fit:cover; display:block}
@media (prefers-reduced-motion:reduce){
  }

/* --- ARC 3 · the night edition ------------------------------------------
   monopo saigon's "True Terrors" broadside, run as a negative: a marquee of
   the day's programme across the head, a masthead of the three sessions that
   happen outdoors with the day tucked into it the way that page tucks its
   italic, a data rule, the two indoor sessions as the index, and one plate —
   Arinta falls, dithered to one bit, so it prints like an engraving.       */
.a3{--arc-c:var(--c3); position:relative; background:var(--ink); color:var(--bone);
  min-height:100svh; display:flex; flex-direction:column; padding:11vh 0 6vh; overflow:hidden}
.a3__ticker{overflow:hidden; border-bottom:1px solid rgba(237,236,232,.22); padding-bottom:12px}
.a3__ticker ul{display:flex; width:max-content; margin:0; padding:0; list-style:none;
  animation:a3-run 46s linear infinite}
.a3__ticker li{font-size:var(--t-micro); font-weight:700; letter-spacing:normal; color:rgba(237,236,232,.66);
  white-space:nowrap; padding-right:2.6vw}
.a3__ticker li::after{content:"·"; margin-left:2.6vw; opacity:.5}
@keyframes a3-run{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.a3:hover .a3__ticker ul{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){ .a3__ticker ul{animation:none} }

/* --- ARC 4 · the staircase ------------------------------------------------
   The day steps up: outreach in the morning, sport in the afternoon, dinner
   and awards at night. So the three plates step up — the same grid the rest
   of the page is set on, each plate a different height, their feet rising
   left to right — and the day sits huge at the foot of the stair, the way a
   number sits at the foot of a plate in a printed programme.              */
.a4{--arc-c:var(--c4); background:var(--putty); color:var(--black);
  display:flex; flex-direction:column; padding:12vh 0 0}

.a4__mast > :last-child{text-align:right}
.a4__mast em{font-family:var(--serif); font-style:normal; font-size:var(--t-body); color:var(--black)}
.a4 .day{margin:0 0 -.06em; line-height:.8; align-self:end}
.a4 .day b{font-size:var(--t-display); letter-spacing:normal}
.a4 .day i{font-size:var(--t-sub)}
.a4__stack{align-self:end; padding-bottom:2vh}
.a4__dayname{margin:1.4vh 0 0; font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:var(--t-sub); line-height:1.1; letter-spacing:normal; color:#111110}
.a4__date{margin:1.8vh 0 0; font-size:var(--t-micro); font-weight:700;
  letter-spacing:normal; color:#56564f}

/* --- ARC 5 · the road out ------------------------------------------------
   monopo saigon's "Welcoming Johanna Jaskowska": one picture edge to edge,
   one line set in the middle of it, nothing else. This is ARC 1 turned
   inside out on purpose — arrival was a dark room with the picture held in
   it and the type in the corners; departure is the picture itself, bright,
   with the type centred and BLACK, the road south out of Ado-Ekiti under a
   haze sky. As you scroll through it the road slides under you and the
   word lets its letters go, the way a station board does.               */
.a5{--arc-c:var(--c5); position:relative; min-height:100svh; overflow:hidden; background:#DCDDD8; color:var(--black);
  display:flex; flex-direction:column; justify-content:flex-start; text-align:center;
  padding:0 0 6vh}
.a5__shot{position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:59% 58%; transform:scale(1.12); transform-origin:50% 55%; will-change:transform}
.a5::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* paper ONLY where type sits: the rail, the left text column, the date strip.
     Two radial blobs used to bleach the middle of the road; they are gone. */
  background:
    linear-gradient(102deg, rgba(236,237,232,.86) 0%, rgba(236,237,232,.52) 24%,
      rgba(236,237,232,.12) 44%, rgba(236,237,232,0) 58%),
    linear-gradient(180deg, rgba(236,237,232,.84) 0%, rgba(236,237,232,.50) 9%,
      rgba(236,237,232,0) 21%, rgba(236,237,232,0) 72%,
      rgba(228,229,224,.58) 89%, rgba(228,229,224,.82) 100%)}

/* ---- the rail over a photograph -------------------------------------
   The meta row is the page's one binding device and it was drawn three ways:
   floating on bare photograph in ARC 1 (where "7th — Wednesday" fell on white
   buildings and "Event lineup — I of V" on bright grass), an inset hairline on
   the paper arcs, and a solid band in ARC 5. One rule now covers both
   photographic arcs — flat plane, no scrim, guaranteed contrast, the device the
   reference itself uses — and the paper arcs keep the hairline, which is the
   same row with nothing behind it to fight.                                  */
.a1 .arcmast,
.a5 .arcmast{
  text-align:left; position:relative; z-index:4;
  margin:0; padding:13px var(--gut) 12px;
  border-bottom:1px solid var(--vellum);
}
.a5 .arcmast{background:var(--bone)}
.a1 .arcmast{background:var(--a1-ink); border-bottom-color:rgba(237,236,232,.24)}
.a5__mid{position:relative; z-index:2; padding:0 var(--gut); margin:3vh 0 auto}
.a5 .day{justify-content:center; margin:0 0 1.2vh; line-height:.8}
.a5 .day b{font-size:var(--t-display)} .a5 .day i{font-size:var(--t-sub)}
.a5__dayname{margin:0; font-family:var(--serif); font-style:normal; font-size:var(--t-sub); color:#111110}
.a5__word{margin:1.4vh 0 0; font-family:var(--serif); font-weight:700; font-size:var(--t-display); line-height:.9;
  letter-spacing:normal; color:var(--black); white-space:nowrap; will-change:letter-spacing}
.a5__foot{position:relative; z-index:2; padding:0 var(--gut) 7vh; font-size:var(--t-micro); font-weight:700;
  letter-spacing:normal; color:#161614}

@media (max-width:900px){
  .day b{font-size:var(--t-display)} .day i{font-size:var(--t-statement)}
  .sessions li{font-size:var(--t-statement)}
}

/* ============================ 4 — CALL FOR ABSTRACTS ====================== */
.abs{background:var(--ink); color:#fff; padding:14vh var(--gut) 12vh; position:relative}
.abs__kicker{font-size:var(--t-micro); font-weight:700; letter-spacing:normal; margin:0}
.abs__head{font-family:var(--serif); font-weight:700; font-size:var(--t-statement); line-height:1.02;
  letter-spacing:normal; margin:2.4vh 0 0; max-width:none}
.abs__sub{font-family:var(--serif); font-style:normal; font-size:var(--t-sub);
  color:rgba(255,255,255,.72); margin:3vh 0 0; max-width:34ch}
/* The head is a two-column band — title block left, the dates and the action
   right — so the top of the section uses its whole measure instead of stacking
   down the left half and leaving x≈700-1380 as bare navy. Below it the grid
   carries the poster's invitation and the category index. */
.abs__top{display:grid; grid-template-columns:1fr .82fr; gap:0 4.5vw; align-items:start}
.abs__top .abs__dates{margin-top:2.4vh}
.abs__grid{display:grid; grid-template-columns:1fr 1.05fr; gap:0 4.5vw; margin-top:7vh;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.22)}
.abs__lede p{margin:0 0 1.1em; font-size:var(--t-body); line-height:1.55;
  color:rgba(237,236,232,.84); max-width:42ch}
.abs__lede p b{font-weight:700; color:#fff}
.abs__guide{margin:2.4vh 0 1em; font-family:var(--grot); font-weight:700;
  font-size:var(--t-body); letter-spacing:normal; color:#fff}
/* numbered items, after AColorBright's inner section: a ring numeral, the
   name at reading size, hairline between. Nine categories become a list you
   actually read rather than a block you skim past. */
/* was columns:2 — the two flows produced rules that never lined up */
.cats{list-style:none; margin:0; padding:0; counter-reset:k}
.cats li{counter-increment:k; display:flex; gap:14px; align-items:baseline; font-size:var(--t-body);
  padding:11px 0; color:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.13)}
.cats li::before{content:counter(k,decimal-leading-zero); flex:none; font-size:var(--t-micro);
  font-weight:700; letter-spacing:normal; color:var(--gold); padding-top:.28em}
.abs__dates div{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.18)}
.abs__dates .eyebrow{color:rgba(255,255,255,.5); letter-spacing:normal; margin-bottom:6px}
.abs__dates b{font-family:var(--serif); font-weight:700; font-size:var(--t-sub)}
.abs__enq{margin:3vh 0 0; font-size:var(--t-micro); color:rgba(237,236,232,.66)}
.abs__enq a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.abs__cta{margin-top:4vh; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
/* was a clip-path chevron with a 1px border: the clip removed the diagonal
   corners and left two orphan stubs floating either side of the text. */
.abs__closed{display:inline-block; padding:15px 32px; font-family:var(--grot);
  font-weight:700; font-size:var(--t-micro); letter-spacing:normal;
  color:rgba(237,236,232,.72); border:1px solid rgba(255,255,255,.28); cursor:default}
.abs__prize{margin:0; font-family:var(--grot); font-size:var(--t-micro); font-weight:700;
  letter-spacing:normal; color:var(--gold)}
@media (max-width:900px){
  .abs__head{font-size:var(--t-display)} .abs__grid{grid-template-columns:1fr; gap:30px} .cats{columns:1}
}

/* ============================ 4b — THE HOP ================================ */
.flight{background:var(--putty); padding:13vh var(--gut) 11vh; overflow:hidden; text-align:center}
.flight__head{font-family:var(--serif); font-weight:700; font-size:var(--t-statement); line-height:.98;
  letter-spacing:normal; margin:2.4vh 0 0}
.flight__head i{font-style:normal}
.flight__scene{margin-top:1vh}
.flight__scene svg{width:100%; height:auto; overflow:visible}
.hop-ghost{fill:none; stroke:#BDBAB1; stroke-width:2.5; stroke-dasharray:2 10; stroke-linecap:round}
.hop-draw{fill:none; stroke:var(--black); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.is-in .hop-draw{transition:stroke-dashoffset 3s var(--ease) .25s; stroke-dashoffset:0}
.plane{opacity:0} .is-in .plane{opacity:1}
.plane path{transform:scale(1.9); transform-box:fill-box; transform-origin:center}
.pin{fill:var(--black)}
.maplabel{font-family:var(--grot); font-size:var(--t-micro); font-weight:500;
  letter-spacing:normal; fill:var(--black)}
.mapsub{font-family:var(--grot); font-size:var(--t-micro); letter-spacing:normal; fill:var(--graphite)}

.flight__plate{margin:0 auto; width:min(26vw,340px)}
.flight__plate .shot{aspect-ratio:16/10; overflow:hidden; background:var(--bone); border-bottom:6px solid var(--ink);
  clip-path:polygon(0 14%,50% 0,100% 14%,100% 100%,0 100%)}
.flight__plate .shot img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){ .flight__head{font-size:var(--t-display)} .flight__plate{width:72vw} }
.cap{margin:10px 0 0; font-size:var(--t-micro); font-weight:500; letter-spacing:.005em; opacity:.5}
@media (max-width:900px){ .flight__plate{width:auto} }

/* ============================ 5 — THE TWENTY-NINE ========================== */
.people{background:var(--putty); padding:13vh var(--gut) 11vh}
.people__title{font-family:var(--serif); font-weight:700; font-size:var(--t-statement); line-height:1.02;
  letter-spacing:normal; margin:2.4vh 0 0; text-align:left}
.people__head{text-align:left; margin-bottom:6vh}
.people__grid{display:grid; grid-template-columns:repeat(8,1fr); gap:1.4vw 1.1vw}
.person figure{margin:0; height:100%; display:flex; flex-direction:column}
.person__img{aspect-ratio:3/4; overflow:hidden; background:var(--bone);
  clip-path:path("M0 100%% L0 34%% C0 13%% 22%% 0 50%% 0 C78%% 0 100%% 13%% 100%% 34%% L100%% 100%% Z")}
/* The crop is BAKED into the files (source-assets/derived/committee, 305x407,
   3:4 at the poster's framing, centred on each face). It used to be computed in
   CSS with object-position + a transform — but with a square source in a 3:4
   box, object-fit:cover leaves no vertical overflow, so object-position-y did
   nothing and the scale pushed every face up and cut the foreheads. */
.person__img img{width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1); transition:filter .2s var(--ease)}
.person:hover .person__img img{filter:grayscale(0)}
.person figcaption{margin:0; flex:1 1 auto; background:var(--ink); color:#fff; padding:11px 12px 13px}
.person b{display:block; font-family:var(--serif); font-weight:700; font-size:var(--t-body); letter-spacing:0; line-height:1.18}
.person span{display:block; margin-top:5px; font-size:var(--t-micro); font-weight:400; letter-spacing:normal; color:rgba(255,255,255,.66); line-height:1.3}
@media (max-width:1100px){.people__grid{grid-template-columns:repeat(5,1fr); gap:2vw}}
@media (max-width:860px){
  .people__grid{grid-template-columns:repeat(3,1fr); gap:3vw}
  .people__head{grid-template-columns:1fr; gap:18px}
}

/* ============================ 6 — REGISTER ================================= */
.enrol{position:relative; overflow:hidden; background:var(--ink); color:#fff;
  min-height:88svh; display:flex; flex-direction:column; justify-content:center;
  padding:14vh var(--gut) 16vh; text-align:left; align-items:flex-start}
.enrol .statement{color:#fff}
/* matches .foot__top so the two stacked grids share column edges */
.enrol__deadlines{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:0 40px;
  width:100%; max-width:none; margin:6vh 0 0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.24); text-align:left; position:relative; z-index:2}
.enrol__deadlines .eyebrow{color:rgba(255,255,255,.55); letter-spacing:normal; margin-bottom:8px}
.enrol__deadlines b{font-family:var(--serif); font-weight:700; font-size:var(--t-sub); display:block}
/* The closing action was a 112x53 chip — the same box as the masthead's — and
   its bottom-left corner sat 1px off the left rock's crest. It is the last
   thing on the page and now reads like it. */
.enrol__cta{margin-top:5vh; margin-bottom:9vh; position:relative; z-index:3;
  font-size:var(--t-body); font-weight:700; padding:22px 44px}
.enrol__rock{position:absolute; bottom:0; z-index:1; height:auto; pointer-events:none; opacity:.82}
.enrol__rock--l{left:0; width:26vw}
.enrol__rock--r{right:0; width:24vw}
@media (max-width:860px){
  .enrol__deadlines{grid-template-columns:1fr; gap:22px}
  .enrol__rock--l{width:52vw} .enrol__rock--r{width:48vw}
}

/* ============================ 7 — TERMINAL ================================= */
@media (max-width:860px){
  .foot__top{grid-template-columns:1fr; gap:34px}
  .foot__lockup{width:66vw}
  .foot__base{flex-direction:column; gap:10px}
}

/* the airport plate: the hop is only charming because the airport is real */

/* ============================================================================
   MOBILE — 390px is the primary reading width, not an afterthought.
   The desktop composition survives: the word still crops, the masses still
   rise and overlap, the day numerals still carry each act. What changes is
   measure, stacking, and tap area.
   ========================================================================== */
@media (max-width:820px){
  .a2{padding:9.5vh 0 0}
  .a4{padding:9.5vh 0 0; min-height:0}
  
  .a4__mast > :last-child{grid-column:1/-1; text-align:left; margin-top:1vh}
  .a4 .day{grid-column:1/-1; margin:0 0 1vh}
  .a4 .day b{font-size:var(--t-display)} .a4 .day i{font-size:var(--t-statement)}
  
  
  
  
  
  .a4__foot{margin-top:4vh; font-size:var(--t-micro)}
  .a3{padding:9vh 0 7vh}
  
  
  
  
  
  
  
  
  
  
  .a2__run{font-size:var(--t-sub); line-height:1.22; margin-top:4.5vh}
    .a2__rule{margin-top:6vh; font-size:var(--t-micro)}
  .a2__strip{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:66vw;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory}
  .a2__strip figure{height:29svh; min-height:200px; scroll-snap-align:start}
  :root{--gut:6.4vw}

  /* the hero keeps its crop, but a 9-letter word at 34vw lost three letters */
  /* 600-820px: the centred stack grew and the hero word rose with the
     viewport, so the word sat over the two buttons — up to 163px of overlap
     at 820. More floor under the stack keeps them apart. */
  .stage{min-height:640px; display:flex; flex-direction:column; justify-content:center;
    padding:16vh 0 38vh}
  .stage__rule{position:static; display:flex; flex-direction:column; gap:3px; align-items:center;
    margin:0 var(--gut) 7vw; padding:0 0 14px; text-align:center;
    border-bottom:1px solid var(--vellum)}
  .stage__stack{position:static; transform:none; top:auto; margin:0 auto; width:88vw}
  .kicker{font-size:var(--t-micro); letter-spacing:normal; margin-bottom:6vw}
  .stage__lockup{width:74vw}
  .stage__line{font-size:var(--t-sub); margin-top:6vw}
  .stage__acts{margin-top:7vw; gap:10px; flex-direction:column; align-items:stretch; width:70vw}
  /* the masses covered 104vw between them, which is why the word disappeared */
  .stage__word{font-size:var(--t-display); bottom:13vh}
  .stage__rock--l{width:44vw; left:-3vw} .stage__rock--r{width:40vw; right:-3vw}

  /* acts: the day stays big, sessions stay display, everything stacks */
  .arc__folio{top:auto; bottom:2.4vh; right:var(--gut); font-size:var(--t-micro); letter-spacing:normal}
  .day b{font-size:var(--t-display)} .day i{font-size:var(--t-statement)}
  .day-name{font-size:var(--t-micro); letter-spacing:normal}
  .arcno{font-size:var(--t-micro); letter-spacing:normal}
  .sessions li{font-size:var(--t-statement); padding:.34em 0; line-height:1.18}

  /* on the phone the field unfolds: the day, the picture bleeding past both
     edges, then the sessions — all on the same ground */
  .a1{min-height:0; display:block; padding:11vh 0 12vh}
  
  
  .a1 .day b{font-size:var(--t-display)} .a1 .day i{font-size:var(--t-statement)}
  
  .a1__band{position:relative; top:auto; transform:none; width:126%; left:-13%;
    margin:6.5vh 0 6vh}
  .a1__band::after{background:
    linear-gradient(180deg, rgba(23,24,38,0) 0%, rgba(23,24,38,0) 48%,
      rgba(23,24,38,.42) 64%, rgba(23,24,38,.86) 84%, rgba(23,24,38,.94) 100%)}
  .a1__wash{display:none}   /* was a three-stop radial wash on a bare surface */
  .a1__over{position:static; padding:0 var(--gut)}
  .a1__dayname{font-size:var(--t-body); margin-bottom:1.6vh}
  .a1__sessions li{font-size:var(--t-sub); line-height:1.04}

  .a2{padding:13vh 0 0}
  .a2__grid{grid-template-columns:1fr; gap:4vh}
  .a2__shot{height:28svh; min-height:180px; margin-top:6vh}

  .a3{padding:13vh var(--gut) 8vh}
  
  .a3__head .arcno{text-align:left!important; margin-top:1.4vh}
  .a3__sessions{columns:1; margin-top:4vh; max-width:none}
  .a3__pair{grid-template-columns:1fr; gap:16px; margin-top:5vh}
  .a3__pair .tall .shot{aspect-ratio:4/3}

  .a4{padding:13vh 0 0}
  .a4__trip{grid-template-columns:1fr; gap:26px; margin-top:5vh}
  .a4__trip .shot{aspect-ratio:3/2}
  .a4__trip figcaption{font-size:var(--t-statement)}

  .a5{min-height:100svh}
  .a5__shot{object-position:52% 60%; transform:scale(1.16)}
  .a5::before{background:
    linear-gradient(180deg, rgba(236,237,232,.88) 0%, rgba(236,237,232,.58) 12%,
      rgba(236,237,232,.10) 26%, rgba(236,237,232,0) 38%,
      rgba(236,237,232,0) 64%, rgba(228,229,224,.62) 84%, rgba(228,229,224,.86) 100%)}
  
  
  .a5 .day b{font-size:var(--t-display)} .a5 .day i{font-size:var(--t-statement)}
  .a5__dayname{font-size:var(--t-body)}
  .a5__word{font-size:var(--t-display); margin-top:1.2vh}
  .a5__mid{margin-top:0}
  .a5__foot{padding-bottom:6vh; font-size:var(--t-micro)}

  /* abstracts */
  .abs{padding:13vh var(--gut) 10vh}
  .abs__kicker{font-size:var(--t-micro); letter-spacing:normal}
  .abs__head{font-size:var(--t-display); max-width:none}
  .abs__sub{font-size:var(--t-body); max-width:none}
  .abs__grid{grid-template-columns:1fr; gap:5vh; margin-top:6vh}
  .cats{columns:1}
  .cats li{font-size:var(--t-micro); padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12)}
  .abs__enq{margin:3vh 0 0; font-size:var(--t-micro); color:rgba(237,236,232,.66)}
.abs__enq a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.abs__cta{flex-direction:column; align-items:stretch; gap:12px}
  .abs__cta .hex,.seal{text-align:center}

  /* the hop stays playful but the plate leads */
  .flight{padding:12vh var(--gut) 10vh}
  .flight__head{font-size:var(--t-display)}
  .flight__plate{width:86vw}

  /* the twenty-nine */
  .people{padding:12vh var(--gut) 10vh}
  .people__title{font-size:var(--t-display)}
  .people__grid{grid-template-columns:repeat(2,1fr); gap:5vw 4vw}
  .person b{font-size:var(--t-micro)}
  .person span{font-size:var(--t-micro)}

  /* register */
  .enrol{padding:13vh var(--gut) 16vh; min-height:auto}
  .enrol .statement{font-size:var(--t-display)!important}
  .enrol__deadlines{margin-top:6vh}
  .enrol__deadlines b{font-size:var(--t-sub)}

  .foot{padding:8vh var(--gut) 5vh}
  .foot__lockup{width:74vw}

  /* comfortable targets */
  .hex{padding:16px 24px; font-size:var(--t-micro); text-align:center}
  /* ARC 3 stacks: the words, then the two plates */
  .a3__split{grid-template-columns:1fr; gap:5vh 0; padding:0 var(--gut) 7vh; margin-top:3vh}
  .a3__col{height:auto}
  .a3__list li{line-height:1.62}
  .a3__plates{height:auto; max-height:none; grid-template-rows:auto auto; gap:5px}
  .a3__s{aspect-ratio:4/3; flex:none}
  
  /* ARC 2's strip keeps its seated captions when it scrolls sideways */
  .a2__strip figure{scroll-snap-align:start}

  /* ARC 4 on a phone: one column, equal plates, no staircase offsets */

}

/* very small phones */
@media (max-width:380px){
  .stage__word{font-size:var(--t-display)}
  .sessions li{font-size:var(--t-statement)}
  .people__grid{grid-template-columns:repeat(2,1fr)}
}

/* ARC 3 — the day named, the five poster items listed, two colour plates seated */
.a3__split{display:grid; grid-template-columns:1.05fr 1fr; gap:0 3vw;
  padding:0 var(--gut) 6vh; margin-top:4vh; flex:1 1 auto; min-height:0}
.a3__col{display:flex; flex-direction:column; min-height:0; height:64vh}
.a3__head{margin:0; font-family:var(--serif); font-weight:700;
  font-size:var(--t-statement); line-height:1.02; letter-spacing:normal; color:#fff}
.a3__head em{font-style:normal; color:rgba(237,236,232,.62)}
.a3__head span.reveal{display:block}
.a3__list{list-style:none; margin:3.4vh 0 0; padding:0}
.a3__list li{font-family:var(--serif); font-weight:700; font-size:var(--t-sub);
  line-height:1.9; color:#fff}

.a3__plates{display:grid; grid-template-rows:1.18fr 1fr; gap:5px;
  min-height:0; height:64vh; max-height:64vh; align-self:start}
.a3__plates figure{margin:0; position:relative; display:flex; flex-direction:column; min-height:0}
.a3__s{flex:1 1 auto; min-height:0; overflow:hidden}
.a3__s img{width:100%; height:100%; object-fit:cover; display:block}
.a3__plates figure{position:relative}
.a3__plates figcaption{position:absolute; left:0; bottom:0; z-index:2;
  background:var(--arc-c); color:#fff; padding:8px 11px 9px;
  font-family:var(--grot); font-size:var(--t-micro); font-weight:700; letter-spacing:normal}

/* ============================================================
   LAST WORD ON MOBILE. This block must stay at the foot of the
   file: arcs.css has several 820px blocks and whichever comes
   last wins. Piece-2 rules live here for that reason.
   ============================================================ */
@media (max-width:820px){
  .a3__split{grid-template-columns:1fr; gap:4vh 0; padding:0 var(--gut) 7vh; margin-top:3vh}
  .a3__col{height:auto}
  .a3__head{font-size:var(--t-statement)}
  .a3__list{margin-top:3vh}
  .a3__list li{line-height:1.66}
  .a3__plates{height:auto; max-height:none; grid-template-rows:auto auto; gap:5px}
  .a3__s{aspect-ratio:4/3; flex:none}
  

  .a2__run{font-size:var(--t-statement)}
  /* the section supplies the gutter — inner blocks must not add a second one */
  .a3__split{padding-left:0; padding-right:0}
  .a2__strip{padding-left:0; padding-right:0}

  /* the hero word keeps its own recorded step on a phone too */
  .stage__word{font-size:var(--t-hero)}

  /* On a phone the centred stack lands on trees rather than the misty hills the
     desktop composition puts it on. A soft plate behind the stack only —
     measured, not guessed: "Departure" was 2.68:1 against a 3:1 floor. */
  .a5__mid{margin:1.5vh 0 auto; padding-top:2vh; padding-bottom:2.5vh;
    background:linear-gradient(180deg,
      rgba(236,237,232,0) 0%, rgba(236,237,232,.72) 12%,
      rgba(236,237,232,.80) 78%, rgba(236,237,232,0) 100%)}

  .flight{grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:4vh 0}
  .flight__scene{grid-column:1; grid-row:1}
    .flight__plate{grid-column:1; grid-row:3; justify-self:stretch; width:auto; margin:0}

  .abs__grid{grid-template-columns:1fr; gap:5vh 0}
  .abs__lede p{max-width:none}
  .cats li{font-size:var(--t-body)}

}

/* ---- the hero word, by range -------------------------------------------
   390-599  the designed phone composition: the word sits 13vh up, nestled
            between the two masses, and reads whole.
   600-860  the stack grows with the viewport and the word rose into the two
            buttons — up to 163px of overlap at 820. Cap it and floor it.     */
@media (min-width:600px) and (max-width:860px){
  .stage__word{font-size:min(23vw,152px); bottom:0}
}
@media (max-width:599px){
  .stage__word{font-size:min(19vw,104px); bottom:7vh}   /* the rock tops catch the feet of the A and the i */
}

/* ---- ARC 3's rail was inset twice on a phone ---------------------------
   .a3 pads by one gutter and .arcmast adds its own margin, so the meta row
   sat at 32.5px while the headline and the list below it sat at 16.3px.   */
@media (max-width:820px){
  .abs__top{grid-template-columns:1fr; gap:0}
  .abs__top .abs__dates{margin-top:5vh}
  .a3 .arcmast{margin-left:0; margin-right:0}
  /* ARC 4 had the same double inset: .a4 pads by a gutter on mobile, and the
     rail and the foot line each added their own — 32.5px against the 16.4px
     rule, while every sibling rail sat correctly on it. ARC 4 now carries no
     section padding at all (it is laid out like ARC 2), so the rail keeps its
     own gutter margin and the strip bleeds. */
  /* the abstracts head stacks again on a phone */
  /* ARC 4's strip goes one-up, like ARC 2's */
  .a4__strip{grid-template-columns:1fr}
  .a4__strip figure{height:auto; aspect-ratio:16/10; min-height:0}
}

/* ---- the hop's route labels ------------------------------------------
   Frozen section, but bar.md still counts unreadable text as breakage: the
   SVG is 1200 user units wide drawn at 358px on a phone, so a 13px label
   rendered at 3.9px. Sized in user units to land back at ~13px on screen.  */
@media (max-width:820px){
  .maplabel{font-size:44px}
}

/* ============================ 2b — THE THEME =============================
   One idea, one screen-width: the theme the convention runs under, set in the
   page's display serif on the putty ground, between the welcome and the arcs. */
.theme{padding:clamp(72px,14vh,140px) var(--gut) clamp(64px,12vh,120px); background:var(--putty); color:var(--black)}
.theme__k{margin:0 0 clamp(14px,2.4vh,24px); font-size:var(--t-micro); font-weight:700; color:var(--graphite)}
.theme__t{max-width:16ch}
.theme__s{margin:clamp(16px,3vh,28px) 0 0; max-width:34ch; font-size:var(--t-sub); line-height:1.3; color:var(--graphite); text-wrap:pretty}
@media (max-width:820px){ .theme__t{font-size:var(--t-sub); line-height:1.12} .theme__s{font-size:var(--t-body)} }

/* ============================ 6 — THE PARTNER ============================
   The headline partner, named plainly on the putty ground before the footer:
   the name in the page's display serif, nothing borrowed from their brand. */
.partner{display:grid; justify-items:center; gap:clamp(8px,1.4vh,14px); text-align:center;
  padding:clamp(56px,10vh,110px) var(--gut); background:var(--putty); color:var(--black);
  border-top:1px solid var(--vellum)}
.partner .eyebrow{color:var(--graphite)}
.partner__name{margin:0; font-family:var(--serif); font-weight:700; font-size:var(--t-sub); line-height:1.05}
.partner__tag{margin:0; font-size:var(--t-micro); color:var(--graphite)}