/* ============================================================
   BASE STYLES
   Michelle Gale. Static site, no build step, no dependencies.
   Linen ground with full-bleed Obsidian and Deep Plum breaks.
   All values come from tokens.css. Add no raw colors here.

   Type roles, per section 02 of the guidelines:
     Spectral Light 300   display and section heads
     Spectral Light Ital  voice
     Jost Regular 400     labels and nav, caps, 0.22em
     Open Sans 400        body, 17 / 1.75 / 66ch
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--step-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* Ragged right everywhere. No justification and no hyphenation. */
  text-align: left; hyphens: none; -webkit-hyphens: none;
}

/* Full bleed or full column, never a rounded corner, never a drop
   shadow. Section 04 of the guidelines. */
img, svg, video { max-width: 100%; height: auto; display: block;
  border-radius: 0; box-shadow: none; }

/* ---- Display and heads: Spectral Light ------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 300;
  line-height: var(--lh-head); color: var(--heading);
  margin: 0 0 var(--s-3); text-wrap: balance;
}
h1 { font-size: var(--step-display); line-height: var(--lh-display); letter-spacing: -0.02em; }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-sub); }
h4 { font-size: var(--step-sub-2); }

p { margin: 0 0 var(--s-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* Voice. Spectral Light Italic, Oxblood on light. On dark ground
   the voice becomes the mark, so it turns Raw Gold. */
em, i { font-family: var(--font-display); font-weight: 300;
  font-style: italic; color: var(--voice); }

/* Links in body copy are Oxblood with a 1px Raw Gold underline
   offset 3px. */
a {
  color: var(--link); text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover { color: var(--text); text-decoration-color: var(--text); }

/* Focus states are a 2px outline in the voice colour and are never
   removed. On dark ground the voice becomes the mark, so the outline
   goes gold there too. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--voice); outline-offset: 3px;
}
.section--dark :focus-visible, .section--plum :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold); }

blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }

/* ---- Layout ------------------------------------------------- */
.wrap  { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--wrap-prose); }
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: var(--wrap-prose); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.55); }
.section--sunk  { background: var(--bg-sunk); }

/* Dark surfaces. These are the breaks, and they are where the
   depth comes from. */
.section--dark, .section--plum { color: var(--dk-text); }
.section--dark  { background: var(--bg-dark); }
.section--plum  { background: var(--bg-accent); }
/* Deep Slate on Deep Plum is 1.09:1, so headings never stay slate
   on a dark ground. They go Linen. */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--plum h1, .section--plum h2, .section--plum h3, .section--plum h4 { color: var(--dk-text); }
.section--dark a, .section--plum a { color: var(--dk-link); text-decoration-color: var(--gold); }
.section--dark a:hover, .section--plum a:hover { color: var(--dk-text); text-decoration-color: var(--dk-text); }
.section--dark em, .section--dark i, .section--plum em, .section--plum i { color: var(--dk-voice); }
.section--dark .eyebrow, .section--plum .eyebrow,
.section--dark .cta-note, .section--plum .cta-note,
.section--dark figcaption, .section--plum figcaption { color: var(--dk-soft); }
.section--dark .pillar, .section--dark .testimonial,
.section--plum .pillar, .section--plum .testimonial { border-top-color: var(--rule-dark); }
.section--dark .list-plain li, .section--plum .list-plain li { border-left-color: var(--rule-dark); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg-dark); color: var(--dk-text); padding: var(--s-2) var(--s-3); }
.skip-link:focus { left: var(--gutter); top: var(--s-2); }

/* ---- Labels and nav: Jost 400, caps, 0.22em -------------------- */
.eyebrow {
  font-family: var(--font-label); font-weight: 400; font-size: var(--step-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-soft); margin: 0 0 var(--s-3);
}

/* ---- Buttons --------------------------------------------------- */
/* Gold fill takes Obsidian text on it, because Raw Gold never
   carries text and a label on gold has to be the dark one. */
