/* ==================================================================
   STAGING REALITIES — shared stylesheet
   Black ground · hairline raster (doubled margin lines) · magenta
   Extended caps vs condensed cut · everything snaps to one shared
   6-column grid: the raster layer and the content grid are computed
   from the same variables, so nothing can drift off the lines.

   Running text sits on an opaque "plate" so the raster's interior
   column lines never cross a word — the lines stay visible in the
   gutters, the margins and the open areas, exactly like print.
   ================================================================== */
:root{
  --bg:#0A0A0D;
  --ink:#ECECF1;             /* primary text — softened off-white, ~16.8:1 */
  --black:#0A0A0B;           /* text on accent surfaces + dark chips */
  --accent:#C25BF2;          /* accent as SURFACE (fills, bands, cells) */
  --accent-text:#D28FFA;     /* accent as TEXT on the page background */
  --accent-on-dark:#D28FFA;  /* accent as TEXT on black chips / dark panels */
  --accent-dim:rgba(194,91,242,.09);
  --muted:#A0A0AA;

  /* mode-dependent tokens (dark defaults; light overrides below) */
  --text-hi:#DEDEE4;
  --text-mid:#CFCFD6;
  --text-lo:#C2C2CA;
  --hover-bg:#15151A;
  /* opaque accent tint for hover — keeps the raster's grid lines from
     showing through a semi-transparent hover background */
  --hover-accent:color-mix(in srgb,var(--accent) 9%,var(--bg));
  --nav-bg:rgba(10,10,13,.9);
  --panel:#0B0B0F;           /* image panels stay dark in both modes */
  --marquee-bg:#101014;      /* subtle tinted strip, per mode */

  --lw:1px;                                  /* website line weight ~1pt */
  --line:rgba(255,255,255,.5);               /* frame + margin lines */
  --line-soft:rgba(255,255,255,.16);         /* interior column lines */

  /* the raster: doubled margin lines (m1/m2) + main frame at --edge */
  --m1:10px;
  --m2:30px;
  --edge:clamp(52px,6vw,128px);
  --cols:6;
  --maxw:1720px;

  /* type — Archivo variable: width 125 = extended, width 62 = condensed */
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --track-caps:.02em;                        /* 20/1000 em per styleguide */

  --fs-hero:clamp(36px,8.6vw,142px);
  --fs-display:clamp(26px,4.2vw,74px);  /* section titles            */
  --fs-1:clamp(24px,2.6vw,44px);        /* feature work titles       */
  --fs-2:clamp(18px,1.7vw,26px);        /* card titles               */
  --fs-3:clamp(17px,1.5vw,23px);        /* panel titles              */
  --fs-4:clamp(14px,1.15vw,18px);       /* tile names                */
  --fs-body:clamp(15px,1.05vw,18px);

  /* three interior paddings — every panel picks one, nothing in between */
  --pad-s:clamp(14px,1.4vw,21px);
  --pad-m:clamp(18px,1.8vw,28px);
  --pad-l:clamp(22px,2.2vw,34px);

  /* vertical rhythm — one section step, one band step inside a section */
  --sp-sect:clamp(50px,5vw,92px);
  --sp-band:clamp(32px,3.2vw,56px);
  --nav-h:72px;

  /* one shared horizontal inset — every text box that is not flush on a
     grid line starts on this same invisible line inside its cell */
  --padx:clamp(16px,1.6vw,28px);
}

/* ============ THEMES (dev switcher) — default: dark + magenta ============
   Each accent defines: --accent (surface fills), --accent-text (accent used
   as type on the page background) and --accent-on-dark (accent type on black
   chips/panels). Every pairing is tuned to WCAG AA in both modes. */

