/* Ludum — tokens.css + bundle.css. Generated by tools/export_repo.py; edit tools/src and tokens.json, then rebuild. */
@font-face{font-family:'Anton';src:url('../fonts/Anton-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/IBMPlexSans-Variable.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/IBMPlexSans-Italic-Variable.woff2') format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
:root,[data-theme="stock"]{--paper:#F4EDE1;--paper-2:#E9DFCC;--sheet:#FBF7EF;--ink:#0B0B0B;--ink-2:#3B3833;--ink-3:#625C52;--rule:#CBC3B3;--rule-strong:var(--ink);--frame:#0B0B0B;--on-frame:#F4EDE1;--red:#D62828;--on-red:#FBF7EF;--red-ink:#C42222;--yellow:#F4C430;--on-yellow:#0B0B0B;--blue:#2A6FB7;--on-blue:#FBF7EF;--blue-ink:#255FA0;--green:#2E7D32;--on-green:#FBF7EF;--grey:#8A8578;--on-grey:#0B0B0B;--focus:var(--ink);--neta-pink:#F2559B;--neta-cyan:#39C6EE;--on-neta:#0B0B0B;--p18-ground:#0B0907;--p18-panel:#1A120C;--p18-wood:#4A2616;--p18-gold:#D7B56E;--p18-gold-deep:#A78445;--p18-gilt:#F8E5A3;--p18-paper:#F2F0EB;--p18-text-dim:#C8C6C0;--p18-text-muted:#A8A6A0;--p18-sepia:#3B2A12;--p18-land:#33402F;--p18-land-rule:#5C6A52;--p18-tile-yellow:#FFE600;--p18-tile-green:#59B578;--p18-tile-brown:#BF8156;--p18-tile-grey:#A9AEB4;--p18-track:#110A0C;--p18-offboard:#7A2020;--p18-coal:#4B4F55;--p20c-night:#0B0F17;--p20c-cream:#EDE6D6;--p20c-mist:#A9B3C2;--p20c-yellow:var(--yellow);--p20c-blue:var(--blue);--p20c-line:#5B9BE6;--p20c-red:var(--red)}
[data-theme="press"]{--paper:#0B0B0B;--paper-2:#161514;--sheet:#1C1B19;--ink:#F4EDE1;--ink-2:#BDB5A6;--ink-3:#958D7F;--rule:#3A3631;--red-ink:#FF6B5E;--blue-ink:#7FB0EE;--focus:#F4C430;--rule-strong:var(--ink);--p20c-yellow:var(--yellow);--p20c-blue:var(--blue);--p20c-red:var(--red)}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--radius-0:0;--radius-token:999px;--rule-hair:1px;--rule-2:2px;--rule-4:4px;--rule-bar:8px;--rule-band:16px;--frame-max:1600px;--measure:680px;--grid-cols:12;--margin-desktop:48px;--margin-laptop:32px;--margin-tablet:24px;--margin-phone:16px;--nav-h:64px;--dur-wipe:240ms;--dur-print:560ms;--dur-draw:1200ms;--ease-press:cubic-bezier(.7,0,.2,1);--ease-out:cubic-bezier(.2,.8,.2,1);--font-display:Anton, 'Arial Narrow', Impact, sans-serif;--font-mono:'IBM Plex Mono', ui-monospace, 'Courier New', monospace;--font-sans:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif}
.d0{font-family:var(--font-display);font-size:232px;line-height:0.82;font-weight:400;letter-spacing:-0.005em}
.d1{font-family:var(--font-display);font-size:144px;line-height:0.84;font-weight:400;letter-spacing:-0.005em}
.d2{font-family:var(--font-display);font-size:88px;line-height:0.88;font-weight:400;letter-spacing:0}
.d3{font-family:var(--font-display);font-size:56px;line-height:0.9;font-weight:400;letter-spacing:0}
.d4{font-family:var(--font-display);font-size:36px;line-height:0.94;font-weight:400;letter-spacing:0.005em}
.d5{font-family:var(--font-display);font-size:24px;line-height:1;font-weight:400;letter-spacing:0.01em}
.lede{font-family:var(--font-sans);font-size:22px;line-height:32px;font-weight:400;letter-spacing:0}
.body{font-family:var(--font-sans);font-size:18px;line-height:30px;font-weight:400;letter-spacing:0}
.body-s{font-family:var(--font-sans);font-size:15px;line-height:24px;font-weight:400;letter-spacing:0}
.strong{font-family:var(--font-sans);font-size:18px;line-height:30px;font-weight:600;letter-spacing:0}
.nav-m{font-family:var(--font-mono);font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.08em}
.label{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.1em}
.label-s{font-family:var(--font-mono);font-size:11px;line-height:14px;font-weight:500;letter-spacing:0.12em}
.data{font-family:var(--font-mono);font-size:14px;line-height:22px;font-weight:400;letter-spacing:0}
.button{font-family:var(--font-mono);font-size:14px;line-height:16px;font-weight:600;letter-spacing:0.08em}

/* Ludum · bundle.css
   Loaded after tokens.css. Every class is prefixed ld-; the page body carries class="ld-page".
   Themes: tokens.css answers [data-theme] on ANY element, so a subtree can pin its own:
   the nav and footer are data-theme="press"; the Project 18XX and 20 Cosmos fields are "press" too.
   Breakpoints: phone < 600 · tablet 600–1023 · laptop 1024–1279 · desktop ≥ 1280. */

/* ---------- 0. The responsive scale ---------- */
:root {
  --ld-d0: 232px; --ld-d1: 144px; --ld-d2: 88px; --ld-d3: 56px; --ld-d4: 36px; --ld-d5: 24px;
  --ld-margin: var(--margin-desktop, 48px);
  --ld-gutter: 24px;
  --ld-section: var(--space-9, 96px);
  --ld-nav-h: var(--nav-h, 64px);
  --ld-wipe: var(--dur-wipe, 240ms) var(--ease-press, cubic-bezier(.7, 0, .2, 1));
  --ld-shift: var(--dur-wipe, 240ms) var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
@media (max-width: 1279px) {
  :root { --ld-d0: 196px; --ld-d1: 120px; --ld-d2: 76px; --ld-d3: 48px; --ld-d4: 32px; --ld-margin: var(--margin-laptop, 32px); }
}
@media (max-width: 1023px) {
  :root { --ld-d0: 156px; --ld-d1: 96px; --ld-d2: 64px; --ld-d3: 44px; --ld-d4: 30px; --ld-d5: 22px;
          --ld-margin: var(--margin-tablet, 24px); --ld-gutter: 16px; --ld-section: var(--space-8, 64px); }
}
@media (max-width: 599px) {
  :root { --ld-d0: 112px; --ld-d1: 72px; --ld-d2: 52px; --ld-d3: 38px; --ld-d4: 28px;
          --ld-margin: var(--margin-phone, 16px); --ld-section: var(--space-7, 48px); --ld-nav-h: 56px; }
}

/* ---------- 1. Base ---------- */
html { background: var(--paper); scroll-padding-top: calc(var(--ld-nav-h) + 4px + 16px); }   /* in-page jumps land below the sticky nav */
html:has(.ld-tabs-bar) { scroll-padding-top: calc(var(--ld-nav-h) + 4px + 64px); }   /* and below a project's sticky tabs */
.ld-page {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal; font-synthesis: none;
}
.ld-page *, .ld-page *::before, .ld-page *::after { box-sizing: border-box; }
:where(.ld-page) img { display: block; max-width: 100%; }
:where(.ld-page) a { color: inherit; }
:where(.ld-page) :focus { outline: none; }
:where(.ld-page) :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ld-page ::selection { background: var(--yellow); color: var(--on-yellow); }
.ld-page [hidden] { display: none !important; }
:where([data-theme]) { color: var(--ink); }

.ld-skip {
  position: absolute; left: 8px; top: -120px; z-index: 100; padding: 14px 18px;
  background: var(--yellow); color: var(--on-yellow); text-decoration: none;
  font: 600 14px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.ld-skip:focus-visible { top: 8px; outline-color: var(--on-yellow); }
.ld-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 2. Type ---------- */
.ld-d0, .ld-d1, .ld-d2, .ld-d3, .ld-d4, .ld-d5 {
  margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-synthesis: none;
}
.ld-d0 { font-size: var(--ld-d0); line-height: .82; letter-spacing: -.005em; }
.ld-d1 { font-size: var(--ld-d1); line-height: .84; letter-spacing: -.005em; }
.ld-d2 { font-size: var(--ld-d2); line-height: .88; }
.ld-d3 { font-size: var(--ld-d3); line-height: .9; }
.ld-d4 { font-size: var(--ld-d4); line-height: .94; letter-spacing: .005em; }
.ld-d5 { font-size: var(--ld-d5); line-height: 1; letter-spacing: .01em; }
.ld-lede { margin: 0; font: 400 22px/32px var(--font-sans); }
.ld-body { margin: 0; font: 400 18px/30px var(--font-sans); }
.ld-body-s { margin: 0; font: 400 15px/24px var(--font-sans); }
.ld-label { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ld-label-s { margin: 0; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.ld-data { margin: 0; font: 400 14px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.ld-muted { color: var(--ink-3); }
.ld-quiet { color: var(--ink-2); }
.ld-pick { color: var(--red); }                    /* a picked-out word in display type (large only) */
.ld-pick-ink { color: var(--red-ink); }            /* a picked-out word at text size */
@media (max-width: 599px) {
  .ld-lede { font-size: 19px; line-height: 28px; }
  .ld-body { font-size: 17px; line-height: 28px; }
}

/* ---------- 3. Frame and grid ---------- */
.ld-wrap { width: 100%; max-width: var(--frame-max, 1600px); margin-inline: auto; padding-inline: var(--ld-margin); }
.ld-section { padding-block: var(--ld-section); }
.ld-section + .ld-section { padding-top: 0; }
.ld-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ld-gutter); }
@media (max-width: 599px) { .ld-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ld-measure { max-width: var(--measure, 680px); }

/* ---------- 4. Rules and bands ---------- */
.ld-rule { display: block; height: 0; margin: 0; border: 0; border-top: 2px solid var(--rule-strong); }
.ld-rule--hair { border-top: 1px solid var(--rule); }
.ld-rule--4 { border-top-width: 4px; }
.ld-rule--bar { border-top-width: 8px; }
.ld-band { display: block; height: 16px; background: var(--ink); }
.ld-band--stripes { background: repeating-linear-gradient(90deg, var(--ink) 0 9px, transparent 9px 15px); }
.ld-band--rungs { background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 11px); }
.ld-band--pigment { background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--blue) 50% 75%, var(--green) 75% 100%); }
.ld-band--8 { height: 8px; }
.ld-band--neta { height: 4px; background: linear-gradient(90deg, var(--neta-pink), var(--neta-cyan)); }   /* the Neta line: only where Ludum meets Neta DAO */

/* Per-theme print behaviour: custom properties, so the nearest [data-theme] wins (a stock field inside a Press page prints as stock). */
:root, [data-theme="stock"] {
  --ld-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.04  0 0 0 0 0.04  2.6 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); --ld-grain-blend: multiply; --ld-grain-o: .3;
  --ld-print-blend: multiply; --ld-ink-filter: grayscale(1) contrast(1.35) brightness(1.06); --ld-ink-blend: multiply;
}
[data-theme="press"] {
  --ld-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  2.6 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); --ld-grain-blend: screen; --ld-grain-o: .22;
  --ld-print-blend: normal; --ld-ink-filter: grayscale(1) invert(1) contrast(1.3); --ld-ink-blend: screen;
}

/* ---------- 5. Texture: used on fields and mastheads, never under running text ---------- */
.ld-grain { position: relative; isolation: isolate; }
.ld-grain::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: var(--ld-grain); background-size: 220px 220px; opacity: var(--ld-grain-o); mix-blend-mode: var(--ld-grain-blend);
}
.ld-grain--light::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  2.6 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen; opacity: .22; }
.ld-halftone { background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.6px); background-size: 6px 6px; }
.ld-hatch { background-image: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, transparent 1.5px 7px); }
.ld-hatch--soft { background-image: repeating-linear-gradient(135deg, var(--rule) 0 2px, transparent 2px 9px); }
.ld-torn { display: block; width: 100%; height: 28px; color: var(--paper); }
.ld-torn svg { display: block; width: 100%; height: 100%; }
.ld-torn--up { transform: scaleY(-1); }

