@charset "utf-8";
/* =============================================================================
   TPAC — Third Party Advantage Conference
   "One rotation, three regions."

   Colour is sampled from the existing tpac mark: three blades around a centre,
   producing a new colour where they overlap. Type is Archivo across its width
   axis, Instrument Serif Italic as a rationed counterpoint, IBM Plex Mono for
   every date, venue and status. Corners are square everywhere — status reads as
   a rule and a word, never as a capsule.
   ========================================================================== */

@font-face{font-family:Archivo;src:url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens -- */
:root{
  --display:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --rail:0px;
  --pad:clamp(20px,4.2vw,86px);
  --maxw:1720px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* fixed across themes: type over photography is always light */
  --on-photo:#F4F2EA;
  --on-photo-dim:#C8C5B9;
  --scrim:19,18,16;
}

/* ---- dark: the working floor at night (default) ------------------------- */
:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --s1:#121110;              /* base ground */
  --s2:#1A1815;              /* alternate ground */
  --s3:#EDEBE3;              /* inverted feature ground */
  --fg:#EDEBE3;
  --fg-dim:#A09B8E;
  --fg-mute:#726D62;
  --on-s3:#17150F;
  --on-s3-dim:#5C594E;
  --rule:rgba(237,235,227,.14);
  --rule-2:rgba(237,235,227,.30);
  --wash:rgba(237,235,227,.05);

  --sa:#FBB040;              /* South Africa — the upper blade */
  --na:#72C3FB;              /* North America  — the left blade  */
  --as:#EE5327;              /* Asia           — the right blade */
  --eco:#7EBE4A;             /* the through-line */
  --umber:#B0713A;           /* the colour where two blades cross */

  /* Cleared, not omitted. The light media query sets this on :root, and a
     value only the light theme defines still survives into a dark toggle on a
     machine set to light, because this block never says otherwise. initial
     makes var() fall back to the near-black each swatch carries. Anything the
     light palette introduces has to be answered here for the same reason. */
  --sw-ink:initial;
}
/* ---- light: the same floor by day -------------------------------------- */
/* The light theme is white-led rather than bone-led, so it reads as the same
   object as the white edition of the client documents: paper, ink, green, and
   the three regional blades.

   The canvas is not #FFFFFF. A flat maximum white is what a browser does when
   nobody has decided anything, and against real conference photography it goes
   slightly clinical. oklch(99.2% 0.0022 95) is a near-white carrying about a
   quarter of a percent of warmth: too little to name as a colour, enough that
   the paper looks chosen. OKLCH is used because the decision here is
   "how light, how warm", and those are the two numbers the notation exposes.

   Three surfaces, in a deliberate order. The near-white canvas carries almost
   everything. A very pale neutral sits under the occasional band that needs
   its own rhythm, and it is neutral rather than warmer so it reads as a change
   of surface instead of a return to beige. The existing night stays exactly as
   it was, for the few bands that have to be decisive.

   Every value below is declared once, here, and only assigned in the two
   blocks that follow. The media query and the toggle have to agree, and the
   reliable way to make them agree is to give them nothing of their own to
   disagree about. */
:root{
  --lt-s1:oklch(99.2% .0022 95);      /* the canvas                          */
  --lt-s2:oklch(96.6% .0028 95);      /* alternate surface, for band rhythm  */
  --lt-s3:#17150F;                    /* night, unchanged                    */

  /* On a brighter ground the ink can go slightly deeper and cooler without
     hardening, and the two lower steps have to be re-cut outright: the old
     muted grey was tuned against bone and lands at 3.9:1 on white, which is
     below AA for the metadata it carries. */
  --lt-fg:oklch(18% .005 70);
  --lt-fg-dim:oklch(45% .008 70);
  --lt-fg-mute:oklch(53% .010 75);

  --lt-on-s3:oklch(97% .003 95);
  --lt-on-s3-dim:oklch(72% .006 80);

  /* Hairlines stay hairlines. What has to move is the second rule: it draws
     the boundary of buttons, the theme toggle, the menu button and form
     fields, and at the old weight those boundaries sit at 2.2:1 on white,
     under the 3:1 that a control's own outline needs. */
  --lt-rule:rgba(19,17,15,.15);
  --lt-rule-2:rgba(19,17,15,.50);
  --lt-wash:rgba(19,17,15,.055);

  /* The regional accents keep their hue and their chroma exactly. Amber and
     green are lowered in lightness alone, purely to clear 4.5:1 on both light
     surfaces; sky, vermilion and umber already cleared and are untouched,
     restated here in the same notation and resolving to the same sRGB values
     they had before. Meaning never moves: amber is South Africa, sky is North
     America, vermilion is Asia, green is the through-line. */
  /* the label printed on an accent swatch on the colophon: on these deeper
     accents it inverts to the canvas, where the dark theme keeps its own
     near-blacks by leaving this undefined */
  --lt-sw-ink:oklch(99.2% .0022 95);

  --lt-sa:oklch(54.4% .1231 69.8);
  --lt-na:oklch(52.2% .1029 241);
  --lt-as:oklch(54.4% .1779 35.4);
  --lt-eco:oklch(52.5% .1439 134.8);
  --lt-umber:oklch(46.8% .0979 53.5);
}

@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;
    --s1:var(--lt-s1); --s2:var(--lt-s2); --s3:var(--lt-s3);
    --fg:var(--lt-fg); --fg-dim:var(--lt-fg-dim); --fg-mute:var(--lt-fg-mute);
    --on-s3:var(--lt-on-s3); --on-s3-dim:var(--lt-on-s3-dim);
    --rule:var(--lt-rule); --rule-2:var(--lt-rule-2); --wash:var(--lt-wash);
    --sa:var(--lt-sa); --na:var(--lt-na); --as:var(--lt-as);
    --eco:var(--lt-eco); --umber:var(--lt-umber);
    --sw-ink:var(--lt-sw-ink);
  }
}
/* the toggle must win over the media query, in both directions */
:root[data-theme="light"]{
  color-scheme:light;
  --s1:var(--lt-s1); --s2:var(--lt-s2); --s3:var(--lt-s3);
  --fg:var(--lt-fg); --fg-dim:var(--lt-fg-dim); --fg-mute:var(--lt-fg-mute);
  --on-s3:var(--lt-on-s3); --on-s3-dim:var(--lt-on-s3-dim);
  --rule:var(--lt-rule); --rule-2:var(--lt-rule-2); --wash:var(--lt-wash);
  --sa:var(--lt-sa); --na:var(--lt-na); --as:var(--lt-as);
  --eco:var(--lt-eco); --umber:var(--lt-umber);
  --sw-ink:var(--lt-sw-ink);
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--s1);color:var(--fg);
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 400;
  font-size:17px;line-height:1.55;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color .5s var(--ease),color .5s var(--ease);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sa);outline-offset:3px}
::selection{background:var(--sa);color:var(--s1)}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ul,ol{list-style:none;padding:0}

