:root {
  color-scheme: light;
  --paper: #f4efe4;
  --cream: #fff8e9;
  --ink: #11110f;
  --muted: #655f55;
  --orange: #f05223;
  --acid: #d9f05a;
  --line: rgba(17, 17, 15, .22);
  --mono: "Courier New", Courier, monospace;
  --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-width: 280px; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.7; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { color: #b63214; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
::selection { color: var(--cream); background: var(--orange); }
.skip-link { position: fixed; z-index: 10; top: .75rem; left: .75rem; padding: .7rem .9rem; color: var(--cream); background: var(--ink); font: 700 .72rem/1 var(--mono); text-transform: uppercase; text-decoration: none; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.wrap { width: min(100% - 2rem, 56rem); margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) 0 7rem; }
header.page { position: relative; border: 1px solid var(--ink); padding: clamp(1.3rem, 4vw, 2.5rem); margin-bottom: 3rem; background: var(--acid); box-shadow: 10px 10px 0 rgba(17,17,15,.12); }
header.page::after { content: ""; position: absolute; right: clamp(1rem, 4vw, 2.5rem); top: clamp(1rem, 3vw, 2rem); width: 3.5rem; height: 3.5rem; border: .8rem solid var(--orange); border-radius: 50%; }
.eyebrow { color: var(--ink); font: 700 .72rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 12ch; margin: .55rem 0 .5rem; font-size: clamp(3rem, 8vw, 6rem); line-height: .86; letter-spacing: -.055em; }
.meta { color: var(--muted); font: .72rem/1.4 var(--mono); }
.nav { display: flex; gap: .75rem 1.4rem; flex-wrap: wrap; margin-top: 1.5rem; font: 700 .72rem/1.4 var(--mono); text-transform: uppercase; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: #2e2b26; }
h2 { margin: 3.4rem 0 .75rem; padding-top: .8rem; border-top: 1px solid var(--ink); font-size: clamp(1.65rem, 3.5vw, 2.35rem); line-height: 1.15; scroll-margin-top: 1rem; }
h3 { margin: 1.8rem 0 .5rem; font-size: 1.08rem; }
p, li { font-size: 1rem; }
ul { padding-left: 1.35rem; }
li { margin: .45rem 0; }
.panel { margin: 2rem 0; padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--ink); background: var(--cream); box-shadow: 7px 7px 0 rgba(17,17,15,.08); }
.panel.sms { border-left: .65rem solid var(--orange); background: linear-gradient(135deg, rgba(240,82,35,.09), rgba(217,240,90,.13)), var(--cream); }
.panel.toc { font-size: .9rem; }
.panel.toc strong { color: var(--ink) !important; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.panel.toc a { color: var(--muted); }
.kbd { display: inline-block; padding: .04rem .45rem; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--acid); font: 700 .86rem/1.5 var(--mono); }
.ph { color: #8f260f; font-family: var(--mono); }
footer { margin-top: 4.5rem; padding-top: 1.4rem; border-top: 1px solid var(--ink); color: var(--muted); font: .78rem/1.7 var(--mono); }
@media (max-width: 520px) { header.page::after { position: static; display: block; width: 2.6rem; height: 2.6rem; margin-top: 1rem; border-width: .6rem; } .panel { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }