/* ============================================================================
 * Time Flies overlay — Open Baskerville + parchment.
 *
 * A per-SITE overlay (NOT baked into main — it would break DOM/visual parity
 * with the reference client). It lives in the client `public/` so the font +
 * this stylesheet are copied into every build's dist, but it only takes effect
 * where index.html explicitly links it. The timeflies-2026 rebuild injects that
 * <link> after staging — see docs/LOCAL-DEV.md "Rebuild a served site".
 *
 * Goal (sig, 2026-07-19): the cream + Baskerville + minimal-timeline look.
 * The d3 timeline viz itself lands later; this sets the type + palette.
 * ==========================================================================*/

@font-face {
  font-family: "Open Baskerville";
  /* url() is relative to THIS stylesheet (/assets/timeflies-overlay.css), so the
     font path is fonts/… not assets/fonts/… — the latter 404s and silently
     falls back to the OS "Baskerville", which looks close but isn't our font. */
  src: url("fonts/open-baskerville/OpenBaskerville.woff2") format("woff2"),
       url("fonts/open-baskerville/OpenBaskerville.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --tf-cream: #e9e8dd;   /* warm parchment ground */
  --tf-sand:  #cfccb8;   /* darker parchment — event cards read on the cream ground */
  --tf-ink: #1a1a1a;     /* near-black ink */
  --tf-muted: #6f6f63;   /* muted labels / dates */
  /* the clashfinder is a canvas renderer — its font is a designed CSS var
     (app-clashfinder.js reads --clashfinder-font-name for ctx.font / Konva). */
  --clashfinder-font-name: "Open Baskerville";
  --clashfinder-nav-button-font-family: "Open Baskerville";

  /* --- Clashfinder (timetable/grid) palette -----------------------------
     Default skin is cobalt-blue ground + navy event boxes + green active nav
     + orange time text — garish against the parchment header. Re-theme the
     whole grid to the timeflies parchment/ink palette so it reads as one app.

     The event/venue/time COLOURS below are read by app-clashfinder.js at launch
     via getComputedStyle(document.documentElement) and painted onto the Konva /
     HTML5 canvases, so they MUST live on :root (overriding them on #cf-wrap
     would not reach the canvas). The venue-name colour is a single global ink,
     so any newly-added venue (Maggot Pit, Hoverfly Hangar, Firefly Field, the
     Caddisfly Craft Fields, Green Fields: The Chrysalis, the Bee-Fly Stage…)
     is themed automatically — no per-venue rules to maintain. */
  --clashfinder-background-colour: var(--tf-cream);           /* grid ground */
  --clashfinder-time-canvas-background-colour: var(--tf-cream);/* time axis strip */
  --clashfinder-event-box-background-color: var(--tf-sand);   /* event cards */
  --clashfinder-event-box-border-color: var(--tf-ink);
  --clashfinder-event-name-text-color: var(--tf-ink);
  --clashfinder-event-time-text-color: var(--tf-muted);
  --clashfinder-venue-name-color: var(--tf-ink);
  --clashfinder-time-text-color: var(--tf-muted);
  /* day-nav pills: quiet parchment, ink text; the selected day inverts to ink */
  --clashfinder-nav-button-background-color: var(--tf-cream);
  --clashfinder-nav-button-text-color: var(--tf-ink);
  --clashfinder-nav-button-active-background-color: var(--tf-ink);
  --clashfinder-nav-button-active-text-color: var(--tf-cream);
  --clashfinder-nav-button-hover-background-color: var(--tf-ink);
  --clashfinder-nav-button-hover-text-color: var(--tf-cream);
}

/* --- Clashfinder: DOM-side backgrounds -------------------------------------
   #cf-wrap and #canvas-time backgrounds come from CSS (not the canvas), and
   clashfinder.css hard-codes .cf-buttons defaults (grey bg, #333 focus, white
   links) that win over the param-overlay vars — restate them on parchment.
   The base clashfinder.css also draws a #ccc "now" divider that vanishes on
   cream, so give it an ink hairline. */
#cf-wrap,
#canvas-time {
  background-color: var(--tf-cream) !important;
}
.cf-buttons {
  background-color: var(--tf-cream) !important;
  border-bottom: 1px solid var(--tf-ink) !important;
}
.cf-buttons a,
.cf-buttons a span {
  background-color: var(--tf-cream) !important;
  color: var(--tf-ink) !important;
}
.cf-buttons a.active,
.cf-buttons a.active span,
.cf-buttons a:focus,
.cf-buttons a:hover,
.cf-buttons a:active {
  background-color: var(--tf-ink) !important;
  color: var(--tf-cream) !important;
}
#cf-now {
  border-left: 1px solid var(--tf-ink) !important;
}

