/* ryanit.io — one stylesheet, no build step. Deployable as-is to Cloudflare Pages. */
:root {
  --paper:#F1F4F4; --surface:#FFFFFF; --ink:#0F1817; --muted:#5B6B6A;
  --rule:#D2DDDB; --rule-strong:#A9BBB8; --accent:#0E6F6B;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --measure:66ch; --pad:clamp(1.25rem,4vw,2.5rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0C1211; --surface:#141C1B; --ink:#E4ECEA; --muted:#91A29F;
    --rule:#253130; --rule-strong:#3A4B49; --accent:#52BFB7;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
a { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.wrap { max-width:52rem; margin:0 auto; padding:0 var(--pad); }

/* header */
.site-head { border-bottom:1px solid var(--rule); background:var(--surface); }
.site-head .wrap {
  display:flex; flex-wrap:wrap; gap:0.75rem 1.5rem;
  align-items:baseline; justify-content:space-between;
  padding-top:1.1rem; padding-bottom:1.1rem;
}
.wordmark {
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  letter-spacing:-0.01em; color:var(--ink); text-decoration:none;
}
.site-nav { display:flex; gap:1.25rem; font-size:0.9rem; }
.site-nav a { text-decoration:none; color:var(--muted); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--accent); }

/* page */
main { padding:clamp(2.5rem,6vw,4.5rem) 0 5rem; }
main > .wrap { display:flex; flex-direction:column; gap:2.5rem; }
.lede { display:flex; flex-direction:column; gap:0.8rem; }
h1 {
  font-family:var(--serif); font-weight:500; margin:0;
  font-size:clamp(2rem,5vw,3rem); line-height:1.08; letter-spacing:-0.015em;
  text-wrap:balance;
}
.standfirst {
  font-family:var(--serif); font-size:clamp(1.05rem,2.2vw,1.3rem);
  line-height:1.5; color:var(--muted); margin:0; max-width:52ch;
}
.updated {
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--muted);
}
section { display:flex; flex-direction:column; gap:0.9rem; max-width:var(--measure); }
h2 {
  font-family:var(--serif); font-weight:500; margin:1.5rem 0 0;
  font-size:clamp(1.3rem,2.8vw,1.7rem); line-height:1.25; letter-spacing:-0.01em;
  text-wrap:balance;
}
h3 { font-size:1rem; font-weight:600; margin:0.75rem 0 0; }
p { margin:0; }
ul, ol { margin:0; padding-left:1.25rem; display:flex; flex-direction:column; gap:0.4rem; }
strong { font-weight:600; }
code { font-family:var(--mono); font-size:0.9em; }

.callout {
  border-left:2px solid var(--accent); padding:0.1rem 0 0.1rem 1.15rem;
  display:flex; flex-direction:column; gap:0.5rem; color:var(--muted);
}
.callout strong { color:var(--ink); }

dl.facts { display:flex; flex-direction:column; gap:1rem; margin:0; }
dl.facts div { display:flex; flex-direction:column; gap:0.2rem; }
dl.facts dt { font-weight:600; }
dl.facts dd { margin:0; color:var(--muted); }

.cards { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); max-width:none; }
.card {
  background:var(--surface); border:1px solid var(--rule); padding:1.25rem;
  display:flex; flex-direction:column; gap:0.5rem;
}
.card h3 { margin:0; }
.card p { color:var(--muted); font-size:0.94rem; }
.card a { font-size:0.94rem; }

.site-foot {
  border-top:1px solid var(--rule); color:var(--muted); font-size:0.86rem;
}
.site-foot .wrap {
  display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem;
  justify-content:space-between; padding-top:1.5rem; padding-bottom:3rem;
}
@media (prefers-reduced-motion: no-preference) { a { transition:color 120ms ease; } }