/* =========================================================
   HISTORYAS · site styles
   One stylesheet for every page. Colours and fonts live in the
   tokens just below: change a value there and it changes everywhere.
   ========================================================= */

/* ---------- fonts, served from this site (no Google request) ---------- */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(../fonts/bodoni-moda-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url(../fonts/bodoni-moda-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/jost-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/jost-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --hy-ground: #070706;
  --hy-panel:  #131210;
  --hy-paper:  #EDE7DB;
  --hy-soft:   #D6CFC2;
  --hy-muted:  #B7B0A4;
  --hy-dim:    #9A9285;
  --hy-line:   #1F1D1A;
  --hy-line2:  #3A362F;
  --hy-flame:  #C9A45E;
  --hy-yellow: #E8B84A;  /* the y in the Historyas wordmark */
  --hy-serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --hy-sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- anything with the hidden attribute stays hidden, whatever its display style ---------- */
[hidden] { display: none !important; }

/* ---------- site language (EN default, ES when html has .hy-lang-es) ---------- */
html:not(.hy-lang-es) .hy-es { display: none !important; }
html.hy-lang-es .hy-en { display: none !important; }

/* ---------- page background ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hy-ground); color: var(--hy-paper);
  font-family: var(--hy-sans); font-weight: 400;
}
.hy-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--hy-flame); color: var(--hy-ground); padding: 10px 16px; font-family: var(--hy-sans); }
.hy-skip:focus { left: 16px; }
.hy-wrap { max-width: 1248px; margin: 0 auto; padding: 0 40px; }
main.hy-wrap { padding-bottom: 96px; }

/* ---------- site header ---------- */
.hy-header { border-bottom: 1px solid var(--hy-line); }
.hy-header .hy-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; flex-wrap: wrap; }
.hy-logo { font-family: var(--hy-serif); font-size: 30px; line-height: 1; color: var(--hy-paper); text-decoration: none; }
.hy-logo .hy-y { font-style: italic; color: var(--hy-yellow); }
.hy-nav-wrap { display: flex; align-items: center; gap: 28px; }
.hy-nav { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.hy-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--hy-sans); font-size: 15px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hy-paper); text-decoration: none; border-bottom: 1px solid transparent; white-space: nowrap;
}
.hy-nav a:hover { color: var(--hy-flame); }
.hy-nav a[aria-current="page"] { color: var(--hy-flame); }

/* ---------- language pill ---------- */
.hy-lang {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--hy-line2); border-radius: 999px; padding: 3px;
}
.hy-lang-btn {
  appearance: none; border: 0; border-radius: 999px; cursor: pointer;
  min-width: 46px; height: 36px; padding: 0 12px;
  font-family: var(--hy-sans); font-size: 13px; font-weight: 400; letter-spacing: .12em;
  background: transparent; color: var(--hy-paper);
}
.hy-lang-btn[aria-pressed="true"] { background: var(--hy-flame); color: var(--hy-ground); }
.hy-lang-btn:focus-visible, .hy-nav a:focus-visible, .hy-logo:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 2px; }

/* ---------- site footer ---------- */
.hy-footer { border-top: 1px solid var(--hy-line); padding: 32px 0 40px; }

/* =========================================================
   Page content. Everything lives inside <div class="hy">
   ========================================================= */
.hy {
  max-width: 1248px; margin: 0 auto; box-sizing: border-box;
  color: var(--hy-paper); font-family: var(--hy-sans); font-weight: 400;
  font-size: 18px; line-height: 1.7;
}
.hy *, .hy *::before, .hy *::after { box-sizing: border-box; }
.hy p, .hy h1, .hy h2, .hy h3, .hy blockquote, .hy figure { margin: 0; padding: 0; }
.hy h1, .hy h2, .hy h3 {
  font-family: var(--hy-serif); font-weight: 500; color: var(--hy-paper);
  letter-spacing: 0; text-transform: none; line-height: 1.12;
}
.hy img { display: block; max-width: 100%; height: auto; }
.hy a { color: var(--hy-flame); text-decoration: none; }
.hy a:hover { color: var(--hy-paper); }
.hy .it { font-style: italic; }

.hy-eyebrow {
  font-family: var(--hy-sans); font-size: 13px; font-weight: 400; line-height: 1.4;
  letter-spacing: .28em; text-transform: uppercase; color: var(--hy-flame);
}
.hy-meta { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--hy-dim); line-height: 1.5; }
.hy-soft { color: var(--hy-soft); }
.hy-dim  { color: var(--hy-dim); }
.hy-aside { font-family: var(--hy-serif); font-style: italic; font-size: 22px; color: var(--hy-dim); line-height: 1.4; }

/* buttons */
.hy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 1px solid var(--hy-flame);
  font-family: var(--hy-sans); font-size: 14px; font-weight: 400; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: var(--hy-flame) !important; transition: background .2s, color .2s;
}
.hy-btn:hover { background: var(--hy-flame); color: var(--hy-ground) !important; }
.hy-btn--solid { background: var(--hy-flame); color: var(--hy-ground) !important; }
.hy-btn--solid:hover { background: var(--hy-paper); border-color: var(--hy-paper); }
.hy-btn--ghost { border-color: var(--hy-line2); color: var(--hy-paper) !important; }
.hy-btn--ghost:hover { background: transparent; border-color: var(--hy-flame); color: var(--hy-flame) !important; }
.hy-btn svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.hy-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; }
.hy-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- HOME ---------- */
.hy-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 80px; align-items: center; padding: 48px 0 72px; }
.hy-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--hy-line); }
.hy-hero-text { display: flex; flex-direction: column; gap: 24px; }
.hy-hero-text h1 { font-style: italic; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; }
.hy-deck { font-size: 22px; line-height: 1.45; }
.hy-hero-text .hy-soft { max-width: 560px; }
.hy-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.hy-small { font-size: 14px; color: var(--hy-dim); line-height: 1.5; }