/* ---------------------------------------------------------------- type ---- */
.mono{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;font-variant-numeric:tabular-nums}
.mono--sm{font-size:9.5px;letter-spacing:.17em}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.005em}

.t-hero{font-weight:800;font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(38px,4.5vw,68px);line-height:.94;letter-spacing:-.032em;
  text-wrap:balance}
.t-1{font-weight:720;font-variation-settings:"wdth" 112,"wght" 720;
  font-size:clamp(33px,5.1vw,80px);line-height:.93;letter-spacing:-.034em;text-wrap:balance}
.t-2{font-weight:660;font-variation-settings:"wdth" 106,"wght" 660;
  font-size:clamp(26px,3.1vw,47px);line-height:1.02;letter-spacing:-.024em;text-wrap:balance}
.t-3{font-weight:620;font-variation-settings:"wdth" 102,"wght" 620;
  font-size:clamp(20px,1.75vw,27px);line-height:1.16;letter-spacing:-.016em;text-wrap:balance}
.t-lede{font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(17px,1.34vw,21.5px);line-height:1.55;letter-spacing:-.008em;
  max-width:58ch;text-wrap:pretty}
.t-body{font-size:16px;line-height:1.64;max-width:64ch;color:var(--fg-dim);text-wrap:pretty}
.t-note{font-family:var(--mono);font-size:10.5px;line-height:1.72;letter-spacing:.06em;
  color:var(--fg-mute);text-wrap:pretty}
.num{font-variation-settings:"wdth" 74,"wght" 700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:.88}
.dim{color:var(--fg-dim)}
.mute{color:var(--fg-mute)}

/* ------------------------------------------------------------- structure -- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.page{margin-left:var(--rail)}
.band{position:relative;background:var(--s1)}
.band--alt{background:var(--s2)}
/* the inverted band re-points the tokens, so every component inside it
   adapts without a single component-level override */
.band--feature{background:var(--s3);color:var(--on-s3);
  --fg:var(--on-s3);--fg-dim:var(--on-s3-dim);--fg-mute:var(--on-s3-dim);
  --rule:color-mix(in srgb,var(--on-s3) 17%,transparent);
  --rule-2:color-mix(in srgb,var(--on-s3) 34%,transparent);
  --wash:color-mix(in srgb,var(--on-s3) 6%,transparent)}
.band--feature .act:hover{color:var(--s3)}
.band--feature .act--primary{background:var(--on-s3);color:var(--s3)}
.sec{padding-block:clamp(64px,7.6vw,132px)}
.sec--tight{padding-block:clamp(44px,5vw,84px)}
hr.rule{border:0;height:1px;background:var(--rule);margin:0}

/* section heading pattern: eyebrow, title, and a deck pushed to the right */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,3vw,64px);align-items:end;padding-bottom:clamp(22px,2.6vw,38px);
  border-bottom:1px solid var(--rule);margin-bottom:clamp(28px,3.6vw,58px)}
.head__eyebrow{display:none!important}
.head__deck{color:var(--fg-dim);font-size:15.5px;line-height:1.6;max-width:46ch;
  padding-bottom:5px;text-wrap:pretty}

/* --------------------------------------------------------------- the rail -- */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:70;display:flex;
  flex-direction:column;align-items:center;justify-content:space-between;
  padding:20px 0 22px;pointer-events:none;
  border-right:1px solid var(--rail-rule,var(--rule));
  transition:border-color .5s var(--ease),color .5s var(--ease)}
.rail__label{writing-mode:vertical-rl;font-family:var(--mono);font-size:9px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--rail-fg,var(--fg-mute))}
.rail__mark{width:30px;height:33px;will-change:transform}
.rail__stops{display:flex;flex-direction:column;gap:12px;align-items:center}
.rail__stop{width:1px;height:16px;background:var(--rail-fg,var(--fg-mute));opacity:.35;
  transition:opacity .45s var(--ease),height .45s var(--ease),background-color .45s var(--ease)}
.rail__stop[data-on]{opacity:1;height:26px}
.rail__stop[data-r="sa"][data-on]{background:var(--sa)}
.rail__stop[data-r="na"][data-on]{background:var(--na)}
.rail__stop[data-r="as"][data-on]{background:var(--as)}

/* ---------------------------------------------------------------- states -- */
/* status is a rule and a word — never a capsule */
.state{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);white-space:nowrap}
.state::before{content:"";width:18px;height:1px;background:currentColor;flex:none}
.state--open{color:var(--eco)}
.state--soon{color:var(--umber)}
.state--live{color:var(--as)}
.state--live::before{animation:wipe 2.2s var(--ease) infinite}
@keyframes wipe{0%,100%{transform:scaleX(.25);transform-origin:left}50%{transform:scaleX(1)}}

/* provisional facts carry a footnote mark, not a badge */
.ref{font-family:var(--mono);font-size:.62em;letter-spacing:.04em;vertical-align:super;
  color:var(--umber);margin-left:.18em}
.footnote{display:flex;gap:9px;align-items:baseline;color:var(--fg-mute);
  font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.05em}
.footnote b{color:var(--umber);font-weight:400;flex:none}

/* --------------------------------------------------------------- actions -- */
.act{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;padding:14px 22px;border:1px solid var(--rule-2);
  background:transparent;color:inherit;cursor:pointer;position:relative;overflow:hidden;
  transition:color .42s var(--ease),border-color .42s var(--ease)}
.act::after{content:"";position:absolute;inset:0;background:var(--fg);z-index:0;
  transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--ease-out)}
.act > *{position:relative;z-index:1}
.act:hover{color:var(--s1);border-color:var(--fg)}
.act:hover::after{transform:scaleY(1)}
.act--primary{border-color:var(--fg);background:var(--fg);color:var(--s1)}
.act--primary::after{background:var(--eco);transform:scaleY(0)}
.act--primary:hover{color:var(--s1);border-color:var(--eco)}
.band--feature .act:hover{color:var(--s3)}
.act__arrow{transition:transform .42s var(--ease-out)}
.act:hover .act__arrow{transform:translateX(4px)}

/* a plain editorial link: rule under, wipes on hover */
.lnk{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;padding-bottom:4px;position:relative;color:var(--lc,inherit)}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.42;transition:opacity .4s var(--ease)}
.lnk:hover::after{opacity:1}
.lnk--go::before{content:"→";margin-right:9px;display:inline-block;
  transition:transform .4s var(--ease-out)}
.lnk--go:hover::before{transform:translateX(4px)}

/* ------------------------------------------------------------- masthead --- */
.top{position:sticky;top:0;z-index:60;background:oklch(17% .006 70);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease),
  background-color .4s var(--ease)}
.top[data-stuck]{border-bottom-color:rgba(237,235,227,.14)}
.mast{display:flex;align-items:center;gap:clamp(16px,2.4vw,44px);padding-block:15px;
  color:oklch(97% .003 95);transition:padding .46s var(--ease-out),gap .46s var(--ease-out)}
.mast__logo{width:126px;flex:none;transition:width .46s var(--ease-out)}
/* the wordmark is charcoal; on dark grounds its neutral letterforms take the
   bone value so the blades keep their exact colour. Two files, never a filter. */
