:root {
  color-scheme: dark;
  --background: #02070b;
  --foreground: #f3ead2;
  --ink: #071116;
  --ink-soft: #0d1a20;
  --paper: #eee3ca;
  --paper-muted: #b7ad98;
  --brass: #c5a86a;
  --brass-bright: #e1ca92;
  --spectral: #62b7aa;
  --fell: "IM Fell English", Georgia, "Times New Roman", serif;
}

@font-face {
  font-family: "IM Fell English";
  src: url("assets/im-fell-english-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  scroll-behavior: smooth;
  background: var(--background);
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: Georgia, "Times New Roman", serif;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

.qa-mobile-target {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Welcome page: the original films, whole ---------- */
.welcome-page { overflow: hidden; background: #05080c; }

.welcome {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #05080c;
  container-type: size;
  --fx: 0px; --fy: 0px; --fw: 100cqw; --fh: 100cqh;
}

/* The films carry the whole composition — title, portrait, captions and the
   Enter plaque are painted in, with the plaque bottom at 99.25% of the frame.
   There is no croppable margin, so the film is shown WHOLE and centred on the
   page's own ink. Anything else cuts the title or the CTA. */
.storm-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 1;
  user-select: none;
  background: #05080c;
}
.mobile-film { display: none; }

/* Invisible CTA over the painted plaque. JS measures the film's real contain
   box each resize and writes --fx/--fy/--fw/--fh, so it lands exactly. */
.enter-hit-area {
  position: absolute;
  z-index: 3;
  left: calc(var(--fx) + var(--fw) * 0.41870);
  top:  calc(var(--fy) + var(--fh) * 0.89418);
  width:  calc(var(--fw) * 0.16724);
  height: calc(var(--fh) * 0.09837);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.enter-hit-area:hover,
.enter-hit-area:focus-visible {
  border-color: rgba(231, 207, 151, .8);
  outline: 1px solid rgba(111, 226, 209, .6);
  outline-offset: 3px;
  box-shadow: 0 0 1.6rem rgba(77, 207, 191, .3);
}
.enter-hit-area:active { transform: translateY(1px); }

@container (max-width: 700px) {
  .desktop-film { display: none; }
  .mobile-film  { display: block; }
  .enter-hit-area {
    left: calc(var(--fx) + var(--fw) * 0.21795);
    top:  calc(var(--fy) + var(--fh) * 0.86315);
    width:  calc(var(--fw) * 0.56410);
    height: calc(var(--fh) * 0.10427);
  }
}

/* QA harness: ?qa=mobile renders a true 390x844 phone box on any screen. */
.welcome-page.qa-mobile { display: grid; place-items: center; background: #05080c; }
.welcome-page.qa-mobile .welcome { width: 390px; height: 844px; outline: 1px solid #223; }

/* Content page */
.inside-page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(circle at 82% 8%, rgba(78, 151, 143, 0.13), transparent 24rem),
    linear-gradient(180deg, #071116 0%, #09141a 43%, #050b0e 100%);
  color: var(--paper);
  font-family: var(--fell);
  font-size: 1.125rem;
}

.inside-page:has(#qa-mobile:target) {
  width: 390px;
  margin-inline: auto;
}

.inside-page::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.33;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 5px 5px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.inside-atmosphere {
  position: absolute;
  z-index: 0;
  top: -8rem;
  right: -8rem;
  width: min(52rem, 68vw);
  aspect-ratio: 1;
  border: 1px solid rgba(197, 168, 106, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(197, 168, 106, 0.018),
    0 0 0 10rem rgba(98, 183, 170, 0.016);
  pointer-events: none;
}

.site-shell {
  position: relative;
  z-index: 1;
  width: min(74rem, calc(100% - 3rem));
  margin-inline: auto;
}

.inside-header {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(197, 168, 106, 0.25);
}

.inside-brand {
  display: block;
  padding-block: 0.9rem;
}

.inside-brand img {
  display: block;
  width: auto;
  height: 5.6rem;
  filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.5));
}

.inside-brand:focus-visible {
  outline: 2px solid var(--spectral);
  outline-offset: 0.25rem;
}

.inside-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
}

.inside-nav a {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--paper-muted);
  font-size: 1.15rem;
  text-decoration: none;
}

.inside-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 0;
  height: 1px;
  content: "";
  background: var(--spectral);
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.inside-nav a:hover,
.inside-nav a:focus-visible,
.section-link:hover,
.section-link:focus-visible,
.inside-footer a:hover,
.inside-footer a:focus-visible {
  color: var(--paper);
}

.inside-nav a:hover::after,
.inside-nav a:focus-visible::after {
  transform: scaleX(1);
}

.inside-intro {
  display: grid;
  min-height: 42rem;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(26rem, 1.18fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
  padding-block: 5.5rem 7rem;
}

.portrait-column {
  position: relative;
  display: grid;
  justify-items: center;
}

.portrait-halo {
  position: absolute;
  top: 16%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(65, 151, 143, 0.12);
  filter: blur(3rem);
}

.hosts-portrait {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 25rem);
  height: auto;
  filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.55));
}

.hosts-caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.34rem;
  margin-top: -0.35rem;
  text-align: center;
}

