/* ==========================================================================
   BALLORSTUDIO — Sports Design Practice
   Single-page portfolio. Art direction: SPORTS × EDITORIAL × TYPOGRAPHY × CULTURE
   --------------------------------------------------------------------------
   EDITING NOTES
   · Palette + type tokens live in :root — change once, changes everywhere.
   · Artwork ratios are never forced. Each <img> keeps its natural ratio.
   · To swap placeholder art, replace the src in index.html (see README.md).
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  /* colour — restrained: paper, ink, pitch green + one acid accent */
  --paper:#F1EFE9;
  --paper-2:#E6E3DB;
  --paper-3:#DBD7CD;
  --ink:#0A0B0A;
  --ink-2:#171A18;
  --ink-3:#2A2E2B;
  --green:#0B2418;          /* deep pitch green */
  --green-2:#103722;
  --green-3:#1B4A30;
  --accent:#CDF93F;         /* acid lime — used sparingly */
  --accent-2:#E4402B;       /* matchday red — secondary, rare */

  --line:rgba(10,11,10,.13);
  --line-2:rgba(10,11,10,.26);
  --line-3:rgba(10,11,10,.55);
  --line-inv:rgba(241,239,233,.16);
  --line-inv-2:rgba(241,239,233,.34);
  --muted:rgba(10,11,10,.52);
  --muted-inv:rgba(241,239,233,.6);

  /* type */
  --f-disp:'Anton','Arial Narrow',Impact,sans-serif;         /* stadium display */
  --f-semi:'Oswald','Arial Narrow',Helvetica,sans-serif;     /* semi-condensed  */
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* measure */
  --max:1680px;
  --pad:clamp(18px,3.2vw,56px);
  --gcol:clamp(12px,1.5vw,26px);
  --sec:clamp(80px,11vw,170px);       /* section padding */
  --gap:clamp(34px,4.4vw,74px);       /* masonry gap */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* 2. RESET / BASE --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(14.5px,.95vw,16.5px);
  line-height:1.6;
  font-weight:400;
  letter-spacing:.002em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* grain + vignette: one fixed overlay, unifies photo + type */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.32'/></svg>");
}

/* 3. TYPE UTILITIES ------------------------------------------------------- */
.d-xl,.d-lg,.d-md,.d-sm{
  font-family:var(--f-disp);
  font-weight:400;
  text-transform:uppercase;
  line-height:.82;
  letter-spacing:-.012em;
}
.d-xl{font-size:clamp(3.1rem,11.6vw,10.6rem)}
.d-lg{font-size:clamp(2.5rem,7.6vw,6.6rem)}
.d-md{font-size:clamp(1.9rem,4.1vw,3.5rem);line-height:.9}
.d-sm{font-size:clamp(1.4rem,2.1vw,2.05rem);line-height:.94}

.outline{
  color:transparent;
  -webkit-text-stroke:1px var(--ink);
  text-stroke:1px var(--ink);
}
.is-dark .outline,.sec--dark .outline{-webkit-text-stroke-color:var(--paper)}

.meta{
  font-family:var(--f-mono);
  font-size:clamp(9.5px,.68vw,11.5px);
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.5;
}
.meta--dim{color:var(--muted)}
.sec--dark .meta--dim{color:var(--muted-inv)}
.semi{
  font-family:var(--f-semi);
  text-transform:uppercase;
  letter-spacing:.075em;
  font-weight:500;
  line-height:1.15;
}
.lead{
  font-size:clamp(15px,1.22vw,19.5px);
  line-height:1.55;
  max-width:46ch;
  color:rgba(10,11,10,.78);
}
.sec--dark .lead{color:rgba(241,239,233,.76)}
.acc{color:var(--green-3)}
.sec--dark .acc{color:var(--accent)}
.num{font-family:var(--f-mono);font-size:.86em;letter-spacing:.02em}

/* 4. LAYOUT HELPERS ------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.grid12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);
}
.sec{padding-block:var(--sec);position:relative}
.sec--dark{background:var(--green);color:var(--paper)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--paper2{background:var(--paper-2)}
.rule{height:1px;background:var(--line);border:0}
.sec--dark .rule,.sec--ink .rule{background:var(--line-inv)}
/* technical tick strip */
.ticks{
  height:7px;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 26px);
}
.sec--dark .ticks,.sec--ink .ticks{
  background-image:repeating-linear-gradient(90deg,var(--line-inv-2) 0 1px,transparent 1px 26px);
}

/* editorial section header: number / label / long rule / latin-ish note */
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:var(--gcol);align-items:baseline}
.sec-head__no{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--muted);
  padding-top:.45em;
}
.sec--dark .sec-head__no{color:var(--muted-inv)}
.sec-head__label{
  font-family:var(--f-semi);text-transform:uppercase;letter-spacing:.26em;
  font-size:clamp(10.5px,.8vw,12.5px);font-weight:500;
  padding-top:.2em;
}
.sec-head__line{align-self:center;height:1px;background:var(--line);margin-left:1.2em}
.sec--dark .sec-head__line{background:var(--line-inv)}

/* 5. NAV ------------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:600;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .nav{background:rgba(241,239,233,.9)}
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,40px);
  height:clamp(58px,4.6vw,76px);
  transition:height .45s var(--ease);
}
.nav.is-stuck .nav__inner{height:clamp(52px,4vw,64px)}
.brand{
  font-family:var(--f-disp);text-transform:uppercase;
  font-size:clamp(15px,1.15vw,19px);letter-spacing:.015em;
  display:flex;align-items:center;gap:.34em;white-space:nowrap;
}
.brand img{display:block;height:clamp(16px,1.2vw,20px);width:auto;object-fit:contain}
.brand b{font-weight:400}
.brand span{color:var(--green-3)}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.5vw,42px)}
.nav__link{
  font-family:var(--f-semi);text-transform:uppercase;font-size:clamp(10.5px,.78vw,12px);
  letter-spacing:.2em;font-weight:500;position:relative;padding-block:4px;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__cta{
  font-family:var(--f-semi);text-transform:uppercase;font-size:clamp(10.5px,.78vw,12px);
  letter-spacing:.16em;font-weight:500;
  border:1px solid var(--line-2);padding:.7em 1.05em;
  display:inline-flex;align-items:center;gap:.7em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.nav__cta i{font-style:normal;transition:transform .35s var(--ease-out)}
.nav__cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav__cta:hover i{transform:translate(2px,-2px)}
.nav__cta--accent{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav__cta--accent:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.nav__burger{
  display:none;font-family:var(--f-semi);text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;font-weight:500;align-items:center;gap:.6em;
}
.nav__burger .bars{display:grid;gap:3px}
.nav__burger .bars i{display:block;width:16px;height:1px;background:currentColor}
.nav__prog{position:absolute;left:0;bottom:-1px;height:1px;background:var(--green-3);width:0}
.sec--dark .nav__prog{background:var(--accent)}

/* overlay index menu */
.menu{
  position:fixed;inset:0;z-index:700;background:var(--green);color:var(--paper);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(18px,3.2vw,56px);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .72s var(--ease-out);
  pointer-events:none;
}
.menu[data-open="true"]{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu__top{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:clamp(14px,2vw,24px);border-bottom:1px solid var(--line-inv)}
.menu__list{display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,.6vw,10px)}
.menu__item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1.1em;
  padding-block:clamp(8px,1.1vw,16px);border-bottom:1px solid var(--line-inv);
  opacity:0;transform:translateY(14px);
}
.menu[data-open="true"] .menu__item{opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease-out) var(--d,0s)}
.menu__item span.meta{color:var(--muted-inv)}
.menu__item strong{
  font-family:var(--f-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,7vw,5.4rem);line-height:.86;letter-spacing:-.01em;
}
.menu__item em{font-style:normal;color:var(--accent);font-size:clamp(1.2rem,2.4vw,2rem);
  transition:transform .5s var(--ease-out)}
