/* tylerwince.com — THE PINBALL AUTHOR
 * An electromechanical cabinet: backglass navigation, painted playfield,
 * pop-bumper apps, drop-target books, rollover essays and a live steel ball.
 */

:root {
  --cabinet: #160909;
  --cabinet-2: #2d0f12;
  --playfield: #f3e4bb;
  --paper: #fff8e7;
  --ink: #211313;
  --muted: #765e54;
  --red: #ef3e36;
  --red-dark: #a51f24;
  --teal: #42c8b4;
  --teal-dark: #126b68;
  --yellow: #ffd23f;
  --blue: #3b69d1;
  --chrome: #d7d3c7;
  --chrome-dark: #656260;
  --lamp-off: #5e342b;
  --font-display: "Bowlby One SC", Impact, sans-serif;
  --font-body: "Chivo", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  --gutter: clamp(1rem, 3.5vw, 4rem);
  --radius: 22px;
  --line: 3px solid var(--ink);
  --shadow: 0 8px 0 rgba(33, 19, 19, .25), 0 24px 50px rgba(0, 0, 0, .25);
  --score-glow: 0 0 8px rgba(255, 210, 63, .7), 0 0 24px rgba(255, 210, 63, .35);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--cabinet);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.018) 35px 36px),
    linear-gradient(135deg, #0b0405, var(--cabinet) 44%, #260d0f);
  font: 400 1rem/1.75 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

::selection { color: var(--ink); background: var(--yellow); }

:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 4px;
}

a { color: var(--red-dark); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: var(--blue); }

img, svg, video { max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0 0 .7em;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
}

h2 { font-size: clamp(2rem, 5vw, 4.8rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.75rem); }
p { margin: 0 0 1.25rem; }
hr { border: 0; height: 3px; margin: 3rem 0; background: var(--ink); }

blockquote {
  margin: 2.25rem 0;
  padding: 1.2rem 1.5rem;
  border: 0;
  border-left: 8px solid var(--red);
  background: rgba(255, 210, 63, .16);
  font-size: 1.08em;
}

code {
  padding: .12em .4em;
  border: 1px solid rgba(33,19,19,.24);
  background: #e5d4ab;
  font: .88em var(--font-mono);
}

pre {
  position: relative;
  overflow-x: auto;
  margin: 2rem 0;
  padding: 1.5rem;
  border: 5px solid var(--ink);
  border-radius: 12px;
  color: var(--playfield);
  background: var(--cabinet);
  box-shadow: 6px 6px 0 var(--yellow);
}

pre code { padding: 0; border: 0; color: inherit; background: none; }

.copy-code {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .35rem .6rem;
  border: 1px solid var(--playfield);
  color: var(--playfield);
  background: var(--cabinet);
  font: 600 .62rem var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}

/* cabinet shell --------------------------------------------------------- */

.cabinet-shell {
  width: min(100%, 1660px);
  margin: 0 auto;
  border-inline: 10px solid #080303;
  background: var(--cabinet-2);
  box-shadow: 0 0 90px rgba(0,0,0,.7);
}

.site-banner {
  position: relative;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem clamp(.75rem, 2vw, 2rem);
  color: #3b2b22;
  background: #d7cab0;
  border-bottom: 3px solid #0d0607;
  box-shadow: inset 0 -2px rgba(255,255,255,.35);
}

.banner-screw {
  flex: none;
  width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, #777 25%, #222 70%);
  box-shadow: inset 0 0 0 1px #191919;
}

.banner-screw::after {
  content: "";
  display: block;
  width: 7px;
  height: 1px;
  margin: 5px 2px;
  background: #151515;
  transform: rotate(-18deg);
}

.banner-text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem 1.5rem;
  margin: 0;
  font: 600 .6rem var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.banner-no { color: var(--red-dark); }
