/* ==== 00-base.css ==== */
/* QUANTUM MECHANIC — THE COSMIC GARAGE. Base: tokens, fonts, grounds, type, kit (plate, wo, stamp, stripe, neon, pill, rnd),
   header + drawer chrome, toast, .foot structure, .e404. Parts never restyle these; they use their own prefixes. */
:root {
  --void: #070B1A; --bay: #0D1530; --steel: #18244A; --steel-hi: #22315F;
  --chrome-hi: #EEF3FA; --chrome: #C3CCDC; --chrome-lo: #8D9AB6;
  --glow: #62B6FF; --glow-hi: #B5DFFF; --plasma: #2E6BFF;
  --paper: #F1EEE6; --carbon-sheet: #D9E3F7; --ink: #0B1024; --carbon: #2741A6; --rule: #B9C1D3; --rubber: #14161C;
  --spark: #FF7A1A;            /* BUY ONLY: fills Buy on PumpSwap pills, nothing else */
  --ring: var(--glow-hi);
  --head: 'Russo One', 'Arial Black', system-ui, sans-serif;
  --lab: 'Goldman', 'Arial Narrow', system-ui, sans-serif;
  --sans: 'Maven Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --marker: 'Gaegu', 'Comic Sans MS', cursive;
  --m: 32px; --nav: 64px;
  --h1: clamp(44px, 6.6vw, 104px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}
@media (max-width: 699px) { :root { --m: 16px; --nav: 56px; } }
@media (max-width: 380px) { :root { --h1: 38px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 8px); background-color: var(--void); }
html.rm { scroll-behavior: auto; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background-color: var(--void); color: var(--chrome-hi); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
body.lock { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 8px; background-color: var(--chrome-hi); color: var(--ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- grounds ---------- */
.gd-void { background-color: var(--void); color: var(--chrome-hi); --em: var(--glow); --ring: var(--glow-hi); --stamp-c: var(--glow);
  background-image: radial-gradient(1px 1px at 20px 30px, rgba(238, 243, 250, .55) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 130px 90px, rgba(181, 223, 255, .45) 50%, transparent 51%);
  background-size: 170px 150px, 260px 230px; }
.gd-bay { background-color: var(--bay); color: var(--chrome-hi); --em: var(--glow); --ring: var(--glow-hi); --stamp-c: var(--glow);
  background-image: linear-gradient(var(--steel-hi) 1px, transparent 1px), linear-gradient(90deg, var(--steel-hi) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px; }
.gd-steel { background-color: var(--steel); color: var(--chrome-hi); --em: var(--glow-hi); --ring: var(--glow-hi); --stamp-c: var(--glow);
  background-image: radial-gradient(circle at 14px 14px, rgba(7, 11, 26, .4) 2.5px, transparent 3px); background-size: 28px 28px; }
.gd-paper { background-color: var(--paper); color: var(--ink); --em: var(--carbon); --ring: var(--carbon); --stamp-c: var(--carbon); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--m); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 699px) { .g12 { grid-template-columns: minmax(0, 1fr); } .g12 > * { grid-column: 1 / -1 !important; } }
.sec { position: relative; padding: 112px 0; }
@media (max-width: 699px) { .sec { padding: 72px 0; } }

/* ---------- type (display rule: every display size = min(clamp, h1 * k <= .86)) ---------- */
h1 { font: 400 var(--h1)/.98 var(--head); letter-spacing: -.005em; color: var(--chrome-hi); }
h2 { font: 400 min(clamp(32px, 4.4vw, 66px), calc(var(--h1) * .86))/1.04 var(--head); letter-spacing: -.005em; text-wrap: balance; }
h2 em { font-style: normal; color: var(--em); }
h3 { font: 400 min(clamp(20px, 1.9vw, 26px), calc(var(--h1) * .6))/1.15 var(--head); }
.lbl { font: 700 13px/1.3 var(--lab); letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-lo); }
.gd-steel .lbl { color: var(--chrome); }
.gd-paper .lbl { color: var(--carbon); }
.lead { font-size: 20px; line-height: 1.5; color: var(--chrome); max-width: 62ch; }
.gd-paper .lead { color: var(--ink); }
.cap { font-size: 15px; line-height: 1.45; color: var(--chrome-lo); }
.gd-steel .cap { color: var(--chrome); }
.gd-paper .cap { color: rgba(11, 16, 36, .75); }
.fine { font-size: 14px; line-height: 1.5; color: var(--chrome-lo); }
.gd-steel .fine { color: var(--chrome); }
.gd-paper .fine { color: rgba(11, 16, 36, .75); }
.marker { font: 700 22px/1.15 var(--marker); color: var(--glow-hi); }
.gd-paper .marker, .wo .marker { color: var(--carbon); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- .plate: the photo plate ---------- */
.plate { margin: 0; padding: 10px; background-color: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
.plate img { width: 100%; border-radius: 2px; }
.plate .cap { margin-top: 10px; padding: 0 4px 2px; color: rgba(11, 16, 36, .75); }
.plate.dark { padding: 10px; background-color: var(--bay); border-color: var(--steel-hi); border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(46, 107, 255, .4); }
.plate.dark img { border-radius: 5px; }
.plate.dark .cap { color: var(--chrome); }

/* ---------- .wo: THE WORK ORDER (clip + paper sheet + carbon copy peeking 6px down-right) ---------- */
.wo { position: relative; width: 100%; max-width: 520px; margin-top: 14px; padding: 22px 20px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 12px;
  background-color: var(--paper); color: var(--ink); border-radius: 4px;
  background-image: linear-gradient(90deg, transparent 0, transparent 10px, rgba(39, 65, 166, .22) 10px, rgba(39, 65, 166, .22) 11px, transparent 11px);
  box-shadow: 6px 6px 0 var(--carbon-sheet), 6px 6px 0 1px rgba(39, 65, 166, .25), 0 18px 40px rgba(0, 0, 0, .45); }
.wo::before { content: ''; position: absolute; left: 50%; top: -11px; width: 120px; height: 22px; margin-left: -60px; border-radius: 8px;
  background-color: var(--rubber); border: 3px solid var(--chrome); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 6px rgba(0, 0, 0, .4); }
.wo > * { grid-column: 1 / -1; }
.wo-hd { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 700 14px/1.2 var(--lab); letter-spacing: .12em; text-transform: uppercase; }
.wo-hd span:last-child { color: var(--carbon); }
.wo-row { display: flex; align-items: baseline; gap: 10px; min-height: 34px; padding: 4px 0 2px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.wo-row b, .wo-addr b { flex: none; font: 700 13px/1.3 var(--lab); letter-spacing: .1em; text-transform: uppercase; color: var(--carbon); }
.wo-row .marker { font-size: 24px; line-height: 1; }
.wo-addr { padding: 6px 0 8px; border-bottom: 1px solid var(--rule); }
.wo-addr b { display: block; margin-bottom: 2px; }
.wo .ca { font: 500 15px/1.4 var(--sans); color: var(--ink); word-break: normal; overflow-wrap: anywhere; }
.wo[data-prelaunch] .ca { color: var(--carbon); }
.wo .pill { grid-column: 1; margin-top: 10px; }
.wo-ft { grid-column: 2; margin-top: 10px; text-align: right; font: 700 13px/1.3 var(--sans); letter-spacing: .04em; color: var(--carbon); }
@media (max-width: 699px) {
  .wo { padding: 18px 14px 12px; background-image: none; }
  .wo-more { display: none; }
  .wo-row { min-height: 30px; padding: 2px 0 0; }
  .wo-addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 4px 0 6px; }
  .wo-addr b { display: inline; margin: 0; }
  .wo .pill { margin-top: 8px; }
  .wo-ft { margin-top: 8px; }
}
@media (max-width: 380px) { .wo-ft { font-size: 13px; letter-spacing: .02em; } }

/* ---------- .stamp, .stripe, .neon ---------- */
.stamp { display: inline-block; padding: 6px 14px; border: 3px double var(--stamp-c); border-radius: 6px; color: var(--stamp-c); font: 700 20px/1.1 var(--lab); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); }
.stripe { height: 18px; background-image: repeating-linear-gradient(45deg, var(--steel-hi) 0, var(--steel-hi) 14px, var(--rubber) 14px, var(--rubber) 28px); }
.neon { display: inline-block; padding: .08em .3em .02em; border: 3px solid var(--glow-hi); border-radius: .22em; font: 400 min(clamp(30px, 4vw, 60px), calc(var(--h1) * .7))/1 var(--head); letter-spacing: .08em; color: var(--glow-hi);
  text-shadow: 0 0 4px var(--plasma), 0 0 14px var(--plasma), 0 0 28px rgba(46, 107, 255, .7);
  box-shadow: 0 0 10px rgba(46, 107, 255, .7), inset 0 0 10px rgba(46, 107, 255, .5); user-select: none; }
.neon.dim { color: var(--chrome-lo); border-color: var(--chrome-lo); text-shadow: 0 0 6px rgba(46, 107, 255, .35); box-shadow: 0 0 6px rgba(46, 107, 255, .25); }

/* ---------- pills + round buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; font: 700 17px/1.1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform .15s var(--ease); }
.pill:active { transform: translateY(1px); }
.pill .mk, .rnd .mk { width: 20px; height: 20px; flex: none; }
.pill.buy { background-color: var(--spark); color: var(--void); box-shadow: 0 6px 0 rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .15); }
.pill.buy:hover { box-shadow: 0 6px 0 rgba(0, 0, 0, .28), 0 0 0 3px rgba(181, 223, 255, .35); }
.pill.ink { background-color: var(--ink); color: var(--paper); }
.pill.ink:hover { background-color: var(--carbon); }
.pill.line { border: 1.5px solid var(--ink); color: var(--ink); background-color: transparent; }
.pill.line-l { border: 1.5px solid var(--chrome); color: var(--chrome-hi); background-color: transparent; }
.pill.line-l:hover { border-color: var(--glow-hi); }
.pill.sm { min-height: 44px; padding: 0 18px; gap: 8px; font-size: 15px; }
.rnd { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid var(--chrome); color: var(--chrome-hi); background-color: transparent; text-decoration: none; }
.gd-paper .rnd { border-color: var(--ink); color: var(--ink); }
.rnd:hover { border-color: var(--glow-hi); }
.rnd.lg { width: 56px; height: 56px; }
.mk.inv { filter: invert(1); }

/* ---------- header + drawer (chrome, lead only) ---------- */
.hd { position: sticky; top: 0; z-index: 50; height: var(--nav); background-color: rgba(7, 11, 26, .94); border-bottom: 1px solid var(--steel-hi); color: var(--chrome-hi); }
.hd-in { height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--m); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.hd-brand img { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--chrome); box-shadow: 0 0 0 1px var(--chrome-lo), 0 0 12px rgba(46, 107, 255, .55); }
.hd-brand b { font: 400 18px/1 var(--head); white-space: nowrap; }
.hd-r { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--chrome); color: var(--chrome-hi); font: 700 15px/1 var(--sans); }
.menu-btn:hover { border-color: var(--glow-hi); }
@media (max-width: 899px) { .hd .hd-buy { display: none !important; } }
@media (max-width: 380px) { .hd-brand b { font-size: 16px; } .menu-btn { padding: 0 12px; } }
.hd-scrim { position: fixed; inset: 0; z-index: 59; background-color: rgba(7, 11, 26, .72); }
.hd-drawer { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(420px, 100%); overflow: hidden auto; overscroll-behavior: contain; padding: 0 24px 32px;
  background-color: var(--bay); color: var(--chrome-hi); border-left: 1px solid var(--steel-hi); box-shadow: -20px 0 50px rgba(0, 0, 0, .5); }
.hd-drawer > .stripe { margin: 0 -24px; }
.hd-dhd { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.hd-drawer nav { display: grid; }
.hd-drawer nav a { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--steel-hi); text-decoration: none; font: 400 22px/1.15 var(--head); }
.hd-drawer nav a b { flex: none; width: 34px; font: 700 13px/1 var(--lab); letter-spacing: .12em; color: var(--glow); }
.hd-drawer nav a:hover { color: var(--glow-hi); }
.hd-dft { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.hd-dft .buy { flex: 1 1 100%; }
html.js:not(.rm) .hd-drawer:not([hidden]) { animation: hd-in .28s var(--ease) 1; }
@keyframes hd-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 10px; background-color: var(--chrome-hi); color: var(--ink);
  font: 700 15px/1.4 var(--sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
html.rm .toast { transition: opacity .2s; transform: translate(-50%, 0); }

/* ---------- footer structure (Part B styles contents with ft-) ---------- */
.foot { position: relative; padding: 64px 0 48px; border-top: 1px solid var(--steel-hi); }

/* ---------- 404 page (site/404.html: body.gd-void > main.wrap.e404) ---------- */
.e404 { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 20px; max-width: 760px; margin: 0 auto; }
.e404 img { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--chrome); }
.e404 h1 { font: 400 min(clamp(36px, 5vw, 64px), calc(var(--h1) * .86))/1.04 var(--head); }

@media (prefers-reduced-motion: reduce) { html.rm *, html.rm *::before, html.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ==== 10-hero.css ==== */
/* #top — Bay 1: the shiba's face in a chrome porthole, the neon OPEN sign, the work order. Prefix tp-. */
.tp { padding: 36px 0 0; overflow: hidden; }
.tp-in { align-items: center; row-gap: 0; }
.tp-art { grid-column: 7 / 13; grid-row: 1; position: relative; justify-self: center; width: min(600px, 100%); margin-top: 2%; }
.tp-copy { grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 1; }
.tp-port { position: relative; aspect-ratio: 1; border-radius: 50%;
  background-image: conic-gradient(from 20deg, var(--chrome-hi), var(--chrome-lo) 18%, var(--chrome) 33%, var(--chrome-hi) 48%, var(--chrome-lo) 66%, var(--chrome) 82%, var(--chrome-hi));
  box-shadow: 0 0 0 1px var(--chrome-lo), 0 30px 60px rgba(0, 0, 0, .55), 0 0 90px rgba(46, 107, 255, .35); }
.tp-port::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(46, 107, 255, .55); box-shadow: 0 0 28px rgba(46, 107, 255, .45); pointer-events: none; }
.tp-port img { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 50%; object-fit: cover; background-color: var(--void); box-shadow: 0 0 0 2px var(--plasma); }
.tp-bolts, .tp-bolts i { position: absolute; inset: 0; }
.tp-bolts i::before { content: ''; position: absolute; left: 50%; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background-image: radial-gradient(circle at 35% 35%, var(--chrome-hi), var(--chrome-lo) 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.tp-bolts i:nth-child(2) { transform: rotate(45deg); }
.tp-bolts i:nth-child(3) { transform: rotate(90deg); }
.tp-bolts i:nth-child(4) { transform: rotate(135deg); }
.tp-bolts i:nth-child(5) { transform: rotate(180deg); }
.tp-bolts i:nth-child(6) { transform: rotate(225deg); }
.tp-bolts i:nth-child(7) { transform: rotate(270deg); }
.tp-bolts i:nth-child(8) { transform: rotate(315deg); }
.tp-neon { position: absolute; z-index: 2; left: -2%; top: 2%; transform: rotate(-4deg); }

.tp-lbl { color: var(--glow); }
.tp-h1 { margin-top: 14px; }
.tp-h1 span { display: block; }
.tp-beat { margin-top: 18px; font: 400 min(clamp(22px, 2.4vw, 36px), calc(var(--h1) * .42))/1.15 var(--head); color: var(--chrome-hi); }
.tp-beat span { display: block; }
.tp-beat .tp-b2 { color: var(--glow); }
.tp-sub { margin-top: 14px; max-width: 34ch; font-size: 19px; line-height: 1.5; color: var(--chrome); }
.tp .wo { margin-top: 26px; }
.tp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.tp-fine { margin-top: 14px; }
.tp-stripe { margin-top: 64px; }

@media (min-width: 700px) and (max-width: 999px) {
  .tp-art { grid-column: 1 / -1; grid-row: auto; width: 420px; }
  .tp-copy { grid-column: 1 / -1; grid-row: auto; margin-top: 24px; }
}
@media (max-width: 699px) {
  .tp { padding-top: 12px; }
  .tp-art, .tp-copy { grid-row: auto; }
  .tp-art { width: 210px; margin-top: 0; }
  .tp-neon { left: -24px; top: -2px; font-size: 22px; border-width: 2px; }
  .tp-copy { display: flex; flex-direction: column; align-items: stretch; margin-top: 8px; text-align: center; }
  .tp-h1 { margin-top: 0; }
  .tp-beat { margin-top: 4px; font-size: 20px; line-height: 1.25; }
  .tp-sub { margin: 10px auto 0; font-size: 16px; line-height: 1.45; }
  .tp .wo { margin: 22px auto 0; text-align: left; }
  .tp-acts { margin-top: 10px; gap: 8px; }
  .tp-acts .buy { flex: 1 1 100%; }
  .tp-acts .line-l { flex: 1 1 auto; }
  .tp-lbl { order: 9; margin-top: 18px; }
  .tp-fine { order: 10; margin-top: 8px; }
  .tp-stripe { margin-top: 40px; }
}
@media (max-width: 380px) {
  .tp-art { width: 150px; }
  .tp-neon { left: -30px; font-size: 18px; }
  .tp-sub { order: 8; margin-top: 18px; }
  .tp { padding-top: 8px; }
  .tp-copy { margin-top: 4px; }
  .tp-h1 { line-height: .94; }
  .tp-beat { line-height: 1.15; }
  .tp .wo { margin-top: 12px; padding: 14px 12px 8px; }
  .tp .wo-row { min-height: 28px; }
  .tp .wo-addr { padding: 3px 0 4px; }
  .tp .wo .ca { font-size: 14px; line-height: 1.35; }
  .tp .wo .pill, .tp .wo-ft { margin-top: 6px; }
  .tp-acts { margin-top: 8px; }
}

/* motion (only under html.js:not(.rm); loops pause off screen via .tp-off and document.hidden via .tp-off too) */
html.js:not(.rm) .tp-neon { animation: tp-flick .9s steps(1, end) 1 both, tp-hum 6s ease-in-out .9s infinite; }
html.js:not(.rm) .tp-port::before { animation: tp-pulse 5s ease-in-out infinite; }
html.js:not(.rm) .tp .wo { animation: tp-up .7s var(--ease) .2s 1 both; }
html.js:not(.rm) .tp.tp-off .tp-neon, html.js:not(.rm) .tp.tp-off .tp-port::before { animation-play-state: paused; }
@keyframes tp-flick { 0% { opacity: .15; } 15% { opacity: 1; } 25% { opacity: .3; } 40% { opacity: 1; } 55% { opacity: .5; } 70%, 100% { opacity: 1; } }
@keyframes tp-hum { 0%, 100% { opacity: 1; } 50% { opacity: .92; } }
@keyframes tp-pulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.03); opacity: 1; } }
@keyframes tp-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==== s01-02.css ==== */
/* ===== Part A: #board (jb-), #orbit (ob-), #moon (mn-) ===== */

/* ---------- #board: the pegboard ---------- */
.jb-top { align-items: end; }
.jb-intro { grid-column: 1 / 9; grid-row: 1; }
.jb-intro h2 { margin-top: 12px; }
.jb-intro .lead { margin-top: 20px; }
.jb-wide { grid-column: 1 / 9; grid-row: 2; margin-top: 16px; }
.jb-sq { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; }

.jb-cards { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.jb-cards li { position: relative; padding-top: 24px; }
/* the chrome peg + its hook */
.jb-cards li::before { content: ''; position: absolute; z-index: 2; top: 0; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background-image: radial-gradient(circle at 35% 35%, var(--chrome-hi) 0, var(--chrome) 45%, var(--chrome-lo) 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, .5); }
.jb-cards li::after { content: ''; position: absolute; z-index: 1; top: 12px; left: 50%; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background-color: var(--chrome-lo); }
.jb-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; height: 100%; min-height: 168px; padding: 30px 18px 16px; border-radius: 6px;
  background-color: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 10px 22px rgba(0, 0, 0, .35); transform-origin: 50% -14px; transition: transform .2s var(--ease); }
/* the punched hole the hook goes through */
.jb-card::before { content: ''; position: absolute; top: 10px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background-color: var(--steel); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.jb-hd { font: 700 15px/1.3 var(--lab); letter-spacing: .06em; color: var(--carbon); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.jb-tx { font-size: 17px; line-height: 1.4; }
.jb-card .ic { justify-self: end; color: var(--carbon); }
.jb-card:hover { transform: translateY(-3px); }
.jb-card:hover .jb-hd { color: var(--ink); }
.jb-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

@media (max-width: 1099px) and (min-width: 700px) {
  .jb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .jb-intro, .jb-wide, .jb-sq { grid-row: auto; }
  .jb-wide { margin-top: 8px; }
  .jb-sq { max-width: 280px; }
  .jb-cards { margin-top: 44px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .jb-cards li { padding-top: 20px; }
  .jb-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 12px; min-height: 0; padding: 26px 16px 14px; }
  .jb-hd, .jb-tx { grid-column: 1; }
  .jb-card .ic { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* ---------- #orbit: Job 1 ---------- */
.ob-grid { align-items: center; }
.ob-text { grid-column: 1 / 6; }
.ob-pic { grid-column: 6 / 13; position: relative; }
.ob-h { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.ob-h h2 { flex: 0 1 auto; min-width: 0; }
.ob-orb { flex: none; width: 120px; height: 64px; overflow: visible; }
.ob-el { fill: none; stroke: var(--glow); stroke-width: 2.5; stroke-dasharray: 7 7; stroke-linecap: round; }
.ob-body { margin-top: 20px; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--chrome); }
.ob-steps { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: ob; max-width: 440px; }
.ob-steps li { counter-increment: ob; display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--steel-hi); font-size: 18px; line-height: 1.35; color: var(--chrome-hi); }
.ob-steps li::before { content: counter(ob); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background-image: radial-gradient(circle at 35% 35%, var(--chrome-hi) 0, var(--chrome) 50%, var(--chrome-lo) 100%); color: var(--void); font: 700 15px/1 var(--lab); }
.ob-st { position: absolute; z-index: 2; top: -22px; right: -12px; padding: 8px 10px; border-radius: 10px; background-color: var(--void); }
@media (max-width: 699px) {
  .ob-pic { margin-top: 16px; }
  .ob-orb { width: 84px; height: 46px; }
  .ob-st { top: -20px; right: 6px; }
}

/* ---------- #moon: Job 2 ---------- */
.mn-grid { align-items: center; }
.mn-text { grid-column: 8 / 13; grid-row: 1; }
.mn-pic { grid-column: 1 / 8; grid-row: 1; position: relative; }
.mn-text h2 { margin-top: 12px; }
.mn-body { margin-top: 20px; max-width: 46ch; font-size: 18px; line-height: 1.55; }
.mn-note { display: inline-block; margin-top: 22px; padding: 0 4px 4px; border-bottom: 2px dashed var(--rule); font-size: min(clamp(24px, 2.4vw, 32px), calc(var(--h1) * .6)); transform: rotate(-2deg); }
.mn-st { position: absolute; z-index: 2; top: -22px; left: -12px; padding: 8px 10px; border-radius: 10px; background-color: var(--paper); }
@media (max-width: 699px) {
  .mn-text, .mn-pic { grid-row: auto; }
  .mn-pic { margin-top: 16px; }
  .mn-st { top: -20px; left: auto; right: 6px; }
}

/* ---------- motion (html.js:not(.rm) only; loops pause off screen / hidden tab via .ob-off) ---------- */
html.js:not(.rm) .jb-cards:not(.jb-in) .jb-card { opacity: 0; }
html.js:not(.rm) .jb-cards.jb-in .jb-card { animation: jb-swing .7s var(--ease) backwards; }
html.js:not(.rm) .jb-cards.jb-in li:nth-child(2) .jb-card { animation-delay: 60ms; }
html.js:not(.rm) .jb-cards.jb-in li:nth-child(3) .jb-card { animation-delay: 120ms; }
html.js:not(.rm) .jb-cards.jb-in li:nth-child(4) .jb-card { animation-delay: 180ms; }
html.js:not(.rm) .jb-cards.jb-in li:nth-child(5) .jb-card { animation-delay: 240ms; }
@keyframes jb-swing { 0% { opacity: 0; transform: rotate(-3deg); } 60% { opacity: 1; transform: rotate(1deg); } 100% { opacity: 1; transform: none; } }

html.js:not(.rm) .ob-orb { animation: ob-turn 14s linear infinite; }
html.js:not(.rm) #orbit.ob-off .ob-orb { animation-play-state: paused; }
@keyframes ob-turn { to { transform: rotate(360deg); } }

html.js:not(.rm) #orbit:not(.ob-in) .ob-st, html.js:not(.rm) #moon:not(.mn-in) .mn-st { opacity: 0; }
html.js:not(.rm) #orbit.ob-in .ob-st { animation: ob-thump .45s cubic-bezier(.2, 1.4, .4, 1) .3s backwards; }
html.js:not(.rm) #moon.mn-in .mn-st { animation: mn-thump .45s cubic-bezier(.2, 1.4, .4, 1) .3s backwards; }
@keyframes ob-thump { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: none; } }
@keyframes mn-thump { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: none; } }

/* ==== s03-04.css ==== */
/* Part B: #toolbox (tb-), #spark (sp-), #nap (np-), #kit (kt-), footer contents (ft-). Kit classes are never restyled here. */

/* #toolbox */
.tb-in { align-items: center; }
.tb-copy { grid-column: 1 / span 6; }
.tb-art { grid-column: 8 / span 5; width: 100%; max-width: 520px; justify-self: end; }
.tb-body { margin-top: 18px; }
.tb-chips { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; max-width: 520px; }
.tb-chip { position: relative; padding: 14px 18px 14px 48px; background-color: var(--steel); border: 1px solid var(--steel-hi); border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .28); }
.tb-chip::before { content: ""; position: absolute; left: 18px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--void); box-shadow: inset 0 0 0 2px var(--chrome-lo); }
.tb-ch { display: block; font: 700 15px/1.2 var(--lab); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
.tb-chip span { display: block; margin-top: 4px; font-size: 17px; line-height: 1.4; color: var(--chrome); }

/* #spark */
.sp-head { max-width: 760px; }
.sp-head .lead { margin-top: 18px; }
.sp-in { margin-top: 44px; align-items: start; }
.sp-art { grid-column: 1 / span 5; width: 100%; max-width: 480px; }
.sp-side { grid-column: 7 / span 6; min-width: 0; }
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.sp-step { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background-color: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; font-size: 18px; font-weight: 500; line-height: 1.35; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.sp-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--carbon); border-radius: 50%; font: 700 17px/1 var(--lab); color: var(--carbon); }
.sp-note { display: inline-block; margin-top: 20px; transform: rotate(-2deg); }
.sp-side .wo { margin-top: 32px; }
.sp-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* #nap */
.np { overflow: hidden; }
.np-dust { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(circle, rgba(181, 223, 255, .9) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(98, 182, 255, .7) 0 1.2px, transparent 2px);
  background-size: 97px 89px, 151px 137px; background-position: 13px 21px, 61px 47px; }
.np-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.np-neon { margin: 16px 0 24px; }
.np-body { margin: 18px auto 0; }
.np-art { width: 100%; max-width: 640px; margin-top: 40px; border-radius: 24px; }
.np-art img { border-radius: 16px; }
.np-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* #kit */
.kt h2 { margin-top: 6px; }
.kt-tiles { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kt-tile { display: block; height: 100%; overflow: hidden; background-color: var(--steel); border: 1px solid var(--steel-hi); border-radius: 12px; color: var(--chrome-hi); text-decoration: none; }
.kt-tile:hover { border-color: var(--glow); }
.kt-tile img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kt-lb { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; font: 700 17px/1.2 var(--sans); }
.kt-lb .ic { flex: none; color: var(--glow); }
.kt-share { margin-top: 28px; }

/* footer contents */
.ft-in { display: grid; gap: 18px; justify-items: start; }
.ft-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--chrome-hi); text-decoration: none; }
.ft-brand img { border-radius: 50%; border: 2px solid var(--chrome); }
.ft-brand b { font: 400 20px/1.1 var(--head); }
.ft-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--glow); font-weight: 700; font-size: 16px; text-decoration: none; }