.logo{display:block}
.logo img{width:100%;height:auto}
.mast__mark{display:none!important}
.logo .on-light{display:none}
.mast .logo .on-dark{display:block!important}.mast .logo .on-light{display:none!important}
:root[data-theme="light"] .logo .on-light{display:block}
:root[data-theme="light"] .logo .on-dark{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .logo .on-light{display:block}
  :root:not([data-theme]) .logo .on-dark{display:none}
}
.nav{display:flex;gap:clamp(14px,1.8vw,32px);align-items:center;margin-inline:auto;
  max-width:620px;overflow:hidden;white-space:nowrap;transition:opacity .28s var(--ease),
  transform .46s var(--ease-out),max-width .46s var(--ease-out),margin .46s var(--ease-out)}
.nav__i{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 0;position:relative;background:none;border:0;cursor:pointer;
  color:oklch(97% .003 95)}
.mast .nav__i:visited,.mast .nav__i:hover,.mast .nav__i:focus-visible,
.mast .nav__i[aria-current="page"]{color:oklch(97% .003 95)}
.nav__i::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease)}
.nav__i:hover::after,.nav__i[aria-expanded="true"]::after{transform:scaleX(1)}
.mast__end{display:flex;align-items:center;gap:14px;flex:none}
.theme{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--rule-2);
  background:none;cursor:pointer;transition:border-color .3s var(--ease),background-color .3s}
.theme:hover{background:var(--wash)}
.theme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.theme__sun{display:none}
:root[data-theme="light"] .theme__sun,
:root:not([data-theme="dark"]) .theme__sun{display:block}
:root[data-theme="light"] .theme__moon,
:root:not([data-theme="dark"]) .theme__moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme__sun{display:none}
  :root:not([data-theme]) .theme__moon{display:block}
}
.burger{display:none;width:34px;height:34px;border:1px solid var(--rule-2);background:none;
  cursor:pointer;padding:0;place-items:center}
.burger i{display:block;width:15px;height:1px;background:currentColor;position:relative;
  transition:transform .35s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:15px;height:1px;
  background:currentColor;transition:transform .35s var(--ease)}
.burger i::before{top:-5px}.burger i::after{top:5px}

/* Head-up masthead: compress on downward travel, restore on intent or upward travel. */
.top[data-condensed] .mast{padding-block:7px;gap:12px}
.top[data-condensed] .mast__logo{width:30px}
.top[data-condensed] .mast__logo .on-dark,
.top[data-condensed] .mast__logo .on-light{display:none!important}
.top[data-condensed] .mast__logo .mast__mark{display:block!important;width:30px;height:33px;object-fit:contain}
.top[data-condensed] .lockup__rule,.top[data-condensed] .lockup__next{display:none}
.top[data-condensed] .nav{max-width:0;margin-inline:0;opacity:0;transform:translateY(-8px);pointer-events:none}
.top[data-condensed] .mast__end{margin-left:auto}
.top[data-condensed] .mast__end .act{display:none}
.top[data-condensed] .burger{display:grid}

/* mega-menu: the primary nav resolves to the rotation */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--s2);
  border-bottom:1px solid var(--rule);overflow:hidden;
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.mega[data-open]{grid-template-rows:1fr}
.mega__clip{min-height:0;overflow:hidden}
.mega__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,2.6vw,46px);padding-block:clamp(24px,3vw,44px)}
.mega__col .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--mc,var(--fg-mute));padding-bottom:11px;margin-bottom:13px;
  border-bottom:1px solid var(--rule)}
.mega__col li{margin-bottom:12px}
.mega__col li:last-child{margin-bottom:0}
.mega__col a{font-size:14.5px;line-height:1.35;transition:color .3s var(--ease)}
.mega__col a:hover{color:var(--mc,var(--fg))}

/* ------------------------------------------------------------------ hero -- */
/* The mark is the frame. Photography is masked into the blade silhouette rather
   than bled to the edges — a rectangle any conference can own, this shape only
   TPAC can. The subject must sit on the horizontal band at 52% (see blade.svg
   and the shot guide); anything above 20% or below 80% is eaten by a concave. */
.hero{position:relative;background:var(--s1);overflow:clip;
  padding-block:clamp(22px,2.6vw,44px) 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,4vw,72px);align-items:center;
  padding-bottom:clamp(34px,4.4vw,74px)}
.hero__eyebrow{display:flex;flex-wrap:wrap;gap:7px 22px;color:var(--fg-mute);
  padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--rule);
  max-width:min(100%,720px)}
.hero h1{max-width:17ch}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.012em;font-size:.86em;padding-inline:.05em}
.hero__deck{margin-top:24px;max-width:48ch;color:var(--fg-dim)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* the art: one blade carrying the photograph, a second crossing it */
.hero__art{position:relative;aspect-ratio:1/1;width:100%;max-width:600px;
  margin-inline:auto 0}
.blade{-webkit-mask:url("../img/blade.svg") center/contain no-repeat;
  mask:url("../img/blade.svg") center/contain no-repeat}
.blade img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.blade--main{position:absolute;inset:0}
/* the smaller blade sits on a ground-coloured copy of itself, so the two read
   as crossing rather than merging — the gap is the logo's own overlap logic */
/* the shape turns; the photograph inside it does not */
.blade-pair{position:absolute;right:2%;bottom:-4%;width:31%;aspect-ratio:1/1;rotate:180deg}
.blade--sub img{rotate:180deg}
.blade--gap{position:absolute;inset:0;background:var(--s1);transform:scale(1.16)}
.blade--sub{position:absolute;inset:0}
.hero__cap{position:absolute;right:0;bottom:-2px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);text-align:right;
  max-width:22ch;line-height:1.7}

/* ------------------------------------------------------- the rotation bar -- */
/* retokenised: the bar now sits on the page ground, not over a photograph */
.rot{position:relative;z-index:2;border-block:1px solid var(--rule);background:var(--s2)}
.rot__grid{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr))}
.rot__key{display:flex;align-items:center;gap:12px;padding:18px 26px 18px 0;
  border-right:1px solid var(--rule);color:var(--fg-mute)}
.rot__key img{width:21px}
.stop{display:block;padding:17px 22px;border-right:1px solid var(--rule);
  position:relative;transition:background-color .45s var(--ease)}
.stop:last-child{border-right:0}
.stop::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;
  background:var(--c);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out)}
.stop:hover::before,.stop[data-next]::before{transform:scaleX(1)}
.stop:hover{background:var(--wash)}
.stop__n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--c);
  display:block;margin-bottom:7px}
.stop__city{font-variation-settings:"wdth" 104,"wght" 640;font-size:clamp(16px,1.35vw,21px);
  letter-spacing:-.016em;line-height:1.08;display:block;margin-bottom:8px}
.stop__meta{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;color:var(--fg-mute)}

/* ---------------------------------------------------------- proposition --- */
.prop{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.32fr);
  gap:clamp(30px,5vw,100px);align-items:start}
