/* ==========================================================================
   AMERICAN BALLET AWARDS — shared design system
   --------------------------------------------------------------------------
   Palette is LOCKED to the brand board: red velvet, antique gold, cream,
   charcoal, stone — plus darker shades of the brand red. Nothing else.
   Type is LOCKED to Playfair Display (display) + Montserrat (text).
   See _project/docs/01-brand.md.
   ========================================================================== */

:root{
  /* ---- brand ---------------------------------------------------------- */
  /* TWO-TONE, on client instruction: "most red velvet and black color".
     The velvet steps are all unmistakably RED — this scale used to bottom out
     at #2E0B0D / #1F0708 / #150405, which read as an indeterminate near-black
     and drew the complaint that sections looked black instead of velvet. Black
     is now its own token and its own deliberate ground, so the page ALTERNATES
     red velvet and black rather than muddling the two together. */
  /* Every value here is either CLEARLY RED or BLACK. There is deliberately
     nothing in between: measured off a full-page raster, a saturated red stops
     reading as red below roughly 25% peak luminance and starts reading as
     BROWN, which is what the client kept (correctly) objecting to. The old
     #3F1114 / #2A0C0E pair sat right in that band. Peak luminance is noted for
     each one so the next person can stay out of it. */
  --velvet:#7A1E22;          /* brand red velvet — LOCKED   48% */
  --velvet-mid:#6B1B1F;      /* mid velvet                  42% */
  --velvet-dark:#5A181B;     /* deep velvet                 35% */
  --velvet-black:#120A0C;    /* reads black — type on gold   7% */
  --velvet-ink:#0A0506;      /* curtain folds only           4% */
  /* Not pure #000: a black carrying the faintest velvet cast sits WITH the red
     rather than punching a hole in the page, and keeps large flat areas from
     looking like a rendering failure on an OLED screen. */
  --black:#0B0709;           /* BLACK ground — half the scheme */
  --gold:#B99A5B;            /* antique gold       */
  --gold-lt:#D8BE86;         /* foil highlight     */
  --gold-dk:#7A6236;         /* foil lowlight      */
  --cream:#F6F0E5;
  --charcoal:#2E2E2E;        /* type on cream only */
  --stone:#D8CEC4;

  /* ---- derived surfaces (alpha over velvet, never new hues) ----------- */
  --line:rgba(185,154,91,.26);
  --line-strong:rgba(185,154,91,.5);
  --line-quiet:rgba(216,206,196,.14);
  --ink-05:rgba(24,9,11,.05);
  /* Solid brand red, not a translucent red over black. The old washes
     composited to a family of darker reds (#571619, #2F0D10 …) which is
     exactly what the client asked to remove. The hover token is GOLD, because
     a second red is not available to differentiate a hover any more. */
  --panel:var(--velvet);
  --panel-hi:linear-gradient(168deg,rgba(216,190,134,.15) 0%,rgba(216,190,134,.04) 60%,rgba(216,190,134,0) 100%);

  /* ---- type ------------------------------------------------------------ */
  --pf:"Playfair Display",Georgia,"Times New Roman",serif;
  --ms:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ---- rhythm ---------------------------------------------------------- */
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --shell:min(1400px,100% - 2 * var(--gutter));
  --pad-y:clamp(4.5rem,11vh,9rem);
  --nav-h:clamp(62px,7.4vh,84px);

  --ease:cubic-bezier(.22,.8,.3,1);
  --ease-soft:cubic-bezier(.4,.14,.3,1);

  /* ---- corner radii ---------------------------------------------------
     A luxury brand wants a *restrained* curve: enough to soften the box, never
     enough to read as a friendly app. Small elements take a tighter radius than
     large panels, because a single radius across both sizes looks wrong on one
     of them. Grouped hairline grids (.crit, .partners, .deadlines) are rounded
     on the CONTAINER only, so the 1px dividers inside stay straight. */
  --r-xs:4px;                            /* tags, tiers, chips */
  --r-sm:6px;                            /* buttons */
  --r-md:clamp(8px,.55vw,11px);          /* cards, people, partners, table */
  --r-lg:clamp(11px,.8vw,16px);          /* large panels: divisions, awards, art */
  --r-pill:999px;

  /* ---- the logo, as CSS masks (see assets.py → LOGO STRATEGY) ---------- */
  --curtain:url("../img/curtain-tile.jpg");
  --mono:url("../img/aba-monogram-gold.png");
  --lockup:url("../img/aba-lockup-gold.png");
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 1rem);
}

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--ms);
  font-weight:300;
  font-size:clamp(.9rem,.36vw + .82rem,1.02rem);
  line-height:1.75;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* `overflow-x:hidden` here would turn <body> into a scroll container and break
     `position:sticky` for the pinned slider. `clip` suppresses the same stray
     horizontal overflow WITHOUT creating a scrollport. The `hidden` line is the
     fallback for engines without `clip`; `clip` wins wherever it is supported. */
  overflow-x:hidden;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;}

img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-weight:400;}
p{margin:0;}
table{border-collapse:collapse;width:100%;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;}
::selection{background:var(--gold);color:var(--velvet-black);}

/* thin brand scrollbar */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:var(--velvet-black);}
  ::-webkit-scrollbar-thumb{background:var(--gold-dk);border:3px solid var(--velvet-black);border-radius:99px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold);}
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.shell{width:var(--shell);margin-inline:auto;}
.shell--narrow{max-width:820px;}
.shell--mid{max-width:1080px;}

section{position:relative;padding-block:var(--pad-y);}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* The skip link. `.sr` alone is not enough here: any button styling brings a
   min-height and padding that defeat the 1px clip, so the collapsed state is
   forced and the visible state is declared from scratch. */
.skip{
  position:absolute;left:-9999px;top:0;
  width:1px;height:1px;min-height:0;padding:0;overflow:hidden;
}
.skip:focus{
  position:fixed;left:.7rem;top:.7rem;z-index:130;
  width:auto;height:auto;min-height:44px;padding:.7rem 1.3rem;overflow:visible;
  display:inline-flex;align-items:center;
  background:var(--gold);color:var(--velvet-black);
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}

/* ---- section grounds ---------------------------------------------------- */
/* RED VELVET - flat, exactly the brand red. Client instruction: "for red
   velvet use this color #7a1e22". It used to be a gradient running down from
   #7A1E22 to --velvet-mid, which rendered at #731d21: close, but not the
   colour that was asked for. No gold radial either - that lifted the top of
   the section off the value as well. */
.s-velvet{background:var(--velvet);}
/* Deep RED velvet — the darker of the two velvet grounds. The radial lifts the
   foot of the section toward the brand red so it never flattens into the black
   section below it. */
/* .s-deep is now the SAME red velvet. It is kept as a separate class only so
   the markup does not have to change; there is deliberately no third ground.
   It has been, in turn, a near-black brown (#360f11 - rejected), then a deep
   velvet (#631a1d), and is now the brand red itself. The page's rhythm comes
   from alternating velvet against BLACK, not from two shades of velvet. */
.s-deep{background:var(--velvet);}
/* BLACK — the other half of the scheme.
   ⚠️ THIS MUST STAY A FLAT COLOUR. `#beyond` is an .s-dark section and it holds
   the rendered product shot, which is a JPEG whose ground is colour-locked to
   exactly this value so its rectangle dissolves into the page (see
   05-assets.md). A gradient here — even a very faint one — varies across the
   section while the JPEG's ground cannot, and the frame edge becomes visible.
   A gradient was tried here and removed for exactly that reason. The seam with
   the velvet section above is carried by the 1px gold hairline below instead. */
.s-dark{background:var(--black);}

/* Bright velvet needs brighter type than the dark grounds do — --stone washes out
   against #7A1E22. */
.s-velvet .body,
.s-velvet .lede{color:rgba(246,240,229,.9);}
.s-velvet .card p,
.s-velvet .stop__note{color:rgba(246,240,229,.88);}

.s-cream{background:var(--cream);color:var(--charcoal);}
.s-cream .h2,.s-cream h3{color:var(--charcoal);}
.s-cream .body,.s-cream .lede{color:rgba(46,46,46,.78);}
.s-cream .eyebrow{color:var(--gold-dk);}

/* ---- type on the BRIGHT velvet ground ----------------------------------- */
/* The panels below are #7A1E22 themselves, and several of them sit inside a
   BLACK section - so the `.s-velvet …` selectors further down never reach
   them. They need the same treatment: on this ground --gold manages only
   3.85:1, so gold TYPE steps up to --gold-lt and muted stone loses its alpha.
   Rules and borders keep --gold; they are not text. */
.drawer :is(.drawer__tag,.drawer__links i),
.card :is(.eyebrow,.card__meta,.tag,.tag--flat),
.award :is(.eyebrow,.award__foot .tag,.tag,.tag--flat),
.crit li span,
.partner .partner__kind{color:var(--gold-lt);}
.card p,.award p,.partner .partner__note,
.card__meta,.tbl td{color:var(--stone);}

/* #7A1E22 is a light-ish ground (48% peak luminance). --gold only reaches
   3.85:1 against it, below WCAG AA for anything under 24px, so gold TYPE steps
   up to --gold-lt (5.8:1) here. Gold rules, borders and hairlines keep --gold:
   they are not text and 3:1 is ample. Verified with a contrast audit that
   composites each element's real ancestor background - see 01-brand.md. */
.s-velvet :is(.eyebrow,.sig,.tlink,.div__tier,.div__tag,.tag--flat,
              .stopc__date,.stopc__state,.faq__n),
.s-deep :is(.eyebrow,.sig,.tlink,.div__tier,.div__tag,.tag--flat,
            .stopc__date,.stopc__state,.faq__n),
.s-velvet .div__list dt,.s-deep .div__list dt,
.s-velvet .stopc__ord span,.s-deep .stopc__ord span,
.s-velvet .dateline,.s-deep .dateline{color:var(--gold-lt);}

/* Muted stone type has no alpha headroom left on this ground either. */
.s-velvet :is(.frame__cap,.tag,.tag--wait,.tag--open,.tag--closing),
.s-deep :is(.frame__cap,.tag,.tag--wait,.tag--open,.tag--closing),
.s-velvet .stats span,.s-deep .stats span,
.s-velvet .stopc__venue,.s-deep .stopc__venue{color:var(--stone);}

/* hairline dividers between stacked sections */
.s-velvet + .s-deep,.s-deep + .s-velvet,
.s-dark + .s-velvet,.s-velvet + .s-dark,
.s-dark + .s-deep,.s-deep + .s-dark{border-top:1px solid rgba(185,154,91,.18);}

/* ==========================================================================
   TYPE COMPONENTS
   ========================================================================== */
