/* ============================================================
   THE LONG GAME — v3
   Style system shared with Mom Rocks (sampled from typesafe.ai):
     flat colour field · three-voice type · hard-framed plates
     crop marks · dithered smoke · one marigold mark per page

   Every class name from v2 is preserved, so page markup is
   untouched. What changed is the look underneath it.

   Palette: turf teal · hot pink · marigold · bone paper · ink
   ============================================================ */

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

:root{
  /* --- ground --- */
  --paper:#F6F3EA;          /* bone, the page ground */
  --field:#FFFDF7;          /* a lifted surface (cards, scripts) */
  --card:#FFFDF7;

  /* --- ink: never quite black --- */
  --ink:#19292B;
  --ink-2:#44585A;
  --ink-3:#6E8083;

  /* --- the three colours --- */
  --teal:#13A8A0;
  --teal-deep:#0B7E78;
  --pink:#FF5C9E;
  --gold:#FFC24A;           /* marigold. still the one mark per page */

  /* legacy aliases kept so inline styles and old rules hold */
  --navy:#19292B;
  --rule:#D9DBD2;
  --rule-hard:#19292B;

  --measure:64ch;
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.62;
  font-variant-numeric:tabular-nums;
  overflow-x:clip;
}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px}
img{max-width:100%;height:auto}

.frame{max-width:1180px;margin:0 auto;padding-inline:clamp(1rem,4vw,3rem)}

/* v2 kept .bleed as a small outdent so plates clear the text gutter */
.bleed{padding-inline:0;margin-inline:0}
/* explicit full-viewport break-out, inner content still on the grid */
.full{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(max(50vw - 590px, 0px) + clamp(1rem,4vw,3rem));
}

/* --- the mono voice: chrome, labels, data, numbers ------------- */
.mono,.kicker,.eyebrow,.meta,.row .side,.row .hardest,
.catband span,.related-card .tag{
  font-family:var(--mono);
  letter-spacing:.01em;
}

/* ============================================================ SMOKE BAND
   smoke.js injects <div class="smokeband"><canvas></canvas></div> right
   under the masthead. Full field on the home page, a thin weather
   strip everywhere else, so inner pages read as the same system without
   competing with the prose. */
.smokeband{
  position:relative;
  height:clamp(72px,9vw,124px);
  background:var(--paper);
  border-bottom:1px solid var(--ink);
  overflow:hidden;
}
/* inside .frame, under the masthead: break out to the full viewport */
.mast + .smokeband{margin-inline:calc(50% - 50vw)}
.smokeband canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.smokeband[hidden]{display:none}

/* masthead, menu toggle and footer live in mast.css, shared with the home page */

/* ============================================================ OPENINGS */
.open{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3.5vw,2.5rem)}
h1,.h1{
  font-family:var(--disp);font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(2.1rem,5.8vw,4rem);line-height:.96;
  letter-spacing:-.032em;max-width:18ch;text-wrap:balance;
}
.open .lede{margin-top:1.3rem;max-width:var(--measure);color:var(--ink-2);font-size:1.15rem}
.open > p{max-width:var(--measure)}
.open > p + p,.open > h2 + p,.open > h3 + p,.open > ul,.open > ol{margin-top:1.1rem}
.open > h2{margin-top:1.6rem}
.open > *:first-child + h2,.open > h1 + *{margin-top:0}

.kicker,.eyebrow{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:.9rem;display:block;font-weight:500;
}

h2{
  font-family:var(--disp);font-variation-settings:'wdth' 108,'wght' 800;
  font-size:clamp(1.55rem,3.6vw,2.3rem);line-height:1.02;
  letter-spacing:-.028em;max-width:24ch;text-wrap:balance;
}
h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100,'wght' 700;
  font-size:1.22rem;line-height:1.14;letter-spacing:-.02em;
}

/* ============================================================ THE DECK
   .roster becomes a two-up card deck; .catband spans it as an ink band.
   Same markup as v2, read as a scouting deck instead of a list. */
.roster{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;border:1px solid var(--ink);background:var(--ink);
  margin-top:1.75rem;padding:0;
}
h2.catband{max-width:none}
.catband{
  grid-column:1/-1;
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  background:var(--ink);color:var(--paper);
  padding:.4rem .75rem;margin:0;border:0;
  border-bottom:1px solid var(--ink);
}
.catband:first-of-type{margin-top:0}
.catband b{
  font-family:var(--disp);font-weight:400;
  font-variation-settings:'wdth' 104,'wght' 800;
  font-size:1.02rem;letter-spacing:-.02em;color:var(--paper);
}
.catband span{
  font-size:.7rem;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;
}