.menu__item:hover em{transform:translate(6px,-6px)}
.menu__bot{display:grid;gap:clamp(12px,1.6vw,20px);
  padding-top:clamp(14px,2vw,24px);border-top:1px solid var(--line-inv)}
.menu__bot-row{display:flex;flex-wrap:wrap;gap:1.4em;justify-content:space-between;
  color:var(--muted-inv)}
.menu__cta{justify-self:start;
  background:var(--accent);color:var(--green);border-color:var(--accent)}
.menu__cta:hover{background:var(--paper);color:var(--green);border-color:var(--paper)}

/* 6. HERO ----------------------------------------------------------------- */
.hero{position:relative;padding-top:clamp(24px,3.4vw,54px);padding-bottom:clamp(40px,6vw,90px)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.7em 2.4em;justify-content:space-between;
  padding-bottom:clamp(12px,1.2vw,18px);
}
.hero__body{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);
  padding-top:clamp(18px,2.6vw,42px);
}
.hero__type{grid-column:1 / span 8;position:relative;z-index:3}
.hero__hl{display:block;overflow:hidden}
.hero__hl > span{display:block;transform:translateY(101%)}
.js .hero__hl > span{animation:lineUp 1.05s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes lineUp{to{transform:translateY(0)}}
.hero__hl--b > span{
  font-size:.86em;
  -webkit-text-stroke:1px var(--ink);color:transparent;
  padding-left:.06em;
}
.hero .hero__hl--b > span{color:var(--accent)}
.hero__hl--b{padding-block:.06em}
.hero__dot{color:var(--green-3)}
.hero__under{
  margin-top:clamp(20px,2.4vw,38px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gcol);
  align-items:end;
}
.hero__copy{grid-column:1 / span 5}
.hero__facts{grid-column:7 / span 6;display:flex;flex-wrap:wrap;gap:1.5em 2.2em;justify-content:flex-end}
.hero__fact{display:flex;flex-direction:column;gap:.35em;min-width:7.5em}
.hero__fact b{font-family:var(--f-semi);font-weight:500;font-size:15px;letter-spacing:.02em}
.hero__rail{
  grid-column:1 / span 12;margin-top:clamp(22px,2.6vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:1.4em;
  border-top:1px solid var(--line);padding-top:.9em;
}
.scroll-ind{display:inline-flex;align-items:center;gap:.7em}
.scroll-ind i{font-style:normal;display:inline-block;animation:bob 2.6s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* poster stack — layered, rotated, each keeps its own ratio */
.stack{
  grid-column:9 / span 4;
  position:relative;
  z-index:2;
  align-self:start;
  margin-top:clamp(-14px,-1vw,0px);
}
.stack .poster{position:absolute}
.stack .p-a{position:relative;width:74%;margin-left:6%;rotate:-2.4deg;z-index:3}
.stack .p-b{width:112%;left:-30%;bottom:-16%;rotate:1.6deg;z-index:4}
.stack .p-c{width:38%;right:-8%;top:-7%;rotate:3.2deg;z-index:5}
.stack__tags{position:absolute;left:-2px;top:0;display:grid;gap:.5em;z-index:6;
  transform:translateX(-100%) translateX(-14px)}
.stack__tags b{display:flex;gap:.6em;align-items:center;color:var(--muted)}
.stack__tags b::after{content:"";width:22px;height:1px;background:var(--line-2)}
.stack__tags b.a1{color:var(--ink)}
/* the ledger under the stack */
.stack__ledger{position:absolute;right:0;bottom:-34%;width:74%;z-index:6;
  border-top:1px solid var(--line);padding-top:.6em;display:grid;gap:.35em}
.stack__ledger div{display:flex;justify-content:space-between;gap:1em;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted)}

/* POSTER primitives (photo-led) */
.poster{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.poster__img{width:100%;height:auto;
  filter:contrast(1.06) saturate(.78) brightness(.9);
  transition:transform 1.1s var(--ease-out),filter .6s var(--ease)}
.poster__img--full{position:absolute;inset:0;height:100%;object-fit:cover}
.poster__frame{position:absolute;inset:0;border:1px solid rgba(241,239,233,.22);pointer-events:none}
.poster__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,10,.55) 0%,rgba(10,11,10,0) 32%,rgba(10,11,10,.12) 58%,rgba(10,11,10,.82) 100%)}
.poster__type{position:absolute;inset:0;padding:clamp(9px,1vw,16px);
  display:flex;flex-direction:column;justify-content:space-between;color:var(--paper)}
.pt-top,.pt-bot{display:flex;justify-content:space-between;align-items:flex-start;gap:1em}
.pt-crest{
  width:clamp(20px,1.7vw,30px);aspect-ratio:1;flex:0 0 auto;
  border:1px solid rgba(241,239,233,.5);display:grid;place-items:center;
}
.pt-crest svg{width:62%;height:62%}
.pt-title{font-family:var(--f-disp);text-transform:uppercase;line-height:.86;letter-spacing:.005em}
.pt-num{font-family:var(--f-disp);text-transform:uppercase;line-height:.8}
.pt-mini{font-family:var(--f-mono);font-size:clamp(7.5px,.62vw,10px);letter-spacing:.14em;text-transform:uppercase}
.pt-stack{display:grid;gap:.28em}
.poster--lime .poster__type{color:var(--ink)}
.poster--lime .poster__scrim{background:linear-gradient(180deg,rgba(205,249,63,.18),rgba(205,249,63,.06))}

/* 7. TICKER --------------------------------------------------------------- */
.ticker{background:var(--green);color:var(--paper);overflow:hidden;
  border-block:1px solid rgba(241,239,233,.14)}
.ticker__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker--rev .ticker__track{animation-direction:reverse}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{display:flex;align-items:center;flex:0 0 auto}
.ticker__set > *{white-space:nowrap}
.ticker__w{font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(15px,1.5vw,25px);padding:clamp(10px,1.15vw,18px) 0;display:flex;align-items:center;gap:clamp(22px,3vw,54px);padding-right:clamp(22px,3vw,54px)}
.ticker__w em{font-style:normal;color:var(--accent);font-size:.62em}
@keyframes slide{to{transform:translateX(-50%)}}

/* 8. WORK ----------------------------------------------------------------- */
.work{padding-top:clamp(60px,7vw,110px)}
.work__intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(18px,2vw,30px);align-items:end;
  padding-top:clamp(16px,1.8vw,28px)}
.work__title{grid-column:1 / span 7}
.work__note{grid-column:8 / span 5}
.work__foot{display:flex;flex-wrap:wrap;gap:.8em 1.6em;justify-content:space-between;
  margin-top:clamp(20px,2.4vw,34px)}

