/* heyfi.io/podcast, What Lasts. Loaded after styles.css on this page only.
   Direction A, noise into signal, as approved on the "What Lasts Podcast Page
   Directions" canvas (claude/podcast/podcast-page-brief.md section 8).
   Phone first. The site's CSP blocks style="" attributes, so every rule is here.
   Motion: the band plays once (see podcast.js). Reduced motion, no script, or a
   failed load all leave the finished plate. */

.nav-main [aria-current="page"], .nav-menu [aria-current="page"] { color: var(--signal); }

/* Keyline buttons: the double-rule plate, in ink on paper. Listening and
   "raise your hand" use it. The one blue button on the page is the form's. */
.keyline {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.keyline:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--paper); }
.keyline-lg { min-height: 56px; padding: 0 34px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .keyline { transition: none; } }

.pod-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; }

/* ------------------------------------------------------------ 1. hero */
.pod-hero { padding: 40px var(--pad) 0; }
.pod-hero-copy { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 32px; }
.pod-kicker { margin: 0 0 16px; }
.pod-name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 0.95; letter-spacing: -0.02em; }
.pod-pair { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.25; }
.pod-tag { margin-top: 28px; font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.pod-desc { margin-top: 16px; max-width: 560px; font-size: 17px; line-height: 1.6; }
.pod-listen { margin-top: 24px; align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.pod-listen-row { display: flex; gap: 8px; }
.pod-listen-row .keyline { flex: 1 1 0; padding: 0 10px; font-size: 14px; }
.pod-portrait { display: none; }

/* ------------------------------------------------------------ the band */
.pod-band { position: relative; border-top: 1px solid var(--ink); }
.pod-plate { position: relative; height: 300px; overflow: hidden; }
.pod-plate > svg, .pod-noise, .pod-noise > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pod-noise { pointer-events: none; }
.pod-card-wrap { position: relative; padding: 0 var(--pad); margin-top: -96px; }
.pod-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px; background: var(--paper);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--ink);
}
.pod-card-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; }
.pod-card-with { font-size: 14px; line-height: 1.5; color: var(--muted); }
.pod-card-play { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.pod-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.pod-card-meta .pod-card-state { color: var(--ink); font-weight: 500; }

/* Play controls. The circle is Signal Blue: it is where the signal ends. */
.play {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; text-decoration: none; cursor: pointer;
}
.play svg { fill: currentColor; }
.play .i-pause, .play.is-playing .i-play { display: none; }
.play.is-playing .i-pause { display: block; }
.play-lg {
  width: 56px; height: 56px; background: var(--signal); color: var(--paper);
  box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55);
  transition: box-shadow 0.15s ease;
}
.play-lg:hover { color: var(--paper); box-shadow: inset 0 0 0 3px var(--signal), inset 0 0 0 4px rgba(255, 255, 255, 0.55), inset 0 3px 6px rgba(11, 15, 26, 0.35); }
.play-lg svg { width: 22px; height: 22px; }
.play-sm { width: 44px; height: 44px; border: 1px solid var(--paper); color: var(--signal); }
.play-sm:hover { background: var(--paper); color: var(--signal); }
.play-sm svg { width: 16px; height: 16px; }

/* Listening progress: a fine blue rule, only while an episode is loaded. */
.pod-prog { position: absolute; left: 5px; right: 5px; bottom: 5px; height: 3px; opacity: 0; transition: opacity 0.3s ease; }
.pod-prog span { display: block; width: 0; height: 100%; background: var(--signal); }
.pod-prog.is-active { opacity: 1; }

