/* HeySnippy design system, shared by HeySnippy, SnippyNET and Snippy Collective.
   Near-black glass surfaces, paper white, and the logo's gold used as light. The dashed cut line with its scissors is the one ornament. */

@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #09080a;
  --ink-2: #111013;
  --ink-3: #19181c;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .16);
  --paper: #f4f1ea;
  --paper-2: #cfcbc2;
  --muted: #98948b;
  --faint: #807c73;
  --gold: #d4aa32;
  --gold-hi: #f6da72;
  --gold-lo: #6e5514;
  --gold-glow: 212 170 50;
  --danger: #e2a092;
  --surface: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015));
  --sans: "Geist", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 18px;
  --gutter: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-color: #3b3934 var(--ink); -webkit-text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; min-width: 320px; background: radial-gradient(1100px 520px at 50% -160px, rgb(var(--gold-glow) / .13), transparent 70%) no-repeat var(--ink); color: var(--paper); font: 400 16px/1.6 var(--sans); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 99px; background: var(--gold); color: var(--ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(1120px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.label { color: var(--muted); font: 500 12px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.display { font-size: clamp(2.5rem, 6.4vw, 4.6rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.gold, .dot { background: linear-gradient(120deg, var(--gold-hi), var(--gold) 55%, #b98a1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 44ch; color: var(--paper-2); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; text-wrap: pretty; }
.link { color: var(--paper); text-decoration: underline 1px rgb(var(--gold-glow) / .45); text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.link:hover { color: var(--gold-hi); text-decoration-color: var(--gold-hi); }
.more { display: inline-flex; flex: none; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .15s, gap .25s var(--ease); }
.more:hover { gap: 10px; color: var(--gold-hi); }
.empty { padding: 28px 0; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--paper-2); font-size: 13px; font-weight: 500; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 4px rgb(var(--gold-glow) / .18), 0 0 14px rgb(var(--gold-glow) / .9); }