/* — accents, dark mode (defaults) — */
html[data-accent="magenta"]{--accent:#E24DEF;--accent-text:#F07BFC;--accent-on-dark:#F07BFC;--accent-dim:rgba(226,77,239,.08)}
html[data-accent="fuchsia"]{--accent:#C25BF2;--accent-text:#D28FFA;--accent-on-dark:#D28FFA;--accent-dim:rgba(194,91,242,.09)}
html[data-accent="purple"]{--accent:#A67CFF;--accent-text:#B99CFF;--accent-on-dark:#B99CFF;--accent-dim:rgba(166,124,255,.10)}
html[data-accent="turquoise"]{--accent:#2FCDB9;--accent-text:#52DCC9;--accent-on-dark:#52DCC9;--accent-dim:rgba(47,205,185,.08)}
html[data-accent="teal"]{--accent:#1899A8;--accent-text:#3EC0B4;--accent-on-dark:#3EC0B4;--accent-dim:rgba(24,153,168,.10)}
html[data-accent="original"]{--accent:#E6FF41;--accent-text:#E6FF41;--accent-on-dark:#E6FF41;--accent-dim:rgba(230,255,65,.07)}

/* — light mode: gentle off-white ground, darker accent type — */
html[data-mode="light"]{
  --bg:#FBFBF8;
  --ink:#141416;
  --line:rgba(10,10,10,.6);
  --line-soft:rgba(10,10,10,.16);
  --muted:#55555C;
  --text-hi:#1E1E22;
  --text-mid:#2E2E33;
  --text-lo:#404046;
  --hover-bg:#F1F1EA;
  --nav-bg:rgba(251,251,248,.92);
  --marquee-bg:#F2F2EC;
  --accent-text:#8F2BBF;   /* fuchsia default */
}
html[data-mode="light"][data-accent="magenta"]{--accent-text:#A912B4}
html[data-mode="light"][data-accent="fuchsia"]{--accent-text:#8F2BBF}
html[data-mode="light"][data-accent="purple"]{--accent-text:#6B40D6}
html[data-mode="light"][data-accent="turquoise"]{--accent-text:#0B7D71}
html[data-mode="light"][data-accent="teal"]{--accent-text:#0A6E7A}
html[data-mode="light"][data-accent="original"]{--accent-text:#1A1A1C}

/* — grey mode: lifted charcoal ground — */
html[data-mode="grey"]{
  --bg:#1C1C22;
  --ink:#ECECF1;
  --line:rgba(255,255,255,.42);
  --line-soft:rgba(255,255,255,.14);
  --muted:#B8B8C0;
  --text-hi:#E4E4EA;
  --text-mid:#D7D7DE;
  --text-lo:#CFCFD6;
  --hover-bg:#26262E;
  --nav-bg:rgba(28,28,34,.9);
  --panel:#141419;
  --marquee-bg:#24242B;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}header.nav{transition:none}}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:var(--fs-body);line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block}
::selection{background:var(--accent);color:var(--black)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
main:focus{outline:none}
.skip{position:fixed;left:var(--edge);top:10px;z-index:100;transform:translateY(-200%);
  background:var(--accent);color:var(--black);padding:12px 20px;
  font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:13px;
  transition:transform .18s}
.skip:focus{transform:translateY(0)}

/* type roles */
.x{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);line-height:.9}
.c{font-stretch:62.5%;font-weight:600;text-transform:uppercase;letter-spacing:.045em;line-height:1.1}

/* ==================================================================
   THE RASTER
   One absolute layer draws the vertical structure for the whole
   document: doubled margin columns each side + the 6-column field
   between the two frame lines.
   ================================================================== */
.page{position:relative;width:100%;min-height:100vh}
.raster{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,var(--maxw));z-index:0;pointer-events:none;
}
.raster::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--line),var(--line)) var(--m1) 0/var(--lw) 100% no-repeat,
    linear-gradient(var(--line),var(--line)) var(--m2) 0/var(--lw) 100% no-repeat,
    linear-gradient(var(--line),var(--line)) calc(100% - var(--m1)) 0/var(--lw) 100% no-repeat,
    linear-gradient(var(--line),var(--line)) calc(100% - var(--m2)) 0/var(--lw) 100% no-repeat;
}
.raster::after{
  content:"";position:absolute;top:0;bottom:0;left:var(--edge);right:var(--edge);
  border-left:var(--lw) solid var(--line);
  border-right:var(--lw) solid var(--line);
  background:repeating-linear-gradient(to right,
    transparent 0 calc(100%/var(--cols) - var(--lw)),
    var(--line-soft) calc(100%/var(--cols) - var(--lw)) calc(100%/var(--cols)));
  /* measured over the border box, so each hairline's right edge lands on a
     grid-column boundary and rules drawn as border-right sit on top of it */
  background-origin:border-box;
}
/* horizontal doubled margin lines at document top and bottom */
.hline{position:relative;z-index:1;height:var(--lw);background:var(--line);width:100%}
.hframe-top{padding-top:var(--m1)}
.hframe-top .hline+.hline{margin-top:calc(var(--m2) - var(--m1) - var(--lw))}
.hframe-bottom{padding-bottom:var(--m1)}
.hframe-bottom .hline+.hline{margin-top:calc(var(--m2) - var(--m1) - var(--lw))}

/* content frame + column grid (identical geometry to the raster) */
.frame{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}
.g{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:0}
.c1{grid-column-start:1}.c2{grid-column-start:2}.c3{grid-column-start:3}
.c4{grid-column-start:4}.c5{grid-column-start:5}.c6{grid-column-start:6}
.s1{grid-column-end:span 1}.s2{grid-column-end:span 2}.s3{grid-column-end:span 3}
.s4{grid-column-end:span 4}.s5{grid-column-end:span 5}.s6{grid-column-end:span 6}
.pad{padding:clamp(16px,1.5vw,26px) var(--padx)}
.padx{padding-inline:var(--padx)}

/* THE PLATE — running copy sits on the page ground, so the raster's
   interior column lines stop at the edge of a text block instead of
   running through the words. Display type and empty cells stay open,
   which is where the raster is meant to be read. */
.plate{background:var(--bg)}

/* full-bleed horizontal rule — crosses the margin columns like the print raster */
.rule{position:relative;z-index:1;height:var(--lw);background:var(--line);width:100%}

/* ==================================================================
   SHARED BITS
   ================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;color:var(--ink)}
.eyebrow i{font-style:normal;background:var(--accent);color:var(--black);padding:4px 10px}
.section-title{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);line-height:.92;font-size:var(--fs-display);color:var(--ink);margin-top:18px}
.sect-lede{align-self:end;padding-inline:var(--padx);background:var(--bg)}
.sect-lede p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:var(--muted)}
.sect-lede b{color:var(--text-hi);font-weight:700}
.section-title.sub{font-size:var(--fs-1)}
.sect-sub{margin-top:clamp(14px,1.5vw,22px);font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:var(--muted);max-width:56ch}
.band{margin-top:var(--sp-band)}
.g.rows{row-gap:clamp(22px,2.4vw,40px)}
.band-head{margin-bottom:clamp(16px,1.8vw,26px)}
.note-sm{font-size:13px;color:var(--muted);line-height:1.55}
.stat .u{font-size:max(13px,.45em)}
.work>.c1.padx{padding-left:0}
.work>.c4.padx{padding-right:0}
.lead{font-size:clamp(16px,1.25vw,20px);line-height:1.55;color:var(--text-hi)}
.muted{color:var(--muted)}
.mark{background:var(--accent);color:var(--black);padding:0 .14em}

.btn{display:inline-flex;align-items:center;gap:10px;font-stretch:62.5%;font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:14.5px;padding:14px 26px;background:var(--accent);color:var(--black);border:var(--lw) solid var(--accent);cursor:pointer;position:relative;overflow:hidden;transition:color .2s}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .28s cubic-bezier(.65,0,.35,1)}
.btn:hover::before{transform:translateX(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost::before{background:var(--accent)}
.btn.ghost:hover{color:var(--black)}

/* ==================================================================
   NAV
   ================================================================== */
/* nav: off-screen until the page scrolls — the landing shows the full
   banner from the top of the viewport down to the marquee */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:var(--lw) solid var(--line);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.2,.7,.2,1),visibility 0s .34s}
header.nav.scrolled{transform:translateY(0);visibility:visible;transition:transform .34s cubic-bezier(.2,.7,.2,1),visibility 0s 0s}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .b1{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:16px;color:var(--ink)}
.brand .b2{font-stretch:62.5%;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--muted);margin-top:4px}
.navlinks{display:flex;align-items:center;gap:clamp(14px,1.8vw,32px)}
.navlinks a{font-stretch:62.5%;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;padding:6px 2px;position:relative;color:var(--ink)}
.navlinks a:not(.tickets)::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s}
.navlinks a:not(.tickets):hover::after,.navlinks a.active:not(.tickets)::after{transform:scaleX(1)}
.navlinks a.active:not(.tickets){color:var(--accent-text)}
.tickets{background:var(--accent);color:var(--black);padding:10px 20px;transition:background .2s,color .2s}
.tickets:hover{background:var(--ink);color:var(--bg)}
.burger{display:none;width:44px;height:44px;border:var(--lw) solid var(--line);background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--ink)}
.mobile-menu{display:none}

/* ==================================================================
   HERO — a literal grid composition
   ================================================================== */
.hero{--vis-h:clamp(230px,34vw,560px);position:relative;z-index:2}
.hero .comp{display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:auto auto minmax(var(--vis-h),auto) auto;position:relative}
.hero .cell{background:var(--accent);color:var(--black)}
.hero .cell.tr{grid-column:4/-1;grid-row:1}
.hero .cell.left{grid-column:1/2;grid-row:2/4}
.hero .cell.br{grid-column:5/-1;grid-row:4}
/* The h1 is set on its own letterforms rather than on its line boxes, so
   the composition is bracketed by the type itself: the cap top of STAGING
   sits on the inner frame line that opens the page, and the baseline of
   REALITIES carries the first rule of the ruled visual cell below it.
   Both are possible because the h1 spans rows 1-2 with align-self:start —
   its margin-box top meets the top of the composition, and its margin-box
   bottom is what sets the top of row 3.

   A line box overhangs the type on both edges: above the cap by the ascent
   less the cap height, plus the (negative) half-leading of line-height:.88;
   below the baseline by the descent, less the same half-leading. On Archivo
   that is .072em and .078em. Cutting both away closes the gaps and lifts
   the whole hero by the sum plus the leading that used to sit above it. */
.hero h1{grid-column:1/-1;grid-row:1/3;align-self:start;position:relative;z-index:3;
  font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);
  font-size:var(--fs-hero);line-height:.88;color:var(--ink);
  margin-top:calc(var(--h1-trim-top, .072em) * -1);
  margin-bottom:calc(var(--h1-trim-bot, .078em) * -1);
  /* and the same on the inline axis, against the frame line that opens
     the page. The h1's box already starts on that line, but a letter's
     ink starts a side bearing inside its box, so the type read as
     floating off the line. The bearing comes off, and --lw goes back on:
     the frame line is a border drawn inwards from --edge, so type pulled
     flush to --edge would begin underneath it.

     Each line needs its own correction, because each begins with a
     different letter: the round S starts nearly on its own edge, the R's
     flat stem well inside it. text-indent applies to the first line
     alone, so the block carries the shift for the lines after the first
     and the indent carries the difference for the first. Both verticals
     then land on the rule. site.js measures both bearings. */
  margin-left:calc(var(--lw) - var(--h1-trim-rest, .06em));
  text-indent:calc(var(--h1-trim-rest, .06em) - var(--h1-trim-first, .06em))}
/* Where the browser can measure the font itself, let it: trim-both against
   cap and alphabetic cuts the box to exactly the letterforms, with no
   constant to keep in sync. Elsewhere site.js measures both overhangs and
   writes them to the properties above; the em values are only what applies
   before either lands. This covers the block axis only — there is no
   text-box-trim for a side bearing, so --h1-trim-left is always measured
   and is deliberately not reset here. */
@supports (text-box-trim:trim-both){
  .hero h1{margin-top:0;margin-bottom:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}
}
.hero .kicker{grid-column:4/-1;grid-row:1;align-self:start;justify-self:end;z-index:3;text-align:right;color:var(--black);
  padding:clamp(14px,1.6vw,26px) 0 0;font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(12px,1.05vw,16px);line-height:1.35}
.hero .visual{grid-column:2/-1;grid-row:3;position:relative;background:var(--panel);overflow:hidden;min-height:100%}
.hero .visual canvas{position:absolute;inset:0;width:100%;height:100%}

/* The visual cell, ruled rather than filled. It draws nothing of its own
   vertically: the ground is left transparent so the raster's column lines
   run straight through the cell, which is the only way they can be
   guaranteed to align. The horizontals are a repeat of the same module —
   one column width, measured off the cell's own inline size (it spans five
   of six columns on desktop, all three on mobile) — so the cell is ruled
   into squares of the grid rather than into an invented rhythm. The bottom
   is closed with a full-weight line, the same weight as .rule, so the block
   reads as a field and not as a fade. */
.hero .visual.lines{
  --vis-cols:5;
  background:transparent;overflow:hidden;
  container-type:inline-size;
  border-bottom:var(--lw) solid var(--line);
}
.hero .visual.lines::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    var(--line-soft) 0 var(--lw),
    transparent var(--lw) calc(100cqw / var(--vis-cols)));
}
/* The motto is set into one of the field's own cells rather than run
   along its closing rule: it starts in the top-left corner of the fourth
   cell of the bottom band, touching that cell's opening column line and
   the rule above it.

   Both edges are derived from what draws the field, so the type cannot
   drift off the rules as the viewport changes. The column line is
   --vis-motto-col cells in, measured with the same 100cqw/--vis-cols
   module the ::before gradient repeats on. The rule is found by rounding
   the field's height down to a whole number of those cells: the rules
   are drawn from the top, so the last one is exactly that far down and
   the band below it is the remainder.

   The rule's own weight then has to come off. The gradient paints its
   line downwards from the cell boundary — --lw of colour, then the gap —
   so type set flush to the boundary begins inside the line rather than
   under it, and the rule crosses the caps. Adding --lw puts the cap top
   on the rule's lower edge, where the line touches the type and stops.

   line-height is pinned to 1 and the line box's overhang above the cap
   is cut away, so what meets the rule is the cap top and not the box —
   the same treatment the h1 gets against the frame line. */
.hero .visual.lines .motto{
  --vis-cell:calc(100cqw / var(--vis-cols));
  --vis-motto-col:2;
  left:calc(var(--vis-cell) * var(--vis-motto-col));right:0;
  top:calc(round(down, var(--vis-h), var(--vis-cell)) + var(--lw));bottom:auto;
  text-align:left;padding-inline:0;line-height:1;
  color:var(--ink);z-index:1;
  /* Half-leading cancels out of the difference between the two overhangs,
     so the h1's stated pair fixes this one: .072 - .078 puts the cap
     overhang .006em below the baseline overhang at any line-height, and
     the motto's is .138em. site.js measures it properly; this is only
     what applies before either that or text-box-trim lands. */
  margin-top:calc(var(--motto-trim-top, .132em) * -1);
}
@supports (text-box-trim:trim-start){
  .hero .visual.lines .motto{margin-top:0;text-box-trim:trim-start;text-box-edge:cap alphabetic}
}
.hero .visual.lines .motto b{color:var(--accent-text)}
.hero .motto{position:absolute;left:0;right:0;bottom:clamp(14px,2vw,30px);text-align:center;color:#ECECF1;
  font-stretch:62.5%;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(11px,1vw,15px);opacity:.95}
.hero .motto b{color:var(--accent-on-dark);font-weight:700}
.hero .date{grid-column:1/2;grid-row:2/4;align-self:end;z-index:3;padding:clamp(12px,1.4vw,24px);color:var(--black)}
.hero .date .d{font-stretch:125%;font-weight:800;letter-spacing:var(--track-caps);font-size:clamp(24px,2.9vw,50px);line-height:.95}
.hero .date .y{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(11px,.9vw,14px);margin-top:10px}
.hero .strap{grid-column:1/-1;grid-row:4;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;position:relative;z-index:3;padding-block:clamp(14px,1.5vw,24px)}
.hero .strap .f1{background:var(--accent);color:var(--black);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:clamp(17px,2vw,34px);padding:.14em .32em}
.hero .strap .f2{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:clamp(17px,2vw,34px);line-height:1.06;color:var(--ink)}
.hero .strap .cta{margin-left:auto;display:flex;gap:10px;background:var(--bg);padding:10px}

/* ==================================================================
   PAGE HEAD — the compact hero used by every sub-page
   ================================================================== */
.pagehead{position:relative;z-index:2;padding-block:clamp(28px,3.2vw,54px) clamp(24px,2.8vw,44px)}
.pagehead .crumb{display:inline-flex;align-items:center;gap:9px;font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--accent-text);margin-bottom:clamp(18px,2vw,30px)}
.pagehead .crumb::before{content:"";width:0;height:0;border:5px solid transparent;border-right-color:currentColor;transition:transform .18s}
.pagehead .crumb:hover::before{transform:translateX(-4px)}
.pagehead .crumb:hover{color:var(--ink)}
.pagehead h1{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);
  line-height:.9;font-size:clamp(38px,6.4vw,108px);color:var(--ink)}
