/* FatGuy Unpacks — mod distribution site.
   Dark, modern, slightly silly. Pink accent (a nod to the site being parodied),
   white as the counterpoint, Bebas Neue display + Manrope UI.
   Structure deliberately quotes the repack-blog format: spec sheet with dotted
   leaders, a ticked feature list, and a row of download mirrors. */

/* ---------- Fonts ----------
   Bebas Neue for display — tall, condensed and caps-only, so headlines read like a
   poster — with Manrope carrying everything
   that needs actual reading. Bebas ships one weight (400); never ask for bold or the
   browser fakes it and the letterforms go to mush. */
@font-face {
  font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/manrope-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0d0b10;
  --bg-2: #08070a;
  --card: #16131c;
  --card-2: #1d1926;
  --border: #2c2634;
  --border-soft: #241f2c;
  --text: #f6f3f8;
  --muted: #a29aae;
  --faint: #6e6779;
  --accent: #ff2f7e;
  --accent-2: #ff6ba6;
  --accent-soft: rgba(255, 47, 126, 0.12);
  --accent-ink: #2b0212;
  /* Two colours only: pink leads, white answers. A third hue was tried three times
     (lime, cyan, amber) and every one of them dated the page faster than it lifted
     it. If one is ever wanted back, this pair is the only thing to change. */
  --pop: #f6f3f8;
  --pop-soft: rgba(246, 243, 248, 0.10);
  --display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif;
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1120px;
  --radius: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient glow behind the hero */
body::before {
  content: "";
  position: fixed;
  top: -32vh; left: 50%;
  width: 90vw; max-width: 1000px; height: 72vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 47, 126, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font: 600 12px/1 var(--ui);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

/* Bebas is condensed and caps-only, so it wants positive tracking and a tight
   line-height — the opposite of the negative tracking a grotesque would take. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 0.95;
  margin: 0;
}

.section { position: relative; z-index: 1; padding: 88px 0; }
.section + .section { padding-top: 0; }
.section-head { max-width: 620px; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(36px, 5.4vw, 52px); }
.section-head p { color: var(--muted); margin: 12px 0 0; }

/* ---------- Packing tape ---------- */
/* The one bit of "cardboard box" iconography that survives on a dark site:
   a hazard-striped strip, used as a divider under the header and above the footer. */
.tape {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 14px,
    transparent 14px 28px
  );
  opacity: 0.55;
}

/* ---------- Ticker ---------- */
/* Parcel-label tape scrolling past. Two identical runs sit side by side and the
   track slides exactly one run's width, so the loop has no visible seam. */
.ticker {
  position: relative; z-index: 1;
  overflow: hidden;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(90deg, var(--card) 0%, var(--card-2) 50%, var(--card) 100%);
  padding: 11px 0;
  /* Fade the ends so items don't hard-clip at the edges of the screen. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; }
.ticker-run {
  display: flex; align-items: center; flex: none;
  padding-right: 0; margin: 0;
  list-style: none;
}
.ticker-run li {
  display: inline-flex; align-items: center; gap: 22px;
  padding: 0 22px;
  font: 700 12.5px/1 var(--ui);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker-run li::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.ticker-run li:nth-child(even) { color: var(--pop); }

@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: slide 42s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 11, 16, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--border-soft);
  background: rgba(13, 11, 16, 0.92);
}
.header-inner {
  display: flex; align-items: center; gap: 20px;
  height: 72px;
}

.brand { display: inline-flex; align-items: center; margin-right: auto; }

/* ---------- The lockup ----------
   FATGUY in white, then four brackets wrapping UNPACKS in pink. Type only: a
   controller was tried over the F and had to knock a hole in the letter to fit,
   which is a bad trade on the first character of the name and unreadable at 25px.
   The controller lives in the square mark instead (hero, favicon), where it has
   room and nothing behind it. Hover still animates the brackets.

   The frame is four corner brackets drawn with borders rather than a scaled SVG:
   borders keep their radius and weight whatever shape the box ends up, and a frame
   that wraps text has to stretch. Everything is in em, so the whole lockup scales
   off one font-size — 25px in the header, and it would work at any size. */
.lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  font: 400 25px/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
.lk-frame {
  position: relative;
  display: inline-block;
  /* margin, not padding: padding would push UNPACKS away from its own bracket too.
     This moves the whole framed block clear of FATGUY and leaves the frame tight. */
  margin-left: 0.26em;
  padding: 0.30em 0.40em 0.30em 0.34em;
  color: var(--accent);
}
.lk-frame .c {
  position: absolute;
  width: 0.42em; height: 0.42em;
  border: 0.075em solid var(--accent);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.lk-frame .tl { top: 0; left: 0;   border-right: 0; border-bottom: 0; border-radius: 0.15em 0 0 0; }
.lk-frame .tr { top: 0; right: 0;  border-left: 0;  border-bottom: 0; border-radius: 0 0.15em 0 0; }
.lk-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0;   border-radius: 0 0 0.15em 0; }
.lk-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0;   border-radius: 0 0 0 0.15em; }

/* Hovering pushes all four brackets outward — the logo performing its own verb. */
.brand:hover .lk-frame .tl { transform: translate(-0.07em, -0.07em); }
.brand:hover .lk-frame .tr { transform: translate(0.07em, -0.07em); }
.brand:hover .lk-frame .br { transform: translate(0.07em, 0.07em); }
.brand:hover .lk-frame .bl { transform: translate(-0.07em, 0.07em); }

/* ---------- The standalone mark (hero) ---------- */
/* The frame is a stroked path, not a glyph, purely so its weight is a number we
   control: Font Awesome Free ships solid only, and fa-expand at solid weight reads
   as four fat blocks at logo size. fa-thin/fa-light would solve it but they're Pro.
   stroke-width and stroke are inherited properties, so setting them on the host
   <svg> reaches the shadow content that <use> clones — the symbol sets neither. */
.fa-mark {
  position: relative;
  display: block;
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
}
.fa-mark .m-layer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.fa-mark i { line-height: 1; display: block; }
.m-frame {
  color: var(--accent);
  --frame-weight: 4.5;
}
.m-frame svg {
  width: 100%; height: 100%;
  stroke: currentColor;
  stroke-width: var(--frame-weight);
}
/* fa-gamepad is a wide glyph (1.25em), so 0.3em of font-size lands around 0.37 of
   the mark's width — comfortably inside the frame with air on every side. */
.m-pad {
  font-size: calc(var(--mark-size) * 0.3);
  color: var(--pop);
  /* The frame is geometrically exact, so the controller should sit dead centre. If a
     future Font Awesome release ships the glyph with uneven side bearings and it
     drifts, correct it here rather than by moving the frame. */
  transform: translateX(var(--pad-nudge-x, 0));
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 14px; font-weight: 500;
  color: var(--muted);
  transition: color 0.18s ease, background 0.18s ease;
}
.nav a:hover { color: var(--text); background: var(--card); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: 600 14px/1 var(--ui);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.btn:hover { transform: translateY(-1px); border-color: #3d3547; background: var(--card-2); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 8px 26px rgba(255, 47, 126, 0.28);
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn i { font-size: 14px; flex: none; }
.btn small { font-weight: 500; color: rgba(255, 255, 255, 0.66); font-size: 12px; }
.btn:not(.btn-primary) small { color: var(--faint); }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 1; padding: 76px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px; align-items: center;
}
.hero h1 {
  font-size: clamp(52px, 9vw, 94px);
  line-height: 0.9;
}
/* One word in pink, the way the hero headline does it. Section headings get the
   same treatment so the whole page speaks with one voice. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }
.hero-lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 52ch;
  margin: 20px 0 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-art { display: flex; justify-content: center; }
.hero-art .fa-mark {
  --mark-size: min(300px, 62vw);
  filter: drop-shadow(0 18px 46px rgba(255, 47, 126, 0.22));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art .fa-mark { animation: breathe 7s ease-in-out infinite; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* ---------- Stats ---------- */
.stats {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: var(--card);
  padding: 20px 22px;
  transition: background 0.2s ease;
}
.stat:hover { background: var(--card-2); }
.stat b {
  display: block;
  font: 400 36px/1 var(--display);
  color: var(--pop);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: left center;
}
.stat:hover b { transform: scale(1.12); }
.stat span { display: block; font-size: 13px; color: var(--faint); margin-top: 6px; }

/* ---------- Mod card ---------- */
.mod {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  overflow: hidden;
}
.mod + .mod { margin-top: 28px; }

.mod-top {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 26px;
  padding: 26px;
  border-bottom: 1px solid var(--border-soft);
}
.mod-cover {
  width: 168px; height: 168px;
  border-radius: 14px;
  /* Tilted and pink-edged at rest — cover art propped against the card rather than
     filed flat in it. Hovering straightens it up and brings it closer, like picking
     the thing up to look at it. */
  border: 1px solid var(--accent);
  background: var(--bg-2);
  object-fit: cover;
  transform: rotate(-2deg) scale(1.02);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.35s ease;
}
.mod:hover .mod-cover {
  transform: rotate(0deg) scale(1.06);
  box-shadow: 0 16px 34px rgba(255, 47, 126, 0.18);
}
.mod-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.mod-title h3 { font-size: 34px; }

.pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font: 600 12px/1 var(--ui);
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--card-2);
}
.pill-accent { color: var(--accent); border-color: rgba(255, 47, 126, 0.35); background: var(--accent-soft); }
.pill-pop { color: var(--pop); border-color: rgba(246, 243, 248, 0.22); background: var(--pop-soft); }