/* --- Open Baskerville everywhere --------------------------------------- */
html, body, button, input, textarea, select, optgroup,
#wrap, #main, .container, .header-title, .page-name,
h1, h2, h3, h4, h5, h6, a, p, span, li, label, div, mark,
.article-item, .article-item h2, .appArticleImageTitles, article-detail {
  font-family: "Open Baskerville", Baskerville, "Times New Roman", Georgia, serif !important;
}
/* article titles use <mark> (default yellow highlight) — keep the Baskerville
   text, drop the highlight so it reads on parchment */
.article-item mark, .appArticleImageTitles mark {
  background: transparent !important;
  color: inherit !important;
}

/* --- Warm parchment ground, dark ink ---------------------------------- */
html, body, #wrap, #main, #main-outlet-wrapper, .container, .left-sidebar {
  background-color: var(--tf-cream) !important;
  color: var(--tf-ink) !important;
}

/* --- Header: flip the black bar to parchment with dark text ------------ */
#header,
#header .header-top,
#header .header-bottom,
#header.hidden {
  background-color: var(--tf-cream) !important;
  color: var(--tf-ink) !important;
  border: none !important;
  box-shadow: none !important;
}
#header a,
#header .header-title,
#toggle-left-sidebar,
#header svg,
#header i,
#header .fa {
  color: var(--tf-ink) !important;
  fill: var(--tf-ink) !important;
}

/* the three-bar burger, drawn dark on parchment */
#header .con .bar,
#menu-toggle .bar {
  background-color: var(--tf-ink) !important;
}

/* big, bold, elegant serif title (like the mockup's "Time Flies"/"Scientists").
   Open Baskerville ships one weight, so `bold` synth-bolds it — fine at display size. */
.header-title,
.header-title a {
  font-size: 2.7rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em;
}
.header-title { padding-top: 8px !important; }
.header-title a { text-decoration: none !important; }

/* Per-page overrides: #main carries the route's pageName as a class
   (`<div id="main" class="{{pageName}}">`), so you can size/style each page.
   e.g. the News page header at 20px: */
#main.News .header-title,
#main.News .header-title a {
  font-size: 20px !important;
}

/* --- Left sidebar / slide-out menu on parchment ------------------------ */
.left-sidebar,
.left-sidebar a,
.left-sidebar #nav-news,
.left-sidebar [id^="nav-"] {
  background-color: var(--tf-cream) !important;
  color: var(--tf-ink) !important;
}

/* --- Muted secondary text (dates, counters) --------------------------- */
.header-bottom .count,
.char-count,
small {
  color: var(--tf-muted) !important;
}

/* --- Links: quiet, underlined (the mockup's nav style) ---------------- */
a:not(.boma-btn):not(#toggle-left-sidebar) {
  color: var(--tf-ink) !important;
}

/* --- Venue map markers: the Apple fly 🪰 (U+1FAB0) ---------------------
   In vector-tiles mode each festival venue is dropped as a custom marker
   element (components/app-maplibre.js, gated on BOMA_MAP_VENUE_EMOJI). Paint
   it with the bundled Apple fly PNG (Apple's official artwork, extracted from
   Apple Color Emoji), so it renders identically on every device — no reliance
   on the OS emoji font. Strip the default MapLibre pin chrome; centre anchor. */