.pagehead .sub{margin-top:clamp(16px,1.8vw,26px);font-stretch:62.5%;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(13px,1.1vw,16px);color:var(--accent-text)}
.pagehead .ph-lede{align-self:end;padding-inline:var(--padx);background:var(--bg)}
.pagehead .ph-lede p{font-size:clamp(15px,1.2vw,19px);line-height:1.55;color:var(--text-mid)}
.pagehead .cellmark{background:var(--accent);color:var(--black);min-height:clamp(60px,7vw,120px)}

/* the fact strip under a work page head */
.factstrip{border-top:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);background:var(--bg)}
.factstrip .f{padding:var(--pad-m) var(--padx);border-right:var(--lw) solid var(--line-soft)}
.factstrip .f:last-child{border-right:none}
.factstrip .k{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:var(--muted)}
.factstrip .v{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:clamp(15px,1.35vw,21px);line-height:1.1;color:var(--ink);margin-top:9px}
.factstrip .v small{display:block;font-stretch:62.5%;font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;color:var(--text-lo);margin-top:6px;line-height:1.45}

/* marquee — magenta band, black condensed caps */
.marquee{position:relative;z-index:2;border-top:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);overflow:hidden;padding:14px 0;background:var(--marquee-bg)}
.marquee .track{display:flex;align-items:center;white-space:nowrap;width:max-content;animation:scroll 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .track span{display:inline-flex;align-items:center;text-transform:uppercase}
.marquee .track span{font-stretch:62.5%;font-weight:700;font-size:clamp(14px,1.4vw,19px);letter-spacing:.11em;color:var(--text-hi);padding-right:36px}
.marquee .track span::after{content:"";width:7px;height:7px;margin-left:36px;background:var(--accent-on-dark);transform:rotate(45deg);flex:none}
html[data-marquee="solid"] .marquee{background:var(--accent);color:var(--black);border-color:transparent;padding:13px 0}
html[data-marquee="solid"] .marquee .track{animation-duration:40s}
html[data-marquee="solid"] .marquee .track span{font-stretch:62.5%;font-weight:700;font-size:clamp(14px,1.3vw,19px);letter-spacing:.1em;color:var(--black);padding-right:56px}
html[data-marquee="solid"] .marquee .track span::after{content:"\2022";width:auto;height:auto;margin-left:56px;background:none;transform:none;color:var(--black)}
html[data-marquee="outline"] .marquee{background:var(--panel);padding:16px 0}
html[data-marquee="outline"] .marquee .track{animation-duration:36s}
html[data-marquee="outline"] .marquee .track span{font-stretch:125%;font-weight:800;font-size:clamp(16px,1.9vw,26px);letter-spacing:.04em;color:var(--accent-on-dark);padding-right:54px}
html[data-marquee="outline"] .marquee .track span::after{display:none}
html[data-marquee="outline"] .marquee .track span:nth-child(even){-webkit-text-stroke:1px var(--accent-on-dark);color:transparent}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ==================================================================
   SECTIONS
   ================================================================== */
section{position:relative;z-index:2}
.sect{padding-block:var(--sp-sect)}
.sect.tight{padding-block:calc(var(--sp-sect) * .68)}
.sect-head{margin-bottom:clamp(24px,2.8vw,44px);row-gap:clamp(16px,2vw,26px)}

/* about */
.quote{font-stretch:62.5%;font-weight:600;text-transform:uppercase;font-size:clamp(16px,1.45vw,22px);line-height:1.35;color:var(--ink)}
.quote b{background:var(--accent);color:var(--black);font-weight:600;padding:0 .12em}
.quote .who{display:block;margin-top:16px;font-size:12.5px;letter-spacing:.08em;color:var(--muted);font-weight:700}
.lead p+p{margin-top:18px}

.stats{border-top:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);margin-top:clamp(34px,3.6vw,60px);background:var(--bg)}
.stat{padding:var(--pad-m) var(--padx);border-right:var(--lw) solid var(--line-soft);text-align:center}
.stat:last-child{border-right:none}
.stat .num{font-stretch:125%;font-weight:800;font-size:clamp(30px,3.4vw,56px);line-height:1;letter-spacing:var(--track-caps);color:var(--ink)}
.stat .num em{font-style:normal;background:var(--accent);color:var(--black);padding:0 .08em}
.stat .lab{font-stretch:62.5%;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--muted);margin-top:9px}

/* lab / venue */
.specs{background:var(--bg)}
.spec{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px var(--padx);border-bottom:var(--lw) solid var(--line-soft)}
.spec:first-child{border-top:var(--lw) solid var(--line)}
.spec:last-of-type{border-bottom:var(--lw) solid var(--line)}
/* lab: the photo's bottom edge sits flush with the last spec row;
   the photo credit and the funding note share a footnote band below it */