/* ART-DIRECTED PLATES GRID — three hand-built columns.
   Each column is an independent stack, so every artwork keeps its natural
   ratio and nothing is cropped or forced into an identical box.
   Column offsets create the staggered, asymmetric rhythm.
   To add a plate later: drop it into whichever column looks right
   (or copy a column). At <=880px the columns dissolve into one feed. */
.plates{
  margin-top:clamp(38px,4.6vw,74px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--gap);align-items:start;
}
.plate-col{display:flex;flex-direction:column;gap:var(--gap)}
.plate-col--b{margin-top:clamp(22px,5.6vw,104px)}
.plate-col--c{margin-top:clamp(40px,10.5vw,200px)}

/* text plate — fills the void at the foot of column C */
.note-card{border-top:1px solid var(--line-2);padding-top:1.05em;display:grid;gap:.85em}
.note-card__t{
  font-family:var(--f-disp);text-transform:uppercase;line-height:.92;
  font-size:clamp(1.05rem,1.62vw,1.6rem);letter-spacing:-.005em;
}
.note-card p.meta{line-height:1.75;max-width:34ch}

/* scale rhythm: narrower/offset plates break the grid on purpose */
.item--inset-r{padding-right:clamp(0px,9vw,170px)}
.item--inset-l{padding-left:clamp(0px,7vw,120px)}
.item--tight{padding-inline:clamp(0px,4vw,64px)}

/* work item */
.item{position:relative}
.item__media{position:relative;overflow:hidden;background:var(--ink-2)}
.item__media img{width:100%;
  filter:contrast(1.04) saturate(.8) brightness(.94);
  transition:transform 1.15s var(--ease-out),filter .7s var(--ease)}
.item__frame{position:absolute;inset:0;border:1px solid rgba(10,11,10,.001);pointer-events:none}
.item__type{position:absolute;inset:0;padding:clamp(8px,.9vw,15px);pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;color:var(--paper);
  opacity:.96}
.item__type .row{display:flex;justify-content:space-between;align-items:flex-start;gap:1em}
.item__type .tk{font-family:var(--f-mono);font-size:clamp(7px,.58vw,9.5px);letter-spacing:.16em;text-transform:uppercase}
.item__type .big{font-family:var(--f-disp);text-transform:uppercase;line-height:.84}
.item__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,10,.6),rgba(10,11,10,.06) 30%,rgba(10,11,10,.05) 55%,rgba(10,11,10,.86))}
.item__hover{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(10px,.9vw,16px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1em;
  color:var(--paper);
  background:linear-gradient(0deg,rgba(11,36,24,.94),rgba(11,36,24,.66) 62%,rgba(11,36,24,0));
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.item__hover .h-left{display:grid;gap:.25em}
.item__hover .h-arrow{
  font-family:var(--f-disp);font-size:clamp(1rem,1.3vw,1.5rem);color:var(--accent);
  line-height:1;transition:transform .5s var(--ease-out)
}
.item__cap{
  display:grid;grid-template-columns:auto 1fr auto;gap:.9em;align-items:baseline;
  border-top:1px solid var(--line);margin-top:clamp(10px,.9vw,16px);padding-top:.75em;
}
.item__cap .cap-no{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.item__cap .cap-t{font-family:var(--f-semi);text-transform:uppercase;font-weight:500;
  font-size:clamp(11.5px,.86vw,13.5px);letter-spacing:.09em;
  transition:color .35s var(--ease)}
.item__cap .cap-c{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;margin-top:.35em;display:block}
.item__cap .cap-y{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
@media (hover:hover){
  .item:hover .item__media img{transform:scale(1.035);filter:contrast(1.1) saturate(1.08) brightness(1)}
  .item:hover .item__hover{transform:translateY(0)}
  .item:hover .h-arrow{transform:translate(3px,-3px)}
  .item:hover .cap-t{color:var(--green-3)}
  .item:hover .item__frame{border-color:rgba(205,249,63,.42)}
}

/* typographic plates (artwork made of type — no photo dependency) */
.plate{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(14px,1.5vw,26px);isolation:isolate}
.plate--green{background:var(--green);color:var(--paper)}
.plate--ink{background:var(--ink);color:var(--paper)}
.plate--paper{background:var(--paper-2);color:var(--ink);border:1px solid var(--line-2)}
.plate__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),
                   linear-gradient(0deg,var(--line) 1px,transparent 1px);
  background-size:12.5% 12.5%}
.plate--green .plate__grid,.plate--ink .plate__grid{
  background-image:linear-gradient(90deg,rgba(241,239,233,.09) 1px,transparent 1px),
                   linear-gradient(0deg,rgba(241,239,233,.09) 1px,transparent 1px)}
.pitch{width:100%;height:auto;position:relative}
.pitch .pl{stroke:rgba(241,239,233,.42);stroke-width:1;fill:none}
.pitch .dotc{fill:var(--accent)}
.pitch .dotn{fill:var(--paper);font-family:var(--f-mono);font-size:7px;letter-spacing:.06em}
.pitch .lbl{fill:rgba(241,239,233,.6);font-family:var(--f-mono);font-size:6.4px;letter-spacing:.16em}
.scoreline{display:flex;align-items:flex-end;gap:clamp(10px,1.4vw,24px);
  font-family:var(--f-disp);line-height:.8}
.scoreline .sc{font-size:clamp(3.4rem,9vw,7.4rem)}
.scoreline .vs{font-size:clamp(1.4rem,3vw,2.6rem);color:var(--accent);padding-bottom:.12em}
.formrow{display:flex;gap:.38em}
.formrow i{width:1.55em;aspect-ratio:1;display:grid;place-items:center;
  font-style:normal;font-family:var(--f-mono);font-size:9.5px;
  border:1px solid var(--line-inv-2);color:var(--paper)}
.formrow i.w{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.formrow i.l{background:rgba(241,239,233,.1);color:var(--muted-inv)}
.swatches{display:flex;gap:.4em}
.swatches i{width:2.1em;height:2.1em;display:block;border:1px solid var(--line-inv)}

/* 9. FEATURED PROJECT ----------------------------------------------------- */
.feat{background:var(--green);color:var(--paper);overflow:hidden}
.feat.sec--dark,.clubs.sec--dark{color:var(--paper)}
.feat__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(20px,2.4vw,34px);align-items:end;
  padding-top:clamp(20px,2.4vw,40px)}
.feat__title{grid-column:1 / span 8}
.feat__aside{grid-column:9 / span 4;display:grid;gap:1em}
.feat__big{display:block}
.feat__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(30px,4vw,72px);
  margin-top:clamp(40px,5vw,90px);align-items:start}
.feat__grid .cell{display:grid;gap:.75em}
.feat__grid .cell .cap{display:flex;justify-content:space-between;gap:1em;
  border-top:1px solid var(--line-inv);padding-top:.6em;color:var(--muted-inv)}
.c-a{grid-column:1 / span 4}
.c-b{grid-column:6 / span 3;margin-top:clamp(20px,7vw,120px)}
.c-sys{grid-column:10 / span 3;margin-top:clamp(10px,2.4vw,40px);display:grid;gap:1.1em}
.c-sys .sys{border-top:1px solid var(--line-inv);padding-top:.7em;display:grid;gap:.5em}
.c-sys .sys b{font-family:var(--f-semi);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--muted-inv)}
.c-c{grid-column:1 / span 3}
.c-d{grid-column:5 / span 8}
.feat__note{display:flex;flex-wrap:wrap;gap:1.2em 2em;justify-content:space-between;
  align-items:center;margin-top:clamp(34px,4vw,70px);border-top:1px solid var(--line-inv);padding-top:1em}
