/* Humble Stories site system v2 — built on airbnb.org's structure, warmed up.
   Rules: flat surfaces (no shadows, no outlines), depth from paper / paper-band only,
   marigold only on the ask, headings ink, everything else ink-muted. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
.hs-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hs-muted { color: var(--ink-muted); }
.hs-text-balance { text-wrap: balance; }

/* ---------- Layout ---------- */
.hs-container { width: min(var(--width-content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.hs-container-wide { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.hs-section { padding-block: var(--space-section); }
.hs-section + .hs-section:not(.hs-band) { padding-top: 0; }   /* two paper sections share one gap */
.hs-band { background: var(--paper-band); }
.hs-bleed { width: 100%; border-radius: var(--radius-none); }

/* Section head: centred heading, at most two lines of grey intro, then media */
.hs-section-head { display: grid; justify-items: center; text-align: center; gap: var(--space-6); margin-bottom: var(--space-12); }
.hs-section-head > :is(h1, h2, .h1) { max-width: 22ch; text-wrap: balance; }
.hs-section-head > p { max-width: var(--width-text); color: var(--ink-muted); text-wrap: pretty; }
.hs-section-head > .hs-btn { margin-top: var(--space-2); }

/* Equal media rows, 16px apart */
.hs-grid { display: grid; gap: var(--space-4); }
.hs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1023px) { .hs-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 743px)  { .hs-grid-3, .hs-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Header ---------- */
.hs-header { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.hs-header-inner { height: var(--header-height); padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
/* Wordmark: 128px wide at every width (its ink is ~126px; never under 120px). Clear space on every side is
   the height of the "s" in "stories" (92/688 of the width, 17px at 128), rounded to 18px: the 88px header
   gives 18px+ above and below, and on phone the logo steps in so gutter + margin is at least 18px. */
.hs-logo { --logo-clear: 18px; display: block; flex: none; line-height: 0; }
.hs-logo img { width: 128px; min-width: 128px; height: auto; }
.hs-nav { display: flex; align-items: center; gap: var(--space-2); }
.hs-nav-link { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 14px var(--space-4); border-radius: var(--radius-sm); }
.hs-nav-link:hover { background: var(--paper-band); }
.hs-nav .hs-btn { margin-left: var(--space-4); }
.hs-menu-btn { display: none; width: 40px; height: 40px; place-items: center; border: 0; background: transparent; color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; padding: 0; }
.hs-menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 743px) {
  .hs-header-inner { gap: var(--space-2); }
  .hs-logo { margin-left: max(0px, var(--logo-clear) - var(--gutter)); }
  .hs-nav-link:not(.hs-nav-keep) { display: none; }   /* phone: logo, Stories, Donate, menu. Stories stays so a story is one tap away */
  .hs-nav-keep { padding: 10px var(--space-2); }
  .hs-nav .hs-btn { margin-left: 0; height: 40px; padding: 0 var(--space-4); font-size: 14px; }
  .hs-menu-btn { display: grid; }
}

/* ---------- Buttons ---------- */
.hs-btn { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-6); border-radius: var(--radius-sm); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.hs-btn-sm { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.hs-btn-donate { background: var(--marigold); color: var(--on-marigold); }       /* the ask: the only marigold button */
.hs-btn-donate:hover { background: var(--marigold-press); }
.hs-btn-primary { background: var(--ink); color: var(--on-ink); }                /* every other action */
.hs-btn-primary:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }
.hs-btn-light { background: var(--paper); color: var(--ink); }                    /* on footage or the marigold panel */
.hs-btn svg { width: 16px; height: 16px; }
.hs-btn:disabled { opacity: .45; cursor: not-allowed; }
.hs-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hs-link:hover { text-decoration-thickness: 2px; }
:is(.hs-btn, .hs-nav-link, .hs-menu-btn, .hs-link, .hs-story, .hs-chip, .hs-input, .hs-player-btn, .hs-player-cue, .hs-seg button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Hero (text only, centred) ---------- */
.hs-hero { padding: var(--space-20) var(--gutter) var(--space-24); display: grid; justify-items: center; text-align: center; gap: var(--space-6); }
.hs-hero-title { max-width: var(--width-headline); color: var(--ink); text-wrap: balance; }
.hs-hero-lead { max-width: var(--width-text); color: var(--ink-muted); text-wrap: pretty; }
@media (max-width: 743px) { .hs-hero { padding: var(--space-12) var(--gutter) var(--space-12); gap: var(--space-4); } }   /* the lead keeps the `lead` style (18/28) on phone too: never shrink it */

/* ---------- Full-bleed media (stands in for the episode film) ---------- */
.hs-film { position: relative; margin: 0; background: var(--night); overflow: hidden; border-radius: var(--radius-none); aspect-ratio: 16 / 9; max-height: calc(100svh - var(--header-height)); width: 100%; }
.hs-film > img, .hs-film > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 40%); }
@media (max-width: 743px) { .hs-film { aspect-ratio: 4 / 5; max-height: none; } }
/* Player controls: the only thing allowed over the hero film, set along its TOP edge, the part of the frame that
   is inside the first screen at every width (the film is cut off by the fold). Pause left; right, the watch cue,
   a quiet 14px text control with a speaker icon that names what you will watch and opens her full story with
   sound and subtitles. No subtitles (it plays silent, so no in-place sound toggle and no CC), no title or caption. */
.hs-player { position: absolute; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) calc(var(--gutter) - 8px) var(--space-6); background: linear-gradient(to bottom, rgb(16 14 12 / .42), rgb(16 14 12 / 0)); }
.hs-player-group { display: flex; gap: var(--space-2); min-width: 0; }
.hs-player-btn, .hs-player-cue { height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--on-night); cursor: pointer; }
.hs-player-btn { width: 36px; padding: 0; }
.hs-player-cue { gap: var(--space-2); padding: 0 var(--space-2); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.hs-player-cue span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .55); }
.hs-player-btn:hover, .hs-player-cue:hover { background: rgb(255 255 255 / .14); }
.hs-player-btn svg, .hs-player-cue svg { width: 20px; height: 20px; flex: none; }
/* Film credit: one quiet line on paper under the film, aligned to the gutter like the controls.
   Name (ink 600) and lesson title (muted) on the left at every width; on desktop the link to her full story sits on
   the right. On phone the line keeps the title and drops the link: the watch cue on the film already opens her story. */
.hs-film-credit { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--gutter) 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.hs-film-credit b { color: var(--ink); font-weight: 600; }
.hs-film-credit .hs-link { flex: none; }
@media (max-width: 743px) { .hs-film-credit .hs-link { display: none; } .hs-film-credit-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* ---------- StoryCard (photo with text on it, bottom-left) ---------- */
.hs-story { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; background: var(--night); color: var(--on-night); text-decoration: none; }
.hs-story img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hs-story:hover img { transform: scale(1.03); }
.hs-story::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(to top, rgb(16 14 12 / .62), rgb(16 14 12 / 0)); pointer-events: none; }
.hs-story-text { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 1; display: grid; gap: var(--space-1); }
.hs-story-place { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--on-night-muted); }
.hs-story-name { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 16px; line-height: 22px; font-weight: 600; }
.hs-story-name svg { width: 16px; height: 16px; flex: none; }
.hs-media { border-radius: var(--radius-md); overflow: hidden; background: var(--night); }
.hs-media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hs-story img, .hs-btn { transition: none; } }