.labduo{row-gap:10px}
.labduo>.c1.s4{display:flex;flex-direction:column;min-height:0}
.labduo .photo{flex:1 1 auto;min-height:220px}
.labduo .labfoot{display:flex;align-items:flex-start}
.labmoz{margin-top:clamp(12px,1.3vw,20px)}
.spec .k{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;padding-top:2px;color:var(--accent-text)}
.spec .v{font-size:14.5px;color:var(--text-mid)}
.fund{margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.6;padding-inline:var(--padx)}
.mozxr{margin-top:clamp(24px,2.6vw,38px);border:var(--lw) solid var(--accent);background:var(--accent);color:var(--black)}
.mozxr .pad{padding:var(--pad-m) var(--padx)}
.mozxr h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-3)}
.mozxr .sub{font-stretch:62.5%;font-weight:700;text-transform:uppercase;font-size:12px;margin-top:8px;letter-spacing:.08em}
.mozxr p{font-size:14px;line-height:1.55}

/* program — day tabs */
.day-tabs{display:flex;flex-wrap:wrap;border:var(--lw) solid var(--line);border-bottom:none;background:var(--bg)}
.day-tab{flex:1;min-width:180px;background:var(--bg);border:none;border-right:var(--lw) solid var(--line);cursor:pointer;text-align:left;padding:18px var(--padx);transition:background .18s;font-family:var(--f);color:var(--ink)}
.day-tab:last-child{border-right:none}
.day-tab .d{display:block;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:clamp(17px,1.6vw,24px)}
.day-tab .sub{display:block;font-stretch:62.5%;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:var(--muted)}
.day-tab[aria-selected="true"]{background:var(--accent);color:var(--black)}
.day-tab[aria-selected="true"] .sub{color:var(--black)}
.day-tab:not([aria-selected="true"]):hover{background:var(--hover-bg)}
.day-panel{border:var(--lw) solid var(--line);background:var(--bg)}
.day-panel[hidden]{display:none}
.slot{display:grid;grid-template-columns:repeat(6,1fr);align-items:baseline;padding:var(--pad-s) var(--padx);border-bottom:var(--lw) solid var(--line-soft);transition:background .15s}
.slot:last-child{border-bottom:none}
.slot:hover{background:var(--accent-dim)}
.slot .time{grid-column:1/2;font-stretch:125%;font-weight:800;letter-spacing:var(--track-caps);font-size:clamp(15px,1.2vw,18px);color:var(--accent-text)}
.slot .what{grid-column:2/5}
.slot .what h3{font-weight:700;font-size:clamp(15px,1.15vw,18px);color:var(--ink)}
.slot .tag{display:inline-block;margin-top:7px;font-stretch:62.5%;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:var(--lw) solid var(--line-soft);color:var(--muted);padding:3px 9px}
.slot .where{grid-column:5/7;font-stretch:62.5%;font-weight:600;font-size:13px;color:var(--muted);text-align:right;text-transform:uppercase;letter-spacing:.05em}

/* ==================================================================
   PROGRAMME LIST — the full line-up as an index, not as cards
   ================================================================== */
.prog{border-top:var(--lw) solid var(--line);background:var(--bg)}
.prog .pitem{display:grid;grid-template-columns:repeat(6,1fr);align-items:start;
  border-bottom:var(--lw) solid var(--line-soft);padding:var(--pad-m) 0;transition:background .15s}
.prog .pitem:last-child{border-bottom:var(--lw) solid var(--line)}
.prog .pitem:hover{background:var(--accent-dim)}
.prog .kind{grid-column:1/2;padding-left:var(--padx);padding-right:12px;padding-top:6px;
  font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;color:var(--muted)}
.prog .kind b{display:block;font-weight:700;color:var(--ink)}
.prog .kind span{display:block;margin-top:5px;font-weight:600;color:var(--muted)}
.prog .main{grid-column:2/5;padding-inline:var(--padx)}
.prog .main h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);
  font-size:clamp(18px,1.7vw,27px);line-height:1;color:var(--ink)}
.prog .main h3 .gloss{font-stretch:62.5%;font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--muted);text-transform:none}
.prog .main h3 a{border-bottom:2px solid var(--accent);padding-bottom:2px}
.prog .main h3 a:hover{color:var(--accent-text)}
.prog .main .who{font-stretch:62.5%;font-weight:700;letter-spacing:.02em;
  font-size:14px;color:var(--accent-text);margin-top:10px}
.prog .main p{font-size:14px;line-height:1.55;color:var(--text-lo);margin-top:12px;max-width:62ch}
.prog .side{grid-column:5/7;padding-inline:var(--padx);display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding-top:5px}
.prog .side span{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:11px;border:var(--lw) solid var(--line-soft);color:var(--muted);padding:4px 9px;height:fit-content}
.prog .side span.hi{border-color:var(--accent-text);color:var(--accent-text)}

/* group heading inside the programme index */
.pgroup{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:0 var(--padx) clamp(14px,1.6vw,22px);background:var(--bg)}
.pgroup h2{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-1);line-height:1;color:var(--ink)}
.pgroup .cnt{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--muted)}

/* faq */
.faq details{border-bottom:var(--lw) solid var(--line-soft);background:var(--bg)}
.faq details:first-of-type{border-top:var(--lw) solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px var(--padx);display:flex;justify-content:space-between;gap:24px;align-items:center;font-weight:700;font-size:clamp(16px,1.25vw,19px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-stretch:125%;font-weight:800;font-size:22px;line-height:1;transition:transform .2s;background:var(--accent);color:var(--black);width:32px;height:32px;display:grid;place-items:center;flex:none}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 var(--padx) 22px;color:var(--text-lo);max-width:72ch}

