/* ─────────────────────────────────────────────────────────────────────────
   Oyestore's Almanac — Watercolor Travel-Journal pass (site-wide)

   Loaded after styles.css, so everything here wins the cascade on equal
   specificity without touching the original file. The site's whole
   component system already runs on CSS custom properties (150+ uses of
   --background/--foreground/--color-ink/--color-pearl/--sticker-* alone),
   so redefining the palette here re-tints almost everything automatically:
   every poster card, trip card, button, chip and glass panel already
   reads its color from these tokens. What's added by hand on top of that
   is texture (paper grain, soft watercolor washes replacing the old
   halftone dot grid) and softened shadows (blurred ink-wash instead of
   flat neo-brutalist offset blocks) - the two things pure variables can't
   give you.

   Scope: started as an index.html-only pilot, now linked from every page
   on the site, including brands.html/creators.html/deck.html - those
   three share brands.css's `.bl` scaffold, which needs its own explicit
   re-theme block down near the bottom of this file (search "`.bl`
   scaffold" below) since it aliases the shared tokens in a way this
   file's redefinition would otherwise invert into light-on-light text.
   See that block's own header comment for the detail.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Paper & ink, replacing navy/pearl ───────────────────────────────── */
  --color-midnight: #f3e8d0;       /* was near-black navy -> warm parchment */
  --color-ink: #1a0a0f;            /* was near-black navy ink -> tried umber-brown, deep forest teal (#0C2320), maroon and near-black navy too - back to this near-black burgundy, warmest option and stays quiet behind the accent-red/ember/sticker colors instead of competing with them */
  --color-pearl: #fbf5e6;          /* was paper-white text-on-dark -> stays paper-white, now used on the darker accent chips instead of on body bg */
  --color-platinum: #6b584a;       /* was light gray secondary text -> muted brown ink, since text now sits on light paper */
  /* First pass used mid-tone pastels here - fine as decoration, but a
     losing bet as a *background color for text*: neither dark ink nor
     paper-white pearl gets to 4.5:1 against a mid-tone chip, and an
     audit of every visible text node on the page (158 flagged) showed
     exactly that failure, repeated everywhere a poster-card/meme/eyebrow
     sits on one of these. Fix is deep, saturated jewel tones instead of
     pastel washes - still reads as "watercolor," just the ink-heavy end
     of it - dark enough that paper-white text sits on top reliably. */
  --color-accent-red: #8f3a20;     /* was muted terracotta -> deep brick */
  --color-ember: #8a4515;          /* was ochre-amber -> deep burnt ochre; darkened once more so it still clears 4.5:1 as *text* on the light card fill (.trip-card__state), not just as a background */

  /* This was `var(--color-pearl)` - correct when pearl meant "light
     text on a dark page", wrong now that pearl means "paper-white for
     text on a dark accent chip." Body/heading text needs its own dark
     ink color instead, independent of whatever pearl is doing. */
  --foreground: var(--color-ink);

  /* Sticker accents -> deep watercolor jewel tones (see note above).
     Yellow needed a second, deeper pass after the first audit re-run -
     #a8721f still only cleared ~3.8:1 for pearl text on it. */
  --sticker-yellow: #8a5c15;       /* deep ochre - tried umber brown (#543520) live on the passport pill/gimmick pills, reverted back to this */
  --sticker-pink: #9c4460;
  --sticker-lime: #3f6b37;
  --sticker-sky: #215a68;

  /* "One shade down from page bg" (#eaddb8) measured at 1.11:1 against
     the page (#f3e8d0) - reported directly (a card opened on a phone
     showed no visible light-mode option at all, traced back to this:
     cards/pills were essentially invisible against the page in light
     mode, everywhere journal.css loads). This still isn't a hard navy-
     card swap - same warm parchment family, just deep enough (~1.9:1
     against the page) to actually read as a distinct surface. ink-on-
     card contrast is still 8.1:1, well clear of the 4.5:1 the rest of
     this file's own audit holds everything else to. */
  --card: #c2a56c;
  --muted-foreground: #3d2e22;      /* darkened again - #5c4c3f cleared the WCAG threshold on paper but still read weak/washed next to --color-ink's near-black burgundy everywhere else on the page, flagged directly */
  --glass-bg-dark: rgb(251 245 230 / 62%);
  /* 16% was nearly invisible paired with the old --card - same reason,
     same fix direction. */
  --glass-border-dark: rgb(58 46 40 / 40%);
  --shadow-premium: 0 10px 30px rgb(58 46 40 / 16%), 0 0 0 1px rgb(58 46 40 / 8%);

  /* New, journal-specific tokens */
  --ink-wash-shadow: 0 6px 18px rgb(58 46 40 / 22%);
  --ink-wash-shadow-lg: 0 14px 34px rgb(58 46 40 / 24%);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ── Paper texture: grain + soft watercolor pools, fixed behind everything ── */