/* ---------- 6. Pigment marks ---------- */
.ld-sun { display: block; aspect-ratio: 1; border-radius: var(--radius-token, 999px); background: var(--red); }
.ld-sun--yellow { background: var(--yellow); }
.ld-sun--blue { background: var(--blue); }
.ld-sun--ink { background: var(--ink); }
.ld-tape {
  display: inline-block; padding: 4px 8px 3px; background: var(--yellow); color: var(--on-yellow);
  font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-2deg);
}
.ld-icon { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.ld-icon--16 { width: 16px; height: 16px; }
.ld-icon--20 { width: 20px; height: 20px; }
.ld-icon--32 { width: 32px; height: 32px; }
.ld-icon--48 { width: 48px; height: 48px; }
.ld-icon .ld-icon__fill { fill: currentColor; stroke: none; }

/* ---------- 7. Images and their treatments ---------- */
.ld-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-treat { position: relative; overflow: hidden; margin: 0; }
.ld-treat--print img { mix-blend-mode: var(--ld-print-blend, multiply); }                                         /* colour photography on stock */
.ld-treat--ink img { filter: var(--ld-ink-filter); mix-blend-mode: var(--ld-ink-blend, multiply); }   /* engraving on stock */
.ld-treat--night img { filter: grayscale(1) contrast(1.25) brightness(.92); mix-blend-mode: screen; }   /* engraving on a dark field */
.ld-treat--duo { background: var(--ld-duo, var(--red)); }
.ld-treat--duo img { filter: grayscale(1) contrast(1.45) brightness(1.08); mix-blend-mode: multiply; }
.ld-treat--duo-yellow { --ld-duo: var(--yellow); }
.ld-treat--duo-blue { --ld-duo: var(--blue); }
.ld-treat--screen::after {        /* a halftone screen laid over the picture */
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .35;
  background-image: radial-gradient(circle, #0B0B0B 1px, transparent 1.5px); background-size: 5px 5px;
}
.ld-treat--framed { border: 2px solid var(--rule-strong); }

/* ---------- 8. Project identities ---------- */
/* A project field pins its theme (Project 18XX and 20 Cosmos: data-theme="press") and sets roles for its components. */
.ld-pj--p18 {
  --pj-ground: var(--p18-ground); --pj-ink: var(--p18-paper); --pj-ink-2: var(--p18-text-dim); --pj-ink-3: var(--p18-text-muted);
  --pj-accent: var(--p18-gold); --pj-on-accent: var(--on-yellow); --pj-accent-2: var(--p18-gilt); --pj-signal: var(--p18-gold); --pj-rule: var(--p18-gold-deep);
  --focus: var(--p18-gilt);
}
/* Gilt: Project 18XX's numerals take the gold of its title art as a cast-metal gradient (solid gold where clipping isn't supported). */
.ld-gilt { color: var(--p18-gold); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ld-gilt {
    background: linear-gradient(180deg, var(--p18-gilt) 0%, var(--p18-gold) 42%, var(--p18-gold-deep) 58%, var(--p18-gold) 74%, var(--p18-gilt) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--p18-gold);
  }
}
/* The gilt frame: a hairline, a gap, a hairline — the picture frames of the game's boardroom. */
.ld-giltframe { position: relative; padding: 8px; background: var(--p18-panel); box-shadow: inset 0 0 0 1px var(--p18-gold-deep), inset 0 0 0 5px var(--p18-panel), inset 0 0 0 6px var(--p18-gold-deep); }
.ld-giltframe img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Line art: Project 18XX's gold drawings on black sit bare on the field; a mask fades their edges so no rectangle shows. */
.ld-lineart { position: relative; margin: 0; }
.ld-lineart img { -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%); }
.ld-mast .ld-lineart img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%), linear-gradient(0deg, transparent 0, #000 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%), linear-gradient(0deg, transparent 0, #000 18%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* The game's own title art is gold on pure black: screen it onto any dark field so its black disappears. */
.ld-titleart { display: block; width: 100%; height: auto; mix-blend-mode: screen; }
.ld-pj--cosmos {
  --pj-ground: var(--p20c-night); --pj-ink: var(--p20c-cream); --pj-ink-2: var(--p20c-mist); --pj-ink-3: var(--p20c-mist);
  --pj-accent: var(--p20c-yellow); --pj-on-accent: var(--on-yellow); --pj-accent-2: var(--p20c-blue); --pj-signal: var(--p20c-line); --pj-rule: var(--p20c-cream);
  --focus: var(--yellow);
}
.ld-pj { background: var(--pj-ground); color: var(--pj-ink); }

/* ---------- 9. Motion: reveal and draw (bundle.js puts .ld-js on <html>, and .ld-motion too unless reduced motion is asked for) ---------- */
.ld-motion [data-ld-reveal] { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-print, 560ms) var(--ease-press, cubic-bezier(.7, 0, .2, 1)); }
.ld-motion [data-ld-reveal="up"] { clip-path: inset(100% 0 0 0); }
.ld-motion [data-ld-reveal].is-in { clip-path: inset(0 0 0 0); }
.ld-route { transition: stroke-dashoffset var(--dur-draw, 1200ms) var(--ease-press, cubic-bezier(.7, 0, .2, 1)); }
@media (prefers-reduced-motion: reduce) {
  .ld-page *, .ld-page *::before, .ld-page *::after { transition-duration: 0s !important; animation: none !important; }
  .ld-motion [data-ld-reveal] { clip-path: none; }
}

/* ---------- 10. Buttons ----------
   A hard wipe on hover (the second colour slides in from the left), a 2px press on :active, the focus ring on :focus-visible.
   .is-hover / .is-active / .is-focus force a state for documentation only. */
.ld-btn {
  --b-bg: var(--red); --b-fg: var(--on-red); --b-edge: var(--red);
  --b-wipe: var(--ink); --b-wipe-fg: var(--paper); --b-wipe-edge: var(--ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px; padding: 0 18px 0 22px; margin: 0;
  font: 600 14px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--b-fg); background: var(--b-bg); border: 2px solid var(--b-edge); border-radius: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color var(--ld-wipe), border-color var(--ld-wipe), transform 80ms linear;
}
.ld-btn::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; background: var(--b-wipe);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ld-wipe);
}
.ld-btn .ld-icon { width: 20px; height: 20px; transition: transform var(--ld-shift); }
.ld-btn:hover, .ld-btn.is-hover { color: var(--b-wipe-fg); border-color: var(--b-wipe-edge); }
.ld-btn:hover::before, .ld-btn.is-hover::before { transform: scaleX(1); }
.ld-btn:hover .ld-icon, .ld-btn.is-hover .ld-icon { transform: translateX(4px); }
.ld-btn:active, .ld-btn.is-active { transform: translateY(2px); }
.ld-btn:active::before, .ld-btn.is-active::before { transform: scaleX(1); }
.ld-btn:active, .ld-btn.is-active { color: var(--b-wipe-fg); border-color: var(--b-wipe-edge); }
.ld-btn.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.ld-btn--secondary { --b-bg: transparent; --b-fg: var(--ink); --b-edge: var(--rule-strong); --b-wipe: var(--ink); --b-wipe-fg: var(--paper); --b-wipe-edge: var(--ink); }
.ld-btn--ink { --b-bg: var(--ink); --b-fg: var(--paper); --b-edge: var(--ink); --b-wipe: var(--red); --b-wipe-fg: var(--on-red); --b-wipe-edge: var(--red); }
.ld-btn--yellow { --b-bg: var(--yellow); --b-fg: var(--on-yellow); --b-edge: var(--yellow); --b-wipe: var(--ink); --b-wipe-fg: var(--paper); --b-wipe-edge: var(--ink); }
.ld-btn--l { min-height: 64px; padding: 0 24px 0 28px; font-size: 16px; line-height: 18px; }
.ld-btn--block { display: flex; width: 100%; }
.ld-btn[aria-disabled="true"], .ld-btn:disabled {
  --b-bg: var(--paper); --b-fg: var(--ink-3); --b-edge: var(--ink-3); cursor: not-allowed;
  background-image: repeating-linear-gradient(135deg, var(--rule) 0 2px, transparent 2px 9px);
}
.ld-btn[aria-disabled="true"]::before, .ld-btn:disabled::before { display: none; }
.ld-btn[aria-disabled="true"]:hover, .ld-btn:disabled:hover { color: var(--ink-3); border-color: var(--ink-3); }
.ld-btn[aria-disabled="true"] .ld-icon, .ld-btn:disabled .ld-icon { transform: none; }
.ld-btn[aria-pressed="true"] { --b-bg: var(--ink); --b-fg: var(--paper); --b-edge: var(--ink); }

/* A text action: mono, underlined, an arrow that moves. */
.ld-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  font: 600 14px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: color var(--ld-shift), background-size var(--ld-wipe);
}
.ld-link .ld-icon { width: 18px; height: 18px; transition: transform var(--ld-shift); }
.ld-link:hover, .ld-link.is-hover { color: var(--red-ink); }
.ld-link:hover .ld-icon, .ld-link.is-hover .ld-icon { transform: translateX(4px); }
.ld-link--out:hover .ld-icon, .ld-link--out.is-hover .ld-icon { transform: translate(3px, -3px); }
.ld-link:active { color: var(--ink); }

/* Links inside running text */
.ld-prose a, .ld-inline {
  color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: var(--red); transition: color var(--ld-shift), text-decoration-color var(--ld-shift);
}
.ld-prose a:hover, .ld-inline:hover { color: var(--red-ink); text-decoration-color: currentColor; }

/* ---------- 11. PLAY ----------
   Ludum is the publisher; play.netadao.org is where the games run. PLAY is always a way out to it, never a page of Ludum's. */
.ld-play {
  --p-bg: var(--neta-cyan); --p-fg: var(--on-neta); --p-wipe: var(--neta-pink); --p-wipe-fg: var(--on-neta);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px 0 22px;
  font: 400 28px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--p-fg); background: var(--p-bg); border: 2px solid var(--frame); border-radius: 0; cursor: pointer;
  transition: color var(--ld-wipe);
}
.ld-play::before { content: ''; position: absolute; inset: -2px; z-index: -1; background: var(--p-wipe); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--ld-wipe); }
.ld-play .ld-icon { width: 22px; height: 22px; stroke-width: 2.5; transition: transform var(--ld-shift); }
.ld-play:hover, .ld-play.is-hover { color: var(--p-wipe-fg); }
.ld-play:hover::before, .ld-play.is-hover::before { transform: scaleY(1); }
.ld-play:hover .ld-icon, .ld-play.is-hover .ld-icon { transform: translate(3px, -3px); }
.ld-play:active, .ld-play.is-active { transform: translateY(2px); }
.ld-play.is-focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.ld-play__what { font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.ld-play--l { min-height: 72px; padding: 0 28px 0 30px; font-size: 40px; gap: 16px; }
.ld-play--l .ld-icon { width: 30px; height: 30px; }
/* Not yet playable: a plate, not a control. It names the state and points nowhere. */
.ld-play--soon {
  --p-bg: transparent; --p-fg: var(--ink); cursor: default; gap: 14px;
  border: 2px dashed var(--ink-3); padding: 0 18px 0 20px;
  background-image: repeating-linear-gradient(135deg, var(--rule) 0 2px, transparent 2px 9px);
}
.ld-play--soon::before { display: none; }
.ld-play--soon .ld-play__word { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--ink); }
.ld-play--soon .ld-play__what { color: var(--ink); }
.ld-play--soon { white-space: normal; flex-wrap: wrap; row-gap: 4px; padding-block: 8px; max-width: 100%; }
.ld-play--soon .ld-play__what { line-height: 16px; }
.ld-play--soon:hover { color: var(--p-fg); }