.prop__lead{font-variation-settings:"wdth" 100,"wght" 440;
  font-size:clamp(21px,2.15vw,33px);line-height:1.32;letter-spacing:-.021em;max-width:28ch}
.prop__lead em{font-family:var(--serif);font-style:italic;font-variation-settings:normal;
  font-size:1.07em}
.prop__voice{margin-top:clamp(30px,3.4vw,54px);padding-top:23px;border-top:1px solid var(--rule);
  max-width:36ch}
.prop__voice p{font-variation-settings:"wdth" 100,"wght" 450;
  font-size:clamp(16px,1.28vw,19px);line-height:1.42;letter-spacing:-.013em;margin-top:13px}
.prop__voice cite{display:block;margin-top:14px;font-style:normal}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:28px 36px;margin-top:clamp(34px,3.8vw,52px);padding-top:26px;border-top:1px solid var(--rule)}
.fact b{display:block;font-size:clamp(40px,4.3vw,64px)}
.fact span{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.65;color:var(--fg-mute)}

/* --------------------------------------------------------------- regions -- */
.region{position:relative;overflow:hidden;padding-block:clamp(58px,7.4vw,124px)}
.region__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px 30px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.region__title{display:flex;flex-direction:column;gap:15px;min-width:0}
.region__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--c);
  display:flex;align-items:center;gap:11px}
.region__n::before{content:"";width:26px;height:1px;background:currentColor}
.region__name{font-variation-settings:"wdth" 122,"wght" 760;
  font-size:clamp(38px,6.4vw,110px);line-height:.84;letter-spacing:-.044em;text-transform:uppercase}
.region__when{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.9;color:var(--fg-dim)}
.region__when b{font-weight:400;color:var(--fg)}
.region__when i{font-style:normal;color:var(--c)}
.region__body{display:grid;gap:clamp(22px,3vw,48px);margin-top:clamp(26px,3.4vw,52px);
  align-items:start;grid-template-columns:minmax(0,1.6fr) minmax(0,.92fr)}
.region--flip .region__body{grid-template-columns:minmax(0,.92fr) minmax(0,1.6fr)}
.region--flip .region__lead{order:2}
.region__lead{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,30px)}
.region__text{font-size:clamp(16px,1.36vw,19px);line-height:1.55;letter-spacing:-.007em;
  color:var(--fg-dim);max-width:54ch}
.region__aside{display:flex;flex-direction:column;gap:24px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.55;
  border-top:1px solid var(--rule);padding-top:17px}
.dl dt{color:var(--fg-mute)}
.links{display:flex;flex-wrap:wrap;gap:12px 20px}

/* photography */
.fig{position:relative;margin:0;overflow:clip;contain:paint}
.fig img{width:100%;height:auto;transform:scale(1.001)}
.fig figcaption{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-mute);line-height:1.6}
.fig--wash::after{content:"";position:absolute;inset:0;background:var(--c);
  mix-blend-mode:color;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.fig--wash:hover::after,.fig--wash.is-on::after{opacity:.32}

/* divider carrying the mark at the rotation angle */
.turn{display:flex;align-items:center;gap:18px;padding-top:clamp(30px,3.6vw,54px)}
.turn__l{height:1px;flex:1;background:var(--rule)}
.turn img{width:22px;flex:none;opacity:.8}

/* ------------------------------------------------------------ three days -- */
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:0}
.day{padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,30px) clamp(30px,3.4vw,48px);
  border-left:1px solid var(--rule);position:relative}
.day:first-child{border-left:0;padding-left:0}
.day__n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--fg-mute);
  display:block;margin-bottom:18px}
.day__t{font-variation-settings:"wdth" 104,"wght" 640;font-size:clamp(19px,1.7vw,26px);
  letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
.day ul li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding-block:9px;
  border-top:1px solid var(--rule);font-size:14.5px;line-height:1.4}
.day ul li time{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--fg-mute);
  padding-top:3px;white-space:nowrap}

/* ---------------------------------------------------------------- index --- */
/* typographic lists that reveal on hover — used for tracks and the floor */
.index{border-top:1px solid var(--rule)}
.idx{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 30px;align-items:center;
  padding-block:clamp(18px,2.2vw,30px);border-bottom:1px solid var(--rule);position:relative;
  transition:padding-left .55s var(--ease-out)}
.idx::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--c,var(--eco));
  transform:scaleY(0);transform-origin:center;transition:transform .5s var(--ease-out)}
.idx:hover{padding-left:18px}
.idx:hover::before{transform:scaleY(1)}
.idx__k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--fg-mute);width:3ch}
.idx__n{font-variation-settings:"wdth" 108,"wght" 650;font-size:clamp(21px,2.7vw,40px);
  letter-spacing:-.026em;line-height:1.02;display:block}
.idx__d{display:block;color:var(--fg-dim);font-size:14.5px;line-height:1.45;max-width:52ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease-out),opacity .4s var(--ease),margin-top .55s var(--ease-out)}
.idx:hover .idx__d,.idx:focus-within .idx__d,.idx.is-on .idx__d{max-height:90px;opacity:1;margin-top:9px}
.idx__go{font-family:var(--mono);font-size:19px;line-height:1;color:var(--fg-mute);
  transition:transform .5s var(--ease-out),color .4s}
.idx:hover .idx__go{transform:translateX(7px);color:var(--c,var(--fg))}

/* ------------------------------------------------------------------ pull -- */
.pull{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  border-block:1px solid var(--rule)}
.pull__fig{position:relative;min-height:min(74vh,660px);overflow:clip;contain:paint;margin:0}
.pull__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 42%}
.pull__fig figcaption{position:absolute;inset:auto 0 0 0;padding:15px clamp(16px,2vw,28px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#DCDAD0;background:linear-gradient(180deg,rgba(19,18,16,0),rgba(19,18,16,.88))}
.pull__body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(38px,5vw,90px) clamp(24px,4.4vw,88px);border-left:1px solid var(--rule)}
blockquote{font-family:var(--serif);font-style:italic;font-weight:400;
  hanging-punctuation:first;
  font-size:clamp(26px,3.15vw,52px);line-height:1.07;letter-spacing:-.018em}
.pull cite{display:block;margin-top:28px;padding-top:17px;border-top:1px solid var(--rule);
  font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-mute)}

/* ------------------------------------------------------------- atmosphere -- */
.atmos{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.3vw,36px);
  align-items:end}
.atmos__lead{grid-column:1/span 5;margin-bottom:clamp(20px,2.6vw,44px)}
.atmos__a{grid-column:1/span 3}
.atmos__b{grid-column:5/span 5;padding-bottom:clamp(28px,5.4vw,86px)}
.atmos__c{grid-column:10/span 3;padding-bottom:clamp(48px,8.4vw,142px)}

/* ------------------------------------------------------------ film strip -- */
.strip{display:flex;gap:clamp(12px,1.5vw,22px);overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:18px;cursor:grab;scrollbar-width:thin;
  scrollbar-color:var(--rule-2) transparent;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 88%,transparent 100%)}