.eyebrow{
  display:block;margin:0 0 clamp(1rem,2.4vh,1.6rem);
  font-size:clamp(.66rem,.2vw + .6rem,.72rem);
  font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow--c{text-align:center;}
.eyebrow--rule{display:flex;align-items:center;gap:1rem;}
.eyebrow--rule::after{content:"";flex:1;height:1px;background:var(--line);}
.eyebrow--rule.eyebrow--c{justify-content:center;}
.eyebrow--rule.eyebrow--c::before{content:"";flex:1;height:1px;background:var(--line);}

.h1{
  font-family:var(--pf);font-weight:400;
  font-size:clamp(2.35rem,6.1vw,5.05rem);
  line-height:1.045;letter-spacing:-.014em;
  color:var(--cream);text-wrap:balance;
}
.h2{
  font-family:var(--pf);font-weight:400;
  font-size:clamp(1.85rem,3.4vw,3.05rem);
  line-height:1.14;letter-spacing:-.008em;
  color:var(--cream);text-wrap:balance;
}
.h3{
  font-family:var(--pf);font-weight:400;
  font-size:clamp(1.22rem,1.5vw,1.62rem);
  line-height:1.24;color:var(--cream);text-wrap:balance;
}
.h4{
  font-family:var(--ms);font-weight:500;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.h2--c,.h1--c{text-align:center;}
.h2--c{margin-inline:auto;}

.body{
  font-size:1em;color:var(--cream);max-width:60ch;
}
.body + .body{margin-top:1.1em;}
.body--wide{max-width:74ch;}
.body strong{color:var(--cream);font-weight:400;}
.body em{font-style:italic;color:var(--cream);}

.lede{
  font-size:clamp(1rem,.5vw + .9rem,1.16rem);
  line-height:1.68;color:var(--cream);max-width:46ch;font-weight:300;
}
.lede--wide{max-width:64ch;}

.rule{width:80px;height:1px;background:var(--gold);margin-block:clamp(1.3rem,2.8vh,1.9rem);margin-inline:0;border:0;}
.rule--c{margin-inline:auto;}
.rule--wide{width:100%;background:var(--line);}

/* pull-quote — the brand's signature device */
.quote{margin:0;text-align:center;}
.quote p{
  font-family:var(--pf);font-weight:400;font-style:italic;
  font-size:clamp(1.6rem,3.5vw,2.9rem);line-height:1.26;
  color:var(--cream);text-wrap:balance;
}
.quote cite{
  display:block;margin-top:1.6rem;font-family:var(--ms);font-style:normal;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.quote--sm p{font-size:clamp(1.25rem,2.2vw,1.85rem);}

/* the recurring signature line */
.sig{
  font-family:var(--pf);font-style:italic;
  font-size:clamp(1rem,1.1vw,1.2rem);color:var(--gold);text-wrap:balance;
}

/* pillar list — ARTISTRY · LEADERSHIP · … */
.pillars{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1.6rem;
  font-size:clamp(.65rem,.2vw + .59rem,.72rem);
  letter-spacing:.26em;text-transform:uppercase;color:rgba(216,206,196,.8);
}
.pillars li{position:relative;}
.pillars li + li::before{
  content:"";position:absolute;left:-.88rem;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--gold);
}
.pillars--c{justify-content:center;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;overflow:hidden;isolation:isolate;
  padding:1.08rem 2.3rem;min-height:52px;
  font-family:var(--ms);font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .34s var(--ease),color .34s var(--ease),
             border-color .34s var(--ease),transform .28s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn--sm{padding:.76rem 1.5rem;min-height:42px;font-size:.64rem;letter-spacing:.2em;}
.btn--lg{padding:1.24rem 2.9rem;min-height:60px;}
.btn--block{width:100%;}

.btn--gold{background:var(--gold);color:var(--velvet-black);border-color:var(--gold);}
.btn--gold:hover,.btn--gold:focus-visible{background:var(--gold-lt);border-color:var(--gold-lt);}
/* foil sweep */
.btn--gold::after{
  content:"";position:absolute;inset:0 auto 0 -72%;width:46%;z-index:-1;
  background:linear-gradient(100deg,rgba(246,240,229,0) 0%,rgba(246,240,229,.6) 50%,rgba(246,240,229,0) 100%);
  transform:skewX(-18deg);transition:left .68s var(--ease);
}
.btn--gold:hover::after,.btn--gold:focus-visible::after{left:130%;}

.btn--ghost{border-color:rgba(216,206,196,.36);color:var(--cream);}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--gold);color:var(--gold);background:rgba(185,154,91,.07);}

.btn--velvet{background:var(--velvet);color:var(--cream);border-color:var(--velvet);}
.btn--velvet:hover,.btn--velvet:focus-visible{background:var(--velvet);border-color:var(--gold-lt);}

.btn--cream{background:var(--cream);color:var(--velvet-dark);border-color:var(--cream);}
.btn--cream:hover,.btn--cream:focus-visible{background:var(--stone);border-color:var(--stone);}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1rem;margin-top:clamp(1.6rem,3.4vh,2.3rem);}
.actions--c{justify-content:center;}

/* quiet text link with a sliding gold underline */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);padding-bottom:.32rem;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);}
.tlink svg{width:14px;height:14px;flex:none;transition:transform .42s var(--ease);}
.tlink:hover svg{transform:translateX(4px);}

/* ==========================================================================
   THE LOGO MARK
   A single greyscale PNG painted with CSS `mask` — recolour via background.
   See the LOGO STRATEGY note in _project/src/assets.py.
   ========================================================================== */
.mark{
  display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.mark--mono{
  aspect-ratio:420/229;
  -webkit-mask-image:var(--mono);mask-image:var(--mono);
}
.mark--lockup{
  aspect-ratio:760/509;
  -webkit-mask-image:var(--lockup);mask-image:var(--lockup);
}
.mark--gold{color:var(--gold);}
.mark--cream{color:var(--cream);}
.mark--velvet{color:var(--velvet);}

/* If masking is unavailable, hide the mark and show live Playfair type instead. */
.mark-fallback{display:none;}
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .mark{display:none;}
  .mark-fallback{
    display:block;font-family:var(--pf);letter-spacing:.02em;color:var(--gold);
  }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto;z-index:90;
  height:var(--nav-h);display:flex;align-items:center;
  transition:background-color .5s var(--ease),backdrop-filter .5s,border-color .5s,box-shadow .5s;
  border-bottom:1px solid transparent;
}
/* Black frosted glass at rest as well as stuck — client asked for a black /
   blurred-glass header rather than the old fade-to-transparent scrim. */
.nav{
  background:rgba(11,7,9,.62);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(185,154,91,.12);
}
.nav::before{display:none;}
.nav.is-stuck{
  background:rgba(24,9,11,.9);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(185,154,91,.22);
  box-shadow:0 18px 44px -34px rgba(0,0,0,.9);
}
.nav.is-stuck::before{opacity:0;}

.nav__inner{display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem);width:var(--shell);margin-inline:auto;}

.brand{display:flex;align-items:center;gap:.85rem;flex:none;margin-right:auto;}
.brand .mark--mono{width:clamp(64px,6vw,86px);}
/* The wordmark beside the monogram. These rules had gone missing entirely, so
   `.brand__name` was rendering as unstyled 16px body text reading "American
   BalletAwards" on EVERY page — the `<b>` needs `display:block` to make it the
   second line. Nothing flagged it because no check looked at the nav lockup;
   verify.js does now. */
.brand__name{
  display:block;
  font-size:clamp(.6rem,.15vw + .56rem,.68rem);
  font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cream);line-height:1.62;white-space:nowrap;
}
.brand__name b{
  display:block;font-weight:400;font-size:1em;letter-spacing:.28em;
  color:rgba(216,206,196,.66);
}
@media (max-width:560px){.brand__name{display:none;}}

.nav__links{display:flex;align-items:center;gap:clamp(1.1rem,2.3vw,2.3rem);}
.nav__links a{
  position:relative;display:block;padding-block:.5rem;
  font-size:.66rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,240,229,.82);transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;transition:transform .42s var(--ease);
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--cream);}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);}
.nav__links a[aria-current]{color:var(--gold);}
.nav__links a[aria-current]::after{transform:scaleX(1);}

.nav__cta{flex:none;}
.nav__burger{
  display:none;flex:none;width:44px;height:44px;margin-right:-10px;
  align-items:center;justify-content:center;color:var(--cream);
}
.nav__burger svg{width:22px;height:22px;}

/* ---- mobile drawer ------------------------------------------------------ */
.drawer{
  position:fixed;inset:0;z-index:95;display:grid;
  grid-template-rows:var(--nav-h) 1fr;
  /* Solid brand red. This was a red radial over near-black, which composited
     to yet another red variation. It is a background surface, so it takes
     #7A1E22 — and a full-bleed velvet panel dropping over the page reads like
     a curtain, which is the right gesture for this brand. */
  background:var(--velvet);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none;}
.drawer__top{display:flex;align-items:center;justify-content:flex-end;width:var(--shell);margin-inline:auto;}
.drawer__close{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px;color:var(--cream);}
.drawer__close svg{width:22px;height:22px;}
.drawer__body{
  width:var(--shell);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  padding-block:clamp(1rem,4vh,3rem);overflow-y:auto;
}
.drawer__links li{border-bottom:1px solid var(--line-quiet);}
.drawer__links a{
  display:flex;align-items:baseline;gap:1rem;padding:clamp(.9rem,2.2vh,1.35rem) 0;
  font-family:var(--pf);font-size:clamp(1.5rem,7vw,2.2rem);color:var(--cream);
  transition:color .3s var(--ease),padding-left .35s var(--ease);
}
.drawer__links a:hover,.drawer__links a[aria-current]{color:var(--gold);padding-left:.5rem;}
.drawer__links i{
  font-family:var(--ms);font-style:normal;font-size:.64rem;letter-spacing:.2em;
  color:var(--gold);flex:none;width:2.2em;
}
.drawer__foot{margin-top:clamp(1.6rem,4vh,2.6rem);display:grid;gap:1.4rem;}
.drawer__tag{
  font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(216,206,196,.72);
}

/* ==========================================================================
   CURTAIN LOADER
   ========================================================================== */
.curtain{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;pointer-events:none;
}
/* RENDERED velvet, not a repeating gradient.
   This was `repeating-linear-gradient(90deg, …)` — mathematically identical
   stripes, which the client correctly called out as not looking good: it read
   as a barcode. Nothing in real drapery is identical. The tile is rendered by
   make_curtain.py with irregular fold spacing, an off-centre highlight (light
   from the upper left), folds that swing further at the hem than at the head,
   fractal nap, pile striations and a gathered head. Every pixel of it is
   #7A1E22 scaled between full light and the site's black — no third colour.

   `auto 100%` + `repeat-x` keeps fold width constant against the curtain's
   HEIGHT however wide the viewport gets, which is how real drapery behaves;
   the tile is built to be exactly periodic so the repeat has no seam. */
.curtain__half{
  position:absolute;top:0;bottom:0;width:51%;
  background:var(--curtain) 0 0 / auto 100% repeat-x,var(--velvet);
  transition:transform 1.15s cubic-bezier(.72,.02,.28,1);
}
/* The two halves are offset so the folds do not mirror each other at the join,
   and each carries the deep overlap shadow a real pair of travellers has on
   its leading edge. */
