/* doc.css — shared styling for the prose pages: /about, /contact, /privacy.
 *
 * The tokens are lifted verbatim from plans.html rather than re-picked, so these pages sit in
 * the same light/dark system as the rest of the site. Brass is #8F6716 on light ground: the
 * lighter brass fails AA against --paper, and that regression has been fixed here once before.
 *
 * These three pages share a stylesheet instead of inlining it, because they are one design
 * repeated three times; index.html and plans.html keep their inline CSS since each is a
 * one-off layout. */

:root{
  --paper:#F1F3F1;        /* ledger grey-green, not cream */
  --card:#FBFCFB;
  --ink:#121D2B;          /* deep navy-black */
  --navy:#1B3A5C;
  --brass:#8F6716;        /* deepened for AA on light ground */
  --brass-lit:#C08A2D;
  --muted:#57626D;        /* grey biased toward the navy */
  --rule:#D3D8D3;
  --rule-soft:#E2E6E2;
  --tint:#F6F1E4;
  --shadow:0 1px 2px rgba(18,29,43,.05), 0 8px 24px -16px rgba(18,29,43,.25);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1620; --card:#141F2C; --ink:#E7ECE9; --navy:#9DBBD8;
    --brass:#D9A63F; --brass-lit:#E8BC5E; --muted:#93A0AC;
    --rule:#26333F; --rule-soft:#1D2833; --tint:#1C2634;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1620; --card:#141F2C; --ink:#E7ECE9; --navy:#9DBBD8;
  --brass:#D9A63F; --brass-lit:#E8BC5E; --muted:#93A0AC;
  --rule:#26333F; --rule-soft:#1D2833; --tint:#1C2634;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
      font-variant-numeric:tabular-nums}

.wrap{max-width:820px; margin:0 auto; padding:clamp(32px,6vw,72px) clamp(20px,5vw,40px)}

/* ---- masthead ------------------------------------------------------------- */
.eyebrow{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); font-weight:600; margin:0;
}
.eyebrow a{color:inherit; text-decoration:none}
.eyebrow a:hover{text-decoration:underline}
h1{
  font-size:clamp(30px,5.2vw,46px); line-height:1.12; margin:14px 0 0;
  letter-spacing:-.02em; text-wrap:balance; font-weight:600;
}
.lede{margin:16px 0 0; max-width:56ch; color:var(--muted); font-size:16.5px}

.corpus{
  display:flex; flex-wrap:wrap; gap:0; margin:28px 0 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.corpus div{flex:1 1 130px; padding:14px 18px 14px 0}
.corpus dt{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.corpus dd{margin:4px 0 0; font-size:21px; font-weight:600; letter-spacing:-.01em}

/* ---- section labels ------------------------------------------------------- */
.section-label{
  margin:clamp(36px,6vw,56px) 0 15px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.section-label .note{
  letter-spacing:0; text-transform:none; font-weight:400;
  font-size:14px; color:var(--brass);
}

/* ---- prose ---------------------------------------------------------------- */
main p{margin:0 0 15px; max-width:68ch}
main p:last-child{margin-bottom:0}
main a{color:var(--brass); text-decoration:underline; text-underline-offset:2px}
main a:hover{color:var(--brass-lit)}
main a:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:2px}
main strong{font-weight:600}

main ul{margin:0 0 15px; padding-left:0; list-style:none; max-width:68ch}
main ul li{position:relative; padding-left:16px; margin-bottom:8px}
main ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--brass-lit); opacity:.85;
}

/* ---- card grid ------------------------------------------------------------ */
.grid{display:grid; gap:20px 32px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid h3{font-size:15.5px; margin:0 0 4px; font-weight:600}
.grid p{margin:0; font-size:14px; color:var(--muted); line-height:1.55}

/* ---- contact rows --------------------------------------------------------- */
.channels{display:flex; flex-direction:column; gap:12px; margin:0}
.channel{
  background:var(--card); border:1px solid var(--rule); border-radius:3px;
  padding:20px clamp(18px,3vw,26px); box-shadow:var(--shadow);
}
.channel h3{margin:0; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--muted); font-weight:600}
.channel .value{margin:7px 0 0; font-size:20px; font-weight:600; letter-spacing:-.01em;
                word-break:break-word}
.channel .value a{color:var(--ink); text-decoration:none}
.channel .value a:hover{color:var(--brass)}
.channel p.what{margin:8px 0 0; font-size:14px; color:var(--muted); max-width:60ch}

/* ---- ledger table --------------------------------------------------------- */
.ledger{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  background:var(--card); border:1px solid var(--rule);
  border-radius:3px; box-shadow:var(--shadow); margin:0 0 15px;
}
.ledger th,.ledger td{
  padding:13px clamp(14px,2.4vw,22px); text-align:right;
  border-bottom:1px solid var(--rule-soft);
}
.ledger th:first-child,.ledger td:first-child{text-align:left}
.ledger thead th{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--rule);
}
.ledger tbody tr:last-child th,.ledger tbody tr:last-child td{border-bottom:0}
.ledger tbody th{font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1.25}

/* ---- cta ------------------------------------------------------------------ */
.cta{
  margin-top:clamp(34px,5vw,48px); padding:26px clamp(20px,3vw,30px);
  border:1px solid var(--rule); border-radius:3px; background:var(--card);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; box-shadow:var(--shadow);
}
.cta div{flex:1 1 260px}
.cta h2{font-size:19px; margin:0 0 5px; font-weight:600; letter-spacing:-.01em}
.cta p{margin:0; color:var(--muted); font-size:14.5px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--brass); color:#fff; border-radius:3px;
  padding:13px 22px; font-size:14.5px; font-weight:600; letter-spacing:.01em;
  transition:filter .18s ease, transform .18s ease;
}
:root[data-theme="dark"] .btn,
:root:not([data-theme="light"]) .btn{color:#121D2B}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn{transition:none} .btn:hover{transform:none}}

/* ---- footer --------------------------------------------------------------- */
footer{
  margin-top:44px; padding-top:18px; border-top:1px solid var(--rule-soft);
  color:var(--muted); font-size:12.5px; display:flex; flex-wrap:wrap; gap:6px 20px;
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--brass)}
footer a:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:2px}

/* ---- narrow --------------------------------------------------------------- */
@media (max-width:620px){
  /* the table stops being a grid of numbers and becomes one block per row */
  .ledger,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block; width:100%}
  .ledger thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .ledger tr{border-bottom:1px solid var(--rule); padding:12px 0}
  .ledger tr:last-child{border-bottom:0}
  .ledger th,.ledger td{
    display:flex; justify-content:flex-end; align-items:baseline;
    border-bottom:0; padding:5px clamp(16px,4vw,22px); text-align:right;
  }
  .ledger tbody th{justify-content:flex-start; padding-bottom:9px}
  .ledger td::before{
    content:attr(data-label); flex:0 0 auto; text-align:left;
    margin-right:auto; padding-right:16px;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); font-weight:600;
  }
}