.mod-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin: 12px 0 0;
  font-size: 13px; color: var(--faint);
}
.mod-meta span { display: inline-flex; align-items: center; gap: 7px; }
.mod-meta i { color: var(--accent); font-size: 12px; }
.mod-meta strong { color: var(--muted); font-weight: 600; }
.mod-blurb { color: var(--muted); margin: 16px 0 0; max-width: 62ch; }
.mod-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }

/* Spec sheet + features, side by side */
.mod-body {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0;
}
.mod-panel { padding: 26px; }
.mod-panel + .mod-panel { border-left: 1px solid var(--border-soft); }
.panel-title {
  font: 600 12px/1 var(--ui);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 16px;
}

/* Dotted-leader spec rows — the repack-blog stat block, done properly */
.spec { list-style: none; margin: 0; padding: 0; }
.spec li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px;
  padding: 7px 0;
}
.spec li + li { border-top: 1px dashed var(--border-soft); }
.spec dfn { font-style: normal; color: var(--faint); flex: none; }
.spec i {
  flex: 1;
  border-bottom: 1px dotted #3a3345;
  transform: translateY(-4px);
}
.spec b { font-weight: 600; color: var(--text); flex: none; text-align: right; }
.spec b.hot { color: var(--accent); }

.features { list-style: none; margin: 0; padding: 0; }
.features li {
  position: relative;
  padding: 0 0 0 28px;
  margin-bottom: 11px;
  font-size: 14.5px;
  color: var(--muted);
}
.features li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px;
  border-radius: 5px;
  background: var(--pop-soft);
  border: 1px solid rgba(246, 243, 248, 0.28);
}
.features li::after {
  content: "";
  position: absolute; left: 5px; top: 11px;
  width: 4px; height: 7px;
  border: solid var(--pop);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.features strong { color: var(--text); font-weight: 600; }

/* Mirrors */
.mirrors { padding: 22px 26px; border-top: 1px solid var(--border-soft); background: var(--bg-2); }
.mirrors-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mirrors-note { font-size: 13px; color: var(--faint); margin: 14px 0 0; }
/* Per-mod fine print. Brand-specific disclaimers live with the mod they belong to,
   not in the site-wide FAQ — the next mod will have its own. */
.fine-print {
  font-size: 12.5px;
  color: #57515f;
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
  max-width: 74ch;
}

/* Changelog disclosure */
.changelog { border-top: 1px solid var(--border-soft); }
.changelog summary {
  padding: 16px 26px;
  cursor: pointer;
  font: 600 14px/1 var(--ui);
  color: var(--muted);
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  transition: color 0.18s ease;
}
.changelog summary:hover { color: var(--text); }
.changelog summary::-webkit-details-marker { display: none; }
.changelog summary::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.changelog[open] summary::before { transform: rotate(45deg); }
.changelog-body { padding: 4px 26px 26px; }
.changelog-body h4 {
  font: 400 21px/1.15 var(--display);
  letter-spacing: 0.012em;
  margin: 24px 0 6px;
}
.changelog-body h4:first-child { margin-top: 0; }
.changelog-body h4 span { color: var(--faint); font-weight: 500; font-size: 13px; font-family: var(--ui); }
.changelog-body ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.changelog-body li { margin-bottom: 6px; }
.changelog-body strong { color: var(--text); }

/* ---------- Install steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.step:hover { transform: translateY(-3px); border-color: var(--border); }
.step:hover .step-num { background: var(--accent); color: #fff; border-color: var(--accent); }
.step-num {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 47, 126, 0.3);
  color: var(--accent);
  font: 400 17px/1 var(--display);
  margin-bottom: 14px;
}
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; margin: 0; }
.step code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--pop);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 6px;
}

/* ---------- Notice / upcoming ---------- */
.notice {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--pop);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.notice-icon {
  color: var(--pop);
  font-size: 20px;
  margin-top: 4px;
  flex: none;
}
.notice h3 { font-size: 23px; margin-bottom: 8px; }
.notice p { color: var(--muted); margin: 0; max-width: 68ch; font-size: 15px; }
.notice p + p { margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.faq-item:hover { border-color: var(--border); transform: translateY(-2px); }
.faq-item h3 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.faq-item p { color: var(--muted); font-size: 14.5px; margin: 0; }
.faq-item a { color: var(--accent); }
.faq-item a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 1; margin-top: 88px; }
.footer-inner {
  padding: 40px 0 56px;
  display: flex; flex-wrap: wrap; gap: 28px;
  justify-content: space-between; align-items: flex-start;
}
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.footer-col p { color: var(--faint); font-size: 13.5px; margin: 0; max-width: 46ch; }
.footer-col p + p { margin-top: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { order: -1; }
  .hero-art .fa-mark { --mark-size: min(240px, 56vw); }
  .mod-body { grid-template-columns: 1fr; }
  .mod-panel + .mod-panel { border-left: 0; border-top: 1px solid var(--border-soft); }
  .steps { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .ticker { padding: 9px 0; }
  .ticker-run li { font-size: 11.5px; gap: 16px; padding: 0 16px; letter-spacing: 1.2px; }
  .nav {
    display: none;
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 16px 16px;
    background: rgba(13, 11, 16, 0.97);
    border-bottom: 1px solid var(--border-soft);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px; }
  .nav-toggle { display: inline-flex; }
  .mod-top { grid-template-columns: 1fr; gap: 20px; }
  .mod-cover { width: 120px; height: 120px; }
  .mod-panel, .mirrors, .changelog-body { padding-left: 20px; padding-right: 20px; }
  .changelog summary { padding-left: 20px; padding-right: 20px; }
}