.venue-emoji-marker {
  width: 30px;
  height: 30px;
  background: url("fly-marker.png") center / contain no-repeat;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer;
  /* url() is relative to THIS stylesheet (/assets/timeflies-overlay.css), so
     the PNG resolves to /assets/fly-marker.png. */
}

/* --- Welcome / intro screen (templates/splash.hbs #welcome) ------------------
   Minimal, elegant Time Flies intro: the fly (hero) → "Time Flies" (Open
   Baskerville) → "Use it Wisely ♥️" strapline → Enter. Parchment/ink palette,
   generous whitespace. The base skin paints a purple photo overlay (core.css
   #welcome / #welcome-copy) — override it wholesale here so only sites that
   link this overlay get the timeflies intro; every other skin is untouched. */
#welcome {
  background-image: none !important;
  background-color: var(--tf-cream) !important;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 2rem;
  box-sizing: border-box;
}

#welcome * {
  color: var(--tf-ink) !important;
}

/* The fly hero — the custom Time Flies fly, shown SMALL at its native size.
   The source art is only 41×33, so it is NEVER scaled up (upscaling looks
   mushy); a small, crisp fly sits above the wordmark. */
#welcome #welcome-hero {
  width: 41px;
  height: 33px;
  margin: 0 auto 1.75rem;
  background: url("fly-marker.png") center / 41px 33px no-repeat;
  filter: drop-shadow(0 3px 8px rgba(26, 26, 26, 0.16));
}

/* Reset the base skin's absolute/purple copy panel into simple centred type. */
#welcome #welcome-copy {
  position: static !important;
  background: none !important;
  width: auto !important;
  padding: 0 !important;
  bottom: auto !important;
  max-width: 34rem;
}

#welcome #welcome-title {
  font-family: "Open Baskerville", "Baskerville", Georgia, serif !important;
  font-size: clamp(2.75rem, 11vw, 4.5rem);
  line-height: 1.02;
  font-weight: normal;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
  color: var(--tf-ink) !important;
}

#welcome #welcome-strapline {
  font-family: "Open Baskerville", "Baskerville", Georgia, serif !important;
  font-size: clamp(1.05rem, 4.5vw, 1.5rem) !important;
  line-height: 1.4 !important;
  color: var(--tf-muted) !important;
  margin: 0 0 2.75rem !important;
  font-style: italic;
}

/* Enter button: quiet ink outline on parchment, not the skin's pink pill. */
#welcome #close-welcome-screen {
  font-family: "Open Baskerville", "Baskerville", Georgia, serif !important;
  background: transparent !important;
  color: var(--tf-ink) !important;
  border: 1px solid var(--tf-ink) !important;
  border-radius: 2px !important;
  padding: 0.6rem 2.4rem !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ===================================================================== *
 * Media player — audio player, video.js, Sounds/Videos pages (issue 13)
 * -----------------------------------------------------------------------
 * Theme the web media surfaces to the parchment/ink palette so they read
 * as one app — no stock video.js blue chrome, no generic controls. All
 * skin-scoped (this overlay only loads for timeflies), so other festivals
 * are unaffected.
 * ===================================================================== */

/* --- Article list cards: legible titles over photos -------------------- *
 * The Videos/News/Sounds list rows overlay the article title (an <h2><mark>)
 * on the card's cover photo (.appArticleImageTitles). The base skin uses light
 * text there, but this overlay's global `a, span, mark { color: ink }` rule
 * (up top) turned that title INK — dark text on a dark photo = invisible.
 * Restore legibility on-brand: a soft ink gradient ledge at the card foot +
 * cream Baskerville text with a faint shadow, so the title always reads while
 * staying parchment/ink. Scoped to the image-overlay title only, so the plain
 * .ls-article rows (Sounds) are untouched. */
