/* RecapWP About page — "Ledger" design, page sheet.
 *
 * A faithful port of the design handoff's About sheet:
 *   docs/design_handoff_marketing_site_Ledger/design_files/site/about-ledger.css
 * Ported VERBATIM so the design is pixel-exact. Local changes live in the marked
 * "THEME ADDITIONS" block at the foot — keep the ported rules untouched so the
 * next design drop can be diffed against this file.
 *
 * Layers ON TOP of ledger.css (the shared Ledger base), which must load first —
 * see the enqueue map in functions.php. Everything here is About-only: the hero,
 * the founder note (drop-cap lede, pull-quote, signature), the beliefs grid and
 * the roadmap. Shared blocks (.sect, .sect-hd, .kick, .hero-marks, the closing
 * band, the footer) come from ledger.css.
 *
 * NOTE — .pull is also defined, differently, in ledger-article.css: the article's
 * pull-quote is a bordered card, this one is a rule-and-hang. Both exist because
 * the handoff defines both; the two pages never load together, so they can't
 * collide. Same arrangement as .fchip across blog + changelog.
 *
 * ORPHAN ATOM — .seal-plate (and .note-sign .sp, the spacer that would push it
 * right) is styled here but rendered by nothing: the design's own About page
 * never puts a seal beside the signature, though its CSS and its 1080px
 * stacking rule clearly expect one. Ported as-is rather than invented into the
 * markup. If the seal is meant to ship, it needs its letter + label specified.
 */
/* RecapWP About — Ledger · extends home-ledger.css */

