/* Shared look for the static sub-pages (privacy, credits, 404). */
@font-face { font-family: 'Cormorant Garamond'; font-weight: 300; font-display: swap; src: url(/fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url(/fonts/instrument-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --ground: #0a0a0b;
  --label: #a6a29a;
  --body: #b9b3a6;
  --paper: #e8e3d6;
  --cinnabar: #b23a2e;
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-body: 'Instrument Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--paper); }
body { font: 16px/1.7 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--paper); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

.sub-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px clamp(20px, 7.8vw, 112px);
}
.sub-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.sub-brand img { width: 30px; height: 30px; border-radius: 3px; display: block; }
.sub-brand span { font-family: var(--f-display); font-size: 24px; letter-spacing: 0.02em; }
.sub-back { font: 12px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--body); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

main.sub { max-width: 860px; padding: 48px clamp(20px, 7.8vw, 112px) 80px; }
.sub h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; margin: 0 0 24px; }
.sub h2 { font-family: var(--f-display); font-weight: 300; font-size: 28px; line-height: 1.15; text-wrap: balance; margin: 44px 0 8px; }
.sub p, .sub li { color: var(--body); }
.sub .eyebrow { font: 12px/1.4 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); margin: 0 0 16px; }

.sub-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px;
  padding: 28px clamp(20px, 7.8vw, 112px) 40px;
  font: 11px/1.6 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}
.sub-foot nav { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.sub-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--label); text-decoration: none; white-space: nowrap; }
.sub-foot a:hover { color: var(--paper); }
.sub-foot .tm { flex-basis: 100%; order: 3; text-transform: none; letter-spacing: 0.04em; }

.sub-back { white-space: nowrap; }
.sub-back .short { display: none; }
@media (max-width: 480px) { .sub-back .long { display: none; } .sub-back .short { display: inline; } }

/* notes */
.note .lede { font-family: var(--f-display); font-size: 24px; line-height: 1.4; color: var(--paper); }
.note figure { margin: 40px 0; }
.note img { display: block; width: 100%; height: auto; border: 1px solid rgba(232, 227, 214, 0.12); }
.note figcaption { margin-top: 10px; font: 12px/1.5 var(--f-mono); letter-spacing: 0.06em; color: var(--label); }
.note pre { overflow-x: auto; padding: 18px 20px; background: #111113; border: 1px solid rgba(232, 227, 214, 0.1); font: 13px/1.6 var(--f-mono); color: var(--body); }
@media (max-width: 480px) { .note pre { font-size: 12px; padding: 14px; } }
.note code { font-family: var(--f-mono); }

.note-list { list-style: none; padding: 0; margin: 32px 0 0; }
.note-list li { padding: 20px 0; border-top: 1px solid rgba(232, 227, 214, 0.14); color: var(--label); font-size: 14px; }
.note-list a { font-family: var(--f-display); font-size: 28px; color: var(--paper); text-decoration: none; }
.note-list a.thumb { display: block; margin-bottom: 16px; }
.note-list .thumb img { display: block; width: 100%; height: auto; border: 1px solid rgba(232, 227, 214, 0.12); }
.note-list a:hover { text-decoration: underline; }
.note-list span { color: var(--body); font-size: 15px; }

.sub :not(pre) > code { font-family: var(--f-mono); font-size: 0.88em; color: var(--paper); white-space: nowrap; }
.note-list .date { display: block; margin-bottom: 6px; font: 11px/1.6 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.nowrap { white-space: nowrap; }