/* ==========================================================================
   WSC Select — Westchester Sporting Club brand system.

   Type, colour and components inherited from the WSC investor-site DESIGN.md
   (Playfair Display / Public Sans / IBM Plex Mono; parchment, club green,
   estate gold). Hero composition follows variant B: the seal is the hero and
   sits opposite the statement.

   The whole page rides on ONE persistent aerial-pitch film, fixed behind
   everything. Scrim weight per band controls how much pitch shows through.

   Radius is 0 everywhere. Estate gold is consecration only: the seal, dividing
   rules, and key ticks. Never body text, never a background.
   ========================================================================== */

@font-face{font-family:"Playfair";src:url(fonts/playfair-display-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Playfair";src:url(fonts/playfair-display-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Playfair";src:url(fonts/playfair-display-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"PublicSans";src:url(fonts/public-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PlexMono";src:url(fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PlexMono";src:url(fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --white:#FFFFFF;
  --parchment:#F5F0E6;
  --parchment-tint:#EFE8D8;
  --ink:#1A211B;
  --green:#24382E;
  --green-deep:#16241D;
  --gold:#A8842C;
  --gold-soft:#C1A254;
  --tan:#E8D9B4;
  --muted-ink:#64705F;
  --muted-ink-tint:#5C6857;  /* clears AA on --parchment-tint */
  --on-gold:#1A211B;         /* = --ink; body copy on --gold, 4.70:1 */
  --muted-film:#B9C0B2;
  --hair:rgba(26,33,27,.16);
  --hair-gold:rgba(168,132,44,.55);
  --hair-film:rgba(245,240,230,.18);

  --serif:"Playfair",Georgia,serif;
  --sans:"PublicSans",system-ui,-apple-system,sans-serif;
  --mono:"PlexMono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;

  --wrap:1240px;
  --gut:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--green-deep)}
body{
  /* NO background here. The field sits at z-index:-2 and an opaque body
     background paints straight over it. The ground colour lives on html. */
  margin:0;background:transparent;color:var(--parchment);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
section[id]{scroll-margin-top:96px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
  color:var(--green-deep);padding:var(--s3) var(--s5);font-family:var(--mono);font-size:.8rem}
.skip:focus{left:0}
::selection{background:var(--gold-soft);color:var(--green-deep)}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}

/* ---------- the persistent field ---------- */
/* The field sits at z-index 0 and every content layer is explicitly lifted above
   it. Do NOT use a negative z-index here: any ancestor that forms a stacking
   context buries it, which is exactly what happened with an opaque body. */
.filmbed{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--green-deep)}
.filmbed video,.filmbed img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06) translateY(calc(var(--sy,0) * -2.5%))}
/* the global legibility layer, kept light. Per-band scrims do the heavy work,
   so these two must never both be strong or the pitch disappears entirely. */
.filmbed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,36,29,.42) 0%,rgba(22,36,29,.30) 45%,rgba(22,36,29,.62) 100%)}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
main{position:relative;z-index:1}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.6rem,1.5rem + 4.4vw,4.8rem);line-height:1.02}
h2{font-family:var(--serif);font-weight:700;letter-spacing:-.018em;
  font-size:clamp(2rem,1.35rem + 2.6vw,3.2rem);line-height:1.08;max-width:20ch}
h3{font-family:var(--serif);font-weight:600;font-size:1.375rem;line-height:1.24;letter-spacing:-.01em}
.lead{font-size:clamp(1.125rem,1.06rem + .3vw,1.3rem);line-height:1.6;max-width:46ch}
.fig{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- bands ---------- */
.band{position:relative;z-index:1;padding-block:clamp(var(--s9),11vw,var(--s11))}
.band--film{color:var(--parchment);background:var(--green-deep)}
/* the film shows through ONLY here and in the hero; a page-long wash of it made
   every band look transparent and cost the type its contrast */
.band--sheer{background:rgba(22,36,29,.86)}
.band--film .lead{color:var(--muted-film)}
.band--paper{background:var(--parchment);color:var(--ink)}
.band--white{background:var(--white);color:var(--ink)}
.band--white .lead{color:var(--muted-ink)}
.band--paper .lead{color:var(--muted-ink)}
/* the gold rule is the ONLY divider on the site, and it only ever marks a
   change of world: film to paper, or paper to film */
.band--paper::before,.band--white::before,.band--film + .band--paper::before{content:"";position:absolute;
  inset:0 0 auto 0;height:1px;background:var(--hair-gold)}

.head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-bottom:var(--s8);max-width:60ch}
.head>:first-child{margin-top:0}
.head h2{margin-top:var(--s4)}