.curtain__half--l{
  left:0;transform-origin:left;
  background-position:right 0;
  box-shadow:inset -26px 0 44px -14px rgba(11,7,9,.92),
             0 0 120px 26px rgba(11,7,9,.55) inset;
}
.curtain__half--r{
  right:0;transform-origin:right;
  background-position:left 0;
  box-shadow:inset 26px 0 44px -14px rgba(11,7,9,.92),
             0 0 120px 26px rgba(11,7,9,.55) inset;
}
.curtain__mark{
  position:relative;width:clamp(88px,13vw,134px);opacity:1;
  transition:opacity .5s ease;
}
.curtain.is-open .curtain__half--l{transform:translateX(-101%);}
.curtain.is-open .curtain__half--r{transform:translateX(101%);}
.curtain.is-open .curtain__mark{opacity:0;transition-duration:.34s;}
.curtain.is-done{display:none;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100svh,940px);
  display:grid;grid-template-rows:1fr auto;
  padding-block:calc(var(--nav-h) + clamp(2.5rem,7vh,5rem)) clamp(1.5rem,3.5vh,2.4rem);
}
.hero--short{min-height:min(84svh,780px);}

.hero__media{position:absolute;inset:0;z-index:-2;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,72% 42%);}

/* Legibility veils. Kept as velvet-tinted blacks so no new hue enters. */
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.hero__veil--l{
  background:linear-gradient(96deg,
    rgba(11,7,9,.95) 0%,rgba(11,7,9,.86) 26%,rgba(24,9,11,.55) 50%,
    rgba(24,9,11,.14) 72%,rgba(24,9,11,0) 100%);
}
.hero__veil--top{
  background:linear-gradient(180deg,rgba(11,7,9,.82) 0%,rgba(11,7,9,.1) 26%,rgba(11,7,9,0) 42%,
    rgba(11,7,9,.5) 82%,rgba(11,7,9,.92) 100%);
}
.hero__veil--warm{
  background:radial-gradient(80% 60% at 76% 30%,rgba(185,154,91,.16) 0%,rgba(185,154,91,0) 62%);
  mix-blend-mode:screen;
}

/* The hero photography puts the dancer right-of-centre, so ALL hero type is
   confined to a left column and never crosses the subject. The right column is
   deliberately left empty — that is the picture. */
.hero__body{
  width:var(--shell);margin-inline:auto;align-self:end;
  display:grid;grid-template-columns:minmax(0,min(53%,660px)) minmax(0,1fr);
  gap:clamp(1.6rem,3vw,3rem);align-items:end;
}
.hero__head{grid-column:1;}
.hero__head .eyebrow{white-space:nowrap;}
.hero__title{
  font-size:clamp(2.3rem,5.1vw,4.35rem);
  max-width:14ch;                 /* resolves at the DISPLAY size — that is the point */
}
.hero__title span{display:block;}
.hero__aside{
  grid-column:1;max-width:46ch;
  margin-top:clamp(1.6rem,3.6vh,2.6rem);
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid var(--line-quiet);
}
.hero__aside .rule{margin-block:clamp(1rem,2.2vh,1.4rem);}

.dateline{
  font-family:var(--pf);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.2;color:var(--gold);
}
.dateline small{
  display:block;margin-top:.5rem;font-family:var(--ms);
  font-size:.64rem;letter-spacing:.26em;line-height:1.95;text-transform:uppercase;color:var(--stone);
}

.hero__foot{
  width:var(--shell);margin-inline:auto;align-self:end;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:clamp(2rem,5vh,3.6rem);
  padding-top:clamp(1.1rem,2.4vh,1.6rem);border-top:1px solid var(--line-quiet);
}
.hero__scroll{
  flex:none;width:24px;height:44px;border:1px solid var(--line);border-radius:99px;
  display:grid;place-items:start center;padding-top:8px;
  transition:border-color .3s;
}
.hero__scroll:hover{border-color:var(--gold);}
.hero__scroll span{
  width:3px;height:3px;border-radius:50%;background:var(--gold);
  animation:scrolldot 1.9s var(--ease) infinite;
}
@keyframes scrolldot{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(18px);opacity:0}}

/* ---- page hero (interior pages: shorter, centred option) --------------- */
.hero--page .hero__body{grid-template-columns:minmax(0,1fr);}
.hero--page .hero__head{max-width:24ch;}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.shead{max-width:64ch;}
.shead--c{margin-inline:auto;text-align:center;}
.shead--c .body{margin-inline:auto;}
.shead__lede{margin-top:clamp(1.1rem,2.4vh,1.6rem);}
.shead--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,5rem);align-items:end;max-width:none;
}
.shead--split .h2{margin:0;}

.sbody{margin-top:clamp(2.4rem,5.5vh,4rem);}

/* ---- adjacent-sibling rhythm (headings are margin:0 by default) -------- */
.h1 + .body,.h2 + .body,.h3 + .body,
.h1 + .lede,.h2 + .lede,.h3 + .lede,
.h2 + .quote,.h2 + .checks,.h2 + .pillars{margin-top:clamp(1.1rem,2.4vh,1.6rem);}
.eyebrow + .h1,.eyebrow + .h2,.eyebrow + .h3{margin-top:0;}
.body + .sig,.lede + .sig{margin-top:clamp(1.2rem,2.6vh,1.7rem);}
.sig + .body{margin-top:clamp(1.2rem,2.6vh,1.7rem);}
.quote + .body{margin-top:clamp(1.4rem,3vh,2.1rem);}
.h3 + p{margin-top:.7rem;}

/* ==========================================================================
   PARTNERS MARQUEE
   ========================================================================== */
.marqbar{
  padding-block:clamp(1.5rem,3.2vh,2.2rem);
  background:var(--black);          /* a ground: black, never a dark brown */
  border-block:1px solid rgba(185,154,91,.18);
  overflow:hidden;
}
.marqbar__label{
  text-align:center;margin-bottom:1.15rem;
  font-size:.65rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}
.marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:clamp(2.4rem,5vw,4.6rem);width:max-content;
  animation:marq 46s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__track li{
  font-family:var(--pf);font-size:clamp(.95rem,1.2vw,1.2rem);
  letter-spacing:.05em;color:rgba(216,206,196,.6);white-space:nowrap;
  transition:color .3s;
}
.marquee__track li:hover{color:var(--gold);}
@keyframes marq{to{transform:translateX(-50%)}}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.4rem);
  margin-top:clamp(2.6rem,5.5vh,4rem);
  padding-top:clamp(1.7rem,3.6vh,2.5rem);
  border-top:1px solid var(--line);
}
.stats li{text-align:center;}
.stats strong{
  display:block;font-family:var(--pf);font-weight:400;
  font-size:clamp(1.85rem,3.4vw,3rem);line-height:1;color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.stats span{
  display:block;margin-top:.7rem;
  font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(216,206,196,.72);
}

/* ==========================================================================
   CARD GRIDS
   ========================================================================== */
.grid{display:grid;gap:clamp(1rem,1.6vw,1.4rem);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));}
.grid--wide{gap:clamp(1.5rem,3vw,2.6rem);}

/* generic velvet panel */
.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.6rem,2.2vw,2.3rem);
  border:1px solid var(--line);background:var(--panel);
  transition:border-color .42s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:var(--panel-hi);transition:opacity .5s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 30px 54px -34px rgba(11,7,9,.9);}
.card:hover::before{opacity:1;}
.card__num{
  display:block;margin-bottom:1.1rem;
  font-family:var(--pf);font-size:.98rem;color:var(--gold);letter-spacing:.06em;
}
.card .h3{margin-bottom:.7rem;}
.card p{font-size:.9rem;color:var(--cream);}
.card__meta{
  display:flex;align-items:center;gap:.55rem;margin-top:1.3rem;padding-top:1.1rem;
  border-top:1px solid var(--line-quiet);
  font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.card__meta b{font-weight:400;color:var(--cream);font-variant-numeric:tabular-nums;}

/* card with a gold ordinal in the corner */
.card--ord{padding-top:clamp(1.9rem,2.6vw,2.7rem);}
.card--ord::after{
  content:attr(data-ord);position:absolute;top:.5rem;right:1.1rem;
  font-family:var(--pf);font-size:clamp(2.6rem,4.4vw,4rem);line-height:1;
  /* The card ground went from near-black to #7A1E22, and gold at .14 alpha
     vanished into it. Raised to read on the brand red. Decorative, and
     duplicated by the visible copy, so it is not held to a text ratio. */
  color:rgba(216,190,134,.30);pointer-events:none;
}

/* ==========================================================================
   DIVISION CARDS (Premiere / Virtuoso)
   ========================================================================== */
.divs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem);}
.div{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(1.9rem,3vw,3rem);
  border:1px solid var(--line);
  /* BLACK wash, not velvet: the ground under this card is now flat #7A1E22,
     so a velvet tint composites to the same colour and the card disappears. */
  /* SOLID black, not a black wash. A wash over the #7A1E22 ground composited
     to #66191d-#6e1b1f (measured by raster) - exactly the family of red
     variations the client asked to remove. A panel on this ground has to be
     one of the two scheme colours, and #7A1E22 on #7A1E22 is invisible. */
  background:var(--black);
  transition:border-color .45s var(--ease),box-shadow .5s var(--ease);
}
.div:hover{border-color:var(--line-strong);box-shadow:0 34px 64px -40px rgba(11,7,9,.95);}
.div::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt),var(--gold),var(--gold-dk));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.div:hover::after{transform:scaleX(1);}
/* Both divisions take the same black; the Virtuoso card is distinguished by
   its gold border and tier chip, not by a second shade. */
.div--virtuoso{background:var(--black);border-color:var(--line-strong);}
.div__tier{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  padding:.4rem .8rem;margin-bottom:1.5rem;
  border:1px solid var(--line);
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.div__name{
  font-family:var(--pf);font-size:clamp(1.65rem,2.7vw,2.4rem);line-height:1.1;color:var(--cream);
}
.div__tag{
  margin-top:.85rem;font-family:var(--pf);font-style:italic;
  font-size:clamp(.98rem,1.15vw,1.14rem);color:var(--gold);
}
.div__copy{margin-top:clamp(1.3rem,2.6vh,1.9rem);font-size:.92rem;color:rgba(216,206,196,.88);}
.div__copy p + p{margin-top:.9rem;}
.div__list{margin-top:auto;padding-top:clamp(1.5rem,3vh,2.1rem);}
.div__list dt{
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line-quiet);
}
.div__list dt:first-child{margin-top:0;padding-top:0;border-top:0;}
.div__list dd{margin:.5rem 0 0;font-size:.86rem;color:rgba(216,206,196,.85);}

/* ==========================================================================
   REALISTIC PROPS — booklet, program card, medal, banners
   Built in CSS so they stay crisp at any size and cost no bytes.
   ========================================================================== */
.props{
  position:relative;display:grid;place-items:center;
  perspective:1200px;padding:clamp(1.5rem,4vw,3rem);
  min-height:min(74vw,520px);
}

/* ---- the ABA booklet (velvet hardcover, gold foil) --------------------- */
.book{
  position:relative;width:min(330px,78%);aspect-ratio:3/4.05;
  transform:rotate(-3.2deg) rotateY(9deg) rotateX(2deg);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease);
  filter:drop-shadow(0 48px 60px rgba(11,7,9,.86));
}
.props:hover .book{transform:rotate(-1.6deg) rotateY(4deg) rotateX(1deg) translateY(-6px);}