.btn{
  display:inline-flex;align-items:center;gap:.85em;
  font-family:var(--f-semi);text-transform:uppercase;letter-spacing:.16em;font-weight:500;
  font-size:clamp(11px,.85vw,13px);
  border:1px solid var(--line-inv-2);padding:1.05em 1.35em;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn i{font-style:normal;transition:transform .4s var(--ease-out)}
.btn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn:hover i{transform:translate(3px,-3px)}
.btn--dark{border-color:var(--line-2)}
.btn--dark:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--accent:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 10. SERVICES ------------------------------------------------------------ */
.svc__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:1.4em;align-items:end;padding-top:clamp(16px,2vw,30px)}
.svc__title{grid-column:1 / span 6}
.svc__note{grid-column:8 / span 5}
.svc{margin-top:clamp(30px,3.6vw,60px);border-top:1px solid var(--line-2)}
.svc__row{border-bottom:1px solid var(--line);position:relative}
.svc__btn{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,2.4vw,40px);
  align-items:center;text-align:left;padding-block:clamp(16px,2vw,30px);
  transition:padding .5s var(--ease),background .5s var(--ease);
}
.svc__no{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
  transition:color .4s var(--ease)}
.svc__name{font-family:var(--f-disp);text-transform:uppercase;
  font-size:clamp(1.35rem,3.4vw,3rem);line-height:.94;letter-spacing:-.005em;
  transition:transform .6s var(--ease-out),color .4s var(--ease)}
.svc__mark{font-family:var(--f-disp);font-size:clamp(1rem,1.5vw,1.5rem);color:var(--muted);
  transition:transform .5s var(--ease-out),color .4s var(--ease)}
.svc__panel{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,2.4vw,40px);
  overflow:hidden;max-height:0;transition:max-height .6s var(--ease-out),opacity .5s var(--ease);
  opacity:0;
}
.svc__panel > p{grid-column:2 / span 1;max-width:62ch;padding-bottom:clamp(18px,2vw,28px);
  color:rgba(10,11,10,.72)}
.svc__row.is-open .svc__panel{max-height:340px;opacity:1}
.svc__row.is-open .svc__no{color:var(--green-3)}
.svc__row.is-open .svc__name{transform:translateX(clamp(6px,1vw,18px))}
.svc__row.is-open .svc__mark{transform:rotate(45deg);color:var(--green-3)}
@media (hover:hover){
  .svc__row:hover .svc__name{transform:translateX(clamp(6px,1vw,18px))}
  .svc__row:hover .svc__mark{transform:rotate(45deg);color:var(--green-3)}
  .svc__row:hover .svc__no{color:var(--ink)}
  .svc__btn:hover{background:linear-gradient(90deg,rgba(205,249,63,.14),rgba(205,249,63,0) 42%)}
}
.svc__tags{display:flex;flex-wrap:wrap;gap:.45em;margin-top:1.2em}
.svc__tags i{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--line-2);padding:.5em .7em}

/* 11. ABOUT --------------------------------------------------------------- */
.about__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(28px,4vw,60px);padding-top:clamp(20px,2.6vw,44px)}
.about__portrait{position:relative}
.about__portrait .cap{margin-top:.7em;display:flex;justify-content:space-between;gap:1em;
  border-top:1px solid var(--line);padding-top:.6em;color:var(--muted)}
.about__copy{display:grid;gap:1.3em;align-content:start}
.about__copy p.big{font-family:var(--f-semi);font-weight:400;text-transform:none;
  font-size:clamp(1.15rem,1.75vw,1.65rem);line-height:1.36;letter-spacing:-.002em}
.about__facts{display:grid;align-content:start}
.fact{display:grid;grid-template-columns:1fr auto;gap:1em;align-items:baseline;
  padding-block:.85em;border-bottom:1px solid var(--line)}
.fact:first-child{border-top:1px solid var(--line-2)}
.fact b{font-family:var(--f-semi);font-weight:500;text-transform:uppercase;
  letter-spacing:.12em;font-size:clamp(12px,.95vw,14px)}
.fact span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted)}
.stats{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-2);margin-top:clamp(10px,1.6vw,20px)}
.stat{padding:clamp(16px,1.8vw,28px) 0;border-right:1px solid var(--line);display:grid;gap:.35em}
.stat:last-child{border-right:0}
.stat b{font-family:var(--f-disp);font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:.85}
.stat span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* 12. CLUB STRIP ---------------------------------------------------------- */
.clubs{background:var(--ink);color:var(--paper);padding-block:clamp(34px,4vw,64px);overflow:hidden}
.clubs__head .meta{color:var(--muted-inv)}
.clubs .meta{color:var(--muted-inv)}
.clubs__head{display:flex;flex-wrap:wrap;gap:1em 2em;justify-content:space-between;
  align-items:baseline;padding-bottom:clamp(18px,2vw,30px);border-bottom:1px solid var(--line-inv)}
.club-row{overflow:hidden;border-bottom:1px solid var(--line-inv)}
.club-row:last-of-type{border-bottom:0}
.club-track{display:flex;width:max-content;animation:slide 54s linear infinite}
.club-row--rev .club-track{animation-direction:reverse;animation-duration:64s}
.club-row:hover .club-track{animation-play-state:paused}
.club-set{display:flex;align-items:center;flex:0 0 auto}
.club{
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  padding:clamp(12px,1.5vw,24px) clamp(16px,2vw,34px) clamp(12px,1.5vw,24px) 0;
  border-right:1px solid var(--line-inv);
}
.club__copy{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted-inv);
  text-transform:uppercase;white-space:nowrap}
.club__copy b{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1rem,1.55vw,1.55rem);line-height:1;letter-spacing:.025em;color:var(--paper)}
.club--more .club__copy b{color:var(--accent)}
.club-row--fixtures .club{padding-block:clamp(8px,1vw,14px)}
.club-row--fixtures b{font-family:var(--f-mono);font-size:clamp(10px,1vw,12.5px);
  letter-spacing:.1em;font-weight:400;color:var(--muted-inv);text-transform:uppercase}
.club-row--fixtures .sc{color:var(--accent);font-family:var(--f-mono);font-size:clamp(10px,1vw,12.5px)}
.clubs__foot{display:flex;flex-wrap:wrap;gap:.8em 2em;justify-content:space-between;
  padding-top:clamp(16px,2vw,26px);color:var(--muted-inv)}

/* 13. CONTACT / FOOTER ---------------------------------------------------- */
.contact{background:var(--green-2);color:var(--paper);padding-top:clamp(70px,9vw,150px)}
.contact__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(22px,3vw,40px);align-items:end}
.contact__big{grid-column:1 / span 9}
.contact__side{grid-column:10 / span 3;display:grid;gap:1.1em;justify-items:start}
.contact__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(20px,2.6vw,36px);align-items:end;
  margin-top:clamp(34px,4.4vw,74px)}
