/* nerdytechs.dev — NerdyTechs Dev
   Direction: arcade neon. Near-black base, acid lime + hot magenta, cyan for
   LIVE. Every app lights the page in its OWN icon colour (--tile). Hard edges,
   no glass, no gradient wash, no marquee. */

@font-face { font-family: 'Bricolage'; src: url('/_hub/assets/fonts/bricolage-var.woff2') format('woff2');
  font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'PlexSans'; src: url('/_hub/assets/fonts/plexsans-var.woff2') format('woff2');
  font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'PlexMono'; src: url('/_hub/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'PlexMono'; src: url('/_hub/assets/fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500; font-display: swap; }

:root, [data-theme="dark"] {
  --bg:      #0A0A0F;
  --surface: #121219;
  --surface2:#191922;
  --ink:     #F4F4F8;
  --ink2:    #C9C9DA;
  --ink3:    #B6B6CB;
  --muted:   #8B8BA3;
  --faint:   #6E6E86;
  --line:    #262633;

  /* brand fills: identical in both themes, always paired with --on-accent */
  --lime:    #C6FF00;
  --mag:     #FF2E88;
  --cyan:    #00E1FF;
  --on-accent: #0A0A0F;

  /* the same three as TEXT. Neon is unreadable on paper, so light overrides these. */
  --lime-t:  #C6FF00;
  --mag-t:   #FF2E88;
  --cyan-t:  #00E1FF;

  /* surfaces + hairlines */
  --rail-bg:  rgba(10,10,15,.88);
  --board-bg: rgba(18,18,25,.72);
  --shots-bg: rgba(18,18,25,.6);
  --tile-fb:  #22222E;
  --hair:     rgba(255,255,255,.10);
  --ul:       rgba(255,255,255,.16);
  --grid:     rgba(255,255,255,.028);
  --bloom-a:  rgba(255,46,136,.20);
  --bloom-b:  rgba(198,255,0,.12);
  --shadow:   rgba(0,0,0,.85);
  --stroke-lime: rgba(198,255,0,.42);

  /* glow is the dark skin's signature. Light mode swaps it for hard offset ink. */
  --gl-s:     0 0 14px rgba(198,255,0,.75);
  --gl-m:     0 0 26px rgba(198,255,0,.5);
  --gl-l:     0 0 34px rgba(198,255,0,.55), 0 0 90px rgba(198,255,0,.25);
  --gl-mag:   0 0 24px rgba(255,46,136,.6);
  --chip-live-bd: rgba(0,225,255,.55);  --chip-live-bg: rgba(0,225,255,.10);
  --chip-live-sh: 0 0 20px -6px rgba(0,225,255,.75);
  --chip-rev-bd:  rgba(255,46,136,.55); --chip-rev-bg:  rgba(255,46,136,.10);
  --chip-rev-sh:  0 0 20px -6px rgba(255,46,136,.7);
  --chip-bld-bd:  rgba(198,255,0,.45);  --chip-bld-bg:  rgba(198,255,0,.07);

  /* footer stays the arcade block in BOTH themes, so it keeps its own ink */
  --foot-bg:   #07070B;
  --foot-ink:  #C9C9DA;
  --foot-head: #8B8BA3;
  --foot-line: #262633;
  --foot-ul:   rgba(255,255,255,.14);
  --foot-legal:#6E6E86;
  --foot-strong:#F4F4F8;

  --gut: clamp(18px, 4vw, 56px);
  --step--1: 0.8125rem;
  --step-0:  1.0625rem;
  --step-1:  1.328rem;
  --step-2:  1.66rem;
  --step-3:  2.07rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; color: var(--ink);
  font-family: 'PlexSans', -apple-system, sans-serif;
  font-size: var(--step-0); line-height: 1.55;
  background:
    radial-gradient(900px 420px at 88% -8%, var(--bloom-a), transparent 70%),
    radial-gradient(760px 380px at 4% 0%, var(--bloom-b), transparent 72%),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 64px),
    var(--bg);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--lime); color: var(--on-accent); }

.mono { font-family: 'PlexMono', ui-monospace, monospace; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }

/* ---------- top rail ---------- */
.rail {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 20px var(--gut) 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--rail-bg); backdrop-filter: blur(6px);
  z-index: 30; flex-wrap: wrap;
}
.mark { font-family: 'PlexMono', monospace; font-weight: 500; letter-spacing: .14em;
  font-size: var(--step--1); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.mark s { color: var(--lime-t); text-decoration: none; text-shadow: var(--gl-s); }
.rail nav { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; row-gap: 10px;
  font-family: 'PlexMono', monospace; font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase; }
.rail nav a { text-decoration: none; color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.rail nav a:hover { color: var(--lime-t); border-bottom-color: var(--lime-t); }

/* ---------- masthead ---------- */
.masthead { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: clamp(24px,5vw,72px); padding: clamp(40px,7vw,90px) 0 clamp(34px,5vw,60px); align-items: center; }
h1.mast {
  font-family: 'Bricolage', sans-serif; font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 86, 'wght' 800;
  font-size: clamp(3rem, 9.2vw, 7.4rem); line-height: .86; letter-spacing: -.025em;
  margin: 0 0 26px; text-transform: uppercase;
}
h1.mast i { font-style: normal; color: var(--lime-t); text-shadow: var(--gl-l); }
.lede { max-width: 46ch; font-size: var(--step-1); line-height: 1.5; margin: 0; color: var(--ink2); }
.lede b { font-weight: 600; color: var(--ink); }

/* the live apps, glowing in their own colours — the masthead's whole right side */
.glowstack { display: flex; flex-wrap: wrap; gap: clamp(14px,2.2vw,22px); justify-content: flex-end; }
.glowstack a { display: block; line-height: 0; position: relative; transition: transform .16s ease; }
.glowstack img { width: clamp(84px,9vw,124px); height: clamp(84px,9vw,124px); border-radius: 23%;
  box-shadow: 0 0 0 1px var(--hair), 0 18px 46px -12px var(--tile, #000), 0 0 70px -22px var(--tile, #000); }
.glowstack a:hover { transform: translateY(-6px) rotate(-1.5deg); }
.glowstack a:nth-child(even) { transform: translateY(14px); }
.glowstack a:nth-child(even):hover { transform: translateY(8px) rotate(1.5deg); }

/* ---------- scoreboard (replaces the old ticker) ---------- */
.board { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--board-bg); }
.board-in { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 1240px; margin: 0 auto; }
.board-cell { padding: 20px clamp(14px,2vw,26px); border-left: 1px solid var(--line); }
.board-cell:first-child { border-left: none; }
.board-cell dt { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px; }
.board-cell dd { margin: 0; font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 88, 'wght' 800;
  font-size: clamp(1.9rem,4.4vw,2.9rem); line-height: 1; letter-spacing: -.02em; }
.board-cell dd small { display: block; font-family: 'PlexMono', monospace; font-variation-settings: normal;
  font-size: 12px; letter-spacing: .1em; color: var(--muted); margin-top: 8px; font-weight: 400; }
.n-lime { color: var(--lime-t); text-shadow: var(--gl-m); }
.n-mag  { color: var(--mag-t);  text-shadow: var(--gl-mag); }
.n-cyan { color: var(--cyan-t); text-shadow: var(--gl-m); }

/* ---------- roster ---------- */
.grp { display: flex; align-items: flex-end; gap: 16px; margin: clamp(46px,6vw,78px) 0 0;
  font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; }
.grp .num { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 84, 'wght' 800;
  font-size: clamp(2.6rem,7vw,4.6rem); line-height: .8; color: transparent; letter-spacing: -.03em;
  -webkit-text-stroke: 1.5px var(--stroke-lime); }
.grp .cnt { margin-left: auto; }

.roster { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.roster li { border-bottom: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: 88px minmax(0,1.5fr) minmax(0,.95fr) auto;
  gap: clamp(14px,2.4vw,32px); align-items: center; padding: 22px 12px; text-decoration: none;
  transition: background .16s ease, box-shadow .16s ease; }
.row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tile, transparent); opacity: 0; transition: opacity .16s ease; }
.row:hover, .row:focus-within { background: var(--surface); box-shadow: inset 0 0 90px -40px var(--tile, transparent); }
.row:hover::before, .row:focus-within::before { opacity: 1; box-shadow: 0 0 22px var(--tile, transparent); }
.row:hover .r-name a, .row:focus-within .r-name a { color: var(--lime-t); }

.tile { display: grid; place-items: center; width: 88px; height: 88px; background: var(--tile, var(--tile-fb));
  border-radius: 20%; }
.tile img { width: 88px; height: 88px; border-radius: 20%;
  box-shadow: 0 0 0 1px var(--hair), 0 0 34px -10px var(--tile, #000); }
.tile--plate { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 82, 'wght' 800;
  font-size: 3.1rem; color: #fff; line-height: 1; box-shadow: 0 0 40px -14px var(--tile, #000); }

.r-head { display: block; min-width: 0; }
.r-name { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 90, 'wght' 700;
  font-size: var(--step-2); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 4px; text-transform: uppercase;
  display: block; }
.r-name a { text-decoration: none; transition: color .16s ease; }
.r-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.r-tag { margin: 0; color: var(--ink3); font-size: var(--step-0); line-height: 1.4; max-width: 44ch; }
.r-meta { font-family: 'PlexMono', monospace; font-size: var(--step--1); color: var(--muted); line-height: 1.75;
  letter-spacing: .04em; text-transform: uppercase; }
.r-meta span { display: block; }
.r-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 148px; }
.r-end .chip, .r-end .badge, .r-end .arrow { position: relative; z-index: 2; }

.chip { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--line); white-space: nowrap; font-weight: 500; border-radius: 2px; }
.chip.live     { color: var(--cyan-t); border-color: var(--chip-live-bd); background: var(--chip-live-bg);
                 box-shadow: var(--chip-live-sh); }
.chip.review   { color: var(--mag-t);  border-color: var(--chip-rev-bd); background: var(--chip-rev-bg);
                 box-shadow: var(--chip-rev-sh); }
.chip.building { color: var(--lime-t); border-color: var(--chip-bld-bd); background: var(--chip-bld-bg); }
.chip.internal { color: var(--muted); }

.badge { line-height: 0; }
.badge img { height: 40px; width: auto; }
.arrow { font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.row:hover .arrow { color: var(--lime-t); }

/* ---------- closing blocks ---------- */
.also { margin: clamp(40px,6vw,70px) 0 0; border-top: 1px solid var(--line); padding-top: 20px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: clamp(16px,4vw,48px); }
.also h3 { font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin: 0; }
.also p { margin: 0 0 10px; max-width: 62ch; color: var(--ink3); }
.also .tally { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 88, 'wght' 800;
  font-size: clamp(1.9rem,4.4vw,2.9rem); line-height: 1; letter-spacing: -.02em; color: var(--lime-t);
  text-shadow: var(--gl-m); display: inline-block; vertical-align: -.12em; margin-right: .25em; }

.foot { background: var(--foot-bg); color: var(--foot-ink); border-top: 1px solid var(--foot-line); margin-top: clamp(48px,7vw,90px);
  padding: clamp(36px,5vw,64px) 0 30px; }
.foot .wrap { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap: 32px; }
.foot h4 { font-family: 'PlexMono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--foot-head); margin: 0 0 12px; font-weight: 500; }
.foot a { color: var(--foot-ink); text-decoration: none; border-bottom: 1px solid var(--foot-ul); }
.foot a:hover { color: var(--lime); border-bottom-color: var(--lime); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot .sign { color: var(--foot-strong); font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 86, 'wght' 800;
  font-size: clamp(1.8rem,4vw,2.7rem); line-height: .95; text-transform: uppercase; margin: 0 0 14px; }
.foot .sign s { color: var(--mag); text-decoration: none; text-shadow: var(--gl-mag); }
.legal { grid-column: 1 / -1; border-top: 1px solid var(--foot-line); margin-top: 16px; padding-top: 16px;
  font-family: 'PlexMono', monospace; font-size: 11.5px; line-height: 1.7; color: var(--foot-legal); letter-spacing: .03em; }

/* ---------- interior pages ---------- */
.crumb { font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 22px 0 0; margin: 0; }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--ul); }
.crumb a:hover { color: var(--lime-t); border-bottom-color: var(--lime-t); }
.crumb s { color: var(--mag-t); text-decoration: none; padding: 0 6px; }

.pagehead { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); gap: clamp(20px,4vw,64px);
  align-items: end; padding: clamp(26px,4vw,52px) 0 clamp(22px,3vw,38px); border-bottom: 1px solid var(--line); }
.h-page { font-family: 'Bricolage', sans-serif; font-variation-settings: 'opsz' 96, 'wdth' 86, 'wght' 800;
  font-size: clamp(2.8rem,7.4vw,5.6rem); line-height: .85; letter-spacing: -.025em; margin: 0; text-transform: uppercase; }
.h-page i { font-style: normal; color: var(--lime-t); text-shadow: var(--gl-m); }
.h-page s, .h-app s { color: var(--mag-t); text-decoration: none; text-shadow: var(--gl-mag); }

.apphead { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: clamp(24px,5vw,72px);
  padding: clamp(26px,4vw,54px) 0 clamp(28px,4vw,48px); align-items: start; }
.apphead .tile { width: 160px; height: 160px; margin-bottom: 24px; }
.apphead .tile img { width: 160px; height: 160px; box-shadow: 0 0 0 1px var(--hair), 0 0 90px -18px var(--tile, #000); }
.apphead .tile--plate { font-size: 5.4rem; }
.h-app { font-family: 'Bricolage', sans-serif; font-variation-settings: 'opsz' 96, 'wdth' 88, 'wght' 800;
  font-size: clamp(2.6rem,7vw,5rem); line-height: .88; letter-spacing: -.025em; margin: 0 0 10px; text-transform: uppercase; }
.app-tag { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 96, 'wght' 700;
  font-size: var(--step-2); line-height: 1.15; margin: 0 0 14px; color: var(--lime-t); text-shadow: var(--gl-m); }
.app-blurb { max-width: 50ch; font-size: var(--step-1); line-height: 1.5; margin: 0 0 26px; color: var(--ink2); }
.cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.txtlink { font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--lime-t); border-bottom: 2px solid var(--lime-t); padding-bottom: 1px; }
.txtlink:hover { background: var(--lime); color: var(--on-accent); }
.bigmail { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 92, 'wght' 700;
  font-size: clamp(1.3rem,3.2vw,2.1rem); text-decoration: none; color: var(--lime-t); border-bottom: 3px solid var(--lime-t);
  letter-spacing: -.01em; text-shadow: var(--gl-m); }
.bigmail:hover { background: var(--lime); color: var(--on-accent); text-shadow: none; }

.spec { margin: 6px 0 0; border-top: 1px solid var(--line); font-family: 'PlexMono', monospace; font-size: var(--step--1); }
.spec div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0 9px; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.spec dd { margin: 0; font-weight: 500; text-align: right; }
.spec dd a { color: var(--lime-t); }

/* screenshots: shove-sideways strip */
.shots { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--shots-bg);
  overflow-x: auto; overflow-y: hidden; scrollbar-color: var(--lime-t) var(--surface); }
.shots-track { display: flex; gap: 16px; padding: 24px var(--gut); width: max-content; }
.shots-track img { height: clamp(300px, 46vw, 470px); width: auto; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--hair), 0 22px 50px -24px var(--shadow); }
.shots::-webkit-scrollbar { height: 10px; }
.shots::-webkit-scrollbar-track { background: var(--surface); }
.shots::-webkit-scrollbar-thumb { background: var(--lime-t); }

/* Landscape screenshots (a landscape-only game, or iPad shots) stack full width
   instead of riding the filmstrip: at filmstrip height a 2.17:1 capture is a
   postage stamp. app.php sets .shots--wide from the geometry sync.php measured. */
.shots--wide { overflow: visible; padding: clamp(26px, 4vw, 52px) 0 clamp(30px, 5vw, 60px); }
.shots--wide .wrap { padding-bottom: 6px; }
.shots--wide .wrap .sect { margin-bottom: 0; }
.shots--wide .shots-track { display: grid; grid-template-columns: 1fr; width: auto;
  max-width: 1240px; margin: 0 auto; padding: 18px var(--gut) 0; gap: clamp(16px, 2.6vw, 30px); }
.shots--wide .shots-track img { width: 100%; height: auto; border-radius: 12px; }

.cols { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,.85fr); gap: clamp(24px,5vw,64px);
  padding: clamp(30px,5vw,60px) 0 0; align-items: start; }
.cols--wide { grid-template-columns: minmax(0,1.9fr) minmax(0,.8fr); }
.sect { font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime-t); font-weight: 500; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.prose { max-width: 68ch; color: var(--ink2); }
.prose p { margin: 0 0 1em; }
.prose h2.sect { margin-top: 2.2em; }
.prose h3 { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 94, 'wght' 700;
  font-size: var(--step-1); margin: 1.6em 0 .4em; letter-spacing: -.01em; color: var(--ink); }
.prose.small { font-size: var(--step--1); }
.src { color: var(--muted); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-top: 18px; }
.steps { margin: 0; padding-left: 1.1em; color: var(--ink2); }
.steps li { margin-bottom: .6em; }
.steps b { color: var(--ink); }

.panel { border: 1px solid var(--line); border-radius: 4px; padding: 18px 18px 20px; margin-bottom: 18px;
  background: var(--surface); }
.panel h3 { font-family: 'PlexMono', monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin: 0 0 10px; }
.panel p { margin: 0 0 10px; color: var(--ink2); }
.panel p:last-child { margin-bottom: 0; }
.small { font-size: var(--step--1); line-height: 1.5; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { border-bottom: 1px solid var(--line); padding: 7px 0; }
ul.plain li:last-child { border-bottom: none; }
ul.plain a, .panel a { text-decoration: none; border-bottom: 1px solid var(--ul); }
ul.plain a:hover, .panel a:hover { color: var(--lime-t); border-bottom-color: var(--lime-t); }

.pols { padding-top: clamp(30px,5vw,56px); }
.pol { border-top: 1px solid var(--line); padding: 26px 0; }
.pol:last-child { border-bottom: 1px solid var(--line); }
.pol-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.pol-head .tile { width: 72px; height: 72px; }
.pol-head .tile img { width: 72px; height: 72px; }
.pol-head .tile--plate { font-size: 2.6rem; }
.pol-head h3 { font-family: 'Bricolage', sans-serif; font-variation-settings: 'wdth' 92, 'wght' 700;
  font-size: var(--step-2); margin: 0 0 2px; text-transform: uppercase; letter-spacing: -.015em; }
.pol-head p { margin: 0; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.pol-head a { color: var(--lime-t); }
.pol-kv { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0,1fr); margin: 0;
  border-top: 1px solid var(--line); }
.pol-kv dt { font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); }
.pol-kv dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink2); }
.pol-kv ul { margin: 0; padding-left: 1.1em; }
.pol-kv li { margin-bottom: .3em; }