.hy-listen { display: flex; align-items: center; gap: 40px; padding: 40px 0 64px; border-top: 1px solid var(--hy-line); }
.hy-listen .hy-eyebrow { white-space: nowrap; }
.hy-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.hy-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--hy-line2); border-radius: 999px;
  color: var(--hy-paper) !important; font-size: 15px; font-weight: 400; line-height: 1;
}
.hy-pill:hover { border-color: var(--hy-flame); }
.hy-pill svg { width: 18px; height: 18px; fill: none; stroke: var(--hy-flame); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.hy-panel { background: var(--hy-panel); padding: 72px 64px; }
.hy-block { padding: 80px 0; }
.hy-h2 { font-size: clamp(30px, 3vw, 40px); }
.hy-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; margin-top: 44px; }
.hy-step { border-top: 1px solid var(--hy-flame); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.hy-step h3 { font-style: italic; font-size: 26px; }
.hy-step p, .hy-feat p { font-size: 17px; line-height: 1.6; color: var(--hy-soft); }
.hy-feat { display: flex; flex-direction: column; gap: 10px; }
.hy-feat .hy-eyebrow { letter-spacing: .22em; }
.hy-panel .hy-link { margin-top: 40px; }

.hy-signup { border: 1px solid var(--hy-line2); padding: 48px 56px; display: flex; flex-direction: column; gap: 12px; }
.hy-signup h2 { font-size: 36px; }

/* ---------- EPISODE LIST ---------- */
.hy-pagehead { display: flex; flex-direction: column; gap: 18px; max-width: 760px; padding: 48px 0 48px; }
.hy-pagehead h1 { font-size: clamp(44px, 5vw, 64px); }
.hy-pagehead p { font-size: 19px; line-height: 1.6; color: var(--hy-soft); }
.hy-feature { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 56px; align-items: center; padding: 40px; background: var(--hy-panel); }
.hy-feature img { width: 300px; height: 300px; object-fit: cover; }
.hy-feature-text { display: flex; flex-direction: column; gap: 14px; }
.hy-feature-text h2 { font-style: italic; font-size: clamp(32px, 3.4vw, 44px); }
.hy-feature-text p { color: var(--hy-soft); max-width: 720px; }
.hy-feature-text .hy-btn { align-self: flex-start; margin-top: 8px; }
.hy-list { margin-top: 56px; border-bottom: 1px solid var(--hy-line); }
.hy-list > .hy-meta { padding-bottom: 16px; }
.hy-ep-row { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 40px; align-items: center; padding: 36px 0; border-top: 1px solid var(--hy-line); }
.hy-num { font-family: var(--hy-serif); font-size: 60px; line-height: 1; color: var(--hy-flame); }
.hy-ep-row h3 { font-style: italic; font-size: 32px; margin: 8px 0 8px; }
.hy-ep-row p { font-size: 17px; line-height: 1.6; color: var(--hy-soft); max-width: 720px; }

/* ---------- EPISODE PAGE ---------- */
.hy-ep-head { display: flex; gap: 40px; align-items: center; padding: 16px 0 40px; }
.hy-ep-head img { width: 180px; height: 180px; object-fit: cover; border: 1px solid var(--hy-line); flex-shrink: 0; }
.hy-ep-head > div { display: flex; flex-direction: column; gap: 14px; }
.hy-ep-head h1 { font-style: italic; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; }
.hy-back { color: var(--hy-dim) !important; font-size: 15px; }
.hy-back:hover { color: var(--hy-paper) !important; }

.hy-player {
  position: -webkit-sticky; position: sticky; top: var(--hy-sticky-top, 0px); z-index: 50;
  display: flex; align-items: center; gap: 28px; padding: 18px 0;
  background: var(--hy-ground); border-top: 1px solid var(--hy-line); border-bottom: 1px solid var(--hy-line);
}
.hy-play {
  appearance: none; width: 56px; height: 56px; flex-shrink: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--hy-flame); color: var(--hy-ground); display: flex; align-items: center; justify-content: center; padding: 0;
}
.hy-play svg { width: 18px; height: 18px; fill: currentColor; }
.hy-play .hy-i-pause { display: none; }
.hy-player.is-playing .hy-i-pause { display: block; }
.hy-player.is-playing .hy-i-play { display: none; }
.hy-play:focus-visible, .hy-mode:focus-visible, .hy-bar:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 3px; }
.hy-track { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hy-track-top { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--hy-dim); line-height: 1.3; }
.hy-track-top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hy-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hy-bar { position: relative; height: 18px; cursor: pointer; }
.hy-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: #2A2723; }
.hy-bar-fill { position: absolute; left: 0; top: 8px; height: 3px; width: 0; background: var(--hy-flame); }
.hy-modes { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hy-modes > span { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--hy-dim); }
.hy-seg { display: flex; border: 1px solid var(--hy-line2); }
.hy-mode {
  appearance: none; border: 0; border-left: 1px solid var(--hy-line2); cursor: pointer;
  height: 44px; padding: 0 18px; background: transparent; color: var(--hy-paper);
  font-family: var(--hy-sans); font-size: 14px; font-weight: 400; line-height: 1;
}
.hy-mode:first-child { border-left: 0; }
.hy-mode[aria-pressed="true"] { background: var(--hy-flame); color: var(--hy-ground); font-weight: 400; }

/* transcript */
.hy-tx { padding: 24px 0 0; }
.hy .hy-epi { text-align: center; max-width: 860px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 14px; border: 0; }
.hy-epi .hy-t-es { font-family: var(--hy-serif); font-style: italic; font-size: 26px; line-height: 1.5; }
.hy-epi .hy-t-en { font-size: 18px; line-height: 1.6; color: var(--hy-muted); }
.hy-epi cite { font-style: normal; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--hy-flame); }
.hy-tx-sec { display: flex; flex-direction: column; gap: 28px; padding-top: 64px; }
.hy-tx-h { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--hy-line); }
.hy-tx-h h2 { font-size: 34px; }
.hy-tx[data-mode="both"] .hy-tx-h .hy-t-en {
  font-family: var(--hy-sans); font-size: 13px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--hy-flame);
}
.hy-row p.hy-t-es { font-family: var(--hy-serif); font-size: 21px; line-height: 1.6; color: var(--hy-paper); }
.hy-row p.hy-t-en { font-size: 18px; line-height: 1.7; color: var(--hy-muted); }
.hy-tx[data-mode="both"] .hy-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; }
.hy-tx[data-mode="es"] .hy-t-en, .hy-tx[data-mode="en"] .hy-t-es { display: none; }
.hy-tx[data-mode="es"] .hy-row, .hy-tx[data-mode="en"] .hy-row { max-width: 760px; margin: 0 auto; width: 100%; }
.hy-tx[data-mode="es"] .hy-row p.hy-t-es { font-size: 24px; }
.hy-tx[data-mode="en"] .hy-row p.hy-t-en { font-size: 20px; color: var(--hy-paper); }
.hy-tx[data-mode="es"] .hy-tx-h, .hy-tx[data-mode="en"] .hy-tx-h { max-width: 760px; margin: 0 auto; width: 100%; }

.hy-vocab { margin-top: 88px; padding: 48px 56px; background: var(--hy-panel); }
.hy-vocab-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.hy-vocab-head h2 { font-size: 34px; }
.hy-vocab dl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 64px; margin: 28px 0 0; }
.hy-vocab dl > div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid #2A2723; }
.hy-vocab dt { font-family: var(--hy-serif); font-style: italic; font-size: 21px; color: var(--hy-paper); margin: 0; }
.hy-vocab dd { font-size: 17px; color: var(--hy-muted); text-align: right; margin: 0; }

