/* Sketch B: riso only at the edges (header band, numerals, rules). The middle is for reading
   and for looking at screens. Same inks and type as the home page. */
:root{
  --paper:#f4f0e4; --ink:#17150f; --blue:#1d3fb8; --pink:#ff4d8d; --yellow:#ffd23f; --dim:#6b6456;
  --field:#ffffff; --rule:rgba(23,21,15,.18); --codebg:rgba(23,21,15,.07); --err:#b00020; --band-ink:#17150f; --blend:multiply;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:Newsreader,Georgia,serif; --label:"IBM Plex Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#141311; --ink:#ece7da; --dim:#a39d8e; --blue:#93a9ff; --pink:#ff6fa3; --field:#1f1d1a; --rule:rgba(236,231,218,.18); --codebg:rgba(236,231,218,.1); --err:#ff8a8a; --blend:normal; color-scheme:dark}}
:root[data-theme="dark"]{--paper:#141311; --ink:#ece7da; --dim:#a39d8e; --blue:#93a9ff; --pink:#ff6fa3; --field:#1f1d1a; --rule:rgba(236,231,218,.18); --codebg:rgba(236,231,218,.1); --err:#ff8a8a; --blend:normal; color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.62; overflow-x:hidden}
@media (min-width:760px){body{font-size:19px}}
body::after{content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--blue); text-decoration:none; background:linear-gradient(var(--blue),var(--blue)) 0 100%/100% 1.5px no-repeat}
a:hover{color:var(--pink); background-image:linear-gradient(var(--pink),var(--pink))}
a:focus-visible{outline:3px solid var(--pink); outline-offset:3px}

/* header band: the only loud riso moment */
.band{background:var(--pink); color:var(--band-ink); padding:14px 16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--label); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase}
.band a{color:var(--band-ink); background-image:linear-gradient(var(--band-ink),var(--band-ink))}
@media (min-width:760px){.band{padding:14px 44px}}

.wrap{max-width:72rem; margin:0 auto; padding:48px 16px 110px}
@media (min-width:760px){.wrap{padding:72px 44px 130px}}

.hero{max-width:46rem}
.kicker{font-family:var(--label); font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); margin:0 0 14px}
h1{font-family:var(--display); font-weight:800; letter-spacing:-.04em; font-size:clamp(2.6rem,9vw,5rem); line-height:.92; margin:0}
.dek{font-size:1.25em; line-height:1.42; margin:22px 0 0}

/* layout: facts rail beside the reading column on desktop, a strip above it on phone */
.grid{display:grid; grid-template-columns:1fr; gap:34px; margin-top:44px}
@media (min-width:1000px){.grid{grid-template-columns:13rem minmax(0,1fr); gap:56px}}
.rail{border-top:3px solid var(--ink); padding-top:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; align-self:start}
@media (min-width:1000px){.rail{grid-template-columns:1fr; position:sticky; top:24px}}
.rail div{font-size:.9em; line-height:1.4}
.rail dt{font-family:var(--label); font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:3px}
.rail dd{margin:0}
.rail .status dd{background:var(--yellow); mix-blend-mode:var(--blend); display:inline; padding:1px 4px}

.read{min-width:0}
.read > p,.read > ul,.read > ol,.read > h2,.read > .sec{max-width:38rem}
.read p{margin:0 0 1.05em}

.sec{display:flex; align-items:baseline; gap:14px; margin:72px 0 18px; border-top:1.5px solid var(--ink); padding-top:14px}
.sec:first-child{margin-top:0}
.sec .n{font-family:var(--display); font-weight:800; font-size:1.6rem; color:var(--pink); mix-blend-mode:var(--blend); line-height:1}
.sec h2{font-family:var(--display); font-weight:700; font-size:clamp(1.45rem,4.4vw,2rem); letter-spacing:-.025em; line-height:1.08; margin:0}

