/* ==========================================================================
   Simstim · Golden Hour  (design system v0.1)
   Virek's park: a sunlit, slightly-too-perfect simulation around the text;
   code is the cold machine behind it.

   Themes: "park" (light, default) and "dusk" (dark).
     - follows prefers-color-scheme by default
     - <html data-theme="park|dusk"> forces one (server can set it from a cookie)
   Targets the markup in src/html.zig. No JS needed for any effect.
   ========================================================================== */

/* ---------- fonts (self-hosted, embedded by main.zig) ---------- */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/newsreader-400.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/newsreader-500.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(/static/fonts/newsreader-400-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/plex-mono-500.woff2) format("woff2"); }

/* ---------- tokens: park ---------- */
:root {
  --ground: #F5EEDF;   /* parchment */
  --paper: #FBF7EE;    /* box well, inputs */
  --mat: #E9DCC2;      /* Cornell frame fill */
  --frame: #8A6A45;    /* box hairline */
  --rule: #D8CBB0;
  --sun: rgba(233, 196, 120, .38);
  --ink: #34261B;      /* 12.6:1 */
  --muted: #6E5A48;    /* 5.6:1 on ground, 4.8:1 on mat */
  --on-ink: #F5EEDF;
  --link: #A9492B;     /* terracotta 4.95:1 */
  --link-hover: #7E3420;
  --cobalt: #2F4F8F;
  --ochre: #C9962E;    /* focus + decoration only */
  --seaglass: #7FA99B; /* decoration only */
  --mark: #F0DDB0;
  --seam: #9A9A9A;     /* the untextured tile */

  --code-bg: #1E2733;  --code-bar: #18202A; --code-rule: #2F3B4B;
  --code-fg: #DCE4EE;  --code-muted: #8A97A8;
  --code-kw: #8FB8E8;  --code-fn: #F0CF8E; --code-str: #A8D5C2; --code-attr: #C7B6F2;

  --shadow-box: 0 30px 50px -28px rgba(80, 50, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  --shadow-well: inset 0 14px 28px rgba(90, 60, 25, .20), inset 0 0 0 1px rgba(90, 60, 25, .18);
  --shadow-well-sm: inset 0 6px 14px rgba(90, 60, 25, .16), inset 0 0 0 1px rgba(90, 60, 25, .16);
  --glass: linear-gradient(118deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 34%);
  --mosaic-filter: none;
  --shimmer-a: #EFE5D0; --shimmer-b: #F9F2E2;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --page: 1120px;
  --measure: 68ch;
  color-scheme: light;
}

/* ---------- tokens: dusk ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="park"]) {
    --ground: #1F1D33; --paper: #2A2742; --mat: #34304F; --frame: #7A6844; --rule: #3B3759;
    --sun: rgba(226, 180, 88, .12);
    --ink: #EFE6D2; --muted: #B7AC98; --on-ink: #1F1D33;
    --link: #E2B458; --link-hover: #F0CC80; --cobalt: #8FA8E8; --ochre: #E2B458; --seaglass: #7FB0A0;
    --mark: #4A4060; --seam: #6E6E6E;
    --code-bg: #141A24; --code-bar: #10151D; --code-rule: #263142;
    --shadow-box: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 28px rgba(226, 180, 88, .07);
    --shadow-well: inset 0 14px 28px rgba(0, 0, 0, .40), inset 0 0 0 1px rgba(0, 0, 0, .35);
    --shadow-well-sm: inset 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .3);
    --glass: linear-gradient(118deg, rgba(255, 240, 210, .07) 0%, rgba(255, 240, 210, 0) 34%);
    --mosaic-filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 4px rgba(226, 180, 88, .35));
    --shimmer-a: #2A2742; --shimmer-b: #37335A;
    color-scheme: dark;
  }
}
:root[data-theme="dusk"] {
  --ground: #1F1D33; --paper: #2A2742; --mat: #34304F; --frame: #7A6844; --rule: #3B3759;
  --sun: rgba(226, 180, 88, .12);
  --ink: #EFE6D2; --muted: #B7AC98; --on-ink: #1F1D33;
  --link: #E2B458; --link-hover: #F0CC80; --cobalt: #8FA8E8; --ochre: #E2B458; --seaglass: #7FB0A0;
  --mark: #4A4060; --seam: #6E6E6E;
  --code-bg: #141A24; --code-bar: #10151D; --code-rule: #263142;
  --shadow-box: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 28px rgba(226, 180, 88, .07);
  --shadow-well: inset 0 14px 28px rgba(0, 0, 0, .40), inset 0 0 0 1px rgba(0, 0, 0, .35);
  --shadow-well-sm: inset 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .3);
  --glass: linear-gradient(118deg, rgba(255, 240, 210, .07) 0%, rgba(255, 240, 210, 0) 34%);
  --mosaic-filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 4px rgba(226, 180, 88, .35));
  --shimmer-a: #2A2742; --shimmer-b: #37335A;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: radial-gradient(1200px 600px at 85% -10%, var(--sun), transparent 70%) no-repeat, var(--ground);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0 auto; max-width: calc(var(--page) + 160px); padding: 0 80px 48px;
  color: var(--ink); font: 17px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
code, pre, input, .chip, .tag, .count, .meta, .crumbs { font-family: var(--mono); }
code { font-size: .86em; }
h1, h2, h3 { font-weight: 400; line-height: 1.12; text-wrap: balance; }
h1 { font-size: 48px; letter-spacing: -.01em; margin: 8px 0 12px; }
p { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--paper); padding: 8px 12px; border: 1px solid var(--frame); }
.muted { color: var(--muted); }

/* ---------- masthead + mosaic ---------- */
.masthead {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; justify-content: space-between;
  min-height: 84px; padding: 16px 0 26px; margin-bottom: 40px;
}
/* The seam: a hairline under the masthead where one segment has slipped. */
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--rule) 0 61%, transparent 61% calc(61% + 140px), var(--rule) calc(61% + 140px));
}
.masthead::before {
  content: ""; position: absolute; bottom: -3px; left: calc(61% + 16px); width: 140px; height: 1px;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  box-shadow: -2px 0 0 rgba(169, 73, 43, .55), 2px 0 0 rgba(47, 79, 143, .55);
}
.wordmark {
  font-size: 44px; line-height: 1; font-style: italic; letter-spacing: -.02em; text-transform: lowercase;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 12px;
}
/* The Construct mark: gold half rendered, mirrored s in the wireframe half. */
.wordmark::before {
  content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: url(/static/mark.svg) center / contain no-repeat;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ochre) 40%, transparent), 0 6px 14px -8px rgba(20, 14, 8, .6);
}
.wordmark:hover { color: var(--ink); }
.masthead nav { display: flex; gap: 28px; flex-wrap: wrap; }
.masthead nav a { color: var(--ink); text-decoration: none; font-size: 17px; padding: 10px 0; }
.masthead nav a:hover { color: var(--link); }
.masthead nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* ---------- Cornell box ---------- */
.box {
  position: relative; margin: 24px 0;
  padding: 32px 36px 34px;
  background: var(--paper);
  border: 12px solid var(--mat);
  outline: 1px solid var(--frame); outline-offset: 0;
  box-shadow: var(--shadow-box), var(--shadow-well);
}
.box::after { content: ""; position: absolute; inset: 0; background: var(--glass); pointer-events: none; }
.box > * { position: relative; z-index: 1; }