.contact__cta{grid-column:1 / span 6;display:grid;gap:1.3em;justify-items:start}
.btn--xl{font-size:clamp(12.5px,1.05vw,15px);padding:1.5em 1.9em;letter-spacing:.18em}
.links{grid-column:8 / span 5;display:grid}
.links a{display:grid;grid-template-columns:auto 1fr auto;gap:1em;align-items:baseline;
  padding-block:.9em;border-bottom:1px solid var(--line-inv);transition:color .35s var(--ease)}
.links a:first-child{border-top:1px solid var(--line-inv-2)}
.links a em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--muted-inv);text-transform:uppercase}
.links a b{font-family:var(--f-semi);font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;font-size:clamp(12px,1vw,14.5px)}
.links a i{font-style:normal;font-family:var(--f-disp);transition:transform .4s var(--ease-out)}
.links a:hover{color:var(--accent)}
.links a:hover i{transform:translate(3px,-3px)}
.links a small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted-inv);
  grid-column:2;text-transform:none}
.foot{border-top:1px solid var(--line-inv);margin-top:clamp(40px,5vw,90px);
  padding-block:clamp(16px,2vw,26px);
  display:flex;flex-wrap:wrap;gap:.7em 2em;justify-content:space-between;align-items:center}
.foot a:hover{color:var(--accent)}
.to-top{display:inline-flex;align-items:center;gap:.7em}

/* 14. SECTION INDICATOR (right edge, desktop) ----------------------------- */
.edge{
  position:fixed;right:0;top:50%;z-index:520;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  display:flex;align-items:center;gap:1.1em;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
}
.edge.is-on{opacity:1}
.edge em{font-style:normal;color:var(--green-3)}
.edge .bar{width:1px;height:46px;background:var(--line-2);position:relative;overflow:hidden}
.edge .bar::after{content:"";position:absolute;inset:0;background:var(--green-3);
  transform:scaleY(var(--p,0));transform-origin:top;transition:transform .3s linear}
.is-dark-edge .edge{color:var(--muted-inv)}
.is-dark-edge .edge em{color:var(--accent)}
.is-dark-edge .edge .bar{background:var(--line-inv-2)}
.is-dark-edge .edge .bar::after{background:var(--accent)}

/* 15. CURSOR (removed — native cursor preserved) */

/* 16. REVEAL -------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease),transform 1.05s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
/* image curtain wipe */
.js .wipe .item__media::after,.js .wipe .poster__veil{
  content:"";position:absolute;inset:0;background:var(--paper);z-index:6;
  transform:scaleY(1);transform-origin:bottom;
  transition:transform 1.15s var(--ease-out);
}
.js .wipe .poster__veil{background:var(--green)}
.js .wipe.is-in .item__media::after,.js .wipe.is-in .poster__veil{transform:scaleY(0)}
.js .wipe .item__media img{transform:scale(1.08);transition:transform 1.6s var(--ease-out),filter .7s var(--ease)}
.js .wipe.is-in .item__media img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .band{opacity:1!important;transform:none!important}
  .js .wipe .item__media::after,.js .wipe .poster__veil{display:none}
  .js .wipe .item__media img{transform:none}
  .hero__hl > span{transform:none!important;animation:none!important}
  .ticker__track,.club-track{animation:none}
  .scroll-ind i{animation:none}
  *{transition-duration:.001ms!important}
}