/* Header: one floating glass bar. Brand, the current part's links, then search, the menu of parts and the account button. */
.site-header { position: sticky; top: 0; z-index: 30; padding-top: 14px; pointer-events: none; }
.bar { display: flex; align-items: center; gap: 6px 22px; min-height: 56px; padding: 7px 8px 7px 14px; border: 1px solid var(--line); border-radius: 28px; background: rgb(17 16 19 / .72); box-shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 18px 40px -18px rgb(0 0 0 / .8); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); pointer-events: auto; }
.brand { display: inline-flex; flex: none; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; transition: rotate .45s var(--ease), scale .45s var(--ease); }
.brand:hover .brand-mark { rotate: -8deg; scale: 1.08; }
.wordmark { font-size: 16px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.wordmark b { color: var(--gold-hi); font-weight: inherit; }
.bar-links { display: flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.bar-links > * { flex: none; }
.bar-links a, .nav-item { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: none; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
.bar-links a:hover, .nav-item:hover { color: var(--paper); background: rgb(255 255 255 / .05); }
.bar-links a[aria-current], .nav-item.is-active { color: var(--paper); background: rgb(255 255 255 / .08); }
/* A menu that drops down from the bar: the parts of the site, or a long list of a part's own pages. It is a <details>, so it
   opens without any script; site.js closes it when something else is pressed. */
.menu { position: relative; flex: none; }
.menu > summary { display: flex; align-items: center; gap: 8px; height: 38px; max-width: 240px; padding: 0 12px 0 15px; border: 1px solid var(--line); border-radius: 99px; background: rgb(0 0 0 / .35); color: var(--paper); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; list-style: none; transition: border-color .15s, background-color .15s, color .15s; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { border-color: rgb(var(--gold-glow) / .45); background: rgb(var(--gold-glow) / .1); }
.menu-label { overflow: hidden; text-overflow: ellipsis; }
.menu .fa-chevron-down { -webkit-mask-image: url("../icons/chevron-down.svg"); mask-image: url("../icons/chevron-down.svg"); flex: none; width: 10px; height: 10px; color: var(--muted); transition: rotate .2s var(--ease); }
.menu[open] .fa-chevron-down { rotate: 180deg; }
.menu-list { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; display: grid; gap: 2px; min-width: 210px; max-width: min(340px, calc(100vw - 2 * var(--gutter))); padding: 6px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--ink-2); box-shadow: 0 22px 50px rgb(0 0 0 / .6); }
.menu .menu-list a { display: block; height: auto; padding: 9px 12px; border-radius: 10px; background: none; color: var(--paper-2); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; white-space: normal; }
.menu .menu-list a:hover, .menu .menu-list a:focus-visible { background: rgb(var(--gold-glow) / .12); color: var(--paper); }
.menu .menu-list a[aria-current] { background: rgb(var(--gold-glow) / .16); color: var(--gold-hi); }
/* Among a part's own links the menu looks like one of them, and opens under its left edge. */
.bar-links:has(details) { overflow: visible; }
.bar-links .menu > summary { height: 34px; padding: 0 10px 0 12px; border-color: transparent; background: none; color: var(--muted); font-size: 14px; }
.bar-links .menu > summary:hover, .bar-links .menu[open] > summary { border-color: transparent; background: rgb(255 255 255 / .05); color: var(--paper); }
.bar-links .menu.is-current > summary { background: rgb(255 255 255 / .08); color: var(--paper); }
.bar-links .menu-list { right: auto; left: 0; }

/* The cut line. Where scroll-driven animation exists, the scissors travel along it as it crosses the screen. */
.cut { position: relative; height: 1px; }
.cut::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(var(--gold-glow) / .65) 0 6px, transparent 6px 13px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cut-scissors { position: absolute; top: -9px; left: 6%; width: 18px; height: 18px; color: var(--gold-hi); filter: drop-shadow(0 0 8px rgb(var(--gold-glow) / .8)); }
@keyframes snip { to { left: calc(94% - 18px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cut-scissors { animation: snip linear both; animation-timeline: view(); animation-range: entry 20% cover 75%; }
  }
}

/* Icons: Font Awesome Free SVGs served locally and tinted with currentColor. */
.fa-icon { display: inline-block; width: 1em; height: 1em; flex: none; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.fa-scissors { -webkit-mask-image: url("../icons/scissors.svg"); mask-image: url("../icons/scissors.svg"); }
.fa-discord { -webkit-mask-image: url("../icons/discord.svg"); mask-image: url("../icons/discord.svg"); }
.fa-youtube { -webkit-mask-image: url("../icons/youtube.svg"); mask-image: url("../icons/youtube.svg"); }
.fa-twitch { -webkit-mask-image: url("../icons/twitch.svg"); mask-image: url("../icons/twitch.svg"); }
.fa-tiktok { -webkit-mask-image: url("../icons/tiktok.svg"); mask-image: url("../icons/tiktok.svg"); }
.fa-x-twitter { -webkit-mask-image: url("../icons/x-twitter.svg"); mask-image: url("../icons/x-twitter.svg"); }
.fa-mug-hot { -webkit-mask-image: url("../icons/mug-hot.svg"); mask-image: url("../icons/mug-hot.svg"); }
.fa-shield-halved { -webkit-mask-image: url("../icons/shield-halved.svg"); mask-image: url("../icons/shield-halved.svg"); }
.fa-lock { -webkit-mask-image: url("../icons/lock.svg"); mask-image: url("../icons/lock.svg"); }
.fa-envelope { -webkit-mask-image: url("../icons/envelope.svg"); mask-image: url("../icons/envelope.svg"); }
.fa-steam { -webkit-mask-image: url("../icons/steam.svg"); mask-image: url("../icons/steam.svg"); }
.fa-house { -webkit-mask-image: url("../icons/house.svg"); mask-image: url("../icons/house.svg"); }
.fa-gamepad { -webkit-mask-image: url("../icons/gamepad.svg"); mask-image: url("../icons/gamepad.svg"); }
.fa-user-group { -webkit-mask-image: url("../icons/user-group.svg"); mask-image: url("../icons/user-group.svg"); }
.fa-gear { -webkit-mask-image: url("../icons/gear.svg"); mask-image: url("../icons/gear.svg"); }
.fa-copy { -webkit-mask-image: url("../icons/copy.svg"); mask-image: url("../icons/copy.svg"); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 20px; border: 1px solid transparent; border-radius: 99px; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, box-shadow .25s, translate .25s var(--ease); }
.button:active { translate: 0 1px; }
.button small { padding-left: 10px; border-left: 1px solid rgb(0 0 0 / .22); font: 500 11px/1.4 var(--mono); opacity: .75; }
.button .fa-icon { width: 16px; height: 16px; }
.button-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1407; box-shadow: 0 1px 0 rgb(255 255 255 / .45) inset, 0 8px 24px -8px rgb(var(--gold-glow) / .55); }
.button-gold:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .55) inset, 0 10px 34px -6px rgb(var(--gold-glow) / .85); translate: 0 -1px; }
.button-light { border-color: var(--line-strong); background: rgb(255 255 255 / .04); color: var(--paper); }
.button-light:hover { border-color: rgb(255 255 255 / .3); background: rgb(255 255 255 / .08); }
.button-danger { border-color: #9b5e54; background: #a9695d; color: #fff; }
.button-danger:hover { background: #bc776b; }

/* Surfaces: glass cards with a gold spotlight that follows the pointer (--mx/--my are set by site.js). */
.card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 rgb(255 255 255 / .05) inset; transition: border-color .3s, translate .4s var(--ease); }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--gold-glow) / .16), transparent 65%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.card:hover { border-color: rgb(var(--gold-glow) / .35); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
a.card { display: flex; flex-direction: column; min-height: 220px; padding: 26px; text-decoration: none; }
a.card:hover { translate: 0 -3px; }
.card-arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--paper-2); font: 400 15px var(--sans); transition: background-color .25s, color .25s, border-color .25s, rotate .35s var(--ease); }
a.card:hover .card-arrow { border-color: transparent; background: var(--gold-hi); color: var(--ink); rotate: -45deg; }
.card-desc { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Hero */
.hero { position: relative; overflow-x: clip; padding-block: clamp(56px, 10vh, 120px) clamp(56px, 9vh, 104px); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(24px, 5vw, 72px); }
.hero-title { margin: 22px 0 22px; font-size: clamp(3.1rem, 8.6vw, 6.6rem); font-weight: 600; letter-spacing: -.055em; line-height: .98; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.hero-art::before { content: ""; position: absolute; inset: -22%; background: url("../img/banner.webp") 50% 50% / 900px auto; opacity: .7; -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); }
.hero-art::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--gold-glow) / .34), transparent); filter: blur(30px); }
.hero-mark { position: relative; z-index: 1; width: 78%; rotate: -6deg; filter: drop-shadow(0 30px 44px rgb(0 0 0 / .7)); }

@keyframes rise { from { opacity: 0; translate: 0 16px; filter: blur(6px); } }
@keyframes mark-in { from { opacity: 0; rotate: 6deg; scale: .88; } }
@keyframes float { 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .page-head > * { animation: rise .8s var(--ease) both; }
  .hero-copy > :nth-child(2), .page-head > :nth-child(2) { animation-delay: .07s; }
  .hero-copy > :nth-child(3), .page-head > :nth-child(3) { animation-delay: .14s; }
  .hero-copy > :nth-child(4) { animation-delay: .21s; }
  .hero-mark { animation: mark-in 1s var(--ease) .1s both, float 7s ease-in-out 1.2s infinite; }
}

