/* ═══════════════════════════════════════════════════
   WORDLE HINTS — Daylight skin
   ═══════════════════════════════════════════════════ */
:root{
  --paper:#faf8f3;--card:#ffffff;--line:#e8e3d7;
  --text:#21283a;--text-dim:#5d6678;--text-faint:#9aa1b0;
  --green:#3f9d5d;--green-soft:#e4f2e7;
  --amber:#d9930d;--amber-soft:#faf0d8;
  --tile-bg:#ece8de;--tile-absent:#8e97a8;
  --radius:14px;--shell-w:1100px;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-tile:"Martian Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(63,157,93,.05),transparent 60%),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(33,40,58,.022) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(33,40,58,.022) 47px 48px);
}
.shell{position:relative;z-index:1;max-width:var(--shell-w);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}

/* ── HEADER ─────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:rgba(250,248,243,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .bar{max-width:var(--shell-w);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text)}
.logo-tiles{display:flex;gap:3px}
.logo-tiles span{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-family:var(--font-tile);font-size:11px;font-weight:700;color:#fff}
.logo-tiles span:nth-child(1){background:var(--green)}
.logo-tiles span:nth-child(2){background:var(--amber)}
.logo-tiles span:nth-child(3){background:var(--tile-absent)}
.logo b{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.logo b em{font-style:normal;color:var(--green)}
.logo-img{height:26px;width:auto;display:block}
nav.main{margin-left:auto;display:flex;gap:24px;font-size:14.5px}
nav.main a{color:var(--text-dim);font-weight:500;transition:color .15s}
nav.main a:hover,nav.main a.active{color:var(--text)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;width:40px;height:38px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-toggle i{display:block;width:16px;height:2px;border-radius:2px;background:var(--text-dim);transition:transform .2s,opacity .2s}
.nav-toggle.open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open i:nth-child(2){opacity:0}
.nav-toggle.open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── HERO (detail page) ──────────────────────────── */
.hero{padding:56px 0 44px;border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--text-faint);margin-bottom:26px}
.crumb a{color:var(--text-faint);transition:color .15s}
.crumb a:hover{color:var(--green)}
.crumb span{margin:0 7px;opacity:.5}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-tile);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:18px}
.kicker::before{content:"";width:26px;height:1px;background:var(--green);opacity:.6}
.hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:clamp(28px,4.6vw,50px);line-height:1.08;max-width:820px}
.hero h1 .num{color:var(--green)}
.hero .dek{margin-top:16px;font-size:18px;color:var(--text-dim);max-width:600px}
.hero-meta{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:13.5px;font-weight:600;color:var(--text-dim);border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:var(--card)}
.chip b{color:var(--text);font-weight:600}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
/* Detail hero: two-up so a right-side puzzle card balances the text (mirrors the home hero) */
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) 296px;gap:50px;align-items:stretch}}
/* The grid stretches .hero-side to the hero's full height; centering the card here
   (not on the card itself) is what actually vertically centers it against the taller
   left text column. align-items default (stretch) keeps the card full width. */
.hero-side{display:flex;flex-direction:column;justify-content:center}
.hs-card{border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 8px 28px rgba(33,40,58,.07);padding:24px 22px}
.hs-tiles{display:flex;justify-content:center;gap:7px;margin-bottom:20px}
/* Tiles hold the real answer letters but stay masked behind a "?" until the user
   opts in via the Reveal button — same spoiler-safe flip as the main answer stage. */