/* ---------- 12. Status stamps ----------
   Rubber-stamp plates: a pigment border, a hairline of the ground inside it, the word. Each status is a word, never a colour alone. */
.ld-stamp {
  --s-bg: var(--grey); --s-fg: var(--on-grey);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 6px;
  font: 400 19px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: var(--s-fg); background: var(--s-bg); border: 3px solid var(--s-bg); box-shadow: inset 0 0 0 2px var(--paper);
}
.ld-stamp--playable { --s-bg: var(--red); --s-fg: var(--on-red); }
.ld-stamp--dev { --s-bg: var(--yellow); --s-fg: var(--on-yellow); }
.ld-stamp--experimental { --s-bg: var(--blue); --s-fg: var(--on-blue); }
.ld-stamp--research { --s-bg: var(--green); --s-fg: var(--on-green); }
.ld-stamp--archive { --s-bg: var(--grey); --s-fg: var(--on-grey); }
.ld-stamp--s { padding: 4px 7px 3px; font: 600 11px/14px var(--font-mono); letter-spacing: .1em; border-width: 2px; box-shadow: inset 0 0 0 1px var(--paper); }
.ld-stamp--tilt { transform: rotate(-3deg); }
.ld-stamp__dot { width: 8px; height: 8px; border-radius: var(--radius-token, 999px); background: currentColor; }

/* ---------- 13. Tabs and filters ---------- */
.ld-tabs {
  display: flex; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
  border-bottom: 2px solid var(--rule-strong); scroll-snap-type: x proximity;
}
.ld-tabs::-webkit-scrollbar { display: none; }
.ld-tabs > a, .ld-tabs > button {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px;
  font: 500 14px/20px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--ink-3); background: none; border: 0; border-radius: 0; cursor: pointer; scroll-snap-align: start;
  transition: color var(--ld-shift);
}
.ld-tabs > :first-child { padding-left: 0; }
.ld-tabs > a::after, .ld-tabs > button::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: -2px; height: 6px; background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ld-wipe);
}
.ld-tabs > :first-child::after { left: 0; }
.ld-tabs > :hover, .ld-tabs > .is-hover { color: var(--ink); }
.ld-tabs > :hover::after, .ld-tabs > .is-hover::after { transform: scaleX(1); }
.ld-tabs > [aria-current], .ld-tabs > [aria-selected="true"], .ld-tabs > [aria-pressed="true"] { color: var(--ink); }
.ld-tabs > [aria-current]::after, .ld-tabs > [aria-selected="true"]::after, .ld-tabs > [aria-pressed="true"]::after { transform: scaleX(1); background: var(--ink); }
.ld-tabs > :focus-visible, .ld-tabs > .is-focus { outline: 3px solid var(--focus); outline-offset: -3px; }
.ld-tabs__count { font-weight: 400; color: var(--ink-3); }
.ld-tabs--sticky { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.ld-tabs-bar { position: sticky; top: calc(var(--ld-nav-h) + 4px); z-index: 20; background: var(--pj-ground, var(--paper)); }
.ld-tabs-bar .ld-tabs { border-bottom-color: var(--pj-rule, var(--rule-strong)); }

/* ---------- 14. Wordmark: the name set in Anton on the black frame. There is no drawn logo. ---------- */
.ld-wordmark {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 12px;
  background: var(--frame); color: var(--on-frame); text-decoration: none;
}
.ld-wordmark__name { display: block; font: 400 72px/.78 var(--font-display); letter-spacing: -.012em; text-transform: uppercase; }
.ld-wordmark__by { display: block; padding-top: 8px; border-top: 3px solid; border-image: linear-gradient(90deg, var(--neta-pink), var(--neta-cyan)) 1; font: 500 12px/14px var(--font-mono); letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; }
.ld-wordmark--bare { background: none; color: var(--ink); padding: 0; }
.ld-wordmark--m .ld-wordmark__name { font-size: 48px; }
.ld-wordmark--m .ld-wordmark__by { font-size: 11px; letter-spacing: .24em; }
.ld-wordmark--xl { padding: 18px 22px; gap: 12px; }
.ld-wordmark--xl .ld-wordmark__name { font-size: 160px; }
.ld-wordmark--xl .ld-wordmark__by { font-size: 18px; letter-spacing: .46em; }
a.ld-wordmark:hover .ld-wordmark__by { color: var(--yellow); }

/* ---------- 15. Site navigation: the black bar ---------- */
.ld-nav { position: sticky; top: 0; z-index: 40; background: var(--frame); color: var(--on-frame); --focus: var(--yellow); }
.ld-nav::after { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--neta-pink), var(--neta-cyan)); }   /* the Neta line: where Ludum meets its parent */
.ld-nav__bar { display: flex; align-items: stretch; height: var(--ld-nav-h); max-width: var(--frame-max, 1600px); margin: 0 auto; padding-left: var(--ld-margin); }
.ld-nav__home { display: flex; align-items: center; gap: 14px; margin-right: auto; color: var(--on-frame); text-decoration: none; }
.ld-nav__name { font: 400 40px/.8 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; padding-top: 3px; }
.ld-nav__by { padding-left: 14px; border-left: 2px solid; border-image: linear-gradient(180deg, var(--neta-pink), var(--neta-cyan)) 1; font: 500 11px/14px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ld-nav__home:hover .ld-nav__by { color: var(--yellow); }
.ld-nav__home:focus-visible { outline-offset: -3px; }
.ld-nav__links { display: flex; align-items: stretch; gap: 0; margin-right: 8px; }
.ld-nav__links > a {
  position: relative; display: flex; align-items: center; padding: 4px 22px 0;
  font: 400 24px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--on-frame);
}
.ld-nav__links > a::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 6px; background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ld-wipe);
}
.ld-nav__links > a:hover::after, .ld-nav__links > a.is-hover::after { transform: scaleX(1); }
.ld-nav__links > a[aria-current]::after { transform: scaleX(1); background: var(--yellow); }
.ld-nav__links > a:focus-visible { outline-offset: -6px; }
.ld-nav__no { display: none; }
.ld-nav .ld-play { min-height: 0; height: var(--ld-nav-h); padding: 4px 26px 0 28px; font-size: 30px; }
.ld-nav .ld-play:focus-visible { outline-offset: -6px; outline-color: var(--frame); }
.ld-nav .ld-play { border-width: 0; }
.ld-nav .ld-play::before { inset: 0; }
.ld-nav__menu {
  display: none; align-items: center; gap: 10px; padding: 0 var(--ld-margin) 0 16px; margin: 0;
  font: 600 13px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-frame); background: none; border: 0; border-left: 1px solid var(--rule); cursor: pointer;
}
.ld-nav__burger { position: relative; width: 22px; height: 14px; }
.ld-nav__burger::before, .ld-nav__burger::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--ld-wipe), top var(--ld-wipe); }
.ld-nav__burger::before { top: 2px; }
.ld-nav__burger::after { top: 10px; }
.ld-nav.is-open .ld-nav__burger::before { top: 6px; transform: rotate(45deg); }
.ld-nav.is-open .ld-nav__burger::after { top: 6px; transform: rotate(-45deg); }
.ld-nav__menu:focus-visible { outline-offset: -6px; }
.ld-nav__panel-foot { display: none; }
@media (max-width: 1023px) {
  .ld-nav__links > a { padding: 4px 16px 0; font-size: 22px; }
  .ld-nav__links > a::after { left: 16px; right: 16px; }
  .ld-nav .ld-play { padding: 4px 20px 0 22px; font-size: 26px; }
}
/* Phone: the bar keeps the name, PLAY and Menu; the links open as a full black sheet set large. */
@media (max-width: 599px) {
  .ld-nav__name { font-size: 32px; }
  .ld-nav__by { display: none; }
  .ld-nav .ld-play { padding: 4px 14px 0 16px; font-size: 24px; gap: 8px; }
  .ld-nav .ld-play .ld-icon { width: 18px; height: 18px; }
  .ld-nav__menu { display: flex; }
  .ld-js .ld-nav__links {
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--ld-nav-h)); height: calc(100dvh - var(--ld-nav-h));
    flex-direction: column; margin: 0; padding: 8px var(--ld-margin) 24px; background: var(--frame); border-top: 1px solid var(--rule);
    overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-print, 560ms) var(--ease-press), visibility 0s linear var(--dur-print, 560ms);
  }
  .ld-js .ld-nav.is-open .ld-nav__links { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path var(--dur-print, 560ms) var(--ease-press), visibility 0s; }
  .ld-nav--open-demo .ld-nav__bar { flex-wrap: wrap; height: auto; }
  .ld-nav--open-demo .ld-nav__links, .ld-js .ld-nav--open-demo .ld-nav__links { position: static; order: 3; flex: 0 0 calc(100% + var(--ld-margin)); height: auto; min-height: 640px; margin: 0 0 0 calc(-1 * var(--ld-margin)); visibility: visible; clip-path: none; }
  .ld-nav__links > a { justify-content: space-between; align-items: baseline; padding: 18px 0 12px; font-size: 64px; line-height: .9; border-bottom: 2px solid var(--rule); }
  .ld-nav__links > a::after { left: 0; right: auto; width: 56px; bottom: -2px; }
  .ld-nav__no { display: inline; font: 500 12px/16px var(--font-mono); letter-spacing: .1em; color: var(--ink-3); }
  .ld-nav__panel-foot { display: block; margin-top: auto; padding-top: 32px; }
  .ld-nav__panel-foot .ld-play { display: flex; justify-content: space-between; width: 100%; height: auto; min-height: 72px; padding: 6px 20px 0; font-size: 40px; }
  .ld-nav__panel-foot p { margin: 16px 0 0; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  html:not(.ld-js) .ld-nav__menu { display: none; }
  html:not(.ld-js) .ld-nav__bar { flex-wrap: wrap; height: auto; }
  html:not(.ld-js) .ld-nav__links { order: 3; width: 100%; }
}

/* ---------- 16. Section head ---------- */
.ld-sechead {
  display: grid; grid-template-columns: minmax(64px, 1fr) 11fr auto; align-items: end; column-gap: var(--ld-gutter);
  padding-top: 14px; border-top: 2px solid var(--rule-strong); margin-bottom: var(--space-7, 48px);
}
.ld-sechead__no { align-self: start; padding-top: 4px; font: 500 12px/16px var(--font-mono); letter-spacing: .1em; }
.ld-sechead__title { margin: 0; font: 400 var(--ld-d2)/.88 var(--font-display); text-transform: uppercase; }
.ld-sechead__dek { grid-column: 2 / 3; margin: 14px 0 0; max-width: 60ch; font: 400 15px/24px var(--font-sans); color: var(--ink-2); }
.ld-sechead__more { grid-column: 3; grid-row: 1; align-self: end; }
@media (max-width: 599px) {
  .ld-sechead { grid-template-columns: 1fr auto; row-gap: 12px; margin-bottom: var(--space-6, 32px); }
  .ld-sechead__no { grid-column: 1; grid-row: 1; }
  .ld-sechead__title { grid-column: 1 / -1; grid-row: 2; }
  .ld-sechead__dek { grid-column: 1 / -1; }
  .ld-sechead__more { grid-column: 2; grid-row: 1; align-self: start; }
}