/* Page furniture */
.block { margin-top: clamp(56px, 8vw, 104px); }
.hero + .block { margin-top: 0; }
.page-head { padding-top: clamp(56px, 9vw, 108px); }
.page-head + .block { margin-top: clamp(40px, 6vw, 68px); }
.page-head .label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.page-head .label a { text-decoration: none; }
.page-head .label a:hover { color: var(--gold-hi); }
.page-title { margin: 18px 0 20px; overflow-wrap: anywhere; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.section-title { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.cut + .section-head { margin-top: clamp(40px, 6vw, 68px); }
.after-list { margin-top: 36px; }

/* Mods */
.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; padding-top: clamp(24px, 3.5vw, 36px); }
.mod { display: flex; flex-direction: column; }
.mod-body { display: flex; flex: 1; flex-direction: column; padding: 24px 26px 26px; }
.mod-media { display: block; aspect-ratio: 2 / 1; overflow: hidden; border-bottom: 1px solid var(--line); }
.mod-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: .85; transition: scale .8s var(--ease), opacity .3s; }
.mod-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(14 13 16 / .92)); }
.mod:hover .mod-media img { scale: 1.04; opacity: 1; }
.mod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mod-game { color: var(--muted); font-size: 13.5px; }
.mod-title { margin-top: 4px; font-size: 1.5rem; line-height: 1.2; }
.mod-text { max-width: 52ch; margin-top: 12px; color: var(--paper-2); }
.mod-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.mod-text, .mod-downloads { margin-bottom: 24px; }
.mod-text:has(+ .mod-downloads) { margin-bottom: 0; }
.mod-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; }
.mod-older { display: inline-flex; gap: 12px; margin-left: auto; }
.tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--paper-2); font: 500 11.5px/1.6 var(--mono); }
.mod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border: 1px solid var(--line); border-radius: 99px; background: rgb(255 255 255 / .03); color: var(--muted); font: 500 12px/1.5 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.status-live { border-color: rgb(var(--gold-glow) / .3); background: rgb(var(--gold-glow) / .1); color: var(--gold-hi); }
.status-live::before { background: currentColor; box-shadow: 0 0 10px currentColor; }

/* Videos */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 30px 16px; padding-top: clamp(24px, 3.5vw, 36px); }
.video { display: block; text-decoration: none; }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); transition: border-color .3s, box-shadow .3s, translate .4s var(--ease); }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.video-title { display: block; margin-top: 12px; padding-inline: 2px; color: var(--paper-2); font-size: 14.5px; font-weight: 500; line-height: 1.4; transition: color .15s; }
.video:hover .video-thumb { border-color: rgb(var(--gold-glow) / .55); box-shadow: 0 16px 40px -16px rgb(var(--gold-glow) / .45); translate: 0 -3px; }
.video:hover img { scale: 1.04; }
.video:hover .video-title { color: var(--paper); }

/* Project pages */
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 32px 64px; margin-top: clamp(32px, 5vw, 56px); }
.prose { max-width: 60ch; color: var(--paper-2); font-size: 1.1rem; line-height: 1.65; }
.prose p + p { margin-top: 1.1em; }
.prose-block .prose { margin-top: 20px; }
.facts { margin: 0; padding: 8px 24px; }
.facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; }
.facts div + div { border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; font-weight: 500; text-align: right; }

/* Footer */
.site-footer { margin-top: clamp(88px, 12vw, 160px); padding-bottom: 40px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 36px 80px; padding-top: 48px; }
.footer-brand { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.site-footer nav h2 { margin-bottom: 12px; color: var(--faint); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.site-footer nav a { display: block; padding: 4px 0; color: var(--paper-2); font-size: 14.5px; text-decoration: none; transition: color .15s; }
.site-footer nav a:hover { color: var(--gold-hi); }
.fine-print { margin-top: 48px; color: var(--faint); font-size: 13px; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: -1; justify-self: start; width: 150px; }
  .hero-art::before { inset: -60%; }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  a.card { min-height: 0; }
}
@media (max-width: 560px) {
  /* The mark alone is the brand here; the menu beside it names the part of the site. */
  .wordmark { display: none; }
  .bar { gap: 6px 8px; }
  .mod-body, a.card { padding: 22px; }
  .mod-older { margin-left: 0; }
  .button { white-space: normal; }
}
.prose-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 1.5em; font-size: 15px; }

/* Play button: sits over thumbnails, turns gold when its link is hovered. */
.play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin: auto; border: 1px solid rgb(255 255 255 / .25); border-radius: 50%; background: rgb(9 8 10 / .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .25s, border-color .25s, opacity .25s, scale .35s var(--ease); }
.play::before { content: ""; width: 15px; height: 18px; margin-left: 4px; background: var(--paper); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: background-color .25s; }
a:hover > .play, a:hover > * > .play { border-color: transparent; background: var(--gold-hi); scale: 1.08; }
a:hover > .play::before, a:hover > * > .play::before { background: var(--ink); }
.video-thumb .play, .mod-media .play { opacity: 0; }
.video:hover .play, .mod-media:hover .play, .video-featured .play { opacity: 1; }

/* Hero numbers */
.stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 44px 0 0; }
.stats dd { margin: 0; font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.stats dt { color: var(--muted); font-size: 13.5px; }

/* Ticker: what I work on, slowly passing. Pauses under the pointer. */
.ticker { overflow: hidden; padding-block: 16px; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { display: flex; align-items: center; width: max-content; color: var(--muted); font-size: 15px; font-weight: 500; white-space: nowrap; }
.ticker-track > * { margin-right: 28px; }
.ticker-track .fa-icon { width: 13px; height: 13px; color: var(--gold); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 70s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}
.ticker + .block { margin-top: clamp(40px, 6vw, 72px); }

/* Bento: the home page's four doors, sized by importance. */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 16px; }
a.tile { min-height: 0; padding: 24px; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile-top .play { position: static; margin: 0; }
.tile-kicker { color: var(--paper-2); font-size: 14.5px; font-weight: 500; }
.tile-title { max-width: 26ch; margin-top: auto; padding-top: 28px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; }
.tile-video, .tile-collective { grid-column: span 2; }
.tile-video { min-height: 360px; }
.tile-video .tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; opacity: .75; transition: scale 1s var(--ease), opacity .4s; }
.tile-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 8 10 / .3) 0%, rgb(9 8 10 / .05) 30%, rgb(9 8 10 / .9) 68%, rgb(9 8 10 / .97) 100%); }
.tile-video > :not(.tile-bg) { z-index: 1; }
.tile-video:hover .tile-bg { scale: 1.03; opacity: .9; }
.tile-video .pill { background: rgb(9 8 10 / .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tile-list { margin: auto 0 0; padding: 20px 0 0; list-style: none; }
.tile-list li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.tile-list span { display: block; color: var(--muted); font-size: 13.5px; font-weight: 400; letter-spacing: 0; }
.tile-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(24px, 4vw, 52px); margin-block: auto; padding-block: 24px 8px; }
.tile-logos .logo { width: auto; height: clamp(58px, 7.4vw, 96px); filter: drop-shadow(0 10px 18px rgb(0 0 0 / .6)); transition: scale .5s var(--ease); }
.tile-collective:hover .logo { scale: 1.05; }
.tile-collective:hover .logo:nth-child(2) { transition-delay: .05s; }
.tile-collective:hover .logo:nth-child(3) { transition-delay: .1s; }

/* Collective projects: each logo on a glow of its own colour (--accent, set from data-accent by site.js). */
.project-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; padding-top: clamp(24px, 3.5vw, 36px); }
a.project-tile { min-height: 0; padding: 0; }
.project-tile::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent), transparent 65%); }
.project-tile:hover { border-color: color-mix(in srgb, var(--accent, var(--gold)) 50%, transparent); }
.tile-art { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 28px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, var(--gold)) 20%, transparent), transparent); }
.tile-art .logo { width: auto; max-width: 80%; height: auto; max-height: 170px; filter: drop-shadow(0 14px 24px rgb(0 0 0 / .6)); transition: scale .5s var(--ease); }
.tile-name { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; }
.project-tile:hover .logo { scale: 1.06; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--line); }
.tile-foot strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.tile-tagline { display: block; color: var(--muted); font-size: 14px; }