.strip::-webkit-scrollbar{height:2px}
.strip::-webkit-scrollbar-thumb{background:var(--rule-2)}
.strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.strip figure{flex:0 0 clamp(240px,25vw,400px);scroll-snap-align:start;margin:0}
.strip img{width:100%;aspect-ratio:3/2;object-fit:cover;pointer-events:none}
.strip figcaption{margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute)}

/* -------------------------------------------------------------- ecosystem -- */
.eco{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);
  gap:clamp(28px,4.4vw,84px);align-items:start}
.golds{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
  gap:0 clamp(24px,3vw,56px)}
.gold{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:baseline;
  padding-block:15px;border-top:1px solid var(--rule)}
.gold__n{font-family:var(--mono);font-size:10px;color:var(--eco);letter-spacing:.1em}
.gold b{font-variation-settings:"wdth" 100,"wght" 600;font-size:16px;letter-spacing:-.014em;
  font-weight:400}
.gold span{display:block;color:var(--fg-mute);font-size:12.5px;line-height:1.45;
  font-variation-settings:"wdth" 92,"wght" 400;margin-top:3px}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0 clamp(20px,2.4vw,44px);margin-top:28px;border-top:1px solid var(--rule)}
.products div{display:flex;justify-content:space-between;gap:12px;padding-block:10px;
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase}
.products span{color:var(--fg-mute)}

/* -------------------------------------------------------- partner marks -- */
/* Supplied artwork, each mark on its own white tile. Every one of these logos
   was drawn for a white ground, so the tile stays white in both themes rather
   than inheriting the page: that is what keeps a blue mark blue instead of
   fighting a dark band. Every organisation gets the same tile and the same
   optical height, and no proportion is altered to tidy a row.

   Text inside a tile is therefore fixed rather than tokenised. It is sitting
   on white in either theme, so it cannot follow --fg. */
.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:1px;background:var(--rule-2);border:1px solid var(--rule-2)}
.marks--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.marks--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.marks--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mark{background:#FFF;display:flex;flex-direction:column;
  padding:20px 17px 17px;min-height:134px}
.mark__art{height:44px;display:flex;align-items:center;margin-bottom:15px}
/* Height-constrained, never stretched. A portrait lockup therefore sits
   smaller than a wide one, which is correct: the alternative is distorting
   somebody's mark to make a grid look even. */
.mark__art img{max-width:100%;max-height:44px;width:auto;height:auto;
  object-fit:contain}
/* An organisation whose artwork TPAC has not supplied is set in type rather
   than redrawn or left blank, so the grid stays honest about what is still
   outstanding without breaking its own rhythm. */
.mark__art--set{font-variation-settings:"wdth" 94,"wght" 600;font-size:13.5px;
  line-height:1.15;letter-spacing:-.014em;color:#5A5750;max-width:15ch}
.mark b{font-variation-settings:"wdth" 100,"wght" 600;font-weight:400;
  font-size:14.5px;letter-spacing:-.014em;color:#17150F;margin-top:auto}
.mark span{display:block;font-size:12px;line-height:1.42;color:#6B675C;
  margin-top:4px}
.marks__note{margin-top:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-mute);line-height:1.6}
@media (max-width:860px){
  .marks,.marks--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- ledger -- */
.ledger-wrap{position:relative}
.ledger-bg{position:absolute;inset:0 0 auto auto;width:min(44%,640px);opacity:.16;
  pointer-events:none;-webkit-mask-image:linear-gradient(to left,#000 6%,transparent 92%);
  mask-image:linear-gradient(to left,#000 6%,transparent 92%)}
.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;
  position:relative;z-index:1;font-variant-numeric:tabular-nums}
.ledger th{text-align:left;font-weight:400;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-mute);padding:0 16px 11px 0;
  border-bottom:1px solid var(--rule-2);white-space:nowrap}
.ledger td{padding:10px 16px 10px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ledger tbody tr{transition:background-color .35s var(--ease)}
.ledger tbody tr:hover{background:var(--wash)}
.ledger tbody tr:hover .yr,.ledger tbody tr.is-on .yr{color:var(--c)}
.ledger .yr{color:var(--fg);width:6ch;white-space:nowrap;transition:color .35s var(--ease)}
.ledger .rg{white-space:nowrap;padding-left:0}
.ledger .rg::before{content:"";display:inline-block;width:13px;height:1px;
  background:var(--c);margin-right:10px;vertical-align:middle}
.ledger .vn{color:var(--fg-mute)}
.ledger tr[data-void] td{color:var(--fg-mute)}
.ledger tr[data-void] .rg::before{background:var(--fg-mute)}

/* ------------------------------------------------------------------ plan -- */
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));
  gap:clamp(24px,3vw,54px)}
.lbl{font-weight:400;margin:0}
.plan .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg-mute);padding-bottom:12px;margin-bottom:15px;border-bottom:1px solid var(--rule)}
.plan li{margin-bottom:11px;font-size:14.5px;line-height:1.4}
.plan a{transition:color .3s var(--ease);position:relative}
.plan a:hover{color:var(--umber)}

/* ----------------------------------------------------------------- close -- */
.close{position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(74px,9.6vw,168px)}
.close__mark{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(74vw,780px);
  opacity:.05;animation:spin 130s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.close h2{margin-inline:auto;max-width:15ch;position:relative}
.close h2 em{font-family:var(--serif);font-style:italic;font-variation-settings:normal;
  font-size:.9em}
.form{display:inline-flex;flex-wrap:wrap;gap:0;justify-content:center;margin-top:42px;
  position:relative;border:1px solid var(--rule-2);transition:border-color .35s var(--ease)}
.form:focus-within{border-color:var(--fg)}
.form input{background:transparent;border:0;color:inherit;font-family:var(--mono);font-size:11px;
  letter-spacing:.11em;padding:15px 22px;min-width:min(320px,64vw)}
.form input:focus{outline:none}
.form input::placeholder{color:var(--fg-mute);text-transform:uppercase}
.form .act{border:0;border-left:1px solid var(--rule-2)}

/* ---------------------------------------------------------------- footer -- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(40px,4.4vw,64px) 32px}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));
  gap:32px clamp(24px,3vw,56px)}
.foot__logo{width:142px;margin-bottom:18px}
.foot__socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.foot__socials a{display:inline-flex;align-items:center;gap:9px;padding:9px 12px 9px 10px;
  border:1px solid var(--rule-2);font-family:var(--mono);font-size:9px;line-height:1;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)}
.foot__socials svg{width:17px;height:17px;fill:currentColor;flex:none}
.foot .foot__socials a:hover{background:var(--fg);border-color:var(--fg);color:var(--s1)}
.foot .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:14px}
.foot li{margin-bottom:8px;font-size:13.5px}
.foot a{transition:color .3s var(--ease)}
.foot a:hover{color:var(--fg)}
.foot__bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px 28px;
  align-items:start;margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);
  color:var(--fg-mute)}
.foot__bar>span:nth-child(2){text-align:center}
.foot__bar>span:last-child{text-align:right}
.foot__credit{line-height:1.7}
.foot__credit a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--rule-2);
  text-underline-offset:4px}

/* --------------------------------------------------------------- reveals -- */
[data-rise]{opacity:0;transform:translateY(22px)}
[data-rise].is-in{opacity:1;transform:none;
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-wipe]{clip-path:inset(0 0 100% 0)}
[data-wipe].is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease-out)}
[data-veil]{overflow:clip;contain:paint}
[data-veil] img{transform:scale(1.1);transition:transform 1.5s var(--ease-out)}
[data-veil].is-in img{transform:none}