.book__cover{
  position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.7rem,1.4vw,1.05rem);padding:clamp(1.6rem,3.6vw,2.5rem);text-align:center;
  border-radius:2px 5px 5px 2px;
  /* woven velvet: crossed micro-gradients over a lit velvet field */
  background:
    radial-gradient(112% 88% at 24% 6%,rgba(246,240,229,.13) 0%,rgba(246,240,229,0) 52%),
    repeating-linear-gradient(64deg,rgba(11,7,9,.16) 0 1px,rgba(11,7,9,0) 1px 3px),
    repeating-linear-gradient(-64deg,rgba(246,240,229,.05) 0 1px,rgba(246,240,229,0) 1px 3px),
    linear-gradient(152deg,#8A2429 0%,var(--velvet) 34%,var(--velvet-mid) 76%,#3E1013 100%);
  box-shadow:
    inset 0 0 0 1px rgba(185,154,91,.32),
    inset 0 0 42px rgba(11,7,9,.5),
    inset 0 0 0 9px rgba(11,7,9,.1);
}
/* debossed gold keyline frame */
.book__cover::before{
  content:"";position:absolute;inset:clamp(11px,2.6vw,17px);
  border:1px solid rgba(185,154,91,.4);
  box-shadow:inset 0 0 0 1px rgba(11,7,9,.28);
  pointer-events:none;
}
/* spine */
.book__cover::after{
  content:"";position:absolute;inset:0 auto 0 0;width:clamp(10px,2.4vw,15px);
  background:linear-gradient(90deg,rgba(11,7,9,.72) 0%,rgba(11,7,9,.3) 46%,rgba(246,240,229,.07) 78%,rgba(11,7,9,.18) 100%);
  pointer-events:none;
}
.book .mark--lockup{width:min(70%,190px);}
.book__rule{width:clamp(36px,9%,56px);height:1px;background:rgba(185,154,91,.62);}
.book__list{
  font-size:clamp(.5rem,1.15vw,.6rem);letter-spacing:.28em;text-transform:uppercase;
  line-height:2.4;color:rgba(246,240,229,.92);
}

/* pages peeking out of the fore-edge */
.book__pages{
  position:absolute;top:2.2%;right:-7px;bottom:2.2%;width:9px;
  border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(180deg,var(--cream) 0 2px,#CFC5B4 2px 3px);
  box-shadow:inset -2px 0 4px rgba(46,46,46,.2);
  transform:translateZ(-6px);
}

/* ---- the program card (cream, foiled) --------------------------------- */
.card3d{
  position:absolute;left:-6%;bottom:6%;width:min(190px,44%);aspect-ratio:3/4;
  transform:rotate(-9deg) translateZ(52px);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease);
  filter:drop-shadow(0 30px 40px rgba(11,7,9,.7));
}
.props:hover .card3d{transform:rotate(-6.5deg) translateZ(64px) translateY(-4px);}
.card3d__face{
  position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.4rem,1.2vw,.7rem);padding:clamp(.9rem,2.6vw,1.5rem);text-align:center;
  background:
    radial-gradient(110% 80% at 22% 4%,#FFFDF7 0%,rgba(255,253,247,0) 54%),
    linear-gradient(158deg,var(--cream) 0%,#EDE5D6 58%,#DED4C2 100%);
  box-shadow:inset 0 0 0 1px rgba(46,46,46,.1);
}
.card3d__face::before{
  content:"";position:absolute;inset:7px;border:1px solid rgba(122,30,34,.24);pointer-events:none;
}
.card3d .mark--lockup{width:min(74%,116px);}
.card3d__rule{width:26px;height:1px;background:var(--velvet);}
.card3d__txt{
  font-size:clamp(.4rem,1vw,.49rem);letter-spacing:.2em;text-transform:uppercase;
  line-height:2;color:rgba(46,46,46,.74);
}
.card3d__txt b{display:block;font-weight:500;color:var(--velvet);letter-spacing:.22em;}

/* ---- the medal (gold, on a velvet ribbon) ----------------------------- */
.medal{
  position:absolute;right:-2%;bottom:-3%;width:min(148px,34%);
  transform:translateZ(96px) rotate(4deg);
  transform-style:preserve-3d;
  transition:transform .8s var(--ease);
}
.props:hover .medal{transform:translateZ(112px) rotate(1.5deg) translateY(-5px);}

.medal__ribbon{
  position:absolute;left:50%;bottom:74%;transform:translateX(-50%);
  width:36%;height:78px;
  background:
    repeating-linear-gradient(90deg,rgba(11,7,9,.2) 0 2px,rgba(11,7,9,0) 2px 5px),
    linear-gradient(96deg,#3E1013 0%,var(--velvet) 40%,#8A2429 62%,var(--velvet-mid) 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  box-shadow:0 8px 18px -10px rgba(11,7,9,.9);
}
.medal__disc{
  position:relative;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;padding:16%;
  /* struck metal: one specular sweep + a radial body + a rim */
  background:
    conic-gradient(from 218deg,
      rgba(246,240,229,.62) 0deg,rgba(185,154,91,0) 46deg,
      rgba(122,98,54,.5) 130deg,rgba(185,154,91,0) 205deg,
      rgba(246,240,229,.5) 268deg,rgba(122,98,54,.42) 330deg,rgba(246,240,229,.32) 360deg),
    radial-gradient(78% 78% at 32% 24%,#F0E4C6 0%,var(--gold-lt) 26%,var(--gold) 56%,var(--gold-dk) 88%,#5E4B29 100%);
  box-shadow:
    inset 0 0 0 3px rgba(94,75,41,.55),
    inset 0 0 0 5px rgba(216,190,134,.5),
    inset 0 -8px 16px rgba(94,75,41,.45),
    inset 0 8px 16px rgba(246,240,229,.3),
    0 26px 40px -18px rgba(11,7,9,.9);
}
/* the raised inner bezel */
.medal__disc::before{
  content:"";position:absolute;inset:9%;border-radius:50%;
  border:1px solid rgba(94,75,41,.42);
  box-shadow:inset 0 0 0 1px rgba(246,240,229,.24),inset 0 4px 10px rgba(94,75,41,.28);
  pointer-events:none;
}
/* the loop the ribbon threads through */
.medal__disc::after{
  content:"";position:absolute;left:50%;top:-9%;transform:translateX(-50%);
  width:22%;aspect-ratio:1;border-radius:50%;
  border:3px solid var(--gold-dk);
  background:radial-gradient(60% 60% at 34% 28%,var(--gold-lt),var(--gold) 60%,var(--gold-dk));
  box-shadow:0 3px 6px rgba(11,7,9,.6);
}
.medal .mark--mono{width:66%;}
.medal .mark--mono{color:#5A4526;}
.medal__cap{
  position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  width:80%;text-align:center;
  font-size:clamp(.32rem,.9vw,.4rem);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.8;color:rgba(74,58,30,.82);
}

/* ---- hanging banners (velvet, gold foil) ------------------------------ */
.banners{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1rem,2.4vw,2rem);align-items:start;
}
.banner{
  position:relative;padding:clamp(1.5rem,3vw,2.4rem) clamp(.9rem,2vw,1.4rem) clamp(2.6rem,5vw,3.6rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(.8rem,1.8vw,1.3rem);
  text-align:center;
  background:
    radial-gradient(96% 60% at 50% 0%,rgba(246,240,229,.14) 0%,rgba(246,240,229,0) 46%),
    repeating-linear-gradient(90deg,rgba(11,7,9,.2) 0 6px,rgba(11,7,9,0) 6px 15px,rgba(246,240,229,.045) 15px 19px,rgba(11,7,9,0) 19px 26px),
    linear-gradient(180deg,#8A2429 0%,var(--velvet) 22%,var(--velvet-mid) 74%,#3E1013 100%);
  box-shadow:inset 0 0 0 1px rgba(185,154,91,.3),0 34px 50px -32px rgba(11,7,9,.9);
  /* the pointed tail of a hanging banner */
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);
  transition:transform .55s var(--ease);
}
.banner:hover{transform:translateY(-5px);}
.banner__rod{
  /* A FIXED bleed, not a percentage. `-6%` of a shell-width banner reaches
     past the viewport edge on a phone, where the gutter is only ~18px. */
  position:absolute;inset:0 -8px auto -8px;height:6px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 40%,var(--gold-dk));
  box-shadow:0 3px 7px rgba(11,7,9,.7);
}
.banner .mark--mono{width:min(58%,84px);}
.banner__list{
  font-size:clamp(.46rem,1.05vw,.56rem);letter-spacing:.26em;text-transform:uppercase;
  line-height:2.3;color:rgba(246,240,229,.9);
}

/* ==========================================================================
   FEATURE BAND (photo + copy, full bleed)
   ========================================================================== */
.band{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(5rem,13vh,9.5rem);}
.band__media{position:absolute;inset:0;z-index:-2;}
.band__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 38%);}
.band__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(92deg,rgba(11,7,9,.94) 0%,rgba(11,7,9,.8) 34%,rgba(11,7,9,.5) 62%,rgba(11,7,9,.3) 100%),
    linear-gradient(180deg,rgba(11,7,9,.6) 0%,rgba(11,7,9,0) 30%,rgba(11,7,9,.55) 100%);
}
.band__veil--c{
  background:
    radial-gradient(54% 50% at 46% 46%,
      rgba(11,7,9,.90) 0%,rgba(11,7,9,.74) 52%,rgba(11,7,9,.30) 82%,rgba(11,7,9,.10) 100%),
    linear-gradient(180deg,rgba(11,7,9,.72) 0%,rgba(11,7,9,.18) 26%,
      rgba(11,7,9,.22) 62%,rgba(11,7,9,.8) 100%);
}
.band__body{position:relative;max-width:60ch;}
.band__body--c{max-width:66ch;margin-inline:auto;text-align:center;}
.band__body--c .body{margin-inline:auto;}

/* Type in the RIGHT half of the frame. `4.png` puts its corps on the left and
   goes dark on the right, and cover-fitting a 1.78 image into a 2.28 box crops
   vertically — so object-position cannot move the dancers out of the way. Put
   the type on the dark side instead of veiling the photograph into oblivion. */
.band__body--end{max-width:52ch;margin-left:auto;}
.band__veil--end{
  background:
    linear-gradient(264deg,
      rgba(11,7,9,.95) 0%,rgba(11,7,9,.86) 24%,rgba(24,9,11,.5) 50%,
      rgba(24,9,11,.14) 74%,rgba(24,9,11,0) 100%),
    linear-gradient(180deg,rgba(11,7,9,.6) 0%,rgba(11,7,9,.04) 24%,
      rgba(11,7,9,.16) 60%,rgba(11,7,9,.8) 100%);
}

/* ==========================================================================
   SPLIT (copy beside a framed photo)
   ========================================================================== */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,5.5rem);align-items:center;
}
.split--wide{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);}
.split--flip .split__art{order:-1;}
.split__body{min-width:0;}

/* gold-offset photo frame */
.frame{position:relative;}
.frame::before{
  content:"";position:absolute;inset:0;
  transform:translate(clamp(10px,1.6vw,20px),clamp(10px,1.6vw,20px));
  border:1px solid var(--line-strong);pointer-events:none;
  transition:transform .6s var(--ease);
}
.frame:hover::before{transform:translate(clamp(6px,1vw,12px),clamp(6px,1vw,12px));}
.frame img{
  position:relative;width:100%;height:100%;object-fit:cover;
  aspect-ratio:var(--ar,4/5);
  filter:saturate(.97) contrast(1.03);
}
.frame__cap{
  position:relative;margin-top:1rem;
  font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(216,206,196,.6);
}