.project-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 5vw, 64px); }
.project-hero:not(:has(.project-art)) { grid-template-columns: minmax(0, 1fr); }
.project-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.status-net { border-color: rgb(var(--gold-glow) / .3); color: var(--gold-hi); text-decoration: none; transition: background-color .2s; }
.status-net::before { background: currentColor; }
.status-net:hover { background: rgb(var(--gold-glow) / .14); }
.project-art { position: relative; display: grid; place-items: center; padding-top: clamp(40px, 8vw, 100px); }
.project-art::before { content: ""; position: absolute; inset: 10% -6% -6%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, var(--gold)) 34%, transparent), transparent); filter: blur(36px); }
.project-logo { position: relative; width: min(100%, 460px); height: auto; filter: drop-shadow(0 24px 40px rgb(0 0 0 / .6)); }

/* Videos page: the newest one leads. */
.videos-all .video-featured { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 12px 32px; margin-bottom: 12px; }
.videos-all .video-featured .video-title { margin: 0; color: var(--paper); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }

/* Follow band */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(26px, 4vw, 44px); background: radial-gradient(640px 220px at 0% 0%, rgb(var(--gold-glow) / .16), transparent 70%), var(--surface); }
.cta p:not(.hero-actions) { max-width: 46ch; margin-top: 6px; color: var(--muted); }
.cta .hero-actions { margin: 0; }

/* Pages cross-fade into each other while the header bar stays put. */
@view-transition { navigation: auto; }
.bar { view-transition-name: bar; }
::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .3s; }