/* ---------- ABOUT ---------- */
.hy-about { display: grid; grid-template-columns: 440px minmax(0,1fr); gap: 80px; align-items: center; padding: 48px 0 72px; }
.hy-about img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hy-about img.hy-about-full { aspect-ratio: 2 / 3; }
.hy-about-text { display: flex; flex-direction: column; gap: 22px; }
.hy-about-text h1 { font-size: clamp(40px, 4.4vw, 56px); }
.hy-about-text p { font-size: 19px; color: var(--hy-soft); max-width: 680px; }
.hy-contact { display: flex; flex-direction: column; gap: 18px; padding-top: 64px; border-top: 1px solid var(--hy-line); max-width: 760px; }
.hy-contact .hy-mail { font-size: 20px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.hy-contact .hy-mail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hy .hy-note { background: var(--hy-panel); padding: 24px; font-size: 16px; line-height: 1.6; color: var(--hy-soft); }

/* ---------- FOOTER ---------- */
.hy-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--hy-dim); padding: 8px 0; }
.hy-foot .it { font-family: var(--hy-serif); font-size: 17px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .hy-hero, .hy-about { gap: 48px; }
  .hy-player { flex-wrap: wrap; row-gap: 14px; }
  .hy-modes { width: 100%; justify-content: space-between; }
}
@media (max-width: 800px) {
  .hy { font-size: 17px; }
  .hy-hero, .hy-about { grid-template-columns: 1fr; gap: 32px; padding-top: 16px; }
  .hy-about img { max-width: 420px; }
  .hy-listen { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hy-grid3 { grid-template-columns: 1fr; gap: 36px; }
  .hy-panel, .hy-vocab, .hy-signup { padding: 40px 24px; }
  .hy-block { padding: 56px 0; }
  .hy-feature { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .hy-feature img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .hy-ep-row { grid-template-columns: 1fr; gap: 12px; }
  .hy-ep-row .hy-btn { justify-self: start; }
  .hy-num { font-size: 44px; }
  .hy-ep-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hy-ep-head img { width: 120px; height: 120px; }
  .hy-tx[data-mode="both"] .hy-row { grid-template-columns: 1fr; gap: 6px; }
  .hy-tx-sec { gap: 24px; padding-top: 48px; }
  .hy-tx[data-mode="es"] .hy-row p.hy-t-es { font-size: 21px; }
  .hy-epi .hy-t-es { font-size: 22px; }
  .hy-vocab dl { grid-template-columns: 1fr; }
  .hy-modes > span { display: none; }
  .hy-seg { width: 100%; }
  .hy-mode { flex: 1 1 0; padding: 0 8px; }
}


/* ---------- forms (Netlify Forms: sign-up and contact) ---------- */
.hy-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.hy-form--stack { flex-direction: column; flex-wrap: nowrap; max-width: 640px; gap: 16px; }
.hy-field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; }
.hy-field label { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--hy-dim); }
.hy-input {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--hy-line2); border-radius: 0;
  background: var(--hy-ground); color: var(--hy-paper);
  font-family: var(--hy-sans); font-size: 17px; font-weight: 400;
}
textarea.hy-input { min-height: 160px; resize: vertical; line-height: 1.6; }
.hy-input::placeholder { color: var(--hy-dim); }
.hy-input:focus { outline: none; border-color: var(--hy-flame); }
.hy-form--stack .hy-field { flex: none; }
.hy-form .hy-btn { align-self: flex-end; }
.hy-contact .hy-note { margin-top: 32px; }
.hy-form--stack .hy-btn { align-self: flex-start; }
.hy-hidden { position: absolute; left: -9999px; }

/* "Coming soon" button for episodes whose page is not live yet */
.hy-btn--soon { border-color: var(--hy-line2); color: var(--hy-dim) !important; cursor: default; }
.hy-btn--soon:hover { background: transparent; color: var(--hy-dim) !important; }

/* thank-you page */
.hy-thanks { max-width: 720px; padding: 96px 0; display: flex; flex-direction: column; gap: 22px; }
.hy-thanks h1 { font-style: italic; font-size: clamp(40px, 5vw, 60px); }
.hy-thanks p { font-size: 19px; color: var(--hy-soft); }
.hy-thanks .hy-btn { align-self: flex-start; }

@media (max-width: 800px) {
  .hy-wrap { padding: 0 20px; }
  .hy-header .hy-wrap { min-height: 0; padding-top: 16px; padding-bottom: 12px; row-gap: 8px; }
  .hy-nav-wrap { width: 100%; justify-content: space-between; gap: 12px; }
  .hy-nav { gap: 16px; }
  .hy-nav a { font-size: 13px; letter-spacing: .08em; }
  .hy-logo { font-size: 26px; }
  .hy-form .hy-btn { width: 100%; }
}
@media (max-width: 380px) {
  .hy-nav { gap: 10px; }
  .hy-nav a { font-size: 12px; letter-spacing: .04em; }
  .hy-lang-btn { min-width: 40px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hy-btn { transition: none; }
}

/* =========================================================
   V2 · glass, overlay translation, key words, tools
   Everything below is plain CSS that any browser runs;
   Netlify serves it as-is on the free plan.
   ========================================================= */
:root {
  --hy-glass: rgba(19, 18, 16, .66);
  --hy-glass-strong: rgba(19, 18, 16, .86);
  --hy-glass-edge: rgba(201, 164, 94, .32);
  --hy-glow: rgba(201, 164, 94, .16);
  --hy-tx-scale: 1;
}

/* smooth page-to-page transitions (Chrome, Edge, Safari 18+; others just load normally) */
@view-transition { navigation: auto; }
.hy-cover, .hy-feature img, .hy-ep-head img { view-transition-name: hy-cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------- glass header (sticky on wider screens) ---------- */
.hy-header {
  position: relative; z-index: 60;
  background: var(--hy-glass-strong);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hy-header { background: var(--hy-glass); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
}
@media (min-width: 801px) {
  .hy-header { position: sticky; top: 0; }
}

/* ---------- candlelight behind the cover ---------- */
.hy-hero { position: relative; isolation: isolate; }
.hy-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -6%; top: 0; width: 62%; aspect-ratio: 1; max-width: 100%;
  background: radial-gradient(closest-side, var(--hy-glow), transparent 72%);
  animation: hy-flicker 7s ease-in-out infinite;
}
@keyframes hy-flicker {
  0%, 100% { opacity: .85; transform: scale(1); }
  23% { opacity: 1; transform: scale(1.03); }
  41% { opacity: .7; transform: scale(.99); }
  67% { opacity: .95; transform: scale(1.02); }
}

/* ---------- sticky player becomes frosted glass ---------- */
.hy-player { background: var(--hy-glass-strong); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hy-player { background: var(--hy-glass); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
}
.hy-short { display: none; }

/* ---------- transcript tools ---------- */
.hy-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 0 0; }
.hy-tool {
  appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--hy-line2); background: transparent; color: var(--hy-paper); cursor: pointer;
  font-family: var(--hy-sans); font-size: 14px; font-weight: 400; line-height: 1;
}
.hy-tool:hover { border-color: var(--hy-flame); }
.hy-tool:focus-visible, .hy-jump select:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 2px; }
.hy-tool-group { display: inline-flex; }
.hy-tool-group .hy-tool + .hy-tool { border-left: 0; }
.hy-tool--switch i { width: 30px; height: 16px; border-radius: 999px; background: var(--hy-line2); position: relative; transition: background .2s; }
.hy-tool--switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--hy-paper); transition: transform .2s; }
.hy-tool--switch[aria-pressed="true"] i { background: var(--hy-flame); }
.hy-tool--switch[aria-pressed="true"] i::after { transform: translateX(14px); background: var(--hy-ground); }
.hy-jump { cursor: default; padding-right: 6px; color: var(--hy-dim); }
.hy-jump select {
  appearance: none; border: 0; background: transparent; color: var(--hy-paper); cursor: pointer;
  font-family: var(--hy-sans); font-size: 14px; font-weight: 400; padding: 6px 22px 6px 2px; max-width: 240px;
  background-image: linear-gradient(45deg, transparent 50%, var(--hy-flame) 50%), linear-gradient(-45deg, transparent 50%, var(--hy-flame) 50%);
  background-position: right 9px center, right 4px center; background-size: 5px 5px; background-repeat: no-repeat;
}
.hy-jump select option { background: var(--hy-panel); color: var(--hy-paper); }