/* newsletter — magenta cell in the grid, black type */
.news{background:var(--accent);color:var(--black);padding:clamp(30px,3.4vw,60px) var(--padx)}
.news h2{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-display);line-height:.92}
.news h2 em{font-style:normal;background:var(--black);color:var(--accent-on-dark);padding:0 .1em}
.news p{margin-top:16px;max-width:46ch}
.signup{display:flex;margin-top:24px;max-width:560px;border:var(--lw) solid var(--black)}
.signup input{flex:1;min-width:0;background:var(--black);border:none;color:#ECECF1;padding:15px 18px;font-family:var(--f);font-size:15px}
.signup input::placeholder{color:#8b8b8b}
.signup input:focus{outline:none;background:#141416}
.signup button{border:none;background:var(--black);color:var(--accent-on-dark);border-left:var(--lw) solid var(--accent-on-dark);font-family:var(--f);font-stretch:62.5%;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:0 24px;cursor:pointer;font-size:14px;transition:background .2s,color .2s}
.signup button:hover{background:#fff;color:var(--black)}
.news .note{margin-top:14px;font-size:12.5px}

/* ==================================================================
   FOOTER
   The footer closes the page as a ruled colophon, in four bands:

     1. the masthead — the wordmark restated at display size against an
        accent cell carrying the dates, mirroring the hero's
        caps-plus-accent-cell construction so the page ends the way it
        began. Display type is left open on the raster on purpose.
     2. the column band — the address block plus four link columns.
        .fnav spans raster columns 3–6 and subdivides itself into
        exactly those four, so the hairlines between the columns fall
        on the raster's own interior lines. .fnav carries the plate and
        the columns draw the rules, which is the same division of
        labour .stats and .factstrip already use.
     3. the partner logos.
     4. the legal row.

   On mobile the four link columns pair into a ruled 2×2 and then, on
   the smallest screens, into a single ruled stack — a table at every
   width rather than an undifferentiated pile of links.
   ================================================================== */
footer.site{position:relative;z-index:2;color:var(--ink);padding-bottom:env(safe-area-inset-bottom)}

/* — masthead — */
.fmast{align-items:stretch;border-bottom:var(--lw) solid var(--line)}
.fmast-word{
  align-self:end;
  font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);
  font-size:clamp(38px,9vw,88px);line-height:.86;color:var(--ink);
  padding:clamp(30px,3.4vw,54px) var(--padx) clamp(24px,2.6vw,40px) 0;
}
.fmast-when{
  background:var(--accent);color:var(--black);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.2vw,32px) var(--padx);
}
.fmast-when .d{font-stretch:125%;font-weight:800;letter-spacing:var(--track-caps);
  font-size:clamp(26px,2.7vw,46px);line-height:.95}
.fmast-when .m{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(12px,1vw,15px);margin-top:9px}
.fmast-when .p{font-stretch:62.5%;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(11px,.85vw,13px);margin-top:4px;opacity:.72}

/* — column band — */
footer .frame.fmain{padding-block:clamp(32px,3.6vw,56px) clamp(26px,3vw,44px);row-gap:clamp(28px,3vw,44px)}

/* — brand / address column — */
.fbrand{padding-inline:0 var(--padx)}
.fbrand .fstrap{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:12.5px;line-height:1.5;color:var(--text-hi);max-width:30ch}
.fbrand address{font-style:normal;font-size:13.5px;line-height:1.65;color:var(--text-lo);
  margin-top:16px;max-width:34ch}
.fbrand .uni{margin-top:22px;display:inline-block;font-stretch:62.5%;font-weight:700;text-transform:lowercase;
  letter-spacing:.03em;font-size:15px;border-bottom:2px solid var(--ink);padding-bottom:2px;
  transition:color .18s,border-color .18s}
.fbrand .uni::after{content:" •";color:var(--accent)}
.fbrand .uni:hover{color:var(--accent-text);border-color:var(--accent-text)}

/* — the four link columns — */
.fnav{display:grid;grid-template-columns:repeat(4,1fr);column-gap:0;row-gap:clamp(24px,2.6vw,36px)}
.fcol{padding-inline:var(--padx);border-right:var(--lw) solid var(--line-soft)}
.fcol:last-child{border-right:none}
.fcol h2{font-stretch:62.5%;font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:12px;
  color:var(--accent-text);padding-bottom:10px;margin-bottom:10px;
  border-bottom:var(--lw) solid var(--line-soft)}
.fcol ul{list-style:none;display:flex;flex-direction:column}
.fcol li{display:block}
.fcol a,.fcol .pending{display:block;font-size:14px;line-height:1.45;padding-block:8px;width:fit-content;max-width:100%}
.fcol a{color:var(--text-lo);position:relative}
.fcol a::after{content:"";position:absolute;left:0;bottom:6px;height:var(--lw);width:100%;background:var(--accent-text);
  transform:scaleX(0);transform-origin:left;transition:transform .2s}
.fcol a:hover{color:var(--accent-text)}
.fcol a:hover::after{transform:scaleX(1)}
.fcol .pending{color:var(--muted);opacity:.7;cursor:default}
.fmail{margin-top:16px;padding-top:14px;border-top:var(--lw) solid var(--line-soft);font-size:13px;line-height:1.55}
.fmail a{color:var(--text-hi);border-bottom:var(--lw) solid var(--line-soft);overflow-wrap:break-word}
.fmail a:hover{color:var(--accent-text);border-color:var(--accent-text)}
.fmail span{color:var(--muted);font-size:12px}

/* — logo band — */
.flogos-lab{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:11px;
  color:var(--muted);padding:0 var(--padx) 12px;background:var(--bg)}
.site .plogos{justify-content:flex-start;row-gap:clamp(18px,2vw,28px)}
.fcoop{padding:14px var(--padx) 0;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:96ch;background:var(--bg)}
.fcoop b{color:var(--text-lo);font-weight:700}

/* — legal / copyright row — */
.fbottom{margin-top:clamp(20px,2.4vw,32px);border-top:var(--lw) solid var(--line-soft);
  padding:16px var(--padx);display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(20px,2.4vw,40px);
  font-size:12.5px;color:var(--muted)}
.fcopy{flex:1 1 auto}
.flegal{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.flegal a,.flegal .pending{font-size:12.5px;padding-block:6px;display:inline-block}
.flegal a{color:var(--text-lo);border-bottom:var(--lw) solid var(--line-soft)}
.flegal a:hover{color:var(--accent-text);border-color:var(--accent-text)}
.flegal .pending{color:var(--muted);opacity:.65;cursor:default}
.totop{display:inline-flex;align-items:center;gap:9px;font-stretch:62.5%;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:11px;color:var(--text-lo);border:var(--lw) solid var(--line-soft);
  padding:9px 14px;transition:color .18s,border-color .18s,background .18s}
.totop::after{content:"";width:0;height:0;border:5px solid transparent;border-bottom-color:currentColor;
  margin-top:-4px;transition:transform .18s}
.totop:hover{color:var(--accent-text);border-color:var(--accent-text)}
.totop:hover::after{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.totop:hover::after{transform:none}.fcol a::after{transition:none}}

/* reveal — content rises onto the grid */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none}
  .marquee .track{animation:none}
  .btn::before{transition:none}
}

/* ==================================================================
   DEV THEME SWITCHER
   ================================================================== */
.devtheme{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:var(--f)}
.devtheme[hidden]{display:none}
.dev-toggle{width:auto;background:var(--bg);color:var(--ink);border:var(--lw) solid var(--line);padding:10px 14px;cursor:pointer;font-family:var(--f);font-stretch:62.5%;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;display:inline-flex;align-items:center;gap:8px}
.dev-toggle::before{content:"";width:9px;height:9px;background:var(--accent)}
.dev-toggle:hover{border-color:var(--accent)}
.dev-panel{background:var(--bg);border:var(--lw) solid var(--line);padding:16px;min-width:230px;box-shadow:0 8px 40px rgba(0,0,0,.35)}
.dev-panel .dev-lab{display:block;font-stretch:62.5%;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:var(--muted);margin-bottom:12px}
.dev-panel .dev-lab+.dev-lab{margin-top:16px}
.dev-row{display:flex;gap:8px;flex-wrap:wrap}
.dev-row .mode{flex:1;background:transparent;color:var(--ink);border:var(--lw) solid var(--line);padding:9px 0;cursor:pointer;font-family:var(--f);font-stretch:62.5%;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.dev-row .mode[aria-pressed="true"]{background:var(--accent);color:var(--black);border-color:var(--accent)}
.dev-row .sw{width:30px;height:30px;border:var(--lw) solid var(--line);cursor:pointer;padding:0;position:relative}
.dev-row .sw[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.dev-row .sw:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.dev-row .sw:hover{transform:none}}

/* ==================================================================
   CONTENT COMPONENTS
   ================================================================== */

/* photo panels */
.photo{position:relative;overflow:hidden;background:var(--panel);border:var(--lw) solid var(--line-soft)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .visual.photo{border:none}
.photo .tagchip{position:absolute;left:0;top:0;background:var(--accent);color:var(--black);font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:8px 14px;z-index:2}
.tcard .ph .tagchip{position:absolute;left:0;bottom:0;background:var(--accent);color:var(--black);
  font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding:7px 13px;z-index:2}
.credit{font-stretch:62.5%;font-weight:600;letter-spacing:.03em;font-size:12px;color:var(--muted);padding-top:9px;background:var(--bg)}

/* provisional / info notice */
.notice{display:flex;gap:14px;align-items:flex-start;border:var(--lw) solid var(--accent);padding:13px var(--padx);margin-top:20px;font-size:13.5px;color:var(--text-mid);line-height:1.55;background:var(--bg)}
.notice::before{content:"!";flex:none;width:22px;height:22px;display:grid;place-items:center;background:var(--accent);color:var(--black);font-stretch:125%;font-weight:800;font-size:14px}

/* ---- roadmap ---- */
.road{border-top:var(--lw) solid var(--line);background:var(--bg)}
.road .row{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:var(--lw) solid var(--line-soft);padding:var(--pad-m) 0;align-items:baseline;transition:background .15s}
.road .row:last-child{border-bottom:var(--lw) solid var(--line)}
.road .row:hover{background:var(--accent-dim)}
.road .when{grid-column:1/2;padding-right:var(--padx);padding-left:var(--padx);font-stretch:125%;font-weight:800;letter-spacing:var(--track-caps);text-transform:uppercase;font-size:clamp(14px,1.1vw,17px);color:var(--accent-text)}
.road .rbody{grid-column:2/6;padding-inline:var(--padx)}
.road .rbody h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-3);line-height:1;color:var(--ink)}
.road .rbody p{font-size:14px;color:var(--text-lo);margin-top:11px;max-width:62ch;line-height:1.55}
.road .state{grid-column:6/7;justify-self:end;align-self:start;margin-right:var(--padx);font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:var(--muted);border:var(--lw) solid var(--line-soft);padding:4px 10px}
.road .row.now .state{background:var(--accent);color:var(--black);border-color:var(--accent)}

/* ---- works: large alternating features (detail pages) ---- */
.work{border-top:var(--lw) solid var(--line);padding-block:clamp(30px,3.2vw,52px);row-gap:clamp(22px,2.4vw,38px)}
.work .wk{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--accent-text)}
.work h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);line-height:.94;font-size:var(--fs-1);color:var(--ink);margin-top:14px}
.work .by{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin-top:16px;color:var(--ink)}
.work .by em{font-style:normal;background:var(--accent);color:var(--black);padding:2px 8px}
.work .txt{margin-top:20px}
.work .txt p{font-size:15px;line-height:1.62;color:var(--text-mid)}
.work .txt p+p{margin-top:14px}
.work .meta{margin-top:24px;border-top:var(--lw) solid var(--line-soft)}
.work .meta .r{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:11px 0;border-bottom:var(--lw) solid var(--line-soft);font-size:13.5px;color:var(--text-lo);line-height:1.5}
.work .meta .k{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;color:var(--muted);padding-top:2px}
.awards{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.awards span{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11px;border:var(--lw) solid var(--accent-text);color:var(--accent-text);padding:5px 10px}
.work .imgstack{display:grid;gap:clamp(10px,1vw,18px)}

/* ---- long-form body on a work page ---- */
.body-copy{background:var(--bg);padding-inline:var(--padx)}
.body-copy h2,.body-copy h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);
  font-size:var(--fs-3);color:var(--ink);margin-top:clamp(26px,2.6vw,40px)}