/* ---------- CTA garments ---------- */
.cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-weight:500;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.14em;padding:16px 26px;border:0;cursor:pointer;
  background:var(--gold);color:var(--green-deep);
  transition:background .25s var(--ease),color .25s var(--ease)}
.cta .ic{transition:transform .22s var(--ease)}
.cta:hover{background:var(--gold-soft)}
.cta:hover .ic{transform:translateX(4px)}
/* the outlined "full plan" garment from the club's own investor site */
.cta--line{background:transparent;color:var(--parchment);box-shadow:inset 0 0 0 1px var(--hair-film)}
.cta--line:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--gold-soft);color:var(--gold-soft)}
.band--paper .cta--line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.tick{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}
.tick{border-bottom:1px solid var(--hair-gold);padding-bottom:3px}
.tick:hover{color:var(--gold-soft)}

/* ---------- icons + seal ---------- */
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:butt;stroke-linejoin:miter}
.ic *{fill:none;stroke:currentColor;stroke-width:inherit}
/* the play arrow's head is a solid triangle, like a marker on a tactics board */
.ic .solid{fill:currentColor;stroke:none}
.ic--18{width:18px;height:18px}
.ic--26{width:26px;height:26px}
/* The club's actual artwork (assets/seal.png: white linework on transparent).
   Used as a mask so one asset paints in any brand colour via currentColor. */
.sealmark{display:block;background-color:currentColor;
  -webkit-mask:url(assets/seal.png?v=3) center/contain no-repeat;
          mask:url(assets/seal.png?v=3) center/contain no-repeat}