.hy .hy-hint { margin: 28px auto 0; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--hy-dim); padding-left: 16px; border-left: 1px solid var(--hy-flame); }
[data-show-in] { display: none; }
.hy-episode[data-mode-now="overlay"] [data-show-in="overlay"] { display: block; }

/* transcript text size (A− / A+) */
.hy-tx .hy-row p, .hy-epi p { font-size: calc(var(--hy-fs, 18px) * var(--hy-tx-scale)) !important; }
.hy-row p.hy-t-es { --hy-fs: 21px; }
.hy-row p.hy-t-en { --hy-fs: 18px; }
.hy-tx[data-mode="es"] .hy-row p.hy-t-es, .hy-tx[data-mode="overlay"] .hy-row p.hy-t-es { --hy-fs: 24px; }
.hy-tx[data-mode="en"] .hy-row p.hy-t-en { --hy-fs: 20px; }
.hy-epi .hy-t-es { --hy-fs: 26px; }

/* ---------- MODE: tap to translate (English laid over the Spanish on frosted glass) ---------- */
.hy-tx[data-mode="overlay"] .hy-tx-h { max-width: 760px; margin: 0 auto; width: 100%; }
.hy-tx[data-mode="overlay"] .hy-tx-h .hy-t-en {
  font-family: var(--hy-sans); font-size: 13px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--hy-flame);
}
.hy-tx[data-mode="overlay"] .hy-row {
  position: relative; max-width: 760px; margin: 0 auto; width: 100%;
  cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none;
}
.hy-tx[data-mode="overlay"] .hy-row::before {
  content: ""; position: absolute; left: -22px; top: .55em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hy-line2); transition: background .2s;
}
.hy-tx[data-mode="overlay"] .hy-row:hover::before,
.hy-tx[data-mode="overlay"] .hy-row.is-open::before { background: var(--hy-flame); }
.hy-tx[data-mode="overlay"] .hy-row p.hy-t-en {
  position: absolute; z-index: 6; left: -20px; right: -20px; top: -14px; min-height: calc(100% + 28px);
  display: flex; align-items: center; padding: 14px 20px; margin: 0;
  background: var(--hy-glass-strong); color: var(--hy-paper);
  border: 1px solid var(--hy-glass-edge); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  pointer-events: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hy-tx[data-mode="overlay"] .hy-row p.hy-t-en { background: var(--hy-glass); -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15); }
}
.hy-tx[data-mode="overlay"] .hy-row.is-open p.hy-t-en,
.hy-tx[data-mode="overlay"] .hy-row:focus-visible p.hy-t-en {
  opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .hy-tx[data-mode="overlay"] .hy-row:hover p.hy-t-en {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s ease .35s, transform .22s ease .35s, visibility 0s linear .35s;
  }
}
.hy-tx[data-mode="overlay"] .hy-row:focus-visible { box-shadow: 0 0 0 2px var(--hy-flame); }

/* ---------- key words: underlined in the Spanish, meaning on tap ---------- */
.hy-term {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help;
  text-decoration: underline dotted var(--hy-flame); text-decoration-thickness: 1.5px; text-underline-offset: .22em;
}
.hy-term:hover, .hy-term[aria-expanded="true"] { color: var(--hy-flame); }
.hy-term:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 2px; }
.hy-term.is-flash { animation: hy-flash 1.6s ease; }
@keyframes hy-flash { 0%, 60% { background: rgba(201, 164, 94, .35); } 100% { background: transparent; } }
.hy-tx.hy-terms-off .hy-term { text-decoration: none; pointer-events: none; cursor: inherit; color: inherit; }