.hosts-caption::before,
.hosts-caption::after {
  position: absolute;
  top: 0.66rem;
  width: clamp(2rem, 5vw, 4.5rem);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(197, 168, 106, 0.58));
}

.hosts-caption::before {
  right: calc(100% + 1rem);
}

.hosts-caption::after {
  left: calc(100% + 1rem);
  transform: scaleX(-1);
}

.hosts-caption strong {
  color: var(--brass-bright);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 400;
}

.hosts-caption span {
  color: var(--paper-muted);
  font-size: 1.05rem;
}

.intro-copy h1,
.section-heading h2,
.episodes-heading h2 {
  margin: 0;
  color: var(--brass-bright);
  font-weight: 400;
  line-height: 1.02;
  text-wrap: balance;
}

.intro-copy h1 {
  max-width: 12ch;
  font-size: clamp(3.4rem, 6.4vw, 6.2rem);
  letter-spacing: -0.01em;
}

.intro-lede {
  max-width: 34rem;
  margin: 2rem 0 0;
  color: var(--paper-muted);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.7;
}

.listen-label {
  margin: 2.2rem 0 0.7rem;
  color: var(--paper-muted);
  font-size: 1.05rem;
}

.listen-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.listen-links a {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  border: 1px solid rgba(197, 168, 106, 0.55);
  background: rgba(5, 13, 17, 0.6);
  color: var(--brass-bright);
  font-size: 1.1rem;
  padding-inline: 1.1rem;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.listen-links li:first-child a {
  border-color: var(--brass);
  background: linear-gradient(180deg, #c5ab6d, #927a49);
  color: #071116;
}

.listen-links a:hover,
.listen-links a:focus-visible {
  border-color: var(--spectral);
  color: var(--paper);
  outline: none;
  box-shadow: 0 0 0 3px rgba(98, 183, 170, 0.18);
}

.listen-links li:first-child a:hover,
.listen-links li:first-child a:focus-visible {
  color: #071116;
  filter: brightness(1.1);
}

.episodes-heading .listen-links {
  margin-top: 1.6rem;
}

.inside-section {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(197, 168, 106, 0.2);
  padding-block: 7rem;
}

.gallery-section {
  background:
    linear-gradient(90deg, rgba(98, 183, 170, 0.035), transparent 24%, transparent 76%, rgba(98, 183, 170, 0.035)),
    rgba(3, 10, 14, 0.34);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 0.6fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 3.25rem;
}

.section-heading h2,
.episodes-heading h2 {
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  letter-spacing: -0.01em;
}

.section-heading > p,
.episodes-heading > p {
  margin: 0;
  color: var(--paper-muted);
  font-size: 1.15rem;
  line-height: 1.7;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.35rem;
}

.gallery-card {
  margin: 0;
  border: 1px solid rgba(197, 168, 106, 0.28);
  background: rgba(7, 17, 22, 0.78);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
}

.gallery-image-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid rgba(197, 168, 106, 0.28);
}

.gallery-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 600ms ease;
}

.gallery-card:hover img {
  filter: brightness(1.08);
  transform: scale(1.025);
}

.gallery-card figcaption {
  min-height: 6.4rem;
  padding: 1.45rem 1.55rem 1.6rem;
}