/* ==========================================================================
   TABLES (age classifications, time limits)
   ========================================================================== */
.tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  background:var(--panel);
}
.tbl{min-width:560px;font-size:.88rem;}
.tbl caption{
  padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vw,1.7rem);text-align:left;
  font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line);
}
.tbl th,.tbl td{
  padding:clamp(.85rem,1.6vw,1.15rem) clamp(1.1rem,2.4vw,1.7rem);
  text-align:left;vertical-align:top;border-bottom:1px solid var(--line-quiet);
}
.tbl thead th{
  font-family:var(--ms);font-weight:500;font-size:.64rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl tbody th{
  font-family:var(--pf);font-weight:400;font-size:1.06rem;color:var(--cream);white-space:nowrap;
}
.tbl td{color:rgba(216,206,196,.86);}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr{transition:background-color .3s;}
.tbl tbody tr:hover{background:rgba(216,190,134,.13);}
.tbl .num{font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap;}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq{
  display:grid;gap:0;border-top:1px solid var(--line);
  max-width:none;
}
.faq--narrow{max-width:900px;margin-inline:auto;}
.faq__item{border-bottom:1px solid var(--line);}

.faq__q{
  display:flex;align-items:flex-start;gap:clamp(1rem,2.4vw,2rem);width:100%;
  padding:clamp(1.25rem,2.8vh,1.85rem) 0;text-align:left;
  transition:color .3s var(--ease);
}
.faq__q:hover{color:var(--gold);}
.faq__t{
  flex:1 1 auto;min-width:0;
  font-family:var(--pf);font-weight:400;
  font-size:clamp(1.02rem,1.3vw,1.28rem);line-height:1.36;
  color:inherit;text-wrap:pretty;
}
.faq__n{
  flex:none;padding-top:.42em;
  font-family:var(--ms);font-size:.65rem;letter-spacing:.2em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
/* the +/− sigil */
.faq__i{
  position:relative;flex:none;width:32px;height:32px;margin-top:-.1em;
  border:1px solid var(--line);border-radius:50%;
  transition:border-color .38s var(--ease),background-color .38s var(--ease),transform .5s var(--ease);
}
.faq__i::before,.faq__i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--gold);
  transition:transform .42s var(--ease),opacity .3s var(--ease);
}
.faq__i::before{width:11px;height:1px;transform:translate(-50%,-50%);}
.faq__i::after{width:1px;height:11px;transform:translate(-50%,-50%);}
.faq__q:hover .faq__i{border-color:var(--line-strong);background:rgba(185,154,91,.09);}
.faq__q[aria-expanded="true"]{color:var(--gold);}
.faq__q[aria-expanded="true"] .faq__i{border-color:var(--gold);background:rgba(185,154,91,.14);transform:rotate(180deg);}
.faq__q[aria-expanded="true"] .faq__i::after{transform:translate(-50%,-50%) scaleY(0);opacity:0;}

.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .52s var(--ease);
}
.faq__a > div{overflow:hidden;}
.faq__a[data-open="true"]{grid-template-rows:1fr;}
.faq__a p{
  font-size:.94rem;color:rgba(216,206,196,.86);max-width:78ch;
  padding-left:calc(clamp(1rem,2.4vw,2rem) + 2.2em);
  padding-bottom:clamp(1.3rem,2.8vh,1.9rem);
}
.faq__a p + p{padding-top:0;margin-top:-.7rem;}
.faq__a ul{
  padding-left:calc(clamp(1rem,2.4vw,2rem) + 2.2em);
  padding-bottom:clamp(1.3rem,2.8vh,1.9rem);
}
.faq__a li{
  position:relative;padding-left:1.1rem;font-size:.92rem;color:rgba(216,206,196,.86);
}
.faq__a li + li{margin-top:.5rem;}
.faq__a li::before{
  content:"";position:absolute;left:0;top:.72em;width:4px;height:1px;background:var(--gold);
}
/* no-JS: details/summary style fallback is not needed — content stays reachable
   because .faq__a is only visually collapsed, never display:none. */

/* ==========================================================================
   TOUR / EVENT LIST
   ========================================================================== */
.tour{display:grid;gap:0;border-top:1px solid var(--line);}
.stop{
  display:grid;
  grid-template-columns:minmax(120px,.7fr) minmax(0,1.5fr) minmax(0,1.1fr) auto;
  gap:clamp(1rem,2.6vw,2.4rem);align-items:center;
  padding:clamp(1.4rem,3vh,2.05rem) 0;
  border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease),padding-left .4s var(--ease);
}
.stop:hover{background:linear-gradient(90deg,rgba(216,190,134,.15),rgba(216,190,134,0));padding-left:clamp(.6rem,1.4vw,1.2rem);}
.stop__date{
  font-family:var(--pf);font-size:clamp(1.02rem,1.3vw,1.28rem);color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.stop__date small{
  display:block;font-family:var(--ms);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(216,206,196,.6);margin-top:.34rem;
}
.stop__city{font-family:var(--pf);font-size:clamp(1.2rem,1.7vw,1.62rem);color:var(--cream);}
.stop__venue{
  display:block;margin-top:.36rem;font-family:var(--ms);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(216,206,196,.66);
}
.stop__note{font-size:.84rem;color:var(--cream);}
.stop__cta{justify-self:end;}

.tag{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.34rem .68rem;border:1px solid var(--line);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);white-space:nowrap;
}
.tag::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;}
.tag--open{color:var(--gold-lt);border-color:rgba(216,190,134,.5);}
.tag--closing{color:var(--cream);border-color:rgba(246,240,229,.4);}
.tag--wait{color:rgba(216,206,196,.66);border-color:var(--line-quiet);}
.tag--flat::before{display:none;}

/* ==========================================================================
   SCROLL-PINNED SLIDER  (.pin)
   --------------------------------------------------------------------------
   The section is made TALL — viewport height plus the horizontal distance the
   track has to travel — and its inner wrapper is `position:sticky`. As the page
   scrolls, JS maps vertical progress through the section onto a translateX on
   the track. So the page never fights the user: scrolling down slides the cards,
   and once the last card lands the section simply ends and the next one arrives.
   Scrolling back up reverses it exactly, because it is all native scroll
   position — there is no scroll hijacking and no wheel interception.

   `app.js` → pinslide() owns the height and the transform. Below 1024px, on
   coarse pointers, and under reduced-motion it degrades to a normal swipeable
   scroller with snap (see the media query below).
   ========================================================================== */
.pin{padding-block:0;}
.pin__sticky{
  position:sticky;top:0;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.6rem,4vh,2.6rem);
  overflow:hidden;
  padding-block:clamp(4rem,9vh,6.5rem);
}
.pin__viewport{overflow:hidden;}
.pin__track{
  display:flex;gap:clamp(1rem,1.8vw,1.5rem);
  width:max-content;
  /* line the first card up with the shell, and let the last one run to the edge */
  padding-inline:calc((100vw - var(--shell)) / 2);
  will-change:transform;
}
.pin__track > *{flex:0 0 clamp(258px,21vw,320px);}
.pin__track:focus-visible{outline-offset:6px;}

/* the "keep scrolling" affordance + progress rail */
.pin__hint{
  display:flex;align-items:center;gap:.7rem;flex:none;
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(246,240,229,.78);white-space:nowrap;
}
.pin__hint svg{width:13px;height:13px;animation:pinnudge 2s var(--ease) infinite;}
@keyframes pinnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

.pin__rail{
  position:relative;height:1px;background:rgba(246,240,229,.22);flex:none;
  margin-top:clamp(.4rem,1.2vh,1rem);
}
.pin__rail::after{
  content:"";position:absolute;inset:-1px auto -1px 0;
  width:100%;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:left;
}

/* ---- fallback: a plain swipeable scroller ---------------------------------
   Pinning a section to the viewport is wrong on a phone (it eats the whole
   screen and fights momentum scrolling), so touch and short viewports get the
   ordinary thing instead. `height` is cleared by JS in the same conditions. */
@media (max-width:1024px), (pointer:coarse), (prefers-reduced-motion:reduce){
  .pin{padding-block:var(--pad-y);height:auto !important;}
  .pin__sticky{position:static;min-height:0;overflow:visible;padding-block:0;}
  .pin__viewport{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    padding-bottom:1.1rem;
  }
  .pin__track{
    transform:none !important;
    padding-inline:var(--gutter);
  }
  .pin__track > *{flex:0 0 min(310px,78vw);scroll-snap-align:start;}
  .pin__rail,
  .pin__hint{display:none;}
}

/* ==========================================================================
   PEOPLE (artistic director + adjudicator boxes)
   ========================================================================== */
.lead{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5.5vw,5rem);align-items:center;
}
.lead__name{font-family:var(--pf);font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.1;color:var(--cream);}
.lead__role{
  margin-top:.9rem;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lt);
}
.lead__sig{
  margin-top:clamp(1.6rem,3.4vh,2.4rem);padding-top:clamp(1.2rem,2.6vh,1.7rem);
  border-top:1px solid var(--line);
  font-family:var(--pf);font-style:italic;font-size:1.06rem;color:var(--gold);
}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));gap:clamp(1rem,1.8vw,1.5rem);}
.person{
  display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--panel);
  transition:border-color .42s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.person:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 28px 50px -34px rgba(11,7,9,.9);}
.person__pic{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--velvet-black);}
.person__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.person:hover .person__pic img{transform:scale(1.045);}
.person__pic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,7,9,0) 40%,rgba(11,7,9,.7) 100%);
}
/* monogram-on-velvet tile used where no photograph exists */
.person__pic--mark{display:grid;place-items:center;
  background:var(--velvet);
}
.person__pic--mark::after{display:none;}
.person__pic--mark .mark--mono{width:46%;opacity:.44;}
.person__body{padding:clamp(1.15rem,2vw,1.6rem);display:flex;flex-direction:column;flex:1;}
.person__name{font-family:var(--pf);font-size:1.16rem;line-height:1.24;color:var(--cream);}
.person__role{
  margin-top:.5rem;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  line-height:1.9;
}
.person__bio{
  margin-top:.95rem;padding-top:.95rem;border-top:1px solid var(--line-quiet);
  font-size:.83rem;line-height:1.72;color:rgba(216,206,196,.84);
}

/* ==========================================================================
   CHECKLIST / STEPS
   ========================================================================== */
.checks{display:grid;gap:.9rem;}
.checks li{
  position:relative;padding-left:2.1rem;font-size:.94rem;color:rgba(216,206,196,.88);
}
.checks li strong{color:var(--cream);font-weight:400;}
.checks li::before{
  content:"";position:absolute;left:0;top:.44em;width:12px;height:7px;
  border-left:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(-45deg);
}
.checks--x li::before{
  width:11px;height:11px;top:.5em;transform:none;border:0;
  background:
    linear-gradient(45deg,transparent 44%,rgba(216,206,196,.6) 44% 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,rgba(216,206,196,.6) 44% 56%,transparent 56%);
}

