/* Winnow — one stylesheet for the whole site.
   Nothing generates this file. Edit it directly.

   Tokens follow docs/index.html and docs/architecture.html, which had the
   most developed palette of the four systems that used to exist here. */

:root{
  --paper:#fcfbf9;  --paper-2:#f4f1ea;
  --ink:#14130e;    --ink-2:#585549;  --ink-3:#8a8577;
  --rule:#e5e1d6;   --rule-2:#d6d1c2;
  --seed:#b35f05;          /* amber that passes AA on paper */
  --mark:#f7931a;          /* brand orange — mark and accents only */
  --good:#1f7a4d;
  --card:#ffffff;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0d0c09;  --paper-2:#151309;
    --ink:#f3efe6;    --ink-2:#a9a496;  --ink-3:#807b6d;
    --rule:#272319;   --rule-2:#332e21;
    --seed:#f5a94b;
    --good:#4fc389;
    --card:#181510;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--seed);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:5px}

/* ── page chrome ─────────────────────────────────────────── */

.topbar{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.topbar .bar{
  max-width:52rem;margin:0 auto;
  padding:.75rem clamp(1.1rem,4vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
}
.topbar .mark{font-weight:680;letter-spacing:-.02em;color:var(--ink)}
.topbar .mark b{color:var(--mark)}
.topbar .links{display:flex;gap:1.1rem;font-size:.88rem;flex-wrap:wrap}
.topbar .links a{color:var(--ink-2)}
.topbar .links a:hover{color:var(--seed)}

main{
  max-width:52rem;
  margin:0 auto;
  padding:clamp(2.5rem,6vw,4rem) clamp(1.1rem,4vw,2rem) 5rem;
}

footer{
  border-top:1px solid var(--rule);
  margin-top:4rem;
}
footer .bar{
  max-width:52rem;margin:0 auto;
  padding:1.6rem clamp(1.1rem,4vw,2rem) 3rem;
  font-size:.86rem;color:var(--ink-3);
}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--seed)}

/* ── prose ───────────────────────────────────────────────── */

h1,h2,h3,h4{line-height:1.18;letter-spacing:-.024em;font-weight:680;color:var(--ink)}
h1{font-size:clamp(1.9rem,4.2vw,2.6rem);margin:0 0 .4rem}
h2{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:2.6rem 0 .7rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
h3{font-size:1.12rem;margin:1.8rem 0 .5rem}
h4{font-size:1rem;margin:1.4rem 0 .4rem;color:var(--ink-2)}

/* the lead line directly under the title */
.lede{font-size:1.08rem;color:var(--ink-2);margin:0 0 2rem}

p{margin:.85rem 0;color:var(--ink-2)}
strong{color:var(--ink);font-weight:640}
em{color:var(--ink)}

ul,ol{margin:.85rem 0;padding-left:1.4rem}
li{margin:.35rem 0;color:var(--ink-2)}
li>ul,li>ol{margin:.35rem 0}

hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
/* markdown's `---` often sits right before a heading, which already rules off */
hr + h2{border-top:0;padding-top:0;margin-top:1.4rem}
hr + h2 + *{margin-top:.5rem}

blockquote{
  border-left:3px solid var(--seed);
  padding:.15rem 0 .15rem 1.1rem;
  margin:1.3rem 0;
  color:var(--ink-2);
}
blockquote p{margin:.4rem 0}

code{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:.3rem;
  padding:.06em .35em;
  font-family:var(--mono);
  font-size:.87em;
  color:var(--ink);
}
pre{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:.6rem;
  padding:.9rem 1.1rem;
  overflow-x:auto;
  margin:1.1rem 0;
}
pre code{background:none;border:0;padding:0;font-size:.86rem;line-height:1.55}

/* wide tables scroll inside their own box; the page never scrolls sideways */
.table-wrap{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--rule);border-radius:.6rem}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:.5rem .7rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
th{color:var(--ink);background:var(--paper-2);font-weight:640;white-space:nowrap}
td{color:var(--ink-2)}
tr:last-child td{border-bottom:0}

figure{margin:2rem 0;text-align:center}
figure img{
  max-width:min(100%,15rem);
  height:auto;
  display:inline-block;
  border:1px solid var(--rule);
  border-radius:1.1rem;
}
figcaption{color:var(--ink-3);font-size:.85rem;margin-top:.7rem}

img{max-width:100%;height:auto;display:block}

/* ── the in-app view ─────────────────────────────────────────
   The iOS app bundles these pages and loads them in a WKWebView.
   It supplies its own chrome, so hide the site's. */
body.embedded .topbar,
body.embedded footer{display:none}
body.embedded main{padding-top:1.5rem}

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

@media print{
  .topbar,footer{display:none}
  body{background:#fff;color:#000}
  main{max-width:none}
}