.appArticleImageTitles {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  background: linear-gradient(
    to top,
    rgba(11, 11, 11, 0.82) 0%,
    rgba(11, 11, 11, 0.45) 34%,
    rgba(11, 11, 11, 0) 68%
  ) !important;
}
.appArticleImageTitles h2,
.appArticleImageTitles h3,
.appArticleImageTitles h2 mark,
.appArticleImageTitles h3 mark,
.appArticleImageTitles .article-date,
.appArticleImageTitles span {
  color: var(--tf-cream) !important;
  background: transparent !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
.appArticleImageTitles h2,
.appArticleImageTitles h2 mark {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
  padding: 0 0.75rem 0.7rem !important;
}
.appArticleImageTitles h3,
.appArticleImageTitles .article-date {
  font-size: 0.72rem !important;
  opacity: 0.85 !important;
  padding: 0 0.75rem 0.5rem !important;
}

/* --- Sounds/Videos LIST rows (.ls-article): white title -----------------
 * These rows put the title (h2.ls-title) + date over a dark image strip. The
 * overlay's global link colour turned the title INK, so it disappeared on the
 * dark strip while the date read white. Make the title white to match. */
.ls-article .ls-title,
.ls-article .ls-title mark {
  color: var(--tf-cream) !important;
  background: transparent !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}

/* --- AppAudio: a considered, tactile inline audio card ----------------- *
 * A proper editorial "now playing" card: parchment ground, a framed artwork
 * tile, Baskerville title, one satisfying play knob, and a thin themed
 * scrubber. Full-column (width:100% is load-bearing — the card sits inside a
 * position:fixed .app-modal ancestor, which makes a nested block-flex box
 * shrink-to-content in Blink; without it the whole player collapses to ~119px
 * and spills off the right edge). */
.app-audio-player {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 1.15rem !important;
  align-items: center !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)) ,
    var(--tf-sand) !important;
  border: 1px solid rgba(26, 26, 26, 0.16) !important;
  border-radius: 14px !important;
  padding: 1.05rem 1.2rem !important;
  margin: 0.25rem 0 1.75rem !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 26px -14px rgba(26, 26, 26, 0.4) !important;
}

.app-audio-artwork {
  flex: 0 0 auto !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 10px !important;
  /* the article thumb doesn't resolve in this view, so instead of an empty grey
     box use the Time Flies fly on parchment — a small, on-brand audio glyph. */
  background-image:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%),
    url("fly-marker.png") !important;
  background-size: auto, 38px auto !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-color: var(--tf-cream) !important;
  border: 1px solid rgba(26, 26, 26, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 6px 16px -10px rgba(26, 26, 26, 0.55) !important;
}

/* The persistent audio engine is a HEADLESS video.js element (application.hbs
   #media-player-host-audio) — the visible UI is .app-audio-player. It has no
   hiding CSS, so its default video.js control bar (playback-rate "1.0x", volume,
   progress) leaks into the page. Clip it offscreen but KEEP it in the render tree
   so audio keeps playing across navigation. */
#media-player-host-audio,
.video-js#media-player-host-audio,
#media-player-host-audio .vjs-control-bar {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-audio-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.app-audio-title {
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
  font-size: 1.12rem !important;
  color: var(--tf-ink) !important;
  margin: 0 0 0.7rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0.005em !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-audio-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* centred controls (artwork removed) */
  gap: 1.4rem !important;
  margin-bottom: 0.85rem !important;
}
/* sig 2026-07-20: drop the fly artwork tile + its box entirely */
.app-audio-artwork { display: none !important; }
/* the player repeated the article title (already shown as the article <h2>
   above it) — drop the in-player title so it isn't doubled. */
.app-audio-title { display: none !important; }
/* the forward-skip arrow should be a MIRROR of the back-skip arrow — the SAME
   glyph (fa-undo) flipped horizontally, not the different fa-repeat icon. Cover
   both FontAwesome mechanisms (the --fa var + direct ::before content). */
.app-audio-controls > button:last-child .fa {
  --fa: "\f0e2" !important; /* fa-undo */
  transform: scaleX(-1) !important; /* mirror → points forward */
}
.app-audio-controls > button:last-child .fa::before {
  content: "\f0e2" !important; /* fa-undo */
}