/* ---------- 17. Metadata strip ---------- */
.ld-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; padding: 0;
  border-top: 4px solid var(--rule-strong);
}
.ld-meta > div { min-width: 0; padding: 12px 20px 14px 0; margin-right: 20px; border-right: 1px solid var(--rule); }
.ld-meta > div:last-child { border-right: 0; margin-right: 0; }
.ld-meta dt { margin: 0 0 6px; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ld-meta dd { margin: 0; font: 400 14px/22px var(--font-mono); color: var(--ink); }
.ld-meta dd .ld-stamp { margin-top: 1px; }
.ld-meta--compact > div { padding: 8px 14px 10px 0; margin-right: 14px; }
.ld-pj .ld-meta { border-top-color: var(--pj-rule); }
.ld-pj .ld-meta dt { color: var(--pj-ink-3); }
.ld-pj .ld-meta dd { color: var(--pj-ink); }
@media (max-width: 599px) {
  .ld-meta { grid-template-columns: 1fr 1fr; }
  .ld-meta > div { margin-right: 0; padding: 10px 12px 12px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ld-meta > div:nth-child(odd) { border-right: 1px solid var(--rule); margin-right: 12px; }
}

/* ---------- 18. Statement band ---------- */
.ld-statement { padding-block: var(--ld-section); }
.ld-statement__text { margin: 0; font: 400 var(--ld-d1)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; max-width: 12ch; }
.ld-statement__text em { font-style: normal; color: var(--red); }
.ld-statement--frame { background: var(--frame); color: var(--on-frame); }
.ld-statement--frame .ld-statement__text em { color: var(--yellow); }

/* ---------- 19. Play band: the way out to play.netadao.org ---------- */

/* ---------- 20. Footer ---------- */
/* One quiet line under the Neta band: the copyright, and the way back to Neta DAO. The nav already carries everything else. */
.ld-footer { background: var(--frame); color: var(--on-frame); --focus: var(--yellow); }
.ld-footer__band { display: block; height: 8px; background: linear-gradient(90deg, var(--neta-pink), var(--neta-cyan)); }   /* the Neta line, full strength */
.ld-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 24px; }
.ld-footer__print { margin: 0; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ld-footer__neta { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ld-footer__neta img { width: 40px; height: auto; }
.ld-footer__neta:hover { color: var(--yellow); }

/* ---------- 21. Project masthead: the poster at the top of a project page ---------- */
.ld-mast { position: relative; overflow: hidden; }
.ld-mast__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 16px; background: repeating-linear-gradient(180deg, var(--pj-ink) 0 6px, transparent 6px 11px); }
.ld-mast__grid {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ld-gutter);
  padding-top: var(--space-7, 48px); padding-bottom: var(--space-7, 48px);
}
.ld-mast__kicker { grid-column: 1 / 9; grid-row: 1; margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pj-ink); }
.ld-mast__status { grid-column: 9 / 13; grid-row: 1; justify-self: end; align-self: start; }
.ld-mast__title { grid-column: 1 / 7; grid-row: 2; position: relative; z-index: 2; margin: 40px 0 0; font-weight: 400; }
.ld-mast__num { display: block; font: 400 var(--ld-d0)/.8 var(--font-display); letter-spacing: -.01em; color: var(--pj-accent); }
.ld-mast__name { display: block; margin-top: 10px; font: 400 var(--ld-d2)/.88 var(--font-display); text-transform: uppercase; color: var(--pj-ink); }
.ld-mast__art { grid-column: 5 / 11; grid-row: 2 / 4; position: relative; z-index: 1; margin: 0; align-self: stretch; min-height: 460px; }
.ld-mast__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.ld-mast__verbs { grid-column: 11 / 13; grid-row: 2 / 4; align-self: center; position: relative; z-index: 2; }
.ld-mast__dek { grid-column: 1 / 5; grid-row: 3; align-self: end; position: relative; z-index: 2; margin: 32px 0 0; font: 400 22px/32px var(--font-sans); color: var(--pj-ink); }
.ld-mast__foot { grid-column: 1 / 13; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ld-gutter); align-items: end; margin-top: 40px; }
.ld-mast__play { display: grid; gap: 8px; justify-items: end; }
.ld-mast__play .ld-label-s { color: var(--pj-ink-3); }
/* Project 18XX: the game's own gilded title art as the title, a framed boardroom picture, the verbs as a gilt row */
.ld-mast--p18 .ld-mast__edge { background: repeating-linear-gradient(180deg, var(--p18-gold-deep) 0 6px, transparent 6px 11px); }
.ld-mast--p18 .ld-mast__title { grid-column: 1 / 7; grid-row: 2; margin-top: 28px; }
.ld-mast--p18 .ld-mast__name { margin: 0 0 6px; }
.ld-mast--p18 .ld-mast__kicker, .ld-mast--p18 .ld-mast__status, .ld-mast--p18 .ld-mast__dek { position: relative; z-index: 2; }
/* The board meeting bleeds off the right edge behind the title; its own left third is empty black */
.ld-mast--p18 .ld-mast__art { grid-column: 5 / 13; grid-row: 1 / 4; align-self: start; min-height: 0; aspect-ratio: 1350 / 696; margin-right: calc(-1 * var(--ld-margin)); }
.ld-mast--p18 .ld-mast__art img { object-fit: cover; object-position: 100% 50%; }
.ld-mast--p18 .ld-mast__dek { grid-column: 1 / 6; grid-row: 3; }
.ld-mast--p18 .ld-mast__verbs { grid-column: 1 / 13; grid-row: 4; align-self: start; margin-top: 44px; }
.ld-mast--p18 .ld-mast__foot { grid-row: 5; }
.ld-pj--p18 .ld-mech__verb { color: var(--p18-gold); }
.ld-pj--p18 .ld-mech > li:hover .ld-mech__verb, .ld-pj--p18 .ld-mech > li.is-hover .ld-mech__verb { color: var(--on-yellow); }
.ld-pj--p18 .ld-mech > li { border-bottom-color: #2E241A; }
/* Inside the Project 18XX field, section heads take the gold and the gilt rule */
.ld-pj--p18 .ld-sechead { border-top-color: var(--p18-gold-deep); }
.ld-pj--p18 .ld-sechead__title { color: var(--p18-gold); }
.ld-pj--p18 .ld-sechead__dek { color: var(--p18-text-dim); }
.ld-mech--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* 20 Cosmos: "20" over COSMOS and the tagline; the boardroom engraving bleeds off the right edge behind them */
.ld-mast--cosmos .ld-mast__edge { background: repeating-linear-gradient(180deg, var(--p20c-line) 0 6px, transparent 6px 11px); }
.ld-mast--cosmos .ld-mast__title { grid-column: 1 / 7; grid-row: 2; margin-top: 28px; }
.ld-mast--cosmos .ld-mast__num { display: block; color: var(--pj-accent); }
.ld-mast--cosmos .ld-mast__word { display: block; margin-top: 4px; font: 400 var(--ld-d1)/.84 var(--font-display); text-transform: uppercase; color: var(--pj-ink); }
.ld-mast--cosmos .ld-mast__name { margin-top: 18px; font: 500 14px/20px var(--font-mono); letter-spacing: .34em; color: var(--pj-ink); }
.ld-mast--cosmos .ld-mast__kicker, .ld-mast--cosmos .ld-mast__status, .ld-mast--cosmos .ld-mast__dek { position: relative; z-index: 2; }
.ld-mast--cosmos .ld-mast__art { grid-column: 5 / 13; grid-row: 1 / 4; align-self: start; min-height: 0; aspect-ratio: 1376 / 768; margin-right: calc(-1 * var(--ld-margin)); }
.ld-mast--cosmos .ld-mast__art img { object-fit: cover; object-position: 100% 50%; }
.ld-mast--cosmos .ld-mast__dek { grid-column: 1 / 6; grid-row: 3; }
.ld-mast--cosmos .ld-mast__verbs { grid-column: 1 / 13; grid-row: 4; align-self: start; margin-top: 44px; }
.ld-mast--cosmos .ld-mast__foot { grid-row: 5; }
@media (max-width: 1279px) {
  .ld-mast__art { min-height: 400px; }
}
@media (max-width: 1023px) {
  .ld-mast--p18 .ld-mast__title, .ld-mast--cosmos .ld-mast__title { grid-column: 1 / 13; }
  .ld-mast--p18 .ld-mast__art, .ld-mast--cosmos .ld-mast__art { grid-column: 1 / 13; grid-row: 4; margin: 32px calc(-1 * var(--ld-margin)) 0; }
  .ld-mast--p18 .ld-mast__dek, .ld-mast--cosmos .ld-mast__dek { grid-column: 1 / 11; grid-row: 3; }
  .ld-mast--p18 .ld-mast__verbs, .ld-mast--cosmos .ld-mast__verbs { grid-column: 1 / 13; grid-row: 5; }
  .ld-mast--p18 .ld-mast__foot, .ld-mast--cosmos .ld-mast__foot { grid-row: 6; }
  .ld-mech--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .ld-mast__title { grid-column: 1 / 9; }
  .ld-mast__art { grid-column: 6 / 13; grid-row: 2 / 3; min-height: 340px; }
  .ld-mast__verbs { grid-column: 1 / 13; grid-row: 4; margin-top: 32px; }
  .ld-mast__dek { grid-column: 1 / 9; grid-row: 3; }
  .ld-mast__foot { grid-row: 5; }
}
/* Phone: recomposed, not stacked — numerals first, the picture bleeds as a band, the verbs become a 2 × 3 board, PLAY spans the width. */
@media (max-width: 599px) {
  .ld-mast__edge { width: 100%; height: 10px; bottom: auto; background: repeating-linear-gradient(90deg, var(--pj-ink) 0 6px, transparent 6px 11px); }
  .ld-mast--cosmos .ld-mast__edge { background: repeating-linear-gradient(90deg, var(--p20c-line) 0 6px, transparent 6px 11px); }
  .ld-mast__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 32px; padding-bottom: 32px; }
  .ld-mast__kicker { grid-column: 1 / 5; grid-row: 1; padding-right: 0; }
  .ld-mast__title { grid-column: 1 / 5; grid-row: 2; margin-top: 24px; }
  .ld-mast__status { grid-column: 1 / 5; grid-row: 3; justify-self: start; margin-top: 18px; }
  .ld-mast__art { grid-column: 1 / 5; grid-row: 4; min-height: 0; aspect-ratio: 4 / 3; margin: 24px calc(-1 * var(--ld-margin)) 0; }
  .ld-mast__art img { object-fit: cover; object-position: 60% 60%; }
  .ld-mast__dek { grid-column: 1 / 5; grid-row: 5; margin-top: 24px; }
  .ld-mast__verbs { grid-column: 1 / 5; grid-row: 6; margin-top: 28px; }
  .ld-mast__foot { grid-column: 1 / 5; grid-row: 7; grid-template-columns: 1fr; margin-top: 28px; }
  .ld-mast__play { justify-items: stretch; }
  .ld-mast__play .ld-play { justify-content: space-between; }
  .ld-mast--cosmos .ld-mast__num, .ld-mast--cosmos .ld-mast__word { display: block; }
  .ld-mast--cosmos .ld-mast__title, .ld-mast--cosmos .ld-mast__art, .ld-mast--cosmos .ld-mast__verbs, .ld-mast--cosmos .ld-mast__dek, .ld-mast--cosmos .ld-mast__foot { grid-column: 1 / 5; }
  .ld-mast--cosmos .ld-mast__word { margin-left: 0; }
  .ld-mast--p18 .ld-mast__title, .ld-mast--p18 .ld-mast__art, .ld-mast--p18 .ld-mast__verbs, .ld-mast--p18 .ld-mast__dek, .ld-mast--p18 .ld-mast__foot { grid-column: 1 / 5; }
  .ld-mast--p18 .ld-mast__title { grid-row: 2; margin-top: 16px; }
  .ld-mast--p18 .ld-mast__art { grid-row: 4; aspect-ratio: 4 / 3; margin: 24px calc(-1 * var(--ld-margin)) 0; }
  .ld-mast--p18 .ld-mast__art img { object-position: 78% 50%; }
  .ld-mast--p18 .ld-mast__dek { grid-row: 5; } .ld-mast--p18 .ld-mast__verbs { grid-row: 6; margin-top: 28px; } .ld-mast--p18 .ld-mast__foot { grid-row: 7; }
  .ld-mech--six { grid-template-columns: 1fr 1fr; }
  .ld-mast--cosmos .ld-mast__name { letter-spacing: .2em; font-size: 12px; line-height: 16px; }
  .ld-mast--cosmos .ld-mast__art { grid-row: 4; aspect-ratio: 4 / 3; margin: 24px calc(-1 * var(--ld-margin)) 0; }
  .ld-mast--cosmos .ld-mast__art img { object-position: 74% 50%; }
  .ld-mast--cosmos .ld-mast__dek { grid-row: 5; }
  .ld-mast--cosmos .ld-mast__verbs { grid-row: 6; }
  .ld-mast--cosmos .ld-mast__foot { grid-row: 7; }
}