.btn {
  display: inline-block; font-family: var(--font-label); font-weight: 400;
  font-size: var(--step-label); letter-spacing: var(--track-label);
  text-transform: uppercase; text-decoration: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--gold); background: var(--gold); color: var(--on-gold);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { background: transparent; color: var(--text); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--rule); }
.btn--ghost:hover { background: var(--gold); color: var(--on-gold); }

/* On dark. The guidelines show the on-dark button as a Plum fill,
   which reads against Obsidian at 11.8:1 for the Linen label. On a
   Plum ground that would vanish, so there the button stays gold. */
.section--dark .btn {
  background: var(--plum); border-color: var(--plum); color: var(--dk-text);
}
.section--dark .btn:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.section--dark .btn--ghost { background: transparent; border-color: var(--gold); color: var(--gold); }
.section--dark .btn--ghost:hover { background: var(--gold); color: var(--on-gold); }
.section--plum .btn { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.section--plum .btn:hover { background: transparent; color: var(--gold); }
.section--plum .btn--ghost { background: transparent; border-color: var(--gold); color: var(--gold); }
.section--plum .btn--ghost:hover { background: var(--gold); color: var(--on-gold); }

.cta-note { font-family: var(--font-label); font-size: var(--step-meta); color: var(--text-soft); margin-top: var(--s-2); }

/* ---- Header and nav -------------------------------------------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--bg);
  position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: 4.75rem; }
/* The header runs the full width of the viewport, gutter to gutter, so
   eight items and the logotype fit beside each other (5 September). */
.site-header .wrap { max-width: none; }

/* The wordmark is a logotype built from the type system, no new face:
   her name in Spectral Light small caps, tracked like the title, the
   initials standing taller, on a hairline gold rule that turns Oxblood
   on hover (5 September, Cléa: "make her name in the nav a logotype").
   There is no logo mark: the stones belong to the podcast cover. */
.wordmark { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.3rem; text-decoration: none;
  color: var(--heading); white-space: nowrap; padding-bottom: 0.1rem; }
.wordmark:hover { color: var(--voice); text-decoration: none; }
.wordmark__name { font-family: var(--font-display); font-weight: 300; font-variant-caps: small-caps;
  font-size: 1.5rem; line-height: 1; letter-spacing: 0.16em; }
.wordmark__name::first-letter { font-size: 1.18em; }
.wordmark::after { content: ""; display: block; height: 1px; background: var(--gold); transition: background var(--transition); }
.wordmark:hover::after { background: var(--voice); }
@media (max-width: 30rem) {
  .wordmark__name { font-size: 1.25rem; letter-spacing: 0.14em; }
}

/* 0.22em is wide, so the row needs a tighter gap than the rest of
   the site. With eight items the row collapses to the menu under 78rem
   (5 September, when Podcast and the full Integration Resources label
   joined the nav). */
.nav { margin-left: auto; }
.nav__list { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end;
  gap: 0.5rem; margin: 0; padding: 0; }
.nav__list a { font-family: var(--font-label); font-weight: 400; font-size: var(--step-label);
  letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
  white-space: nowrap; color: var(--text-soft); }
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--voice); }
.nav__list a[aria-current="page"] { border-bottom: 1px solid var(--gold); padding-bottom: 3px; }

.nav__toggle { display: none; background: none; border: 1px solid var(--gold);
  padding: var(--s-1) var(--s-2); font-family: var(--font-label); font-size: var(--step-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text); cursor: pointer; }

@media (max-width: 78rem) {
  .nav__toggle { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg);
         border-bottom: 1px solid var(--rule); display: none; }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 0;
               padding: var(--s-2) var(--gutter) var(--s-4); }
  .nav__list li { width: 100%; }
  .nav__list a { display: block; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-quiet); }
}

/* Integration Resources opens a small menu of its sections (7 September,
   Cléa: "a little drop down menu ... so somebody can easily scan and
   click on the one that they need"). Hover or keyboard focus opens it on
   the wide nav, with a hover bridge under the link so the pointer can
   travel down into it; in the collapsed menu the sections sit indented
   under the page, always visible. No JavaScript. */