/* 17. RESPONSIVE ---------------------------------------------------------- */
@media (max-width:1400px){
  .masonry{column-count:3}
  .stack .p-b{width:104%;left:-24%}
}
@media (max-width:1180px){
  .hero__type{grid-column:1 / span 7}
  .stack{grid-column:8 / span 5}
  .hero__copy{grid-column:1 / span 6}
  .hero__facts{grid-column:7 / span 6}
  .masonry{column-count:2}
  .item--inset-r{padding-right:clamp(0px,7vw,120px)}
  .c-a{grid-column:1 / span 5}
  .c-b{grid-column:7 / span 4;margin-top:clamp(30px,10vw,140px)}
  .c-sys{grid-column:11 / span 2}
  .c-c{grid-column:1 / span 4}
  .c-d{grid-column:6 / span 7}
  .about__type{grid-column:1 / span 8}
  .about__portrait{grid-column:9 / span 4}
}
@media (max-width:980px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
  .nav .nav__cta{display:none}
  .edge{display:none}
  .hero__body{row-gap:clamp(22px,3vw,40px)}
  .hero__type{grid-column:1 / span 12}
  .stack{grid-column:1 / span 12;margin-top:clamp(8px,2vw,20px);
    display:flex;gap:clamp(12px,2vw,20px);overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    padding-bottom:clamp(10px,2vw,18px);
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .stack::-webkit-scrollbar{height:2px}
  .stack::-webkit-scrollbar-thumb{background:var(--line-2)}
  .stack .poster,.stack .p-a,.stack .p-b,.stack .p-c{
    position:relative;width:auto;flex:0 0 56%;min-width:200px;margin:0;
    rotate:0;left:auto;right:auto;bottom:auto;top:auto;scroll-snap-align:start}
  .stack .p-b{flex:0 0 78%;align-self:center}
  .stack .p-c{flex:0 0 40%;align-self:flex-start}
  .stack__tags,.stack__ledger{display:none}
  .hero__under{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hero__copy{grid-column:1 / span 6}
  .hero__facts{grid-column:1 / span 6;justify-content:flex-start;margin-top:.4em}
  .hero__rail{flex-wrap:wrap;gap:.8em 1.6em}
  .work__title{grid-column:1 / span 12}
  .work__note{grid-column:1 / span 12}
  .feat__title{grid-column:1 / span 12}
  .feat__aside{grid-column:1 / span 12}
  .c-a{grid-column:1 / span 6}
  .c-b{grid-column:8 / span 5;margin-top:clamp(20px,8vw,90px)}
  .c-sys{grid-column:1 / span 12;margin-top:clamp(16px,3vw,30px)}
  .c-sys{grid-template-columns:repeat(3,1fr);gap:1.2em}
  .c-c{grid-column:1 / span 5}
  .c-d{grid-column:7 / span 6}
  .svc__title{grid-column:1 / span 12}
  .svc__note{grid-column:1 / span 12}
  .about__portrait{margin-top:clamp(6px,2vw,14px)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  .contact__big{grid-column:1 / span 12}
  .contact__side{grid-column:1 / span 12;justify-items:start}
  .contact__cta{grid-column:1 / span 12}
  .links{grid-column:1 / span 12}
}
@media (max-width:720px){
  :root{--gap:clamp(26px,6vw,40px)}
  .masonry{column-count:1}
  .item--inset-r,.item--inset-l,.item--tight{padding-inline:0}
  /* single column, natural ratios, gentle editorial insets only */
  .item--solo{padding-inline:clamp(0px,7vw,54px)}
  .sec-head__line{margin-left:.8em}
  .svc__btn{padding-block:18px}
  .svc__name{font-size:clamp(1.25rem,6.4vw,1.9rem)}
  .c-a,.c-b,.c-c,.c-d{grid-column:1 / span 12;margin-top:0}
  .c-sys{grid-template-columns:1fr}
  .about__portrait{grid-column:1 / span 12}
  .hero__facts{gap:1.1em 1.6em}
  .club{gap:0;padding-right:20px}
  .club__copy b{font-size:13px}
  .stack .poster,.stack .p-a{flex:0 0 66%}
  .stack .p-b{flex:0 0 88%}
  .stack .p-c{flex:0 0 46%}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:430px){
  :root{--pad:16px}
  .d-xl{font-size:clamp(2.6rem,12.4vw,3.4rem)}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
}

/* 18. PRINT --------------------------------------------------------------- */
@media print{
  body::after,.nav,.edge,.cur,.ticker,.stack__ledger{display:none}
  .sec{padding-block:24px;break-inside:avoid}
  .masonry{column-count:2}
}

/* 19. HERO TITLE (scale tuned so 3 lines hold their measure) --------------- */
.hero__title{
  font-family:var(--f-disp);
  text-transform:uppercase;
  line-height:.84;
  letter-spacing:-.014em;
  font-size:clamp(2.85rem,8.9vw,8.45rem);
  font-weight:400;
}

/* ==========================================================================
   20. COMPONENT COMPLETIONS (grid bands, index table, plates, ratios, a11y)
   ========================================================================== */

/* skip link */
.skip{
  position:fixed;left:12px;top:-60px;z-index:999;
  background:var(--ink);color:var(--paper);padding:.7em 1em;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  transition:top .3s var(--ease);
}
.skip:focus{top:12px}

/* anchor offset for sticky nav */
section[id],header[id],footer[id]{scroll-margin-top:clamp(56px,4.6vw,86px)}

/* hero under + figure label */
.hero__under{grid-column:1 / -1}
.stack__fig{
  position:absolute;right:0;bottom:-26px;white-space:nowrap;z-index:7;
}
.stack .p-b,.stack .p-c{z-index:4}

/* ratio helpers — artwork dimensions are declared, never cropped */
.ratio-1-1{aspect-ratio:1/1}
.ratio-4-5{aspect-ratio:4/5}
.ratio-3-4{aspect-ratio:3/4}
.ratio-2-3{aspect-ratio:2/3}
.ratio-16-9{aspect-ratio:16/9}

/* technical dot mark used in tickers */
.dotmark{
  width:7px;height:7px;background:var(--accent);flex:0 0 auto;
  transform:rotate(45deg);display:inline-block;
}

/* poster overlay type scale (tuned for small + large mounts) */
.big--xl{font-size:clamp(2.4rem,5.2vw,4.6rem)}
.big--lg{font-size:clamp(2rem,4.4vw,3.8rem)}
.big--md{font-size:clamp(1.45rem,2.9vw,2.3rem)}
.item__type .tk + .big--md{margin-top:.12em}

/* poster variant with lime accent */
.poster--lime .poster__type{color:var(--paper)}
.poster--lime .pt-num{color:var(--accent)}
.poster--lime .poster__scrim{
  background:linear-gradient(180deg,rgba(10,11,10,.58),rgba(10,11,10,0) 30%,
             rgba(11,36,24,.34) 58%,rgba(11,36,24,.92));
}

/* work caption row — flexible so metadata never breaks the grid */
.item__cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .85em;
}
.item__cap .cap-no{order:1;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.item__cap .cap-main{order:2;flex:1 1 auto;display:grid;gap:.25em}
.item__cap .cap-k{order:3;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.item__cap .cap-y{order:4;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.item__cap .cap-c{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}

/* hover copy line */
.h-desc{
  font-family:var(--f-semi);text-transform:uppercase;font-weight:500;
  letter-spacing:.07em;font-size:clamp(11px,.82vw,13px);line-height:1.2;
}

/* ── band: statement ─────────────────────────────────────────────────── */
.band--statement{
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding-block:clamp(30px,4.2vw,72px);
}
.band__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:1.5em;align-items:end;
}
.band__type{grid-column:1 / span 8;display:grid;gap:.02em}
.band__type p:last-child{color:transparent}
.band__aside{grid-column:10 / span 3;display:grid;gap:1.1em;align-content:end}
.band__aside p{
  font-family:var(--f-mono);font-size:11.5px;line-height:1.7;
  letter-spacing:.03em;text-transform:none;color:var(--muted);
}

/* ── band: season index (contents table) ─────────────────────────────── */
.band--index{
  border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3);
  padding-block:clamp(14px,1.8vw,26px);
}
.idx__head{display:flex;flex-wrap:wrap;gap:.5em 2em;justify-content:space-between;
  margin-bottom:.9em}
.idx li{
  display:grid;grid-template-columns:3.4em minmax(0,1.45fr) minmax(0,1.15fr) minmax(0,1.15fr) 4.2em;
  gap:1em;align-items:baseline;padding-block:.5em;border-top:1px solid var(--line);
  transition:background .35s var(--ease),padding .35s var(--ease);
}
.idx li:hover{background:rgba(11,36,24,.055);padding-inline:.7em}
.idx .i-no,.idx .i-c,.idx .i-k,.idx .i-y{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.idx .i-t{font-family:var(--f-semi);text-transform:uppercase;font-weight:500;
  letter-spacing:.085em;font-size:clamp(11px,.9vw,13.5px)}
.idx .i-y{text-align:right}

/* ── typographic plates ──────────────────────────────────────────────── */
.plate__top,.plate__bot{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1em;
  position:relative;z-index:2;
}
.plate__bot--split{align-items:flex-end}
.plate__mid{
  position:relative;z-index:2;flex:1 1 auto;display:flex;
  align-items:center;justify-content:center;
  padding-block:clamp(8px,1.4vw,20px);
}
.plate__mid--wide{
  display:grid;width:100%;gap:clamp(10px,1.3vw,22px);align-content:center;
}
.plate .pitch{max-width:min(340px,86%)}
.plate--paper .pl{stroke:rgba(10,11,10,.4)}
.plate--paper .dotn{fill:var(--ink)}
.scoreline .sc{font-size:clamp(2.1rem,4.4vw,4.1rem)}
.scoreline--lg .sc{font-size:clamp(3rem,7.4vw,6.8rem)}
.scorers{display:flex;flex-wrap:wrap;gap:.5em 1.4em}

/* palette swatches (featured system panel) */
.swatches i{width:2.1em;height:2.1em;display:block;border:1px solid var(--line-inv-2)}
.sw--green{background:var(--green)}
.sw--ink{background:var(--ink)}
.sw--lime{background:var(--accent)}
.sw--paper{background:var(--paper)}

/* featured facts list */
.feat__facts{display:grid;gap:.45em}
.feat .meta--dim{color:var(--muted-inv)}

/* about copy */
.about__copy p{color:rgba(10,11,10,.72);max-width:62ch}

/* dark-section outline heading (contact) */
.contact .hero__hl--b{margin-top:.09em}
.contact .hero__hl--b > span{
  -webkit-text-stroke:1px var(--ink);color:var(--ink);
  display:inline-block;padding:.06em .12em .1em;
  background:var(--accent);
}
.contact__big{font-size:clamp(2.6rem,8.4vw,7.7rem)}
.contact .lead{color:rgba(241,239,233,.86)}

/* edge indicator sits straight (no rotation) */
.edge{transform:translateY(-50%)}

/* hover restores normal transition speed after the reveal wipe */
@media (hover:hover){
  .item:hover .item__media img,
  .js .item.wipe.is-in:hover .item__media img{
    transform:scale(1.035);
    filter:contrast(1.1) saturate(1.06) brightness(1);
  }
  .js .item.wipe.is-in .item__media img{
    transition:transform 1.15s var(--ease-out),filter .7s var(--ease);
  }
}

/* ── responsive additions ────────────────────────────────────────────── */
@media (max-width:1180px){
  .band__type{grid-column:1 / span 12}
  .band__aside{grid-column:1 / span 7;align-content:start}
}
@media (max-width:980px){
  .band__aside{grid-column:1 / span 12}
  .idx li{grid-template-columns:2.8em minmax(0,1.6fr) minmax(0,1.2fr) 3.6em}
  .idx .i-k{display:none}
}
@media (max-width:720px){
  .idx li{grid-template-columns:2.4em minmax(0,1.5fr) 3.2em;gap:.7em}
  .idx .i-c{display:none}
  .stack__fig{position:static;display:block;margin-top:.9em;text-align:right}
  .item__cap .cap-k{order:5;width:100%}
}

/* ==========================================================================
   21. PLATES — responsive behaviour
   ========================================================================== */
@media (max-width:1180px){
  .plate-col--b{margin-top:clamp(18px,4vw,64px)}
  .plate-col--c{margin-top:clamp(30px,7.5vw,110px)}
}
@media (max-width:880px){
  .plates{display:flex;flex-direction:column;gap:var(--gap)}
  .plate-col{display:contents}                    /* columns dissolve …   */
  .plates .item,.plates .note-card{order:var(--o,0)}   /* … feed re-orders 01→12 */
  .item--inset-r,.item--inset-l,.item--tight{padding-inline:clamp(0px,5vw,40px)}
  .note-card{padding-inline:clamp(0px,5vw,40px);margin-top:clamp(10px,3vw,24px)}
}
@media (max-width:720px){
  .item--inset-r,.item--inset-l,.item--tight{padding-inline:0}
  .item--solo{padding-inline:clamp(0px,7vw,54px)}      /* one or two plates stay inset */
  .note-card{padding-inline:0}
  .note-card__t{font-size:clamp(1.15rem,6vw,1.7rem)}
}

/* ==========================================================================
   22. CONTENT-VISIBILITY-PROOF REVEAL
   Elements only hide once JS confirms it can reveal them again.
   ========================================================================== */
.js .reveal,.js .band{will-change:opacity,transform}

/* ==========================================================================
   23. FIX PASS — baseline bleed, contact metadata, index teaser line
   ========================================================================== */
/* outlined lines need breathing room for descenders (no clipping) */
.hero__hl--b{padding-block:.07em}
/* contact sits on green — its metadata must read light, not dark */
.contact .meta,.contact .meta--dim{color:var(--muted-inv)}
.contact__side .meta--dim{color:rgba(241,239,233,.66)}
/* index gets one editorial teaser row before the list, as a contents page should */
.idx__teaser{
  display:flex;flex-wrap:wrap;gap:.5em 2.4em;justify-content:space-between;
  padding-block:.55em .75em;border-bottom:1px solid var(--line);
}
.idx__teaser span{color:var(--muted)}

/* ==========================================================================
   24. ABOUT — editorial split: type + copy + facts stack left, portrait right
   (explicit placement removes the dead space under the display heading)
   ========================================================================== */
.about__grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(22px,2.6vw,42px);
  padding-top:clamp(20px,2.6vw,44px);
}
.about__type{grid-column:1 / span 7;grid-row:1}
.about__copy{grid-column:1 / span 6;grid-row:2}
.about__facts{grid-column:1 / span 6;grid-row:3}
.about__portrait{grid-column:8 / span 5;grid-row:1 / span 3;align-self:start}
.stats{grid-column:1 / span 12;grid-row:4;margin-top:clamp(14px,2vw,32px)}
@media (max-width:980px){
  .about__type,.about__copy,.about__facts{grid-column:1 / span 12;grid-row:auto}
  .about__portrait{grid-column:1 / span 8;grid-row:auto;margin-top:clamp(8px,2vw,16px)}
  .stats{grid-column:1 / span 12;grid-row:auto}
}

/* ==========================================================================
   25. HOVER REFINEMENT + ARTWORK VIEWER (lightbox)
   ========================================================================== */
.item__type{transition:opacity .45s var(--ease)}
.item__hover{
  background:linear-gradient(0deg,rgba(11,36,24,.97),rgba(11,36,24,.88) 58%,rgba(11,36,24,0));
}
@media (hover:hover){
  /* artwork recedes, project info takes over the lower third */
  .item:hover .item__type{opacity:.16}
  .item:hover .item__cap .cap-t{color:var(--green-3)}
}
.item__media{cursor:pointer}
/* native cursor hands over to the ring on interactive surfaces only */
@media (pointer:fine){
  html.has-cur .item__media,html.has-cur a,html.has-cur button,
  html.has-cur .club,html.has-cur .lb figure{cursor:none}
}
body[data-lb="1"] .cur{display:none}
body[data-lb="1"]{overflow:hidden}

.lb{
  position:fixed;inset:0;z-index:800;
  background:rgba(8,9,8,.985);
  -webkit-backdrop-filter:blur(18px) saturate(.9);backdrop-filter:blur(18px) saturate(.9);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(14px,2vw,30px);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.lb[data-open="true"]{opacity:1;pointer-events:auto}
.lb__bar{
  display:flex;justify-content:space-between;align-items:center;gap:1em;
  color:var(--paper);border-bottom:1px solid var(--line-inv);padding-bottom:.75em;
}
.lb__stage{display:grid;place-items:center;padding:clamp(10px,2vw,28px) 0;min-height:0}
.lb figure{display:grid;gap:.8em;justify-items:center;max-height:100%}
.lb img{
  max-height:min(74vh,100%);width:auto;max-width:100%;
  border:1px solid rgba(241,239,233,.16);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0;transform:scale(.985);
  transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}
.lb[data-open="true"] img{opacity:1;transform:none}
.lb__meta{
  display:flex;flex-wrap:wrap;gap:.4em 1.6em;justify-content:center;
  color:var(--muted-inv);text-align:center;
}
.lb__meta b{color:var(--paper);font-weight:500}
.lb__nav{display:flex;align-items:center;gap:.6em}
.lb__btn{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-inv-2);padding:.75em 1em;color:var(--paper);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.lb__btn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.lb__btn[disabled]{opacity:.32;pointer-events:none}
.lb__foot{
  border-top:1px solid var(--line-inv);padding-top:.75em;
  display:flex;flex-wrap:wrap;gap:.6em 1.6em;justify-content:space-between;
  color:var(--muted-inv);
}
@media (max-width:720px){
  .lb img{max-height:62vh}
  .lb__nav{width:100%;justify-content:space-between}
}
/* viewer polish: hairline separation, plate counter weight */
.lb__stage{position:relative}
.lb__stage::before,.lb__stage::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--line-inv);
}
.lb__stage::before{top:0}
.lb__stage::after{bottom:0}
.lb__meta b{font-family:var(--f-semi);letter-spacing:.12em;text-transform:uppercase}

/* ==========================================================================
   26. HERO COMPOSITION — facts clear of the poster stack
   (facts live under the copy in the left half; the artwork owns the right)
   ========================================================================== */
.hero__under{align-items:start}
.hero__copy{grid-column:1 / span 5;align-self:end}
.hero__facts{grid-column:1 / span 6;justify-content:flex-start;
  margin-top:clamp(18px,2.2vw,34px);gap:1.5em clamp(24px,3.4vw,64px)}
.hero__fact b{font-size:clamp(13px,1vw,15px);line-height:1.35}
.rail-hide{display:inline}
@media (max-width:1180px){
  .hero__facts{grid-column:1 / span 7}
}
@media (max-width:980px){
  .hero__copy{grid-column:1 / span 6;align-self:start}
  .hero__facts{grid-column:1 / span 6;margin-top:0}
}
@media (max-width:720px){
  .rail-hide{display:none}
}
/* dead rule cleanup: the ledger was replaced by the metadata rail */
.stack__ledger{display:none}

/* keyboard focus on plates reads like the hover state */
.item__media:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.item__media:focus-visible ~ .item__hover,
.item__media:focus-visible + .item__hover{transform:translateY(0)}
@media (hover:none){.item__hover{display:none}}   /* touch: captions carry the info */

/* ==========================================================================
   27. OVERLAY CORRECTIONS
   The compact-nav rule hides the nav CTA on small screens — it must never
   reach the overlay's own controls, and the brand mark inverts on dark.
   ========================================================================== */
.menu .nav__cta{display:inline-flex;border-color:var(--line-inv-2)}
.menu .brand span{color:var(--accent)}
.menu .brand b{color:var(--paper)}

/* ==========================================================================
   28. SERVICE ROWS — touch reliability
   ========================================================================== */
.svc__btn{
  touch-action:manipulation;          /* no 300ms delay, no double-tap zoom  */
  -webkit-tap-highlight-color:transparent;
  min-height:56px;                    /* comfortable tap target on phones    */
  cursor:pointer;
}
.svc__panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .4s var(--ease);
  opacity:.999}
.svc__row.is-open .svc__panel{opacity:1}
@media (hover:none){
  /* on touch there is no hover state to lean on — the tap is the only signal */
  .svc__row:hover .svc__name,.svc__row.is-open .svc__name{transform:translateX(clamp(4px,1vw,14px))}
  .svc__row.is-open .svc__mark{transform:rotate(45deg);color:var(--green-3)}
  .svc__btn:hover{background:none}
  .svc__row.is-open .svc__btn{background:linear-gradient(90deg,rgba(205,249,63,.14),rgba(205,249,63,0) 42%)}
}
@media (max-width:720px){
  .svc__panel > p{font-size:15px;line-height:1.62}
}

/* ==========================================================================
   29. PRICING — two plans: fixed monthly rate + custom quote
   Appended last so the paper plan card can re-invert its metadata to dark.
   ========================================================================== */
.price__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:1.4em;align-items:end;
  padding-top:clamp(16px,2vw,30px)}
