/* Lantern Radio — jay-fowler.com's left-aligned column, set at night. One painted band, then
   the live song beside the steering controls; the room's drift and the suggestion feed below.
   A deliberate single look: the station only exists at night, so there is no light theme.
   Palette: the Little Lanterns theme (lanterncore.json). From the 2026-10-26 mockup. */
:root {
  --sky-deep: #0b1524;   /* page */
  --sky: #10223a;        /* raised surfaces (theme midnight, a touch darker) */
  --dusk: #1d3a58;       /* hairlines, tracks */
  --paper: #f3ece1;      /* text, warm like the site's paper */
  --muted: #a7b1c0;      /* secondary text */
  --amber: #ffc04d;      /* lantern light: the one accent */
  --peach: #ffd8a6;      /* glow */
  --ember: #e0603f;      /* the on-air dot only */
  --moon: #6fb7c3;       /* the crowd's marker (theme teal moon, lifted for dark ground) */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --halo: 0 0 0 1px rgba(255,192,77,.18), 0 0 44px 6px rgba(255,192,77,.16), 0 0 120px 24px rgba(255,160,60,.07);
  color-scheme: dark;
}
* { box-sizing: border-box }
body {
  background: var(--sky-deep); color: var(--paper);
  font: 16px/1.6 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 1120px; margin: 0 auto }
a { color: var(--peach) }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0 }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums }
.label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }

/* site header */
.site { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-block: 20px }
.site .name { font-family: var(--display); font-size: 22px; color: var(--paper); text-decoration: none }
.site nav { display: flex; gap: 20px; font-size: 15px }
.site nav a { color: var(--muted); text-decoration: none }
.site nav a[aria-current] { color: var(--amber) }

/* painted band */
.band { position: relative; border-radius: 4px; overflow: hidden; min-height: 260px; display: flex; align-items: flex-end }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  filter: saturate(.9) brightness(.62); transition: filter 1.2s ease }
.band::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,21,36,.92) 0%, rgba(11,21,36,.6) 45%, rgba(11,21,36,.05) 100%),
              linear-gradient(0deg, rgba(11,21,36,.9) 0%, rgba(11,21,36,0) 55%) }
.band .copy { position: relative; z-index: 1; padding: 28px; display: grid; gap: 10px; max-width: 34rem }
.onair { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--peach) }
.onair .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px 2px rgba(224,96,63,.6) }
.band h1 { font-size: clamp(40px, 7vw, 64px); line-height: 1 }
.band p { margin: 0; color: var(--paper); opacity: .88; max-width: 30rem }
.when { font-size: 14px; color: var(--muted) }

/* main grid */
main { display: grid; gap: 56px; padding-block: 40px 64px }
.live { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: start }
@media (max-width: 880px) { .live { grid-template-columns: minmax(0, 1fr) } }

/* now playing */
.now { display: grid; gap: 22px }
.cover-row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; align-items: end }
@media (max-width: 520px) { .cover-row { grid-template-columns: minmax(0, 1fr) } }
.cover { width: 100%; max-width: 100%; aspect-ratio: 1; border-radius: 3px; box-shadow: var(--halo); display: block }
.lit .cover { animation: flicker 1.25s ease-in-out infinite alternate }  /* 0.8 Hz, 2 % — the Little Lanterns theme's flicker */
@keyframes flicker { from { filter: brightness(1) } to { filter: brightness(.98) } }
.title-block { display: grid; gap: 6px; min-width: 0 }
.title-block h2 { font-size: clamp(28px, 3.6vw, 36px); line-height: 1.12 }
.meta { font-size: 13px; color: var(--muted) }
.player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center }
.play { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--amber); background: transparent; color: var(--amber);
  cursor: pointer; display: grid; place-items: center }
.play svg { width: 18px; height: 18px; fill: currentColor }
.bar { height: 4px; background: var(--dusk); border-radius: 2px; position: relative; cursor: pointer }
.bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--amber); border-radius: 2px }
.time { font-size: 13px; color: var(--muted) }

.rate { display: grid; gap: 10px }
.choices, .reasons { display: flex; flex-wrap: wrap; gap: 8px }
.chip { font: 500 14px var(--body); color: var(--paper); background: transparent; border: 1px solid var(--dusk);
  border-radius: 999px; padding: 6px 14px; cursor: pointer }
.chip[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); background: rgba(255,192,77,.08) }
.reasons .chip { font-size: 13px; padding: 4px 12px; color: var(--muted) }
.thanks { font-size: 13px; color: var(--muted); min-height: 1.2em }