.app-audio-btn {
  background: transparent !important;
  border: none !important;
  color: var(--tf-ink) !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 1rem !important;
  -webkit-tap-highlight-color: transparent !important;
}

.app-audio-btn .fa { color: var(--tf-ink) !important; }

/* skip ±15 — a quiet, muted glyph with a small "15" tucked under it */
.app-audio-skip {
  position: relative !important;
  color: var(--tf-muted) !important;
  font-size: 0.9rem !important;
  gap: 0.15em !important;
  opacity: 0.85 !important;
  transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}
.app-audio-skip .fa { color: var(--tf-muted) !important; margin-right: 0.15em; }
.app-audio-skip span { font-size: 0.68rem !important; letter-spacing: 0.02em; }
.app-audio-skip:hover { opacity: 1 !important; color: var(--tf-ink) !important; }
.app-audio-skip:hover .fa { color: var(--tf-ink) !important; }
.app-audio-skip:active { transform: scale(0.92); }

/* the play knob — the tactile centrepiece, ink ring on parchment that
   inverts to a solid ink disc while playing */
.app-audio-play {
  width: 52px !important;
  height: 52px !important;
  border: 1.5px solid var(--tf-ink) !important;
  border-radius: 50% !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  color: var(--tf-ink) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 6px 14px -8px rgba(26, 26, 26, 0.5) !important;
  transition:
    background 0.2s ease, color 0.2s ease,
    transform 0.12s ease, box-shadow 0.2s ease !important;
}
.app-audio-play:hover {
  background: var(--tf-ink) !important;
  color: var(--tf-cream) !important;
  transform: translateY(-1px) !important;
}
.app-audio-play:active { transform: scale(0.95) !important; }
.app-audio-play:hover .fa { color: var(--tf-cream) !important; }
.app-audio-player.is-playing .app-audio-play {
  background: var(--tf-ink) !important;
  color: var(--tf-cream) !important;
  box-shadow:
    0 0 0 4px rgba(26, 26, 26, 0.08),
    0 6px 14px -8px rgba(26, 26, 26, 0.55) !important;
}
.app-audio-player.is-playing .app-audio-play .fa { color: var(--tf-cream) !important; }

.app-audio-scrub {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.app-audio-time {
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
  font-size: 0.82rem !important;
  color: var(--tf-muted) !important;
  font-variant-numeric: tabular-nums;
  min-width: 2.7em;
  text-align: center;
  letter-spacing: 0.02em;
}

/* thin scrubber: a hairline muted track with an ink thumb ringed in cream.
   The elapsed fill is painted via an accent-color-ish gradient trick isn't
   reliable cross-browser on <input range>, so we keep a clean muted track and
   a crisp, satisfying thumb — the elapsed read comes from the time labels. */
.app-audio-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto !important;
  height: 4px !important;
  background: rgba(26, 26, 26, 0.22) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  outline: none !important;
}
/* NB: base audio-player.css styles ALL input[type=range] with a red-orange thumb
   (#e96e57) + blue runnable-track (#2c437e), and `input[type=range]::thumb`
   OUT-SPECIFIES our `.app-audio-range::thumb` — so we MUST use !important to win.
   Also cancel the base thumb's `top:-10px` (sized for its 21px thumb / 2px track)
   and centre our 15px thumb on the 4px track with margin-top. */