/* ------------------------------------------------------------ 2. steps */
.pod-steps .seal-row { margin-bottom: 28px; }
.pod-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pod-step-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-top: 1px solid var(--ink); }
.pod-step-list li:last-child { border-bottom: 1px solid var(--ink); }
.pod-step-n { grid-row: span 2; font-family: var(--serif); font-size: 36px; line-height: 1; color: var(--muted); }
.pod-step-n.sig { color: var(--signal); }
.pod-step-list h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.pod-step-list p { font-size: 15px; line-height: 1.55; }
.pod-strip { position: relative; height: 96px; margin-top: 32px; overflow: hidden; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pod-strip svg, .pod-strip img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ 3. episodes */
.pod-eps .seal-row { margin-bottom: 24px; }
.pod-ep-grid { display: flex; flex-direction: column; }
.pod-ep { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 0 24px; border-top: 1px solid var(--muted); }
.pod-ep:last-child { border-bottom: 1px solid var(--muted); }
.pod-ep-no { font-family: var(--serif); font-variant-caps: small-caps; font-size: 14px; letter-spacing: 0.04em; color: var(--slate); }
.pod-ep-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--paper); }
.pod-ep-with { font-size: 14px; line-height: 1.5; color: var(--muted-dark); }
.pod-ep-play { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pod-ep-meta { font-size: 14px; font-weight: 500; color: var(--paper); }
.pod-ep .pod-prog { left: 0; right: 0; bottom: -2px; }
.pod-all { margin-top: 28px; font-size: 15px; color: var(--muted-dark); }
.pod-all a { color: var(--paper); }
.pod-all a:hover { color: var(--paper); }

/* ------------------------------------------------------------ 4. experts */
.pod-experts .seal-row { margin-bottom: 24px; }
.pod-experts-head { display: flex; flex-direction: column; gap: 14px; }
.pod-lead { max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.pod-roster { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
.pod-roster li { display: flex; flex-direction: column; gap: 6px; padding: 22px 0 24px; border-top: 1px solid var(--ink); }
.pod-roster-name { align-self: flex-start; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--ink); }
.pod-roster-title { font-size: 15px; line-height: 1.5; color: var(--ink); }
.pod-roster-ep { font-family: var(--serif); font-variant-caps: small-caps; font-size: 14px; letter-spacing: 0.04em; color: var(--muted); }
.pod-equotes { margin-top: 48px; display: grid; gap: 32px; }
.pod-equote { margin: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 3px double var(--slate); }
.pod-equote blockquote { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.45; }
.pod-equote figcaption { font-size: 15px; color: var(--muted); }
.pod-equote-ep { font-family: var(--serif); font-variant-caps: small-caps; letter-spacing: 0.04em; margin-left: 6px; }

/* ------------------------------------------------------------ 5. host */
.pod-host .seal-row { margin-bottom: 24px; }
.pod-host-row { display: flex; flex-direction: column; gap: 48px; }
.pod-host-copy { color: var(--paper); }
.pod-host-copy .pod-h2 { margin-bottom: 6px; }
.pod-host-copy p { font-size: 17px; line-height: 1.65; color: var(--muted-dark); }
.pod-host-copy .pod-host-turn { font-family: var(--serif); font-size: 24px; line-height: 1.35; color: var(--paper); }
.pod-host-quotes { display: flex; flex-direction: column; gap: 40px; }
.q-who { font-size: 16px; font-weight: 600; color: var(--paper); }
.pod-creds { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--rule-dark); display: flex; flex-direction: column; gap: 14px; }
.pod-creds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--paper); }
.pod-creds a { color: var(--paper); --rule-color: var(--slate); }
.pod-creds a:hover { color: var(--paper); }
.pod-aso { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.pod-aso-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aso-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px 6px 14px; text-align: center;
  border: 1px solid var(--paper); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--paper);
}
.aso-call { font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: -0.01em; color: var(--paper); white-space: nowrap; }
.aso-call b { font-weight: 600; }
.aso-city { font-family: var(--serif); font-variant-caps: small-caps; font-size: 12px; line-height: 1.3; letter-spacing: 0.06em; color: var(--slate); }
/* The plates engrave in once, left to right, the site's sweep at 1.5 seconds. */
.motion .pod-aso-row.engrave.inview:not(.engraved) { animation-duration: 1.5s; }

/* ------------------------------------------------------------ 6. for experts */
.pod-forx-row { display: flex; flex-direction: column; gap: 28px; }
.pod-forx-copy p { font-size: 17px; line-height: 1.65; }
.pod-forx-act .keyline-lg { width: 100%; }