.seal-rings circle,.seal-rings path{fill:none;stroke:currentColor}
.seal-type text{fill:currentColor;font-family:var(--serif);font-weight:600}
.seal-rules line{stroke:currentColor;stroke-width:1.2}
.seal-sprig path,.seal-sprig use{fill:currentColor}
.seal-stem{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ball-face{fill:var(--seal-ball,transparent);stroke:currentColor;stroke-width:1.5}
#football polygon{fill:currentColor}
.ball-spoke line{stroke:currentColor;stroke-width:1.4}
.leaf-vein{fill:none;stroke:var(--seal-ball,transparent);stroke-width:1.1;stroke-linecap:round}

/* ---------- bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:100;padding-block:var(--s4);
  transition:background .3s var(--ease)}
.bar.is-set{background:rgba(22,36,29,.94);backdrop-filter:blur(6px)}
.bar__in{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-bottom:var(--s4);border-bottom:1px solid var(--hair-film)}
.bar.is-set .bar__in{border-bottom-color:transparent}
.bar__mark{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--parchment)}
.bar__seal{width:44px;height:44px}
.bar__word{font-family:var(--mono);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.18em}
.bar__nav{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem)}
.bar__nav a:not(.cta){text-decoration:none;font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--muted-film);position:relative;
  padding-block:6px;transition:color .2s var(--ease)}
.bar__nav a:not(.cta):hover,.bar__nav a.is-here{color:var(--parchment)}
.bar__nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.bar__nav a.is-here::after{transform:scaleX(1)}
.cta--sm{padding:12px 20px;font-size:.68rem}

/* ==========================================================================
   Hero — variant B composition: the seal is the hero, opposite the statement
   ========================================================================== */
/* the hero is the one place the field is the point: the scrim is raked, heavy
   behind the type on the left and nearly clear over the pitch on the right */
.hero{position:relative;z-index:1;min-height:100svh;display:grid;align-content:center;
  padding-top:var(--s11);
  background:linear-gradient(100deg,rgba(22,36,29,.93) 0%,rgba(22,36,29,.82) 34%,
    rgba(22,36,29,.46) 66%,rgba(22,36,29,.20) 100%)}
.hero__in{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero__seal{width:clamp(150px,17vw,252px);aspect-ratio:1;color:var(--parchment)}
.hero h1 em{font-style:normal;color:var(--gold-soft)}
.hero__lead{margin-top:var(--s5);color:var(--muted-film)}
.hero__act{margin-top:var(--s7);display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.hero__foot{margin-top:var(--s9);display:flex;gap:var(--s6);flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted-film)}
.hero__foot span{display:flex;align-items:center}

/* ==========================================================================
   Stack plates — the thesis as a physical fact
   ========================================================================== */
.promise__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.stage{display:grid}
.layer{padding:clamp(var(--s5),3vw,var(--s7))}
.layer--club{background:var(--parchment-tint);margin-right:var(--s9)}
.layer--club h3{color:var(--ink)}
.layer--club p{margin-top:var(--s3);color:var(--muted-ink-tint)}
/* the Select layer is WIDER than the club layer. That width difference is what
   reads as "laid over", instead of a diagonal drop-shadowed card stack. */
.layer--wsc{background:var(--gold);transform:translateY(calc((1 - var(--p,1)) * 18px))}
.layer--wsc h3{color:var(--green-deep)}
.layer--wsc p{margin-top:var(--s3);color:var(--on-gold)}

/* ---------- pillars ---------- */
/* ==========================================================================
   One row component, used by BOTH "what is added" and "what it costs" so the
   two sections read as the same object. The added rows are native <details>,
   so they collapse with zero JS and stay keyboard-accessible.
   ========================================================================== */
.rows{margin-bottom:var(--s8)}
.row{border-bottom:1px solid var(--hair-film)}
.row:first-child{border-top:1px solid var(--hair-film)}
.row__name{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.2;color:var(--parchment)}
.row__state{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--tan);white-space:nowrap}
.row__body{color:var(--muted-film);max-width:60ch;
  padding:0 var(--s7) clamp(var(--s5),3vw,var(--s6)) 0}

/* static rows — what it costs */
.row--static{display:grid;grid-template-columns:1fr auto;gap:var(--s5);
  align-items:baseline;padding:clamp(var(--s5),3vw,var(--s6)) 0}
.row--static.is-later .row__state{color:var(--muted-film)}

/* collapsible rows — what is added */
.row details summary{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);padding:clamp(var(--s5),3vw,var(--s6)) 0;cursor:pointer;list-style:none}
.row details summary::-webkit-details-marker{display:none}
.row details summary:hover .row__name{color:var(--gold-soft)}
.row details summary:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}
/* tactics-board grammar: a play arrow while the row is closed, the board's
   "O" player marker once it is open */
.row__mark{color:var(--gold-soft);flex:none;display:grid;place-items:center;
  width:26px;height:26px}
.row__mark>svg{grid-area:1/1;transition:opacity .22s var(--ease),transform .28s var(--ease)}
.row__o{opacity:0;transform:scale(.6)}
.row details[open] .row__arrow{opacity:0;transform:translateX(6px)}
.row details[open] .row__o{opacity:1;transform:scale(1)}
.row__name{transition:color .2s var(--ease)}

/* ==========================================================================
   What it costs — deliberately NOT the added rows again. A compact receipt on
   paper, dominated by the figure, so the two sections cannot be confused.
   ========================================================================== */
.cost{display:grid;grid-template-columns:1fr auto;gap:clamp(var(--s6),5vw,var(--s9));align-items:end}
.cost__head{grid-column:1;max-width:52ch}
.cost__head h2{margin-top:0}
.cost__head .lead{margin-top:var(--s5)}
.tab{grid-column:1;align-self:end;border-top:1px solid var(--hair);max-width:520px}
.tab li{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--hair)}
.tab__name{font-size:1.0625rem;color:var(--ink)}
.tab__state{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted-ink)}
.tab li.is-later .tab__name,.tab li.is-later .tab__state{color:var(--muted-ink)}
/* figure and caption travel together, centred against the list rather than
   sitting on its baseline */
.cost__total{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right}
.cost__fig{font-family:var(--serif);font-weight:700;color:var(--green-deep);
  font-size:clamp(6rem,3rem + 14vw,15rem);line-height:.76;letter-spacing:-.03em;
  padding-bottom:.14em}
.cost__cap{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted-ink);margin-top:var(--s5)}