.body-copy h2:first-child,.body-copy h3:first-child{margin-top:0}
.body-copy p{font-size:clamp(15px,1.1vw,17px);line-height:1.68;color:var(--text-mid);margin-top:14px;max-width:68ch}
.body-copy p.big{font-size:clamp(17px,1.35vw,22px);line-height:1.5;color:var(--text-hi)}
.body-copy ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px;max-width:68ch}
.body-copy li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;color:var(--text-lo)}
.body-copy li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--accent)}
.body-copy b{color:var(--text-hi)}

/* ---- works: compact grid ---- */
.wgrid{border-top:var(--lw) solid var(--line);border-left:var(--lw) solid var(--line)}
.wcard{border-right:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);padding:var(--pad-m) var(--padx);display:flex;flex-direction:column;gap:11px;background:var(--bg);transition:background .18s}
.wcard:hover{background:var(--accent-dim)}
.wcard .wk{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--accent-text)}
.wcard h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-2);line-height:.98;color:var(--ink)}
.wcard .by{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted)}
.wcard p{font-size:13.5px;line-height:1.55;color:var(--text-lo)}
.wcard .facts{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.wcard .facts span{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11px;border:var(--lw) solid var(--line-soft);color:var(--muted);padding:4px 9px}

/* ---- the three residencies, as gateway cards on the landing page ---- */
.trio{border-top:var(--lw) solid var(--line);border-left:var(--lw) solid var(--line)}
.tcard{border-right:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);
  background:var(--bg);display:flex;flex-direction:column;transition:background .2s}
.tcard:hover{background:var(--hover-accent)}
.tcard .ph{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/3;border-bottom:var(--lw) solid var(--line-soft)}
.tcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .ph img{transform:scale(1.035)}
.tcard .ph canvas{position:absolute;inset:0;width:100%;height:100%}
.tcard .no{position:absolute;left:0;top:0;z-index:2;background:var(--accent);color:var(--black);
  font-stretch:125%;font-weight:800;font-size:15px;letter-spacing:var(--track-caps);padding:7px 13px}
.tcard .tx{padding:var(--pad-m) var(--padx);display:flex;flex-direction:column;gap:10px;flex:1}
.tcard .wk{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--accent-text)}
.tcard h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);
  font-size:clamp(20px,1.9vw,30px);line-height:.98;color:var(--ink)}
.tcard .by{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted)}
.tcard p{font-size:13.5px;line-height:1.55;color:var(--text-lo)}
.tcard .more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:9px;
  font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;color:var(--accent-text)}
.tcard .more::after{content:"";width:16px;height:var(--lw);background:var(--accent-text);
  transform-origin:left;transition:transform .22s}
.tcard:hover .more::after{transform:scaleX(1.75)}
/* "coming soon" label — condensed caps, muted (work pages not yet linked) */
.soon{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--muted)}
.tcard .more.soon{color:var(--muted)}
.tcard .more.soon::after{display:none}
.prog h3 .soon{margin-left:10px}

/* ---- prev / next between the three work pages ---- */
.pager{border-top:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);background:var(--bg)}
.pager a{padding:var(--pad-l) var(--padx);display:flex;flex-direction:column;gap:8px;transition:background .18s}
.pager a:hover{background:var(--accent-dim)}
.pager .dir{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted)}
.pager .ttl{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);
  font-size:clamp(17px,1.6vw,25px);line-height:1;color:var(--ink)}
.pager a:hover .ttl{color:var(--accent-text)}
.pager .nx{text-align:right;border-left:var(--lw) solid var(--line-soft)}

/* ---- people ---- */
.people{border-top:var(--lw) solid var(--line);border-left:var(--lw) solid var(--line)}
.person{border-right:var(--lw) solid var(--line-soft);border-bottom:var(--lw) solid var(--line-soft);padding:clamp(16px,1.6vw,24px) var(--padx);background:var(--bg);transition:background .18s}
.person:hover{background:var(--hover-accent)}
.person .nm{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-4);line-height:1.05;color:var(--ink)}
.person .rl{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11px;margin-top:8px;color:var(--accent-text)}
.person p{font-size:13px;color:var(--text-lo);margin-top:10px;line-height:1.5}
.person.fill{background:var(--accent);color:var(--black);display:flex;align-items:flex-end}
.person.fill .nm{color:var(--black);font-size:var(--fs-3);line-height:1}
.person.fill:hover{background:var(--accent)}

/* ---- visit ---- */
.visit-card{border:var(--lw) solid var(--line);padding:var(--pad-m) var(--padx);height:100%;display:flex;flex-direction:column;gap:13px;background:var(--bg)}
.visit-card h3{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-3);color:var(--ink)}
.visit-card p,.visit-card li{font-size:14px;line-height:1.6;color:var(--text-lo)}
.visit-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.visit-card li{position:relative;padding-left:18px}
.visit-card li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--accent)}
.visit-card a{border-bottom:var(--lw) solid var(--accent-text);color:var(--accent-text)}
.perk{border-top:var(--lw) solid var(--line);border-left:var(--lw) solid var(--line)}
.perk .p{border-right:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);padding:var(--pad-m) var(--padx);display:flex;flex-direction:column;gap:11px;background:var(--bg)}
.perk .p .lg{height:42px;display:flex;align-items:center}
.perk .p img{max-height:30px;width:auto;object-fit:contain;object-position:left}
.perk .p img.sq{max-height:42px}
.perk .p .pn{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;color:var(--accent-text)}
.perk .p p{font-size:13.5px;color:var(--text-lo);line-height:1.55}

/* ---- partners ---- */
.plogos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,2.8vw,50px);padding:clamp(22px,2.2vw,36px) var(--padx);border-top:var(--lw) solid var(--line);border-bottom:var(--lw) solid var(--line);background:var(--bg)}
.plogos img{height:clamp(24px,2.2vw,36px);width:auto;object-fit:contain;opacity:.85;transition:opacity .2s}
.plogos img:hover{opacity:1}
.plogos img.sq{height:clamp(34px,3vw,48px)}
.plist{background:var(--bg)}
.plist .pr{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:12px var(--padx);border-bottom:var(--lw) solid var(--line-soft);font-size:14px;color:var(--text-mid);line-height:1.5}
.plist .pr:first-child{border-top:var(--lw) solid var(--line)}
.plist .pr:last-child{border-bottom:var(--lw) solid var(--line)}
.plist .pr .k{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;color:var(--accent-text);padding-top:3px}

/* white-on-dark logo assets need inverting in light mode */
html[data-mode="light"] img[data-invert]{filter:invert(1)}

/* ---- press / contact ---- */
.contact{border:var(--lw) solid var(--line);padding:var(--pad-l) var(--padx);display:flex;flex-direction:column;gap:10px;height:100%;background:var(--bg)}
.contact .who{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--fs-3);color:var(--ink)}
.contact .role{font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;color:var(--accent-text)}
.contact a{font-size:15px;color:var(--text-hi);border-bottom:var(--lw) solid var(--line-soft);width:fit-content}
.contact a:hover{color:var(--accent-text);border-color:var(--accent-text)}

/* ---- tickets ---- */
.ticket-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:var(--pad-m) var(--padx);border-bottom:var(--lw) solid var(--line);background:var(--bg)}
.ticket-cta p{font-size:14px;color:var(--text-mid);max-width:52ch;line-height:1.55}