/* ----------------------------------------------------------- responsive --- */
@media (max-width:1180px){
  .prop,.eco,.pull,.hero__grid{grid-template-columns:1fr}
  .hero__art{margin-right:0;max-width:560px}
  .region__body,.region--flip .region__body{grid-template-columns:1fr}
  .region--flip .region__lead{order:0}
  .pull__fig{min-height:min(50vh,440px)}
  .pull__body{border-left:0;border-top:1px solid var(--rule)}
  .head{grid-template-columns:1fr;align-items:start}
  .head__deck{padding-bottom:0}
  .atmos__a{grid-column:1/span 6}
  .atmos__b{grid-column:7/span 6;padding-bottom:0}
  .atmos__c{grid-column:1/span 5;padding-bottom:0;margin-top:24px}
  .atmos__lead{grid-column:1/-1}
  .rot__grid{grid-template-columns:1fr 1fr}
  /* These three borders kept the bone value the bar carried when it sat over a
     photograph. Everything else in the component was retokenised; these were
     missed, so on any light ground the strip loses its dividers exactly at the
     widths where it stacks and needs them most. */
  .rot__key{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--rule);
    padding-right:0}
  .stop:nth-of-type(3){border-right:0}
  .stop:last-child{grid-column:1/-1;border-top:1px solid var(--rule)}
  .day{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .day:first-child{border-top:0}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--rail:0px}
  .rail{display:none}
  .top{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{display:none}
  .burger{display:grid}
  .mast{position:relative;z-index:81}
  .mega{position:fixed;inset:0;top:0;height:100dvh;background:var(--s1);grid-template-rows:1fr;
    transform:translateY(-100%);transition:transform .5s var(--ease-out);z-index:80;
    overflow-y:auto;border:0}
  .mega[data-open]{transform:none}
  .mega__grid{grid-template-columns:1fr;padding-block:88px 40px;gap:26px}
  .mega__col a{font-size:19px}
  .burger[aria-expanded="true"] i{transform:rotate(45deg)}
  .burger[aria-expanded="true"] i::before{transform:translateY(5px) rotate(90deg)}
  .burger[aria-expanded="true"] i::after{transform:translateY(-5px);opacity:0}
  .rot__grid{grid-template-columns:1fr}
  .stop,.stop:nth-of-type(3){border-right:0;border-top:1px solid var(--rule)}
  .stop:last-child{grid-column:auto}
  .atmos__a,.atmos__b,.atmos__c{grid-column:1/-1;padding-bottom:0}
  .region__when{text-align:left;width:100%}
  .foot__grid{grid-template-columns:1fr}
  .foot__bar{grid-template-columns:1fr}
  .foot__bar>span:nth-child(2),.foot__bar>span:last-child{text-align:left}
  .facts{grid-template-columns:1fr 1fr}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-rise],[data-wipe]{opacity:1;transform:none;clip-path:none}
  [data-veil] img{transform:none}
}

/* ------------------------------------------------------------- colophon --- */
.region--page{padding-top:clamp(30px,3.6vw,58px)}
.region__gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(16px,2.2vw,34px);align-items:start}
/* a gallery row reads as a row: one ratio, decisive crops */
.region__gallery .fig img{aspect-ratio:4/3;object-fit:cover;width:100%}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
  gap:1px}
.sw{background:var(--bg);color:var(--fgc);padding:21px 19px 19px;min-height:158px;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.sw b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;font-weight:500}
.sw span{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;line-height:1.72;opacity:.82}
.specimen{border-bottom:1px solid var(--rule)}
.spec{display:grid;grid-template-columns:minmax(0,152px) minmax(0,1fr);gap:14px 26px;
  align-items:baseline;padding-block:24px;border-top:1px solid var(--rule)}
.spec__meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-mute);line-height:1.85}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
  gap:clamp(24px,3vw,64px)}
.rules .lbl{font-size:10px;letter-spacing:.17em;text-transform:uppercase;padding-bottom:13px;
  margin-bottom:4px;border-bottom:1px solid var(--rule-2)}
.rules li{padding-block:12px;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.5;
  color:var(--fg-dim)}

/* the masthead action is a wide-screen affordance only */
@media (max-width:1180px){.mast__end .act{display:none}}
@media (max-width:860px){.spec{grid-template-columns:1fr}}

/* =============================================================================
   Interior pages — attend, exhibit, programme, about
   Built from the same parts as the homepage; only four new patterns were
   needed, and each one earns its place.
   ========================================================================== */

/* a page opens the way a region does: strap, name, and the facts at the right */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px 30px;padding-bottom:24px;border-bottom:1px solid var(--rule);
  margin-bottom:clamp(30px,3.6vw,56px)}

/* the argument for a page, set large, with the deck alongside */
.argue{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(28px,4.6vw,92px);align-items:start}
.argue__lead{font-variation-settings:"wdth" 100,"wght" 440;
  font-size:clamp(21px,2.1vw,32px);line-height:1.33;letter-spacing:-.021em;max-width:29ch}
.argue__lead em{font-family:var(--serif);font-style:italic;
  font-variation-settings:normal;font-size:1.07em}

/* a standalone attributed voice — the smaller sibling of the pull spread */
.voice{padding-top:22px;border-top:1px solid var(--rule);max-width:40ch}
.voice p{font-variation-settings:"wdth" 100,"wght" 450;
  font-size:clamp(16px,1.3vw,19.5px);line-height:1.42;letter-spacing:-.013em;margin-top:13px}
.voice cite{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-mute)}

/* who each track is for, side by side — a table, not three cards */
.matrix{width:100%;border-collapse:collapse;font-size:14.5px}
.matrix th{text-align:left;font-weight:400;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--fg-mute);
  padding:0 18px 12px 0;border-bottom:1px solid var(--rule-2);vertical-align:bottom}
.matrix th:first-child{width:20%}
.matrix th b{display:block;font-weight:400;font-family:var(--display);
  font-variation-settings:"wdth" 104,"wght" 620;font-size:clamp(15px,1.25vw,19px);
  letter-spacing:-.016em;text-transform:none;color:var(--fg);margin-bottom:5px}
.matrix td{padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;line-height:1.45;color:var(--fg-dim)}
.matrix td:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-mute);padding-top:17px}
.matrix tr:hover td{color:var(--fg)}

/* an ordered process — numbers that mean sequence, because this one is */
.steps{counter-reset:s;border-top:1px solid var(--rule)}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;gap:0 26px;padding-block:clamp(16px,1.9vw,26px);border-bottom:1px solid var(--rule)}
/* the numeral, the title and the detail are three siblings in a two-column
   grid — place them, or the auto column sizes to the paragraph's max-content */