.banner-name { color: var(--ink); font-weight: 800; }
.banner-note { flex: 1; color: #665449; }
.banner-link { color: var(--ink); text-decoration-style: dashed; }

/* backglass navigation -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.1rem clamp(1rem, 3vw, 3rem) .9rem;
  color: var(--playfield);
  background:
    radial-gradient(circle at 12% 0, rgba(239,62,54,.45), transparent 30%),
    radial-gradient(circle at 88% 0, rgba(66,200,180,.25), transparent 28%),
    linear-gradient(180deg, #281013, #100607);
  border-bottom: 7px solid #080303;
  box-shadow: 0 7px 0 var(--chrome-dark), 0 15px 30px rgba(0,0,0,.4);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  top: .65rem;
  width: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #777 25%, #111 70%);
}
.site-header::before { left: .7rem; }
.site-header::after { right: .7rem; }

.backglass-brand {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
}

.site-title {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--playfield);
  text-decoration: none;
}

.site-title:hover { color: var(--yellow); }

.monogram {
  display: block;
  width: 38px;
  height: 38px;
  background: currentColor;
  -webkit-mask: url("/assets/images/monogram.svg") center / contain no-repeat;
  mask: url("/assets/images/monogram.svg") center / contain no-repeat;
}

.site-title-mark {
  width: 48px;
  height: 48px;
  color: var(--yellow);
  filter: drop-shadow(0 0 8px rgba(255,210,63,.55));
}

.site-title-stack { display: flex; flex-direction: column; }
.site-title-text { font: 400 clamp(1.1rem, 2.1vw, 2rem)/1 var(--font-display); }
.site-title-sub {
  margin-top: .25rem;
  color: var(--teal);
  font: 600 .58rem var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.score-bank {
  display: grid;
  grid-template-columns: 1fr auto;
  width: clamp(220px, 26vw, 390px);
  padding: .55rem .8rem .65rem;
  border: 4px solid var(--chrome-dark);
  border-radius: 8px;
  color: var(--yellow);
  background: #050303;
  box-shadow: inset 0 0 20px #000, 0 0 0 2px #bbb, 0 6px 0 #272425;
}

.score-label,
.score-ball {
  color: var(--red);
  font: 600 .5rem var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.score-ball { text-align: right; }
.score-digits {
  grid-column: 1 / -1;
  margin-top: .1rem;
  font: 600 clamp(1.6rem, 3.2vw, 3rem)/1 var(--font-mono);
  letter-spacing: .13em;
  text-align: center;
  text-shadow: var(--score-glow);
  font-variant-numeric: tabular-nums;
}

.nav-toggle {
  display: none;
  justify-self: end;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border: 2px solid var(--playfield);
  border-radius: 999px;
  color: var(--playfield);
  background: transparent;
  font: 600 .68rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle-lamp {
  width: 11px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
}

.site-nav {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 2rem;
  margin-top: .85rem;
}

.nav-instruction {
  display: flex;
  flex-direction: column;
  padding-bottom: .4rem;
  color: #9a8175;
  font: 600 .5rem/1.6 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reel-link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  min-height: 40px;
  padding: .42rem .55rem;
  border: 1px solid #6b5653;
  border-bottom-width: 3px;
  color: #d8c7aa;
  background: #28171a;
  font: 600 clamp(.55rem, .8vw, .72rem) var(--font-mono);
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .15s ease, color .15s ease, background .15s ease;
}

.reel-link:hover,
.reel-link.active {
  z-index: 2;
  color: var(--ink);
  background: var(--yellow);
  transform: translateY(-3px);
}

.reel-number { color: var(--red); }
.reel-link.active .reel-number,
.reel-link:hover .reel-number { color: var(--red-dark); }
.reel-label { overflow: hidden; text-overflow: ellipsis; }
.reel-lamp {
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lamp-off);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.reel-link.active .reel-lamp {
  background: var(--red);
  box-shadow: 0 0 9px var(--red);
}

/* playfield frame ------------------------------------------------------- */

.cabinet-main {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: stretch;
  padding-top: 8px;
  background: linear-gradient(90deg, #090303, #3a1516 5%, #3a1516 95%, #090303);
}

.cabinet-rail {
  position: relative;
  z-index: 3;
  background: linear-gradient(90deg, #353334, #d8d3c7 35%, #777 58%, #222);
  box-shadow: inset 0 0 0 2px #111, 0 0 14px #000;
}
.cabinet-rail--right { transform: scaleX(-1); }
.cabinet-rail i {
  position: absolute;
  left: 9px;
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #777 28%, #222 66%);
}
.cabinet-rail i:nth-child(1) { top: 8rem; }
.cabinet-rail i:nth-child(2) { top: 48%; }
.cabinet-rail i:nth-child(3) { bottom: 8rem; }

.playfield-frame {
  grid-column: 2;
  min-width: 0;
  padding: clamp(.45rem, 1.1vw, 1rem);
  background: #090303;
}

.playfield-surface {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
  border: 6px solid #351315;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 22%, rgba(239,62,54,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 48%, rgba(59,105,209,.1) 0 2px, transparent 3px),
    repeating-linear-gradient(115deg, transparent 0 45px, rgba(33,19,19,.028) 46px 48px),
    var(--playfield);
  box-shadow: inset 0 0 70px rgba(68,31,20,.2);
}

.content-area { position: relative; z-index: 2; }

.pinball-ball {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 31% 25%, #fff 0 9%, #d9d9d9 18%, #696969 52%, #161616 78%);
  box-shadow: 0 2px 4px rgba(0,0,0,.7), inset -3px -4px 4px rgba(0,0,0,.32), 0 0 12px rgba(255,255,255,.4);
  will-change: transform;
}
.pinball-ball.is-live { opacity: 1; }

/* shared section hardware ----------------------------------------------- */

.home-playfield { overflow: hidden; }
.home-top-deck {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  min-height: 760px;
  border-bottom: 8px solid var(--ink);
}

.home-zone { position: relative; padding: clamp(2rem, 5vw, 5.5rem); }
.zone-heading {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.zone-heading--centered { max-width: 1000px; margin-inline: auto; }
.zone-number {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  color: var(--playfield);
  background: var(--red);
  font: 600 .85rem var(--font-mono);
  box-shadow: 4px 4px 0 var(--ink);
}
.zone-kicker {
  margin: 0 0 .3rem;
  font: 600 .62rem var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.zone-heading h2 { margin: 0; }
.zone-link {
  padding: .55rem .8rem;
  border: 2px solid currentColor;
  color: var(--ink);
  font: 600 .64rem var(--font-mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.zone-link:hover { color: var(--paper); background: var(--red); }

.pin-hit { animation: target-flash .32s ease both; }
@keyframes target-flash {
  0%, 100% { filter: none; }
  35% { filter: brightness(1.8) saturate(1.35); transform: scale(1.035); }
}

/* reading drop target bank --------------------------------------------- */

.home-zone--reading {
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(150deg, transparent 0 62%, rgba(255,210,63,.1) 62% 63%, transparent 63%),
    var(--teal-dark);
}
.home-zone--reading::before {
  content: "READ / READ / READ";
  position: absolute;
  left: -2rem;
  bottom: 2rem;
  color: rgba(255,255,255,.06);
  font: 400 clamp(3rem, 8vw, 8rem)/.8 var(--font-display);
  transform: rotate(-8deg);
}
.home-zone--reading .zone-heading {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.home-zone--reading .zone-link {
  grid-column: 2;
  justify-self: start;
  color: var(--paper);
}
.home-zone--reading .zone-number { color: var(--ink); background: var(--yellow); }
.home-zone--reading h2 { font-size: clamp(2.7rem, 5.8vw, 5.8rem); }

.drop-bank {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.4rem);
  align-items: start;
  perspective: 900px;
}

.drop-target {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: var(--paper);
  text-decoration: none;
}
.drop-target:nth-child(even) { margin-top: 4.5rem; }
.drop-target-face {
  position: relative;
  display: block;
  aspect-ratio: .58;
  overflow: hidden;
  border: 4px solid var(--ink);
  background: var(--yellow);
  clip-path: polygon(8% 0, 92% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  box-shadow: 0 12px 0 rgba(15,47,45,.7), 0 16px 0 var(--ink);
  transform: rotateX(-4deg);
  transform-origin: bottom;
  transition: transform .18s ease, box-shadow .18s ease;
}
.drop-target:nth-child(3n) .drop-target-face { background: var(--red); }
.drop-target:nth-child(3n + 1) .drop-target-face { background: var(--paper); }
.drop-target-face img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.04); }
.drop-target-number {
  position: absolute;
  z-index: 2;
  top: .25rem;
  left: .25rem;
  display: grid;
  place-items: center;
  width: 24px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  font: 600 .6rem var(--font-mono);
}
.drop-target-letter {
  display: grid;
  height: 100%;
  place-items: center;
  color: var(--ink);
  font: 400 2.6rem var(--font-display);
}
.drop-target-caption {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-top: 1.25rem;
  font-size: clamp(.64rem, .9vw, .8rem);
  line-height: 1.22;
}
.drop-target-caption small {
  color: var(--yellow);
  font: 600 .52rem var(--font-mono);
  text-transform: uppercase;
}
.drop-target:hover { color: var(--yellow); }
.drop-target:hover .drop-target-face { transform: rotateX(-30deg) translateY(12px); box-shadow: 0 3px 0 rgba(15,47,45,.7), 0 6px 0 var(--ink); }

/* hero shooter lane ----------------------------------------------------- */

.shooter-lane {
  position: relative;
  display: grid;
  min-height: 760px;
  place-items: center;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 6rem) clamp(4.5rem, 8vw, 9rem) clamp(2rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
  color: var(--paper);
  background:
    repeating-conic-gradient(from -4deg at 48% 50%, var(--red) 0 8deg, #ca282d 8deg 16deg);
}
.shooter-lane::before {
  content: "";
  position: absolute;
  inset: 8% 11% 8% 6%;
  border: 5px solid var(--paper);
  border-radius: 50%;
  opacity: .18;
  transform: rotate(-14deg);
}
.shooter-lane::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 3px dashed var(--yellow);
  border-radius: 50%;
  opacity: .25;
}
.hero-copy { position: relative; z-index: 2; width: min(100%, 630px); transform: rotate(-3deg); }
.hero-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .45rem .7rem;
  color: var(--ink);
  background: var(--yellow);
  font: 600 .62rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--ink);
}
.hero-title {
  margin: 0;
  font-size: clamp(4.2rem, 10.5vw, 11rem);
  line-height: .76;
  letter-spacing: -.07em;
  text-transform: uppercase;
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 7px 7px 0 var(--ink), 11px 11px 0 var(--yellow);
}
.hero-title span { display: block; }
.hero-title span:last-child { margin-left: .38em; color: var(--yellow); }
.hero-meta {
  width: min(100%, 440px);
  margin: 2.4rem 0 1.5rem auto;
  padding: 1rem 1.2rem;
  border: 4px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
  line-height: 1.45;
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(2deg);
}
.launch-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-left: auto;
  padding: .85rem 1.2rem;
  border: 4px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--teal);
  box-shadow: 5px 6px 0 var(--ink);
  font: 600 .72rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(2deg);
  transition: transform .13s ease, box-shadow .13s ease;
}
.launch-button:hover { transform: translateY(3px) rotate(2deg); box-shadow: 3px 3px 0 var(--ink); }
.launch-button-light {
  width: 13px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 12px var(--yellow);
}
.launch-button.is-playing .launch-button-light { animation: lamp-pulse .55s linear infinite alternate; }
@keyframes lamp-pulse { to { opacity: .3; box-shadow: none; } }

.plunger-track {
  position: absolute;
  z-index: 3;
  top: 3rem;
  right: 1.8rem;
  bottom: 4rem;
  width: 48px;
  border: 4px solid var(--ink);
  border-radius: 30px;
  background: rgba(243,228,187,.25);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.18);
}
.plunger-ball {
  position: absolute;
  top: 1rem;
  left: 8px;
  width: 25px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, white, #aaa 28%, #222 76%);
}
.plunger-spring {
  position: absolute;
  right: 14px;
  bottom: 2.7rem;
  width: 12px;
  height: 36%;
  background: repeating-linear-gradient(0deg, #222 0 3px, #bbb 4px 7px);
}
.plunger-knob {
  position: absolute;
  right: -13px;
  bottom: -.8rem;
  width: 66px;
  height: 50px;
  border: 4px solid var(--ink);
  border-radius: 8px 8px 22px 22px;
  background: var(--yellow);
  box-shadow: 0 8px 0 var(--ink);
}
.hero-instruction {
  position: absolute;
  z-index: 3;
  right: -3.8rem;
  bottom: 15rem;
  margin: 0;
  color: var(--ink);
  font: 600 .53rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-90deg);
}
.hero-star { position: absolute; z-index: 1; width: 54px; aspect-ratio: 1; background: var(--yellow); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); }
.hero-star--one { top: 12%; right: 17%; transform: rotate(13deg); }
.hero-star--two { bottom: 13%; left: 13%; width: 34px; background: var(--teal); transform: rotate(-18deg); }