body {
  background-color: var(--color-midnight);
  background-image:
    var(--paper-grain),
    radial-gradient(ellipse 60vw 40vw at 8% 6%, rgb(95 143 149 / 16%) 0%, transparent 65%),
    radial-gradient(ellipse 55vw 45vw at 96% 30%, rgb(201 123 138 / 15%) 0%, transparent 65%),
    radial-gradient(ellipse 65vw 50vw at 20% 96%, rgb(217 164 65 / 14%) 0%, transparent 65%),
    radial-gradient(ellipse 50vw 40vw at 90% 92%, rgb(181 80 47 / 12%) 0%, transparent 65%);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

html { color-scheme: light; }

::selection { background: rgb(193 122 61 / 30%); }

/* ── Halftone dot-grids -> soft watercolor wash blooms ──────────────────
   Same class names/positions as the original (.halftone--tr/bl/mid), so
   no markup changes anywhere - every section that already carries one of
   these gets the new wash for free. */
.halftone {
  background-image: none;
  filter: blur(38px);
  opacity: 0.55;
}

.halftone--tr, .halftone--bl, .halftone--mid {
  mask-image: none;
  border-radius: 999px;
}

.halftone--tr { background: radial-gradient(circle, var(--sticker-sky) 0%, transparent 70%); }
.halftone--bl { background: radial-gradient(circle, var(--sticker-yellow) 0%, transparent 70%); }
.halftone--mid { background: radial-gradient(ellipse, var(--sticker-pink) 0%, transparent 70%); opacity: 0.4; }

/* ── Shared typography ───────────────────────────────────────────────── */
/* The original .eyebrow is display: block (the default for a <p>),
   with .eyebrow--center's own text-align: center (untouched, still in
   styles.css) centering it as inline content within that full-width
   block - same mechanism as every other centered heading on the page.
   An earlier pass set display: inline-flex here to lay the bullet
   dots out next to the text, which shrank the whole element to fit
   its own content and left it sitting at the block's left edge
   instead - text-align only centers inline content *inside* a block,
   it can't center the block-level (or in this case, now inline-level)
   box itself. Every section's eyebrow shares this one class, so the
   fix here is one line, not one per section. Dots below are inline-
   block with margin instead of flex + gap, so they flow as ordinary
   inline content and the original centering mechanism works untouched. */
.eyebrow { color: var(--color-accent-red); }

.eyebrow--center::before,
.eyebrow--center::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
  vertical-align: middle;
}

.eyebrow--center::before { margin-right: 7px; }
.eyebrow--center::after { margin-left: 7px; }

.section-lede { color: var(--color-platinum); opacity: 0.92; }

/* ── Buttons: hard flat offset -> soft ink-wash blur ─────────────────── */
.btn--primary, .btn--ghost {
  box-shadow: var(--ink-wash-shadow);
}

.btn--primary:hover, .btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--ink-wash-shadow-lg);
}

.btn--primary:active, .btn--ghost:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgb(58 46 40 / 22%);
}

.topbar__passport {
  box-shadow: var(--ink-wash-shadow);
}

.topbar__passport:hover, .topbar__passport:active {
  box-shadow: var(--ink-wash-shadow-lg);
}

/* .hero__title sits directly on the hero's own background (not a dark
   card/photo scrim like most other --color-pearl text on the page), so
   it needs the new dark ink, not paper-white. Same reasoning for the
   small real-weather line right below it - also new, also sitting on
   that same repainted-light background. */
.hero__title, .hero__weather { color: var(--color-ink); }

.site-footer__link { color: var(--color-ink) !important; }

/* Every poster-card variant + gimmick-pill hover state used to pair
   dark ink text with a pastel chip; now that those chips are deep
   jewel tones (see the palette note up top), the text needs to flip
   to paper-white to keep reading. --orange/--red already did. */