.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line);}
.step{
  counter-increment:s;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(1.5rem,3.2vh,2.2rem) 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--pf);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;
  color:rgba(185,154,91,.5);
}
.step .h3{margin-bottom:.55rem;}
.step p{font-size:.92rem;color:rgba(216,206,196,.86);max-width:62ch;}

/* ==========================================================================
   PRINCIPLE / CRITERIA ROW
   ========================================================================== */
.crit{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,142px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.crit li{
  padding:clamp(1.3rem,2.6vw,2rem) clamp(.8rem,1.6vw,1.2rem);
  background:var(--velvet);
  text-align:center;transition:background-color .4s var(--ease);
}
.crit li:hover{background-image:linear-gradient(170deg,rgba(216,190,134,.17),rgba(216,190,134,0));}
.crit b{
  display:block;font-family:var(--pf);font-weight:400;font-size:clamp(.95rem,1.2vw,1.16rem);
  color:var(--cream);
}
.crit span{
  display:block;margin-top:.6rem;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
}

/* ==========================================================================
   PANEL LIST (opportunities / features)
   ========================================================================== */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(1.4rem,3vw,2.6rem);}
.feat__item{position:relative;padding-top:clamp(1.5rem,3vh,2.1rem);border-top:1px solid var(--gold);}
.feat__item .h3{margin-bottom:.8rem;}
.feat__item p{font-size:.92rem;color:rgba(216,206,196,.86);}
.feat__k{
  position:absolute;top:clamp(1.5rem,3vh,2.1rem);right:0;
  font-family:var(--pf);font-size:.95rem;color:rgba(185,154,91,.92);
}

/* award / scholarship card */
.award{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.7rem,2.6vw,2.5rem);
  border:1px solid var(--line);
  background:var(--velvet);
  transition:border-color .42s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.award:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:0 30px 54px -34px rgba(11,7,9,.9);}
/* `.award .award__val`, not `.award__val`: the value IS a <p>, so the plain
   class selector (0,1,0) loses to `.award p` (0,1,1) below and the number
   rendered at body size. A latent bug — this component was written for the
   parked pages and had never been on screen. */
.award .award__val{
  font-family:var(--pf);font-size:clamp(1.85rem,3vw,2.5rem);line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.award .award__val small{
  display:block;margin-top:.6rem;font-family:var(--ms);font-size:.64rem;
  /* full --stone: the card ground is #7A1E22 now, and .7 alpha fell to 3.99:1 */
  letter-spacing:.22em;text-transform:uppercase;color:var(--stone);
}
.award .h3{margin:clamp(1.1rem,2.4vh,1.6rem) 0 .7rem;}
.award p{font-size:.88rem;color:rgba(216,206,196,.86);}
.award__foot{
  margin-top:auto;padding-top:1.3rem;
  display:flex;flex-wrap:wrap;gap:.5rem;
}

/* partner tile */
/* Dividers are drawn by each TILE (right + bottom border), never by the grid's own background
   showing through a 1px gap: with auto-fit, 8 tiles in 6 columns left four empty cells that
   painted that translucent line colour as a brown block. Column counts divide 8 evenly, and
   an unfilled cell now has nothing to paint either way. */
.partners{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
@media (max-width:900px){.partners{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:420px){.partners{grid-template-columns:minmax(0,1fr);}}
.partner{
  display:flex;flex-direction:column;justify-content:space-between;gap:1.3rem;
  min-height:170px;padding:clamp(1.3rem,2.4vw,1.9rem);
  background:var(--velvet);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color .42s var(--ease);
}
.partner:hover{background-image:linear-gradient(170deg,rgba(216,190,134,.17),rgba(216,190,134,0));}
.partner__name{font-family:var(--pf);font-size:clamp(1.04rem,1.3vw,1.24rem);line-height:1.26;color:var(--cream);}
.partner__kind{
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);line-height:1.9;
}
.partner__note{font-size:.79rem;color:rgba(216,206,196,.74);line-height:1.65;}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4.5rem,12vh,8rem);text-align:center;
}
.cta__body{position:relative;max-width:62ch;margin-inline:auto;}
.cta .mark--mono{width:clamp(64px,7vw,92px);margin-inline:auto;margin-bottom:clamp(1.6rem,3.4vh,2.4rem);}
.cta .h2{margin-inline:auto;}
.cta .body{margin-inline:auto;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  padding-block:clamp(3.4rem,8vh,5.6rem) clamp(1.6rem,3.4vh,2.4rem);
  background:var(--black);          /* a ground: black, never a dark brown */
  border-top:1px solid rgba(185,154,91,.24);
}
.foot__top{
  display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.9fr));
  gap:clamp(2rem,4vw,3.4rem);
}
.foot__brand .mark--lockup{width:clamp(150px,15vw,208px);}
.foot__tag{
  margin-top:clamp(1.3rem,2.6vh,1.9rem);
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);
}
.foot__blurb{margin-top:1.2rem;font-size:.84rem;color:rgba(216,206,196,.7);max-width:34ch;}
.foot__h{
  margin-bottom:1.3rem;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.foot__list li + li{margin-top:.72rem;}
.foot__list a,.foot__list span{
  font-size:.82rem;color:rgba(216,206,196,.76);transition:color .3s var(--ease);
}
.foot__list a:hover,.foot__list a:focus-visible{color:var(--gold);}
.foot__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  margin-top:clamp(2.6rem,5.5vh,4rem);padding-top:clamp(1.3rem,2.8vh,1.9rem);
  border-top:1px solid var(--line-quiet);
  font-size:.66rem;letter-spacing:.14em;color:rgba(216,206,196,.72);
}
.foot__bottom nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;}
.foot__bottom a:hover{color:var(--gold);}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.rv{opacity:0;transform:translateY(22px);}
.js .rv{
  transition:opacity .95s var(--ease-soft) var(--d,0s),transform .95s var(--ease-soft) var(--d,0s);
}
.rv.is-in{opacity:1;transform:none;}
html:not(.js) .rv{opacity:1;transform:none;}

.hrv{opacity:0;transform:translateY(26px);}
.js .hrv{animation:hrv 1.15s var(--ease-soft) forwards var(--d,0s);}
html:not(.js) .hrv{opacity:1;transform:none;}
@keyframes hrv{to{opacity:1;transform:none}}

/* ==========================================================================
   RESPONSIVE
   Breakpoints: 1180 · 1024 · 900 · 760 · 620 · 460 · 380
   ========================================================================== */
@media (max-width:1180px){
  .foot__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}
  .foot__brand{grid-column:1 / -1;}
  .stop{grid-template-columns:minmax(110px,.75fr) minmax(0,1.4fr) auto;}
  .stop__note{grid-column:2 / -1;grid-row:2;}
}

@media (max-width:1024px){
  :root{--pad-y:clamp(3.8rem,9vh,6rem);}
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:flex;}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Narrow screens have no empty column to put type in, so the hero becomes a
     photograph on top and type on near-solid velvet below. The scrim — not the
     photograph — carries the contrast, so every line stays legible. */
  .hero__body{grid-template-columns:minmax(0,1fr);gap:0;align-items:start;}
  .hero__head{grid-column:1;}
  .hero__title{font-size:clamp(2.1rem,9.2vw,3rem);max-width:15ch;}
  .hero__aside{grid-column:1;max-width:52ch;}
  /* A phone-shaped hero box crops the 1.78 photograph HORIZONTALLY and very
     hard — a 390px slice out of a 1502px render. `--pos-sm` therefore has to
     be aimed at the dancer herself (84%), not at the composition: at the
     desktop value she fell outside the slice entirely and the hero showed an
     arm and a length of tutu. `--pos` (the desktop value) is aimed at the
     opposite problem — see the hero note in motion.css. */
  .hero__media img{object-position:var(--pos-sm,84% 50%);}
  .hero__veil--l{
    background:linear-gradient(180deg,
      rgba(11,7,9,.35) 0%,
      rgba(11,7,9,.18) 20%,
      rgba(24,9,11,.72) 40%,
      rgba(47,13,16,.94) 52%,
      var(--velvet) 62%,
      var(--velvet) 100%);
  }
  .hero__veil--top{
    background:linear-gradient(180deg,rgba(11,7,9,.8) 0%,rgba(11,7,9,.2) 18%,rgba(11,7,9,0) 34%);
  }
  .hero__veil--warm{
    background:radial-gradient(70% 34% at 66% 18%,rgba(185,154,91,.2) 0%,rgba(185,154,91,0) 70%);
  }
  /* push the type block below the photograph */
  .hero{padding-top:calc(var(--nav-h) + 40svh);}
  .split,.lead{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,3rem);}
  .split--flip .split__art{order:0;}
  .split--wide{grid-template-columns:minmax(0,1fr);}
  .frame img{--ar:16/10;}
  .lead .frame img{--ar:4/5;}
  .shead--split{grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start;}
  .band__veil{
    background:
      linear-gradient(180deg,rgba(11,7,9,.72) 0%,rgba(11,7,9,.5) 34%,rgba(11,7,9,.88) 100%),
      linear-gradient(92deg,rgba(11,7,9,.7),rgba(47,13,16,.5));
  }
  /* no empty half to put type in at this width — go back to a vertical scrim */
  .band__body--end{max-width:none;margin-left:0;}
  .band__veil--end{
    background:linear-gradient(180deg,
      rgba(11,7,9,.5) 0%,rgba(11,7,9,.34) 18%,rgba(24,9,11,.78) 42%,
      rgba(24,9,11,.88) 70%,rgba(11,7,9,.92) 100%);
  }
  .props{min-height:min(96vw,470px);}
}

@media (max-width:900px){
  .divs{grid-template-columns:minmax(0,1fr);}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1rem;}
  .stats li:nth-child(n+3){padding-top:1.6rem;border-top:1px solid var(--line-quiet);}
}

@media (max-width:760px){
  :root{--pad-y:clamp(3.2rem,8vh,4.6rem);}
  .h1{font-size:clamp(2.15rem,9.6vw,3.1rem);}
  .hero{min-height:min(96svh,780px);}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:1.2rem;}
  .hero__scroll{display:none;}
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr);}
  .stop{
    grid-template-columns:minmax(0,1fr) auto;gap:.7rem 1rem;
    padding-block:clamp(1.3rem,3vh,1.7rem);
  }
  .stop__date{grid-column:1;grid-row:1;font-size:.9rem;}
  .stop__date small{display:inline;margin:0 0 0 .6rem;}
  .stop__city{grid-column:1 / -1;grid-row:2;}
  .stop__note{grid-column:1 / -1;grid-row:3;}
  .stop__cta{grid-column:1 / -1;grid-row:4;justify-self:start;margin-top:.4rem;}
  .stop:hover{padding-left:0;}
  .step{grid-template-columns:minmax(0,1fr);gap:.6rem;}
  .step::before{font-size:1.5rem;}
  .props{min-height:min(112vw,430px);}
  .book{width:min(280px,72%);}
  .card3d{width:min(160px,42%);left:-3%;}
  .medal{width:min(120px,32%);right:0;}
  .crit{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr));}
  .faq__a p,.faq__a ul{padding-left:0;}
  .faq__n{display:none;}
}