/* app pop bumpers ------------------------------------------------------- */

.home-zone--apps {
  min-height: 790px;
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,210,63,.17), transparent 25%),
    linear-gradient(135deg, #18244b, #111735 58%, #090f29);
  border-bottom: 8px solid var(--ink);
}
.home-zone--apps::before {
  content: "";
  position: absolute;
  inset: 1.5rem;
  border: 3px solid rgba(243,228,187,.35);
  border-radius: 46% 54% 30% 35%;
  transform: rotate(-1deg);
}
.home-zone--apps .zone-number { background: var(--teal); }
.home-zone--apps .zone-link { color: var(--paper); }
.bumper-field { position: relative; z-index: 2; height: 520px; max-width: 1220px; margin: 0 auto; }
.bumper-assembly { position: absolute; width: 300px; text-align: center; }
.bumper-assembly--1 { left: 2%; top: 10%; transform: rotate(-7deg); }
.bumper-assembly--2 { left: 50%; top: -5%; transform: translateX(-50%) rotate(2deg); }
.bumper-assembly--3 { right: 2%; top: 15%; transform: rotate(8deg); }
.bumper-cap {
  position: relative;
  display: grid;
  width: 245px;
  aspect-ratio: 1;
  margin: 0 auto;
  place-items: center;
  border: 8px solid var(--chrome-dark);
  border-radius: 50%;
  color: var(--ink);
  background: radial-gradient(circle, var(--paper) 0 32%, var(--yellow) 33% 47%, var(--red) 48% 65%, #44161c 66% 100%);
  box-shadow: inset 0 0 0 5px #efeadf, inset 0 0 25px rgba(0,0,0,.5), 0 12px 0 #080b1d, 0 20px 25px rgba(0,0,0,.55);
  text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease;
}
.bumper-cap::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 3px dashed rgba(33,19,19,.5);
  border-radius: 50%;
}
.bumper-ring {
  position: absolute;
  inset: -22px;
  border: 6px double var(--chrome);
  border-radius: 50%;
  opacity: .7;
}
.bumper-icon { position: relative; z-index: 2; width: 74px; height: 74px; border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
.bumper-name { position: absolute; z-index: 3; bottom: 37px; font: 400 1rem var(--font-display); text-transform: uppercase; }
.bumper-cap:hover { color: var(--ink); transform: translateY(-8px) scale(1.035); filter: brightness(1.13); }
.bumper-desc {
  display: inline-block;
  max-width: 250px;
  margin: 1.8rem auto .3rem;
  padding: .55rem .8rem;
  border: 2px solid var(--paper);
  color: var(--paper);
  background: #0e132e;
  font-size: .82rem;
  line-height: 1.3;
  box-shadow: 4px 4px 0 var(--red);
}
.bumper-score { display: block; color: var(--yellow); font: 600 .6rem var(--font-mono); letter-spacing: .12em; }
.bumper-rail { position: absolute; z-index: -1; display: block; height: 210px; border: 8px double var(--chrome); border-top: 0; border-radius: 0 0 50% 50%; }
.bumper-rail--a { left: 18%; right: 18%; top: 34%; transform: rotate(-5deg); }
.bumper-rail--b { left: 33%; right: 33%; top: 48%; transform: rotate(14deg); }

/* writing rollover lanes ------------------------------------------------ */

.home-zone--writing {
  padding-block: clamp(3rem, 7vw, 7rem);
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(239,62,54,.12) 7% 8%, transparent 8% 92%, rgba(66,200,180,.14) 92% 93%, transparent 93%),
    var(--playfield);
}
.home-zone--writing .zone-number { background: var(--red); }
.rollover-bank { display: flex; flex-direction: column; gap: .8rem; max-width: 1180px; margin: 0 auto; }
.rollover-lane {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
  padding: .55rem 1.1rem .55rem .6rem;
  border: 4px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 7px 7px 0 rgba(33,19,19,.25);
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.rollover-lane:nth-child(1) { width: 91%; margin-left: 2%; }
.rollover-lane:nth-child(2) { width: 78%; margin-left: 17%; }
.rollover-lane:nth-child(3) { width: 88%; margin-left: 7%; }
.rollover-lane:nth-child(4) { width: 73%; margin-left: 24%; }
.rollover-lane:nth-child(5) { width: 86%; margin-left: 4%; }
.rollover-lane::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(33,19,19,.25);
  border-radius: inherit;
  pointer-events: none;
}
.rollover-lamp {
  position: relative;
  z-index: 1;
  display: grid;
  width: 45px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  font: 600 .75rem var(--font-mono);
  box-shadow: inset 0 0 9px rgba(239,62,54,.25);
}
.rollover-title { position: relative; z-index: 1; overflow: hidden; font: 600 clamp(.88rem, 1.8vw, 1.25rem)/1.15 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.rollover-date { position: relative; z-index: 1; color: var(--muted); font: .62rem var(--font-mono); }
.rollover-arrow { position: relative; z-index: 1; font-size: 1.2rem; }
.rollover-lane:hover { color: var(--ink); background: var(--yellow); transform: translateX(14px); }
.rollover-lane:hover .rollover-lamp { background: var(--red); box-shadow: 0 0 16px var(--red); }

/* interior pages: shared manual / score sheet -------------------------- */

.service-manual,
.operator-sheet,
.book-score-sheet,
.article--ticket,
.error-page {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 6rem);
}