.nav__group { position: relative; }
.nav__group > a::after { content: ""; display: inline-block; width: .36em; height: .36em; margin-left: .5em;
  vertical-align: .14em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); }
.nav__group::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.25rem; }
.nav__sub { list-style: none; margin: 0; padding: var(--s-2) 0; position: absolute; left: 50%; top: calc(100% + 1.25rem);
  transform: translateX(-50%); min-width: 14rem; background: var(--bg); border: 1px solid var(--rule);
  display: none; z-index: 60; text-align: left; }
.nav__group:hover > .nav__sub, .nav__group:focus-within > .nav__sub { display: block; }
.nav__sub a { display: block; padding: var(--s-1) var(--s-3); }
.nav__sub a[aria-current="page"] { border-bottom: 0; padding-bottom: var(--s-1); }
@media (max-width: 78rem) {
  .nav__group::before, .nav__group > a::after { display: none; }
  .nav__sub { position: static; transform: none; display: block; border: 0; min-width: 0;
    padding: 0 0 0 var(--s-3); background: transparent; }
  .nav__sub a { padding: var(--s-2) 0; }
}
/* The sections the menu points at clear the sticky header when landed on. */
#poems, #guides, #five-meo, #fireside, #tandava { scroll-margin-top: 6.5rem; }

/* ---- Hero ------------------------------------------------------ */
.hero { padding-block: clamp(3.5rem, 2rem + 9vw, 9.5rem); }
.hero__title { max-width: 17ch; margin-bottom: var(--s-3); }
/* The tagline is the voice: Spectral Light Italic, 24 / 1.45, Plum. */
.hero__sub { font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: var(--step-voice); line-height: var(--lh-voice); color: var(--voice);
  max-width: 44ch; margin-bottom: var(--s-4); }
.section--dark .hero__sub, .section--plum .hero__sub { color: var(--dk-voice); }
.hero__figure { margin-top: var(--s-5); }
.hero__figure img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
figcaption { font-family: var(--font-label); font-size: var(--step-meta); color: var(--text-soft); margin-top: var(--s-2); }

/* Image slots. Deliberately unfinished, each waiting on a real
   photograph: real rooms, real bodies, one light source, low and
   natural. Faces at rest. Hands. The ordinary Tuesday after. */
.imgslot { width: 100%; aspect-ratio: 16 / 9; border: 1px dashed var(--gold);
  background: repeating-linear-gradient(45deg, var(--bg-sunk), var(--bg-sunk) 10px, var(--bg) 10px, var(--bg) 20px);
  display: grid; place-items: center; color: var(--text-soft);
  font-family: var(--font-label); font-size: var(--step-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  text-align: center; padding: var(--s-3); border-radius: 0; }
.imgslot--portrait { aspect-ratio: 4 / 5; }
.section--dark .imgslot, .section--plum .imgslot {
  color: var(--dk-soft); background: none; border-color: var(--rule-dark); }

/* ---- Lede and pull quote --------------------------------------- */
.lede { font-size: var(--step-sub); line-height: 1.6; max-width: 44ch; }
/* Pull quotes are the voice. */
.pullquote { font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.4; max-width: 30ch; text-wrap: balance;
  color: var(--voice); border-left: 2px solid var(--gold);
  padding-left: var(--s-4); margin-block: var(--s-5); }
.section--dark .pullquote, .section--plum .pullquote { color: var(--dk-voice); }

/* ---- Grids ------------------------------------------------------ */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.split { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1.35fr; align-items: start; } }

/* Pillars. Two columns deliberately, so four reads 2x2 rather than
   3+1. Works at three (decisions.md §6). */
.pillars { list-style: none; margin: 0; padding: 0; }
.pillars.grid { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .pillars.grid { grid-template-columns: 1fr 1fr; } }
.pillar { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.pillar h3 { margin-bottom: var(--s-1); }
.pillar__sub { font-family: var(--font-display); font-weight: 300; font-style: italic;
  color: var(--voice); margin-bottom: var(--s-2); }
.section--dark .pillar__sub, .section--plum .pillar__sub { color: var(--dk-voice); }
.pillar p { font-size: var(--step-body); }

.door { display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule-quiet); border-radius: 0; padding: var(--s-4);
  transition: border-color var(--transition), background var(--transition); }
