@font-face { font-family: "JD LED5"; src: url(../../assets/fonts/jd_led5.ttf) format("truetype"); font-display: swap; }

:root {
  --bg: #000000;
  --fg: #FFFFFF;
  --fg2: #A6A6A6;
  --line: rgba(255, 255, 255, .14);
  --surface: #0F0F0F;
  --accent: #6CC5D6;
  --display: "JD LED5", monospace;
  --display-weight: 400;
  --display-track: .01em;
  --text: "Sora", system-ui, sans-serif;
  --top-solid: rgba(0, 0, 0, .86);
  --off: #161616;
  --spectrum: linear-gradient(90deg, #2974BA, #6CC5D6 7%, #51B264 16%, #D5BC12 23%, #EC6616 30%, #7F328A 38%, #4F2784 45%, #8A1F73 56%, #BF0B72 67%, #C8161D 76%, #D07113);
}
body { font-weight: 300; }
.led { font-family: "JD LED5", monospace; }
.rail a span { background: #111; color: #fff; }
.top .right a.kit { border-bottom: 2px solid transparent; border-image: var(--spectrum) 1; }
.toc a strong, .points li b, .label, .parts li b, .arch .node b, .files b, .spec td:first-child, .tree b { font-weight: 600; }
.seg button[aria-pressed="true"] { background: #fff; color: #000; }
.button { background: #fff; color: #000; }

/* chapter motif: the spectrum line scans across */
.ch-open .motif { height: 2px; background: var(--spectrum); }
.ch.tight { padding-top: 10vh; }
.stage.dark, .stage.card.dark { background: #000; box-shadow: inset 0 0 0 1px var(--line); }
.anatomy .stage, .measure, .minsize .stage { background: #000; box-shadow: inset 0 0 0 1px var(--line); }
.measure { color: #fff; }

/* ---------- cover: the LED field ---------- */
.hero-pin { height: 100vh; height: 100svh; position: relative; overflow: hidden;
  background: radial-gradient(circle at 4.5px 4.5px, var(--off) 1.7px, transparent 2.2px) 0 0 / 9px 9px, #000; }
#dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-fallback { display: none; }
.purpose { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); text-align: center; font-family: "JD LED5", monospace; font-weight: 400; font-size: clamp(40px, 7.4vw, 124px); line-height: 1.05; opacity: 0; }
.purpose .px { opacity: .08; }
.cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font-size: 14px; color: var(--fg2); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(#6CC5D6, transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 01 ---------- */
.essence { margin-top: 18px; font-family: "JD LED5", monospace; font-size: clamp(40px, 5.4vw, 88px); line-height: 1.05; }
.lines { display: grid; gap: 0; }
.lines div { padding: 16px 0; border-top: 1px solid var(--line); }
.lines dt { font-family: "JD LED5", monospace; font-size: 22px; }
.lines dd { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--fg2); }

/* ---------- 02 ---------- */
.motion-logo { width: 76%; aspect-ratio: 913 / 179; }

/* ---------- 05: the columns light up ---------- */
.spectrum-pin { min-height: 100vh; min-height: 100svh; padding: 110px var(--gutter) 8vh; display: flex; flex-direction: column; }
.columns { flex: 1; min-height: 300px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.col { display: flex; flex-direction: column; text-align: left; }
.col .led { display: block; flex: 1; min-height: 200px; border-radius: 3px;
  background: radial-gradient(circle at 4px 4px, var(--c) 2.6px, transparent 3.1px) 0 0 / 8px 8px, #0A0A0A; transition: filter .3s; }
.col .led.lit { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 55%, transparent)); }
.col:hover .led, .col:focus-visible .led { filter: drop-shadow(0 0 14px var(--c)) brightness(1.15); }
.col strong { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; }
.col .hex { display: block; margin-top: 2px; font-size: 12px; color: var(--fg2); font-variant-numeric: tabular-nums; }

/* ---------- 06 ---------- */
.type-head { align-items: end; }
.aa { font-family: "JD LED5", monospace; font-size: clamp(160px, 24vw, 380px); line-height: .8; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.alphabet { margin-top: 28px; font-family: "JD LED5", monospace; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.35; word-break: break-all; }
.tester-out { font-family: "JD LED5", monospace; caret-color: #6CC5D6; }
.tester-out[data-weight="sora"] { font-family: "Sora", sans-serif; font-weight: 600; letter-spacing: -.02em; }

/* ---------- 07 ---------- */
.mono { display: block; width: 70%; aspect-ratio: 913 / 179; background: var(--c); -webkit-mask: url(../../assets/logos/luminatech-white.svg) center / contain no-repeat; mask: url(../../assets/logos/luminatech-white.svg) center / contain no-repeat; }
.retyped { font-family: "Sora", sans-serif; font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 08 ---------- */
.led-field { min-height: 300px; border-radius: var(--radius); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line);
  background: radial-gradient(circle at 4.5px 4.5px, #1C1C1C 1.8px, transparent 2.3px) 0 0 / 9px 9px, #000; }
.led-field span { font-family: "JD LED5", monospace; font-size: clamp(36px, 4vw, 64px); }
.spec-line-demo { display: grid; gap: 14px; padding: 34px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.spec-line-demo p { font-family: "JD LED5", monospace; font-size: 22px; }
.spec-line-demo i { display: block; height: 2px; background: var(--spectrum); }
.pixel-icons figure svg { width: 64px; height: 64px; }

/* ---------- 09: lights on ---------- */
.lineup { background: #fff; color: #000; padding: 16vh var(--gutter) 14vh; }
.lineup-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: end; }
.lineup-head h2 { font-family: "JD LED5", monospace; font-weight: 400; font-size: clamp(48px, 7vw, 116px); line-height: 1; }
.lineup-head p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #4D4D4D; max-width: 40ch; }
.products { margin-top: 10vh; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.shot { height: clamp(300px, 34vw, 500px); position: relative; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.products h3 { margin-top: 24px; font-size: 19px; font-weight: 600; }
.products p { margin-top: 4px; font-size: 16px; color: #4D4D4D; }

/* ---------- 04: over photography ---------- */
.over { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.over .mockup { border-radius: 4px; }
.over .mockup > img { aspect-ratio: auto; }
.mockup figcaption.top { top: 12px; bottom: auto; }
.scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,.82), transparent); z-index: 0; pointer-events: none; }
.over .mockup .layer { z-index: 1; }

/* ---------- 05: night and day ---------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mode { position: relative; min-height: 300px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 4px; }
.mode img { width: 62%; }
.mode .led { font-size: 40px; }
.mode span { font-size: 14px; }
.mode i { position: absolute; left: 34px; right: 34px; bottom: 24px; height: 2px; background: var(--spectrum); }
.mode.night { background: #000; color: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mode.night span { color: var(--fg2); }
.mode.day { background: #fff; color: #000; }
.mode.day span { color: #4D4D4D; }

/* ---------- 10: content shown on the screens and gear in the photos ---------- */
.screen { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; background: #000; overflow: hidden; }
.screen.night::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 2px 2px, transparent 1.3px, rgba(0,0,0,.25) 1.9px) 0 0 / 4px 4px; pointer-events: none; }
.screen img { position: relative; }
.screen .led { position: relative; color: #fff; text-align: center; }
.screen.night { justify-content: flex-start; padding-top: 12%; }
.screen.night img { width: 52%; filter: drop-shadow(0 0 14px rgba(255,255,255,.25)); }
.screen.night .led { font-size: 56px; margin-top: 2%; }
.screen.poster img { width: 82%; }
.screen.poster .led { font-size: 34px; }
.screen.spectrum { background: radial-gradient(120% 90% at 85% 110%, #BF0B72 0%, transparent 55%), radial-gradient(90% 80% at 0% 0%, #2974BA 0%, transparent 60%), linear-gradient(135deg, #2974BA, #4F2784 55%, #8A1F73); }
.screen.spectrum img { width: 78%; }
.screen.spectrum.wide img { width: 56%; }
.screen.spectrum .led { font-size: 46px; }
.card-dark { width: 100%; height: 100%; display: grid; place-items: center; }
.card-dark img { width: 74%; }
.card-light { width: 100%; height: 100%; padding: 46px 48px; display: flex; flex-direction: column; gap: 4px; color: #000; font-size: 18px; line-height: 1.5; }
.card-light b { font-family: "JD LED5", monospace; font-weight: 400; font-size: 40px; }
.card-light span { color: #4D4D4D; }
.card-light .ct { margin-top: 20px; }
.card-light i { margin-top: auto; height: 4px; background: var(--spectrum); }
.stencil { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 46px; }
.stencil img { width: 72%; }
.stencil .led { color: #fff; font-size: 44px; }
.stencil i { width: 72%; height: 5px; background: var(--spectrum); }
.crew { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.crew img { width: 100%; }
.crew .led { color: #fff; font-size: 40px; letter-spacing: .3em; }

/* ---------- close ---------- */
.close { min-height: 100vh; min-height: 100svh; padding: 16vh var(--gutter) 10vh; display: flex; flex-direction: column; align-items: center; text-align: center; }
#signoff { width: min(84vw, 820px); aspect-ratio: 913 / 179; }
.close h2 { margin-top: 9vh; font-weight: 300; font-size: clamp(32px, 4.4vw, 70px); letter-spacing: -.02em; line-height: 1.08; max-width: 18ch; }
.close .button { margin-top: 44px; position: relative; }
.close .button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -6px; height: 2px; background: var(--spectrum); }
.kit-meta { margin-top: 18px; font-size: 15px; color: var(--fg2); }
.contact { margin-top: 30px; font-size: 15px; color: var(--fg2); }
.contact a { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .over, .modes { grid-template-columns: 1fr; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .columns { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 20px; }
  .col .led { min-height: 140px; }
}
@media (max-width: 760px) {
  .lineup-head { grid-template-columns: 1fr; gap: 24px; }
  .shot { height: 300px; }
  .columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .col .led { min-height: 110px; }
  .cover-tag { bottom: 96px; }
}

/* ---------- reduced motion ---------- */
.static #dots { display: none; }
.static .hero-fallback { display: block; width: min(84vw, 1000px); height: auto; }
.static .purpose { position: static; transform: none; opacity: 1; margin-top: 8vh; }
.static .purpose .px { opacity: 1; }
.static .hero-pin { height: auto; min-height: 100vh; padding: 120px var(--gutter) 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.static .cue::after { animation: none; }