.hero h1 { font-size: 64px; line-height: 1.04; letter-spacing: -.015em; margin: 0; font-style: italic; text-transform: lowercase; }
.lede { font-size: 21px; line-height: 1.45; color: var(--muted); margin: 8px 0 0; max-width: 40em; }
.meta { color: var(--muted); font-size: 12px; letter-spacing: .04em; }

/* ---------- search ---------- */
.search { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 16px; min-width: 0; }
.search input[type=search] {
  flex: 1 1 280px; min-height: 56px;
  font-size: 18px; line-height: 24px; padding: 14px 16px 14px 46px; color: var(--ink);
  background: var(--paper) no-repeat 16px 50% / 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E5A48' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  border: 1px solid var(--frame); border-radius: 0;
  box-shadow: inset 0 2px 6px rgba(90, 60, 25, .12);
  -webkit-appearance: none; appearance: none;
}
.search input[type=search]:focus { outline: 2px solid var(--ochre); outline-offset: 2px; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search button {
  font: 13px/1 var(--mono); letter-spacing: .04em; min-height: 56px; padding: 0 22px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); border-radius: 0;
}
.search button:hover { background: var(--link); border-color: var(--link); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; width: 100%; min-width: 0; min-inline-size: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; position: relative;
  font-size: 12px; line-height: 16px; padding: 7px 11px; min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--frame) 55%, var(--ground)); border-radius: 2px;
  background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.chip:hover { background: var(--paper); color: var(--ink); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked), a.chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* Context key: one tile colour per VEX context, always beside its name. */