.door:hover { border-color: var(--gold); background: var(--bg-sunk); color: inherit; text-decoration: none; }
.door h3 { margin-bottom: var(--s-2); }
.door p { font-size: var(--step-body); color: var(--text-soft); margin: 0; }
.door__more { display: inline-block; margin-top: var(--s-3); font-family: var(--font-label);
  font-size: var(--step-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--voice); }
.section--dark .door, .section--plum .door { border-color: var(--rule-dark); }
.section--dark .door p, .section--plum .door p { color: var(--dk-soft); }
.section--dark .door__more, .section--plum .door__more { color: var(--gold); }
.section--dark .door:hover, .section--plum .door:hover { border-color: var(--gold); background: rgba(184,150,106,.07); }

/* ---- Testimonials ----------------------------------------------- */
.testimonial { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.testimonial blockquote { font-family: var(--font-display); font-weight: 300;
  font-style: italic; font-size: var(--step-voice); line-height: var(--lh-voice);
  margin-bottom: var(--s-2); color: var(--voice); }
.section--dark .testimonial blockquote, .section--plum .testimonial blockquote { color: var(--dk-text); }
.testimonial cite { font-style: normal; font-family: var(--font-label); font-size: var(--step-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-soft); }
.section--dark .testimonial cite, .section--plum .testimonial cite { color: var(--dk-soft); }
.is-placeholder { opacity: 0.85; }
.is-placeholder blockquote::before { content: "PLACEHOLDER. "; font-family: var(--font-label);
  font-style: normal; letter-spacing: var(--track-label); font-size: var(--step-label); color: var(--text-soft); }
.section--dark .is-placeholder blockquote::before,
.section--plum .is-placeholder blockquote::before { color: var(--dk-soft); }

/* ---- Lists ------------------------------------------------------ */
.list-plain { list-style: none; margin: 0 0 var(--s-3); padding: 0; max-width: var(--measure); }
.list-plain li { padding-left: var(--s-3); border-left: 1px solid var(--rule-quiet); margin-bottom: var(--s-2); }

/* ---- Forms ------------------------------------------------------ */
/* A 1px rule on Linen with a Jost label above it. */
.field { margin-bottom: var(--s-3); max-width: 34rem; }
.field label { display: block; font-family: var(--font-label); font-size: var(--step-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--s-1); }
.field input, .field textarea { width: 100%; font-family: var(--font-body); font-size: var(--step-body);
  line-height: var(--lh-body); color: var(--text); background: transparent; border: 0;
  border-bottom: 1px solid var(--rule); padding: var(--s-2) 0; border-radius: 0; box-shadow: none; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--voice); }
.field textarea { min-height: 9rem; resize: vertical; }
.section--dark .field label, .section--plum .field label { color: var(--dk-soft); }
.section--dark .field input, .section--dark .field textarea,
.section--plum .field input, .section--plum .field textarea { color: var(--dk-text); }
.section--dark .field input:focus, .section--dark .field textarea:focus,
.section--plum .field input:focus, .section--plum .field textarea:focus { border-bottom-color: var(--gold); }
/* Honeypot. Hidden from people, visible to bots. */
.hp { position: absolute !important; left: -9999px !important; }

/* ---- Embeds ------------------------------------------------------ */
/* Third-party embeds do not inherit these styles (decisions.md §9).
   Each one gets checked against the palette by hand. */
.embed { border: 1px solid var(--rule); border-radius: 0; min-height: 40rem; width: 100%;
  display: grid; place-items: center; color: var(--text-soft);
  font-family: var(--font-label); letter-spacing: var(--track-label);
  text-transform: uppercase; font-size: var(--step-label); }
.section--dark .embed, .section--plum .embed { border-color: var(--rule-dark); color: var(--dk-soft); }
.embed-note { font-family: var(--font-label); font-size: var(--step-meta); color: var(--text-soft); }