/* ---- programme at a glance: the whole line-up in two dense columns ---- */
.glance{border-top:var(--lw) solid var(--line)}
.gcol{padding:var(--pad-m) var(--padx) var(--pad-s);background:var(--bg);border-bottom:var(--lw) solid var(--line)}
.gcol+.gcol{border-left:var(--lw) solid var(--line-soft)}
.gcol h3{display:flex;align-items:baseline;gap:12px;font-stretch:125%;font-weight:800;text-transform:uppercase;
  letter-spacing:var(--track-caps);font-size:var(--fs-3);color:var(--ink);margin-bottom:6px}
.gcol h3 span{font-stretch:62.5%;font-weight:700;font-size:11px;letter-spacing:.09em;
  background:var(--accent);color:var(--black);padding:3px 8px}
.gcol ul{list-style:none}
.gcol li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:9px 0;border-bottom:var(--lw) solid var(--line-soft)}
.gcol li:last-child{border-bottom:none}
.gcol li b{font-weight:700;font-size:14.5px;color:var(--ink)}
.gcol li em{font-style:normal;flex:none;text-align:right;font-stretch:62.5%;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--muted)}

/* ==================================================================
   PLATES vs. THE FRAME LINES
   A plate is painted as a background image inset by one line weight on
   each side instead of a flat background colour. Where a plate meets
   the two outer frame lines, the line shows through and runs unbroken
   down the whole page; only the interior column lines are interrupted
   by running text, which is the point of the plate.
   Blocks that draw their own left/right border at the frame position
   (.day-panel, .day-tabs, .visit-card, .contact, .notice, .wgrid,
   .people, .trio, .perk) already keep the line and are left alone.
   ================================================================== */
.plate,.sect-lede,.pagehead .ph-lede,.body-copy,.credit,
.stats,.specs,.road,.prog,.gcol,.factstrip,.plist,.plogos,
.faq details,.ticket-cta,.fbrand,.fnav,.fbottom,.flogos-lab,.fcoop{
  background:linear-gradient(var(--bg),var(--bg)) no-repeat
    var(--lw) 0 / calc(100% - var(--lw) - var(--lw)) 100%;
}

/* ==================================================================
   EDITORIAL TODO MARKERS  (dev-only, off by default)
   ================================================================== */
html[data-todos="on"] [data-todo]{position:relative;outline:2px dashed #C4123F;outline-offset:5px}
html[data-todos="on"] [data-todo]::after{
  content:"Needs input — " attr(data-todo);
  position:absolute;left:0;top:-6px;transform:translateY(-100%);
  background:#C4123F;color:#fff;font-family:var(--f);font-stretch:62.5%;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:10px;line-height:1.4;
  padding:5px 8px;width:max-content;max-width:min(430px,78vw);z-index:60;pointer-events:none;
}
.todo-count{margin-left:7px;background:#C4123F;color:#fff;padding:1px 6px;font-size:10px;font-weight:700}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width:820px){
  :root{--cols:3;--edge:26px;--m1:6px;--m2:16px}
  .navlinks{display:none}
  .burger{display:flex}
  .mobile-menu{display:block;position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--bg);border-bottom:var(--lw) solid var(--line);z-index:49;transform:translateY(-130%);transition:transform .3s;padding:6px var(--edge) 20px}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{display:block;padding:13px 0;border-bottom:var(--lw) solid var(--line-soft);font-stretch:62.5%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
  .g>*{grid-column:1/-1!important}
  .hero .comp{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto minmax(240px,52vw) auto}
  .hero h1{grid-row:1;grid-column:1/-1}
  .hero .cell.tr{grid-column:2/-1;grid-row:1}
  .hero .kicker{display:none}
  /* the accent cell must cover the whole date block — it spans 1/3, so
     anything narrower left the black date type sitting on the black page */
  .hero .cell.left{grid-column:1/3;grid-row:2}
  .hero .date{grid-row:2;grid-column:1/3;padding:16px}
  .hero .visual{grid-column:1/-1;grid-row:3}
  .hero .visual.lines{--vis-cols:3}
  /* three cells wide, so there is no fourth to sit in, and the row is
     sized from its own minmax rather than --vis-h: the motto keeps the
     original treatment here and rides the rule that closes the field. */
  .hero .visual.lines .motto{
    left:0;right:0;top:auto;bottom:0;
    padding-inline:var(--padx);
    margin-top:0;margin-bottom:calc(var(--motto-trim, .138em) * -1);
  }
  @supports (text-box-trim:trim-end){
    .hero .visual.lines .motto{margin-bottom:0;text-box-trim:trim-end;text-box-edge:text alphabetic}
  }
  .hero .cell.br{grid-column:2/-1}
  .hero .strap .cta{margin-left:0;margin-top:14px;width:100%;display:flex;gap:10px;padding:10px;background:var(--bg)}
  .hero .strap .cta .btn{flex:1;justify-content:center;padding-inline:14px}
  .pagehead .cellmark{display:none}
  .mozxr .pad{border-right:none!important;border-bottom:var(--lw) solid var(--black)}
  .mozxr .pad:last-child{border-bottom:none}
  .stats .stat{border-right:none;border-bottom:var(--lw) solid var(--line-soft)}
  .stats .stat:last-child{border-bottom:none}
  .factstrip .f{border-right:none;border-bottom:var(--lw) solid var(--line-soft)}
  .factstrip .f:last-child{border-bottom:none}
  .day-tab{min-width:100%;border-right:none;border-bottom:var(--lw) solid var(--line)}
  .day-tab:last-child{border-bottom:none}
  .slot{grid-template-columns:1fr;gap:6px}
  .slot .time,.slot .what,.slot .where{grid-column:1/-1}
  .slot .where{text-align:left}
  .signup{flex-direction:column;border:none;gap:10px}
  .signup input{border:var(--lw) solid var(--black)}
  .signup button{padding:15px;border:var(--lw) solid var(--black)}
  .road .row{grid-template-columns:1fr;gap:10px;padding-inline:var(--padx)}
  .road .when,.road .rbody,.road .state{grid-column:1/-1;padding-inline:0}
  .road .when{padding-left:0;padding-right:0}
  .road .state{justify-self:start;margin-right:0}
  .prog .pitem{grid-template-columns:1fr;gap:12px;padding-inline:var(--padx)}
  .prog .kind,.prog .main,.prog .side{grid-column:1/-1;padding-inline:0}
  .prog .kind{padding-top:0;display:flex;gap:10px}
  .prog .kind span{margin-top:0}
  .prog .side{justify-content:flex-start}
  .wgrid,.people,.perk,.trio{grid-template-columns:1fr}
  .gcol+.gcol{border-left:none}
  .gcol li{gap:10px}
  .wcard,.person,.perk .p,.tcard{border-right:none}
  .work .meta .r{grid-template-columns:1fr;gap:4px}
  .plist .pr{grid-template-columns:1fr;gap:5px}
  .pager .nx{border-left:none;border-top:var(--lw) solid var(--line-soft);text-align:left}
}
@media (max-width:560px){
  .hero .strap{flex-direction:column;align-items:flex-start;gap:10px}
  .hero .strap .f1,.hero .strap .f2{max-width:100%}
  /* too narrow for one line — the place name returns to its own row */
  .fmast-when .p{margin-left:0;flex-basis:100%;margin-top:5px}
}

/* ==================================================================
   RESPONSIVE — REFINEMENTS
   Layered on top of the block above rather than folded into it, so the
   original rules stay readable and each change can be reverted on its
   own. Three concerns, in order:
     1. a tablet tier, so 820px does not fall straight to one column
     2. the mobile nav: reachable, dismissible, and scrollable
     3. touch targets and label/value rows that were tuned for a mouse
   ================================================================== */

/* ---- 1. TABLET: 561–820px keeps the two-up sets two-up ------------
   .g>*{grid-column:1/-1!important} collapses everything to a single
   column the moment the viewport crosses 820px. On a tablet that
   leaves the card sets very wide and the page very long, so the sets
   that read naturally in pairs are re-paired here.
   .trio and .perk stay full-width on purpose: both hold three items,
   so a two-up would strand an orphan in the bottom row.             */
@media (min-width:561px) and (max-width:820px){
  .wgrid,.people,.glance{grid-template-columns:repeat(2,1fr)}
  .wgrid>*,.people>*,.glance>*{grid-column:auto!important}
  .gcol:nth-child(odd){border-left:none}
  .gcol:nth-child(even){border-left:var(--lw) solid var(--line-soft)}
  .wcard:nth-child(even),.person:nth-child(even){border-right:var(--lw) solid var(--line)}
}

@media (max-width:820px){

  /* ---- 2. NAV -------------------------------------------------- */

  /* The nav is parked off-screen until the page scrolls, which on a
     phone means a visitor landing on the hero has no menu at all and
     no way to know one exists. On mobile it stays put; the hero is
     pushed down by the same amount so nothing is covered.
     Delete this rule to restore the original reveal-on-scroll. */
  :root{--nav-h:64px}
  header.nav{transform:none;visibility:visible;transition:none}
  .hframe-top{padding-top:calc(var(--nav-h) + var(--m1))}
  html{scroll-padding-top:calc(var(--nav-h) + 12px)}

  .nav-inner{gap:12px}
  .brand .b1{font-size:15px}
  .brand .b2{font-size:10px;letter-spacing:.05em}

  /* burger becomes a close cross while the menu is open */
  .burger{width:46px;height:46px;flex:none;gap:5px;transition:border-color .18s}
  .burger span{transition:transform .24s cubic-bezier(.2,.7,.2,1),opacity .16s}
  .burger[aria-expanded="true"]{border-color:var(--accent)}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* the panel had auto height, so a long menu on a short screen (or a
     phone in landscape) ran off the bottom with no way to reach it */
  .mobile-menu{max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding:6px var(--edge) calc(20px + env(safe-area-inset-bottom))}
  .mobile-menu a{padding:15px 0;font-size:15px}
  .mobile-menu a:last-of-type{border-bottom:none}
  .mobile-menu .mm-cta{margin-top:14px;background:var(--accent);color:var(--black);
    border-bottom:none;text-align:center;padding:15px 18px}

  /* ---- 3. TOUCH TARGETS AND DENSE ROWS ------------------------- */

  body{-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 22%,transparent)}

  /* an eyebrow is a chip plus a line of text on one flex row; the chip
     refused to wrap and squeezed the text into a narrow ribbon */
  .eyebrow{flex-wrap:wrap;gap:8px 10px;font-size:12.5px}

  /* label/value rows: a fixed label column left roughly 170px for the
     value on a 360px screen. Label above value instead. */
  .spec{grid-template-columns:1fr;gap:4px;padding-block:14px}
  .spec .k{padding-top:0}
  .spec .v{font-size:15px}

  /* line-up rows: title and credit were pinned to opposite edges */
  .gcol li{flex-direction:column;align-items:flex-start;gap:3px;padding-block:11px}
  .gcol li em{text-align:left}

  .faq summary{gap:14px;padding-block:18px;font-size:16px}
  .faq summary .pm{width:36px;height:36px}

  .ticket-cta{flex-direction:column;align-items:stretch;gap:16px}
  .ticket-cta .btn{justify-content:center}

  .btn{padding:15px 22px}

  /* the .br accent cell sits beside the strapline on desktop; once the
     strap stacks it lands behind it, putting white caps on magenta */
  .hero .cell.br{display:none}

  /* the motto sits over whatever the hero crop happens to land on;
     on a narrow crop that is often the brightest part of the photo */
  .hero .visual .motto{letter-spacing:.1em}
  .hero .visual.photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
    background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none;z-index:1}
  .hero .motto{z-index:2}

  .marquee .track{animation-duration:32s}

  /* four full-width stat rows ate most of a phone screen for four
     numbers; a 2×2 keeps them comparable at a glance */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat{grid-column:auto!important;padding-block:var(--pad-s);border-bottom:none}
  .stats .stat:nth-child(odd){border-right:var(--lw) solid var(--line-soft)}
  .stats .stat:nth-child(-n+2){border-bottom:var(--lw) solid var(--line-soft)}
  .stats .stat:last-child{border-bottom:none}
  .stat .num{font-size:clamp(28px,8vw,44px)}
  .stat .lab{font-size:11px;letter-spacing:.08em}
  .plist .pr .k{padding-top:0}
  .mozxr .pad{padding-block:var(--pad-s)}

  /* the dev panel is an editing tool — keep it clear of the thumb */
  .devtheme{right:10px;bottom:10px}
  .dev-panel{max-width:calc(100vw - 20px)}

  /* ---- FOOTER ON MOBILE ---------------------------------------- */

  /* masthead: the wordmark takes the full width and the date cell
     becomes a band under it, reading across instead of down */
  .fmast-word{padding:clamp(26px,6vw,38px) 0 clamp(18px,4vw,26px)}
  .fmast-when{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;
    gap:0 14px;padding:14px var(--padx)}
  .fmast-when .m,.fmast-when .p{margin-top:0}
  /* wide enough for one line: the place name takes the far end of the band,
     so the accent does not read as a bar with a label stuck to one corner */
  .fmast-when .p{margin-left:auto}

  /* four stacked link lists made the footer taller than the page it
     belongs to, so the columns pair into a ruled 2×2 block */
  .fnav{grid-template-columns:repeat(2,1fr);row-gap:0}
  .fcol{border-right:none;border-top:var(--lw) solid var(--line-soft);
    padding-block:20px;padding-left:0;padding-right:var(--padx)}
  .fcol:nth-child(odd){border-right:var(--lw) solid var(--line-soft)}
  .fcol:nth-child(even){padding-left:var(--padx);padding-right:0}
  .fcol:nth-child(-n+2){border-top:none;padding-top:0}
  .fcol a,.fcol .pending{font-size:15px;line-height:1.45;padding-block:11px}
  .fcol a::after{bottom:9px}

  .fbrand{padding-inline:0}
  .fbrand .fstrap,.fbrand address{max-width:100%}
  footer .frame.fmain{padding-block:clamp(28px,6vw,40px) 26px;row-gap:28px}

  /* a wrapping flex row left the six logos on ragged baselines; a grid
     puts them on shared rows at every width */
  .flogos-lab,.fcoop{padding-inline:0}
  .site .plogos{display:grid;grid-template-columns:repeat(3,1fr);
    gap:24px 18px;align-items:center;justify-items:start;padding-inline:0}

  .fbottom{padding-inline:0;flex-direction:column;align-items:stretch;gap:14px}
  .fcopy{flex:none}
  .flegal{gap:0 20px}
  .flegal a,.flegal .pending{font-size:13px;padding-block:11px}
  .totop{width:100%;justify-content:center;padding-block:14px}
}