.gallery-card strong {
  display: block;
  color: var(--brass-bright);
  font-size: 1.35rem;
  font-weight: 400;
  text-transform: none;
}

.gallery-card p {
  margin: 0.6rem 0 0;
  color: var(--paper-muted);
  font-size: 1.1rem;
  line-height: 1.6;
}

.episodes-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 0.7fr) minmax(28rem, 1.3fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.episodes-heading {
  position: sticky;
  top: 2.5rem;
}

.episodes-heading > p {
  max-width: 27rem;
  margin-top: 1.4rem;
}

.episode-list {
  border-top: 1px solid rgba(197, 168, 106, 0.32);
}

.episode-card {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
  border-bottom: 1px solid rgba(197, 168, 106, 0.32);
  padding-block: 2rem;
  transition: background 180ms ease, padding 180ms ease;
}

.episode-card-link:hover {
  background: rgba(98, 183, 170, 0.045);
  padding-inline: 0.8rem;
}

.episode-card-link {
  color: inherit;
  text-decoration: none;
}

.episode-card-link:focus-visible {
  background: rgba(98, 183, 170, 0.07);
  outline: 2px solid var(--spectral);
  outline-offset: 0.25rem;
}

.episode-state-card {
  min-height: 12rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-inline: clamp(1rem, 5vw, 4rem);
  text-align: center;
}

.episode-state-card > div,
.episode-state-card p {
  margin-inline: auto;
}

.episode-state-card h3 {
  max-width: 25ch;
  margin-inline: auto;
}

.episode-state-card p:last-child {
  max-width: 34rem;
}

.episode-skeleton {
  min-height: 12rem;
  pointer-events: none;
}

.skeleton-copy {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.05rem;
}

.skeleton-block {
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(100deg, transparent 20%, rgba(197, 224, 218, 0.11) 48%, transparent 76%),
    rgba(197, 168, 106, 0.10);
  background-size: 230% 100%, 100% 100%;
  animation: episode-skeleton-shimmer 1.8s linear infinite;
}

.skeleton-number {
  width: 1.45rem;
  height: 0.75rem;
  margin-top: 0.2rem;
}

.skeleton-meta {
  width: min(45%, 12rem);
  height: 0.7rem;
}

.skeleton-title {
  width: min(82%, 28rem);
  height: 1.8rem;
}

.skeleton-description {
  width: min(96%, 35rem);
  height: 0.85rem;
}

.skeleton-description-short {
  width: min(68%, 23rem);
}

@keyframes episode-skeleton-shimmer {
  to {
    background-position: -130% 0, 0 0;
  }
}

.episode-number {
  color: var(--spectral);
  font-size: 1.6rem;
  line-height: 1.2;
}

.episode-meta {
  margin: 0;
  color: var(--spectral);
  font-size: 1.05rem;
}

.episode-season {
  margin: 0;
  padding: 2.2rem 0 0.4rem;
  border-bottom: 1px solid rgba(197, 168, 106, 0.32);
  color: var(--spectral);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.episode-season:first-child {
  padding-top: 1.2rem;
}

.episode-card h3,
.episode-card .episode-title {
  margin: 0.2rem 0 0.6rem;
  color: var(--paper);
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
}

.episode-card-link:hover h3,
.episode-card-link:focus-visible h3,
.episode-card-link:hover .episode-title,
.episode-card-link:focus-visible .episode-title {
  color: var(--brass-bright);
}

.episode-card p {
  max-width: 36rem;
  margin: 0;
  color: var(--paper-muted);
  font-size: 1.1rem;
  line-height: 1.65;
}

.connect-section {
  background:
    linear-gradient(115deg, rgba(98, 183, 170, 0.07), transparent 42%),
    rgba(5, 13, 17, 0.76);
}

.connect-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

/* .story-status is a direct grid child of .connect-layout, so the moment it
   unhides it claims the form's cell and the form wraps down into the narrow
   heading column. Pin both to the second column so the form keeps its width
   whether or not the status message is showing. */
.story-status,
.story-form {
  grid-column: 2;
}

.connect-heading h2 {
  max-width: 11ch;
  margin: 0;
  color: var(--brass-bright);
  font-size: clamp(3rem, 5.4vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

.connect-heading > p {
  max-width: 30rem;
  margin: 1.7rem 0 0;
  color: var(--paper-muted);
  font-size: 1.15rem;
  line-height: 1.72;
}

.connect-heading .connect-aside {
  border-left: 1px solid var(--spectral);
  padding-left: 1rem;
  color: #9ab7b1;
  font-size: 1.05rem;
}

.story-form {
  display: grid;
  gap: 1.35rem;
  border: 1px solid rgba(197, 168, 106, 0.36);
  background: rgba(5, 13, 17, 0.82);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.story-form label:not(.permission-check) {
  display: grid;
  gap: 0.55rem;
}

.story-form label > span {
  color: var(--brass-bright);
  font-size: 1.15rem;
}

.story-form label > span small {
  color: #899595;
  font-size: 0.95rem;
}

.story-form input[type="text"],
.story-form input[type="email"],
.story-form textarea {
  width: 100%;
  border: 1px solid rgba(197, 168, 106, 0.32);
  border-radius: 0;
  outline: none;
  background: rgba(2, 8, 11, 0.66);
  color: var(--paper);
  font-size: 1.1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.story-form input[type="text"],
.story-form input[type="email"] {
  min-height: 3.15rem;
  padding-inline: 0.9rem;
}

.story-form textarea {
  min-height: 10rem;
  padding: 0.85rem 0.9rem;
  line-height: 1.55;
  resize: vertical;
}

.story-form textarea::placeholder {
  color: #7d8989;
}

.story-form input:focus-visible,
.story-form textarea:focus-visible {
  border-color: var(--spectral);
  background: rgba(5, 18, 21, 0.92);
  box-shadow: 0 0 0 3px rgba(98, 183, 170, 0.13);
}

.permission-check {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.75rem;
  align-items: start;
  cursor: pointer;
}

.permission-check input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.13rem 0 0;
  accent-color: var(--spectral);
}

.story-form .permission-check > span {
  color: var(--paper-muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.form-actions button {
  flex: 0 0 auto;
  min-height: 3.15rem;
  border: 1px solid var(--brass);
  border-radius: 0;
  background: linear-gradient(180deg, #c5ab6d, #927a49);
  color: #071116;
  cursor: pointer;
  font-size: 1.15rem;
  padding-inline: 1.5rem;
  transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.form-actions button:hover,
.form-actions button:focus-visible {
  filter: brightness(1.13);
  box-shadow: 0 0 1.5rem rgba(98, 183, 170, 0.2);
  outline: 2px solid var(--spectral);
  outline-offset: 2px;
}

.form-actions button:active {
  transform: translateY(1px);
}

.form-actions small {
  max-width: 18rem;
  color: #879391;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.inside-footer {
  display: flex;
  min-height: 7rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(197, 168, 106, 0.2);
  color: #9d9582;
  font-size: 1.05rem;
}

.inside-footer a {
  color: var(--brass);
  text-decoration: none;
}

@container (max-width: 700px) {
  .site-shell {
    width: min(100% - 2rem, 34rem);
  }

  .inside-header {
    min-height: 7rem;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.3rem;
    padding-block: 0.8rem;
  }

  .inside-brand img {
    height: 4.4rem;
  }

  .listen-links {
    gap: 0.6rem;
  }

  .listen-links a {
    min-height: 2.75rem;
    font-size: 1rem;
    padding-inline: 0.85rem;
  }

  .inside-nav {
    width: 100%;
    justify-content: space-between;
    gap: 0.65rem;
  }

  .inside-nav a {
    min-height: 2.75rem;
    font-size: 1.05rem;
  }

  .inside-intro {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 2.8rem;
    padding-block: 3.25rem 4.5rem;
  }

  .portrait-column {
    order: 2;
  }

  .intro-copy {
    order: 1;
  }

  .hosts-portrait {
    width: min(88cqw, 22rem);
  }

  .intro-copy h1 {
    max-width: none;
    font-size: clamp(3rem, 13.5cqw, 4.4rem);
  }

  .intro-lede {
    margin-top: 1.5rem;
    font-size: 1.15rem;
  }

  .inside-section {
    padding-block: 4.5rem;
  }

  .section-heading,
  .episodes-layout,
  .connect-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Single column here, so release the second-column pin or the browser
     conjures an implicit column and the form goes off to the side. */
  .story-status,
  .story-form {
    grid-column: 1;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .section-heading h2,
  .episodes-heading h2 {
    font-size: clamp(2.65rem, 12cqw, 3.7rem);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gallery-card figcaption {
    min-height: auto;
  }

  .episodes-layout {
    gap: 3rem;
  }

  .episodes-heading {
    position: static;
  }

  .episode-card {
    grid-template-columns: 2rem 1fr;
    gap: 0.85rem;
    padding-block: 1.6rem;
  }

  .episode-state-card {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 1rem;
  }

  .connect-layout {
    gap: 3rem;
  }

  .connect-heading h2 {
    font-size: clamp(2.85rem, 12.5cqw, 4rem);
  }

  .connect-heading > p {
    font-size: 1.1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .form-actions button {
    width: 100%;
  }

  .inside-footer {
    min-height: 6rem;
    gap: 1.5rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .skeleton-block {
    animation: none;
  }
}

/* Listener-story form: honeypot + submission status */
.lantern-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.story-status {
  margin: 0 0 1.15rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1.5;
}

.story-status-ok {
  border-color: rgba(111, 226, 209, 0.45);
  background: rgba(31, 92, 88, 0.28);
  color: #cfeee8;
}

.story-status-bad {
  border-color: rgba(231, 154, 133, 0.45);
  background: rgba(96, 44, 34, 0.28);
  color: #f2d5cd;
}

/* Story: "The rectory on the cliff" */
.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.story-heading {
  position: sticky;
  top: 2.5rem;
}

.story-heading h1,
.story-heading h2 {
  max-width: 9ch;
  margin: 0;
  color: var(--brass-bright);
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

.story-page {
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

.story-back {
  display: inline-block;
  margin-bottom: 1.6rem;
  color: var(--paper-muted);
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(197, 168, 106, 0.4);
}

.story-back:hover,
.story-back:focus-visible {
  color: var(--brass-bright);
}



.story-body a,
.caption-read {
  color: var(--brass-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(197, 168, 106, 0.55);
}

.story-body a:hover,
.story-body a:focus-visible,
.caption-read:hover,
.caption-read:focus-visible {
  color: var(--paper);
  border-color: var(--spectral);
}

.caption-read {
  white-space: nowrap;
}

.story-figure {
  margin: 0.5rem 0 2.4rem;
}

/* Victorian frames on article photos. Each frame's window has the exact shape
   of its photo, so nothing is cropped. The frame art lies over the photo; green
   mist wisps form, drift and dissolve over the frame (masked by a soft halo
   of the frame, kept off the photo). Still when reduced motion is set. */
.vframe {
  position: relative;
  display: block;
  width: 100%;
  max-width: 24rem;
  aspect-ratio: var(--ar);
  isolation: isolate;
  filter: drop-shadow(0 1.2rem 1.6rem rgba(0, 0, 0, 0.55));
}

.vframe--lead {
  max-width: 26rem;
  margin-top: 1.2rem;
}

/* A framed lead photo makes the heading column too tall to stay pinned. */
.story-heading:has(.vframe) {
  position: static;
}

.vframe .vf-photo {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: fill;
  filter: sepia(0.2) saturate(0.8) contrast(1.05) brightness(0.9);
}

.vframe .vf-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.vframe::after {
  content: "";
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 58%, rgba(2, 7, 11, 0.5) 100%);
}

.vf-mist {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: var(--mist) center / 100% 100% no-repeat;
  mask: var(--mist) center / 100% 100% no-repeat;
}

.vf-mist i {
  position: absolute;
  inset: -12%;
  opacity: 0;
  background: url("assets/fog-tile.svg") 0 0 / 640px 320px repeat;
  will-change: transform, opacity;
  animation: vf-wisp-a 14s ease-in-out infinite;
}

.vf-mist i:nth-child(2) {
  background-position: 230px 150px;
  background-size: 760px 380px;
  animation-name: vf-wisp-b;
  animation-duration: 19s;
  animation-delay: -6s;
}

.vf-mist i:nth-child(3) {
  background-position: 470px 60px;
  background-size: 900px 450px;
  animation-name: vf-wisp-c;
  animation-duration: 23s;
  animation-delay: -13s;
}

@keyframes vf-wisp-a {
  0% { opacity: 0; transform: translate3d(-6%, 2%, 0); }
  45% { opacity: 0.15; }
  100% { opacity: 0; transform: translate3d(6%, -3%, 0); }
}

@keyframes vf-wisp-b {
  0% { opacity: 0; transform: translate3d(5%, -2%, 0); }
  50% { opacity: 0.12; }
  100% { opacity: 0; transform: translate3d(-5%, 3%, 0); }
}

@keyframes vf-wisp-c {
  0% { opacity: 0; transform: translate3d(0, 5%, 0); }
  55% { opacity: 0.11; }
  100% { opacity: 0; transform: translate3d(3%, -6%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .vf-mist i {
    animation: none;
  }

  .vf-mist i:first-child {
    opacity: 0.08;
  }
}


.story-figure figcaption {
  max-width: 30rem;
  margin-top: 0.8rem;
  color: var(--paper-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.story-figure figcaption a {
  font-size: inherit;
}

.story-sources {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(197, 168, 106, 0.32);
}

.story-sources h2 {
  margin: 0 0 0.8rem;
  color: var(--spectral);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.story-sources ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--paper-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.story-sources li + li {
  margin-top: 0.6rem;
}

.story-heading p {
  margin: 1.2rem 0 0;
  color: var(--paper-muted);
  font-size: 1.15rem;
}

.story-body {
  max-width: 36rem;
}

.story-body p {
  margin: 0 0 1.5em;
  color: var(--paper);
  font-size: clamp(1.2rem, 1.5vw, 1.35rem);
  line-height: 1.8;
}

.story-body p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--brass-bright);
  font-size: 4.1em;
  line-height: 0.8;
}

.story-body .story-last {
  margin: 2.2rem 0 0;
  color: var(--brass-bright);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
}

@container (max-width: 700px) {
  .story-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .story-heading {
    position: static;
  }

  .story-heading h1,
  .story-heading h2 {
    max-width: none;
    font-size: clamp(2.65rem, 12cqw, 3.7rem);
  }
}

.gallery-card-link > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.gallery-card-link > a:focus-visible {
  outline: 2px solid var(--spectral);
  outline-offset: 3px;
}

.gallery-read {
  display: inline-block;
  margin-top: 0.9rem;
  border-bottom: 1px solid rgba(197, 168, 106, 0.55);
  color: var(--brass-bright);
  font-size: 1.1rem;
}

.gallery-card-link > a:hover .gallery-read,
.gallery-card-link > a:focus-visible .gallery-read {
  border-color: var(--spectral);
  color: var(--paper);
}
/* bhd-softnav: same-document page transition (see /assets/softnav.js; PAGE-TRANSITIONS.md in mcflynn80/bayhousedigital). */
.inside-header{view-transition-name:site-header}
@media (prefers-reduced-motion:no-preference){::view-transition-old(root){animation:.25s ease-in both pt-out}::view-transition-new(root){animation:.25s ease-out both pt-in}::view-transition-old(site-header),::view-transition-new(site-header){animation-duration:.2s}@keyframes pt-out{to{opacity:0}}@keyframes pt-in{from{opacity:0}}}
html.nav-busy{cursor:progress}

/* ---------- Antique brass titling (matches the homepage title, Oct 2026) ---------- */
.intro-copy h1,
.section-heading h2,
.episodes-heading h2,
.connect-heading h2,
.story-heading h1,
.story-heading h2,
.hosts-caption strong {
  /* bright brass on the top of each line, darker aged brass in the middle, a burnished lower edge;
     sized per line so every line of a wrapped heading gets the full sheen */
  background: linear-gradient(180deg, #f7e7b0 0%, #e2c27a 22%, #b08a45 46%, #7d5e2a 54%, #c39d55 70%, #ecd08e 84%, #8a6a30 100%);
  background-size: 100% 1.02em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* cast depth: three stacked dark edges below the letters, then a soft shadow */
  filter: drop-shadow(0 1px 0 #6b4f1e) drop-shadow(0 1px 0 #3d2c10) drop-shadow(0 1px 0 #1f1607) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
}
.hosts-caption strong { background-size: 100% 1.2em; }

.story-body p:first-child::first-letter {
  color: #e6c985;
  text-shadow: 0 1px 0 #8a6a30, 0 2px 0 #5c4419, 0 3px 0 #3a2a10, 0 6px 10px rgba(0, 0, 0, 0.75);
}

/* Listen buttons as small brass plates */
.listen-links a {
  border: 1px solid #8a6a30;
  border-radius: 3px;
  background: linear-gradient(180deg, #2a2216 0%, #17120b 100%);
  color: #e6c985;
  box-shadow: inset 0 1px 0 rgba(247, 231, 176, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 0 #000;
}
.listen-links li:first-child a {
  border-color: #6b4f1e;
  background: linear-gradient(180deg, #f2dc9c 0%, #d2ae62 40%, #9c7735 60%, #c9a35b 100%);
  color: #1a1206;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
}
.listen-links a:hover,
.listen-links a:focus-visible {
  border-color: #e2c27a;
  color: #f7e7b0;
  box-shadow: inset 0 1px 0 rgba(247, 231, 176, 0.35), 0 0 0 3px rgba(226, 194, 122, 0.22), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.listen-links li:first-child a:hover,
.listen-links li:first-child a:focus-visible { color: #1a1206; filter: brightness(1.08); }
.form-actions button {
  border: 1px solid #6b4f1e;
  border-radius: 3px;
  background: linear-gradient(180deg, #f2dc9c 0%, #d2ae62 40%, #9c7735 60%, #c9a35b 100%);
  color: #1a1206;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.5), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Hosts page (hosts.html): section heads, episode notes, current nav item */
.story-body h2 {
  margin: 2.6rem 0 1rem;
  color: var(--brass-bright);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
}

.story-body .story-note {
  color: var(--paper-muted);
  font-size: clamp(1.05rem, 1.3vw, 1.15rem);
  font-style: italic;
}

.hosts-page .story-figure .vframe {
  max-width: 30rem;
}

.inside-nav a[aria-current="page"] {
  color: var(--paper);
}

.inside-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.intro-hosts-link {
  display: inline-block;
  margin-top: 1.4rem;
}

/* Footer credit: Bay House Digital mark + text, centred in the footer line, opens in a new tab
   (same pattern as Michael's other sites) */
.inside-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem 1.5rem;
}

.inside-footer > :last-child {
  justify-self: end;
  text-align: right;
}

.inside-footer .bhd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--brass);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s;
}

.inside-footer .bhd::before {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

.inside-footer .bhd:hover,
.inside-footer .bhd:focus-visible {
  color: var(--brass-bright);
}

.inside-footer .bhd:hover span:first-of-type {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inside-footer .bhd svg {
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  margin-block: -3px;
}

.inside-footer .bhd .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .inside-footer {
    grid-template-columns: 1fr 1fr;
    padding-block: 1.5rem;
    row-gap: 1.1rem;
  }

  .inside-footer .bhd {
    order: 3;
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* Gallery page (gallery.html): every photo in its Victorian frame, with a caption */
.gallery-page .story-heading {
  position: static;
}

.gallery-page .story-heading h1 {
  max-width: none;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.5rem 3rem;
  align-items: start;
  margin-top: 3.5rem;
}

.photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}

.photo-card .vframe {
  max-width: 27rem;
  margin-inline: auto;
}

.photo-card .vframe--tall {
  max-width: 21rem;
}

.photo-portrait {
  display: block;
  width: 100%;
  max-width: 23rem;
  height: auto;
  filter: drop-shadow(0 1.2rem 1.6rem rgba(0, 0, 0, 0.55));
}

.photo-card figcaption {
  max-width: 28rem;
  margin-top: 1.2rem;
}

.photo-card strong {
  display: block;
  color: var(--brass-bright);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.2;
}

.photo-card p {
  margin: 0.55rem 0 0;
  color: var(--paper-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.photo-card p a:not(.caption-read) {
  color: var(--brass-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(197, 168, 106, 0.55);
}

.photo-card p a:not(.caption-read):hover,
.photo-card p a:not(.caption-read):focus-visible {
  color: var(--paper);
  border-color: var(--spectral);
}

@container (max-width: 700px) {
  .photo-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    margin-top: 2.5rem;
  }
}