/* ─────────────────────────────────────────────────────────────────────────
   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;

  --card: #eaddb8;                 /* was dark navy card fill -> deeper parchment, one shade down from page bg */
  --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%);
  --glass-border-dark: rgb(58 46 40 / 16%);
  --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. */
.hero__title { color: var(--color-ink); }

/* .oct is NOT one context, it's two, and they need opposite fixes:
   .oct-hero__title/.oct-chapter__title/.oct-hero__stat-num/
   .oct-chapter__kicker sit directly on the plain paper background and
   need dark ink (fixed below, targeted). .oct-door__name,
   .oct-route__name and .oct-theme__theme sit on a real photo + a
   near-black scrim (.oct-door__scrim etc.) and correctly need to
   *stay* light - --oct-cream's original value already worked there.
   An earlier pass overrode --oct-cream itself for the whole .oct
   scope, which fixed the first group and broke the second (dark ink
   on a near-black scrim = invisible, per screenshot). Targeting the
   paper-context classes directly instead leaves --oct-cream's real
   default untouched for the photo-scrim ones. */
.oct-hero__title,
.oct-chapter__title,
.oct-hero__stat-num,
.oct-chapter__kicker,
.oct-route__name {
  color: var(--color-ink);
}

/* .oct-route__name looked like a photo-scrim case (it has its own
   84x84 thumbnail) but .oct-route__face sets background: none - it's
   a plain row on the section's own paper, same as the hero/chapter
   text above, not a full-bleed photo behind it. Grouped it with ink,
   not with the door/theme cards below, which genuinely are full-bleed
   photo + scrim. */

/* Same split for --color-platinum used as *text on a photo scrim*
   (door status lines, the Weekend cards' meta line) - the token is
   correctly dark now for its paper-context uses, which makes it just
   as invisible here as ink-on-scrim was above. Needs its own light
   color, not a shared token also used for the opposite case. */
.oct-door__status,
.oct-theme__meta {
  color: #e8ddc7;
}

.oct-theme__meta--soon,
.oct-theme__cta {
  color: #f0b874;
}

.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 these: the passport pill and the
   active month tab both pair dark ink with what's now a dark chip
   (yellow/ember respectively) - same pattern as the poster cards above. */
.topbar__passport,
.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);
  --bl-cream-dim: var(--color-platinum);
  --bl-cream-faint: rgb(58 46 40 / 42%);
}

.bl-hero,
.bl-final,
.bl-concept,
.bl-play__stage,
.bl-proof__item,
.bl-trip,
.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%);
  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);
}