/* figures break out of the 38rem column to the full reading width */
figure{margin:34px 0 44px}
.shot{background:#fff; border:1.5px solid var(--ink); display:block}
.shot img{display:block; width:100%; height:auto}
.pair{display:grid; grid-template-columns:1fr; gap:22px}
@media (min-width:760px){.pair{grid-template-columns:1fr 1fr; align-items:start}}
.pair figcaption{margin-top:10px}
figcaption{font-family:var(--label); font-size:.72rem; letter-spacing:.04em; line-height:1.6; color:var(--dim); margin-top:12px; max-width:38rem}
figcaption b{color:var(--ink); font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-right:6px}

.principles{padding-left:0; list-style:none; counter-reset:p; margin:0 0 1em}
.principles li{counter-increment:p; padding:9px 0 9px 40px; position:relative; border-bottom:1px solid var(--rule)}
.principles li::before{content:counter(p); position:absolute; left:0; top:9px; font-family:var(--label); font-weight:600; font-size:.8rem; color:var(--blue)}

.pull{font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,3.6vw,1.7rem); line-height:1.2; letter-spacing:-.02em;
  border-left:6px solid var(--blue); padding:4px 0 4px 18px; margin:30px 0; max-width:38rem}

.limits{padding-left:1.1em; margin:0 0 1em}
.limits li{margin-bottom:.4em}

.cta{margin-top:84px; border-top:3px solid var(--ink); padding-top:22px; max-width:38rem}
.cta h3{font-family:var(--display); font-weight:700; font-size:1.6rem; letter-spacing:-.02em; margin:0 0 8px}
.cta p{margin:0 0 14px}
.cta .acts{display:flex; flex-wrap:wrap; gap:10px}
.cta .acts a{background:none; border:2px solid var(--ink); color:var(--ink); padding:9px 14px; font-family:var(--label); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase}
.cta .acts a.primary{background:var(--blue); border-color:var(--blue); color:var(--paper)}
.cta .acts a:hover{background:var(--pink); border-color:var(--pink); color:var(--ink)}

/* additions: inline code, plain lists, index list, unlock form */
.read code{font-family:var(--label); font-size:.82em; background:var(--codebg); padding:1px 5px}
.read > ul,.read > ol:not(.principles){padding-left:1.1em; margin:0 0 1em; max-width:38rem}
.read li{margin-bottom:.4em}
.principles li{margin-bottom:0}

.cases{list-style:none; padding:0; margin:48px 0 0; max-width:46rem}
.cases li{border-top:1.5px solid var(--ink); padding:22px 0 26px}
.cases .kicker{margin:0 0 8px}
.cases h2{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,4.6vw,2.1rem); letter-spacing:-.025em; line-height:1.08; margin:0 0 8px}
.cases p{margin:0 0 8px}
.tag{font-family:var(--label); font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; border:1.5px solid var(--ink); padding:2px 7px; display:inline-block}
.foot{margin-top:56px; border-top:3px solid var(--ink); padding-top:16px; font-size:.9em; max-width:46rem}

.gate{margin-top:30px; max-width:26rem}
.gate label{display:block; font-family:var(--label); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:6px}
.gate input{display:block; width:100%; font:inherit; padding:10px 12px; border:2px solid var(--ink); background:var(--field); color:var(--ink)}
.gate input:focus-visible{outline:3px solid var(--pink); outline-offset:2px}
.gate button{margin-top:14px; font-family:var(--label); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; padding:9px 18px; border:2px solid var(--blue); background:var(--blue); color:var(--paper); cursor:pointer}
.gate button:hover{background:var(--pink); border-color:var(--pink); color:var(--ink)}
.gate button:focus-visible{outline:3px solid var(--pink); outline-offset:3px}
.gate .err{color:var(--err); font-weight:500; margin:0 0 14px}

/* theme icon in the band (3 Oct 2026) */
.band .theme-toggle{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;background:transparent;border:1.5px solid var(--band-ink);color:var(--band-ink);cursor:pointer}
.band .theme-toggle:focus-visible{outline:2px solid var(--band-ink);outline-offset:2px}
.band .right{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rail .status dd{color:var(--band-ink)}