.manual-plate,
.article-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1.65fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: 4rem;
  padding: clamp(1.3rem, 3vw, 2.8rem);
  border: 6px solid var(--ink);
  color: var(--paper);
  background: var(--red);
  box-shadow: 12px 12px 0 var(--ink);
  transform: rotate(-.5deg);
}
.manual-plate::before,
.article-header::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(255,255,255,.45);
  pointer-events: none;
}
.manual-index {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font: 600 .58rem var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.manual-title-block { min-width: 0; }
.article-kicker {
  margin: 0 0 .7rem;
  font: 600 .62rem var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.article-title { margin: 0; font-size: clamp(3rem, 8vw, 8.2rem); overflow-wrap: anywhere; }
.article-description { max-width: 720px; margin: 1rem 0 0; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.45; }
.manual-badge {
  display: grid;
  width: 90px;
  aspect-ratio: 1;
  place-items: center;
  border: 5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--ink);
}
.manual-badge .monogram { width: 48px; height: 48px; }

.manual-body {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.manual-rail {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem 0;
  color: var(--muted);
  font: 600 .54rem var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.manual-rail i { flex: 1; width: 3px; min-height: 70px; background: var(--ink); }
.manual-copy { min-width: 0; }
.article-body { font-size: clamp(1rem, 1.45vw, 1.13rem); }
.article-body > :first-child,
.manual-copy > :first-child,
.score-copy > :first-child { margin-top: 0; }
.article-body h2,
.article-body h3 { margin-top: 1.5em; }
.article-body h2 { padding-bottom: .25em; border-bottom: 5px solid var(--ink); }
.article-body h2::before { content: "●"; margin-right: .35em; color: var(--red); font-size: .35em; vertical-align: .55em; }
.article-body img { height: auto; }
.article-body ul,
.article-body ol { padding-left: 1.35rem; }

/* Post layout retains its content template but joins the manual world. */
.article--ticket .article-header {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  color: var(--paper);
  background: var(--blue);
}
.article--ticket .article-kicker { position: relative; z-index: 1; }
.article--ticket .article-title { position: relative; z-index: 1; max-width: 1000px; font-size: clamp(2.8rem, 7vw, 7rem); }
.article--ticket .article-description { position: relative; z-index: 1; }
.article-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .5rem; }
.meta-item { padding: .35rem .6rem; border: 2px solid currentColor; font: 600 .64rem var(--font-mono); text-transform: uppercase; }
.article--ticket .article-body { width: min(100%, 780px); margin: 0 auto; }
.ticket-rip { display: none; }

/* app operator schematic ------------------------------------------------ */

.operator-sheet--app { padding-inline: clamp(1rem, 4vw, 4rem); }
.app-machine-header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(230px, .48fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: 5rem;
  padding: clamp(2rem, 4vw, 4rem);
  border: 7px solid var(--ink);
  color: var(--paper);
  background:
    linear-gradient(120deg, transparent 0 65%, rgba(255,210,63,.12) 65% 66%, transparent 66%),
    var(--teal-dark);
  box-shadow: 13px 13px 0 var(--ink);
}
.app-machine-header::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px dashed rgba(255,255,255,.35);
  pointer-events: none;
}
.app-medallion {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(150px, 18vw, 230px);
  aspect-ratio: 1;
  place-items: center;
  border: 8px solid var(--chrome-dark);
  border-radius: 50%;
  background: radial-gradient(circle, var(--yellow) 0 38%, var(--red) 39% 58%, #1a0b0e 59%);
  box-shadow: inset 0 0 0 4px var(--chrome), 0 12px 0 #0a3837;
}
.app-medallion img { width: 48%; border-radius: 24%; box-shadow: 0 5px 0 var(--ink); }
.app-medallion-ring { position: absolute; inset: -18px; border: 5px double var(--chrome); border-radius: 50%; }
.app-title-panel { position: relative; z-index: 2; min-width: 0; }
.app-title-panel .article-title { font-size: clamp(3.2rem, 7vw, 7.5rem); }
.app-spec-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
  border: 3px solid var(--paper);
  background: rgba(0,0,0,.2);
  font: .69rem/1.45 var(--font-mono);
}
.app-spec-panel span { display: flex; flex-direction: column; }
.app-spec-panel b { color: var(--yellow); text-transform: uppercase; }
.download-plunger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .5rem;
  padding: .8rem;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.download-plunger:hover { color: var(--paper); background: var(--red); }
.operator-sheet-body { width: min(100%, 1100px); margin: 0 auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 2.5rem 0 4rem;
  border: 5px solid var(--ink);
  box-shadow: 9px 9px 0 var(--red);
}
.feature-card { min-width: 0; padding: clamp(1.2rem, 3vw, 2.5rem); background: var(--paper); }
.feature-card + .feature-card { border-left: 4px solid var(--ink); }
.feature-card:nth-child(2) { color: var(--paper); background: var(--blue); }
.feature-card:nth-child(3) { background: var(--yellow); }
.feature-card h3 { font-size: clamp(1.1rem, 2.2vw, 1.75rem); }
.feature-card p { margin: 0; line-height: 1.5; }

.screenshot-strip {
  display: flex;
  gap: 1.2rem;
  width: calc(100vw - 8rem);
  max-width: 1420px;
  margin: 2rem 50% 4rem;
  padding: 2rem max(2rem, calc((100vw - 1160px) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  transform: translateX(-50%);
  background: var(--cabinet);
  border-block: 8px solid var(--ink);
  scrollbar-color: var(--yellow) var(--cabinet);
}
.screenshot-card {
  flex: 0 0 clamp(210px, 25vw, 310px);
  margin: 0;
  padding: .6rem;
  border: 4px solid var(--chrome-dark);
  border-radius: 28px;
  background: #111;
  box-shadow: 8px 8px 0 var(--red);
  scroll-snap-align: center;
  transform: rotate(-1deg);
}
.screenshot-card:nth-child(even) { transform: rotate(1.5deg); }
.screenshot-card img { display: block; width: 100%; border-radius: 19px; }

.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 2rem 0 4rem; }
.stack-card { display: block; color: var(--ink); text-decoration: none; }
.stack-card-stack { position: relative; min-height: 150px; }
.stack-card-stack::before,
.stack-card-stack::after { content: ""; position: absolute; inset: 7px -7px -7px 7px; border: 3px solid var(--ink); background: var(--teal); }
.stack-card-stack::after { inset: 13px -13px -13px 13px; z-index: -1; background: var(--red); }
.stack-card-front { position: relative; z-index: 2; min-height: 150px; padding: 1.1rem; border: 4px solid var(--ink); background: var(--paper); }
.stack-card-header { display: flex; justify-content: space-between; font: .62rem var(--font-mono); }
.stack-card-count { margin: 0; }
.stack-card-title { margin-top: 2rem; font-size: 1.3rem; }
.stack-card:hover .stack-card-front { background: var(--yellow); transform: translate(-3px,-3px); }

.callout {
  position: relative;
  margin: 2.5rem 0;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border: 5px solid var(--ink);
  color: var(--paper);
  background: var(--red-dark);
  box-shadow: 9px 9px 0 var(--yellow);
}
.callout p:last-child { margin-bottom: 0; }
.callout a { color: var(--yellow); }

/* book score sheet ------------------------------------------------------ */

.book-score-header {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: 4rem;
  padding: clamp(1.3rem, 3vw, 2.8rem);
  border: 6px solid var(--ink);
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--red);
}
.book-score-cover { display: grid; min-height: 200px; place-items: center; border: 5px solid var(--ink); color: var(--paper); background: var(--blue); box-shadow: 7px 7px 0 var(--ink); font: 4rem var(--font-display); transform: rotate(-3deg); }
.book-score-cover img { display: block; width: 100%; aspect-ratio: .66; object-fit: cover; }
.book-score-title .article-title { font-size: clamp(2.7rem, 6.4vw, 6.8rem); }
.book-byline { margin: 1rem 0 0; font-size: 1.3rem; }
.book-score-meta { display: flex; flex-direction: column; gap: .65rem; font: .72rem var(--font-mono); }
.book-score-meta span { display: flex; flex-direction: column; padding: .65rem; border: 3px solid var(--ink); }
.book-score-meta b { color: var(--red-dark); text-transform: uppercase; }
.pull-quote {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  width: min(100%, 940px);
  margin: 0 auto 4rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 6px solid var(--ink);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 10px 10px 0 var(--ink);
  font: italic 600 clamp(1.15rem, 2vw, 1.5rem)/1.5 var(--font-body);
  transform: rotate(1deg);
}
.pull-quote-light { width: 22px; aspect-ratio: 1; margin-top: .3rem; border: 3px solid var(--ink); border-radius: 50%; background: var(--red); box-shadow: 0 0 15px var(--red); }
.book-score-body { display: grid; grid-template-columns: 50px minmax(0, 780px); justify-content: center; gap: 2rem; }
.score-margin { display: flex; flex-direction: column; color: var(--muted); font: .56rem var(--font-mono); }
.score-margin span { display: grid; flex: 1; min-height: 100px; place-items: start center; border-right: 2px solid var(--ink); }

/* index page components ------------------------------------------------- */

.app-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 2rem);
  min-height: 430px;
  margin: 2rem 0 5rem;
  padding: 2rem;
  overflow: hidden;
  border: 6px solid var(--ink);
  background: var(--blue);
  box-shadow: 10px 10px 0 var(--ink);
}
.app-showcase-card {
  position: relative;
  display: grid;
  width: clamp(180px, 27%, 280px);
  aspect-ratio: 1;
  place-items: center;
  padding: 2rem;
  border: 8px solid var(--chrome-dark);
  border-radius: 50%;
  color: var(--ink);
  background: radial-gradient(circle, var(--paper) 0 44%, var(--yellow) 45% 59%, var(--red) 60%);
  box-shadow: inset 0 0 0 4px #eee, 0 12px 0 #0b1330;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease;
}
.app-showcase-card:nth-child(2) { margin-top: -6rem; }
.app-showcase-card:hover { color: var(--ink); transform: translateY(-8px) scale(1.025); }
.app-showcase-name { margin: 0; font-size: clamp(1.1rem, 2.4vw, 2rem); }
.app-showcase-detail { position: absolute; bottom: 18%; max-width: 70%; font-size: .7rem; line-height: 1.2; }
.philosophy-section { margin-top: 4rem; }
.philosophy-heading { font-size: 1rem; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.philosophy-list { border-top: 5px solid var(--ink); }
.philosophy-item { display: grid; grid-template-columns: minmax(160px,.4fr) 1fr; gap: 2rem; padding: 1.5rem 0; border-bottom: 2px solid var(--ink); }
.philosophy-title { font: 400 1.2rem var(--font-display); }

.post-index { border: 6px solid var(--ink); box-shadow: 10px 10px 0 var(--red); }
.post-index-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.2rem 1.4rem;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  transition: background .15s ease, padding-left .15s ease;
}
.post-index-row + .post-index-row { border-top: 3px solid var(--ink); }
.post-index-row:nth-child(4n+2) { background: #e7d6aa; }
.post-index-row:hover { color: var(--ink); background: var(--yellow); padding-left: 2rem; }
.post-index-date { padding-top: .2rem; font: .64rem var(--font-mono); }
.post-index-title { display: block; font: 600 clamp(1rem, 2vw, 1.35rem)/1.25 var(--font-body); }
.post-index-desc { display: block; margin-top: .35rem; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.post-index-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.post-index-topic { padding: .1rem .4rem; border: 1px solid var(--ink); font: .5rem var(--font-mono); text-transform: uppercase; }

.reading-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 2rem;
  border: 5px solid var(--ink);
  color: var(--paper);
  background: var(--red-dark);
  box-shadow: 9px 9px 0 var(--yellow);
}
.stat-item { display: flex; min-width: 0; flex-direction: column; padding: 1.1rem; }
.stat-item + .stat-item { border-left: 3px solid var(--ink); }
.stat-value { font: 400 clamp(1.7rem, 4vw, 3.5rem)/1 var(--font-display); }
.stat-label { font: .57rem var(--font-mono); text-transform: uppercase; }
.sort-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 2.5rem 0; font: 600 .65rem var(--font-mono); text-transform: uppercase; }
.sort-link { padding: .45rem .65rem; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; }
.sort-link:hover,
.sort-link.active { color: var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.year-section { margin: 4rem 0; }
.year-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 4rem); }
.year-heading::after { content: ""; flex: 1; height: 5px; background: var(--ink); }
.book-list { display: flex; flex-direction: column; gap: .65rem; }
.book-line {
  position: relative;
  display: grid;
  grid-template-columns: auto 58px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 82px;
  padding: .55rem .9rem .55rem 0;
  border: 4px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 rgba(33,19,19,.24);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.book-line:nth-child(3n+2) { margin-left: 1.5rem; }
.book-line:hover { color: var(--ink); background: var(--yellow); transform: translateX(8px); }
.book-target-hinge { align-self: stretch; display: flex; width: 24px; flex-direction: column; justify-content: space-around; border-right: 4px solid var(--ink); background: var(--red); }
.book-target-hinge i { display: block; width: 13px; height: 5px; margin-left: 4px; border: 1px solid var(--ink); border-radius: 4px; background: var(--chrome); }
.book-line-cover { display: grid; width: 48px; height: 64px; place-items: center; overflow: hidden; border: 2px solid var(--ink); color: var(--paper); background: var(--blue); font: 1.5rem var(--font-display); }
.book-line-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-line-main { display: flex; min-width: 0; flex-direction: column; }
.book-line-title { font-weight: 800; line-height: 1.25; }
.book-line-author { color: var(--muted); font-size: .8rem; }
.book-line-rating { display: flex; flex-direction: column; align-items: flex-end; font: .58rem var(--font-mono); text-transform: uppercase; }
.rating-lamps { display: flex; gap: 3px; }
.rating-lamps i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: 0 0 4px var(--red); }
.book-target-arrow { font-size: 1.2rem; }