@media (max-width:620px){
  .grid--4{grid-template-columns:minmax(0,1fr);}
  .quote p{font-size:clamp(1.4rem,6.4vw,1.9rem);}
  .btn{flex:1 1 100%;}
  .actions .tlink{flex:0 0 auto;}
  .tbl{min-width:460px;font-size:.82rem;}
  .lead .frame img{--ar:3/4;}
  .banners{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:460px){
  :root{--gutter:1.15rem;}
  .stats{grid-template-columns:minmax(0,1fr);}
  .stats li{padding-top:1.4rem;border-top:1px solid var(--line-quiet);}
  .stats li:first-child{padding-top:0;border-top:0;}
  .crit{grid-template-columns:minmax(0,1fr);}
  .foot__top{grid-template-columns:minmax(0,1fr);}
  .people{grid-template-columns:minmax(0,1fr);}
  .banners{grid-template-columns:minmax(0,1fr);}
  .props{min-height:min(128vw,400px);}
  .card3d{display:none;}
}

@media (max-width:380px){
  .h1{font-size:2rem;}
  .book{width:86%;}
  .medal{width:34%;}
}

/* very wide screens — hold the measure, don't let type balloon */
@media (min-width:1700px){
  :root{--shell:min(1480px,100% - 2 * var(--gutter));}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .nav,.drawer,.curtain,.hero__scroll,.marqbar{display:none !important;}
  body{background:#fff;color:#000;}
  .rv,.hrv{opacity:1 !important;transform:none !important;animation:none !important;}
  .faq__a{grid-template-rows:1fr !important;}
  section{padding-block:1.5rem;break-inside:avoid;}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .curtain{display:none !important;}
  .rv,.hrv{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important;}
  .marquee__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;}
  .hero__scroll span{animation:none;}
  .btn--gold::after{display:none;}
  .book,.medal,.card3d,.banner{transition:none;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   FORMS
   --------------------------------------------------------------------------
   Enquiry and registration-interest forms. Accessibility is not decoration
   here, so the rules that carry it are called out:

   * Every control has a real <label>. No placeholder-as-label: a placeholder
     disappears the moment someone types, which strands anyone who is
     interrupted, and it is invisible to some assistive tech entirely.
   * Errors are wired with `aria-describedby` and `aria-invalid`, so the
     message is ANNOUNCED with the field rather than merely sitting near it.
   * Error state is never colour alone - the border changes, an icon-less
     message appears, and the field is marked invalid programmatically.
   * 16px minimum font-size on inputs: below that, iOS Safari zooms the whole
     page on focus, which is the single worst mobile form experience there is.
   ========================================================================== */
.form{display:grid;gap:clamp(1.1rem,2.4vh,1.6rem);max-width:64ch;}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:inherit;}
@media (max-width:620px){.form__row{grid-template-columns:minmax(0,1fr);}}

/* `grid-template-columns:minmax(0,1fr)` and `min-width:0` on the controls are
   both load-bearing. A <select> takes its MIN-CONTENT width from its longest
   option — "National Finals — New York, NY" — and as a grid item that min-width
   wins over `width:100%`, pushing the whole form past the viewport at 320px.
   Overflow, from an option label. */
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;min-width:0;}
.field__label{
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-lt);
}
.field__label .req{color:var(--stone);margin-left:.35em;}
.field input,.field select,.field textarea{
  width:100%;
  padding:.85rem 1rem;
  /* 16px floor - anything smaller makes iOS Safari zoom on focus */
  font-family:var(--ms);font-size:16px;font-weight:300;line-height:1.5;
  color:var(--cream);
  background:rgba(11,7,9,.55);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
  -webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;
  text-overflow:ellipsis;
}
.field textarea{min-height:8.5rem;resize:vertical;}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:2.6rem;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(216,206,196,.42);}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
  border-color:var(--gold);background:rgba(11,7,9,.75);
}
/* Not colour alone: the border changes AND a message appears AND the control
   is marked aria-invalid. */
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
  border-color:var(--gold-lt);background:rgba(11,7,9,.8);
}
.field__err{
  display:none;
  font-size:.76rem;line-height:1.5;color:var(--gold-lt);
}
.field.is-bad .field__err{display:block;}

/* the spam trap - off-screen, never focusable, never announced */
.form__trap{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

.form__note{font-size:.78rem;line-height:1.7;color:rgba(216,206,196,.74);max-width:56ch;}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;}

/* The summary sits ABOVE the form and takes focus on a failed submit, so a
   keyboard or screen-reader user is told what happened instead of being left
   somewhere in the middle of the fields. */
.form__alert{
  display:none;
  padding:1rem 1.15rem;
  border:1px solid var(--gold);border-radius:var(--r-sm);
  background:rgba(11,7,9,.7);
  font-size:.84rem;line-height:1.6;color:var(--cream);
}
.form__alert:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.form.is-bad .form__alert{display:block;}

/* Success replaces the form entirely - there is nothing left to fill in, and
   leaving a filled form on screen invites a second submission. */
.form__done{
  display:none;
  padding:clamp(1.6rem,3.4vw,2.4rem);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--black);
}
.form__done .h3{margin-bottom:.7rem;}
.form__done p{font-size:.92rem;color:var(--stone);}
/* Register: form + photograph side by side. The image sits OUTSIDE .formwrap, which app.js
   uses for the success state, so the photo stays when the form is swapped for "thank you". */
.regsplit{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:stretch;
  margin-top:clamp(2.2rem,5vh,3.4rem);
}
.regsplit .form{max-width:none;}
.regsplit__art{
  position:relative;overflow:hidden;margin:0;   /* all sides: <figure> has UA margins */
  min-height:440px;border-radius:var(--r-lg);background:var(--black);
}
.regsplit__art img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 28%;
}
.regsplit__art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--gold);border-radius:inherit;
}
/* a solid black plate, not a fade over the photo: words sit on a flat ground */
.regsplit__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(.9rem,2vh,1.2rem) clamp(1.1rem,2vw,1.5rem);
  background:var(--black);border-top:1px solid var(--gold);
  font-family:var(--pf);font-style:italic;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--gold-lt);
}
@media (max-width:900px){
  .regsplit{grid-template-columns:minmax(0,1fr);}
  .regsplit__art{order:-1;min-height:0;aspect-ratio:4/3;}
}
.formwrap.is-done .form{display:none;}
.formwrap.is-done .form__done{display:block;}

.form button[type=submit]{position:relative;}
.form.is-sending button[type=submit]{opacity:.6;pointer-events:none;}

/* a short qualifying list beside an enquiry form */
.ticks{margin-top:clamp(1.6rem,3.4vh,2.2rem);display:grid;gap:.75rem;}
.ticks li{
  position:relative;padding-left:1.6rem;font-size:.88rem;color:var(--stone);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border:1px solid var(--gold);border-radius:50%;
}

/* ---- tap targets ---------------------------------------------------------
   Footer links are small type by design, but a 16px-tall touch target is a
   miss-and-try-again. Padding raises the hit area on touch-sized screens
   without changing the type or the visual rhythm — the list gap absorbs it. */
@media (max-width:900px){
  .foot__list a,.foot__list span{display:inline-block;padding-block:.55rem;}
  .foot__list li + li{margin-top:.2rem;}
  .foot__bottom nav a{display:inline-block;padding-block:.6rem;}
  .foot__bottom nav{gap:.2rem 1.4rem;}
}

/* ---- long CTAs on very narrow screens -----------------------------------
   `.btn` is `white-space:nowrap` with .22em letter-spacing, so a label like
   "Send registration interest" has a MIN-CONTENT width of about 340px. Inside
   a grid — which every form is — that min-content sets the column, and the
   whole form pushed past a 320px viewport. Buttons wrap below 460px instead.
   This is a site-wide fix: any long CTA had the same problem. */
@media (max-width:460px){
  .btn{
    white-space:normal;text-align:center;line-height:1.45;
    padding-inline:1.35rem;
  }
  .form,.form__row,.formwrap{min-width:0;}
}

/* ==========================================================================
   PAGE HEROES (.ph) — inner pages only
   --------------------------------------------------------------------------
   Home owns the cinematic full-bleed hero (.hero): a photograph BEHIND the
   type, a left-column title, the pillar row and the scroll pill. Client
   instruction: "Do not copy the Home Page layout exactly onto other pages ...
   create a layout that is appropriate and unique to each page."

   So `.hero` is now Home's alone, and every inner page opens with its own
   structure from this family. They share the brand — the two grounds, the
   type scale, the gold hairline, the spacing rhythm — and nothing else:

     .ph--cinema      Experience   centred title card, then a 21:9 letterbox
     .ph--almanac     Tour         split spread: season figures + bled image
     .ph--editorial   Opportunities  type-led, no image, oversized headline
     .ph--letterhead  About        the real monogram centred over the title
     .ph--plain       legal pages  title only

   Two of them carry no photograph at all, which also makes the largest
   contentful paint a line of text rather than a megabyte of base64.
   ========================================================================== */
.ph{
  position:relative;isolation:isolate;
  padding-block:calc(var(--nav-h) + clamp(2.4rem,7vh,5rem)) clamp(3rem,8vh,5.5rem);
}
.ph .h1{font-size:clamp(2.45rem,6.2vw,5.4rem);}
.ph .lede{margin-top:clamp(1.2rem,2.8vh,1.8rem);}
.ph .actions{margin-top:clamp(1.6rem,3.6vh,2.4rem);}

/* ---- breadcrumb: orientation on every inner page, and SEO structure ------ */
.crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .9rem;
  margin:0 0 clamp(1.3rem,3.2vh,2rem);
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);
}
.crumbs li{display:flex;align-items:center;gap:.9rem;}
.crumbs li + li::before{content:"";width:16px;height:1px;background:var(--gold);}
.crumbs a{display:inline-block;padding-block:.6rem;color:var(--gold-lt);transition:color .3s var(--ease);}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--cream);}

/* ---- EXPERIENCE: cinema ---------------------------------------------------
   The title stands alone, centred, on the black ground; the photograph comes
   AFTER it as a letterboxed frame — the reverse of Home, where the image is
   behind the words. Beneath the frame, an on-this-page index: this page is a
   long reference read, so the opener doubles as its table of contents. */
.ph--cinema .ph__head{max-width:62rem;margin-inline:auto;text-align:center;}
.ph--cinema .crumbs ol{justify-content:center;}
.ph--cinema .h1{max-width:18ch;margin-inline:auto;}
.ph--cinema .lede{max-width:58ch;margin-inline:auto;}
.ph--cinema .actions{justify-content:center;}
.ph__frame{
  position:relative;overflow:hidden;width:100%;
  /* all four sides: the UA sheet gives <figure> 40px inline margins */
  margin:clamp(2.6rem,6vh,4rem) 0 0;
  aspect-ratio:21/9;max-height:66vh;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--black);
}
.ph__frame img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 42%);}
.ph__toc{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 2rem;
  margin-top:clamp(.9rem,2.2vh,1.4rem);
}
.ph__toc a{
  display:inline-block;padding-block:.65rem;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);
  transition:color .3s var(--ease);
}
.ph__toc a:hover,.ph__toc a:focus-visible{color:var(--gold-lt);}
@media (max-width:760px){.ph__frame{aspect-ratio:4/3;max-height:none;}}