.hy-pop {
  position: fixed; z-index: 90; max-width: min(300px, calc(100vw - 32px));
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px;
  background: var(--hy-glass-strong); border: 1px solid var(--hy-glass-edge); box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  font-family: var(--hy-sans); color: var(--hy-paper); pointer-events: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hy-pop { background: var(--hy-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.hy-pop b { font-family: var(--hy-serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.3; }
.hy-pop span { font-size: 15px; line-height: 1.45; color: var(--hy-soft); }

/* glossary: each word shows how often it appears and finds it in the text */
.hy-vocab dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 16px; }
.hy-find {
  appearance: none; border: 1px solid var(--hy-line2); background: transparent; color: var(--hy-dim); cursor: pointer;
  min-width: 52px; min-height: 32px; padding: 0 10px; font-family: var(--hy-sans); font-size: 13px; font-variant-numeric: tabular-nums;
}
.hy-find:hover { border-color: var(--hy-flame); color: var(--hy-flame); }
.hy-find:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 2px; }

/* follow along with the audio (works once rows carry data-t="seconds") */
.hy-row.is-now p.hy-t-es { color: var(--hy-flame); }
.hy-tx[data-mode="en"] .hy-row.is-now p.hy-t-en { color: var(--hy-flame); }

/* ---------- Home: try-it demo ---------- */
.hy-try { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; padding: 24px 0 88px; }
.hy-try-head { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
.hy-try-head .hy-link { margin-top: 4px; }
.hy-tx--demo { display: flex; flex-direction: column; gap: 32px; padding: 40px 48px; background: var(--hy-panel); border: 1px solid var(--hy-line); }
.hy-tx--demo .hy-row { max-width: none !important; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hy-hero::before { animation: none; }
  .hy-tx[data-mode="overlay"] .hy-row p.hy-t-en, .hy-tool--switch i, .hy-tool--switch i::after { transition: none !important; }
  .hy-term.is-flash { animation: none; outline: 2px solid var(--hy-flame); }
}

@media (max-width: 1024px) {
  .hy-try { grid-template-columns: 1fr; gap: 32px; }
  .hy-try-head { position: static; }
}
@media (max-width: 800px) {
  .hy-long { display: none; }
  .hy-short { display: inline; }
  .hy-tools { gap: 8px; }
  .hy-jump select { max-width: 150px; }
  .hy-tx[data-mode="overlay"] .hy-row::before { display: none; }
  .hy-tx[data-mode="overlay"] .hy-row p.hy-t-en { left: -10px; right: -10px; padding: 12px 14px; }
  .hy-tx[data-mode="es"] .hy-row p.hy-t-es, .hy-tx[data-mode="overlay"] .hy-row p.hy-t-es { --hy-fs: 21px; }
  .hy-epi .hy-t-es { --hy-fs: 22px; }
  .hy-tx--demo { padding: 28px 22px; }
  .hy-vocab dl > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .hy-vocab dl > div dd { text-align: left; grid-column: 1; }
  .hy-vocab dl > div .hy-find { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ---------- printing: transcripts are not printable or downloadable ---------- */
.hy .hy-print-note { display: none; }
@media print {
  @page { margin: 18mm; }
  body { background: #fff; color: #111; }
  .hy-header, .hy-footer, .hy-player, .hy-tools, .hy-hint, .hy-back, .hy-skip,
  .hy-tx, .hy-vocab, .hy-try, .hy-tx-copy { display: none !important; }
  .hy { color: #111; }
  .hy h1, .hy h2 { color: #111 !important; }
  .hy-eyebrow { color: #7a5c22 !important; }
  .hy-ep-head img { width: 90px; height: 90px; }
  .hy .hy-print-note { display: block; max-width: 560px; margin-top: 24pt; font-size: 12pt; line-height: 1.6; color: #111; }
}

/* =========================================================
   Legibility on the dark ground
   Bodoni Moda is set at a small optical size everywhere, which keeps
   its thin strokes (the crossbar of A, the diagonal of N) thick enough
   to read on black. Text weight is 500 for the serif and 400 for Jost.
   ========================================================= */
body, .hy, .hy-pop { font-variation-settings: "opsz" 11; font-optical-sizing: none; }
.hy h1, .hy-logo, .hy-num { font-variation-settings: "opsz" 14; }
.hy-logo, .hy-aside, .hy-num, .hy-epi .hy-t-es, .hy-row p.hy-t-es, .hy-vocab dt, .hy-foot .it, .hy-wordmark { font-weight: 500; }
.hy-row p.hy-t-en, .hy-epi .hy-t-en { color: var(--hy-soft); }
.hy-tx[data-mode="en"] .hy-row p.hy-t-en { color: var(--hy-paper); }

/* ---------- Home hero portrait: full head, edges fade into the page ---------- */
.hy .hy-hero-art { position: relative; margin: 0; }
.hy-hero-art .hy-cover {
  border: 0; aspect-ratio: 40 / 43; object-fit: cover; width: 100%;
  /* only the outer edges melt into the page; the stone pillar stays sharp */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 74%, transparent 98%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 74%, transparent 98%);
          mask-composite: intersect;
}
.hy-wordmark {
  position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; pointer-events: none;
  font-family: var(--hy-serif); font-weight: 600; font-size: clamp(56px, 8.4vw, 116px); line-height: 1;
  font-variation-settings: "opsz" 28; color: var(--hy-paper); letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(7, 7, 6, .7);
}
.hy-wordmark .hy-y, .hy-logo .hy-y { font-style: italic; color: var(--hy-yellow); }
.hy-hero::before { left: 0; top: -4%; width: 50%; }
@media (max-width: 800px) {
  .hy-wordmark { font-size: clamp(52px, 17vw, 96px); }
  .hy-hero::before { width: 100%; left: 0; }
}

/* player with no audio file yet */
.hy-player.is-noaudio .hy-play { background: var(--hy-line2); color: var(--hy-dim); cursor: not-allowed; }
.hy-player.is-noaudio .hy-bar { cursor: default; }

/* =========================================================
   Copyright
   ========================================================= */
.hy-foot .hy-copy a { color: var(--hy-soft); }
.hy-foot .hy-copy a:hover { color: var(--hy-flame); }

/* copyright line that travels with every transcript */
.hy .hy-tx-copy {
  max-width: 760px; margin: 56px auto 0; padding-top: 18px; border-top: 1px solid var(--hy-line);
  font-size: 13px; line-height: 1.6; letter-spacing: .02em; color: var(--hy-dim);
}
.hy .hy-tx-copy--demo { margin: 14px 0 0; padding-top: 0; border-top: 0; max-width: none; }
.hy-try > .hy-tx--demo + .hy-tx-copy { grid-column: 2; }

/* copyright page */
.hy-legal { max-width: 720px; padding: 64px 0 24px; display: flex; flex-direction: column; gap: 16px; }
.hy-legal h1 { font-size: clamp(38px, 5vw, 56px); }
.hy-legal .hy-lead { font-size: 20px; color: var(--hy-soft); }
.hy-legal h2 { font-size: 26px; margin-top: 24px; }
.hy-legal p { color: var(--hy-soft); font-size: 18px; }

@media (max-width: 1024px) {
  .hy-try > .hy-tx--demo + .hy-tx-copy { grid-column: 1; }
}

.hy-try { row-gap: 0; }
.hy-try-head { grid-row: span 2; }
@media (max-width: 1024px) { .hy-try { row-gap: 32px; } .hy-try-head { grid-row: auto; } .hy-try > .hy-tx-copy { margin-top: -18px; } }

/* =========================================================
   One transcript, as narrated
   Each section says which language it is narrated in:
   data-orig="es" (default) shows the Spanish, data-orig="en" shows the English.
   The other language appears over it on hover or tap.
   ========================================================= */
.hy .hy-hint { display: block; }
.hy-tx-h { display: flex; flex-direction: column; }

/* English-narrated sections: English heading on top, Spanish as the small line */
.hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-tx-h h2.hy-t-en {
  order: -1; font-family: var(--hy-serif); font-weight: 500; font-size: 34px; letter-spacing: 0; text-transform: none; color: var(--hy-paper);
}
.hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-tx-h h2.hy-t-es {
  font-family: var(--hy-sans); font-size: 13px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--hy-flame);
}

/* English-narrated rows: the English is the text, the Spanish is the overlay */
.hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-en {
  position: static; display: block; min-height: 0; padding: 0; margin: 0; z-index: auto;
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: var(--hy-sans); font-weight: 400; --hy-fs: 21px; line-height: 1.7; color: var(--hy-paper);
}
.hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-es {
  position: absolute; z-index: 6; left: -20px; right: -20px; top: -14px; min-height: calc(100% + 28px);
  display: flex; align-items: center; padding: 14px 20px; margin: 0;
  font-family: var(--hy-serif); font-weight: 500; --hy-fs: 21px; line-height: 1.6; color: var(--hy-paper);
  background: var(--hy-glass-strong); border: 1px solid var(--hy-glass-edge); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  pointer-events: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-es { background: var(--hy-glass); -webkit-backdrop-filter: blur(9px) saturate(1.15); backdrop-filter: blur(9px) saturate(1.15); }
}
.hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row.is-open p.hy-t-es,
.hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row:focus-visible p.hy-t-es {
  opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row:hover p.hy-t-es {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s ease .35s, transform .22s ease .35s, visibility 0s linear .35s;
  }
}
.hy-tx-sec[data-orig="en"] .hy-row.is-now p.hy-t-en { color: var(--hy-flame); }

/* the epigraph works the same way: the original quotation, with the translation on hover */
.hy-tx[data-mode="overlay"] .hy-epi .hy-row::before { display: none; }
.hy-tx[data-mode="overlay"] .hy-epi .hy-row p.hy-t-en { justify-content: center; text-align: center; }

@media (max-width: 800px) {
  .hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-es { left: -10px; right: -10px; padding: 12px 14px; }
  .hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-en { --hy-fs: 19px; }
  .hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-tx-h h2.hy-t-en { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-es { transition: none !important; }
}

/* a paragraph opened by click shows its translation at once, without the hover delay */
@media (hover: hover) and (pointer: fine) {
  .hy-tx[data-mode="overlay"] .hy-row.is-open:hover p.hy-t-en,
  .hy-tx[data-mode="overlay"] .hy-tx-sec[data-orig="en"] .hy-row.is-open:hover p.hy-t-es {
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
}

/* =========================================================
   Home: trailer card
   ========================================================= */
.hy-trailer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding: 16px 0 72px; }
.hy-trailer-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--hy-line2); background: #000; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden;
}
.hy-trailer-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .6s ease; filter: brightness(.82); }
.hy-trailer-thumb:hover img { transform: scale(1.03); filter: brightness(.95); }
.hy-trailer-thumb:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 4px; }
.hy-trailer-play {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(7, 7, 6, .55); border: 1px solid var(--hy-flame); color: var(--hy-flame);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, color .25s;
}
.hy-trailer-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.hy-trailer-thumb:hover .hy-trailer-play { background: var(--hy-flame); color: var(--hy-ground); }
.hy-trailer-text { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hy-trailer-text .hy-h2 { font-style: italic; }
.hy-btn svg { width: 13px; height: 13px; fill: currentColor; }
button.hy-btn { font-family: var(--hy-sans); }

/* =========================================================
   The trailer book: a dialog over the Home page
   Paper with texture and a little transparency, a spine in the middle.
   ========================================================= */
html.hy-book-open { overflow: hidden; }
.hy-book {
  /* ink and paper for everything inside the book */
  --hy-paper: #2b2117; --hy-soft: #3f3324; --hy-muted: #4a3d2c; --hy-dim: #6d5d47;
  --hy-line: rgba(90, 64, 30, .22); --hy-line2: rgba(90, 64, 30, .32); --hy-flame: #8a6420;
  --hy-glass: rgba(244, 233, 210, .74); --hy-glass-strong: rgba(244, 233, 210, .96); --hy-glass-edge: rgba(138, 100, 32, .45);
  --hy-sheet: rgba(237, 225, 199, .88);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 24px; border: 0; background: transparent; color: var(--hy-paper); overflow: auto;
  box-sizing: border-box;
}
.hy-book *, .hy-book *::before, .hy-book *::after { box-sizing: border-box; }
.hy-book[open] { display: grid; place-items: center; }
.hy-book::backdrop { background: rgba(7, 7, 6, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hy-book-spread {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 1180px !important; width: 100%;
  height: min(760px, calc(100vh - 48px)); margin: 0 auto; perspective: 2400px;
  font-size: 17px; color: var(--hy-paper);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
}
.hy-page {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto;
  padding: 44px 48px 52px;
  background-color: var(--hy-sheet);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .33  0 0 0 0 .24  0 0 0 0 .12  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(255, 250, 236, .35) 0%, rgba(255, 250, 236, 0) 55%, rgba(110, 76, 34, .22) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(.9); backdrop-filter: blur(10px) saturate(.9);
  scrollbar-width: thin; scrollbar-color: rgba(90, 64, 30, .35) transparent;
}
/* the spine: each page darkens toward the middle */
.hy-page--left {
  border-radius: 6px 0 0 6px;
  box-shadow: inset -34px 0 40px -26px rgba(60, 38, 14, .55), -2px 2px 0 rgba(214, 198, 164, .7), -4px 4px 0 rgba(196, 178, 140, .55), -6px 6px 0 rgba(176, 156, 116, .4);
  transform-origin: right center; animation: hy-page-left .7s cubic-bezier(.2, .7, .2, 1) both;
}
.hy-page--right {
  border-radius: 0 6px 6px 0;
  box-shadow: inset 34px 0 40px -26px rgba(60, 38, 14, .55), 2px 2px 0 rgba(214, 198, 164, .7), 4px 4px 0 rgba(196, 178, 140, .55), 6px 6px 0 rgba(176, 156, 116, .4);
  transform-origin: left center; animation: hy-page-right .7s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hy-page-left { from { transform: rotateY(70deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hy-page-right { from { transform: rotateY(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }

.hy-page-run { display: flex; justify-content: space-between; gap: 12px; font-family: var(--hy-sans); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--hy-dim); padding-bottom: 10px; border-bottom: 1px solid var(--hy-line); }
.hy-page-folio { margin-top: auto; padding-top: 18px; text-align: center; font-family: var(--hy-serif); font-style: italic; font-size: 15px; color: var(--hy-dim); }
.hy .hy-book-title { font-family: var(--hy-serif); font-style: italic; font-weight: 500; font-size: clamp(40px, 4.4vw, 58px); line-height: 1; color: var(--hy-paper); margin-top: 18px; }
.hy .hy-book-sub { font-family: var(--hy-sans); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--hy-flame); }
.hy-book-video { position: relative; aspect-ratio: 16 / 9; width: 100%; margin-top: 10px; background: #000 url("../img/trailer-1-el-cid.webp") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(60, 38, 14, .35), 0 10px 30px rgba(60, 38, 14, .35); }
.hy-book-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hy .hy-book-note { font-size: 14px; color: var(--hy-dim); }
.hy .hy-book-note a { color: var(--hy-flame); text-decoration: underline; text-underline-offset: 3px; }
.hy .hy-book-hint { font-family: var(--hy-serif); font-style: italic; font-size: 16px; color: var(--hy-dim); }

/* the transcript on paper */
.hy-tx--book { padding-top: 6px; }
.hy-tx--book .hy-tx-sec { padding-top: 6px; gap: 16px; }
.hy-tx--book .hy-row { max-width: none !important; }
.hy-tx[data-mode="overlay"].hy-tx--book .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-en {
  font-family: var(--hy-serif); font-weight: 500; --hy-fs: 18px; line-height: 1.6; color: var(--hy-paper);
}
.hy-tx[data-mode="overlay"].hy-tx--book .hy-tx-sec[data-orig="en"] .hy-row p.hy-t-es {
  --hy-fs: 17px; font-style: italic; color: var(--hy-paper); left: -14px; right: -14px; box-shadow: 0 10px 28px rgba(60, 38, 14, .3);
}
.hy-tx[data-mode="overlay"].hy-tx--book .hy-row::before { display: none; }   /* no bullets in the book */
.hy-book .hy-tx-copy { max-width: none; margin: 24px 0 0; color: var(--hy-dim); border-top-color: var(--hy-line); }

.hy-book-close {
  position: fixed; z-index: 5; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--hy-ground); color: #EDE7DB; border: 1px solid #3A362F;
}
.hy-book-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hy-book-close:hover { border-color: #C9A45E; color: #C9A45E; }
.hy-book-close:focus-visible, .hy-book .hy-row:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 3px; }

@media (max-width: 1024px) {
  .hy-trailer { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 800px) {
  .hy-book { padding: 12px; }
  .hy-book[open] { display: block; }
  .hy-book-spread { grid-template-columns: 1fr; height: auto; margin-top: 18px; }
  .hy-page { overflow: visible; padding: 28px 22px 34px; }
  .hy-page--left { border-radius: 6px 6px 0 0; box-shadow: inset 0 -30px 36px -28px rgba(60, 38, 14, .5); transform-origin: center bottom; }
  .hy-page--right { border-radius: 0 0 6px 6px; box-shadow: inset 0 30px 36px -28px rgba(60, 38, 14, .5); transform-origin: center top; }
  .hy-page--left .hy-page-folio { display: none; }
  .hy-trailer-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hy-page--left, .hy-page--right { animation: hy-fade .2s ease both; }
  .hy-trailer-thumb img { transition: none; }
}
@keyframes hy-fade { from { opacity: 0; } to { opacity: 1; } }
@media print { .hy-book, .hy-trailer { display: none !important; } }


/* trailer book: key vocabulary and pronunciation note */
.hy-book-vocab { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hy-line2); display: flex; flex-direction: column; gap: 14px; }
.hy-book-vocab h3 { font-family: var(--hy-serif); font-style: italic; font-weight: 500; font-size: 26px; color: var(--hy-paper); }
.hy-book-vocab dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; }
.hy-book-vocab dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hy-line); }
.hy-book-vocab dt { margin: 0; font-family: var(--hy-serif); font-style: italic; font-weight: 500; font-size: 17px; color: var(--hy-paper); }
.hy-book-vocab dd { margin: 0; font-family: var(--hy-sans); font-size: 14px; color: var(--hy-dim); text-align: right; }
.hy-book-pron { margin-top: 10px; padding: 16px 18px; border: 1px solid var(--hy-line2); background: rgba(255, 249, 234, .35); display: flex; flex-direction: column; gap: 10px; }
.hy-book-pron h4 { margin: 0; font-family: var(--hy-sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--hy-flame); }
.hy .hy-book-pron p { font-family: var(--hy-sans); font-size: 15px; line-height: 1.55; color: var(--hy-soft); }
.hy-book-pron b { font-family: var(--hy-serif); font-style: italic; font-weight: 600; font-size: 18px; color: var(--hy-paper); }
.hy-ipa { font-family: var(--hy-sans); font-weight: 500; color: var(--hy-flame); margin: 0 4px; }
@media (max-width: 800px) {
  .hy-book-vocab dl { grid-template-columns: 1fr; }
}
.hy-say { white-space: nowrap; font-weight: 500; }

/* =========================================================
   Books with several parts (full episodes)
   ========================================================= */
.hy-tx--book .hy-tx-sec + .hy-tx-sec { padding-top: 34px; }
.hy-tx--book .hy-tx-sec.hy-tx-sec--cont { padding-top: 16px; }
.hy-tx[data-mode="overlay"].hy-tx--book .hy-tx-sec .hy-tx-h { max-width: none; padding-bottom: 10px; border-bottom-color: var(--hy-line); }
.hy-tx[data-mode="overlay"].hy-tx--book .hy-tx-sec .hy-tx-h h2:first-child { font-size: 26px; font-style: italic; }
/* Spanish-narrated parts on paper */
.hy-tx[data-mode="overlay"].hy-tx--book .hy-tx-sec[data-orig="es"] .hy-row p.hy-t-es { --hy-fs: 18px; font-weight: 500; line-height: 1.6; color: var(--hy-paper); }
.hy-tx[data-mode="overlay"].hy-tx--book .hy-tx-sec[data-orig="es"] .hy-row p.hy-t-en {
  font-family: var(--hy-serif); font-style: italic; font-weight: 500; --hy-fs: 17px; line-height: 1.55; color: var(--hy-paper);
  left: -14px; right: -14px; box-shadow: 0 10px 28px rgba(60, 38, 14, .3);
}
.hy-book .hy-term:hover, .hy-book .hy-term[aria-expanded="true"] { color: var(--hy-flame); }
.hy-book .hy-pop { --hy-paper: #EDE7DB; --hy-soft: #D6CFC2; --hy-glass: rgba(19, 18, 16, .8); --hy-glass-strong: rgba(19, 18, 16, .94); --hy-glass-edge: rgba(201, 164, 94, .4); color: #EDE7DB; }

/* =========================================================
   Episodes page: full episode on video (cover art thumbnail)
   ========================================================= */
.hy-epvideo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-bottom: 72px; padding: 40px; background: var(--hy-panel); border: 1px solid var(--hy-line); }
.hy-epvideo-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--hy-line2); background: #000; cursor: pointer; overflow: hidden; }
.hy-epvideo-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .6s ease; filter: brightness(.86); }
.hy-epvideo-thumb:hover img { transform: scale(1.03); filter: brightness(1); }
.hy-epvideo-thumb:hover .hy-trailer-play { background: var(--hy-flame); color: var(--hy-ground); }
.hy-epvideo-thumb:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 4px; }
.hy-epvideo .hy-h2 { font-style: italic; font-size: clamp(40px, 4.6vw, 60px); }
.hy-eplist .hy-try { padding-top: 0; }

/* =========================================================
   Video page
   ========================================================= */
.hy-vgroup { padding-bottom: 18px; border-bottom: 1px solid var(--hy-line); margin-bottom: 36px; }
.hy-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.hy-vcard { display: flex; flex-direction: column; gap: 22px; }
.hy-vcard-text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hy-vcard-text h2 { font-style: italic; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.hy-vmore { margin-top: 56px; }

@media (max-width: 1024px) {
  .hy-epvideo { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .hy-epvideo-thumb { max-width: 420px; }
}
@media (max-width: 800px) {
  .hy-vgrid { grid-template-columns: 1fr; gap: 56px; }
}

/* =========================================================
   Donate (Home and About)
   ========================================================= */
.hy-support {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  margin: 0 0 56px; padding: 40px 48px; background: var(--hy-panel); border: 1px solid var(--hy-glass-edge);
}
.hy-support-text { display: flex; flex-direction: column; gap: 12px; max-width: 640px; flex: 1 1 360px; }
.hy-support .hy-h2 { font-style: italic; }
.hy-donate svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hy-support--about { margin: 0 0 64px; }
@media (max-width: 800px) {
  .hy-support { padding: 28px 22px; gap: 24px; }
  .hy-donate { width: 100%; }
}
.hy-signup .hy-form--stack { max-width: 640px; }
textarea.hy-input.hy-input--short { min-height: 110px; }

/* episode list: placeholder row and link-style buttons */
.hy-moon { width: 40px; height: 40px; fill: none; stroke: var(--hy-flame); stroke-width: 1.2; }
.hy-ep-row--soon h3, .hy-ep-row--soon p { opacity: .82; }
.hy-link-btn { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--hy-sans); font-weight: 400; color: var(--hy-flame); text-align: left; }
.hy-link-btn:hover { color: var(--hy-paper); }
.hy-link-btn:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 3px; }

/* Links still waiting for a real address (href starting with PASTE-) stay hidden on the live site,
   so visitors never hit a broken link. They appear as soon as the real link is pasted in. */
a[href^="PASTE"] { display: none !important; }
.hy-support:has(.hy-donate[href^="PASTE"]) { display: none; }

/* home hero: lead line + trailer picker (8 Oct 2026) */
.hy-lead { font-size: 20px; line-height: 1.55; color: var(--hy-paper); max-width: 560px; }
.hy-trailer-pick { display: inline-flex; align-items: stretch; min-height: 52px; border: 1px solid var(--hy-line2);
  font-family: var(--hy-sans); font-size: 14px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.hy-trailer-pick-label { display: inline-flex; align-items: center; gap: 10px; padding: 0 20px 0 24px; color: var(--hy-dim); }
.hy-trailer-pick svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.hy-trailer-pick button { font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0 22px; cursor: pointer;
  background: transparent; color: var(--hy-paper); border: 0; border-left: 1px solid var(--hy-line2); transition: background .2s, color .2s; }
.hy-trailer-pick button:hover, .hy-trailer-pick button:focus-visible { background: var(--hy-flame); color: var(--hy-ground); }
@media (prefers-reduced-motion: reduce) { .hy-trailer-pick button { transition: none; } }

/* =========================================================
   9 Oct 2026 update
   ========================================================= */
.hy-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Home hero */
.hy-hero-text .hy-link-btn { align-self: flex-start; margin-top: -8px; }

/* Listen on: platforms not live yet show as "soon" */
.hy-pill.is-soon, .hy-pill[href^="PASTE"] { display: inline-flex !important; pointer-events: none; opacity: .55; }
.hy-pill.is-soon::after, .hy-pill[href^="PASTE"]::after { content: "soon"; margin-left: 2px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--hy-dim); }
html.hy-lang-es .hy-pill.is-soon::after, html.hy-lang-es .hy-pill[href^="PASTE"]::after { content: "pronto"; }

/* Episodes: the three passes */
.hy-pagehead--eps { padding-bottom: 28px; }
.hy-passes { margin: 0 0 72px; }
.hy-passes ol { list-style: none; margin: 0; padding: 0; }
.hy-passes .hy-step h3 { font-size: 24px; line-height: 1.25; }
.hy-passes .hy-step .hy-link { align-self: flex-start; min-height: 0; margin-top: 2px; }

/* Sample transcript overlay */
.hy-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 24px; border: 0; background: transparent; color: var(--hy-paper); overflow: auto; box-sizing: border-box;
}
.hy-overlay[open] { display: grid; place-items: center; }
.hy-overlay::backdrop { background: rgba(7, 7, 6, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hy-overlay-card {
  width: 100%; max-width: 820px !important; display: flex; flex-direction: column; gap: 32px;
  padding: 48px 52px; background: var(--hy-panel); border: 1px solid var(--hy-glass-edge); box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.hy-overlay .hy-try-head { position: static; display: flex; flex-direction: column; gap: 16px; }
.hy-overlay .hy-tx--demo { padding: 32px 36px; background: var(--hy-ground); }
@media (max-width: 800px) {
  .hy-overlay { padding: 12px; }
  .hy-overlay[open] { display: block; }
  .hy-overlay-card { margin-top: 64px; padding: 28px 22px; }
  .hy-overlay .hy-tx--demo { padding: 24px 18px; }
}

/* Video inside the book: no YouTube controls; click the picture to play or pause */
.hy-vshield { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; display: grid; place-items: center; cursor: pointer; background: transparent; }
.hy-book-video:not(.is-playing) .hy-vshield { background: inherit; }   /* paused or ended: the cover picture hides YouTube's own screens */
.hy-vshield-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(7, 7, 6, .62); border: 1px solid rgba(237, 231, 219, .5); color: #EDE7DB; opacity: 0; transition: opacity .2s; }
.hy-vshield-icon svg { width: 22px; height: 22px; fill: currentColor; margin-left: 4px; }
.hy-book-video:not(.is-playing) .hy-vshield-icon { opacity: 1; }
.hy-vshield:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 3px; }

/* "Watch next" links under a trailer */
.hy-book-next { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.hy-book-next-link {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px;
  font-family: var(--hy-sans); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hy-flame) !important; text-decoration: none;
}
.hy-book-next-link svg { width: 11px; height: 11px; fill: currentColor; }
.hy-book-next-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hy-book-next-link:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 3px; }

/* =========================================================
   Audio inside the book (Episode 1): the cover artwork is the player.
   Tap the picture to play or pause; thin progress bar and time along the bottom.
   No native controls, no download, no links out of the book.
   ========================================================= */
.hy-book-audio { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hy-book-audio audio { display: none; }
.hy-vshield-icon .hy-i-pause, .hy-aud-btn .hy-i-pause { display: none; }
.hy-book-audio.is-playing .hy-vshield-icon .hy-i-play, .hy-aud-dock.is-playing .hy-i-play { display: none; }
.hy-book-audio.is-playing .hy-vshield-icon .hy-i-pause, .hy-aud-dock.is-playing .hy-i-pause { display: block; }
.hy-book-audio.is-playing .hy-vshield-icon svg { margin-left: 0; }
.hy-book-audio.is-playing .hy-vshield:hover .hy-vshield-icon,
.hy-book-audio.is-playing .hy-vshield:focus-visible .hy-vshield-icon { opacity: 1; }
@media (hover: none) { .hy-book-audio.is-playing .hy-vshield-icon { opacity: .55; } }
.hy-aud-ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 22px 16px 10px;
  background: linear-gradient(to top, rgba(7, 7, 6, .78), rgba(7, 7, 6, 0));
  color: #EDE7DB; font-family: var(--hy-sans); font-size: 12px; letter-spacing: .06em;
}
.hy-aud-bar { position: relative; flex: 1; height: 18px; cursor: pointer; touch-action: none; }
.hy-aud-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 2px; background: rgba(237, 231, 219, .32); }
.hy-aud-fill { position: absolute; left: 0; top: 8px; height: 3px; width: 0; border-radius: 2px; background: #C9A45E; pointer-events: none; }
.hy-aud-fill::after { content: ""; position: absolute; right: -5px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #C9A45E; }
.hy-aud-bar:focus-visible { outline: 2px solid #C9A45E; outline-offset: 3px; }
.hy-aud-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Mini player: appears at the bottom of the book when the artwork scrolls out of view (mostly phones),
   so the listener never loses the controls while reading. */
.hy-aud-dock {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 40px;
  background: rgba(7, 7, 6, .92); border: 1px solid #3A362F; color: #EDE7DB;
  font-family: var(--hy-sans); font-size: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  -webkit-user-select: none; user-select: none;
}
.hy-aud-dock[hidden] { display: none; }
.hy-aud-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #C9A45E; color: #070706; border: 0; padding: 0; }
.hy-aud-btn svg { width: 18px; height: 18px; fill: currentColor; }
.hy-aud-btn .hy-i-play { margin-left: 3px; }
.hy-aud-btn:focus-visible { outline: 2px solid #C9A45E; outline-offset: 3px; }
.hy-aud-dock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.hy-aud-dock-title { font-family: var(--hy-serif); font-style: italic; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hy-aud-dock-title > span { font-family: var(--hy-sans); font-style: normal; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8B847A; }
@media print { .hy-aud-dock { display: none !important; } }

/* Chapters under the player (Episode 1): tap one to jump there; the current one is marked as the audio plays */
.hy-chapters { margin-top: 6px; }
.hy-chapters-h { font-family: var(--hy-sans); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--hy-dim); padding-bottom: 8px; border-bottom: 1px solid var(--hy-line); }
.hy-chapters ol { list-style: none; margin: 0; padding: 0; }
.hy-chapters li { border-bottom: 1px solid var(--hy-line); }
.hy-chapters button {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 12px; width: 100%; min-height: 44px;
  padding: 10px 4px; margin: 0; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--hy-paper);
}
.hy-ch-n { font-family: var(--hy-serif); font-style: italic; font-size: 15px; color: var(--hy-dim); }
.hy-ch-title { font-family: var(--hy-serif); font-size: 18px; line-height: 1.25; }
.hy-ch-time { font-family: var(--hy-sans); font-size: 12px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--hy-dim); }
.hy-chapters button:hover .hy-ch-title { color: var(--hy-flame); }
.hy-chapters button[aria-current="true"] .hy-ch-title { color: var(--hy-flame); font-style: italic; }
.hy-chapters button[aria-current="true"] .hy-ch-n { color: var(--hy-flame); }
.hy-chapters button:focus-visible { outline: 2px solid var(--hy-flame); outline-offset: 2px; }
@media (max-width: 800px) { .hy-ch-title { font-size: 17px; } }