/* ---- very small screens ------------------------------------------ */
@media (max-width:400px){
  :root{--edge:18px}
  .hero .strap .cta{flex-direction:column}
  .hero .strap .cta .btn{width:100%}
  .site .plogos{grid-template-columns:repeat(3,1fr);gap:22px 16px}
}

/* ---- narrower than any current phone: the 2×2 would leave ~80px of
        measure per column, so the link columns become one stack ------- */
@media (max-width:359px){
  .fnav{grid-template-columns:1fr;row-gap:0}
  .fcol,.fcol:nth-child(odd),.fcol:nth-child(even){padding-left:0;padding-right:0;border-right:none;
    border-top:var(--lw) solid var(--line-soft);padding-block:18px}
  .fcol:first-child{border-top:none;padding-top:0}
  .site .plogos{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  .brand .b2{display:none}
}

/* ==================================================================
   RESPONSIVE — DEVICE BEHAVIOUR
   Four things that only show up on a real handset: display headings
   that were broken for a wide column, the hero crop in landscape,
   iOS zooming a form field, and the browser's own surfaces.
   ================================================================== */

/* the hard <br> in a section title is a line break composed for a
   six-column measure. On a phone that same break is what pushes the
   longest line past the frame, so below the tablet tier the heading
   wraps to the column it actually has. The hero and page-head
   lockups keep their breaks: both are two short words by design. */
@media (max-width:560px){
  .section-title br{display:none}
  .section-title{text-wrap:balance}
}

/* a phone in landscape is ~360px tall, and the hero's picture row was
   sized from the viewport WIDTH — 52vw of an 800px-wide screen is a
   416px image on a 360px-tall screen, so the strap and the buttons
   below it were pushed off every landscape viewport. */
@media (max-width:900px) and (orientation:landscape){
  .hero .comp{grid-template-rows:auto auto minmax(150px,44vh) auto}
}

/* Safari zooms the page when a focused input is under 16px, and never
   zooms back out. Only the touch build needs the larger field. */
@media (pointer:coarse){
  .signup input{font-size:16px}
  .signup input::placeholder{font-size:16px}
}

/* the surfaces the page does not draw itself still belong to it */
html{scrollbar-color:color-mix(in srgb,var(--accent) 42%,var(--bg)) var(--bg)}
body{caret-color:var(--accent-text)}

/* the smallest phones still in use: one more step down for the display face,
   so the longest unbreakable heading token clears an 18px frame. */
@media (max-width:360px){
  :root{--fs-display:23px}
}