.attr{
  display:grid;grid-template-columns:2.6rem 1fr;gap:0 .85rem;
  background:var(--card);
  padding:.9rem 1rem 1rem;margin:0;
  border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  align-items:start;
}
.attr .n{
  font-family:var(--mono);font-weight:700;font-size:.74rem;
  color:var(--ink);background:var(--teal);
  border:1px solid var(--ink);
  padding:.12rem 0;text-align:center;
  align-self:start;margin-top:.2rem;
}
.attr .body p{
  font-size:.95rem;line-height:1.46;color:var(--ink-2);
  max-width:40ch;margin-top:.3rem;
}
.attr.marked{background:var(--card)}
/* landing from a link like /long-game.html#composure */
.attr[id]{scroll-margin-top:5rem}
.attr:target{background:var(--gold)}
.attr:target .body p{color:var(--ink)}
/* sport pages: the four qualities, no numbers to decode */
.roster--plain .attr{grid-template-columns:1fr}
.attr.marked .n{background:var(--gold)}

/* the single marigold mark */
.mark{
  display:inline-block;margin-top:.6rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  text-decoration:none;font-weight:500;
  background:var(--gold);color:var(--ink);
  border:1px solid var(--ink);padding:.1rem .4rem;
}
.mark:hover{background:var(--ink);color:var(--gold)}
a.row:hover .mark{background:var(--ink);color:var(--gold)}

/* ============================================================ RULED ROWS */
.ruled{
  border:1px solid var(--ink);background:var(--ink);
  display:grid;gap:1px;margin-top:1.75rem;
}
.row{
  display:grid;grid-template-columns:11rem 1fr;gap:0 1.5rem;
  background:var(--card);padding:1.05rem 1.15rem;
  border:0;align-items:start;text-decoration:none;
}
a.row:hover{background:var(--gold)}
a.row:hover h3{color:var(--ink)}
.row .side{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;
}
/* which qualities a sport hits hardest — named in words, never as numbers */
.row .hardest{
  display:block;margin-top:.6rem;font-size:.72rem;letter-spacing:.02em;
  color:var(--ink);font-weight:500;
}
.row p{font-size:.95rem;color:var(--ink-2);max-width:58ch;margin-top:.3rem}

/* the swap and its list, inside an ordinary section (sport pages) */
.open > .swap{margin-top:1.75rem;max-width:46rem}
.open > .say{margin-top:.9rem;max-width:46rem;font-size:.98rem}
.open > .say-h{margin-top:2.25rem}

/* quality → sport index on sports.html */
.qindex{list-style:none;padding:0;margin-top:1.75rem;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--ink);border:1px solid var(--ink)}
.qindex li{background:var(--card);padding:.85rem 1rem 1rem}
.qindex h3 a{text-decoration:none}
.qindex h3 a:hover{box-shadow:inset 0 -.45em 0 var(--gold)}
.qindex p{font-size:.92rem;color:var(--ink-2);margin-top:.25rem}
.qindex p a{color:var(--ink);font-weight:600}
@media (max-width:860px){.qindex{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qindex{grid-template-columns:1fr}}

/* ============================================================ HOW IT WORKS
   numbered steps, the same hard-framed plate as everything else */
.how{padding-block:clamp(1.5rem,3vw,2.25rem) 0}
.how__title{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);max-width:none;
  font-variation-settings:normal;font-weight:500;margin-bottom:.9rem;
}
.steps{
  list-style:none;display:grid;gap:1px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--ink);background:var(--ink);padding:0;margin:0;
}
.steps li{display:flex;gap:.85rem;background:var(--card);padding:1.05rem 1.15rem 1.2rem}
.step-n{
  font-family:var(--mono);font-weight:700;font-size:.74rem;
  background:var(--teal);color:var(--ink);border:1px solid var(--ink);
  padding:.12rem .4rem;height:max-content;flex:0 0 auto;margin-top:.2rem;
}
.steps h3{font-size:1.1rem}
.steps p{font-size:.93rem;line-height:1.46;color:var(--ink-2);margin-top:.35rem}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* ============================================================ INK SLAB */
.filled{
  background:var(--ink);color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.25rem);
}
.filled h1,.filled h2{color:var(--paper)}
.filled p{margin-top:1.1rem;max-width:var(--measure);color:rgba(246,243,234,.84)}
.filled h2 + p{margin-top:1.1rem}
.filled .kicker,.filled .eyebrow{color:var(--pink)}
.filled .sig{
  margin-top:1.6rem;font-family:var(--mono);font-size:.78rem;
  color:var(--gold);font-weight:500;
}
.filled .mark{background:var(--gold);color:var(--ink)}
.filled .catband{border-bottom-color:rgba(246,243,234,.3)}
.filled .catband b{color:var(--paper)}