.app-audio-range::-webkit-slider-runnable-track {
  height: 4px !important;
  background: rgba(26, 26, 26, 0.22) !important;
  border: none !important;
  border-radius: 999px !important;
}
.app-audio-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: var(--tf-ink) !important;
  border: 3px solid var(--tf-cream) !important;
  box-shadow: 0 2px 6px -1px rgba(26, 26, 26, 0.55) !important;
  margin-top: -6px !important; /* centre the 15px thumb on the 4px track */
  top: 0 !important; /* cancel base rule's top:-10px */
  cursor: pointer !important;
  transition: transform 0.14s ease;
}
.app-audio-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.app-audio-range::-webkit-slider-thumb:active { transform: scale(0.9); }
.app-audio-range::-moz-range-thumb {
  width: 15px !important;
  height: 15px !important;
  border: 3px solid var(--tf-cream) !important;
  border-radius: 50% !important;
  background: var(--tf-ink) !important;
  box-shadow: 0 2px 6px -1px rgba(26, 26, 26, 0.55) !important;
}
.app-audio-range::-moz-range-track {
  height: 4px !important;
  background: rgba(26, 26, 26, 0.22) !important;
  border-radius: 999px !important;
}
.app-audio-range::-moz-range-progress { /* elapsed fill on Firefox */
  height: 4px !important;
  background: var(--tf-ink) !important;
  border-radius: 999px !important;
}
.app-audio-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.14), 0 2px 6px -1px rgba(26, 26, 26, 0.55);
}

.app-audio-error {
  margin-top: 0.5rem !important;
  font-size: 0.8rem !important;
  color: #8a4b2f !important;
  font-style: italic;
}

/* --- Media external-link fallback (page URLs) -------------------------- */
.media-fallback { margin: 0.5rem 0 1.5rem !important; }
.media-external-link.btn {
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
  background: transparent !important;
  color: var(--tf-ink) !important;
  border: 1px solid var(--tf-ink) !important;
  border-radius: 2px !important;
  padding: 0.5rem 1.6rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.5em;
}
.media-external-link.btn:hover {
  background: var(--tf-ink) !important;
  color: var(--tf-cream) !important;
}

/* --- video.js re-theme: parchment/ink, cinematic + best-in-class ------- *
 * The inline hero video: full-bleed within the article column, gently
 * rounded, a soft parchment-ring play affordance over the poster, and a slim
 * control bar that reads on a bottom scrim and fades WHEN IDLE — but never to
 * zero-visibility-with-no-recovery (video.js's default drops the bar to
 * opacity 0 on inactivity, so on a still frame the controls look broken /
 * "not visible while playing"). We give it a graceful, still-legible fade +
 * a scrim so the controls always read, and snap them back on hover/tap/focus. */
.app-video-wrap {
  position: relative !important;
  margin: 0.25rem auto 1.25rem !important;
  max-width: 900px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #0b0b0b !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 40px -22px rgba(26, 26, 26, 0.75) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* clip children to radius in Safari */
}
.app-video-youtube {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0.25rem auto 1.25rem;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 18px 40px -22px rgba(26, 26, 26, 0.75);
}
.app-video-youtube iframe.media-youtube {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* a soft bottom scrim so the control bar always reads over bright footage,
   fading in/out in lock-step with the bar */
.video-js .vjs-control-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 11, 11, 0.78) 0%, rgba(11, 11, 11, 0.32) 45%, rgba(11, 11, 11, 0) 100%);
  z-index: -1;
}

/* control bar → glassy ink wash, Baskerville numerals, a touch taller so the
   controls feel generous and tappable */
.video-js .vjs-control-bar {
  height: 3.4em !important;
  padding: 0 0.35em !important;
  background: transparent !important;
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

/* THE FIX: don't let the idle fade hide the controls entirely. video.js sets
   .vjs-user-inactive .vjs-control-bar { opacity:0; visibility:hidden } once
   playing — override so idle keeps them at a soft, legible 0.55 (with the
   scrim they read fine) and stays interactive; active state is fully opaque. */
.video-js.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 0.55 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.video-js.vjs-has-started.vjs-user-active .vjs-control-bar,
.video-js.vjs-has-started:hover .vjs-control-bar {
  opacity: 1 !important;
  visibility: visible !important;
}

/* THE ICON FIX: video.js draws its play/pause/mute/fullscreen glyphs from the
   "VideoJS" icon font on ::before. The overlay's global "Open Baskerville
   everywhere" rule inherited onto those pseudo-elements, so the glyphs rendered
   blank — only the time text showed. Force the icon font back on the ICON
   pseudo-elements ONLY, so the glyphs return while the time-control numerals
   keep Baskerville (sig likes the Baskerville time). */
.video-js .vjs-icon-placeholder::before,
.video-js [class*="vjs-icon-"]::before,
.video-js .vjs-button > .vjs-icon-placeholder::before,
.video-js .vjs-play-control::before,
.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  font-family: VideoJS !important;
}