.price__title{grid-column:1 / span 6}
.price__note{grid-column:8 / span 5}

.plans{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gcol);row-gap:clamp(22px,3vw,40px);align-items:start;
  margin-top:clamp(36px,4.6vw,76px)}
.plan{display:grid;gap:clamp(18px,2.4vw,30px);align-content:start;
  padding:clamp(20px,2.6vw,42px);border:1px solid var(--line-inv-2)}
.plan--a{grid-column:1 / span 6;background:var(--paper);color:var(--ink);
  border-color:var(--paper)}
.plan--b{grid-column:8 / span 5;margin-top:clamp(20px,6vw,84px)}

.plan__top{display:flex;justify-content:space-between;align-items:center;
  gap:1em;flex-wrap:wrap}
.plan__flag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;background:var(--accent);color:var(--ink);
  padding:.6em .85em;white-space:nowrap}

.plan__name{margin-top:.05em}

.plan__price{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px);
  flex-wrap:wrap;border-top:1px solid var(--line-inv-2);
  padding-top:clamp(14px,1.8vw,24px)}
.plan--a .plan__price{border-color:var(--line-2)}
.plan__price b{font-family:var(--f-disp);font-weight:400;line-height:.86;
  font-size:clamp(3rem,5.4vw,4.9rem);letter-spacing:-.01em}
