/* designsbyduhart.org — shared design system
   Tokens first; components reference roles, never raw hex.
   Ordinal data ramp validated against both surfaces:
     light  #dda36c…#7d3a12  (light end 2.11:1 on #fbfaf8)
     dark   #f2c79c…#a4551f  (dark  end 3.45:1 on #14130f)
   --mag-5 is always the step furthest from the surface, so the
   anchor flips in dark mode rather than the ramp being inverted. */

:root {
  --bg:#fbfaf8; --fg:#16150f; --muted:#6b6759; --rule:#e2ddd2;
  --accent:#b4551f; --accent-ink:#fbfaf8;
  --surface-2:#f5f2eb; --track:#ece7dc;
  --mag-1:#dda36c; --mag-2:#d18746; --mag-3:#bd6a29; --mag-4:#a1501c; --mag-5:#7d3a12;
  --sans: ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure: 46rem; --measure-wide: 62rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14130f; --fg:#f2efe7; --muted:#9a9484; --rule:#2c2a23;
    --accent:#e08a4e; --accent-ink:#14130f;
    --surface-2:#232019; --track:#2c2a23;
    --mag-1:#a4551f; --mag-2:#c86e2c; --mag-3:#dd8a48; --mag-4:#e8a86f; --mag-5:#f2c79c;
  }
}
:root[data-theme="dark"] {
  --bg:#14130f; --fg:#f2efe7; --muted:#9a9484; --rule:#2c2a23;
  --accent:#e08a4e; --accent-ink:#14130f;
  --surface-2:#232019; --track:#2c2a23;
  --mag-1:#a4551f; --mag-2:#c86e2c; --mag-3:#dd8a48; --mag-4:#e8a86f; --mag-5:#f2c79c;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:400 17px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}

/* ---------- header ---------- */
.site-head {
  border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
}
.site-head .inner {
  max-width:var(--measure-wide); margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; gap:1.4rem;
}
.brand { font-weight:650; letter-spacing:-.02em; text-decoration:none; color:var(--fg); font-size:.98rem; }
.brand span { color:var(--muted); font-weight:400; }
.site-head nav { margin-left:auto; display:flex; gap:1.2rem; }
.site-head nav a { font-size:.85rem; color:var(--muted); text-decoration:none; }
.site-head nav a:hover, .site-head nav a[aria-current] { color:var(--accent); }
.backlink { font-size:.82rem; color:var(--muted); text-decoration:none; }
.backlink:hover { color:var(--accent); }

/* ---------- layout ---------- */
.wrap { max-width:var(--measure); margin:0 auto; padding:3.5rem 1.5rem 5rem; }
.wrap.wide { max-width:var(--measure-wide); }
.eyebrow { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 .8rem; }
h1 { font-size:clamp(1.9rem,5.5vw,2.9rem); line-height:1.06; letter-spacing:-.03em;
  font-weight:650; margin:0 0 .7rem; }
h1.display { font-size:clamp(2.4rem,7vw,4rem); letter-spacing:-.035em; }
h1.display span { color:var(--muted); font-weight:400; }
.lede { color:var(--muted); font-size:1.05rem; margin:0 0 2.4rem; max-width:38rem; }
h2 { font-size:1.28rem; letter-spacing:-.015em; font-weight:650; margin:2.9rem 0 .9rem;
  padding-top:1.5rem; border-top:1px solid var(--rule); }
h3 { font-size:1.02rem; font-weight:600; margin:1.9rem 0 .5rem; }
p { margin:0 0 1.05rem; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
strong,b { font-weight:650; }
hr { border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
blockquote { margin:1.4rem 0; padding:.1rem 0 .1rem 1.1rem;
  border-left:2px solid var(--accent); color:var(--muted); }
blockquote p:last-child { margin-bottom:0; }
ul,ol { margin:0 0 1.05rem; padding-left:1.35rem; }
li { margin:.3rem 0; }
li::marker { color:var(--muted); }

code { font:400 .85em/1.5 var(--mono); background:var(--surface-2);
  padding:.1rem .34rem; border-radius:3px; }
pre { background:var(--surface-2); border-radius:8px; padding:1rem 1.1rem;
  overflow-x:auto; margin:0 0 1.2rem; font-size:.84rem; line-height:1.55; }
pre code { background:none; padding:0; font-size:1em; }

table { border-collapse:collapse; width:100%; font-size:.9rem; margin:0 0 1.3rem; }
th,td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--rule);
  vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; }
.scroll { overflow-x:auto; margin:0 0 1.3rem; }
.scroll table { margin:0; }

/* ---------- components ---------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.7rem; margin:0 0 1.6rem; }
.tile { background:var(--surface-2); border-radius:9px; padding:1rem 1.1rem; }
.tile b { display:block; font-size:1.75rem; line-height:1.05; letter-spacing:-.025em; }
.tile span { display:block; color:var(--muted); font-size:.76rem; margin-top:.2rem; }
.tile a { display:block; margin-top:.5rem; font-size:.76rem; }

.paths { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin:0 0 1.6rem; }
.path { background:var(--surface-2); border-radius:10px; padding:1.1rem 1.2rem; }
.path h3 { margin:0 0 .3rem; font-size:1.02rem; }
.path p { color:var(--muted); font-size:.86rem; margin:0 0 .7rem; }
.path ol { margin:0; padding-left:1.15rem; font-size:.87rem; }
.path li { margin:.22rem 0; }

.rank-list { margin:0; }
.rank-row { display:grid; grid-template-columns:2.2rem minmax(0,1fr) 9rem 3.3rem;
  gap:.8rem; align-items:center; padding:.68rem .35rem; border-bottom:1px solid var(--rule);
  border-radius:6px; text-decoration:none; color:inherit; transition:background .12s; }
.rank-row:first-child { border-top:1px solid var(--rule); }
.rank-row:hover, .rank-row:focus-visible { background:var(--surface-2); outline:none; }
.rank-row .n { text-align:right; font-weight:700; color:var(--muted); font-size:.92rem; }
.rank-row .t { min-width:0; }
.rank-row .t b { display:block; font-weight:600; font-size:.95rem; }
.rank-row .t span { display:block; color:var(--muted); font-size:.79rem; margin-top:.06rem; }
.rank-row .bar { height:11px; background:var(--track); border-radius:0 4px 4px 0; }
.rank-row .bar i { display:block; height:100%; border-radius:0 4px 4px 0; }
.rank-row .s { text-align:right; font-weight:600; font-size:.88rem; }

.badge { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.2rem .48rem; border-radius:4px;
  background:var(--accent); color:var(--accent-ink); }
.badge.q { background:var(--surface-2); color:var(--muted); }

.meta { background:var(--surface-2); border-radius:10px; padding:1rem 1.15rem; margin:0 0 2rem;
  font-size:.87rem; }
.meta dl { display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; margin:0; }
.meta dt { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; padding-top:.15rem; }
.meta dd { margin:0; }

.callout { background:var(--surface-2); border-left:2px solid var(--accent);
  border-radius:0 8px 8px 0; padding:.95rem 1.15rem; margin:0 0 1.3rem; }
.callout p:last-child { margin-bottom:0; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.9rem; margin:0 0 1.5rem; }
.card { background:var(--surface-2); border-radius:10px; padding:1rem 1.1rem; text-decoration:none; color:inherit; display:block; }
a.card:hover { outline:1px solid var(--rule); }
.card b { display:block; font-size:.95rem; font-weight:600; margin-bottom:.25rem; }
.card span { color:var(--muted); font-size:.85rem; line-height:1.5; }

.prose > :first-child { margin-top:0; }
.prose h2:first-of-type { margin-top:2.2rem; }

footer.site-foot { border-top:1px solid var(--rule); margin-top:3.5rem; padding-top:1.5rem;
  color:var(--muted); font-size:.85rem; }
footer.site-foot a { color:var(--accent); }
.foot-row { display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; }

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
::selection { background:var(--accent); color:var(--accent-ink); }

@media (max-width:640px) {
  body { font-size:16px; }
  .wrap { padding:2.5rem 1.15rem 4rem; }
  .rank-row { grid-template-columns:1.9rem minmax(0,1fr) 3.1rem; }
  .rank-row .bar { display:none; }
  .site-head .inner { padding:.7rem 1.15rem; gap:1rem; }
  .site-head nav { gap:.9rem; }
}
@media print {
  .site-head, footer.site-foot { display:none; }
  body { font-size:11pt; }
}

/* ---------- prose (markdown-rendered project pages) ---------- */
.prose > :first-child { margin-top: 0; }
.prose h2:first-of-type { margin-top: 2.2rem; }
.prose img { max-width: 100%; height: auto; }
.prose table { display: block; overflow-x: auto; white-space: nowrap; }
.prose table td, .prose table th { white-space: normal; }
.prose td:first-child { min-width: 9rem; }

/* ---------- tier grouping on the work index ---------- */
.tier-head { display: flex; align-items: baseline; gap: .7rem; margin: 2.6rem 0 .35rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.tier-head h2 { margin: 0; padding: 0; border: 0; font-size: 1.28rem; }
.tier-head .band { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tier-blurb { color: var(--muted); font-size: .87rem; margin: 0 0 .9rem; }