@media (max-width: 999px) {
  .tb-copy { grid-column: 1 / span 7; }
  .tb-art { grid-column: 8 / span 5; }
  .sp-art { grid-column: 1 / span 5; }
  .sp-side { grid-column: 6 / span 7; }
}
@media (max-width: 699px) {
  .tb-art, .sp-art { justify-self: stretch; max-width: none; }
  .tb-chips { margin-top: 22px; }
  .sp-in { margin-top: 28px; gap: 28px; }
  .sp-step { font-size: 17px; }
  .np-art { margin-top: 28px; border-radius: 18px; }
  .np-art img { border-radius: 10px; }
  .np-acts .pill { flex: 1 1 100%; }
  .kt-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 26px; }
  .kt-tile { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
  .kt-tile img { width: 104px; height: 100%; min-height: 72px; aspect-ratio: auto; }
}

/* motion (only under html.js:not(.rm); entrances once; the #nap star twinkle pauses off screen / tab hidden via .np-off) */
html.js:not(.rm) .tb-chip { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js:not(.rm) .tb-chip:nth-child(2) { transition-delay: .08s; }
html.js:not(.rm) .tb-chip:nth-child(3) { transition-delay: .16s; }
html.js:not(.rm) .tb:not(.tb-go) .tb-chip { opacity: 0; transform: translateY(18px); }
html.js:not(.rm) .sp-step { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js:not(.rm) .sp-step:nth-child(2) { transition-delay: .08s; }
html.js:not(.rm) .sp-step:nth-child(3) { transition-delay: .16s; }
html.js:not(.rm) .sp:not(.sp-go) .sp-step { opacity: 0; transform: translateX(-18px); }
html.js:not(.rm) .np-neon { transition: opacity 1.6s ease-in; }
html.js:not(.rm) .np:not(.np-go) .np-neon { opacity: 0; }
html.js:not(.rm) .np-dust { animation: np-tw 8s ease-in-out infinite; }
html.js:not(.rm) .np.np-off .np-dust { animation-play-state: paused; }
@keyframes np-tw { 0%, 100% { opacity: .7; } 50% { opacity: .3; } }

/* ==== s05-06.css ==== */