/* controls: parchment glyphs, comfortable hit areas, quiet hover */
.video-js .vjs-control { color: var(--tf-cream) !important; }
.video-js .vjs-button > .vjs-icon-placeholder::before { color: var(--tf-cream) !important; }
.video-js .vjs-button:hover { color: #ffffff !important; }
.video-js .vjs-time-control { color: var(--tf-cream) !important; opacity: 0.92 !important; }

/* progress-bar time tooltips ("0:04", the mouse-hover time) were wrapping one
   char per line — the control-bar font/width change dropped their nowrap. Force
   single-line, auto width, keep Baskerville numerals. */
.video-js .vjs-time-tooltip,
.video-js .vjs-mouse-display .vjs-time-tooltip,
.video-js .vjs-play-progress .vjs-time-tooltip {
  white-space: nowrap !important;
  width: auto !important;
  min-width: -webkit-max-content !important;
  min-width: max-content !important;
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
  padding: 2px 6px !important;
}

/* progress + volume → warm parchment fill, no video.js blue */
.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
  background-color: var(--tf-cream) !important;
}
.video-js .vjs-play-progress::before { color: var(--tf-cream) !important; } /* the scrubber knob */
.video-js .vjs-slider { background-color: rgba(233, 232, 221, 0.28) !important; }
.video-js .vjs-load-progress { background: rgba(233, 232, 221, 0.3) !important; }
.video-js .vjs-load-progress div { background: rgba(233, 232, 221, 0.5) !important; }
.video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 1.35em !important; } /* fatten on hover */
.video-js .vjs-slider:focus { text-shadow: none !important; box-shadow: none !important; }

/* fullscreen + all icon buttons stay on-brand; fullscreen is enabled by
   default in video.js — this just themes it so a video can go true fullscreen
   (native Fullscreen API on desktop/Android; iOS Safari uses the <video>'s own
   webkitEnterFullscreen, which video.js drives — the control still works). */
.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before,
.video-js .vjs-mute-control .vjs-icon-placeholder::before,
.video-js .vjs-play-control .vjs-icon-placeholder::before {
  color: var(--tf-cream) !important;
}
.video-js.vjs-fullscreen { border-radius: 0 !important; }

/* big play button → soft parchment ring on ink glass, matches the audio knob;
   scales up on hover for a tactile, premium feel */
.video-js .vjs-big-play-button {
  background-color: rgba(11, 11, 11, 0.42) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border: 2px solid rgba(233, 232, 221, 0.92) !important;
  border-radius: 50% !important;
  width: 82px !important;
  height: 82px !important;
  line-height: 78px !important;
  top: 50% !important;
  left: 50% !important;
  margin-top: -41px !important;
  margin-left: -41px !important;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6) !important;
  transition: background-color 0.22s ease, transform 0.2s ease, border-color 0.22s ease !important;
}
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  background-color: rgba(26, 26, 26, 0.72) !important;
  border-color: #ffffff !important;
  transform: translate(0, 0) scale(1.06) !important;
}
.video-js .vjs-big-play-button:active { transform: scale(0.97) !important; }
.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  color: var(--tf-cream) !important;
  font-size: 2.1em !important;
}