/* ---------- 22. Mechanics stack: a project's verbs ---------- */
.ld-mech { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--pj-rule, var(--rule-strong)); counter-reset: ld-mech; }
.ld-mech > li {
  display: grid; grid-template-columns: 48px minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: var(--ld-gutter);
  padding: 14px 0 12px; border-bottom: 1px solid var(--rule);
}
.ld-mech__no { font: 500 12px/16px var(--font-mono); letter-spacing: .1em; color: var(--pj-ink-3, var(--ink-3)); }
.ld-mech__verb {
  position: relative; justify-self: start; z-index: 0; padding: 0 6px; margin-left: -6px;
  font: 400 var(--ld-d3)/.92 var(--font-display); text-transform: uppercase; color: var(--pj-ink, var(--ink));
  transition: color var(--ld-wipe);
}
.ld-mech__verb::before { content: ''; position: absolute; inset: 6% 0 4%; z-index: -1; background: var(--pj-accent-2, var(--yellow)); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ld-wipe); }
.ld-mech > li:hover .ld-mech__verb, .ld-mech > li.is-hover .ld-mech__verb { color: var(--on-yellow); }
.ld-mech > li:hover .ld-mech__verb::before, .ld-mech > li.is-hover .ld-mech__verb::before { transform: scaleX(1); }
.ld-pj--cosmos .ld-mech > li:hover .ld-mech__verb, .ld-pj--cosmos .ld-mech > li.is-hover .ld-mech__verb { color: var(--on-yellow); }
.ld-pj--cosmos .ld-mech__verb::before { background: var(--p20c-yellow); }
.ld-mech__gloss { margin: 0; font: 400 15px/24px var(--font-sans); color: var(--pj-ink-2, var(--ink-2)); max-width: 44ch; }
/* words only: the masthead's stack */
.ld-mech--words { border-top: 0; }
.ld-mech--words > li { display: block; padding: 0; border: 0; }
.ld-mech--words .ld-mech__verb { font-size: var(--ld-d4); line-height: 1.02; }
.ld-mech--words .ld-mech__no, .ld-mech--words .ld-mech__gloss { display: none; }
.ld-mech--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--pj-rule, var(--rule-strong)); }
.ld-mech--row > li { display: flex; gap: 10px; align-items: baseline; padding: 10px 0 8px; border-bottom: 1px solid var(--rule); }
.ld-mech--row .ld-mech__no { display: inline; }
.ld-mech--row .ld-mech__verb { font-size: var(--ld-d4); }
.ld-mech--row .ld-mech__gloss { display: none; }
@media (max-width: 1023px) {
  .ld-mech--words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px; border-top: 2px solid var(--pj-rule, var(--rule-strong)); padding-top: 12px; }
}
@media (max-width: 599px) {
  .ld-mech > li { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .ld-mech__gloss { grid-column: 2; }
  .ld-mech--words, .ld-mech--row { grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 0; }
  .ld-mech--words > li { padding: 8px 0 6px; border-bottom: 1px solid var(--rule); }
  .ld-mech--words .ld-mech__verb { font-size: 30px; }
}

/* ---------- 23. Project feature: a game on the homepage, in its own identity ---------- */
.ld-feature { position: relative; overflow: hidden; }
.ld-feature__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ld-gutter); align-items: start;
  padding-block: var(--space-8, 64px);
}
.ld-feature__head { grid-column: 1 / 7; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--pj-rule); }
.ld-feature__head .ld-label { color: var(--pj-ink); }
.ld-feature__title { grid-column: 1 / 7; grid-row: 2; margin: 36px 0 0; font-weight: 400; }
.ld-feature__title a { display: block; text-decoration: none; color: inherit; }
.ld-feature__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ld-feature__title a:focus-visible { outline: none; }
.ld-feature:has(.ld-feature__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -6px; }
.ld-feature__num { display: block; font: 400 var(--ld-d0)/.8 var(--font-display); letter-spacing: -.01em; color: var(--pj-accent); transition: transform var(--ld-shift); }
.ld-feature__name { display: block; margin-top: 8px; font: 400 var(--ld-d2)/.88 var(--font-display); text-transform: uppercase; color: var(--pj-ink); }
.ld-feature__name--big { margin-top: 14px; font-size: var(--ld-d1); line-height: .84; }
.ld-feature--p18 .ld-feature__name { margin: 0 0 4px; }
.ld-feature__dek { grid-column: 1 / 6; grid-row: 3; margin: 28px 0 0; font: 400 18px/30px var(--font-sans); color: var(--pj-ink); }
.ld-feature__meta { grid-column: 1 / 7; grid-row: 4; margin-top: 28px; }
.ld-feature__actions { grid-column: 1 / 7; grid-row: 5; position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.ld-feature__art { grid-column: 7 / 13; grid-row: 1 / 6; position: relative; margin: 0; align-self: stretch; min-height: 520px; }
.ld-feature__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-print, 560ms) var(--ease-out); }
.ld-feature__tape { position: absolute; z-index: 3; top: 18px; right: 18px; }
.ld-feature:hover .ld-feature__art img, .ld-feature.is-hover .ld-feature__art img { transform: scale(1.04); }
.ld-feature--p18:hover .ld-feature__art img, .ld-feature--p18.is-hover .ld-feature__art img { transform: none; filter: brightness(1.18); }   /* the line drawing's glow comes up instead */
.ld-feature--p18 .ld-feature__art img { transition: filter var(--dur-print, 560ms) var(--ease-out); }
.ld-feature:hover .ld-feature__num, .ld-feature.is-hover .ld-feature__num { transform: translateX(10px); }
.ld-feature:hover .ld-btn, .ld-feature.is-hover .ld-btn { color: var(--b-wipe-fg); border-color: var(--b-wipe-edge); }
.ld-feature:hover .ld-btn::before, .ld-feature.is-hover .ld-btn::before { transform: scaleX(1); }
.ld-feature:hover .ld-btn .ld-icon, .ld-feature.is-hover .ld-btn .ld-icon { transform: translateX(4px); }
.ld-feature .ld-btn--secondary { --b-fg: var(--pj-ink); --b-edge: var(--pj-ink); --b-wipe: var(--pj-ink); --b-wipe-fg: var(--pj-ground); --b-wipe-edge: var(--pj-ink); }
@media (max-width: 1023px) {
  .ld-feature__head, .ld-feature__title, .ld-feature__meta, .ld-feature__actions { grid-column: 1 / 13; }
  .ld-feature__dek { grid-column: 1 / 11; }
  .ld-feature__art { grid-column: 1 / 13; grid-row: 3; min-height: 0; aspect-ratio: 16 / 9; margin-top: 28px; }
  .ld-feature__dek { grid-row: 4; } .ld-feature__meta { grid-row: 5; } .ld-feature__actions { grid-row: 6; }
}
@media (max-width: 599px) {
  .ld-feature__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 40px; }
  .ld-feature__head, .ld-feature__title, .ld-feature__dek, .ld-feature__meta, .ld-feature__actions { grid-column: 1 / 5; }
  .ld-feature__title { margin-top: 24px; }
  .ld-feature__art { grid-column: 1 / 5; aspect-ratio: 1 / 1; margin: 24px calc(-1 * var(--ld-margin)) 0; }
  .ld-feature__actions { flex-direction: column; align-items: stretch; }
  .ld-feature__actions > * { justify-content: space-between; }
}