/* ============================================================ ARTICLE */
.article-hero{
  padding-block:clamp(2.25rem,5.5vw,3.75rem) 1.5rem;
  border-bottom:1px solid var(--ink);
}
.article-hero .subtitle{
  margin-top:1.1rem;max-width:var(--measure);color:var(--ink-2);font-size:1.12rem;
}
.article-hero .meta{margin-top:1.1rem;font-size:.72rem;color:var(--ink-3);letter-spacing:.06em}

.article-body{padding-block:2.5rem 3rem;max-width:var(--measure)}
.article-body > *+*{margin-top:1.15rem}
.article-body h2{margin-top:2.75rem}
.article-body h3{margin-top:2rem}
.article-body ul,.article-body ol{padding-left:1.2rem}
.article-body li+li{margin-top:.5rem}
.article-body strong{font-weight:700}
.article-body a{text-decoration:none;box-shadow:inset 0 -.5em 0 var(--gold)}
.article-body a:hover{box-shadow:inset 0 -1.1em 0 var(--gold)}
.article-body blockquote{
  border:0;border-left:3px solid var(--pink);
  padding-left:1.2rem;color:var(--ink-2);font-size:1.1rem;
}
.article-body hr{border:0;border-top:1px solid var(--rule);margin-block:2.25rem}

/* a hard-framed plate — the system's window, in prose */
.convo-script{
  background:var(--card);
  border:1px solid var(--ink);
  outline:1px solid var(--ink);outline-offset:2px;
  padding:1.3rem 1.4rem;
  font-family:var(--mono);font-size:.84rem;line-height:1.55;
}
.convo-script .line+.line{margin-top:.7rem}
.convo-script .speaker{font-weight:700;color:var(--ink)}

.inline-cta{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding-block:1.4rem;margin-block:2.25rem;
}
.btn-primary,.btn{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-family:var(--disp);font-variation-settings:'wdth' 100,'wght' 700;
  padding:.7rem 1.25rem;text-decoration:none;font-size:.98rem;
  border:1px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .06s linear,box-shadow .06s linear;
}
.btn-primary:hover,.btn:hover{
  background:var(--gold);
  transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);
}
.btn-primary:active,.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* ============================================================ RELATED */
.related-section{border-top:1px solid var(--ink);padding-block:2.25rem 3rem}
.related-section h2{font-size:1.1rem;margin-bottom:.75rem}
.related-grid{border:1px solid var(--ink);background:var(--ink);display:grid;gap:1px}
.related-card{
  display:block;background:var(--card);
  padding:.95rem 1.1rem;border:0;text-decoration:none;
}
.related-card:hover{background:var(--gold)}
.related-card .tag{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.related-card .card-title{
  display:block;font-family:var(--disp);
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:1.08rem;margin-top:.25rem;letter-spacing:-.02em;
}
.related-card .card-desc{
  display:block;font-size:.93rem;color:var(--ink-2);margin-top:.2rem;max-width:58ch;
}

/* ============================================================ NARROW */
@media (max-width:860px){
  .roster{grid-template-columns:1fr}
  .attr{border-right:0}
}

/* ============================================================ TOUCH
   44px minimum tap targets and a floor under the mono chrome.
   Phones hold this site in a parking lot, not at a desk. */
@media (max-width:720px){
  .attr{grid-template-columns:2.2rem 1fr;gap:0 .7rem}
  .attr .cat{grid-column:2;font-size:.78rem;order:-1}
  .attr .body{grid-column:2}
  .roster--plain .attr .body{grid-column:1}
  /* the band is decoration, not a second hero */
  .smokeband{height:52px}
  .btn,.btn-primary{padding:.85rem 1.3rem;font-size:1rem}
  .row{padding:1.05rem 1rem}
  .mark{
    display:inline-flex;align-items:center;min-height:44px;
    padding:.5rem .7rem;font-size:.78rem;margin-top:.5rem;
  }
  .related-card{padding:1.05rem 1rem}
  .kicker,.eyebrow,.row .side,.catband span,
  .related-card .tag,.article-hero .meta{font-size:.76rem;letter-spacing:.1em}
  .row .hardest{font-size:.78rem}
  .attr .n{font-size:.82rem;padding:.2rem 0}
  .steps li{padding:1.05rem 1rem}
}


@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media print{
  body{background:#fff}
  .smokeband,.related-section,.inline-cta{display:none}
  .filled{background:#fff;color:#000}
  .filled p{color:#222}
  .roster,.ruled,.related-grid{background:#fff}
  .attr,.row{border-color:#999}
  .catband{background:#fff;color:#000;border-bottom:2px solid #000}
  .catband b{color:#000}
}

.sr-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}