.steps li::before{content:counter(s,decimal-leading-zero);grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--fg-mute);padding-top:4px}
.steps b{grid-column:2;grid-row:1;font-variation-settings:"wdth" 104,"wght" 620;
  font-size:clamp(17px,1.5vw,23px);letter-spacing:-.018em;line-height:1.14;font-weight:400}
.steps span{grid-column:2;grid-row:2;margin-top:7px;color:var(--fg-dim);font-size:14.5px;
  line-height:1.5;max-width:58ch}

/* a bordered practical note — used where an answer is "ask us" */
.callout{border:1px solid var(--rule-2);padding:clamp(22px,2.6vw,36px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 34px;align-items:center}
.callout h3{font-variation-settings:"wdth" 104,"wght" 620;font-size:clamp(18px,1.7vw,26px);
  letter-spacing:-.02em;line-height:1.14;margin-bottom:10px}

@media (max-width:1180px){
  .argue{grid-template-columns:1fr}
  .callout{grid-template-columns:1fr}
}
@media (max-width:860px){
  .matrix,.matrix tbody,.matrix tr,.matrix td,.matrix th{display:block;width:auto}
  .matrix thead{display:none}
  .matrix tr{border-bottom:1px solid var(--rule-2);padding-block:6px}
  .matrix td{border:0;padding:4px 0}
  .matrix td:first-child{padding-top:14px;color:var(--fg)}
  .pagehead{display:block}
  .pagehead .region__when{margin-top:16px}
}

/* =============================================================================
   Recaps — a concluded edition is shown, not described
   ========================================================================== */
/* six columns, and every row tiles exactly — a gallery with a ragged last row
   reads as a mistake rather than as composition */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.5vw,22px)}
.gallery .fig{grid-column:span 2}
.gallery .fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%}
/* six frames: two halves, a run of three, one full-width closer */
.gallery--six .fig:nth-child(-n+2){grid-column:span 3}
.gallery--six .fig:nth-child(-n+2) img{aspect-ratio:16/9}
.gallery--six .fig:nth-child(6){grid-column:span 6}
.gallery--six .fig:nth-child(6) img{aspect-ratio:16/9}
/* four frames: two halves, twice */
.gallery--four .fig{grid-column:span 3}
.gallery--four .fig img{aspect-ratio:16/9}
@media (max-width:980px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .fig,
  .gallery--six .fig:nth-child(-n+2),
  .gallery--four .fig{grid-column:span 1}
  .gallery--six .fig:nth-child(6){grid-column:span 2}
}
@media (max-width:620px){
  .gallery{grid-template-columns:1fr}
  .gallery .fig,
  .gallery--six .fig:nth-child(-n+2),
  .gallery--six .fig:nth-child(6),
  .gallery--four .fig{grid-column:1/-1}
}

/* --------------------------------------------------------- the lockup ---- */
/* every reference site of any confidence puts the next date beside the mark
   rather than in a utility strip; when nothing is announced it says so */
.lockup{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);flex:none}
.lockup__rule{width:1px;align-self:stretch;background:var(--rule-2);margin-block:3px}
.lockup__next{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg-mute);line-height:1.55;white-space:nowrap}
.lockup__next b{display:block;font-weight:400;font-size:10px;letter-spacing:.15em;color:var(--fg)}
.lockup__next i{font-style:normal;color:var(--as)}
@media (max-width:1180px){.lockup__rule,.lockup__next{display:none}}

/* =============================================================================
   Final pass — accessibility, wayfinding, print
   ========================================================================== */

/* keyboard users get out of the masthead in one press */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--fg);color:var(--s1);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 20px}
.skip:focus{left:0}

/* you should never have to guess which page you are on */
.nav__i[aria-current="page"]::after{transform:scaleX(1);background:var(--sa)}
.mega__col a[aria-current="page"]{color:var(--mc,var(--fg))}

/* four facts should read as one row or two pairs — never three and an orphan.
   In the proposition the column is too narrow for four, so it pairs up. */
.facts{grid-template-columns:repeat(4,minmax(0,1fr))}
.prop .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facts,.prop .facts{grid-template-columns:1fr}}

/* the aside runs ~160px longer than the lead in every region, which reads as a
   hole rather than as composition. Let the lead photograph absorb the
   difference so the two columns finish together. */
@media (min-width:1181px){
  .region__body{align-items:stretch}
  .region__lead{height:100%}
  .region__lead > .fig{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .region__lead > .fig img{flex:1 1 auto;width:100%;height:100%;object-fit:cover;
    min-height:clamp(300px,26vw,430px)}
}

@media print{
  .rail,.top,.mega,.hero__art,.strip,.close__mark,.act,.skip{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .band,.band--alt,.band--feature{background:#fff!important;color:#000!important}
  .sec{padding-block:18pt}
  a[href^="http"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:8pt}
  .fig,figure{break-inside:avoid}
  .ledger{font-size:8pt}
}

/* ---------------------------------------------- hero, full-bleed variant --
   The alternate opening: one photograph carrying the whole band, type on a
   scrim rather than beside a masked plate. The rotation bar underneath is
   unchanged — it stays on the page ground, where it reads in both themes. */
.hero--full{background:#121110;color:var(--on-photo);overflow:hidden;padding-block:0;
  min-height:min(88vh,900px);display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate}
.hero--full .hero__img{position:absolute;inset:0;z-index:0;overflow:clip;contain:paint}
.hero--full .hero__img img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero--full .hero__scrim{position:absolute;inset:0;z-index:1;background:
  radial-gradient(128% 96% at 5% 82%,rgba(var(--scrim),.95) 0%,rgba(var(--scrim),.74) 34%,
    rgba(var(--scrim),.30) 60%,rgba(var(--scrim),0) 78%),
  linear-gradient(180deg,rgba(var(--scrim),.72) 0%,rgba(var(--scrim),.10) 24%,
    rgba(var(--scrim),.52) 58%,rgba(var(--scrim),.95) 100%),
  linear-gradient(96deg,rgba(var(--scrim),.58) 0%,rgba(var(--scrim),.20) 56%,
    rgba(var(--scrim),0) 86%)}
.hero--full .hero__body{position:relative;z-index:2;
  padding-block:clamp(52px,7vw,104px) clamp(26px,3vw,44px)}
.hero--full .hero__eyebrow{color:var(--on-photo-dim);
  border-bottom-color:rgba(244,242,234,.22);max-width:min(100%,780px)}
.hero--full h1{max-width:15.5ch}
.hero--full .hero__deck{margin-top:30px;max-width:54ch;color:var(--on-photo-dim)}
.hero--full .hero__cred{position:absolute;right:var(--pad);bottom:clamp(12px,1.6vw,20px);
  z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-photo-dim);opacity:.8}
.hero--full .act{border-color:rgba(244,242,234,.42);color:var(--on-photo)}
.hero--full .act:hover{color:#121110;border-color:var(--on-photo)}
.hero--full .act::after{background:var(--on-photo)}
.hero--full .act--primary{background:var(--on-photo);border-color:var(--on-photo);color:#121110}
.hero--full .act--primary::after{background:var(--eco)}
.hero--full .act--primary:hover{border-color:var(--eco)}
@media (max-width:860px){
  .hero--full{min-height:auto}
  .hero--full .hero__body{padding-block:clamp(120px,34vw,240px) clamp(22px,4vw,34px)}
}

/* =============================================================================
   Conference record — one edition, rendered
   The reusable detail template. Three horizontal registers: who and when,
   where and what happens, then what is left behind. Nothing here is a new
   pattern for its own sake; the map, the carousel and the exhibitor list are
   the three things a conference page has that no other page needs.
   ========================================================================== */

.conf--head{padding-block:clamp(26px,3vw,44px) clamp(24px,2.8vw,40px)}
/* two named columns rather than a flex row: the name is set large enough that
   space-between would wrap the facts onto their own line and lose the pairing */
.conf__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;
  align-items:end;padding-bottom:22px;border-bottom:1px solid var(--rule);
  margin-bottom:24px}
.conf__head .region__name{font-size:clamp(34px,4.4vw,72px)}
.conf__facts{text-align:right}
.conf__facts .state{justify-content:flex-end}
.conf__lead img{width:100%;height:auto;aspect-ratio:24/8;object-fit:cover;
  object-position:50% 46%}
.conf__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.conf__note{color:var(--fg-mute);margin-left:auto}

/* the overview: what the edition is, beside the facts a reader scans for */
.conf__intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(24px,2.8vw,40px);
  padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--rule)}
@media (max-width:860px){.conf__intro{grid-template-columns:1fr}}

.conf__reg{padding-block:clamp(28px,3.2vw,48px)}
.conf__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.conf__triple{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(24px,3vw,46px);align-items:start}

/* The media register: the gallery leads, the film is related to it. Equal
   columns made the two compete and left neither enough room to be looked at. */
.conf__media{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,58px);align-items:start;margin-top:clamp(22px,2.6vw,38px)}
/* The record: a wide list of names beside quieter editorial evidence. */
/* Marks beside the record. Stacked they make a tall narrow band; side by side
   the register is wide and short, which is the shape a page-width frame in a
   printed document can actually carry at a readable scale. */