/* ---------- 24. Catalogue entry: a row of the projects index ---------- */
.ld-catalogue { margin: 0; padding: 0; list-style: none; border-top: 4px solid var(--rule-strong); }
.ld-entry {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 190px 190px 64px 40px; column-gap: var(--ld-gutter); align-items: center;
  padding: 26px 0 24px; border-bottom: 2px solid var(--rule-strong);
}
.ld-entry::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--ld-margin)); z-index: -1; background: var(--paper-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ld-wipe); }
.ld-entry__no { align-self: start; padding-top: 10px; font: 500 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ld-entry__main { min-width: 0; }
.ld-entry__title { margin: 0; font: 400 var(--ld-d3)/.92 var(--font-display); text-transform: uppercase; transition: transform var(--ld-shift); }
.ld-entry__title a { text-decoration: none; color: inherit; }
.ld-entry__title a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.ld-entry__title a:focus-visible { outline: none; }
.ld-entry:has(a:focus-visible), .ld-entry.is-focus { outline: 3px solid var(--focus); outline-offset: 4px; }
.ld-entry__dek { margin: 10px 0 0; max-width: 44ch; font: 400 15px/24px var(--font-sans); color: var(--ink-2); }
.ld-entry__kind, .ld-entry__year { font: 400 14px/22px var(--font-mono); color: var(--ink); }
.ld-entry__kind small { display: block; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ld-entry__go { justify-self: end; transition: transform var(--ld-shift); }
.ld-entry__thumb {
  position: absolute; z-index: 3; top: 50%; right: -8px; width: 176px; aspect-ratio: 4 / 3; pointer-events: none;
  transform: translateY(-50%) rotate(-3deg); clip-path: inset(100% 0 0 0); transition: clip-path var(--ld-wipe);
  border: 2px solid var(--rule-strong); background: var(--paper);
}
.ld-entry__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ld-entry:hover::before, .ld-entry.is-hover::before { transform: scaleX(1); }
.ld-entry:hover .ld-entry__title, .ld-entry.is-hover .ld-entry__title { transform: translateX(12px); }
.ld-entry:hover .ld-entry__go, .ld-entry.is-hover .ld-entry__go { transform: translateX(6px); }
.ld-entry:hover .ld-entry__thumb, .ld-entry.is-hover .ld-entry__thumb { clip-path: inset(0 0 0 0); }
.ld-entry:active .ld-entry__title { color: var(--red-ink); }
.ld-entry[data-ld-status="archive"] .ld-entry__title { color: var(--ink-3); }
@media (max-width: 1279px) {
  .ld-entry { grid-template-columns: 96px minmax(0, 1fr) 160px 170px 40px; }
  .ld-entry__year { display: none; }
  .ld-entry__thumb { width: 150px; }
}
@media (max-width: 1023px) {
  .ld-entry { grid-template-columns: 80px minmax(0, 1fr) 170px 32px; }
  .ld-entry__kind { display: none; }
  .ld-entry__thumb { display: none; }
}
@media (max-width: 599px) {
  .ld-entry { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no status" "main main" "kind year"; row-gap: 12px; padding: 18px 0 16px; }
  .ld-entry__no { grid-area: no; padding-top: 0; }
  .ld-entry__status { grid-area: status; }
  .ld-entry__main { grid-area: main; }
  .ld-entry__kind { grid-area: kind; display: block; font-size: 13px; }
  .ld-entry__kind small { display: none; }
  .ld-entry__year { grid-area: year; display: block; justify-self: end; font-size: 13px; }
  .ld-entry__go { display: none; }
  .ld-entry:hover .ld-entry__title { transform: none; }
}

/* ---------- 25. Filters above the catalogue ---------- */
.ld-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 0; }
.ld-filters .ld-tabs { border-bottom: 0; }
.ld-filters__count { font: 500 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ld-empty { padding: 40px 0; border-bottom: 2px solid var(--rule-strong); }
.ld-empty p { margin: 0; max-width: 52ch; font: 400 15px/24px var(--font-sans); color: var(--ink-2); }
.ld-empty strong { display: block; margin-bottom: 8px; font: 400 var(--ld-d4)/1 var(--font-display); text-transform: uppercase; color: var(--ink); font-weight: 400; }

/* ---------- 26b. Title cards: a project's tables (editions), each with the game's own title art ---------- */
.ld-titlecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ld-gutter); margin: 0; padding: 0; list-style: none; }
.ld-titlecard { display: grid; gap: 14px; align-content: start; }
.ld-titlecard .ld-giltframe { aspect-ratio: 4 / 3; }
.ld-titlecard .ld-giltframe img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.ld-titlecard h3 { margin: 4px 0 0; font: 400 var(--ld-d4)/1 var(--font-display); text-transform: uppercase; font-weight: 400; color: var(--p18-gold); }
.ld-titlecard p { margin: 0; max-width: 38ch; font: 400 15px/24px var(--font-sans); color: var(--p18-text-dim); }
.ld-titlecard .ld-label-s { color: var(--p18-text-muted); }
@media (max-width: 1023px) { .ld-titlecards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ld-titlecards { grid-template-columns: 1fr; } }

/* ---------- 26. Tags: which project a note belongs to ---------- */
.ld-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 3px; border: 1px solid var(--rule-strong);
  font: 500 11px/14px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.ld-tag::before { content: ''; width: 8px; height: 8px; background: var(--ld-tag, var(--ink)); }
/* Epigraph: a reader on play, small and quiet — Schiller in the Play band, Benjamin and Freud on About */
.ld-epigraph { margin: 0; max-width: 36ch; }
.ld-epigraph blockquote { margin: 0; }
.ld-epigraph p { margin: 0; font: italic 400 16px/24px var(--font-sans); color: var(--ink-2); }
.ld-epigraph figcaption { margin-top: 8px; font: 500 11px/16px var(--font-mono); letter-spacing: .08em; color: var(--ink-3); }
.ld-epigraph cite { font-style: italic; }
.ld-epigraph + .ld-epigraph { margin-top: 28px; }
.ld-tag--p18 { --ld-tag: var(--p18-gold-deep); }
.ld-tag--cosmos { --ld-tag: var(--blue); }
.ld-tag--ludum { --ld-tag: var(--yellow); }
a.ld-tag:hover { background: var(--ink); color: var(--paper); }
.ld-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 27. Note entry: a row of the notes index ---------- */
.ld-notes { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--rule-strong); }
.ld-note {
  position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; column-gap: var(--ld-gutter); align-items: start;
  padding: 24px 0 26px; border-bottom: 1px solid var(--rule);
}
.ld-note__meta { display: grid; gap: 6px; padding-top: 6px; }
.ld-note__date { font: 400 14px/22px var(--font-mono); color: var(--ink); }
.ld-note__kind { font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ld-note__title { margin: 0; font: 400 var(--ld-d4)/.98 var(--font-display); text-transform: uppercase; }
.ld-note__title a {
  text-decoration: none; color: inherit; padding-bottom: 2px;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 4px no-repeat; transition: background-size var(--ld-wipe);
}
.ld-note__title a::after { content: ''; position: absolute; inset: 0; }
.ld-note__title a:focus-visible { outline: none; }
.ld-note:has(a:focus-visible), .ld-note.is-focus { outline: 3px solid var(--focus); outline-offset: 4px; }
.ld-note:hover .ld-note__title a, .ld-note.is-hover .ld-note__title a { background-size: 100% 4px; }
.ld-note__dek { margin: 10px 0 0; max-width: 60ch; font: 400 15px/24px var(--font-sans); color: var(--ink-2); }
.ld-note__tags { justify-self: end; padding-top: 4px; position: relative; z-index: 1; }
/* the lead note: a picture and a big title */
.ld-note--lead { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; padding: 0 0 var(--space-7, 48px); border-bottom: 2px solid var(--rule-strong); }
.ld-note--lead .ld-note__art { grid-column: 1 / 7; grid-row: 1 / 4; margin: 0; aspect-ratio: 4 / 3; }
.ld-note--lead .ld-note__art img { width: 100%; height: 100%; object-fit: cover; }
.ld-note--lead .ld-note__meta { grid-column: 7 / 13; grid-row: 1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 16px; padding-top: 0; }
.ld-note--lead .ld-note__body { grid-column: 7 / 13; grid-row: 2; }
.ld-note--lead .ld-note__title { margin-top: 18px; font-size: var(--ld-d2); line-height: .9; }
.ld-note--lead .ld-note__dek { font-size: 18px; line-height: 30px; margin-top: 18px; }
.ld-note--lead .ld-note__tags { grid-column: 7 / 13; grid-row: 3; justify-self: start; align-self: end; }
@media (max-width: 1023px) {
  .ld-note { grid-template-columns: 160px minmax(0, 1fr); }
  .ld-note__tags { grid-column: 2; justify-self: start; margin-top: 14px; }
}
@media (max-width: 599px) {
  .ld-note { grid-template-columns: 1fr; row-gap: 10px; padding: 18px 0 20px; }
  .ld-note__meta { grid-auto-flow: column; justify-content: start; gap: 14px; padding-top: 0; align-items: baseline; }
  .ld-note__tags { grid-column: 1; margin-top: 4px; }
  .ld-note--lead .ld-note__art, .ld-note--lead .ld-note__meta, .ld-note--lead .ld-note__body, .ld-note--lead .ld-note__tags { grid-column: 1; grid-row: auto; }
  .ld-note--lead .ld-note__art { margin: 0 calc(-1 * var(--ld-margin)) 8px; }
}

/* ---------- 28. Pull quote ---------- */
.ld-quote { margin: 0; padding-top: 22px; position: relative; }
.ld-quote::before { content: ''; position: absolute; top: 0; left: 0; width: 96px; height: 8px; background: var(--red); }
.ld-quote blockquote { margin: 0; }
.ld-quote p { margin: 0; font: 400 var(--ld-d3)/.96 var(--font-display); text-transform: uppercase; letter-spacing: .005em; max-width: 22ch; }
.ld-quote figcaption { margin-top: 18px; font: 500 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ld-quote--frame { background: var(--frame); color: var(--on-frame); padding: 40px; }
.ld-quote--frame::before { top: 0; left: 40px; background: var(--yellow); }
.ld-quote--frame figcaption { color: var(--ink-2); }
.ld-quote--s p { font-size: var(--ld-d4); }

/* ---------- 29. Figure and caption ---------- */
.ld-figure { margin: 0; }
.ld-figure__plate { position: relative; overflow: hidden; }
:where(.ld-figure__plate) { background: var(--paper-2); }
.ld-figure__plate img { width: 100%; height: 100%; object-fit: cover; }
.ld-figure figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule);
  font: 400 13px/20px var(--font-mono); color: var(--ink-2); }
.ld-figure__no { flex: none; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

/* ---------- 30. Collage: the layered plate on the homepage and in mastheads ---------- */
.ld-collage { position: relative; aspect-ratio: 6 / 5; }
.ld-collage > * { position: absolute; }
.ld-collage__sun { width: 54%; left: 4%; top: 4%; }
.ld-collage__plate { inset: 12% 6% 6% 14%; margin: 0; }
.ld-collage__plate img { width: 100%; height: 100%; object-fit: cover; }
.ld-collage__chip { width: 34%; aspect-ratio: 1; right: -2%; bottom: -3%; margin: 0; border: 2px solid var(--rule-strong); transform: rotate(3deg); background: var(--paper); transition: transform var(--dur-print, 560ms) var(--ease-out); }
.ld-collage__chip img { width: 100%; height: 100%; object-fit: cover; }
.ld-collage__strip { left: 0; top: 0; bottom: 0; width: 14px; background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 11px); }
.ld-collage__tape { top: 4%; right: 8%; }
.ld-collage__map { width: 30%; left: 4%; bottom: -2%; color: var(--ink); opacity: .9; }
.ld-collage:hover .ld-collage__chip { transform: rotate(-1deg) translate(-6px, -6px); }
@media (max-width: 599px) { .ld-collage { aspect-ratio: 1 / 1; } }