.chip::before, .ctxs a code::before {
  content: ""; width: 7px; height: 7px; flex: none; display: inline-block;
  background: var(--ctx, var(--seam)); clip-path: polygon(8% 4%, 100% 0, 88% 100%, 0 90%);
}
.ctxs a code::before { margin-right: 6px; vertical-align: 1px; }
:is(.chip:has(input[value="sop"]), a.chip[href$="/sop"], .ctxs a[href$="=sop"])           { --ctx: #A9492B; }
:is(.chip:has(input[value="cvex"]), a.chip[href$="/cvex"], .ctxs a[href$="=cvex"])        { --ctx: #2F4F8F; }
:is(.chip:has(input[value="surface"]), a.chip[href$="/surface"], .ctxs a[href$="=surface"]) { --ctx: #7FA99B; }
:is(.chip:has(input[value="cop2"]), a.chip[href$="/cop2"], .ctxs a[href$="=cop2"])        { --ctx: #C9962E; }
:is(.chip:has(input[value="displace"]), a.chip[href$="/displace"], .ctxs a[href$="=displace"]) { --ctx: #8A6A45; }
:is(.chip:has(input[value="light"]), a.chip[href$="/light"], .ctxs a[href$="=light"])     { --ctx: #E2B458; }
:is(.chip:has(input[value="shadow"]), a.chip[href$="/shadow"], .ctxs a[href$="=shadow"])  { --ctx: #4A4060; }
:is(.chip:has(input[value="fog"]), a.chip[href$="/fog"], .ctxs a[href$="=fog"])           { --ctx: #B8C4CC; }
:is(.chip:has(input[value="chop"]), a.chip[href$="/chop"], .ctxs a[href$="=chop"])        { --ctx: #9E6E8E; }
:is(.chip:has(input[value="image3d"]), a.chip[href$="/image3d"], .ctxs a[href$="=image3d"]) { --ctx: #5E8C6A; }
.chip:has(input[value=""])::before {
  background: linear-gradient(90deg, #A9492B 0 33%, #2F4F8F 33% 66%, #C9962E 66%);
}

/* ---------- results ---------- */
.count { color: var(--muted); font-size: 12px; margin: 18px 0 8px; letter-spacing: .04em; }
.hits { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.hits a {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline;
  padding: 11px 12px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  transition: background .12s ease;
}
.hits a:hover { background: color-mix(in srgb, var(--mat) 60%, var(--ground)); color: var(--ink); }
.hits a:hover b { text-shadow: -0.6px 0 rgba(169, 73, 43, .5), 0.6px 0 rgba(47, 79, 143, .5); }
.hits b { font-family: var(--mono); font-size: 15px; font-weight: 500; grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
.hits small { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 16px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hits .tag { grid-row: 1; grid-column: 3; justify-self: end; margin-left: 6px; }
.hits .tag + .tag { grid-column: 3; }

/* Loading: the simulation re-rendering. htmx puts .htmx-request on the form. */
@keyframes rerender { 0% { background-position: -480px 0; } 100% { background-position: 480px 0; } }
.search.htmx-request ~ #results .hits,
#results.htmx-request .hits { opacity: .55; transition: opacity .2s ease .12s; }
.search.htmx-request ~ #results .count,
#results.htmx-request .count {
  color: transparent; width: 180px; height: 12px; border-radius: 0;
  background: linear-gradient(90deg, var(--shimmer-a) 0%, var(--shimmer-b) 45%, var(--shimmer-a) 90%);
  background-size: 480px 100%; animation: rerender 1.6s linear infinite;
}

/* ---------- tags ---------- */
.tag {
  display: inline-flex; align-items: center; font-size: 11px; line-height: 16px; padding: 2px 7px; margin-left: 8px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); color: var(--ink); white-space: nowrap;
}
.tag.ex { border-color: var(--seaglass); }
.tag.ex::before { content: ""; width: 7px; height: 7px; margin-right: 6px; background: var(--seaglass); clip-path: polygon(8% 4%, 100% 0, 88% 100%, 0 90%); }

/* ---------- entry ---------- */
.entry { max-width: 880px; }
.crumbs { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.crumbs a { color: var(--muted); }
.entry h1 { margin: 6px 0 4px; }
.entry h1 code { font-size: 44px; font-weight: 500; letter-spacing: -.01em; }
.entry .lede { color: var(--ink); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.badges .tag { margin-left: 0; }
.ctxs { color: var(--muted); font-size: 16px; }
.ctxs a { text-decoration: none; }
.ctxs a code { color: var(--ink); }
.entry h2 {
  font: 12px/18px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.entry h2 small { text-transform: none; letter-spacing: 0; }
.entry .example { margin: 0 0 20px; padding: 0; }
.example figcaption { padding: 16px 20px 12px; font-size: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.example figcaption b { font-weight: 500; }
.example .codewrap { margin: 0 20px; }
.example .explain { padding: 12px 20px 18px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.example .explain p { margin: 0 0 8px; }
.uses { list-style: none; padding: 0; display: grid; gap: 10px; }
.uses li { padding: 14px 18px; background: var(--paper); box-shadow: var(--shadow-well-sm); }
.uses li b { font-weight: 500; }
.related { display: flex; flex-wrap: wrap; gap: 8px; }
.related a { font-size: 13px; padding: 5px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); text-decoration: none; }
.related a:hover { border-color: var(--frame); }
.notes { font-size: 18px; line-height: 1.6; max-width: var(--measure); }
.ext { margin-top: 36px; font-size: 16px; }
a.fn { text-decoration: none; }
a.fn code { color: var(--link); }

/* ---------- the cold room: code ---------- */
pre.code {
  margin: 8px 0; padding: 16px 20px 18px; overflow-x: auto;
  background: var(--code-bg); color: var(--code-fg);
  border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--code-rule), 0 24px 40px -26px rgba(20, 28, 40, .7);
  font-size: 14px; line-height: 22px; tab-size: 4;
}
pre.code code { font-size: inherit; }
.codewrap { position: relative; }
.codewrap pre.code { margin: 0; padding-top: 48px; }
.codewrap::before {
  content: "vex"; position: absolute; left: 0; right: 0; top: 0; height: 36px; z-index: 1;
  padding: 9px 16px; font: 12px/18px var(--mono); color: var(--code-muted);
  background: var(--code-bar); border-bottom: 1px solid var(--code-rule);
}
.copy {
  position: absolute; top: 2px; right: 4px; z-index: 2; min-height: 32px; min-width: 64px;
  font: 12px var(--mono); padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--code-fg); border: 1px solid #3C4A5E; border-radius: 0;
}
.copy:hover { background: #26303E; }

.sigs { list-style: none; padding: 0; margin: 0; background: var(--code-bg); box-shadow: 0 0 0 1px var(--code-rule); }
.sigs li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--code-rule); color: var(--code-fg);
}
.sigs li:last-child { border-bottom: 0; }
.sigs code { font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--code-fn); }
.sigs span { color: var(--code-muted); font: 12px/18px var(--mono); text-align: right; }

/* ---------- globals ---------- */
table.globals { border-collapse: collapse; width: 100%; font-size: 15px; }
.globals th {
  text-align: left; font: 500 11px/16px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--frame);
}
.globals td { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.globals td:nth-child(2) code { font-weight: 500; color: var(--ink); font-size: 14px; }
.globals td:first-child code { color: var(--cobalt); }
.globals tr:hover td { background: color-mix(in srgb, var(--mat) 40%, var(--ground)); }

/* ---------- ad slots: labelled Cornell boxes, fixed sizes, never content ---------- */
.ad {
  position: relative; margin: 40px auto 24px; box-sizing: content-box;
  background: color-mix(in srgb, var(--mat) 45%, var(--paper));
  border: 8px solid var(--mat); outline: 1px solid var(--frame);
  box-shadow: var(--shadow-well-sm);
}
.ad-label {
  position: absolute; top: -30px; left: -9px;
  color: var(--muted); font: 11px/14px var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.ad-leaderboard { width: min(728px, calc(100% - 18px)); height: 90px; }
.ad-rect { width: 300px; height: 250px; }
.ad-infeed { width: calc(100% - 18px); height: 120px; margin: 40px 0 16px; }

/* ---------- 404: the simulation slips ---------- */
@keyframes slip { 0%, 92%, 100% { transform: none; clip-path: none; } 93% { transform: translateX(2px); clip-path: inset(0 0 55% 0); } 95% { transform: translateX(-2px); clip-path: inset(45% 0 0 0); } }
.lost { text-align: center; padding: 72px 36px; }
.lost h1 { font-size: 64px; font-style: italic; animation: slip 7s steps(1) infinite; }
.lost::before {
  content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 1px; z-index: 2;
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

/* ---------- footer ---------- */
.foot { margin-top: 72px; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; }

/* ---------- mobile (375 and up) ---------- */
@media (max-width: 760px) {
  body { padding: 0 16px 40px; font-size: 17px; }
  .masthead { min-height: 64px; padding: 10px 0 20px; margin-bottom: 24px; gap: 4px 16px; }
  .wordmark { font-size: 34px; gap: 10px; }
  .wordmark::before { width: 34px; height: 34px; }
  .masthead nav { gap: 18px; }
  .masthead nav a { font-size: 16px; }
  h1 { font-size: 36px; }
  .hero h1, .lost h1 { font-size: 44px; }
  .box { padding: 22px 20px 24px; border-width: 8px; }
  .search input[type=search] { font-size: 17px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .hits a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .hits small { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .entry h1 code { font-size: 30px; }
  .sigs li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sigs span { text-align: left; }
  .example .codewrap { margin: 0 12px; }
  .ad-leaderboard { width: 320px; height: 50px; border-width: 4px; }
  .ad-rect { width: 300px; height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Journal (engineering pass, built on the Golden Hour tokens; designer to refine)
   Markup: html.zig featured / postRow / journalIndex / journalPost; the post
   body is .prose, rendered by markdown.zig.
   ========================================================================== */
.section-label {
  font: 12px/18px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 44px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}

/* featured post: the newest post as a Cornell box */
.featured { display: grid; gap: 6px; }
.featured-img { display: block; margin: -32px -36px 18px; aspect-ratio: 16 / 7; overflow: hidden; background: var(--mat); }
.featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-title { font-size: 40px; margin: 4px 0 2px; }
.featured-title a { color: var(--ink); text-decoration: none; }
.featured-title a:hover { color: var(--link); }

/* post lists */
.posts { list-style: none; margin: 0; padding: 0; }
.posts a {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; align-items: baseline;
  padding: 12px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  transition: background .12s ease;
}
.posts a:hover { background: color-mix(in srgb, var(--mat) 60%, var(--ground)); }
.posts .meta { grid-column: 1; grid-row: 1 / span 2; }
.posts b { font-weight: 500; font-size: 20px; line-height: 1.3; }
.posts small { grid-column: 2; color: var(--muted); font-size: 16px; line-height: 22px; }
.more { margin: 16px 12px; font-size: 16px; }
.tag-link { color: var(--muted); }

/* a post */
.post { max-width: 760px; }
.post-head h1 { font-size: 52px; margin: 6px 0 10px; }
.post-head .lede { color: var(--ink); }
.post-head .meta { margin-top: 14px; }
.hero-img { margin: 28px 0 8px; }
.toc {
  margin: 28px 0; padding: 14px 20px; background: var(--paper);
  border-left: 3px solid var(--ochre); box-shadow: var(--shadow-well-sm);
}
.toc ol { margin: 6px 0 0; padding-left: 20px; }
.toc li { margin: 3px 0; font-size: 16px; }

.prose { font-size: 19px; line-height: 1.65; max-width: var(--measure); }
.prose h2 { font-size: 30px; margin: 48px 0 10px; }
.prose h3 { font-size: 23px; margin: 34px 0 8px; }
.prose h4 { font: 500 14px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 26px 0 6px; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 16px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin: 6px 0; }
.prose blockquote {
  margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--seaglass);
  color: var(--muted); font-style: italic;
}
.prose hr { border: 0; height: 12px; margin: 40px 0; background: linear-gradient(90deg, var(--ochre) 0 22%, transparent 22% 26%, var(--link) 26% 48%, transparent 48% 52%, var(--cobalt) 52% 74%, transparent 74% 78%, var(--seam) 78% 100%); opacity: .5; }
.prose .codewrap { margin: 22px 0; max-width: calc(var(--measure) + 80px); }
.prose .codewrap:not([data-lang])::before { content: "code"; }
.prose .codewrap[data-lang]::before { content: attr(data-lang); }
.prose img { max-width: 100%; height: auto; }
.figure { margin: 28px 0; }
.figure img { display: block; width: 100%; height: auto; border: 8px solid var(--mat); outline: 1px solid var(--frame); }
.figure figcaption { margin-top: 8px; font-size: 15px; color: var(--muted); font-style: italic; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 8px; }
.pager a { display: grid; gap: 2px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.pager a:hover { border-color: var(--frame); }
.pager .newer { grid-column: 2; text-align: right; }

@media (max-width: 760px) {
  .featured-img { margin: -22px -20px 14px; }
  .featured-title { font-size: 30px; }
  .posts a { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .posts .meta { grid-row: auto; }
  .posts small { grid-column: 1; }
  .post-head h1 { font-size: 36px; }
  .prose { font-size: 18px; }
  .pager { grid-template-columns: 1fr; }
  .pager .newer { grid-column: 1; text-align: left; }
}

/* AdSense units fill the reserved Cornell box exactly; the box keeps its size either way. */
.ad ins.adsbygoogle { display: block; width: 100%; height: 100%; }


/* ==========================================================================
   Design v0.3: the simulation hero (home). The park on the right, the
   unrendered machine breaking through on the left. Name sits right.
   ========================================================================== */
:root { --hero-img: url(/static/hero-park.jpg); --hero-img-sm: url(/static/hero-park-1200.jpg); --hero-scrim: rgba(245, 238, 223, .38); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="park"]) { --hero-img: url(/static/hero-dusk.jpg); --hero-img-sm: url(/static/hero-dusk-1200.jpg); --hero-scrim: rgba(31, 29, 51, .5); }
}
:root[data-theme="dusk"] { --hero-img: url(/static/hero-dusk.jpg); --hero-img-sm: url(/static/hero-dusk-1200.jpg); --hero-scrim: rgba(31, 29, 51, .5); }

.hero.box {
  border: 0; outline: 0; margin: 0 0 32px;
  min-height: 460px; padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right;
  background: var(--hero-img) 0 50% / cover no-repeat, var(--ground);
  box-shadow: 0 40px 60px -40px rgba(20, 14, 8, .55);
  overflow: hidden;
}
.hero.box::after { background: linear-gradient(90deg, transparent 38%, var(--hero-scrim) 70%, var(--hero-scrim)); }
.hero.box > * { max-width: 560px; }
.hero h1 { font-size: 96px; line-height: .95; color: var(--ink); }
.hero .lede { color: var(--ink); opacity: .82; font-family: var(--mono); font-size: 13px; line-height: 20px; letter-spacing: .2em; text-transform: uppercase; margin-top: 14px; }
.hero .search { width: min(560px, 100%); justify-content: flex-end; margin-top: 28px; }
.hero .meta { color: var(--ink); opacity: .78; }

@media (max-width: 760px) {
  .hero.box {
    min-height: 0; padding: 212px 20px 24px; align-items: stretch; text-align: left;
    background: var(--hero-img-sm) 8% 0 / auto 240px no-repeat, var(--ground);
  }
  .hero.box::after { background: linear-gradient(180deg, transparent 150px, var(--ground) 236px); }
  .hero h1 { font-size: 56px; }
  .hero .search { justify-content: flex-start; }
  .masthead::after { background: linear-gradient(90deg, var(--rule) 0 55%, transparent 55% calc(55% + 64px), var(--rule) calc(55% + 64px)); }
  .masthead::before { left: calc(55% + 10px); width: 64px; }
}

/* Section pages (/houdini, /unreal, /blender, /rhino) and the References hub.
   Engineering pass on the design tokens; designer to refine. */
.section-head { max-width: 760px; margin-bottom: 8px; }
.section-head h1 { margin-bottom: 6px; }
.ref-card { max-width: 760px; }
.ref-card .featured-title { font-size: 32px; }
.ref-card p { margin: 6px 0; }

/* ==========================================================================
   Article layout v2 (owner's reference: eyebrow, big title, large lede,
   narrow body, check-icon bullets, roomy h2s, accent-rule quotes, captioned
   figures). Built on the Golden Hour tokens so park and dusk both work.
   Overrides the engineering-pass Journal rules above.
   ========================================================================== */
.post { max-width: 48rem; }
.post-head { display: grid; }
.post-head .crumbs {                         /* the eyebrow: the post's DCC */
  order: -1; margin: 0; font: 500 16px/1.75 var(--serif); letter-spacing: 0; text-transform: none;
}
.post-head .crumbs a { color: var(--link); text-decoration: none; }
.post-head h1 {
  margin: 8px 0 0; font-size: clamp(36px, 5vw, 48px); line-height: 1.1; font-weight: 500;
  letter-spacing: -.015em; text-wrap: pretty;
}
.post-head .lede { margin: 24px 0 0; font-size: 20px; line-height: 32px; color: var(--ink); max-width: none; }
.post-head .meta { margin-top: 20px; }

.prose {
  max-width: 42rem; margin-top: 40px;
  font-size: 17px; line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 78%, var(--ground));
}
.prose p { margin: 0 0 24px; }
.prose strong, .prose h2, .prose h3, .prose h4, .prose blockquote { color: var(--ink); }
.prose h2 { margin: 64px 0 24px; font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
.prose h3 { margin: 40px 0 12px; font-size: 22px; font-weight: 500; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

/* Bullets: a check in a circle, drawn from a mask so it takes the accent colour. */
.prose ul { list-style: none; padding: 0; margin: 32px 0; max-width: 36rem; display: grid; gap: 20px; }
.prose ul > li { position: relative; padding-left: 32px; margin: 0; }
.prose ul > li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 20px; background: var(--link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose ol { padding-left: 24px; margin: 32px 0; display: grid; gap: 14px; max-width: 36rem; }
.prose ol > li { margin: 0; padding-left: 6px; }
.prose ol > li::marker { color: var(--link); font: 500 15px var(--mono); }

/* Quotes: accent rule on the left, set in the heading colour. */
.prose blockquote {
  margin: 40px 0; padding: 0 0 0 36px; border-left: 1px solid var(--link);
  font-style: normal; font-weight: 500; font-size: 18px; line-height: 1.7;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Figures: rounded, full article width, caption with an info mark. */
.figure { margin: 64px 0; }
.figure img { border: 0; outline: 0; border-radius: 12px; background: var(--mat); aspect-ratio: auto; }
.figure figcaption { display: flex; gap: 8px; margin-top: 16px; font-size: 14px; line-height: 1.7; font-style: normal; color: var(--muted); }
.figure figcaption::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Code in articles keeps the cold-room look, a little wider than the text. */
.prose .codewrap { margin: 32px 0; max-width: 46rem; }
.prose :not(pre) > code { color: var(--ink); }
.toc { margin: 32px 0 0; max-width: 42rem; }

@media (max-width: 760px) {
  .post-head .lede { font-size: 18px; line-height: 28px; }
  .prose h2 { margin-top: 48px; font-size: 26px; }
  .prose blockquote { padding-left: 20px; }
}

/* ==========================================================================
   Layout v0.6: editorial pass (cards, section tiles, two-column articles).
   Structure borrowed from the Oatmeal kit's patterns (feature cards, document
   layout with a side rail, two-column hero), re-skinned in Golden Hour.
   Each post/section carries data-dcc; the accent follows it.
   ========================================================================== */
[data-dcc] { --acc: var(--link); }
[data-dcc="houdini"] { --acc: #A9492B; }
[data-dcc="unreal"]  { --acc: #2F4F8F; }
[data-dcc="blender"] { --acc: #9A5B12; }
[data-dcc="rhino"]   { --acc: #3F6B5F; }
[data-dcc="latest"]  { --acc: #6E5A48; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="park"]) [data-dcc="houdini"] { --acc: #E8906C; }
  :root:not([data-theme="park"]) [data-dcc="unreal"]  { --acc: #9FB6EE; }
  :root:not([data-theme="park"]) [data-dcc="blender"] { --acc: #E7B45E; }
  :root:not([data-theme="park"]) [data-dcc="rhino"]   { --acc: #8CC4B2; }
  :root:not([data-theme="park"]) [data-dcc="latest"]  { --acc: #C9BFAE; }
}
:root[data-theme="dusk"] [data-dcc="houdini"] { --acc: #E8906C; }
:root[data-theme="dusk"] [data-dcc="unreal"]  { --acc: #9FB6EE; }
:root[data-theme="dusk"] [data-dcc="blender"] { --acc: #E7B45E; }
:root[data-theme="dusk"] [data-dcc="rhino"]   { --acc: #8CC4B2; }
:root[data-theme="dusk"] [data-dcc="latest"]  { --acc: #C9BFAE; }

.eyebrow { margin: 0; font: 500 12px/18px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acc, var(--link)); }

/* ---------- section tiles on home (Oatmeal: features-three-column-with-demos) ---------- */
.dcc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 8px 0 56px; }
.dcc-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 0 0 18px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dcc-tile:hover { color: var(--ink); transform: translateY(-2px); border-color: var(--acc); box-shadow: 0 18px 30px -22px rgba(20, 14, 8, .6); }
.dcc-tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 8px; }
.dcc-tile .dcc-name { padding: 0 18px; font-size: 24px; line-height: 1.15; font-weight: 500; }
.dcc-tile .dcc-name::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: 3px; background: var(--acc); clip-path: polygon(8% 4%, 100% 0, 88% 100%, 0 90%); }
.dcc-tile small { padding: 0 18px; font-size: 15px; line-height: 22px; color: var(--muted); }
.dcc-tile .meta { padding: 0 18px; margin-top: auto; padding-top: 6px; }

/* ---------- post cards (home Recent, Latest, tags, sections, Related) ---------- */
.section-label { margin: 8px 0 18px; }
ol.posts { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; border: 0; }
.posts li.card { margin: 0; }
.posts li.card > a {
  display: flex; flex-direction: column; height: 100%; padding: 0; gap: 0;
  grid-template-columns: none; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.posts li.card > a:hover { background: var(--paper); transform: translateY(-2px); border-color: var(--acc); box-shadow: 0 20px 34px -24px rgba(20, 14, 8, .6); }
.card-art { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mat); }
.card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.posts li.card > a:hover .card-art img { transform: scale(1.03); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.card-body b { font-size: 21px; line-height: 1.25; font-weight: 500; letter-spacing: -.005em; text-wrap: pretty; }
.posts li.card > a:hover b { text-shadow: none; }
.card-body small { font-size: 15px; line-height: 22px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-body .meta { margin-top: auto; padding-top: 6px; }
.posts .ad { grid-column: 1 / -1; }

/* ---------- featured post: two columns, art beside the text ---------- */
.box.featured {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
  column-gap: 40px; row-gap: 8px; padding: 0 36px 0 0; margin: 0 0 48px;
}
.box.featured .featured-img { grid-column: 1; grid-row: 1 / span 6; align-self: stretch; margin: 0; aspect-ratio: auto; min-height: 340px; }
.box.featured > :not(.featured-img) { grid-column: 2; }
.box.featured .eyebrow { margin-top: 32px; }
.box.featured .featured-title { font-size: 34px; line-height: 1.15; }
.box.featured .lede { font-size: 17px; line-height: 1.55; margin: 4px 0 0; }
.box.featured > .meta:last-child { margin-bottom: 32px; }

/* ---------- articles: body + sticky side rail (Oatmeal: document layout) ---------- */
.post { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 248px; column-gap: 72px; align-items: start; }
.post > * { grid-column: 1; }
.post > .post-head, .post > .hero-img, .post > .related-posts { grid-column: 1 / -1; }
.post-head { max-width: 52rem; }
.post-head .crumbs a { color: var(--acc, var(--link)); font: 500 12px/18px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hero-art { margin: 40px 0 8px; }
.hero-art img { display: block; width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 14px; }
.post > .toc {
  grid-column: 2; grid-row: 3 / span 3; position: sticky; top: 28px; margin: 40px 0 0; max-width: none;
  padding: 0 0 0 20px; border: 0; border-left: 1px solid var(--rule); background: none; box-shadow: none;
}
.post > .toc ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.post > .toc li { margin: 0; font-size: 15px; line-height: 1.4; }
.post > .toc a { color: var(--muted); text-decoration: none; }
.post > .toc a:hover { color: var(--acc, var(--link)); }
.post > .prose { max-width: 42rem; }
.post > .ad { grid-column: 1; }
.post > .pager { max-width: 42rem; }
.related-posts { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--rule); }

/* ---------- section pages: two-column head with the section's art ---------- */
.section-head.has-art { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 48px; align-items: center; margin: 0 0 48px; }
.section-head.has-art .section-art { grid-column: 2; grid-row: 1 / span 3; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 50px -34px rgba(20, 14, 8, .6); }
.section-head.has-art h1 { grid-column: 1; font-size: 64px; margin: 0; }
.section-head.has-art h1::before { content: ""; display: block; width: 14px; height: 14px; margin-bottom: 18px; background: var(--acc); clip-path: polygon(8% 4%, 100% 0, 88% 100%, 0 90%); }
.section-head.has-art .lede { grid-column: 1; font-size: 20px; color: var(--ink); }

@media (max-width: 1100px) {
  .dcc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ol.posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post { grid-template-columns: minmax(0, 1fr); }
  .post > .toc { grid-column: 1; grid-row: auto; position: static; border-left: 0; padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
}
@media (max-width: 760px) {
  .dcc-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .dcc-tile small { display: none; }
  .dcc-tile .dcc-name { font-size: 19px; padding: 0 12px; }
  .dcc-tile .meta { padding: 0 12px; }
  ol.posts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .box.featured { grid-template-columns: minmax(0, 1fr); padding: 0 20px 20px; }
  .box.featured .featured-img { grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; margin: 0 -20px 12px; }
  .box.featured > :not(.featured-img) { grid-column: 1; }
  .box.featured .eyebrow { margin-top: 8px; }
  .box.featured .featured-title { font-size: 26px; }
  .hero-art img { aspect-ratio: 16 / 9; }
  .section-head.has-art { grid-template-columns: minmax(0, 1fr); }
  .section-head.has-art .section-art { grid-column: 1; grid-row: auto; margin-bottom: 20px; }
  .section-head.has-art h1 { font-size: 44px; }
}

/* v0.6.1: width/height attrs set a presentational height, so aspect-ratio needs height:auto */
.dcc-tile img, .hero-art img, .section-head.has-art .section-art { height: auto; }
.section-head.has-art { align-items: center; }
.section-head.has-art .section-art { aspect-ratio: 16 / 9; align-self: center; }
/* featured reads as a large card, not a matted box (the mat stays for reference boxes) */
.box.featured {
  border: 1px solid var(--rule); outline: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 50px -36px rgba(20, 14, 8, .55);
}
.box.featured::after { display: none; }
.box.featured:hover { border-color: var(--acc); }
.card-art img { width: 100%; height: 100%; object-fit: cover; }
/* mobile nav: one scrollable row instead of wrapping to two lines */
@media (max-width: 760px) {
  .masthead nav { display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .masthead nav::-webkit-scrollbar { display: none; }
  .masthead nav a { flex: none; white-space: nowrap; }
}