/* ---------- method: plain text blocks on film, no cards, no grid rules ---------- */
.run{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(var(--s5),3vw,var(--s6))}
.step{padding-top:var(--s5);border-top:1px solid var(--hair-film)}
.step__n{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.16em;color:var(--gold-soft)}
.step h3{margin-top:var(--s4);font-size:1.2rem;color:var(--parchment)}
.step__d{margin-top:var(--s3);color:var(--muted-film);font-size:1rem}

/* ---------- ladder ---------- */
.ladder{display:grid}
.rung{display:grid;grid-template-columns:5fr 7fr;gap:var(--s5);align-items:center;
  padding:var(--s5) var(--s6)}
.rung p{font-size:1rem}
.rung:nth-child(1){background:var(--parchment-tint);color:var(--ink)}
.rung:nth-child(2){background:var(--tan);color:var(--ink)}
.rung:nth-child(3){background:var(--gold-soft);color:var(--green-deep)}
.rung:nth-child(4){background:var(--gold);color:var(--green-deep)}
.rung:nth-child(5){background:var(--green);color:var(--parchment)}
.rung:nth-child(6){background:var(--green-deep);color:var(--parchment)}
.rung:nth-child(-n+2) p{color:var(--muted-ink)}
.rung:nth-child(3) p,.rung:nth-child(4) p{color:rgba(22,36,29,.75)}
.rung:nth-child(n+5) p{color:var(--muted-film)}

/* ---------- nominate ---------- */
.panel{background:rgba(22,36,29,.72);box-shadow:inset 0 0 0 1px var(--hair-film);
  padding:clamp(var(--s6),4vw,var(--s7));max-width:760px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.field{display:grid;gap:var(--s2)}
.field--wide,.form__act,.form__note{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted-film)}
.field label span{color:var(--gold-soft)}
.field input,.field textarea{background:transparent;border:0;
  border-bottom:1px solid var(--hair-film);padding:12px 0;font-size:1.0625rem;
  color:var(--parchment);transition:border-color .2s var(--ease)}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gold-soft)}
.field:focus-within label{color:var(--parchment)}
.form__note{color:var(--muted-film);font-size:.95rem}
/* honeypot: off-screen rather than display:none, which some bots skip */
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{grid-column:1/-1;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.14em;min-height:1.2em}
.form__status[data-state="ok"]{color:var(--gold-soft)}
.form__status[data-state="err"]{color:#E8A0A0}

/* ---------- footer ---------- */
.foot{padding-block:var(--s9) var(--s8);position:relative;z-index:1;background:rgba(13,22,17,.93)}
.foot__in{display:grid;grid-template-columns:1fr auto;gap:var(--s7);align-items:end}
.foot__seal{width:104px;height:104px;color:var(--parchment)}
.foot__promise{margin-top:var(--s5);font-family:var(--serif);font-size:1.5rem;line-height:1.25}
.foot__b{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted-film);line-height:2.2;text-align:right}
.foot__b a{text-decoration:none;border-bottom:1px solid var(--hair-gold)}
.foot__c{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--hair-film);
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted-film)}

/* ==========================================================================
   Motion. CSS defaults are the finished state; pre-states apply only under .js
   ========================================================================== */
html.js [data-fx]:not(.is-in) .rise{opacity:0;transform:translateY(14px)}
html.js .rise{transition:opacity .55s var(--ease) calc(var(--i,0) * 70ms),
  transform .55s var(--ease) calc(var(--i,0) * 70ms)}

@media (max-width:1080px){
  .promise__grid{grid-template-columns:1fr}
  .run{grid-template-columns:repeat(2,1fr)}
  .cost{grid-template-columns:1fr}
  .cost__head,.tab,.cost__total{grid-column:1}
  .cost__total{grid-row:auto;margin-top:var(--s6);text-align:left}
}
@media (max-width:820px){
  .hero__in{grid-template-columns:1fr;gap:var(--s6)}
  .hero__seal{width:132px}
  .foot__in{grid-template-columns:1fr;gap:var(--s6)}
  .foot__b{text-align:left}
}
@media (max-width:680px){
  .bar__nav a:not(.cta){display:none}
  .run{grid-template-columns:1fr}
  .rung{grid-template-columns:1fr;gap:var(--s2)}
  .form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-fx]:not(.is-in) .rise{opacity:1;transform:none}
  .filmbed video{display:none}
  .layer--wsc,.filmbed img{transform:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}