/* Workshop ad, shown only when an event is scheduled. */
.pod-workshop .wrap { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pod-ws-meta { font-size: 17px; color: var(--muted-dark); }

/* ------------------------------------------------------------ 7, 8 */
.pod-close { border-top: 1px solid var(--ink); }
.pod-disclaimer { padding: 24px var(--pad); border-top: 1px solid var(--ink); }
.pod-disclaimer p { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------------ tablet */
@media (min-width: 768px) {
  .pod-hero { padding-top: 56px; }
  .pod-name { font-size: 88px; }
  .pod-pair { font-size: 26px; margin-top: 12px; }
  .pod-tag { font-size: 30px; margin-top: 36px; }
  .pod-desc { font-size: 18px; margin-top: 20px; }
  .pod-listen { flex-direction: row; align-items: center; gap: 14px; align-self: flex-start; flex-wrap: wrap; }
  .pod-listen .seal-label { margin-right: 6px; }
  .pod-listen-row { gap: 14px; }
  .pod-listen-row .keyline { flex: 0 0 auto; padding: 0 22px; font-size: 15px; }
  .pod-plate { height: 380px; }
  .pod-card-wrap { margin-top: -120px; max-width: 520px; margin-left: auto; }
  .pod-card { padding: 30px 30px 28px; gap: 16px; }
  .pod-card-title { font-size: 26px; }
  .pod-card-with { font-size: 15px; }
  .play-lg { width: 64px; height: 64px; }
  .pod-h2 { font-size: 40px; }
  .pod-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aso-call { font-size: 26px; }
  .pod-strip { height: 130px; }
  .pod-forx-act .keyline-lg { width: auto; }
}

/* Portrait beside the name from 1024 up. Bottom-aligned so the shoulders meet
   the top rule of the band. The column is about 540px wide at full size so the
   head starts level with the name pairing. */
@media (min-width: 1024px) {
  .pod-hero { padding-bottom: 0; }
  .pod-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 42vw, 540px); gap: 24px; align-items: end; }
  .pod-hero-copy { padding-bottom: 44px; }
  .pod-portrait { display: block; position: relative; aspect-ratio: 540 / 600; overflow: hidden; margin-right: -24px; }
  .pod-portrait img {
    position: absolute; left: 0; bottom: -4%; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  /* The latest episode sits over the signal end. Its play button sits on the
     blue rule: the card hangs from the band's center line by the distance from
     its bottom edge to the button's center (28px padding + 32px). */
  .pod-band { height: 440px; }
  .pod-plate { position: absolute; inset: 0; height: auto; }
  .pod-card-wrap {
    position: absolute; left: 0; right: 0; top: 0; bottom: 50%; margin: 0 auto;
    max-width: var(--max); padding: 0 var(--pad);
    display: flex; justify-content: flex-end; align-items: flex-end;
  }
  .pod-card { width: 420px; transform: translateY(60px); }
  .pod-step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
  .pod-step-list li, .pod-step-list li:last-child { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; }
  .pod-step-n { font-size: 44px; }
  .pod-step-list h3 { margin: 0; font-size: 26px; }
  .pod-step-list p { font-size: 16px; line-height: 1.6; }
  .pod-strip { height: 170px; margin-top: 48px; }
  .pod-ep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .pod-ep { padding: 28px 0 32px; gap: 12px; }
  .pod-ep, .pod-ep:last-child { border-bottom: 1px solid var(--muted); }
  .pod-ep-title { font-size: 26px; }
  .pod-ep-with { font-size: 15px; }
  .pod-ep-play { margin-top: auto; padding-top: 10px; }
  .pod-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pod-equotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .pod-host-row { flex-direction: row; align-items: flex-start; gap: clamp(48px, 7vw, 96px); }
  .pod-host-copy { flex: 1 1 560px; min-width: 0; }
  .pod-host-quotes { flex: 0 1 460px; min-width: 0; padding-top: 8px; }
  .pod-creds ul { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .pod-creds li + li { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--rule-dark); }
  .pod-aso-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .pod-forx-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 64px; }
  .pod-forx-copy { flex: 0 1 720px; }
  .pod-forx-act { flex-shrink: 0; padding-bottom: 6px; }
}