/* ---- TOUR: almanac --------------------------------------------------------
   A printed-programme spread. The season's figures are set as a 2x2
   definition list in large numerals, and the photograph is a tall panel bled
   off the right edge of the page. The bleed is exactly `--gutter`, which is
   the shell-to-viewport distance, so it can never overflow (see the trap
   table in CLAUDE.md). */
.ph--almanac{padding-bottom:0;}
.ph__grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.6rem);align-items:stretch;
}
.ph__text{padding-bottom:clamp(3rem,8vh,5.5rem);}
.ph__figs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(2rem,4.6vh,3rem) 0 0;border-top:1px solid var(--line);
}
/* <dt> is the label and <dd> the figure, which is the correct semantics;
   column-reverse just shows the figure first. */
.ph__figs > div{
  display:flex;flex-direction:column-reverse;
  padding:clamp(1rem,2.2vh,1.4rem) 0;border-bottom:1px solid var(--line-quiet);
}
.ph__figs > div:nth-child(odd){padding-right:1.2rem;border-right:1px solid var(--line-quiet);}
.ph__figs > div:nth-child(even){padding-left:1.4rem;}
.ph__figs dd{
  margin:0;font-family:var(--pf);font-size:clamp(2.1rem,3.6vw,3rem);line-height:1;
  color:var(--gold-lt);font-variant-numeric:lining-nums tabular-nums;
}
.ph__figs dt{
  margin-top:.55rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);
}
.ph__panel{
  position:relative;overflow:hidden;
  margin:0 calc(-1 * var(--gutter)) 0 0;   /* never margin-right alone: <figure> has UA margins */
  min-height:clamp(440px,74vh,760px);
  border-radius:var(--r-lg) 0 0 0;background:var(--black);
}
.ph__panel img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 35%);
}
/* a gold hairline down the panel's inner edge and across its top: the programme's
   column rule, tying the photograph to the figures table beside it */
.ph__panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-top:1px solid var(--gold);border-left:1px solid var(--gold);
  border-radius:inherit;
}
@media (max-width:1024px){
  .ph__grid{grid-template-columns:minmax(0,1fr);gap:0;}
  /* the crop is 0.84 portrait: a phone-width panel ~1.1x its width tall shows her whole */
  .ph__panel{margin-inline:calc(-1 * var(--gutter));border-radius:0;
    min-height:0;height:auto;aspect-ratio:5/6;max-height:78vh;}
  .ph__panel::after{border-left:0;}
}

/* ---- OPPORTUNITIES: editorial ---------------------------------------------
   Type is the whole composition: an oversized headline, then a gold hairline
   and a two-column foot — the brand line on one side, the actions on the
   other. No photograph; this page is about what comes next, not a stage. */
.ph--editorial .h1{font-size:clamp(2.7rem,7.6vw,6.8rem);line-height:.98;max-width:12ch;}
.ph__foot{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:end;
  margin-top:clamp(2.2rem,5.4vh,3.6rem);padding-top:clamp(1.4rem,3vh,2rem);
  border-top:1px solid var(--line);
}
.ph__foot .sig{font-size:clamp(1.2rem,1.8vw,1.55rem);color:var(--gold-lt);max-width:30ch;}
.ph__foot .lede{margin-top:clamp(.9rem,2vh,1.2rem);}
.ph__foot .actions{margin-top:0;justify-content:flex-end;}
@media (max-width:760px){
  .ph__foot{grid-template-columns:minmax(0,1fr);}
  .ph__foot .actions{justify-content:flex-start;}
}

/* ---- ABOUT: letterhead ----------------------------------------------------
   The page about who ABA is opens on the ABA mark itself — the real monogram,
   centred, as at the head of a letter — with the values set beneath in
   italic serif rather than Home's small-caps pillar row. */
.ph--letterhead{text-align:center;}
.ph--letterhead .crumbs ol{justify-content:center;}
.ph--letterhead .mark--mono{display:block;width:clamp(92px,10vw,140px);margin:0 auto clamp(1.6rem,3.8vh,2.4rem);}
.ph--letterhead .h1{max-width:16ch;margin-inline:auto;}
.ph--letterhead .lede{max-width:56ch;margin-inline:auto;}
.ph--letterhead .actions{justify-content:center;}
.ph__values{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 2.6rem;
  max-width:52rem;margin:clamp(2.4rem,5.6vh,3.4rem) auto 0;
  padding-top:clamp(1.3rem,3vh,1.8rem);border-top:1px solid var(--line);
  font-family:var(--pf);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--gold-lt);
}

/* ---- legal pages: plain ---------------------------------------------------- */
.ph--plain .h1{font-size:clamp(2.2rem,5vw,4rem);}

/* ==========================================================================
   REFERENCE COMPONENTS — the Experience page's own vocabulary
   --------------------------------------------------------------------------
   Home presents the scoring system as a four-cell criteria row and the awards
   as four cards. The Experience page is the reference read, so it gets forms
   that show the RELATIONSHIPS instead: a bar whose segments are the actual
   proportions of the 100 points, a ladder that reads top to bottom like the
   score does, and a side-by-side table for the two divisions.
   ========================================================================== */

/* ---- the points bar: segment width IS the point value -------------------- */
.pts{
  display:flex;gap:2px;margin-top:clamp(1.2rem,2.6vh,1.6rem);
  height:clamp(58px,8vh,76px);border-radius:var(--r-md);overflow:hidden;
}
/* black segments on the velvet ground: the red shows through the 2px gaps */
.pts > span{
  flex:var(--w) 1 0;min-width:0;overflow:hidden;
  display:flex;align-items:center;padding-inline:clamp(.7rem,1.4vw,1.1rem);
  background:var(--black);
  font-family:var(--pf);font-size:clamp(1.2rem,2vw,1.7rem);color:var(--gold-lt);
}
@media (max-width:620px){.pts > span b{display:none;}}  /* the key carries them */
.pts__key{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.8rem,2vw,1.6rem);margin-top:clamp(1rem,2.4vh,1.4rem);
}
.pts__key > div{display:flex;flex-direction:column-reverse;border-top:1px solid var(--gold);padding-top:.8rem;}
.pts__key dt{margin-top:.35rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);}
.pts__key dd{margin:0;font-family:var(--pf);font-size:clamp(1.3rem,2vw,1.7rem);color:var(--cream);}
@media (max-width:760px){.pts__key{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---- the award ladder: range | award | what it means --------------------- */
.ladder{margin-top:clamp(1.4rem,3vh,2rem);border-top:1px solid var(--line);}
.ladder li{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(.8rem,2.4vw,2.4rem);align-items:baseline;
  padding-block:clamp(1.1rem,2.6vh,1.6rem);border-bottom:1px solid var(--line);
}
.ladder__range{
  font-family:var(--pf);font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.05;
  color:var(--gold-lt);font-variant-numeric:lining-nums tabular-nums;
}
.ladder__name{font-family:var(--pf);font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--cream);}
.ladder__note{font-size:.88rem;color:var(--stone);}
.ladder li.ladder__floor{display:block;font-size:.86rem;color:var(--stone);}
@media (max-width:760px){.ladder li{grid-template-columns:minmax(0,1fr);gap:.35rem;}}

/* ---- the division comparison --------------------------------------------- */
.compare{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md);
}
.compare:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.cmp{min-width:600px;font-size:.92rem;}
.cmp th,.cmp td{
  padding:clamp(1rem,2.2vw,1.4rem) clamp(1rem,2.2vw,1.6rem);
  text-align:left;vertical-align:top;border-bottom:1px solid var(--line-quiet);
}
.cmp td + td{border-left:1px solid var(--line-quiet);}
/* header cells are dark panels on the red ground */
.cmp thead th,.cmp thead td{background:var(--black);}
.cmp thead th{font-family:var(--pf);font-size:clamp(1.3rem,2vw,1.8rem);font-weight:400;color:var(--cream);}
.cmp thead th small{
  display:block;margin-top:.45rem;font-family:var(--ms);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);
}
.cmp tbody th{
  width:18%;font-size:.66rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-lt);
}
.cmp tbody td{color:var(--cream);}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0;}
.cmp__phrase{font-family:var(--pf);font-style:italic;font-size:1.05rem;color:var(--gold-lt);}

/* ---- "continue": the inner pages' closing, instead of Home's photo band --- */
.nextrow .h4{margin:0;}
.next{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(1.4rem,3vh,2rem);
}
.next__item{
  position:relative;display:flex;flex-direction:column;gap:.55rem;
  padding:clamp(1.3rem,3vh,1.9rem) 2.4rem clamp(1.2rem,2.6vh,1.6rem) 0;
  border-top:1px solid var(--gold);
}
.next__k{font-family:var(--pf);font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.1;color:var(--cream);transition:color .3s var(--ease);}
.next__t{font-size:.86rem;color:var(--stone);}
.next__item svg{
  position:absolute;right:0;top:clamp(1.5rem,3.2vh,2.1rem);
  width:22px;height:22px;color:var(--gold);transition:transform .45s var(--ease);
}
.next__item:hover .next__k,.next__item:focus-visible .next__k{color:var(--gold-lt);}
.next__item:hover svg,.next__item:focus-visible svg{transform:translateX(6px);}
@media (max-width:760px){.next{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion:reduce){.next__item svg{transition:none;}}

/* ==========================================================================
   CURVES
   --------------------------------------------------------------------------
   Applied in one place, at the end, so the radius language is legible as a
   system rather than scattered through every component. See the --r-* tokens
   at the top of the file for why the scale has four steps.
   ========================================================================== */

/* ---- buttons & chips ---------------------------------------------------- */
.btn{border-radius:var(--r-sm);}
.btn--lg{border-radius:calc(var(--r-sm) + 1px);}
.skip:focus{border-radius:var(--r-sm);}
.tag,.div__tier{border-radius:var(--r-pill);}

/* ---- cards & panels ----------------------------------------------------- */
.card{border-radius:var(--r-md);}
.div,.award,.finals{border-radius:var(--r-lg);}
.person{border-radius:var(--r-md);overflow:hidden;}
.person__pic{border-radius:var(--r-md) var(--r-md) 0 0;}

/* The gold bottom-bar on a division card has to follow the rounded corner,
   otherwise it pokes out past it. */
.div::after{border-radius:0 0 var(--r-lg) var(--r-lg);}
.finals::after{border-radius:0 0 var(--r-lg) var(--r-lg);}

/* ---- hairline grids: round the container, keep the dividers straight ---- */
.crit,.partners,.deadlines{border-radius:var(--r-md);overflow:hidden;}
.tablewrap{border-radius:var(--r-md);}

/* ---- imagery ------------------------------------------------------------ */
/* The offset gold keyline and the photograph inside it need the SAME radius or
   the two curves visibly disagree at the corners. */
.frame img{border-radius:var(--r-lg);}
.frame::before{border-radius:var(--r-lg);}
.propshot img{border-radius:var(--r-lg);}
.pin__track > *{border-radius:var(--r-md);}

/* ---- the ordinal watermark on category cards --------------------------- */
/* With the corners rounded, a numeral sitting flush to the top edge gets
   clipped by the curve. Drop it clear of the corner. */
.card--ord::after{top:.72rem;right:1.15rem;line-height:.92;}