/* ── hero (inside .mast) ── */
.hero-about{padding:64px 0 66px;max-width:860px}
.hero-about h1{font:500 clamp(38px,4.4vw,58px)/1.1 var(--serif);letter-spacing:-.015em;color:#F5F1E7;text-wrap:balance}
.hero-about h1 em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.hero-about .sub{font:400 15px/1.75 var(--sans);color:#9AA5AE;margin-top:20px;max-width:620px}
.hero-about .sub b{color:#D5DCE1;font-weight:600}
.hero-about .hero-marks{max-width:600px}

/* ── founder note ── */
.note-sect{padding:76px 0}
.note-head{max-width:660px;margin:0 auto 36px}
.note-head .kick{font:600 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ac);
  display:flex;align-items:center;gap:12px;margin-bottom:16px}
.note-head .kick::after{content:'';height:1px;width:36px;background:color-mix(in oklab,var(--ac) 40%,transparent)}
.note-head h2{font:500 clamp(19px,3.4vw,34px)/1.16 var(--serif);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.note-head h2 em{font-style:normal;color:var(--ac)}

.note-body{max-width:660px;margin:0 auto}
.note-body p{font:400 16px/1.85 var(--sans);color:var(--ink);margin-top:22px;text-wrap:pretty}
.note-body p:first-child{margin-top:0}
.note-body p.lede{font-size:17px}
.note-body p em{font-style:italic;color:var(--mut)}
.note-body p b{font-weight:600}
/* drop cap */
.note-body p.lede::first-letter{float:left;font:500 62px/0.82 var(--serif);color:var(--ac);
  margin:6px 12px 0 0;padding:0}
/* pull quote */
.pull{max-width:700px;margin:44px auto;padding:8px 0 8px 28px;border-left:3px solid color-mix(in oklab,var(--ac) 55%,#fff)}
.pull q{font:500 24px/1.4 var(--serif);color:var(--ink);quotes:none;text-wrap:balance}
.pull q::before,.pull q::after{content:''}
.pull .cite{font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--hint);margin-top:16px;display:block}

/* signature + sealed plate */
.note-sign{max-width:660px;margin:40px auto 0;display:flex;align-items:center;gap:28px;
  padding-top:28px;border-top:1px solid var(--card-ln)}
.note-sign .sg{font:500 20px var(--serif);color:var(--ink)}
.note-sign .sr{font:12px var(--mono);color:var(--hint);margin-top:5px}
.note-sign .sp{flex:1}
.seal-plate{flex-shrink:0;text-align:center;border:1px solid var(--card-ln);border-radius:4px;
  background:var(--card);box-shadow:var(--shadow-1);padding:14px 20px}
.seal-plate .seal{width:40px;height:40px;margin:0 auto 8px;border-radius:50%;
  border:1px solid color-mix(in oklab,var(--ac) 55%,#fff);display:flex;align-items:center;justify-content:center;
  font:500 17px var(--serif);color:color-mix(in oklab,var(--ac) 85%,#5B4A1E);background:color-mix(in oklab,var(--ac) 7%,#fff)}
.seal-plate .si{font:600 9px var(--mono);letter-spacing:.14em;color:var(--hint)}

/* ── beliefs ── */
.beliefs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--card);
  border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.belief{padding:30px 32px 28px;border-right:1px solid var(--card-ln);border-bottom:1px solid var(--card-ln)}
.belief:nth-child(2n){border-right:0}
.belief:nth-last-child(-n+2){border-bottom:0}
.belief .bn{font:500 26px var(--serif);color:color-mix(in oklab,var(--ac) 72%,#5B4A1E);letter-spacing:-.01em}
.belief h3{font:600 18px var(--serif);color:var(--ink);margin-top:12px}
.belief p{font:400 13.5px/1.7 var(--sans);color:var(--mut);margin-top:10px;text-wrap:pretty}
.belief p b{font-weight:600;color:var(--ink)}

/* ── what's next · roadmap grid ── */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--card);
  border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.rm-item{padding:26px 26px 28px;border-right:1px solid var(--card-ln);display:flex;flex-direction:column}
.rm-item:last-child{border-right:0}
.rm-item .rm-n{font:600 10px var(--mono);letter-spacing:.2em;color:var(--hint);
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 60%,#fff)}
.rm-item h3{font:600 16px var(--serif);color:var(--ink)}
.rm-item p{font:400 13px/1.65 var(--sans);color:var(--mut);margin-top:9px;text-wrap:pretty}

@media (max-width:1080px){
  .beliefs{grid-template-columns:1fr}
  .belief{border-right:0}
  .belief:nth-last-child(2){border-bottom:1px solid var(--card-ln)}
  .roadmap{grid-template-columns:1fr 1fr}
  .rm-item:nth-child(2n){border-right:0}
  .rm-item:nth-child(-n+2){border-bottom:1px solid var(--card-ln)}
  .note-sign{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:560px){
  .roadmap{grid-template-columns:1fr}
  .rm-item{border-right:0;border-bottom:1px solid var(--card-ln)}
  .rm-item:last-child{border-bottom:0}
}


/* ══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — not in the design handoff's about-ledger.css.
   Everything above this line is the verbatim port. Keep new rules below it.
   ══════════════════════════════════════════════════════════════════════════ */

/* PROTOTYPE BUG — the note headline is `white-space:nowrap`, which is a fixed
   width inside a fluid container, so on a small phone it just runs off the page.
   The design's own About page does this too: 45px of the headline hangs past the
   viewport at 390px, and 71px at 320px.

   Why it breaks: the headline scales with clamp(19px, 3.4vw, 34px), which stops
   shrinking at 19px once the viewport is under ~559px. From there the text is a
   fixed 347px, so with the shell's 44px gutters it needs a 435px viewport. Below
   that it can neither shrink nor wrap, and the only thing left for it to do is
   overflow.

   Nowrap earns its place on a wide screen (at 34px the headline is ~660px and
   would otherwise break to two lines mid-phrase), so it stays — it's released
   only below the width where it cannot fit. Recompute 440px if this headline's
   copy changes: it's the text's 19px width plus both gutters, rounded up. */
@media (max-width:440px){
  .note-head h2{white-space:normal;text-wrap:balance}
}