.poster--orange,
.poster--yellow,
.poster--pink,
.poster--sky,
.poster--lime,
.gimmick-pill--yellow:hover,
.gimmick-pill--sky:hover,
.gimmick-pill--lime:hover,
.trip-card__price,
.intl-card__ribbon {
  color: var(--color-pearl);
}

/* Same fix as .reel__tag's neighbors, different root cause: this one
   deliberately reused --color-midnight as "the near-black text" value
   pre-journal - now that midnight means light paper, it needs its own
   explicit color instead of inheriting that old dual meaning. */
.reel__tag { color: var(--color-pearl); }

/* Second contrast-audit pass caught this: the active month tab pairs
   dark ink with what's now a dark ember chip - same pattern as the
   poster cards above. (The passport pill used to need the same fix -
   now it's solid --color-accent-red with unconditional pearl text,
   set directly in styles.css alongside .topbar__cta, so it no longer
   needs a light-mode-only override here.) */
.trips-month-tab.is-active,
.trips-month-tab.is-active:hover {
  color: var(--color-pearl);
}

/* Third pass: same ink-on-dark-chip miss as the passport pill above,
   just on elements gated behind interaction (the boot/intro screen, a
   gamification modal, the passport's "stamp collection" view, a toast)
   rather than visible on first paint - which is why the audit never
   flagged them even though the underlying problem was already there. */
.boot-screen__sticker--1,
.sticker--shuffle,
.modal--yellow .modal__eyebrow,
.modal--yellow .modal__headline,
.modal--yellow .modal__quote,
.stamp--unlocked,
.toast--stamp {
  color: var(--color-pearl);
}

/* Burger menu button: pearl icon on var(--glass-bg-dark), which is a
   light warm glass now, not dark - same "light chip, still-light text"
   miss as the passport pill, just too small a text node (☰ is one
   character) for the audit script's length filter to have caught it. */
.topbar__menu-btn,
.theme-toggle {
  color: var(--color-ink);
}

/* The seal's little wave-squiggle (a decorative flourish above the
   fixed music player, not text - no contrast requirement) reads its
   color from --sticker-sky, which went from a light pastel to a much
   more saturated deep teal for the text-legibility fixes above. Same
   token, opposite effect here: a bold, cool-toned line that now reads
   as a stray mark cutting across whatever warm-toned text the fixed
   player happens to be sitting over, rather than a soft water squiggle.
   Toned back down instead of reusing the darker token at full strength. */
.seal-wave { opacity: 0.4; }

/* The fixed music player is its own dark widget (hardcoded gunmetal
   chrome, #1a1c20-ish) that was never brought into the paper reskin -
   it reuses --sticker-yellow purely as a bright glow accent for the
   star/title/mute/play icons against that dark background, independent
   of the pill/sticker/chip use of the same token everywhere else on the
   page. Darkening --sticker-yellow toward brown for those pills makes
   the player's icons nearly invisible on its own dark chrome (dark
   brown glyph on near-black), so the player keeps its own bright-amber
   value here, scoped locally - same trick as .bl-hero re-scoping
   --bl-cream, just going the opposite direction (this island wants to
   STAY bright, not go paper). */