/* Things rise into place as they scroll into view. Uses transform so hover's translate still works. */
@keyframes reveal { from { opacity: 0; transform: translateY(26px) scale(.985); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento > *, .mods > *, .videos > *, .project-tiles > *, .section-head, .cta, .prose-block .prose, .project-grid > * { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .project-logo { animation: mark-in 1s var(--ease) .1s both, float 7s ease-in-out 1.2s infinite; }
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@media (max-width: 860px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .tile-video, .tile-collective { grid-column: auto; }
  .tile-video { min-height: 300px; }
  .project-hero { grid-template-columns: minmax(0, 1fr); }
  .project-art { padding-top: 36px; }
  .project-logo { width: min(78%, 340px); }
  .videos-all .video-featured { grid-template-columns: minmax(0, 1fr); }
  .stats { margin-top: 34px; gap: 14px 30px; }
}

@media (max-width: 400px) {
  .bar-links a, .nav-item { padding: 0 10px; }
}
@media (max-width: 340px) {
  .brand-mark { width: 26px; height: 26px; }
}

/* Announcement: one line across the top of every public page, switched on in the admin panel. */
.announce { border-bottom: 1px solid rgb(var(--gold-glow) / .25); background: linear-gradient(90deg, rgb(var(--gold-glow) / .2), rgb(var(--gold-glow) / .07)); font-size: 14px; text-align: center; }
.announce p { padding-block: 9px; text-wrap: balance; }
.announce a { margin-left: 6px; color: var(--gold-hi); font-weight: 500; text-decoration: none; white-space: nowrap; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A mod's own page */
a.mod-hero-media { display: block; width: 100%; min-height: 0; padding: 0; aspect-ratio: 16 / 9; }
.mod-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.mod-hero-media:hover img { scale: 1.03; }
.project-status .tag { align-self: center; }
.mod-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.prose .section-title { margin: 1.7em 0 .2em; color: var(--paper); font-size: 1.3rem; }
.steps, .needs { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 1.4em; }
.steps li::marker { color: var(--gold-hi); font-weight: 600; }
.needs li::marker { color: var(--gold); }
.versions { padding: 22px 24px 8px; }
.versions h2 { font-size: 1.05rem; }
.versions ul { margin: 10px 0 0; padding: 0; list-style: none; }
.version { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.version strong { display: block; font-weight: 600; }
.version span { color: var(--muted); font-size: 13.5px; }
.version p { margin-top: 6px; color: var(--paper-2); font-size: 14.5px; line-height: 1.5; }
.version-older strong { color: var(--paper-2); }
.version .button { min-height: 38px; padding-inline: 16px; }
@media (max-width: 860px) { .mod-grid { grid-template-columns: minmax(0, 1fr); } }

/* Early access: what members see marked, and what everyone else sees locked. */
.chips { display: inline-flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.status-access { border-color: rgb(var(--gold-glow) / .45); background: rgb(var(--gold-glow) / .16); color: var(--gold-hi); }
.status-access::before { border: 0; border-radius: 0; width: 9px; height: 9px; background: currentColor; -webkit-mask: url("../icons/lock.svg") center / contain no-repeat; mask: url("../icons/lock.svg") center / contain no-repeat; }
.button-locked { border: 1px dashed rgb(var(--gold-glow) / .5); background: rgb(var(--gold-glow) / .06); color: var(--paper-2); cursor: default; }
.button-locked .fa-icon { width: 13px; height: 13px; color: var(--gold-hi); }
.button-locked small { border-left-color: var(--line-strong); }
a.button-locked { cursor: pointer; }
a.button-locked:hover { border-style: solid; background: rgb(var(--gold-glow) / .14); color: var(--paper); }
.version-locked strong { display: flex; align-items: center; gap: 8px; }
.version-locked .fa-icon { width: 13px; height: 13px; color: var(--gold-hi); }
.version-locked p { color: var(--muted); }
.version .status { flex: none; }

/* A mod or project page with no long text: the card leads instead of sitting beside empty space. */
.project-grid.solo { grid-template-columns: minmax(0, 560px); }
.project-grid.solo .prose:empty { display: none; }
.project-grid.solo .prose { order: 2; }

/* Below this width the header's links move to a second row inside the bar, so nothing is squeezed or cut off. */
@media (max-width: 1000px) {
  .bar { flex-wrap: wrap; border-radius: 24px; padding: 7px 8px; }
  .brand { padding-left: 6px; }
  .bar-links { order: 3; flex: 1 0 100%; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Coming soon: what visitors see while the site is in private preview. */
.soon { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 100vh; min-height: 100svh; padding: 40px var(--gutter); text-align: center; }
.soon .hero-art { width: min(52vw, 230px); margin-bottom: 18px; }
.soon .hero-title { margin: 0 0 12px; font-size: clamp(2.8rem, 9vw, 5.4rem); }
.soon .hero-actions { justify-content: center; }
.soon-note { margin-top: 40px; color: var(--faint); font-size: 13px; }
.soon-note a { color: var(--muted); }
.soon-note a:hover { color: var(--gold-hi); }
.soon .soon-small { margin-bottom: 20px; font-size: clamp(2rem, 6vw, 3rem); }
.soon-dev { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.soon-dev input { min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; outline: 0; background: rgb(0 0 0 / .35); color: var(--paper); }
.soon-dev input:focus { border-color: var(--gold); }
.version-check { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 13px; }
.version-check details { color: var(--faint); font-size: 12.5px; }
.version-check summary { cursor: pointer; width: fit-content; }
.version-check summary:hover { color: var(--paper-2); }
.version-check code { display: block; margin-top: 4px; color: var(--muted); font: 500 11px/1.5 var(--mono); overflow-wrap: anywhere; }

/* Mod gallery and its viewer */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; padding-top: clamp(24px, 3.5vw, 36px); }
.shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); transition: border-color .3s, box-shadow .3s, translate .4s var(--ease); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.shot:hover { border-color: rgb(var(--gold-glow) / .55); box-shadow: 0 16px 40px -16px rgb(var(--gold-glow) / .45); translate: 0 -3px; }
.shot:hover img { scale: 1.04; }
.shot .play { opacity: 1; }
.lightbox { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(6 5 7 / .94); color: var(--paper); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgb(0 0 0 / .6); }
.lightbox-stage { display: grid; place-items: center; min-height: 0; padding: 56px clamp(12px, 6vw, 84px) 8px; }
.lightbox-image { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; box-shadow: 0 30px 80px rgb(0 0 0 / .7); }
.lightbox-video { width: min(100%, calc((100dvh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
.lightbox-caption { min-height: 24px; margin: 0; padding: 8px 20px 22px; color: var(--paper-2); font-size: 14px; text-align: center; }
.lightbox-button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgb(17 16 19 / .8); color: var(--paper); font-size: 20px; line-height: 1; transition: background-color .2s, color .2s, border-color .2s; }
.lightbox-button:hover { border-color: transparent; background: var(--gold-hi); color: var(--ink); }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-prev { top: 50%; left: 14px; translate: 0 -50%; }
.lightbox-next { top: 50%; right: 14px; translate: 0 -50%; }
@media (max-width: 700px) {
  .lightbox-stage { padding: 64px 8px 8px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 12px; translate: none; }
  .lightbox-caption { padding-inline: 68px; }
}

/* A mod card opens its page wherever it is clicked. The stretched link sits under the card's own buttons and links. */
.card > .mod-open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mod-open:focus-visible { outline-offset: -3px; }
.mod-downloads, .mod-foot { z-index: 2; }
.mod-downloads { position: relative; width: fit-content; max-width: 100%; }
.mod-foot { position: relative; pointer-events: none; }
.mod-foot > * { pointer-events: auto; }
.mod { transition: border-color .3s, translate .4s var(--ease); }
.mod:hover { translate: 0 -3px; }

/* The mod page: jump links, a column of sections, and a sidebar that stays in view while you read. */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); }
.jump a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--paper-2); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: border-color .2s, color .2s; }
.jump a:hover { border-color: rgb(var(--gold-glow) / .45); color: var(--paper); }
.jump .jump-download { border-color: rgb(var(--gold-glow) / .4); background: rgb(var(--gold-glow) / .14); color: var(--gold-hi); }
.jump + .block { margin-top: clamp(28px, 4vw, 44px); }
.mod-main > section + section { margin-top: clamp(36px, 5vw, 56px); }
.mod-main .section-title { margin: 0 0 14px; }
.mod-main [id], .mod-side [id], #gallery { scroll-margin-top: 104px; }
.mod-side { display: grid; gap: 16px; align-content: start; }
.needs-card { padding: 22px 24px; }
.needs-card h2 { margin-bottom: 4px; font-size: 1.05rem; }
.needs-card .needs { font-size: 14.5px; color: var(--paper-2); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.features li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.5; }
.features li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border: solid var(--gold-hi); border-width: 0 0 2px 2px; rotate: -45deg; }
.guide-title { margin: 22px 0 0; color: var(--gold-hi); font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.guide-title:first-of-type { margin-top: 0; }
.steps li { padding-left: 4px; font-size: 1rem; line-height: 1.55; }
.bugs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bugs li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bugs strong { color: var(--paper); font-weight: 600; }
.bugs p { margin-top: 6px; color: var(--muted); font-size: .95rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: var(--paper); font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--gold-hi); font-size: 20px; line-height: 1; transition: rotate .25s var(--ease); }
.faq[open] summary::after { rotate: 45deg; }
.faq p { margin: 0; padding: 0 0 18px; color: var(--muted); font-size: 1rem; }
.release { padding: 18px 0; border-top: 1px solid var(--line); }
.release:first-of-type { border-top: 0; padding-top: 0; }
.release h3 { display: flex; align-items: baseline; gap: 12px; font-size: 1.05rem; }
.release h3 span { color: var(--faint); font: 500 12px var(--mono); letter-spacing: 0; }
.release ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 1.2em; color: var(--muted); font-size: .97rem; }
@media (min-width: 861px) {
  .mod-side { position: sticky; top: 96px; }
}
@media (max-width: 860px) {
  .mod-grid:not(.solo) .mod-side { order: -1; }
}

/* The mod gallery: one large slide at a time, with the next one peeking in. Swipe, scroll, or use the arrows. */
.carousel { position: relative; padding-top: clamp(24px, 3.5vw, 36px); }
.carousel-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 16px; outline-offset: 4px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .shot { flex: 0 0 min(82%, 860px); scroll-snap-align: center; border-radius: 16px; }
.carousel-track .shot:only-child { flex-basis: min(100%, 860px); margin-inline: auto; }
.carousel-track .shot:hover { translate: none; }
.carousel-button { position: absolute; top: calc(50% + clamp(12px, 1.75vw, 18px) - 14px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgb(17 16 19 / .82); color: var(--paper); font-size: 18px; cursor: pointer; translate: 0 -50%; backdrop-filter: blur(8px); transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.carousel-button[hidden] { display: none; }
.carousel-button:hover { border-color: transparent; background: var(--gold-hi); color: var(--ink); }
.carousel-button:disabled { opacity: 0; pointer-events: none; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
.carousel-count { margin: 12px 0 0; color: var(--faint); font: 500 12px var(--mono); text-align: center; }
@media (max-width: 560px) {
  .carousel-track { gap: 10px; }
  .carousel-track .shot { flex-basis: 88%; }
  .carousel-button { width: 38px; height: 38px; }
  .carousel-prev { left: 6px; }
  .carousel-next { right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }

/* The Shop: store tiles, product cards and the donate card. */
a.store-tile { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 24px; text-decoration: none; }
.store-tile .tile-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.store-count { margin: auto 0 0; padding-top: 8px; color: var(--faint); font: 500 12px var(--mono); }
.shelf + .shelf { margin-top: clamp(32px, 5vw, 52px); }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; padding-top: clamp(20px, 3vw, 30px); }
.shelf:first-of-type .products:first-child { padding-top: clamp(24px, 3.5vw, 36px); }
.product { display: flex; flex-direction: column; overflow: hidden; }
.product-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); }
.product-body { display: grid; gap: 8px; padding: 20px 22px 0; }
.product-body h3 { font-size: 1.1rem; }
.product-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 18px 22px 22px; }
.price { color: var(--gold-hi); font: 600 1.15rem var(--mono); letter-spacing: 0; }
.shop-note { margin-top: clamp(28px, 4vw, 40px); color: var(--faint); font-size: 13.5px; }

/* The scissors from the banner, drifting very faintly behind every page. The layer is one tile larger than the
   window and slides by exactly one tile, so the loop has no jump. */
body { isolation: isolate; }
body::before { content: ""; position: fixed; z-index: -1; top: 0; left: 0; width: calc(100vw + 1200px); height: calc(100vh + 480px); background: url("../img/banner.webp") 0 0 / 1200px 480px; opacity: .075; pointer-events: none; animation: drift 150s linear infinite; will-change: transform; }
.site-admin::before { display: none; }
@keyframes drift { to { transform: translate(-1200px, -480px); } }
@media (max-width: 700px) {
  body::before { width: calc(100vw + 760px); height: calc(100vh + 304px); background-size: 760px 304px; animation-name: drift-small; animation-duration: 110s; }
  @keyframes drift-small { to { transform: translate(-760px, -304px); } }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* The thank-you note after a download, with a way to leave a tip. */
.tip { width: min(92vw, 420px); padding: 30px 28px 26px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--ink-2); color: var(--paper); text-align: center; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.tip::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(3px); }
.tip h2 { font-size: 1.5rem; letter-spacing: -.03em; }
.tip p { margin: 10px 0 22px; color: var(--muted); font-size: .98rem; }
.tip-actions { display: grid; gap: 10px; }
.tip-actions .button { justify-content: center; }
.tip-no { border: 0; background: none; color: var(--faint); font: inherit; font-size: 14px; cursor: pointer; padding: 6px; }
.tip-no:hover { color: var(--paper); }
s { color: var(--faint); text-decoration-thickness: 1px; }
.fa-bag-shopping { -webkit-mask-image: url("../icons/bag-shopping.svg"); mask-image: url("../icons/bag-shopping.svg"); }
.fa-store { -webkit-mask-image: url("../icons/store.svg"); mask-image: url("../icons/store.svg"); }
.store-tile .tile-kicker { display: inline-flex; align-items: center; gap: 8px; }
.store-tile .tile-kicker .fa-icon { width: 14px; height: 14px; color: var(--gold-hi); }
.product-buy .button .fa-icon { width: 14px; height: 14px; }
.product { transition: border-color .25s, translate .35s var(--ease); }
.product:hover { border-color: rgb(var(--gold-glow) / .4); translate: 0 -2px; }
.product-body .card-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.versions-count { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.versions-count strong { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }

/* A project's own atmosphere (backdrop.js draws it): the scissors give way to its canvas, and the gold to its colours. */
.backdrop { position: fixed; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body[data-backdrop]::before { display: none; }
body[data-backdrop="plumbobs"] {
  --ink: #090e15; --ink-2: #0f1620; --ink-3: #16202c;
  --gold: #5bcd97; --gold-hi: #a8f0cf; --gold-lo: #1d5a45; --gold-glow: 91 205 151;
  --paper: #eef6f2; --paper-2: #c4d3cc; --muted: #8fa39b; --faint: #74877f;
  background: radial-gradient(ellipse at 14% 17%, rgb(24 83 83 / .28), transparent 43%), radial-gradient(ellipse at 86% 81%, rgb(28 57 86 / .26), transparent 43%), linear-gradient(160deg, #0b1019 0%, #080c12 56%, #0b1119 100%) fixed;
}
body[data-backdrop="sand"] {
  --ink: #120d09; --ink-2: #1a130d; --ink-3: #241a12;
  --gold: #d9743a; --gold-hi: #f4b47c; --gold-lo: #6b3317; --gold-glow: 217 116 58;
  --paper: #f6efe4; --paper-2: #d6c9b6; --muted: #a39480; --faint: #87796a;
  background: radial-gradient(ellipse at 80% -10%, rgb(217 116 58 / .2), transparent 50%), radial-gradient(ellipse at 10% 105%, rgb(196 150 98 / .16), transparent 46%), linear-gradient(175deg, #16100b 0%, #0f0b08 60%, #1a120b 100%) fixed;
}
/* A wet night in a small town: cold blue-black, the red of a signal down the street, and a street lamp's warm edge. */
body[data-backdrop="storm"] {
  --ink: #070b10; --ink-2: #0d131a; --ink-3: #141c26;
  --gold: #d24a36; --gold-hi: #ff9d86; --gold-lo: #5e1d14; --gold-glow: 210 74 54;
  --paper: #ece7da; --paper-2: #c6c4ba; --muted: #8f969c; --faint: #757c83;
  background: radial-gradient(ellipse at 102% 6%, rgb(233 178 96 / .16), transparent 26%), radial-gradient(ellipse at 22% -6%, rgb(64 92 132 / .3), transparent 52%), radial-gradient(ellipse at 6% 104%, rgb(20 44 66 / .34), transparent 48%), linear-gradient(172deg, #0a1018 0%, #06090d 58%, #0a0f16 100%) fixed;
}
html:has(body[data-backdrop="plumbobs"]) { background: #090e15; scrollbar-color: #24323f #090e15; }
html:has(body[data-backdrop="sand"]) { background: #120d09; scrollbar-color: #3b2c1f #120d09; }
html:has(body[data-backdrop="storm"]) { background: #070b10; scrollbar-color: #26313d #070b10; }
/* The site's mark stays gold: it is a picture, not a colour. Text set in "gold" follows the project. */

/* The Docs: shelves on the front, then a page with its collection on the left and its sections on the right. */
.fa-book { -webkit-mask-image: url("../icons/book.svg"); mask-image: url("../icons/book.svg"); }
.fa-code { -webkit-mask-image: url("../icons/code.svg"); mask-image: url("../icons/code.svg"); }
.fa-circle-question { -webkit-mask-image: url("../icons/circle-question.svg"); mask-image: url("../icons/circle-question.svg"); }
.fa-magnifying-glass { -webkit-mask-image: url("../icons/magnifying-glass.svg"); mask-image: url("../icons/magnifying-glass.svg"); }
.docs-search-row { margin-top: clamp(20px, 3vw, 32px); }
.docs-search { display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 6px 6px 6px 16px; border: 1px solid var(--line-strong); border-radius: 99px; background: rgb(0 0 0 / .35); }
.docs-search:focus-within { border-color: rgb(var(--gold-glow) / .6); }
.docs-search .fa-icon { flex: none; width: 15px; height: 15px; color: var(--muted); }
.docs-search input { flex: 1; min-width: 0; height: 36px; border: 0; background: none; color: var(--paper); font: inherit; outline: none; }
a.docs-tile { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 24px; text-decoration: none; }
.docs-tile .tile-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.docs-icon.fa-icon { width: 22px; height: 22px; color: var(--gold-hi); }
.docs-list { display: grid; gap: 10px; padding-top: clamp(20px, 3vw, 30px); }
a.docs-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; min-height: 0; padding: 16px 20px; text-decoration: none; }
.docs-row > span:first-child { display: grid; gap: 3px; min-width: 0; }
.docs-row strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--paper); font-weight: 600; }
.docs-row small { color: var(--muted); font-size: 13.5px; }
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; align-items: start; gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 5vw, 56px); }
.docs-side, .docs-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.docs-side nav, .docs-toc { display: grid; gap: 2px; }
.docs-side .label { margin-bottom: 10px; }
.docs-side nav a, .docs-toc a { padding: 6px 10px; border-left: 2px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.4; text-decoration: none; }
.docs-side nav a:hover, .docs-toc a:hover { color: var(--paper); }
.docs-side nav a[aria-current] { border-color: var(--gold-hi); color: var(--gold-hi); background: rgb(var(--gold-glow) / .08); }
.docs-toc h2 { margin-bottom: 8px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.docs-toc .toc-3 { padding-left: 22px; font-size: 13px; }
.doc { min-width: 0; }
.doc-title { margin: 12px 0 0; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05; }
.doc .lede { margin-top: 14px; }
.doc-body { margin-top: clamp(24px, 3.5vw, 36px); color: var(--paper-2); font-size: 1.05rem; line-height: 1.7; }
.doc-body > * + * { margin-top: 1.05em; }
.doc-body h2, .doc-body h3, .doc-body h4 { color: var(--paper); letter-spacing: -.02em; scroll-margin-top: 104px; }
.doc-body h2 { margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: 1.55rem; }
.doc-body h3 { margin-top: 1.7em; font-size: 1.2rem; }
.doc-body h4 { margin-top: 1.5em; font-size: 1.02rem; }
.doc-body a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgb(var(--gold-glow) / .45); text-underline-offset: 3px; }
.doc-body a:hover { text-decoration-color: currentColor; }
.doc-body strong { color: var(--paper); font-weight: 600; }
.doc-body ul, .doc-body ol { display: grid; gap: .4em; padding-left: 1.4em; }
.doc-body li > ul, .doc-body li > ol { margin-top: .4em; }
.doc-body li::marker { color: var(--gold); }
.doc-body code { padding: .12em .4em; border: 1px solid var(--line); border-radius: 6px; background: rgb(255 255 255 / .05); color: var(--paper); font: 500 .88em var(--mono); overflow-wrap: anywhere; }
.doc-body pre.code { position: relative; overflow-x: auto; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #0c0b0e; font: 400 13.5px/1.6 var(--mono); tab-size: 2; }
.doc-body pre.code code { padding: 0; border: 0; background: none; font: inherit; overflow-wrap: normal; white-space: pre; }
.doc-body pre.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 8px; right: 14px; color: var(--faint); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.code-copy { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--ink-2); color: var(--paper-2); font: 500 11.5px var(--sans); cursor: pointer; opacity: 0; transition: opacity .15s; }
pre.code:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.doc-body blockquote { padding: 2px 0 2px 18px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.callout { padding: 14px 18px; border: 1px solid rgb(var(--gold-glow) / .3); border-left-width: 3px; border-radius: 12px; background: rgb(var(--gold-glow) / .07); }
.callout > * + * { margin-top: .5em; }
.callout-title { display: block; color: var(--gold-hi); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.callout-warning, .callout-important { border-color: rgb(226 160 146 / .45); background: rgb(226 160 146 / .08); }
.callout-warning .callout-title, .callout-important .callout-title { color: var(--danger); }
.doc-body hr { border: 0; border-top: 1px dashed var(--line-strong); margin-block: 2em; }
.doc-body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.doc-body th, .doc-body td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-body th { color: var(--paper); font-weight: 600; background: rgb(255 255 255 / .03); }
.doc-body tr:last-child td { border-bottom: 0; }
.doc-updated { margin-top: clamp(28px, 4vw, 44px); color: var(--faint); font: 500 12px var(--mono); }
.docs-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
a.docs-step { display: grid; gap: 4px; min-height: 0; padding: 14px 18px; text-decoration: none; }
.docs-step small { color: var(--faint); font-size: 12px; }
.docs-step strong { color: var(--paper); font-weight: 600; }
.docs-next { text-align: right; }
@media (max-width: 1100px) { .docs-layout { grid-template-columns: 200px minmax(0, 1fr); } .docs-toc { display: none; } }
@media (max-width: 760px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-side { position: static; max-height: none; order: 2; padding-top: 20px; border-top: 1px solid var(--line); }
  .docs-search .button { display: none; }
}

/* The Newsline: post cards (the newest one large), and a post laid out like a Docs page without the side columns. */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; padding-top: clamp(24px, 3.5vw, 36px); }
.post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s, translate .35s var(--ease); }
.post-card:hover { border-color: rgb(var(--gold-glow) / .45); translate: 0 -3px; }
.post-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.post-copy { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; }
.post-date { color: var(--faint); font: 500 12px var(--mono); }
.post-card h3 { font-size: 1.2rem; line-height: 1.25; }
.post-link { color: var(--paper); text-decoration: none; }
/* the whole card opens the post; the tags stay clickable above that */
.post-link::after { content: ""; position: absolute; inset: 0; }
.post-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.post-tags .tag { text-decoration: none; }
.post-tags .tag:hover { color: var(--gold-hi); border-color: rgb(var(--gold-glow) / .45); }
.post-lead { grid-column: 1 / -1; }
.post-lead h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; }
.post-lead .card-desc { font-size: 1.05rem; max-width: 62ch; }
.news-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: clamp(20px, 3vw, 28px); color: var(--muted); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 28px; }
.pager > :last-child { justify-self: end; }
.pager-at { color: var(--faint); font: 500 12px var(--mono); }
.post { max-width: 800px; margin-top: clamp(32px, 5vw, 56px); }
.post-hero { display: block; width: 100%; height: auto; margin-top: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 18px; }
.post .post-tags { margin-top: clamp(24px, 3.5vw, 36px); }
.post .docs-steps { margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 761px) {
  .post-lead:not(.no-cover) { flex-direction: row; }
  .post-lead:not(.no-cover) .post-cover { width: 54%; aspect-ratio: auto; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--line); }
  .post-lead .post-copy { align-content: center; padding: 32px; }
}

/* The right end of the header: search, the menu of the site's parts, and the account button (SnippyNET). */
.bar-end { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
/* Where the bar wraps, this end takes what is left of the first row rather than dropping to a row of its own. */
@media (max-width: 1000px) { .bar-end { flex: 1 1 0; } }
.bar-search { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); transition: color .15s, background-color .15s; }
.bar-search:hover { color: var(--paper); background: rgb(255 255 255 / .06); }
.bar-search .fa-icon { width: 15px; height: 15px; }
.fa-user { -webkit-mask-image: url("../icons/user.svg"); mask-image: url("../icons/user.svg"); }
.fa-trophy { -webkit-mask-image: url("../icons/trophy.svg"); mask-image: url("../icons/trophy.svg"); }
.account-chip { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 38px; max-width: 200px; padding: 0 13px 0 5px; border: 1px solid var(--line); border-radius: 99px; background: rgb(0 0 0 / .35); color: var(--paper); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.account-chip:hover { border-color: rgb(var(--gold-glow) / .45); background: rgb(var(--gold-glow) / .1); }
.account-signin { padding-left: 13px; }
.account-signin .fa-icon { width: 13px; height: 13px; color: var(--gold-hi); }
.account-face { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgb(var(--gold-glow) / .2); color: var(--gold-hi); font-size: 12px; font-weight: 600; }
.account-chip-name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .bar-end { gap: 4px; }
  .account-chip-name { display: none; }
  .account-chip:not(.account-signin) { padding: 0 4px; border-color: transparent; background: none; }
  .account-signin { padding: 0 10px; font-size: 12.5px; }
  .bar-end .menu > summary { max-width: 150px; padding: 0 10px 0 12px; font-size: 13px; }
}

/* Markdown set inside a page (a mod's description and install guide, its answers, a game's page): the page's own size of type. */
.md { margin-top: 0; font-size: inherit; line-height: inherit; }
.md h3 { margin-top: 1.5em; color: var(--gold-hi); font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.md > h3:first-child { margin-top: 0; }
.md ol > li { padding-left: 4px; }
.md ol > li::marker { color: var(--gold-hi); font-weight: 600; }
.faq .md { padding: 0 0 18px; color: var(--muted); font-size: 1rem; }
.bugs .md { margin-top: 6px; color: var(--muted); font-size: .95rem; }

/* A game's achievements on its own page. */
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0; padding: clamp(20px, 3vw, 30px) 0 0; list-style: none; }
.trophy { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.trophy img, .trophy-blank { flex: none; width: 44px; height: 44px; border-radius: 10px; }
.trophy-blank { display: grid; place-items: center; background: rgb(255 255 255 / .05); color: var(--faint); }
.trophy > span:last-child { display: grid; gap: 2px; min-width: 0; }
.trophy strong { color: var(--paper); font-weight: 600; }
.trophy small { color: var(--muted); font-size: 13.5px; }