/* ---- Footer ------------------------------------------------------ */
.site-footer { background: var(--bg-dark); color: var(--dk-text);
  padding-block: var(--s-6) var(--s-4); }
.site-footer h2 { font-size: var(--step-sub); color: var(--dk-text); margin-bottom: var(--s-2); }
.site-footer a { color: var(--dk-link); text-decoration-color: var(--gold); }
.site-footer a:hover { color: var(--dk-text); text-decoration-color: var(--dk-text); }
.footer__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--s-1); }
.footer__list a { font-family: var(--font-label); font-size: var(--step-label); letter-spacing: var(--track-label);
  text-transform: uppercase; text-decoration: none; color: var(--dk-soft); }
.footer__list a:hover { color: var(--gold); }
.footer__bar { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
  font-family: var(--font-label); font-size: var(--step-meta); color: var(--dk-soft); }
.footer__bar a { text-decoration: none; }
.site-footer .cta-note, .site-footer p { color: var(--dk-soft); }
.site-footer .btn { background: var(--plum); border-color: var(--plum); color: var(--dk-text); }
.site-footer .btn:hover { background: transparent; border-color: var(--gold); color: var(--gold); }

/* ---- Utility ------------------------------------------------------ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.stack > * + * { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.todo { border-left: 3px solid var(--voice); background: var(--bg-sunk);
  padding: var(--s-2) var(--s-3); font-family: var(--font-label); font-size: var(--step-meta);
  color: var(--text-soft); max-width: var(--measure); }
.todo::before { content: "TO COME "; letter-spacing: var(--track-label); color: var(--voice); }
.section--dark .todo, .section--plum .todo, .site-footer .todo {
  background: rgba(244,240,232,.06); color: var(--dk-soft); border-left-color: var(--gold); }
/* The footer is Obsidian but is not a .section, so it needs saying
   twice. Plum on Obsidian is 1.5:1 and would be unreadable. */
.section--dark .todo::before, .section--plum .todo::before,
.site-footer .todo::before { color: var(--gold); }

/* Calendly, inline. Its own colours are passed in the URL so it sits
   on Linen with Obsidian text and the voice colour for the accent. */
.embed--calendly { border: 0; min-height: 44rem; display: block; }

/* ---- The podcast's episodes (7 September) ------------------------
   Rendered by js/podcast.js from the Podbean feed. The player is the
   browser's own, in the voice colour, full width of the column. */
.episodes { max-width: var(--wrap-prose); }
.episode { border-top: 1px solid var(--rule); padding-top: var(--s-4); margin-top: var(--s-5); }
.episode:first-child { margin-top: 0; }
.episode h3 { margin-bottom: var(--s-3); }
.player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-4); }
.player audio { display: none; }
.player__play { font-family: var(--font-label); font-size: var(--step-label); letter-spacing: var(--track-label);
  text-transform: uppercase; background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold);
  padding: var(--s-1) var(--s-3); min-width: 6.5rem; cursor: pointer; border-radius: 0;
  transition: background var(--transition), color var(--transition); }
.player__play:hover { background: transparent; color: var(--text); }
.player__time { font-family: var(--font-label); font-size: var(--step-meta); color: var(--text-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The bar: a hairline that fills gold as the episode plays. */
.player__bar { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: var(--rule-quiet);
  background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat;
  background-size: 0 100%; margin: 0; cursor: pointer; border-radius: 0; }
.player__bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px;
  background: var(--voice); border: 0; border-radius: 0; }
.player__bar::-moz-range-thumb { width: 11px; height: 11px; background: var(--voice); border: 0; border-radius: 0; }
.player__bar::-moz-range-track { height: 1px; background: transparent; }
.player__bar::-moz-range-progress { height: 1px; background: var(--gold); }
@media (max-width: 30rem) { .player { grid-template-columns: auto 1fr; } .player__time { grid-column: 2; } }
.episode__notes p { margin-bottom: var(--s-2); }
.podcast__elsewhere { font-family: var(--font-label); font-size: var(--step-meta); letter-spacing: var(--track-label); text-transform: uppercase; }