.conf__floor{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,3.6vw,64px);align-items:start;margin-top:clamp(18px,2vw,30px)}
.conf__record{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(24px,3vw,46px);align-items:start}
.conf__note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--fg-mute);
  max-width:46ch}
@media (max-width:1180px){
  .conf__media,.conf__record,.conf__floor{grid-template-columns:1fr}
}

/* the venue, shown rather than described */
.conf__map{border:1px solid var(--rule-2);margin-bottom:18px}
/* The embed is a live map, so it is given a real aspect and allowed to fill
   the frame. It keeps its own attribution; nothing is laid over it. */
.conf__map iframe{display:block;width:100%;aspect-ratio:8/5;border:0}
.conf__map img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.conf__dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 22px;
  border-top:1px solid var(--rule);font-size:14.5px}
.conf__dl dt{grid-column:1;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-mute);padding:11px 0 0}
.conf__dl dd{grid-column:2;padding:10px 0 11px;border-bottom:1px solid var(--rule);
  color:var(--fg-dim);line-height:1.4}
.conf__dl dt{border-bottom:1px solid var(--rule);padding-bottom:11px}
.conf__dl dd b{color:var(--fg);font-variation-settings:"wdth" 100,"wght" 600;font-weight:400}
.conf__links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px}

/* the three days and the sessions that sit before them */
.conf__days,.conf__train{border-top:1px solid var(--rule)}
.conf__days li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;
  padding-block:11px;border-bottom:1px solid var(--rule)}
.conf__days b{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:400;color:var(--fg);padding-top:3px}
.conf__days span{font-size:14.5px;line-height:1.45;color:var(--fg-dim)}
.conf__train li{padding-block:12px;border-bottom:1px solid var(--rule)}
.conf__train b{display:block;font-variation-settings:"wdth" 102,"wght" 620;font-weight:400;
  font-size:16.5px;letter-spacing:-.014em}
.conf__train span{display:block;margin-top:4px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-mute)}
.conf__train i{display:block;margin-top:4px;font-style:normal;font-size:14px;
  color:var(--fg-dim)}

/* a carousel is a lead frame, a strip and a position — not a widget */
.conf__gal img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.conf__gal figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute)}
.conf__thumbs{display:grid;grid-template-columns:26px repeat(4,minmax(0,1fr)) 26px;
  gap:8px;align-items:stretch;margin-top:10px}
.conf__thumbs img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;opacity:.62}
.conf__thumbs img:first-of-type{opacity:1;outline:2px solid var(--na);outline-offset:-2px}
.conf__nav{background:none;border:1px solid var(--rule-2);font-size:12px;line-height:1;
  color:var(--fg-dim);cursor:pointer;padding:0}

.conf__vid{position:relative}
.conf__vid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.conf__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;display:grid;place-items:center;font-size:14px;
  background:rgba(18,17,16,.62);color:var(--on-photo);
  border:1px solid rgba(244,242,234,.7)}
.conf__vlist{border-top:1px solid var(--rule);margin-top:12px}
.conf__vlist li{display:flex;justify-content:space-between;gap:16px;padding-block:9px;
  border-bottom:1px solid var(--rule);font-size:14.5px}
.conf__vlist b{font-variation-settings:"wdth" 100,"wght" 560;font-weight:400}
.conf__vlist span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  color:var(--fg-mute)}
.conf__around{border-top:1px solid var(--rule)}
.conf__around li{padding-block:9px;border-bottom:1px solid var(--rule);font-size:14px;
  line-height:1.4;color:var(--fg-dim)}

/* the exhibitor list is a list; a logo wall here would out-shout the event */
.conf__ex{border-top:1px solid var(--rule);padding-top:12px}
.conf__ex-g{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--eco);margin:12px 0 7px}
.conf__ex-g:first-child{margin-top:0}
.conf__ex ul{display:flex;flex-wrap:wrap;gap:5px 0}
.conf__ex li{font-size:13.5px;line-height:1.3;color:var(--fg-dim)}
.conf__ex li+li::before{content:"·";margin:0 7px;color:var(--fg-mute)}
.conf__quote{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-2)}
.conf__quote p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.26;
  letter-spacing:-.006em;color:var(--fg)}
.conf__quote cite{display:block;margin-top:11px;font-style:normal;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-mute)}

@media (max-width:1180px){
  .conf__triple{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .conf__triple > div:last-child{grid-column:1/-1}
}
@media (max-width:860px){
  .conf__split,.conf__triple{grid-template-columns:1fr}
  .conf__triple > div:last-child{grid-column:auto}
  .conf__facts{text-align:left}
  .conf__facts .state{justify-content:flex-start}
  .conf__note{margin-left:0}
}