/* ---------- 31. Ledger: tables of routes, prices, schedules ---------- */
.ld-ledger { margin: 0; }
.ld-ledger__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; }
.ld-ledger__title { font: 400 var(--ld-d4)/1 var(--font-display); text-transform: uppercase; }
.ld-ledger__scroll { overflow-x: auto; }
.ld-ledger table { width: 100%; border-collapse: collapse; font: 400 14px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.ld-ledger thead th {
  padding: 10px 14px 9px; text-align: left; vertical-align: bottom; white-space: nowrap;
  background: var(--frame); color: var(--on-frame); font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.ld-ledger td { padding: 10px 14px; border-bottom: 1px solid var(--rule); color: var(--ink); vertical-align: top; }
.ld-ledger tbody tr:last-child td { border-bottom: 2px solid var(--rule-strong); }
.ld-ledger tbody tr { transition: background-color var(--ld-shift); }
.ld-ledger tbody tr:hover { background: var(--paper-2); }
.ld-ledger .is-num { text-align: right; }
.ld-ledger .is-key { font-weight: 500; }
.ld-ledger__note { margin: 10px 0 0; font: 400 13px/20px var(--font-mono); color: var(--ink-3); }
.ld-ledger__swatch { display: inline-block; width: 24px; height: 4px; margin-right: 10px; vertical-align: middle; background: currentColor; }
.ld-pj--p18 .ld-ledger thead th { background: var(--p18-gold); color: var(--on-yellow); }
.ld-pj--p18 .ld-ledger td { color: var(--p18-paper); border-bottom-color: #2E241A; }
.ld-pj--p18 .ld-ledger tbody tr:last-child td { border-bottom-color: var(--p18-gold-deep); }
.ld-pj--p18 .ld-ledger tbody tr:hover { background: var(--p18-panel); }
.ld-pj--p18 .ld-ledger__note { color: var(--p18-text-muted); }
.ld-ledger__tag { display: inline-block; padding: 2px 7px 1px; border: 1px solid currentColor; font: 500 11px/14px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ld-pj--cosmos .ld-ledger thead th { background: var(--p20c-cream); color: var(--p20c-night); }
.ld-pj--cosmos .ld-ledger td { color: var(--p20c-cream); border-bottom-color: #2A3140; }
.ld-pj--cosmos .ld-ledger tbody tr:last-child td { border-bottom-color: var(--p20c-cream); }
.ld-pj--cosmos .ld-ledger tbody tr:hover { background: #151B27; }
@media (max-width: 599px) {
  .ld-ledger--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ld-ledger--stack table, .ld-ledger--stack tbody, .ld-ledger--stack tr, .ld-ledger--stack td { display: block; width: 100%; }
  .ld-ledger--stack tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .ld-ledger--stack tbody tr:last-child { border-bottom: 2px solid var(--rule-strong); }
  .ld-ledger--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border: 0; text-align: right; }
  .ld-ledger--stack tbody tr:last-child td { border: 0; }
  .ld-ledger--stack td::before { content: attr(data-label); text-align: left; font: 500 11px/22px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .ld-ledger--stack td:first-child { font: 400 22px/1.1 var(--font-display); text-transform: uppercase; }
  .ld-ledger--stack td:first-child::before { display: none; }
}

/* ---------- 32. Article: a note's head, its prose and its margin ---------- */
.ld-arthead { padding-top: var(--space-8, 64px); }
.ld-arthead__kicker { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 28px; }
.ld-arthead__title { margin: 0; max-width: 15ch; font: 400 var(--ld-d1)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.ld-arthead__lede { margin: 32px 0 0; max-width: 40ch; font: 400 22px/32px var(--font-sans); color: var(--ink); }
.ld-arthead .ld-meta { margin-top: 40px; }
.ld-article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ld-gutter); padding-block: var(--space-8, 64px) var(--ld-section); }
.ld-article__rail { grid-column: 1 / 4; align-self: start; position: sticky; top: 24px; }
.ld-article__body { grid-column: 4 / 13; min-width: 0; }
.ld-toc { margin: 0; padding: 14px 0 0; list-style: none; border-top: 2px solid var(--rule-strong); counter-reset: ld-toc; }
.ld-toc__head { margin: 0 0 12px; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ld-toc li { counter-increment: ld-toc; }
.ld-toc a { display: grid; grid-template-columns: 32px 1fr; padding: 6px 0; font: 400 14px/20px var(--font-mono); text-decoration: none; color: var(--ink-2); }
.ld-toc a::before { content: counter(ld-toc, decimal-leading-zero); color: var(--ink-3); }
.ld-toc a:hover, .ld-toc a[aria-current] { color: var(--ink); }
.ld-toc a[aria-current]::before { color: var(--red-ink); }
.ld-prose { max-width: var(--measure, 680px); font: 400 18px/30px var(--font-sans); color: var(--ink); }
.ld-prose > * { margin: 0; }
.ld-prose > * + * { margin-top: 24px; }
.ld-prose--initial > p:first-child::first-letter {
  float: left; margin: 6px 12px -4px 0; font: 400 118px/.78 var(--font-display); color: var(--red); text-transform: uppercase;
}
.ld-prose h2 { margin-top: 64px; padding-top: 14px; border-top: 2px solid var(--rule-strong); font: 400 var(--ld-d4)/.98 var(--font-display); text-transform: uppercase; font-weight: 400; }
.ld-prose h3 { margin-top: 40px; font: 400 var(--ld-d5)/1 var(--font-display); text-transform: uppercase; font-weight: 400; letter-spacing: .01em; }
.ld-prose h2 + *, .ld-prose h3 + * { margin-top: 16px; }
.ld-prose strong { font-weight: 600; }
.ld-prose em { font-style: italic; }
.ld-prose ul, .ld-prose ol { padding: 0; list-style: none; }
.ld-prose li { position: relative; padding-left: 36px; }
.ld-prose li + li { margin-top: 10px; }
.ld-prose ul > li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 10px; height: 6px; background: var(--ink); }
.ld-prose ol { counter-reset: ld-ol; }
.ld-prose ol > li { counter-increment: ld-ol; }
.ld-prose ol > li::before { content: counter(ld-ol, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 500 13px/28px var(--font-mono); color: var(--red-ink); }
.ld-prose blockquote { margin-left: 0; padding: 4px 0 4px 28px; box-shadow: inset 2px 0 0 var(--rule-strong); font-style: italic; color: var(--ink-2); }
.ld-prose .ld-quote blockquote { padding: 0; box-shadow: none; font-style: normal; color: inherit; }
.ld-prose code { padding: 1px 5px; background: var(--paper-2); font: 400 15px/1 var(--font-mono); }
.ld-prose sup { font: 500 11px/1 var(--font-mono); vertical-align: super; }
.ld-prose sup a { text-decoration: none; color: var(--red-ink); padding: 0 2px; }
.ld-prose .ld-figure, .ld-prose .ld-ledger, .ld-prose .ld-quote { margin-top: 48px; margin-bottom: 24px; }
.ld-prose .ld-quote + *, .ld-prose .ld-figure + *, .ld-prose .ld-ledger + * { margin-top: 40px; }
.ld-prose--wide .ld-figure { margin-right: calc(-1 * (100% / 9 * 3) - var(--ld-gutter)); }
.ld-article__body { container-type: inline-size; }
.ld-sidenote {
  --ld-side: clamp(180px, calc(100cqw - var(--measure, 680px) - 48px), 260px);
  float: right; clear: right; width: var(--ld-side); margin: 4px calc(-1 * var(--ld-side) - 40px) 16px 0; padding-top: 10px; border-top: 2px solid var(--rule-strong);
  font: 400 13px/20px var(--font-mono); color: var(--ink-2);
}
.ld-sidenote b { display: block; margin-bottom: 4px; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); font-weight: 500; }
.ld-footnotes { margin-top: 64px; padding-top: 14px; border-top: 2px solid var(--rule-strong); font: 400 13px/20px var(--font-mono); color: var(--ink-2); }
.ld-footnotes ol { margin: 0; padding-left: 24px; }
.ld-footnotes li + li { margin-top: 8px; }
@container (max-width: 940px) { .ld-sidenote { float: none; width: auto; margin: 24px 0; max-width: var(--measure, 680px); } }
@media (max-width: 1023px) {
  .ld-article__rail { grid-column: 1 / 13; position: static; margin-bottom: 40px; }
  .ld-article__body { grid-column: 1 / 13; }
  .ld-toc { display: none; }
  .ld-sidenote { float: none; width: auto; margin: 24px 0; max-width: var(--measure, 680px); }
  .ld-prose--wide .ld-figure { margin-right: 0; }
}
@media (max-width: 599px) {
  .ld-article { grid-template-columns: 1fr; }
  .ld-article__rail, .ld-article__body { grid-column: 1; }
  .ld-prose--initial > p:first-child::first-letter { font-size: 92px; }
  .ld-arthead__title { font-size: var(--ld-d2); }
}

/* ---------- 33. Next note: the band at the end of a note ---------- */
.ld-next { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 32px 0 36px; border-top: 8px solid var(--rule-strong); border-bottom: 2px solid var(--rule-strong); isolation: isolate; }
.ld-next::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--ld-margin)); z-index: -1; background: var(--yellow); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--ld-wipe); }
.ld-next__label { display: block; margin-bottom: 14px; font: 500 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ld-next__title { margin: 0; font: 400 var(--ld-d3)/.92 var(--font-display); text-transform: uppercase; max-width: 20ch; }
.ld-next a { text-decoration: none; color: inherit; }
.ld-next a::after { content: ''; position: absolute; inset: 0; }
.ld-next a:focus-visible { outline: none; }
.ld-next:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.ld-next .ld-icon { width: 48px; height: 48px; transition: transform var(--ld-shift); }
.ld-next:hover::before, .ld-next.is-hover::before { transform: scaleY(1); }
.ld-next:hover, .ld-next.is-hover { color: var(--on-yellow); }
.ld-next:hover .ld-next__label, .ld-next.is-hover .ld-next__label { color: var(--on-yellow); }
.ld-next:hover .ld-icon, .ld-next.is-hover .ld-icon { transform: translateX(8px); }

/* ---------- 34. Home hero: the statement, with the departures board beside it ---------- */
.ld-hero { position: relative; overflow: hidden; }
.ld-hero__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 11px); }
.ld-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ld-gutter); padding-block: var(--space-8, 64px) var(--space-9, 96px); align-items: start; }
.ld-hero__kicker { grid-column: 1 / 9; margin: 0 0 32px; }
.ld-hero__title { grid-column: 1 / 9; grid-row: 2; margin: 0; font: 400 var(--ld-d1)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.ld-hero__title > span { display: block; }
.ld-hero__title em { font-style: normal; color: var(--red); }
.ld-hero__dek { grid-column: 1 / 6; grid-row: 3; margin: 36px 0 0; font: 400 22px/32px var(--font-sans); }
.ld-hero__actions { grid-column: 1 / 8; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.ld-hero__side { grid-column: 9 / 13; grid-row: 2 / 5; align-self: start; position: relative; margin-top: 8px; }
.ld-hero__sun { position: absolute; z-index: 0; width: 200px; right: -72px; top: -56px; }
.ld-hero__side .ld-board { position: relative; z-index: 1; }
@media (max-width: 1279px) {
  .ld-hero__title { grid-column: 1 / 13; }
  .ld-hero__dek { grid-column: 1 / 7; }
  .ld-hero__actions { grid-column: 1 / 7; }
  .ld-hero__side { grid-column: 7 / 13; grid-row: 3 / 5; margin-top: 36px; }
}
@media (max-width: 1023px) {
  .ld-hero__dek { grid-column: 1 / 11; }
  .ld-hero__actions { grid-column: 1 / 13; }
  .ld-hero__side { grid-column: 1 / 13; grid-row: 5; margin-top: 48px; }
}
@media (max-width: 599px) {
  .ld-hero__edge { width: 100%; height: 10px; bottom: auto; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px); }
  .ld-hero__grid { grid-template-columns: 1fr; padding-block: 40px 56px; }
  .ld-hero__kicker, .ld-hero__title, .ld-hero__dek, .ld-hero__actions, .ld-hero__side { grid-column: 1; }
  .ld-hero__kicker { margin-bottom: 20px; }
  .ld-hero__title { font-size: 17.5vw; line-height: .9; }
  .ld-hero__dek { margin-top: 24px; }
  .ld-hero__side { grid-row: 4; margin: 32px calc(-1 * var(--ld-margin)) 0; }
  .ld-hero__actions { grid-row: 5; flex-direction: column; align-items: stretch; margin-top: 24px; }
  .ld-hero__actions .ld-link { align-self: flex-start; }
  .ld-hero__sun { width: 120px; right: -36px; top: -28px; }
}

/* ---------- 35. Departures board: Ludum's games as a station board ---------- */
.ld-board { background: var(--frame); color: var(--on-frame); --focus: var(--yellow); }
.ld-board__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 18px 22px 14px; border-bottom: 2px solid var(--on-frame); }
.ld-board__head h2 { margin: 0; font: 400 40px/.9 var(--font-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; }
.ld-board__clock { font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ld-board__cols, .ld-board__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px; column-gap: 16px; align-items: center; }
.ld-board__cols { padding: 10px 22px 8px; border-bottom: 1px solid var(--rule); font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ld-board__rows { margin: 0; padding: 0; list-style: none; }
.ld-board__row { position: relative; isolation: isolate; padding: 18px 22px 16px; border-bottom: 1px solid var(--rule); transition: color var(--ld-wipe); }
.ld-board__row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--ld-wipe); }
.ld-board__no { font: 500 13px/16px var(--font-mono); letter-spacing: .08em; color: var(--yellow); }
.ld-board__title { font: 400 36px/.95 var(--font-display); text-transform: uppercase; text-decoration: none; color: inherit; }
.ld-board__title::after { content: ''; position: absolute; inset: 0; }
.ld-board__title:focus-visible { outline: none; }
.ld-board__row:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.ld-board__kind { display: block; margin-top: 8px; font: 400 13px/18px var(--font-mono); color: var(--ink-2); }
.ld-board__status { justify-self: end; text-align: right; font: 600 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.ld-board__status::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: currentColor; vertical-align: 1px; }
.ld-board__status--playable { color: #FF6B5E; }
.ld-board__row:hover, .ld-board__row.is-hover { color: var(--on-yellow); }
.ld-board__row:hover::before, .ld-board__row.is-hover::before { transform: scaleY(1); }
.ld-board__row:hover .ld-board__no, .ld-board__row:hover .ld-board__kind, .ld-board__row:hover .ld-board__status,
.ld-board__row.is-hover .ld-board__no, .ld-board__row.is-hover .ld-board__kind, .ld-board__row.is-hover .ld-board__status { color: var(--on-yellow); }
.ld-board__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px 16px; font: 400 13px/18px var(--font-mono); color: var(--ink-2); }
.ld-board__foot a { color: var(--on-frame); }
.ld-board--compact .ld-board__cols, .ld-board--compact .ld-board__clock { display: none; }
.ld-board--compact .ld-board__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 10px; }
.ld-board--compact .ld-board__status { grid-column: 2; justify-self: start; text-align: left; }
.ld-board--compact .ld-board__title { font-size: 32px; }
@media (max-width: 599px) {
  .ld-board__head, .ld-board__cols, .ld-board__row, .ld-board__foot { padding-left: 16px; padding-right: 16px; }
  .ld-board__cols { display: none; }
  .ld-board__row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; }
  .ld-board__status { grid-column: 2; justify-self: start; text-align: left; }
  .ld-board__title { font-size: 30px; }
}