.why { border-left: 2px solid var(--amber); padding: 2px 0 2px 16px; display: grid; gap: 6px }
.why p { margin: 0; max-width: 36rem }
details.lyrics summary { cursor: pointer; color: var(--peach) }
details.lyrics pre { font: 15px/1.7 var(--display); white-space: pre-wrap; margin: 12px 0 0; color: var(--paper); opacity: .9 }

/* steering */
.steer { background: var(--sky); border: 1px solid var(--dusk); border-radius: 6px; padding: 24px; display: grid; gap: 22px }
.steer h2 { font-size: 26px }
.closing { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted) }
.closing b { color: var(--amber); font-weight: 500 }
.slider { display: grid; gap: 6px }
.slider .ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted) }
.slider .head { display: flex; justify-content: space-between; align-items: baseline }
.slider .head label { font-weight: 600 }
.track { position: relative; height: 28px }
.track input { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer }
.track input::-webkit-slider-runnable-track { height: 4px; background: var(--dusk); border-radius: 2px }
.track input::-moz-range-track { height: 4px; background: var(--dusk); border-radius: 2px }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sky) }
.track input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sky) }
.mark { position: absolute; top: 4px; width: 2px; height: 20px; border-radius: 1px; pointer-events: none; transform: translateX(-1px) }
.mark.station { background: var(--amber); box-shadow: 0 0 8px rgba(255,192,77,.7) }
.mark.crowd { background: var(--moon) }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--muted) }
.legend i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px }
form { display: grid; gap: 8px }
form label { font-weight: 600 }
.field { display: flex; gap: 8px; flex-wrap: wrap }
.field input { flex: 1 1 220px; min-width: 0; font: 15px var(--body); color: var(--paper); background: var(--sky-deep);
  border: 1px solid var(--dusk); border-radius: 4px; padding: 10px 12px }
.field button { font: 600 15px var(--body); color: var(--sky-deep); background: var(--amber); border: 0; border-radius: 4px; padding: 10px 16px; cursor: pointer }
.hint { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px }
.steps li { font-size: 12px; color: var(--muted); display: grid; gap: 6px }
.steps li::before { content: ""; height: 3px; border-radius: 2px; background: var(--dusk) }
.steps li.done::before { background: rgba(255,192,77,.5) }
.steps li.now { color: var(--amber) }
.steps li.now::before { background: var(--amber); box-shadow: 0 0 8px rgba(255,192,77,.6) }
@media (max-width: 520px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px } }

/* room + feed */
.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px }
@media (max-width: 880px) { .lower { grid-template-columns: minmax(0, 1fr) } }
.lower h2 { font-size: 26px; margin-bottom: 6px }
.lower .sub { color: var(--muted); margin: 0 0 16px; max-width: 34rem; font-size: 15px }
canvas { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; display: block; background: var(--sky); border: 1px solid var(--dusk); border-radius: 6px }
.feed { list-style: none; margin: 0; padding: 0 }
.feed li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--dusk) }
.feed li:last-child { border-bottom: 1px solid var(--dusk) }
.feed time { font-size: 13px; color: var(--muted); padding-top: 2px }
.feed .text { min-width: 0 }
.feed .status { grid-column: 2; font-size: 12px; letter-spacing: .04em; color: var(--muted) }
.feed .status.in { color: var(--amber) }
.feed li.new { animation: rise .7s ease-out }
@keyframes rise { from { transform: translateY(8px); opacity: .4 } to { transform: none; opacity: 1 } }

.recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
@media (max-width: 640px) { .recent { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.recent figure { margin: 0; display: grid; gap: 8px }
.recent img { width: 100%; max-width: 100%; aspect-ratio: 1; border-radius: 3px; display: block; opacity: .92 }
.recent figcaption { font-size: 14px; line-height: 1.35 }
.recent figcaption span { display: block; font-size: 12px; color: var(--muted); font-family: var(--mono) }

footer { border-top: 1px solid var(--dusk); padding-block: 24px 40px; color: var(--muted); font-size: 13px; display: grid; gap: 8px }
footer p { margin: 0; max-width: 46rem }

/* off air: lanterns out */
.off .band img { filter: saturate(.2) brightness(.38) }
.off .onair .dot { background: var(--muted); box-shadow: none }
.off .cover { box-shadow: none; filter: saturate(.4) brightness(.7); animation: none }
.off .steer { opacity: .45; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .lit .cover, .feed li.new { animation: none } }

/* live page additions */
.note { font-size: 13px; color: var(--muted); margin: 8px 0 0; min-height: 1.2em }
.h-recent { font-size: 26px; margin-bottom: 16px }
.feed li.mine .status { color: var(--peach) }
.feed .empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px }
.bar { cursor: default }
.play[aria-busy="true"] { opacity: .6 }
[hidden] { display: none !important }
.steer.closed { opacity: .45 }