.pager { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: clamp(34px,5vw,60px); padding: 18px 0 0;
  font-family: 'PlexMono', monospace; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; }
.pager a { text-decoration: none; color: var(--muted); border-bottom: 1px solid transparent; }
.pager a:hover { color: var(--lime-t); border-bottom-color: var(--lime-t); }

@media (max-width: 620px) {
  /* A 2.17:1 capture inside the page gutter is a stripe on a phone. Let the
     wide gallery run edge to edge instead; it is the whole point of the section. */
  .shots--wide .shots-track { padding-left: 0; padding-right: 0; gap: 12px; }
  .shots--wide .shots-track img { border-radius: 0; }
  .rail { padding-top: 14px; padding-bottom: 12px; }
  .rail nav { gap: 13px; row-gap: 6px; font-size: 12px; }
  .rail nav a { white-space: nowrap; }
  .board-in { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .board-cell:nth-child(3) { border-left: none; }
  .board-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; }
  .glowstack { justify-content: flex-start; }
  .row { grid-template-columns: 64px minmax(0,1fr); grid-template-areas: 'tile name' 'meta meta' 'end end'; row-gap: 14px; }
  .row > .tile { grid-area: tile; width: 64px; height: 64px; }
  .row > .tile img { width: 64px; height: 64px; }
  .tile--plate { font-size: 2.2rem; }
  .r-head { grid-area: name; }
  .r-meta { grid-area: meta; }
  .r-end { grid-area: end; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .foot .wrap { grid-template-columns: 1fr; }
  .also, .pagehead, .apphead, .cols, .cols--wide { grid-template-columns: 1fr; }
  .apphead .tile, .apphead .tile img { width: 112px; height: 112px; }
  .pol-kv { grid-template-columns: 1fr; }
  .pol-kv dt { padding-bottom: 2px; border-bottom: none; }
  .pol-kv dd { padding-top: 0; }
}

/* ============================================================================
   LIGHT SKIN
   Same arcade bones on paper. Neon stays neon where it is a FILL (highlight
   block, selection, hover wash); where neon was TEXT it darkens, because acid
   lime on paper is unreadable. Glow is replaced by hard offset ink so each app
   still colours the page in its own icon colour. The footer stays dark on
   purpose: it is the one arcade block that survives into the light theme.
   Token list is generated in one place and emitted twice, once for the explicit
   toggle and once as the no-JS system-preference fallback. Keep them identical.
   ============================================================================ */
[data-theme="light"] {
  /* paper, not beige and not pure white */
  --bg:      #F1F2F6;
  --surface: #FFFFFF;
  --surface2:#E7E9F0;
  --ink:     #0C0C14;
  --ink2:    #383946;
  --ink3:    #4E5060;
  --muted:   #6B6D7D;
  --faint:   #8A8C9A;
  --line:    #D8DBE4;

  /* fills keep full neon saturation; only the TEXT versions darken */
  --lime-t:  #4C6A00;
  --mag-t:   #C10E59;
  --cyan-t:  #006272;

  --rail-bg:  rgba(241,242,246,.88);
  --board-bg: rgba(255,255,255,.75);
  --shots-bg: rgba(255,255,255,.70);
  --tile-fb:  #DADCE5;
  --hair:     rgba(12,12,20,.12);
  --ul:       rgba(12,12,20,.22);
  --grid:     rgba(12,12,20,.038);
  --bloom-a:  rgba(255,46,136,.13);
  --bloom-b:  rgba(198,255,0,.22);
  --shadow:   rgba(20,22,40,.30);
  --stroke-lime: rgba(76,106,0,.62);

  /* the dark skin glows; the light skin casts hard offset ink in the app's own colour */
  --gl-s: none; --gl-m: none; --gl-l: none; --gl-mag: none;

  --chip-live-bd: rgba(0,98,114,.45);  --chip-live-bg: rgba(0,98,114,.10);  --chip-live-sh: none;
  --chip-rev-bd:  rgba(193,14,89,.42); --chip-rev-bg:  rgba(193,14,89,.09); --chip-rev-sh:  none;
  --chip-bld-bd:  rgba(76,106,0,.42);  --chip-bld-bg:  rgba(198,255,0,.28);
}

/* Acid lime survives as a marker highlight instead of glowing text. */
[data-theme="light"] h1.mast i,
[data-theme="light"] .h-page i {
  color: var(--on-accent); background: var(--lime);
  box-shadow: .12em 0 0 var(--lime), -.12em 0 0 var(--lime);
}

/* The footer keeps the dark skin, so it keeps its glow too. */
[data-theme="light"] .foot .sign s { text-shadow: 0 0 24px rgba(255,46,136,.6); }
[data-theme="light"] .foot { border-top: none; }

/* Tiles get a hairline so a pale icon does not float on white. */
[data-theme="light"] .tile img,
[data-theme="light"] .glowstack img { outline: 1px solid var(--hair); outline-offset: -1px; }
[data-theme="light"] .row:hover, [data-theme="light"] .row:focus-within {
  box-shadow: inset 0 0 90px -46px var(--tile, transparent); }

/* Per-app colour in the light skin: the glow becomes a hard offset block in the
   app's own --tile colour. NOTE: these shadows must stay written out in the rule.
   Moving them into a :root custom property silently breaks them, because a
   var(--tile) nested inside a custom property is substituted where that property
   is DECLARED (the root, where --tile does not exist), not where it is used. */
[data-theme="light"] .glowstack img { box-shadow: 0 0 0 1px var(--hair), 9px 9px 0 -1px var(--tile, transparent); }
[data-theme="light"] .tile img { box-shadow: 0 0 0 1px var(--hair), 5px 5px 0 -1px var(--tile, transparent); }
[data-theme="light"] .apphead .tile img { box-shadow: 0 0 0 1px var(--hair), 11px 11px 0 -1px var(--tile, transparent); }
[data-theme="light"] .tile--plate { box-shadow: 5px 5px 0 -1px rgba(12,12,20,.18); }

/* ---------- theme toggle ---------- */
.themebtn {
  font-family: 'PlexMono', ui-monospace, monospace; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px; padding: 4px 10px; line-height: 1.55;
  display: inline-flex; align-items: center; gap: 8px; transition: color .15s ease, border-color .15s ease;
}
.themebtn:hover { color: var(--lime-t); border-color: var(--lime-t); }
.themebtn:focus-visible { outline: 2px solid var(--lime-t); outline-offset: 2px; }
.themebtn .sw { width: 9px; height: 9px; border-radius: 50%; background: var(--lime);
  box-shadow: var(--gl-s); flex: none; }
[data-theme="light"] .themebtn .sw { background: var(--ink); box-shadow: none; }
.themebtn .lbl-dark { display: none; }
[data-theme="light"] .themebtn .lbl-dark { display: inline; }
[data-theme="light"] .themebtn .lbl-light { display: none; }

/* ---------- Apple badge: white artwork on the dark skin, black on the light one.
   Both are Apple's own files; neither is ever recoloured. ---------- */
.badge .b-on-light { display: none; }
[data-theme="light"] .badge .b-on-dark  { display: none; }
[data-theme="light"] .badge .b-on-light { display: block; }