/* ---------- 36. Route maps: diagrams drawn in SVG, never pictures of maps ---------- */
.ld-map { position: relative; margin: 0; }
.ld-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.ld-map text { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; }
/* Project 18XX: the game's own board — land hexes, tile tiers, warm-black track (colours from its hexBoardData) */
.ld-hex { fill: var(--p18-land); stroke: var(--p18-land-rule); stroke-width: 1.5; }
.ld-hex--yellow { fill: var(--p18-tile-yellow); }
.ld-hex--green { fill: var(--p18-tile-green); }
.ld-hex--brown { fill: var(--p18-tile-brown); }
.ld-hex--grey { fill: var(--p18-tile-grey); }
.ld-hex--offboard { fill: var(--p18-offboard); stroke: #4A1414; }
.ld-hex--coal { fill: var(--p18-coal); }
.ld-track { fill: none; stroke: var(--p18-track); stroke-width: 7; stroke-linecap: butt; }
.ld-city { fill: var(--p18-paper); stroke: var(--p18-track); stroke-width: 3; }
.ld-town { fill: var(--p18-track); }
.ld-value circle { fill: var(--p18-paper); stroke: var(--p18-track); stroke-width: 2.5; }
.ld-value text { font-family: var(--font-display); font-size: 17px; letter-spacing: 0; fill: var(--p18-track); text-anchor: middle; dominant-baseline: central; }
.ld-token circle { fill: var(--p18-gold); stroke: var(--p18-track); stroke-width: 2.5; }
.ld-token text { font-family: var(--font-display); font-size: 14px; letter-spacing: 0; fill: var(--p18-track); text-anchor: middle; dominant-baseline: central; }
.ld-coord { fill: var(--p18-text-muted); font-size: 12px; }
.ld-coord--dark { fill: #3B3833; }
/* 20 Cosmos: zones and routes on the operating chart */
.ld-zone { stroke: var(--p20c-night); stroke-width: 3; }
.ld-zone--core { fill: var(--p20c-blue); }
.ld-zone--alliance { fill: var(--p20c-yellow); }
.ld-zone--emerging { fill: url(#ld-hatch-emerging); }
.ld-zone--frontier { fill: url(#ld-hatch-frontier); }
.ld-zone--neutral { fill: #2A3140; }
.ld-zone-label { font-family: var(--font-display) !important; font-size: 26px !important; letter-spacing: .02em !important; fill: var(--p20c-cream); text-transform: uppercase; paint-order: stroke; stroke: var(--p20c-night); stroke-width: 6px; stroke-linejoin: round; }
.ld-zone-label--dark { fill: var(--p20c-night); }
.ld-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ld-route--main { stroke: var(--p20c-line); stroke-width: 7; }
.ld-route--branch { stroke: var(--p20c-yellow); stroke-width: 5; }
.ld-route--rival { stroke: var(--p20c-red); stroke-width: 5; }
.ld-route--proposed { stroke: var(--p20c-cream); stroke-width: 3; stroke-dasharray: 2 9; }
.ld-route--link { stroke: var(--p20c-cream); stroke-width: 10; }
.ld-route--link-core { stroke: var(--p20c-night); stroke-width: 4; }
.ld-station { fill: var(--p20c-night); stroke: var(--p20c-cream); stroke-width: 3.5; }
.ld-station--yellow { stroke: var(--p20c-yellow); }
.ld-station--red { stroke: var(--p20c-red); }
.ld-hub { fill: var(--p20c-cream); stroke: var(--p20c-night); stroke-width: 4; }
.ld-hub-ring { fill: none; stroke: var(--p20c-cream); stroke-width: 2; }
.ld-node-label { fill: var(--p20c-cream); font-size: 12px; paint-order: stroke; stroke: var(--p20c-night); stroke-width: 5px; stroke-linejoin: round; }
.ld-grid-line { stroke: #1F2633; stroke-width: 1; }
.ld-map [data-ld-node] { cursor: pointer; transition: opacity var(--ld-shift); }
.ld-map .ld-route, .ld-map .ld-zone { transition: opacity var(--ld-shift), stroke-dashoffset var(--dur-draw, 1200ms) var(--ease-press); }
.ld-map.is-tracing .ld-route:not(.is-lit), .ld-map.is-tracing .ld-zone:not(.is-lit) { opacity: .22; }
.ld-map.is-tracing [data-ld-node]:not(.is-lit) { opacity: .45; }
.ld-map [data-ld-node]:focus-visible { outline: none; }
.ld-map [data-ld-node]:focus-visible .ld-station, .ld-map [data-ld-node]:focus-visible .ld-hub { stroke: var(--yellow); stroke-width: 6; }
/* legends */
.ld-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--rule); }
.ld-legend li { display: flex; align-items: center; gap: 10px; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ld-legend svg { width: 32px; height: 16px; flex: none; }
.ld-legend__sw { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--rule-strong); }
.ld-pj--cosmos .ld-legend { border-top-color: #2A3140; }
.ld-pj--cosmos .ld-legend li { color: var(--p20c-mist); }
.ld-map__panel { position: absolute; padding: 14px 16px; background: var(--p20c-night); border: 1.5px solid var(--p20c-cream); color: var(--p20c-cream); }
.ld-map__panel .ld-legend { flex-direction: column; gap: 8px; border: 0; padding: 0; }
.ld-map__panel h3 { margin: 0 0 10px; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.ld-map__note { position: absolute; font: 500 11px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p20c-cream); }
@media (max-width: 599px) {
  .ld-map--crop { overflow: hidden; }
  .ld-map--crop > svg { width: 190%; max-width: none; margin-left: -45%; }
  .ld-map__panel { position: static; margin-top: 16px; }
  .ld-map__note { display: none; }
}

/* ---------- 37. Certificates: engraved share plates ---------- */
.ld-cert { --c-ink: #0B0B0B; --c-accent: var(--red); --c-ground: var(--sheet); margin: 0; position: relative; max-width: 560px; color: var(--c-ink); background: var(--c-ground); padding: 14px; transition: transform var(--dur-print, 560ms) var(--ease-out); }
.ld-cert--cosmos { --c-ink: #1F4E86; --c-accent: var(--blue); --c-ground: #EDE6D6; }
.ld-cert--p18 { --c-ink: var(--p18-sepia); --c-accent: var(--p18-wood); --c-ground: var(--p18-paper); --c-seal-ink: var(--p18-gold); }
.ld-cert__frame { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-ink); pointer-events: none; }
.ld-cert__inner { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; padding: 30px 34px 26px; border: 1.5px solid var(--c-ink); margin: 14px; }
.ld-cert__top { grid-column: 1 / 3; display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 11px/14px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.ld-cert__company { grid-column: 1 / 2; margin: 10px 0 0; font: 400 46px/.9 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.ld-cert__kind { grid-column: 1 / 2; margin: 4px 0 0; font: italic 400 17px/24px var(--font-sans); }
.ld-cert__seal { grid-column: 2; grid-row: 2 / 4; align-self: center; display: grid; place-items: center; width: 92px; height: 92px; border-radius: var(--radius-token, 999px);
  background: var(--c-accent); color: var(--c-seal-ink, #FBF7EF); font: 400 26px/1 var(--font-display); letter-spacing: .02em; box-shadow: 0 0 0 3px var(--c-ground), 0 0 0 5px var(--c-accent); }
.ld-cert__value { grid-column: 1 / 3; display: flex; justify-content: space-between; align-items: end; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--c-ink); }
.ld-cert__value b { font: 400 64px/.8 var(--font-display); color: var(--c-accent); font-weight: 400; }
.ld-cert__value span { font: 400 12px/16px var(--font-mono); letter-spacing: .06em; text-align: right; max-width: 26ch; }
.ld-cert--tilt { transform: rotate(-2.5deg); }
.ld-cert:hover { transform: rotate(0deg) translateY(-4px); }
.ld-certs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.ld-certs > * { min-width: 0; }
@media (max-width: 1023px) { .ld-certs { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .ld-cert__inner { padding: 22px 18px 18px; margin: 10px; }
  .ld-cert__company { font-size: 34px; }
  .ld-cert__seal { width: 64px; height: 64px; font-size: 20px; }
  .ld-cert__value b { font-size: 48px; }
  .ld-certs { grid-template-columns: 1fr; }
}

/* ---------- 38. Pieces: drawn game tokens (the only round things) ---------- */
.ld-piece { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-token, 999px); background: var(--red); color: var(--on-red);
  font: 400 22px/1 var(--font-display); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22); }
.ld-piece--ink { background: var(--ink); color: var(--paper); }
.ld-piece--yellow { background: var(--yellow); color: var(--on-yellow); }
.ld-piece--blue { background: var(--blue); color: var(--on-blue); }
.ld-piece--green { background: var(--green); color: var(--on-green); }
.ld-piece--gold { background: var(--p18-gold); color: var(--p18-track); }
.ld-piece--value { background: var(--sheet); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: none; }
.ld-cert__band {
  position: absolute; inset: 0; padding: 12px; opacity: .9; pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, transparent 3.1px, var(--c-ink) 3.2px 3.8px, transparent 3.9px),
                    radial-gradient(circle at 0 0, transparent 3.1px, var(--c-ink) 3.2px 3.8px, transparent 3.9px);
  background-size: 8px 8px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}