/* the loading spinner + error modal, on-brand */
.video-js .vjs-loading-spinner { border-color: rgba(233, 232, 221, 0.35) !important; border-top-color: var(--tf-cream) !important; }
.video-js .vjs-poster { background-color: #0b0b0b !important; }

/* --- Hero IMAGE (Sounds/Videos article detail top) -------------------- *
 * The top slot of a Sounds/Videos article renders AppModalImage — a cover
 * photo above the title + content. Give it an editorial, considered treatment:
 * full-bleed to the article column, a tasteful 16:10 crop, gently rounded
 * corners consistent with the audio card + video player, and a soft ink ledge
 * so an overlaid title (showTitle=true) always reads. It should feel like a
 * magazine hero, not a raw <img>. (News is parked + has no records — this is
 * scoped to the media detail hero via the .appModalImageWrap in the top slot.)
 * A subtle zoom on hover hints at the tap-to-expand lightbox below. */
.app-modal .appModalImageWrap {
  position: relative !important;
  width: calc(100% + 24px) !important;   /* bleed past the .content-wrap 12px gutters */
  margin: -12px -12px 1.25rem !important;
  border-radius: 0 0 18px 18px !important;
  overflow: hidden !important;
  background: #0b0b0b !important;
  box-shadow: 0 18px 38px -24px rgba(26, 26, 26, 0.7) !important;
  cursor: zoom-in !important;
}
.app-modal .appModalImageWrap .appModalImage,
.app-modal .appModalImageWrap .embedded-image {
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 220px !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.app-modal .appModalImageWrap:hover .appModalImage,
.app-modal .appModalImageWrap:hover .embedded-image { transform: scale(1.03) !important; }
/* a whisper of vignette + bottom scrim for depth and title legibility */
.app-modal .appModalImageWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(11, 11, 11, 0.5) 0%, rgba(11, 11, 11, 0) 42%),
    radial-gradient(120% 90% at 50% 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18) 100%);
}
/* keep any overlaid title/date above the scrim, in cream Baskerville */
.app-modal .appModalImageWrap .appArticleImageTitles { z-index: 2; }

/* --- Sounds / Videos list pages: parchment cards, Baskerville --------- */
.Sounds #info-article-name,
.Videos #info-article-name,
.Sounds h2,
.Videos h2 {
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
  color: var(--tf-ink) !important;
}

/* offscreen persistent audio host — never shown */
.media-player-host { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#media-player-host-audio { display: none !important; }

/* --- Add-to-Home-Screen menu button + iOS install sheet (issue 102) ----------
   The bottom-menu anchor inherits ink-on-cream from `.left-sidebar a`; paint its
   FontAwesome glyph to match and echo the skin's colour-lift hover (no pill —
   bottom rows are plain text). */
#nav-install {
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
  color: var(--tf-ink) !important;
  letter-spacing: 0.01em !important;
  transition: color 0.18s ease !important;
}
#nav-install .fa {
  color: var(--tf-muted) !important;
  transition: color 0.18s ease !important;
}
#nav-install:hover,
#nav-install:focus {
  color: var(--tf-ink) !important;
}
#nav-install:hover .fa {
  color: var(--tf-ink) !important;
}
#nav-install:active {
  transform: scale(0.98);
}

/* iOS install sheet — parchment surface + Baskerville, matching the skin's modal
   treatment and the ink-outline button (Welcome Enter idiom). */
.install-sheet {
  background: var(--tf-cream) !important;
  color: var(--tf-ink) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -18px 40px -18px rgba(26, 26, 26, 0.7) !important;
  font-family: "Open Baskerville", Baskerville, Georgia, serif !important;
}
.install-sheet-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  color: var(--tf-ink) !important;
}
.install-sheet-body {
  color: var(--tf-ink) !important;
  font-size: 1.05rem !important;
}
.install-share-cue {
  color: var(--tf-ink) !important;
}
.install-sheet-close:before,
.install-sheet-close:after {
  border-bottom-color: var(--tf-ink) !important;
}
.install-sheet-done.boma-btn {
  background: transparent !important;
  color: var(--tf-ink) !important;
  border: 1px solid var(--tf-ink) !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  padding: 0.6rem 2.4rem !important;
}
.install-sheet-done.boma-btn:hover {
  background: var(--tf-ink) !important;
  color: var(--tf-cream) !important;
}