/* Long project pages. Paper for reading, ink panels for anything interactive.
   Loaded after a project's page.css, so these rules win. Rules: ../../BRAND.md */
html{background:var(--paper);color:var(--ink);scroll-behavior:smooth;color-scheme:light}
html.embed{background:transparent}
body{background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--sans);padding:0 0 0;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
html.embed body{background:transparent;padding-top:100svh}
.sheet{background:var(--paper);padding:0 var(--edge) 0;position:relative;min-height:100svh}
html.embed .sheet{box-shadow:0 -1px 0 var(--ink)}

/* Reading measure */
.col{max-width:var(--col);margin-inline:auto}
.wide{max-width:var(--wide);margin-inline:auto}
p{margin:0 0 1.05em}
a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}
b,strong{font-weight:700}
code,.k{font-family:var(--code);font-size:.84em;color:inherit;background:rgba(18,18,18,.07);padding:.08em .3em}
.lst,.ops,.vg,.bits,.ram-read,.kv{font-family:var(--code)!important}

/* Site chrome on standalone pages. Inside the site the parent supplies it. */
.site{display:flex;justify-content:space-between;width:100%;max-width:none;justify-self:stretch;align-self:stretch;padding:16px 2px 0;color:var(--ink)}
.site a{color:inherit;text-decoration:none}
html.embed .site{display:none}
html.embed header.hero{padding-top:64px}

/* Headline stack */
header.hero{padding-block:44px 22px}
.eyebrow,.ch-kick,.lbl,.fig-t,.strip-k{font:700 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
h1{font:italic 900 clamp(58px,11vw,172px)/.86 var(--sans);font-stretch:66%;text-transform:uppercase;letter-spacing:0;margin:14px 0 22px;color:var(--ink);text-shadow:none}
header:not(.hero) h1{font-size:clamp(46px,6.2vw,100px)}
h1 span,h1 em{color:var(--hot);text-shadow:none;font-style:inherit}
.dek{font-size:clamp(19px,2vw,24px);line-height:1.4;font-weight:500;max-width:34em}
.lede{font-size:clamp(19px,2vw,24px);line-height:1.4;font-weight:500}

/* Chapters */
.ch{margin-top:clamp(72px,11vh,120px)}
.ch-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:end;margin-bottom:20px;border-top:2px solid var(--ink);padding-top:12px}
.ch-num{font:900 76px/.8 var(--sans);font-stretch:62.5%;color:var(--hot);grid-row:span 2}
h2{font:italic 900 clamp(38px,5.2vw,68px)/.92 var(--sans);font-stretch:66%;text-transform:uppercase;letter-spacing:0;margin:0;color:inherit}
h3{font:700 clamp(20px,2vw,24px)/1.15 var(--sans);text-transform:none;letter-spacing:-.005em;margin:40px 0 8px;color:inherit}
h3 small{font:700 11px/1 var(--sans);letter-spacing:.06em;color:var(--hot);margin-right:8px;vertical-align:2px}

/* Figures */
figure{margin:30px auto 34px}
figcaption{font:500 13px/1.45 var(--sans);color:var(--mute);margin-top:10px;max-width:760px}
.media img,.media video,figure>img,figure>video{display:block;width:100%;height:auto;border:0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.two,.three{grid-template-columns:minmax(0,1fr)}}

/* Ink panel: every interactive figure sits on the dark side of the palette. */
.fig,.film,.nums,.toc,.tbl-ink{--room:var(--k-ink);--stone:var(--k-ink);--stone2:var(--panel-raised);--stone3:#2A2A2A;--panel:var(--k-ink);--panel2:var(--panel-raised);--line:var(--rule-dark);--ink:var(--k-paper);--mute:var(--mute-dark);--dim:#7C7A78;--phosphor:var(--k-paper);--phos-deep:var(--rule-dark);--amber:var(--hot);--terra:var(--hot);--ochre:var(--hot);--walnut:var(--hot);--bad:var(--hot);--black:#000;color:var(--k-paper)}
.fig{background:var(--k-ink);border:0;padding:18px}
.fig-t{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mute-dark);margin-bottom:14px}
.fig-t b{color:var(--k-paper);font-weight:700}
.fig .note,.fig .lbl,.fig .sl,.fig .side,.fig .tally{font-family:var(--sans)}
.fig a{color:var(--k-paper)}
.fig code,.fig .k{background:var(--panel-raised)}
.film{border:0;background:#000}
.film video{display:block;width:100%;height:auto}

.btn{font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--panel-raised);color:var(--k-paper);border:1px solid var(--rule-dark);border-radius:0;padding:10px 12px;cursor:pointer}
.btn:hover{border-color:var(--k-paper)}
.btn.on,.btn[aria-pressed="true"]{background:var(--hot);color:#fff;border-color:var(--hot)}
.btn.hot{background:var(--hot);color:#fff;border-color:var(--hot)}
input[type=range]{accent-color:var(--hot);width:100%}

/* Number rows */
.stats{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:12px;font:500 13px/1.3 var(--sans);color:var(--mute)}
.stats b{display:inline;color:var(--ink);font-weight:800}
.film+.stats{color:var(--mute)}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-dark);border:0}
@media (max-width:700px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nums div{background:var(--k-ink);padding:22px 18px}
.nums b{display:block;font:900 clamp(36px,5vw,60px)/1 var(--sans);font-stretch:62.5%;color:var(--k-paper)}
.nums span{font:500 12px/1.35 var(--sans);color:var(--mute-dark)}
.tally b{font:900 30px/1 var(--sans);font-stretch:62.5%;color:var(--k-paper)}

.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-dark);border:0;margin-top:30px}
@media (max-width:760px){.toc{grid-template-columns:repeat(2,minmax(0,1fr))}}
.toc a{background:var(--k-ink);padding:12px 14px;text-decoration:none;color:var(--k-paper);font:900 22px/1.05 var(--sans);font-stretch:66%;text-transform:uppercase}
.toc a small{display:block;font:700 11px/1 var(--sans);font-stretch:100%;color:var(--hot);margin-bottom:6px;letter-spacing:.06em}
.toc a:hover{background:var(--hot)}
.toc a:hover small{color:#fff}

table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;font:700 11px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:8px 12px 8px 0;border-bottom:2px solid var(--ink)}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule-light);vertical-align:top}
.credits{font:500 13px/1.6 var(--sans);color:var(--mute);border-top:1px solid var(--rule-light);padding-top:16px;margin-top:40px}

dl.meta{display:grid;grid-template-columns:max-content 1fr;gap:4px 18px;margin-top:22px;font-size:15px}
dl.meta dt{font:700 11px/1.6 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
dl.meta dd{margin:0}

/* End of every page: the next project, same type as the index */
.next{display:block;margin:clamp(80px,14vh,140px) calc(var(--edge) * -1) 0;padding:14px var(--edge) 22px;background:var(--hot);color:#000;text-decoration:none;overflow:hidden}
.next span{display:block}
.next b{display:block;font:900 clamp(92px,20vw,300px)/.86 var(--sans);font-stretch:62.5%;text-transform:uppercase;white-space:nowrap}
.next:hover b{color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}