/* ---------- PullQuote ---------- */
.hs-quote { display: grid; gap: var(--space-4); max-width: 30ch; }
.hs-quote blockquote { font-family: var(--font-serif); font-style: italic; text-wrap: balance; color: var(--ink); }
.hs-quote figcaption { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.hs-quote figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- Ask: trust note, donate panel, donate form ---------- */
.hs-trust { color: var(--ink-muted); }
.hs-trust b, .hs-trust strong { color: var(--ink); font-weight: 600; }
.hs-ask-panel { background: var(--marigold); color: var(--on-marigold); border-radius: var(--radius-md); padding: var(--space-16); display: grid; gap: var(--space-8); justify-items: start; }
.hs-ask-panel > :is(h2, .h2) { max-width: 22ch; text-wrap: balance; }
.hs-ask-panel .hs-ask-note { font-size: 12px; line-height: 16px; font-weight: 500; }
.hs-ask-panel .hs-btn { background: var(--ink); color: var(--on-ink); }
@media (max-width: 743px) { .hs-ask-panel { padding: var(--space-8); gap: var(--space-6); } }

.hs-donate { display: grid; gap: var(--space-6); }
.hs-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.hs-chip { font: inherit; font-size: 15px; font-weight: 600; height: var(--control-height); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.hs-chip[aria-checked="true"] { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.hs-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-band); border-radius: var(--radius-sm); padding: 4px; gap: 4px; }
.hs-seg button { font: inherit; font-size: 14px; font-weight: 600; height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.hs-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.hs-input { font: inherit; font-size: 15px; height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); width: 100%; }
.hs-note { font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* ---------- Footer ---------- */
.hs-footer { background: var(--paper-band); padding-block: var(--space-16) var(--space-8); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.hs-footer-rule { border: 0; border-top: 1px solid var(--line); margin: var(--space-12) 0 var(--space-6); }

/* ---------- Video-only components ---------- */
.hs-night { background: var(--night); color: var(--on-night); }
.hs-lt { display: inline-grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: rgb(16 14 12 / .72); color: var(--on-night); max-width: 100%; }
.hs-lt-name { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 30px; letter-spacing: -0.01em; }
.hs-lt-detail { font-size: 15px; line-height: 20px; color: var(--on-night-muted); }

/* ---------- Display sizes: tokens.json holds the desktop size; these scale it down to phone ---------- */
.hero { font-size: clamp(40px, 3.4vw + 23px, 72px); }
.h1 { font-size: clamp(32px, 1.7vw + 23.5px, 48px); }
.h2 { font-size: clamp(24px, 0.85vw + 20px, 32px); }
.quote { font-size: clamp(26px, 1.15vw + 21.5px, 36px); }

/* ---------- DonateBox: the donate form, flat on a paper-band panel ---------- */
.hs-donate-box { background: var(--paper-band); border-radius: var(--radius-md); padding: var(--space-8); display: grid; gap: var(--space-6); max-width: 440px; }
.hs-donate-box > header { display: grid; gap: var(--space-2); }
.hs-donate-box .hs-btn { width: 100%; }
.hs-impact { color: var(--ink); font-size: 14px; line-height: 20px; }
@media (max-width: 743px) { .hs-donate-box { padding: var(--space-6); } }

/* ---------- Preview helpers (component cards only) ---------- */
.hs-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-6); }
.hs-stack { display: grid; gap: var(--space-6); padding: var(--space-6); }