.hs-tiles span{position:relative;width:min(46px,calc((100% - 28px) / 5));height:auto;aspect-ratio:1;border-radius:9px;background:var(--tile-bg);display:grid;place-items:center;font-family:var(--font-tile);font-weight:700;font-size:clamp(16px,4.4vw,21px);color:transparent;transition:background .5s ease,color .1s ease .25s,transform .5s ease,box-shadow .5s ease}
.hs-tiles span::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:var(--text-faint)}
.hs-card.revealed .hs-tiles span{background:var(--green);color:#fff;transform:rotateX(360deg);box-shadow:0 4px 14px rgba(63,157,93,.28)}
.hs-card.revealed .hs-tiles span::after{display:none}
.hs-card.revealed .hs-tiles span:nth-child(1){transition-delay:0s}
.hs-card.revealed .hs-tiles span:nth-child(2){transition-delay:.1s}
.hs-card.revealed .hs-tiles span:nth-child(3){transition-delay:.2s}
.hs-card.revealed .hs-tiles span:nth-child(4){transition-delay:.3s}
.hs-card.revealed .hs-tiles span:nth-child(5){transition-delay:.4s}
.hs-stats{list-style:none}
.hs-stats li{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-dim)}
.hs-stats li:first-child{border-top:none}
.hs-stats b{font-family:var(--font-tile);font-weight:700;font-size:13.5px;color:var(--text)}
.hs-reveal{margin-top:18px;width:100%;font-family:var(--font-body);font-weight:600;font-size:14.5px;background:var(--amber-soft);color:#9c6a06;border:1px solid #ecd9a8;border-radius:11px;padding:11px 16px;cursor:pointer;transition:background .2s}
.hs-reveal:hover{background:#f5e7c4}
/* Keep the button in place after reveal (no height shift) — just switch it to a calm
   "revealed" state so it no longer reads as a pending action. */
.hs-card.revealed .hs-reveal{background:var(--green-soft);color:var(--green);border-color:#bcd9c5;cursor:default}

/* ── BUTTONS ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15.5px;border-radius:11px;padding:13px 24px;transition:transform .15s,box-shadow .15s;cursor:pointer;border:none}
.btn:active{transform:scale(.98)}
.btn-solid{background:var(--green);color:#fff;box-shadow:0 2px 10px rgba(63,157,93,.22)}
.btn-solid:hover{box-shadow:0 6px 22px rgba(63,157,93,.3)}
.btn-ghost{border:1px solid var(--line);color:var(--text-dim);background:var(--card)}
.btn-ghost:hover{color:var(--text);border-color:#d4cebf}

/* ── SECTIONS ────────────────────────────────────── */
section{padding:48px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.sec-step{font-family:var(--font-tile);font-weight:700;font-size:13px;color:var(--green);letter-spacing:.1em}
.sec-head h2{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-.015em}
.sec-sub{font-size:14px;color:var(--text-faint);flex-basis:100%;margin-top:2px}
@media(min-width:640px){.sec-sub{flex-basis:auto;margin-left:auto;margin-top:0}}

/* ── DETAIL TWO-COLUMN (page-level) ──────────────── */
/* The whole article body lives in a left column with a persistent "On this page"
   sidebar on the right. Keeps the TOC always visible AND caps content width so prose
   never runs too wide on large screens. Single column (sidebar hidden) below 980px —
   where per-section card/grid caps keep widths comfortable on their own. */
.detail-grid{display:grid;grid-template-columns:1fr;gap:0}
/* No align-items:start here — the aside column must STRETCH to the full row height
   (default `stretch`) so its sticky inner box has the whole article length to travel.
   With align-items:start the column collapses to the TOC's own height and the sticky
   nav scrolls out of view almost immediately. */
@media(min-width:980px){.detail-grid{grid-template-columns:minmax(0,1fr) 270px;column-gap:56px}}
.detail-main{min-width:0}
.detail-aside{display:none}
@media(min-width:980px){
  .detail-aside{display:block;padding-top:48px}
  .detail-aside-in{position:sticky;top:84px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 1px 3px rgba(33,40,58,.04);padding:20px 22px}
}
.detail-aside h3{font-family:var(--font-tile);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.detail-aside ul{list-style:none}
.detail-aside li{border-bottom:1px dotted #e3ddcf}
.detail-aside li:last-child{border-bottom:none}
.detail-aside a{display:flex;align-items:center;gap:10px;padding:9px 2px;color:var(--text-dim);font-size:14px;transition:color .15s}
.detail-aside a:hover{color:var(--green)}
.detail-aside .dot{width:8px;height:8px;border-radius:3px;background:var(--tile-bg);flex:none}
.detail-aside a:hover .dot{background:var(--green)}
.detail-aside .aside-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--text-faint)}
.rung{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin-bottom:14px;overflow:hidden;box-shadow:0 1px 3px rgba(33,40,58,.04);transition:border-color .2s}
.rung:last-child{margin-bottom:0}
.rung.open{border-color:#bcd9c5}
.rung-head{width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:none;border:none;color:var(--text);cursor:pointer;padding:17px 20px;font-family:var(--font-body);font-size:16px}
.rung-no{width:34px;height:34px;flex:none;border-radius:8px;display:grid;place-items:center;font-family:var(--font-tile);font-weight:700;font-size:14px;background:var(--tile-bg);color:var(--text-dim);transition:background .25s,color .25s,box-shadow .25s}
.rung.open .rung-no{background:var(--green);color:#fff;box-shadow:0 2px 12px rgba(63,157,93,.3)}
.rung-title{font-weight:600}
.rung-spoil{margin-left:auto;display:flex;align-items:center;gap:10px}
.heat{display:flex;gap:3px}
.heat i{width:14px;height:5px;border-radius:3px;background:#e6e1d4}
.heat i.on{background:var(--amber)}
.rung-arr{color:var(--text-faint);font-size:13px;transition:transform .25s}
.rung.open .rung-arr{transform:rotate(180deg)}
.rung-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.rung.open .rung-body{max-height:600px}
.rung-body-in{padding:2px 20px 20px 68px;color:var(--text-dim);font-size:16.5px;line-height:1.6}
.rung-body-in strong{color:var(--text)}
.rung-body-in .tile-inline{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--green);color:#fff;font-family:var(--font-tile);font-weight:700;font-size:14px;vertical-align:-6px;margin:0 2px}

/* ── ANSWER REVEAL ───────────────────────────────── */
.answer-stage{border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 1px 3px rgba(33,40,58,.04);padding:44px 24px;text-align:center}
.a-tile-row{display:flex;justify-content:center;gap:9px;margin-bottom:26px}
.a-tile{width:min(68px,calc((100% - 36px) / 5));height:auto;aspect-ratio:1;border-radius:10px;background:var(--tile-bg);display:grid;place-items:center;font-family:var(--font-tile);font-weight:700;font-size:clamp(20px,6vw,30px);color:transparent;transform-style:preserve-3d;transition:transform .5s ease,background .5s ease,color .1s ease .25s,box-shadow .5s ease}
.answer-stage.revealed .a-tile{background:var(--green);color:#fff;transform:rotateX(360deg);box-shadow:0 6px 18px rgba(63,157,93,.3)}
.answer-stage.revealed .a-tile:nth-child(1){transition-delay:.00s}
.answer-stage.revealed .a-tile:nth-child(2){transition-delay:.12s}
.answer-stage.revealed .a-tile:nth-child(3){transition-delay:.24s}
.answer-stage.revealed .a-tile:nth-child(4){transition-delay:.36s}
.answer-stage.revealed .a-tile:nth-child(5){transition-delay:.48s}
.answer-note{color:var(--text-faint);font-size:14.5px;margin-bottom:18px}
.answer-stage.revealed .answer-note{display:none}
.reveal-btn{font-family:var(--font-body);font-weight:600;font-size:15.5px;background:var(--amber-soft);color:#9c6a06;border:1px solid #ecd9a8;border-radius:11px;padding:12px 26px;cursor:pointer;transition:background .2s}
.reveal-btn:hover{background:#f5e7c4}
.answer-stage.revealed .reveal-btn{display:none}
.answer-after{display:none;color:var(--text-dim);font-size:16px;max-width:520px;margin:20px auto 0;line-height:1.65}
.answer-stage.revealed .answer-after{display:block}
.answer-after b{color:var(--text)}

/* ── ANALYSIS ────────────────────────────────────── */
/* Single card: the score and the badge share one row (badge right-aligned), a progress
   bar sits under them, then the explanation below — separated by a hairline rule. */
.an-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 1px 3px rgba(33,40,58,.04);padding:22px 24px}
.an-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.an-label{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px}
.an-val{font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-.02em;line-height:1}
.an-val small{font-size:16px;color:var(--text-faint);font-weight:500}
.an-badge{flex:none;font-family:var(--font-tile);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:6px;background:var(--green-soft);color:var(--green)}
.an-badge.medium{background:var(--amber-soft);color:var(--amber)}
.an-badge.hard{background:#fce8e8;color:#c44}
.diffbar{height:6px;border-radius:4px;background:#ece7db;margin-top:16px;overflow:hidden}
.diffbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--amber))}
.an-why{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.an-why h3{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:8px;color:var(--text)}
.an-why p{color:var(--text-dim);font-size:16px;line-height:1.7}
.an-why p b{color:var(--text)}

/* ── WORDLE TILES ────────────────────────────────── */
.tile{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-family:var(--font-tile);font-weight:700;font-size:15px;color:#fff;border-radius:7px;text-transform:uppercase;flex-shrink:0}
.tile.correct{background:var(--green)}
.tile.present{background:var(--amber)}
.tile.absent{background:var(--tile-absent)}

/* ── SOLVING PATH ────────────────────────────────── */
.path-intro{font-size:15px;color:var(--text-dim);line-height:1.6;margin-bottom:20px;max-width:64ch}
.word-facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:24px;padding:12px 18px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.word-facts span{font-size:13px;color:var(--text-dim)}
.word-facts strong{color:var(--text)}
/* Single column on all sizes — the two openers stack one per row. */
.path-section{display:grid;grid-template-columns:1fr;gap:16px}
.path-block{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 1px 3px rgba(33,40,58,.04);padding:22px 24px}
.path-block-label{font-family:var(--font-tile);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px}
.path-rows{display:flex;flex-direction:column}
.path-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f0ece3}
.path-row:last-child{border-bottom:none}
.path-step-num{font-family:var(--font-tile);font-size:11px;font-weight:700;color:var(--text-faint);width:18px;flex-shrink:0;text-align:center}
.path-word{font-family:var(--font-tile);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;width:52px;flex-shrink:0;color:var(--text-dim)}
.path-word.final{color:var(--green)}
.path-tiles{display:flex;gap:4px}
.path-tiles .tile{width:34px;height:34px;font-size:13px;border-radius:6px}
.step-rung{border-top:1px solid #f0ece3}
.step-reveal-btn{width:100%;text-align:left;background:none;border:none;display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--text-faint);cursor:pointer;padding:9px 0;transition:color .15s}
.step-reveal-btn::before{content:"▸";font-size:11px;transition:transform .2s}
.step-reveal-btn:hover{color:var(--green)}
.step-rung .path-row{display:none;border-top:none;border-bottom:none;padding:4px 0 6px}
.step-rung.open .path-row{display:flex}
.step-rung.open .step-reveal-btn{color:var(--green)}
.step-rung.open .step-reveal-btn::before{transform:rotate(90deg)}

/* ── WORD STORY ──────────────────────────────────── */
/* A short etymology reads as a simple green-accented pull-quote — gives the thin block
   a little presence without a decorative letter sitting alone on the left. */
.story-block{max-width:720px;color:var(--text-dim);font-size:16.5px;line-height:1.7;padding:2px 0 2px 20px;border-left:3px solid var(--green-soft)}

/* ── RECENT / YESTERDAY ──────────────────────────── */
.yest{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 1px 3px rgba(33,40,58,.04);padding:20px 22px;margin-bottom:20px}
.yest .mini-tiles{display:flex;gap:4px}
.yest .mini-tiles span{width:32px;height:32px;border-radius:6px;background:var(--tile-absent);display:grid;place-items:center;font-family:var(--font-tile);font-weight:700;font-size:14px;color:#fff}
.yest p{color:var(--text-dim);font-size:15px}
.yest p b{color:var(--text)}
.yest-link{margin-left:auto;color:var(--green)!important;font-weight:600;font-size:14.5px;white-space:nowrap}
.recent-list{list-style:none}
.recent-list li{border-bottom:1px solid var(--line)}
.recent-list li:last-child{border-bottom:none}
.recent-list a{display:flex;align-items:center;gap:14px;padding:14px 4px;color:var(--text-dim);font-size:15px;transition:color .15s}
.recent-list a:hover{color:var(--text)}
.recent-list .rn{font-family:var(--font-tile);font-size:12.5px;color:var(--text-faint);width:62px;flex:none}
.recent-list .dotline{flex:1;border-bottom:1px dotted #d8d2c3;height:1px}
.recent-list .go{color:var(--green);font-size:13px;font-weight:600;white-space:nowrap}

/* ── PREV/NEXT ───────────────────────────────────── */
.pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:40px 0 24px}
.pn-link{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:5px;transition:border-color .15s,box-shadow .15s}
.pn-link:hover{border-color:#bcd9c5;box-shadow:0 4px 14px rgba(33,40,58,.07)}
.pn-link.next{text-align:right}
.pn-dir{font-family:var(--font-tile);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.pn-label{font-size:14px;font-weight:600;color:var(--text)}

/* ── HOME ────────────────────────────────────────── */
.home-hero{padding:64px 0 52px;border-bottom:1px solid var(--line)}
.home-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:920px){.home-grid{grid-template-columns:minmax(0,1fr) 400px}}
.home-hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:clamp(32px,5.2vw,54px);line-height:1.08;max-width:640px}
.home-hero h1 .num{color:var(--green)}
.home-hero .dek{margin-top:16px;font-size:18px;color:var(--text-dim);max-width:540px}
/* Small timezone note under the hero CTAs — fills the left column; link stands out in green */
.hero-note{margin-top:24px;font-size:14px;line-height:1.65;color:var(--text-faint);max-width:450px}
.hero-note em{font-style:italic;color:var(--text-dim)}
.hero-note a{color:var(--green);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.hero-note a:hover{border-bottom-color:var(--green)}
.today-card{border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 10px 36px rgba(33,40,58,.08);padding:24px 24px;text-align:center}
.today-card .tc-kick{font-family:var(--font-tile);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:11px}
.today-card .tc-tiles{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.today-card .tc-tile{width:48px;height:48px;border-radius:9px;background:var(--tile-bg);display:grid;place-items:center;font-family:var(--font-tile);font-weight:700;font-size:20px;color:var(--text-faint)}
.today-card h2{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:3px}
.today-card h2 .num{color:var(--green)}
.today-card .tc-date{color:var(--text-faint);font-size:14px;margin-bottom:14px}
.today-card .tc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px}
.today-card .tc-cta{display:flex;flex-direction:column;gap:9px}
.today-card .btn{width:100%}
.today-card .tc-hint{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin-bottom:14px;font-size:14px;line-height:1.55;color:var(--text-dim)}
.today-card .tc-hint b{display:block;font-family:var(--font-tile);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.tc-answer-stage{border:none;box-shadow:none;background:transparent;padding:0;margin-bottom:14px}
.tc-answer-stage .a-tile-row{margin-bottom:11px}
.tc-answer-stage .a-tile{width:38px;height:38px;font-size:18px;border-radius:8px}
.tc-answer-stage .answer-note{font-size:12.5px;margin-bottom:10px}
.tc-answer-stage .reveal-btn{font-size:13.5px;padding:8px 18px}
.tc-answer-stage .answer-after{font-size:14.5px;margin-top:10px}

/* ── HOW IT WORKS ────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.step-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 1px 3px rgba(33,40,58,.04);padding:24px}
.step-card .s-no{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-tile);font-weight:700;font-size:14px;background:var(--green);color:#fff;margin-bottom:16px}
.step-card:nth-child(2) .s-no{background:var(--amber)}
.step-card:nth-child(3) .s-no{background:var(--tile-absent)}
.step-card h3{font-family:var(--font-display);font-weight:700;font-size:18px;margin-bottom:8px}
.step-card p{color:var(--text-dim);font-size:15px}

/* ── STRATEGY CARDS ──────────────────────────────── */
.strat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.strat a{display:block;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 1px 3px rgba(33,40,58,.04);padding:22px;color:var(--text);transition:border-color .2s,transform .2s,box-shadow .2s}
.strat a:hover{border-color:#bcd9c5;transform:translateY(-2px);box-shadow:0 6px 18px rgba(33,40,58,.07)}
.strat h3{font-family:var(--font-display);font-weight:700;font-size:18px;margin-bottom:8px}
.strat p{color:var(--text-dim);font-size:14.5px}
.strat .arr{display:inline-block;margin-top:14px;color:var(--green);font-weight:600;font-size:14px}

/* ── PROSE ───────────────────────────────────────── */
.prose{color:var(--text-dim);font-size:16.5px;max-width:760px;line-height:1.7}
.prose p+p{margin-top:14px}
.prose b{color:var(--text)}
/* Home evergreen content: two-up on desktop — heading column on the left, a single
   readable text column on the right — so each section fills the full shell width like
   the card grids above (no jarring narrow band) while keeping a comfortable line length.
   Falls back to a single readable column on mobile. */
.home-prose{max-width:760px}
@media(min-width:860px){
  section:has(.home-prose){display:grid;grid-template-columns:minmax(210px,280px) minmax(0,1fr);column-gap:56px;align-items:center}
  section:has(.home-prose) .sec-head{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:0;max-width:none}
  section:has(.home-prose) .home-prose{max-width:none}
}

/* ── ARCHIVE ─────────────────────────────────────── */
.archive-hero{padding:52px 0 40px;border-bottom:1px solid var(--line)}
.archive-hero .dek{max-width:none}
.archive-body{padding:clamp(40px,5vw,56px) 0}
.archive-intro{margin:0 0 38px;color:var(--text-dim);font-size:16px;line-height:1.7;text-align:left}
.archive-intro p+p{margin-top:12px}
.archive-intro strong{color:var(--text)}
.archive-month{margin-bottom:42px}
.archive-month-label{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--text)}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.archive-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:14px 16px;display:block;transition:border-color .15s,transform .15s,box-shadow .15s}
.archive-item:hover{border-color:#bcd9c5;transform:translateY(-1px);box-shadow:0 4px 12px rgba(33,40,58,.07)}
.archive-item .ai-no{font-family:var(--font-tile);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.archive-item .ai-date{font-size:14px;font-weight:600;color:var(--text)}

/* ── FOOTER ──────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:38px 0 52px}
.ft-top{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.ft-navs{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.ft-nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.ft-nav a{color:var(--text-dim);font-size:14px;font-weight:500;transition:color .15s}
.ft-nav a:hover{color:var(--text)}
.ft-nav-sm a{font-size:13px;color:var(--text-faint)}
.ft-nav-sm a:hover{color:var(--text-dim)}
.ft-legal{margin-top:22px;font-size:12.5px;color:var(--text-faint);max-width:580px;line-height:1.65}

/* ── STATIC PAGES ────────────────────────────────── */
/* Static article pages: center the content column and keep it narrower than the
   full-width header/footer for a comfortable reading measure. */
.page-hero{max-width:760px;margin:0 auto;padding:52px 0 40px;border-bottom:1px solid var(--line)}
.page-body{max-width:760px;margin:0 auto;padding:clamp(40px,5vw,60px) 0}
.page-body h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.8vw,28px);letter-spacing:-.01em;margin:36px 0 14px}
.page-body h3{font-weight:600;font-size:16px;margin:24px 0 8px}
.page-body p{margin-bottom:16px;line-height:1.7;max-width:68ch;color:var(--text-dim)}
.page-body ul,.page-body ol{padding-left:24px;margin-bottom:18px}
.page-body li{margin-bottom:8px;line-height:1.6;color:var(--text-dim)}
.page-body a{color:var(--green);text-decoration:underline}
/* Buttons inside prose must NOT pick up the green underlined link styling above
   (which outranks .btn-solid and made green-on-green text invisible). */
.page-body .btn{text-decoration:none}
.page-body a.btn-solid{color:#fff}
.page-body a.btn-ghost{color:var(--text-dim)}
.page-body section{border:none;padding:0}
.page-body .tile-demo{display:flex;align-items:center;gap:16px;margin:20px 0 28px;flex-wrap:wrap}
.page-body .tile-demo-row{display:flex;gap:5px}

/* ── FAQ ─────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:0}
.faq-item{padding:22px 0;border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item h3{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:10px;color:var(--text)}
.faq-item p{color:var(--text-dim);font-size:16px;line-height:1.7;max-width:72ch}

/* ── PAGE/ARCHIVE HERO HEADINGS ─────────────────── */
.page-hero h1,.archive-hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:clamp(28px,4vw,48px);line-height:1.1;max-width:820px;margin-top:8px}
.page-hero .dek,.archive-hero .dek{margin-top:14px;font-size:17px;color:var(--text-dim);max-width:600px}

/* ── TILE LEGEND (how-to-play) ───────────────────── */
.tile-legend{display:flex;flex-direction:column;gap:12px;margin:20px 0 28px}
.tl-row{display:flex;align-items:center;gap:16px}
.tl-row>div:last-child{font-size:15.5px;color:var(--text-dim)}
.tl-row strong{color:var(--text)}

/* ── STARTER CARDS (strategy) ────────────────────── */
.starter-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:560px){.starter-grid{grid-template-columns:1fr}}
.starter-card{border:2px solid var(--text);border-radius:var(--radius);padding:20px 22px}
.starter-word{font-family:var(--font-tile);font-weight:700;font-size:22px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px!important;color:var(--text)}
.starter-card p{font-size:14px;color:var(--text-dim);margin-bottom:0!important;max-width:none!important}

/* ── PAGE CTA ────────────────────────────────────── */
.page-cta{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}

/* ── ARCHIVE EMPTY ───────────────────────────────── */
.archive-empty{padding:48px 0;color:var(--text-faint);font-size:15px}

/* ── PAGE LOAD ANIMATION ─────────────────────────── */
.hero>*,.home-hero .home-grid>*,section .sec-head,section .rung,section .answer-stage{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
.hero>:nth-child(2),.home-hero .home-grid>:nth-child(2){animation-delay:.08s}
.hero>:nth-child(3){animation-delay:.12s}
.hero>:nth-child(4){animation-delay:.16s}
.hero>:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── MOBILE ──────────────────────────────────────── */
@media(max-width:700px){
  body{font-size:16px}
  .shell{padding:0 18px}
  .site-head .bar{padding:12px 18px}
  .nav-toggle{display:flex}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(33,40,58,.1);flex-direction:column;gap:0;padding:6px 0}
  nav.main.open{display:flex}
  nav.main a{padding:13px 22px;font-size:15.5px;border-bottom:1px solid #f1ede3}
  nav.main a:last-child{border-bottom:none}
  .hero,.home-hero{padding:38px 0 32px}
  .crumb{margin-bottom:18px}
  .hero .dek{font-size:16.5px}
  .hero-meta{margin-top:22px;gap:8px}
  .chip{font-size:12.5px;padding:6px 12px}
  .hero-cta{margin-top:24px}
  .btn{flex:1 1 100%}
  section{padding:34px 0}
  .sec-head{margin-bottom:20px;gap:10px}
  .sec-head h2{font-size:22px}
  .rung-head{padding:14px 14px;gap:11px}
  .heat{display:none}
  .rung-body-in{padding:0 16px 18px}
  .answer-stage{padding:32px 14px}
  .a-tile-row{gap:6px}
  .an-val{font-size:28px}
  .an-card{padding:18px}
  .yest{padding:16px}
  .yest-link{margin-left:0;flex-basis:100%}
  .today-card{padding:24px 18px}
  .today-card .tc-tile{width:40px;height:40px;font-size:17px}
  .pn-nav{grid-template-columns:1fr}
  .path-row{gap:8px}
  .path-word{width:46px;font-size:11.5px}
  .path-tiles{gap:3px}
  .path-tiles .tile{width:min(30px,calc((100vw - 168px) / 5));height:auto;aspect-ratio:1;font-size:11px}
  .path-block{padding:16px 14px}
  .ft-top{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:20px}
  .ft-navs{align-items:flex-start}
  .ft-nav{justify-content:flex-start;gap:16px}
}