@media (min-width: 1200px) {
  .pod-hero { padding-top: 64px; }
  .pod-name { font-size: 112px; }
  .pod-pair { font-size: 30px; margin-top: 14px; }
  .pod-tag { font-size: 34px; margin-top: 44px; }
  .pod-desc { font-size: 19px; margin-top: 22px; }
  .pod-listen { margin-top: 32px; }
  .pod-steps, .pod-experts, .pod-forx { padding: 104px var(--pad); }
  .pod-eps, .pod-host { padding: 104px var(--pad) 112px; }
  .pod-steps .seal-row, .pod-eps .seal-row, .pod-experts .seal-row, .pod-host .seal-row { margin-bottom: 44px; }
  .pod-h2 { font-size: 48px; }
  .pod-lead { font-size: 20px; }
  .pod-roster-name { font-size: 30px; }
  .pod-host-copy p { font-size: 19px; }
  .pod-host-copy .pod-host-turn { font-size: 28px; }
  .pod-forx-copy p { font-size: 20px; }
  .aso-call { font-size: 30px; }
  .aso-plate { padding: 18px 10px 16px; }
  .pod-creds { margin-top: 72px; }
  .pod-creds ul { font-size: 17px; }
  .pod-disclaimer { padding: 32px var(--pad); }
  .pod-disclaimer p { font-size: 15px; }
}

/* Phone: the full platform name goes to screen readers only, so the three
   listen buttons fit side by side. */
@media (max-width: 767px) {
  .pod-listen .seal-label { display: none; }
  .ph-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------ the band's motion
   Brief section 8: noise fills the band, one sweep quiets it left to right, the
   blue rule draws out of what is left, the latest episode lands where it ends.
   About four seconds, once. html.pod-anim is set in the page head (never with
   reduced motion). The band waits as paper until podcast.js adds .go. */
/* .noisy: the noise has arrived and fills the band (also when only its top
   edge shows at the foot of the first screen). .go: the band is on screen,
   so it quiets. The finished plate sits under the noise the whole time. */
.pod-anim .pod-plate > svg { opacity: 0; }
.pod-anim .pod-noise { opacity: 0; }
.pod-anim .pod-card { opacity: 0; }
.pod-anim .sig-rule { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pod-anim .play-lg { transform: scale(0.6); }
.pod-anim .pod-band.noisy .pod-plate > svg { animation: pod-show 0.01s linear 0.5s forwards; }
.pod-anim .pod-band.noisy .pod-noise { animation: pod-fill 0.5s ease-out forwards; }
.pod-anim .pod-band.noisy.go .pod-noise { animation: pod-fill 0.5s ease-out forwards, pod-sweep 2.6s cubic-bezier(0.55, 0, 0.3, 1) 0.6s forwards; }
.pod-anim .pod-band.noisy.go .sig-rule { animation: pod-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) 2.4s forwards; }
.pod-anim .pod-band.noisy.go .pod-card { animation: pod-show 0.6s ease-out 3.2s forwards; }
.pod-anim .pod-band.noisy.go .play-lg { animation: pod-pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.4) 3.6s forwards; }
@keyframes pod-show { to { opacity: 1; } }
@keyframes pod-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes pod-sweep { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes pod-draw { to { stroke-dashoffset: 0; } }
@keyframes pod-pop { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pod-anim .pod-plate > svg, .pod-anim .pod-card { opacity: 1; animation: none; }
  .pod-anim .sig-rule { stroke-dashoffset: 0; animation: none; }
  .pod-anim .play-lg { transform: none; animation: none; }
  .pod-noise { display: none; }
}
@media print {
  .pod-anim .pod-plate > svg, .pod-anim .pod-card { opacity: 1; }
  .pod-anim .sig-rule { stroke-dashoffset: 0; }
  .pod-noise { display: none; }
}