.currently-reading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.reading-card { display: flex; min-height: 120px; flex-direction: column; justify-content: flex-end; padding: 1rem; border: 4px solid var(--ink); color: var(--paper); background: var(--teal-dark); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1deg); }
.reading-card:nth-child(even) { background: var(--red-dark); transform: rotate(1deg); }
.reading-card-title { font-weight: 800; line-height: 1.25; }
.reading-card-author { font-size: .8rem; }
.page-footer-note { margin-top: 3rem; padding: 1rem; border: 2px dashed var(--ink); color: var(--muted); font-size: .85rem; }

/* archive arcade -------------------------------------------------------- */

.layout-page:has(.archive-arcade) .service-manual { width: 100%; max-width: none; }
.layout-page:has(.archive-arcade) .manual-body { display: block; }
.layout-page:has(.archive-arcade) .manual-rail { display: none; }
.archive-arcade { margin-top: -1rem; }
.archive-today {
  display: grid;
  grid-template-columns: minmax(260px,.7fr) 1.3fr;
  border: 7px solid var(--ink);
  color: var(--paper);
  background: var(--cabinet);
  box-shadow: 13px 13px 0 var(--red);
}
.archive-marquee { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem,4vw,4rem); background: var(--red-dark); border-right: 6px solid var(--ink); }
.archive-today-label { font: .62rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.archive-today-theme { margin-top: 2rem; color: var(--yellow); font: 400 clamp(2rem,3.5vw,4rem)/.85 var(--font-display); text-shadow: 5px 5px 0 var(--ink); }
.archive-current-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem,4vw,4rem); }
.archive-today-manifesto { font-size: clamp(1.05rem,2vw,1.4rem); line-height: 1.5; }
.archive-today-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.archive-meta-item { padding: .35rem .55rem; border: 1px solid var(--playfield); font: .58rem var(--font-mono); text-transform: uppercase; }
.archive-palette { display: inline-flex; gap: 3px; }
.archive-palette i { display: block; width: 24px; height: 14px; border: 1px solid rgba(0,0,0,.25); }
.archive-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 4rem 0 2rem; padding-bottom: 1rem; border-bottom: 5px solid var(--ink); font: .7rem var(--font-mono); text-transform: uppercase; }
.archive-count b { color: var(--red-dark); font: 400 2rem var(--font-display); }
.archive-surprise { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border: 3px solid var(--ink); color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font: 600 .63rem var(--font-mono); text-transform: uppercase; cursor: pointer; }
.archive-surprise span { color: var(--red); text-shadow: 0 0 8px var(--red); }
.archive-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,2.5vw,2.2rem); align-items: start; }
.archive-card { display: flex; min-width: 0; flex-direction: column; border: 5px solid var(--ink); color: var(--ink); background: var(--paper); box-shadow: 7px 7px 0 rgba(33,19,19,.25); text-decoration: none; transition: transform .18s ease; }
.archive-card:nth-child(3n+2) { margin-top: 2.5rem; }
.archive-card:hover { color: var(--ink); transform: translateY(-7px) rotate(-1deg); }
.archive-thumb { display: grid; aspect-ratio: 3/2; place-items: center; overflow: hidden; border-bottom: 5px solid var(--ink); color: var(--paper); background: var(--blue); }
.archive-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: filter .18s ease, transform .18s ease; }
.archive-card:hover .archive-thumb img { filter: saturate(1.1); transform: scale(1.03); }
.archive-thumb-fallback { padding: 1rem; font: 400 clamp(1.3rem,3vw,2.4rem)/1 var(--font-display); text-align: center; }
.archive-card-info { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; }
.archive-date { font: .54rem var(--font-mono); text-transform: uppercase; }
.archive-theme { font: 400 1.2rem/1.1 var(--font-display); }
.archive-desc { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.archive-card--lost { opacity: .65; }

/* footer / apron -------------------------------------------------------- */

.site-footer {
  position: relative;
  padding: clamp(2rem,5vw,5rem) var(--gutter) 2rem;
  color: var(--playfield);
  background:
    linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0/24px 24px,
    var(--cabinet);
  border-top: 9px solid #050202;
}
.apron-instructions { display: grid; grid-template-columns: auto minmax(0,700px); gap: 2rem; align-items: start; margin-bottom: 3rem; }
.apron-number { color: var(--yellow); font: 600 .65rem var(--font-mono); }
.apron-instructions p { font-size: clamp(1rem,2vw,1.35rem); line-height: 1.45; }
.apron-service-panel { display: grid; grid-template-columns: 1fr 1fr minmax(240px,.7fr); gap: 1rem; padding: 1rem; border: 5px solid var(--chrome-dark); background: #080505; box-shadow: inset 0 0 0 2px #bbb; }
.service-slot { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem 1rem; padding: 1rem; border: 1px solid #554849; }
.service-label { width: 100%; color: var(--red); font: 600 .54rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.service-slot a { color: var(--playfield); font-size: .8rem; }
.social-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; padding: 0; list-style: none; }
.coin-door { display: flex; align-items: center; justify-content: space-around; min-height: 80px; padding: .8rem; border: 3px solid #777; color: #bdb5a5; background: #171313; }
.coin-return { display: block; width: 38px; height: 50px; border: 4px solid #777; border-radius: 3px; background: linear-gradient(#050505 60%, #333 61%); }
.coin-lettering { font: .48rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.footer-mark { display: flex; width: max-content; align-items: center; gap: .6rem; margin: 2rem 0 0 auto; color: var(--yellow); font: .58rem var(--font-mono); text-decoration: none; text-transform: uppercase; }
.footer-mark .monogram { width: 28px; height: 28px; }

/* 404 ------------------------------------------------------------------ */

.error-page { min-height: 70vh; display: grid; place-content: center; text-align: center; }
.error-code { margin: 0; color: var(--red); font-size: clamp(7rem,25vw,22rem); line-height: .7; text-shadow: 8px 8px 0 var(--ink); }
.error-page h2 { font-size: clamp(2rem,5vw,4rem); }
.error-message { max-width: 480px; }

/* motion / reveal ------------------------------------------------------- */

.js .reveal-zone { opacity: 0; transform: translateY(28px) rotate(.3deg); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal-zone.is-revealed { opacity: 1; transform: none; }

/* responsive cabinet --------------------------------------------------- */

@media (max-width: 1100px) {
  .backglass-brand { grid-template-columns: 1fr auto; }
  .score-bank { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: min(100%, 420px); }
  .site-nav { grid-template-columns: 1fr; }
  .nav-instruction { display: none; }
  .home-top-deck { grid-template-columns: 1fr; }
  .shooter-lane { order: -1; min-height: 680px; }
  .home-zone--reading { min-height: 650px; }
  .bumper-assembly { width: 260px; }
  .bumper-cap { width: 215px; }
  .app-machine-header { grid-template-columns: auto minmax(0,1fr); }
  .app-spec-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); }
  .archive-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .archive-card:nth-child(3n+2) { margin-top: 0; }
  .archive-card:nth-child(even) { margin-top: 2rem; }
}

@media (max-width: 760px) {
  :root { --gutter: 1rem; }
  body { font-size: .96rem; }
  .cabinet-shell { border-inline-width: 4px; }
  .site-banner { padding: .4rem .6rem; }
  .banner-text { gap: .15rem .6rem; }
  .banner-note { display: none; }
  .site-header { position: sticky; padding: .75rem; }
  .backglass-brand { grid-template-columns: 1fr auto; gap: .6rem; }
  .site-title-mark { width: 35px; height: 35px; }
  .site-title-text { font-size: 1rem; }
  .site-title-sub { font-size: .46rem; }
  .score-bank { grid-column: auto; grid-row: auto; width: 118px; padding: .35rem .45rem; }
  .score-label,
  .score-ball { font-size: .37rem; }
  .score-digits { font-size: 1rem; letter-spacing: .06em; }
  .nav-toggle { display: flex; grid-column: 2; grid-row: 2; padding: .5rem .65rem; }
  .site-nav {
    position: fixed;
    z-index: 130;
    inset: 0;
    display: grid;
    align-content: center;
    margin: 0;
    padding: 5rem 1.2rem 2rem;
    visibility: hidden;
    opacity: 0;
    background: rgba(18,6,8,.97);
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility .35s;
  }
  .nav-open { overflow: hidden; }
  .nav-open .site-nav { visibility: visible; opacity: 1; transform: none; }
  .nav-list { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .reel-link { min-height: 62px; padding: .8rem; font-size: .72rem; }
  .nav-open .nav-toggle { position: relative; z-index: 150; }
  .cabinet-main { grid-template-columns: 0 minmax(0,1fr) 0; padding-top: 4px; }
  .cabinet-rail { display: none; }
  .playfield-frame { padding: .25rem; }
  .playfield-surface { border-width: 3px; }
  .home-top-deck { min-height: 0; }
  .home-zone { padding: 2.2rem 1rem; }
  .zone-heading { grid-template-columns: auto 1fr; align-items: center; margin-bottom: 2rem; }
  .zone-link { grid-column: 2; justify-self: start; }
  .zone-number { width: 38px; border-width: 3px; }
  .shooter-lane { min-height: 620px; padding: 3rem 4.3rem 3rem 1.2rem; }
  .hero-copy { transform: rotate(-2deg); }
  .hero-title { font-size: clamp(4.2rem, 23vw, 7.5rem); -webkit-text-stroke-width: 2px; text-shadow: 5px 5px 0 var(--ink), 8px 8px 0 var(--yellow); }
  .hero-title span:last-child { margin-left: .08em; }
  .hero-meta { margin-top: 2rem; }
  .plunger-track { right: .55rem; width: 38px; }
  .plunger-ball { left: 5px; }
  .hero-instruction { display: none; }
  .home-zone--reading { min-height: 0; }
  .drop-bank { grid-template-columns: repeat(4, minmax(58px,1fr)); gap: .45rem; }
  .drop-target:nth-child(even) { margin-top: 2rem; }
  .drop-target-face { border-width: 2px; box-shadow: 0 7px 0 rgba(15,47,45,.7), 0 10px 0 var(--ink); }
  .drop-target-number { width: 18px; border-width: 1px; font-size: .45rem; }
  .drop-target-caption { padding-top: .8rem; font-size: .56rem; }
  .drop-target-caption small { font-size: .43rem; }
  .home-zone--apps { min-height: 0; padding-block: 3rem; }
  .home-zone--apps::before { inset: .5rem; }
  .bumper-field { display: grid; height: auto; grid-template-columns: 1fr; gap: 2.6rem; }
  .bumper-assembly { position: relative; inset: auto; width: 100%; transform: none; }
  .bumper-assembly--2 { left: auto; }
  .bumper-cap { width: min(66vw,240px); }
  .bumper-rail { display: none; }
  .rollover-lane,
  .rollover-lane:nth-child(n) { width: 100%; margin-left: 0; grid-template-columns: auto minmax(0,1fr) auto; min-height: 62px; gap: .6rem; padding-right: .7rem; }
  .rollover-date { display: none; }
  .rollover-lamp { width: 38px; }
  .service-manual,
  .operator-sheet,
  .book-score-sheet,
  .article--ticket,
  .error-page { padding: 2.5rem 1rem; }
  .manual-plate,
  .article-header { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 3rem; padding: 1.2rem; box-shadow: 7px 7px 0 var(--ink); }
  .manual-index { flex-direction: row; justify-content: space-between; }
  .manual-badge { width: 62px; }
  .manual-badge .monogram { width: 34px; height: 34px; }
  .article-title { font-size: clamp(2.5rem,14vw,5rem); }
  .manual-body { grid-template-columns: 1fr; }
  .manual-rail { display: none; }
  .app-machine-header { grid-template-columns: 1fr; padding: 1.3rem; box-shadow: 7px 7px 0 var(--ink); }
  .app-medallion { width: 150px; margin: 0 auto; }
  .app-title-panel { text-align: center; }
  .app-spec-panel { grid-column: auto; grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card + .feature-card { border-left: 0; border-top: 4px solid var(--ink); }
  .screenshot-strip { width: 100vw; margin-block: 2rem 3rem; padding: 1.5rem; }
  .stack-grid { grid-template-columns: 1fr; }
  .book-score-header { grid-template-columns: 110px minmax(0,1fr); padding: 1rem; box-shadow: 7px 7px 0 var(--red); }
  .book-score-cover { min-height: 150px; }
  .book-score-title .article-title { font-size: clamp(2.1rem,10vw,4rem); }
  .book-score-meta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .pull-quote { margin-bottom: 3rem; box-shadow: 6px 6px 0 var(--ink); }
  .book-score-body { grid-template-columns: 1fr; }
  .score-margin { display: none; }
  .app-showcase { flex-direction: column; min-height: 0; padding-block: 3rem; }
  .app-showcase-card { width: min(72vw,260px); }
  .app-showcase-card:nth-child(2) { margin-top: 0; margin-left: 3rem; }
  .app-showcase-card:nth-child(3) { margin-left: -2rem; }
  .philosophy-item { grid-template-columns: 1fr; gap: .4rem; }
  .post-index-row { grid-template-columns: 1fr; gap: .35rem; }
  .reading-stats { grid-template-columns: 1fr 1fr; }
  .stat-item + .stat-item { border-left: 3px solid var(--ink); }
  .stat-item:nth-child(3) { border-top: 3px solid var(--ink); border-left: 0; }
  .stat-item:nth-child(4) { border-top: 3px solid var(--ink); }
  .book-line { grid-template-columns: auto 44px minmax(0,1fr) auto; gap: .6rem; padding-right: .6rem; }
  .book-line:nth-child(3n+2) { margin-left: 0; }
  .book-line-cover { width: 40px; height: 54px; }
  .book-line-rating { grid-column: 3; align-items: flex-start; }
  .book-target-arrow { grid-column: 4; grid-row: 1 / span 2; }
  .currently-reading { grid-template-columns: 1fr; }
  .archive-today { grid-template-columns: 1fr; }
  .archive-marquee { border-right: 0; border-bottom: 5px solid var(--ink); }
  .archive-gallery { grid-template-columns: 1fr; }
  .archive-card:nth-child(even) { margin-top: 0; }
  .archive-controls { align-items: stretch; flex-direction: column; }
  .archive-surprise { justify-content: center; }
  .apron-instructions { grid-template-columns: 1fr; gap: .5rem; }
  .apron-service-panel { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal-zone { opacity: 1; transform: none; }
  .pinball-ball { display: none; }
}

@media print {
  .site-banner,
  .site-header,
  .site-footer,
  .cabinet-rail,
  .pinball-ball { display: none !important; }
  .cabinet-shell,
  .cabinet-main,
  .playfield-frame,
  .playfield-surface { border: 0; color: #000; background: #fff; box-shadow: none; }
}