/* ALMOST — a scholarly edition of a machine's account of Gabe. Paper, iron-gall ink and
   vermillion rubric, as in a manuscript; the machine's hesitations are the red glosses. */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/instrument-sans-normal-400-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/jetbrains-mono-normal-400-600.woff2') format('woff2'); }

:root {
    color-scheme: light;
    --paper: #f3eee3;
    --paper-2: #fbf8f1;
    --paper-3: #e9e2d3;
    --rule: #d3c9b6;
    --ink: #1d1a16;
    --ink-2: #3f3a33;
    --ink-3: #6b6358;
    --rubric: #bf3417;
    --rubric-soft: rgba(191, 52, 23, 0.1);
    --b0: var(--ink);
    --b1: #1f4fa3;
    --b2: #2d7449;
    --b3: #7b3a9e;
    --b4: #8a5a12;
    --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --gutter: clamp(1rem, 4.5vw, 4.5rem);
    --page: 84rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
    margin: 0;
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color: var(--ink);
    font: 400 1rem/1.55 var(--sans);
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--rubric); text-underline-offset: 0.2em; }
a:hover { color: var(--rubric); }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { max-width: var(--page); margin: 1rem auto; padding: 0 var(--gutter); color: var(--rubric); }

.mast { max-width: var(--page); margin: 0 auto; padding: 1.25rem var(--gutter) 2.5rem; }
.mast-strip { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; margin: 0; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ink); color: var(--ink-2); text-transform: uppercase; }
.mast-strip span:last-child { margin-left: auto; color: var(--rubric); }
.mast-title { font: 400 clamp(3.1rem, 9.5vw, 8.6rem)/0.92 var(--serif); letter-spacing: -0.025em; margin: 2.2rem 0 1.4rem; }
.mast-title em { color: var(--rubric); }
.mast-sub { font: 400 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.3 var(--serif); max-width: 32em; margin: 0 0 2.2rem; color: var(--ink-2); }
.mast-sub em { color: var(--rubric); }
.key { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; padding: 1.3rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.key-how { margin: 0; max-width: 40em; color: var(--ink-2); }
.key-how b { display: block; color: var(--rubric); text-transform: uppercase; margin-bottom: 0.35rem; }
.key-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; }
.key-stats dt { color: var(--ink-3); text-transform: uppercase; }
.key-stats dd { margin: 0.2rem 0 0; font: 400 clamp(2rem, 1.5rem + 1.6vw, 3.2rem)/1 var(--serif); letter-spacing: 0; color: var(--ink); }
.key-stats div:nth-child(3) dd { color: var(--rubric); }
.toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding-top: 1rem; text-transform: uppercase; }
.toc a { text-decoration: none; color: var(--ink-3); }
.toc a:hover { color: var(--rubric); }

.btn { font: 500 0.95rem/1 var(--sans); color: var(--paper-2); background: var(--ink); border: 0; border-radius: 2px; padding: 0.85rem 1.3rem; cursor: pointer; }
.btn:hover { background: var(--rubric); }
.btn:disabled { opacity: 0.5; cursor: wait; }

.colophon { max-width: var(--page); margin: 4rem auto 0; padding: 0 var(--gutter) 6rem; color: var(--ink-3); }
.colophon p { max-width: 70em; margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--ink); line-height: 1.8; }

@media (max-width: 760px) {
    .key { grid-template-columns: 1fr; }
    .mast-strip span:last-child { margin-left: 0; }
}