.player { --sticker-yellow: #ffd23f; }

/* Same trap, three spots on the boot/intro screen: --sticker-yellow used
   as a bright decorative accent (a star icon's stroke, a gradient
   text-clip on the wordmark, a loading-bar gradient) rather than a pill
   fill. Unlike the player above, boot-screen ALSO has a real pill
   (.boot-screen__sticker--1, a couple lines up) that genuinely should
   turn brown with everything else - so this can't be a container-wide
   rescope without undoing that pill's fix. Targeted instead. */
.boot-screen__star,
.boot-screen__wordmark-accent,
.boot-screen__bar span {
  --sticker-yellow: #ffd23f;
}

/* .intl-card__ribbon above (pearl text, for the bookable/gold variant)
   was too broad a selector - it also matched --soon's compound class
   and stomped its own correct ink-on-pearl-pill styling, leaving
   "coming soon" pearl-on-pearl and literally invisible. Restore it. */
.intl-card__ribbon--soon { color: var(--color-ink); }

/* Same story as .hero__title: .gimmick-pill's rest state sits on
   var(--card) (now light parchment) but kept var(--color-pearl) text -
   fine for --pink (its own darker red/rose gradient), washed out for
   yellow/sky/lime, which only darken their text on hover. */
.gimmick-pill { color: var(--color-ink); }

/* The .mag-* system (goa/gokarna/pondicherry/varkala) has the exact
   same bug as .bl did, and the exact same fix: body.mag sets the page's
   *default* text color to pearl - correct pre-journal, when the page
   itself was dark navy, wrong now that the page is light parchment.
   Most .mag-* headings (.mag-section__title, .mag-list__name,
   .mag-pullquote p, .mag-cta__title) never set their own color at all,
   they've been relying on that inherited default the whole time - so
   with nothing here overriding it, they were pearl-on-parchment and
   invisible from the moment journal.css got linked onto these pages,
   not something this pass introduced. .mag-hero is the one real photo
   context in this system (a full-bleed image + .mag-hero__scrim, not a
   plain section) and .mag-hero__title relies on that same inheritance
   too - so it needs its own re-scope back to pearl, same shape as the
   .bl-hero re-scope above, or fixing the rest would break the hero. */
body.mag { color: var(--color-ink); }
.mag-hero { color: var(--color-pearl); }

/* .mag-cta__questions li sets its own explicit pearl (so the body.mag
   fix above doesn't touch it) - .mag-cta's background is a gradient
   from a soft per-page accent tint into var(--color-midnight), which
   is light parchment now, not dark navy, so pearl text washes out same
   as everything else in this system did. */
.mag-cta__questions li { color: var(--color-ink); }

/* --xp-cream is the .xp section's own hardcoded #fffdd0 (same "local
   light constant" pattern as --oct-cream on the homepage) - correct
   pre-journal, when .xp inherited a dark navy page like everything
   else here, wrong now for .xp__outro specifically since that's a
   plain-paper closing line, not a photo-backed one. */
.xp__outro { color: var(--color-ink); }

/* .mag-intro__lede: explicit pearl, plain paper (.mag-intro carries no
   background of its own) - the intro line right under the hero, same
   bug as .mag-cta__questions li above. */
.mag-intro__lede { color: var(--color-ink); }

/* --mag-accent (one bright hue per destination page - amber for Goa,
   sky for Gokarna, terracotta for Pondicherry, teal for Varkala) was
   tuned as a vivid accent against dark navy: every eyebrow, numbered
   list item and "our plan" label reading it sits at ~1.8-3:1 against
   the light parchment page now, well under the 4.5:1 floor - measured
   directly, not eyeballed. --mag-accent itself stays untouched (used
   for .mag-hero__kicker on the photo hero, and the .mag-cta gradient
   tint, where the bright original is still correct) - these five
   selectors get their own darker variant instead, one per page, tuned
   to clear 4.5:1+ against the parchment bg while staying recognizably
   that page's hue rather than converging on the same generic brown. */
.mag--goa { --mag-accent-ink: #725217; }
.mag--gokarna { --mag-accent-ink: #1f5267; }
.mag--pondicherry { --mag-accent-ink: #702d1f; }
.mag--varkala { --mag-accent-ink: #174f43; }

.mag-section__eyebrow,
.mag-list__num,
.mag-list__tag,
.mag-pullquote__mark,
.mag-plan__label,
.mag-plan__hint,
.mag-intro p:first-of-type::first-letter,
.xp__intro-sub,
.xp__title,
.xp__tag::after {
  color: var(--mag-accent-ink);
}
.gimmick-pill--pink { color: var(--color-pearl); }

/* ── Hero: replace the galaxy gradient with a painted-sky wash ──────────
   The old background was two hardcoded near-black stops either side of
   --color-midnight - now that var is paper-cream, those stops need to go
   too, or the hero reads as a dark box sitting on a light page. */
.hero {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgb(95 143 149 / 22%) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgb(201 123 138 / 20%) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 10% 90%, rgb(217 164 65 / 18%) 0%, transparent 60%),
    var(--color-midnight);
}

/* Cards/pills already use var(--glass-bg-dark)/var(--glass-border-dark)
   internally, which are now a light warm glass - just needed the hero's
   own backdrop to stop fighting them. */

/* ── Shared card shadows: hard flat offset -> soft ink-wash blur ────────
   Covers the trip catalog cards, the spin-a-chapter result card and the
   poster-wall tiles in one pass - all three already share this exact
   "N px N px 0 <dark>" neo-brutalist shadow language. */
.trip-card,
.chapter-card,
.poster-card {
  box-shadow: var(--ink-wash-shadow) !important;
}

.trip-card:hover,
.poster-card:hover {
  box-shadow: var(--ink-wash-shadow-lg) !important;
}

/* ── Boot screen: recolor the duotone wash to match ──────────────────── */
.boot-screen__duotone {
  background: linear-gradient(155deg, rgb(181 80 47 / 45%) 0%, rgb(193 122 61 / 38%) 45%, rgb(201 123 138 / 42%) 100%);
}

.boot-screen__scrim {
  background: linear-gradient(180deg, rgb(58 46 40 / 35%) 0%, rgb(58 46 40 / 15%) 40%, rgb(58 46 40 / 82%) 100%);
}

/* ── Mobile menu: simplify to match the reference (clean stacked links,
   one clear CTA, generous breathing room) - was 5 emoji-prefixed links
   plus two competing CTA buttons (WhatsApp + a form link), cramped
   together at 4px gaps. Emoji dropped and the form link removed in the
   markup itself (index.html); this is the spacing/type half of it. ── */
.mobile-menu__nav {
  gap: 22px;
  padding: 4px 4px 8px;
}

.mobile-menu__nav a {
  padding: 0;
  font-size: 17px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
   Brands/Creators/Deck pages (.bl scaffold, brands.css) — same watercolor-
   journal direction as the rest of the site.

   brands.css deliberately aliases its own --bl-* tokens straight to this
   site's shared --color-midnight/--color-pearl (its own header comment:
   "not a new palette"). That's exactly why linking this file naively broke
   it earlier: --color-midnight flipped from dark navy to light parchment
   AND --color-pearl flipped from "light text for a dark page" to "paper-
   white fill for a dark accent chip" - so --bl-navy (page bg) correctly
   went light, but --bl-cream (body/heading text) ALSO stayed light,
   leaving light text on a light page everywhere .bl didn't have a photo
   behind it to hide the problem.

   Fix follows the same pattern as .oct-* on the homepage: most of this
   page is plain paper now, so --bl-cream/-dim/-faint get redefined to
   ink tones as the default. The handful of places that are genuinely
   dark - a full-bleed photo behind a scrim (hero, final CTA, the concept
   number, the playground stage, proof/trip captions, the sticky nav) or
   a solid burgundy/ember accent fill (peak flow/wheel nodes, the accent
   UGC column, the floating CTA, the nav CTA pill) - re-scope those same
   three custom properties back to paper-white locally, so every child
   that already reads var(--bl-cream) etc. resolves correctly again
   without hunting down each element one by one.

   .bl-hero/.bl-trip/.bl-float are <a> tags, and brands.css has its own
   `.bl a { color: inherit; }` reset (element+class = higher specificity
   than a single `.bl-trip`/`.bl-float` class selector) - brands.css's own
   comment on .bl-btn--ghost already flags this trap. It never mattered
   before, since inherit and the direct rule resolved to the same cream
   either way; now that the *default* --bl-cream is ink, an anchor whose
   own color rule loses to inherit silently goes dark again. !important
   on `color` below sidesteps the specificity fight entirely, the same
   way brands.css's own .bl-nav__cta already does. ───────────────────── */

.bl {
  --bl-cream: var(--color-ink);
  /* Both were --color-platinum / a 42%-opacity dark brown - fine as a
     "dim"/"faint" TWO-STEP-DOWN-FROM-WHITE pairing on the site's
     original dark-navy-always design, but the light-mode flip inverted
     the polarity without re-tuning the actual numbers: on the light
     card fill, platinum measures 2.85:1 and the 42%-faint blend 1.92:1
     - both real contrast failures (found auditing the rest of the site
     after the two .trip-card/.orig-chapter-card fixes), not just a
     duller shade, on card content across a dozen+ components (chapter-
     card duration/price, the axis bar, chip labels, an "Explore by
     Destination" section heading at 2.28:1 - nearly invisible for a
     heading). Collapsing both to --muted-foreground - already tuned to
     clear contrast on both the page and the card (5.5:1 / 10.7:1) -
     rather than inventing new light-mode-specific shades. Loses the
     dim-vs-faint distinction in light mode specifically (dark mode's
     own values below are untouched and keep theirs); a passing floor
     for real content beats a subtler hierarchy that goes invisible on
     a third of the site's surfaces. */
  --bl-cream-dim: var(--muted-foreground);
  --bl-cream-faint: var(--muted-foreground);
  /* The locked --bl-burgundy literal itself, not brands.css's bright
     tint - on light mode's paper/tan surfaces it already clears 4.5:1+
     as text on its own (~4.6:1 on the card fill, ~8.9:1 on the page
     background), so this is the one context that needs no separate
     "bright" variant at all - just the real burgundy, used as text. */
  --bl-burgundy-bright: var(--bl-burgundy);
}

.bl-hero,
.bl-final,
.bl-concept,
.bl-play__stage,
.bl-proof__item,
.bl-trip,
.bl-tier,
.bl-nav,
.bl-ugc__col--accent {
  --bl-cream: var(--color-pearl);
  --bl-cream-dim: rgb(251 245 230 / 78%);
  --bl-cream-faint: rgb(251 245 230 / 45%);
  /* Same reasoning as --bl-cream above: these sit on a dark photo/scrim
     background regardless of the page's overall theme, so they need
     the bright burgundy tint (same value as brands.css's dark-mode
     default), not the light mode .bl rule's plain maroon literal -
     the maroon would be nearly invisible against a dark background. */
  --bl-burgundy-bright: #e94971;
  color: var(--bl-cream) !important;
}

/* These four don't sit inside one of the containers above, so they need
   their own direct light-text fix instead of inheriting a re-scoped var. */
.bl-flow__step--peak,
.bl-wheel__node--peak,
.bl-seq__media--type span,
.bl-float,
.bl-nav__cta {
  color: var(--color-pearl) !important;
}

/* .bl-btn--ghost's fill comes from --bl-cream itself (it's only ever
   used inside .bl-hero, already re-scoped light above), so no touch
   needed there - flagged here so a future edit doesn't "fix" it twice. */

/* The theme toggle button, dropped into two headers that never
   themselves go light: .bl-nav is a solid dark bar regardless of the
   overall site theme, and .mag-topbar sits over a full-bleed photo
   hero (a dark scrim, not the page background) on every destination
   page. --color-pearl stays a light-ish value in both themes (that's
   the one deliberate invariant threading through this whole file), so
   pinning the toggle to it here - rather than letting it follow the
   default ink-in-light/pearl-in-dark logic .topbar__menu-btn uses -
   keeps it visible in both cases without needing a [data-theme="dark"]
   counterpart. */
.bl-nav .theme-toggle,
.mag-topbar .theme-toggle {
  color: var(--color-pearl);
}

/* ─────────────────────────────────────────────────────────────────────────
   Fixed music player — reskinned as a vintage wooden radio, per a direct
   reference photo: honey-wood case, dark speaker-grille cut into the
   front, round black knobs with a brass/gold rim, and a glowing amber
   dial readout. Loaded after the player's original "old car dashboard"
   styling in styles.css (brushed-metal panel, chrome rivets, amber idiot-
   lights) - same layout and DOM, new material: cool chrome/gunmetal
   swapped for warm wood/brass throughout, chrome rivets swapped for
   brass ones. --sticker-yellow is already re-scoped bright gold inside
   .player higher up this file, so anything here that reads it (the
   gramophone icon, the title, the play button, the seek thumb) keeps
   its dial-glow color without repeating that override. ───────────────── */

.player__fab {
  border-color: #8a6530;
  background: radial-gradient(circle at 32% 28%, #4a3a24 0%, #1c1610 72%);
  box-shadow:
    4px 4px 0 var(--color-ink),
    inset 0 1px 1px rgba(255, 224, 168, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.55);
}

/* The wood grain reuses --paper-grain (the same turbulence-noise data-URI
   texturing the page background elsewhere in this file) instead of a new
   asset - just layered over a honey-wood gradient instead of parchment. */
.player__panel {
  background:
    var(--paper-grain),
    linear-gradient(160deg, #caa06a 0%, #a97c42 45%, #8a6530 100%);
  border-color: #4a3620;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 235, 200, 0.3),
    inset 0 -3px 8px rgba(0, 0, 0, 0.35);
}

.player__panel::before,
.player__panel::after {
  background: radial-gradient(circle at 35% 30%, #f3dfae, #8a6530 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* Album-art dial: same dark knob face as the original, just warmed from
   cool gunmetal to a wood-toned near-black with a brass rim instead of
   chrome. */
.player__art {
  background: radial-gradient(circle at 34% 28%, #3a2f20 0%, #14100c 78%);
  border-color: #8a6530;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    inset 0 -1px 2px rgba(255, 224, 168, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

/* The title/credits box becomes the radio's speaker grille: a recessed
   black panel with faint vertical slats standing in for the grille
   cloth, instead of a plain flat black box. */
.player__meta {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0px, rgba(0, 0, 0, 0.55) 2px, rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 5px),
    rgba(10, 7, 4, 0.55);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 224, 168, 0.08);
}

.player__credits { color: rgba(232, 214, 180, 0.75); }

.player__icon-btn {
  border-color: #6b4f2c;
  background: linear-gradient(180deg, #4a3a24 0%, #1c1610 100%);
  color: #d9c39a;
}

.player__icon-btn:hover { color: var(--sticker-yellow); }

/* Prev/next: same rectangular toggle shape, recolored from cool chrome +
   sky-blue icon to dark wood + brass, matching the round knobs instead
   of standing out from them. */
.player__icon-btn--lg {
  color: #d9b877;
  background: linear-gradient(180deg, #4a3a24 0%, #1c1610 100%);
  border-color: #6b4f2c;
}

.player__icon-btn--lg:hover {
  color: var(--sticker-yellow);
  background: linear-gradient(180deg, #5c4830 0%, #241c14 100%);
}

.player__seek {
  background: rgba(20, 14, 8, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 224, 168, 0.06);
}

/* The big center transport button - the radio's main tuning knob. */
.player__play {
  border-color: #8a6530;
  background: radial-gradient(circle at 33% 28%, #4a3a24 0%, #1c1610 78%);
  box-shadow:
    3px 3px 0 var(--color-ink),
    inset 0 1px 1px rgba(255, 224, 168, 0.2),
    inset 0 -3px 6px rgba(0, 0, 0, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
   Trip-detail modal (.td-*) — the full-screen "spin a chapter" / trip-card
   detail view. Never touched by this file until now: same root-cause bug
   as .mag/.bl (.td's default text color is still var(--color-pearl),
   correct pre-journal when the modal was dark navy, invisible now that
   .td's own background is light parchment) plus a genuine pre-existing
   typo - eight rules here read var(--platinum), a custom property never
   actually defined anywhere in this codebase. It happened to look right
   before purely by accident: an unresolvable var() on an *inherited*
   property like color doesn't error, it falls through to inherit - and
   inheriting pearl-on-navy from .td read exactly like the dim platinum
   tone these rules clearly meant to render. Now that .td's own default
   is ink, the same accident would silently invert these to full-strength
   dark instead of a dim secondary tone - fixed at the source instead.
   ───────────────────────────────────────────────────────────────────────── */

.td { color: var(--color-ink); }

/* The one real photo context in this modal (a full-bleed image +
   .td-hero__scrim) - same re-scope shape as .mag-hero/.bl-hero above. */
.td-hero { color: var(--color-pearl); }

.td-hero__meta,
.td-hero__scroll {
  color: var(--color-pearl);
}

.td-clock__span,
.td-journey__desc,
.td-get__fallback,
.td-bring__dek,
.td-bring__list li {
  color: var(--color-platinum);
}

.td-dna__not span,
.td-host__rows dd,
.td-get__not span {
  color: var(--color-ink);
}

/* The big faint background numeral behind each journey stop - was a
   16%-opacity near-white overlay sitting almost invisibly behind the
   stop's title/description on dark navy; same idea, dark ink instead. */
.td-journey__num { color: rgb(58 46 40 / 14%); }

/* Every hairline divider in this modal was a translucent white border
   tuned for dark navy - same warm dark equivalent every other divider
   on the light-paper site already uses. */
.td-hero__meta,
.td-dna__for li,
.td-dna__for li:last-child,
.td-journey__stop,
.td-journey__stop:last-child,
.td-places__item,
.td-places__item:last-child,
.td-get__list li,
.td-get__list li:last-child,
.td-host__file,
.td-host__rows > div,
.td-bring__list li,
.td-clock,
.td-drop {
  border-color: var(--glass-border-dark);
}