.plan__ghost{color:transparent;-webkit-text-stroke:1px rgba(241,239,233,.55);
  font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:.9}

.plan__list{display:grid;border-top:1px solid var(--line-inv-2)}
.plan--a .plan__list{border-color:var(--line-2)}
.plan__list li{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(10px,1.6vw,26px);align-items:baseline;padding-block:.72em;
  border-bottom:1px solid var(--line-inv-2)}
.plan--a .plan__list li{border-color:var(--line)}
.plan__list--plain li{grid-template-columns:1fr;gap:.6em}
.plan__list--plain li::before{content:"";width:6px;height:6px;
  background:var(--accent);transform:rotate(45deg);translate:0 1px}
.plan__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  color:var(--accent)}
.plan--a .plan__n{color:var(--green-3)}
.plan__n--xl{font-family:var(--f-disp);font-size:clamp(1.5rem,2.4vw,2.2rem);
  line-height:1}
.plan--a .plan__n--xl{color:var(--ink)}
.plan__t{font-family:var(--f-semi);text-transform:uppercase;
  letter-spacing:.075em;font-weight:500;font-size:clamp(11.5px,.95vw,14px);
  line-height:1.3}

.plan__copy{font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.62;
  color:rgba(241,239,233,.78);max-width:52ch}

.plan__cta{display:grid;gap:.9em;align-content:end;
  border-top:1px solid var(--line-inv-2);padding-top:clamp(14px,1.8vw,24px)}
.plan--a .plan__cta{border-color:var(--line-2)}

/* re-invert metadata inside the paper plan card (wins over .sec--dark rules
   above — this block is appended last on purpose) */
.plan--a .meta--dim{color:var(--muted)}
.plan--a .meta{color:var(--ink)}

.price__foot{display:flex;flex-wrap:wrap;gap:.8em 2em;
  justify-content:space-between;margin-top:clamp(30px,3.6vw,54px);
  border-top:1px solid var(--line-inv);padding-top:1em}

/* pricing — responsive */
@media (max-width:1180px){
  .price__title{grid-column:1 / span 12}
  .price__note{grid-column:1 / span 12}
  .plan--a{grid-column:1 / span 6}
  .plan--b{grid-column:7 / span 6;margin-top:clamp(18px,4vw,54px)}
}
@media (max-width:980px){
  .plan--a,.plan--b{grid-column:1 / span 12;margin-top:0}
  .plan--b{margin-top:0}
}
@media (max-width:720px){
  .plan{padding:clamp(18px,4.5vw,26px)}
  .price__foot{flex-direction:column;align-items:flex-start;gap:.55em}
}

/* ── icons ─────────────────────────────────────────────────────────────────
   Every arrow, cross and handle on the site is drawn, never typed: on a lot
   of phones ↗ ✕ ↑ ↔ are picked up by the emoji font and come out as little
   blue illustrations. These inherit currentColor, so they follow the button.
   -------------------------------------------------------------------------- */
.ic{
  display:inline-block;width:.74em;height:.74em;
  vertical-align:-.06em;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  flex:0 0 auto;pointer-events:none;
}
.ic path{vector-effect:non-scaling-stroke}
.menu .brand img{-webkit-filter:brightness(0) invert(1)!important;filter:brightness(0) invert(1)!important}