/* Told by a Teen — site stylesheet.

   VANILLA CSS ON PURPOSE. Kev, 26 August 2026: this deploys as HTML and vanilla
   CSS on Hostinger, potentially through Astro, the same as every other site
   they run. So there is no framework, no build step and no preprocessor here —
   a .astro component can lift any block below unchanged.

   THE TOKENS ARE IMPORTED, NEVER COPIED. Colours and type come from
   `Told by a Teen Design System/tokens/*.css`, which is what every other asset
   in this project renders through. Every var() below has a literal fallback so
   the page still holds if it is ever served without the design system beside
   it, but the fallback is a safety net rather than the source. If a colour here
   disagrees with the design system, the design system is right.
*/

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--navy-900, #012A45);
  color: var(--cream-100, #FFF8E6);
  font-family: var(--font-body, "Montserrat", Arial, sans-serif);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 720px; }

/* ---- chrome ------------------------------------------------------------ */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(1, 42, 69, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 248, 230, .14);
}
header.site .wrap { display: flex; align-items: center; gap: 32px; min-height: 84px; }
/* 180px against a declared 140px minimum, and the flex gap plus the block
   padding carry the 1.5 cap heights of clear space the design system requires. */
.brand img { width: 180px; height: auto; }
nav.site { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
nav.site a {
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; opacity: .82;
}
nav.site a:hover { opacity: 1; color: var(--coral-500, #F2624C); }

footer.site {
  background: var(--cream-100, #FFF8E6);
  color: var(--ink-800, #1D1E1C);
  padding: 0 0 60px;
}
footer.site .wrap {
  border-top: 1px solid rgba(29, 30, 28, .16);
  padding-top: 26px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
footer.site img { width: 150px; }
footer.site nav { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
footer.site a { font-size: 13px; text-decoration: none; opacity: .72; }
footer.site a:hover { opacity: 1; }

/* ---- shared ------------------------------------------------------------ */
section { padding: 104px 0; border-top: 1px solid rgba(255, 248, 230, .10); }
.label {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--coral-500, #F2624C); margin: 0 0 18px;
}
h1, h2, h3 {
  font-family: var(--font-display, "Poppins", Arial, sans-serif);
  font-weight: 400; letter-spacing: -.02em; line-height: 1.1; margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5vw, 68px); }
h2 { font-size: clamp(28px, 3.2vw, 44px); }
.rule {
  width: 88px; height: 6px; background: var(--coral-500, #F2624C);
  border-radius: 3px; margin: 26px 0;
}
.link {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: 15px; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.btn {
  display: inline-block; background: var(--coral-500, #F2624C);
  color: var(--navy-900, #012A45); font-weight: 700; font-size: 15px;
  padding: 14px 28px; border-radius: 99px; text-decoration: none;
}
.ghost {
  display: inline-block; border: 1px solid currentColor; border-radius: 99px;
  padding: 13px 27px; font-weight: 600; font-size: 15px; text-decoration: none;
}
.crumb {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .7; margin: 0 0 22px;
}
.crumb a { text-decoration: none; }

/* ---- home: hero -------------------------------------------------------- */
.hero { border-top: 0; padding: 0; }
.hero .wrap {
  display: grid; grid-template-columns: 1.28fr .72fr; gap: 56px;
  align-items: center; min-height: min(78vh, 760px);
  padding-top: 64px; padding-bottom: 64px;
}
.hero p.series { font-size: 17px; opacity: .78; margin: 0; }
.hero .shot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-md, 6px); }

/* ---- home: latest ------------------------------------------------------ */
.latest { position: relative; padding: 0; border-top: 0; }
.latest .media {
  position: relative; min-height: min(72vh, 660px);
  background: var(--navy-800, #013B60); overflow: hidden;
}
.latest .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.latest .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(1,42,69,.96) 0%, rgba(1,42,69,.82) 42%, rgba(1,42,69,.28) 100%);
}
.latest .inner { position: relative; padding: 88px 0; }
.latest h2 { font-size: clamp(32px, 4vw, 56px); }
.latest .pull { font-size: 19px; max-width: 46ch; opacity: .9; margin: 22px 0 0; }
.latest .meta { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin: 14px 0 0; }

/* ---- home: premise ----------------------------------------------------- */
.premise { text-align: center; }
.premise .rule { margin: 0 auto 26px; }
.premise p.big {
  font-family: var(--font-display, "Poppins", Arial, sans-serif);
  font-size: clamp(23px, 2.6vw, 34px); line-height: 1.32;
  max-width: 26ch; margin: 0 auto 30px; letter-spacing: -.015em;
}

/* ---- home: guests ------------------------------------------------------ */
.guests .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-top: 44px; }
.guests figure { margin: 0; }
.guests img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md, 6px); }
.guests figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.45; }
.guests figcaption b { display: block; font-weight: 700; }
.guests figcaption span { opacity: .68; }

/* ---- the footer's legal row --------------------------------------------
   A SECOND, QUIETER NAV. Privacy and accessibility belong in a footer rather
   than the main navigation: nobody arrives looking for them, the main nav is
   already five items and collapses to a hamburger below 900px, and the footer
   is where both a reader and a regulator look for them. */
/* THE SECOND ROW SITS UNDER THE FIRST, NOT BESIDE IT. footer .wrap is a flex
   row, so the legal links and the credit landed inline on the right of the
   lockup -- "small at the bottom of the footer" was the ask and that is not the
   bottom. flex-basis:100% forces both onto their own line, and the hairline
   rule separates the show's own footer from the studio credit under it. */
footer.site nav.legal {
  /* justify-content, NOT margin-left:auto. Once flex-basis is 100% the item
     already fills the row, so auto margins have nothing left to push against
     and the links sat hard left under a right-aligned nav. */
  flex-basis: 100%; margin: 0; gap: 20px; justify-content: flex-end;
}
footer.site nav.legal a {
  font-size: 13px; opacity: .62; text-decoration: none;
}
footer.site nav.legal a:hover { opacity: 1; }

/* ---- the studio credit -------------------------------------------------
   QUIETER THAN THE LEGAL ROW, WHICH IS ALREADY QUIET. It is a credit, not
   navigation: it should be findable by somebody looking for who made this and
   invisible to everybody else. Underlined rather than coloured, because a
   coloured link down here would pull the eye off the show's own footer nav. */
footer.site .credit {
  flex-basis: 100%; margin: 0; padding-top: 20px;
  border-top: 1px solid rgba(29, 30, 28, .12);
  font-size: 12.5px; opacity: .5; line-height: 1.5; text-align: right;
}
footer.site .credit a {
  /* 13px of padding takes a 19px line to 45px of thumb, and the negative margin
     hands the space back so the footer does not grow. The audit measured this
     one at 40 -- close enough to look fine and still under the size a thumb
     reliably hits. */
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  display: inline-block; padding: 13px 0; margin: -13px 0;
}
footer.site .credit a:hover { color: var(--coral-600, #D94B36); opacity: 1; }

/* ON A PHONE THE WHOLE FOOTER READS LEFT. The main nav wraps and goes hard
   left there, so right-aligning the two rows under it made them look misplaced
   rather than deliberate. Alignment is only tidy when everything agrees. */
@media (max-width: 620px) {
  footer.site nav.legal { justify-content: flex-start; }
  footer.site .credit { text-align: left; }
}

/* ---- the skip link ------------------------------------------------------
   OFF-SCREEN RATHER THAN display:none, because a hidden element is not
   focusable and a skip link that cannot be focused is not a skip link. It is
   the first thing in the document and it appears the instant somebody presses
   Tab, which is the only moment it is any use. */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  /* INK ON CORAL, NOT CREAM ON CORAL. The first version shipped cream and the
     audit measured it at 2.99 against a required 4.5 -- an accessibility fix
     that introduced an accessibility failure, which is precisely why the ratio
     gets computed rather than eyeballed. Ink on the same coral is 5.28. Navy
     was tried and is 3.69, so it fails too; the coral is kept because it makes
     the link read as a distinct thing rather than part of the header. */
  background: var(--coral-500, #F2624C); color: var(--ink-800, #1D1E1C);
  padding: 12px 20px; border-radius: 6px; text-decoration: none;
  font-weight: 700; font-size: 15px;
  transition: top .12s ease-in;
}
.skip:focus { top: 16px; }
/* main takes tabindex="-1" so the skip link moves focus rather than only
   scrolling, and that makes it focusable -- which would otherwise draw an
   outline round the whole page when it is clicked. */
main:focus { outline: none; }

/* ---- on success -------------------------------------------------------- */
.success { background: var(--slate-500, #3D6B7E); }
.success h2 { max-width: 16ch; }
.success .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px; margin-top: 48px; }
/* THE CREDIT SITS ON THE FLOOR OF THE CARD, not under the last line of the
   quote. Verbatim answers replaced the compressed ones on 1 September and
   they run to different lengths, so three cards put three credits at three
   heights. The grid already stretches each blockquote to the row; this just
   uses the space it was given. */
.success blockquote { margin: 0; border-top: 1px solid rgba(255,248,230,.34);
  padding-top: 22px; display: flex; flex-direction: column; }
.success blockquote p {
  font-family: var(--font-display, "Poppins", Arial, sans-serif);
  font-size: 21px; line-height: 1.38; margin: 0 0 18px; letter-spacing: -.01em;
}
.success cite { font-style: normal; font-size: 13.5px; font-weight: 700;
  line-height: 1.45; margin-top: auto; }
.success cite span { display: block; font-weight: 400; opacity: .72; }

/* ---- on success, the page ----------------------------------------------
   success.html shipped on 1 September with NO STYLING BELOW THE HERO. Thirteen
   verbatim answers rendered as a browser-default <ol>: numbers in the margin,
   "Joanna JensenChild's Farm" run together because display:block on the company
   was scoped to .success, links underlined blue-grey, and every line running the
   full 1440px. Invisible in the code, obvious in the render, again.

   THE MARKER IS THE EPISODE NUMBER, set by `value` on the <li> and printed with
   counter(list-item). It is deliberately quiet -- the page is evidence, and the
   evidence is the answers. The episode is how you go and check one. */
.answers { padding-top: 88px; }
.answer-list { list-style: none; margin: 0; padding: 0; }
.answer-list li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 34px;
  align-items: start; padding: 32px 0;
  border-top: 1px solid rgba(255, 248, 230, .18);
}
.answer-list li:first-child { border-top: 0; padding-top: 0; }
/* COUNTED IN CSS FIRST, AND IT PRINTED "Ep 0" THIRTEEN TIMES. counter(list-item)
   only increments on an element that IS a list item, and the <li> is display:grid
   for this layout, so it is not one. The number comes from the markup now. */
.answer-list .epn {
  font-family: var(--font-display, "Poppins", Arial, sans-serif);
  font-size: 15px; font-weight: 700; line-height: 1.5; padding-top: 6px;
  letter-spacing: .04em; color: var(--coral-500, #F2624C);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.answer-list blockquote { margin: 0; }
.answer-list blockquote p {
  font-family: var(--font-display, "Poppins", Arial, sans-serif);
  font-size: 23px; line-height: 1.42; letter-spacing: -.01em;
  margin: 0 0 20px; max-width: 60ch;
}
.answer-list cite {
  display: block; font-style: normal; font-size: 13.5px; font-weight: 700;
  line-height: 1.45;
}
.answer-list cite span { display: block; font-weight: 400; opacity: .72; }
.answer-list .src { margin: 14px 0 0; font-size: 13.5px; opacity: .72; }
/* THE WHOLE SOURCE LINE IS THE TAP TARGET. It was a bare 18px-high link and the
   audit found thirteen of them on this page alone. The padding buys 46px of
   thumb and the negative margin gives the layout back what it took. */
.answer-list .src a {
  display: inline-block; padding: 14px 0; margin: -14px 0; color: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 248, 230, .34);
}
.answer-list .src a:hover {
  color: var(--coral-500, #F2624C);
  text-decoration-color: var(--coral-500, #F2624C);
}

@media (max-width: 720px) {
  .answer-list li { grid-template-columns: 1fr; gap: 10px; }
  .answer-list .epn { padding-top: 0; }
  .answer-list blockquote p { font-size: 20px; }
}

/* ---- archive ----------------------------------------------------------- */
.archive .head { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: end; }
.archive .grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 2px; margin-top: 44px;
  background: rgba(255,248,230,.12); border: 1px solid rgba(255,248,230,.12);
}
/* ONE SYSTEM, TWO STATES. Ten of sixteen episodes have no usable photograph —
   guest feeds are 720p webcam recordings against bedroom walls and were tested
   and rejected. So the type card is the DEFAULT and a photograph is an
   enhancement laid over the same box, rather than the grid being built around
   an image most entries do not have. */
.card {
  position: relative; background: var(--navy-900, #012A45); min-height: 238px;
  display: flex; align-items: flex-end; text-decoration: none; overflow: hidden;
}
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,42,69,.12) 34%, rgba(1,42,69,.94) 100%);
}
.card--type { background: linear-gradient(160deg, rgba(61,107,126,.30) 0%, rgba(1,42,69,0) 62%); }
.card__body { position: relative; z-index: 2; padding: 20px; }
.card .ep {
  display: inline-block; background: var(--coral-500, #F2624C);
  color: var(--navy-900, #012A45); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; padding: 3px 8px; border-radius: 3px; margin-bottom: 10px;
}
.card h3 { font-size: 20px; line-height: 1.16; }
.card .meta { font-size: 12.5px; opacity: .74; margin: 6px 0 0; }
.card .soon { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .62; margin: 8px 0 0; }
.card--type .card__body { padding-top: 34px; }
a.card:hover > img { transform: scale(1.03); }

/* ---- rooms ------------------------------------------------------------- */
.rooms { position: relative; padding: 0; border-top: 0; }
.rooms .media { position: relative; min-height: min(80vh, 720px); overflow: hidden; background: var(--navy-800, #013B60); }
.rooms .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rooms .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,42,69,.90) 0%, rgba(1,42,69,.52) 46%, rgba(1,42,69,.94) 100%);
}
.rooms .inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding: 80px 0; }
.rooms ul { list-style: none; margin: 26px 0 0; padding: 0; }
.rooms li { border-top: 1px solid rgba(255,248,230,.28); padding: 15px 0; }
.rooms li b { display: block; font-size: 16.5px; font-weight: 700; }
.rooms li span { font-size: 14px; opacity: .76; }
.rooms .schools {
  align-self: end; background: rgba(1,42,69,.90);
  border: 1px solid rgba(255,248,230,.2); padding: 30px; border-radius: var(--radius-md, 6px);
}
.rooms .schools p { font-size: 15px; opacity: .88; margin: 0 0 22px; }

/* ---- close ------------------------------------------------------------- */
.close { background: var(--cream-100, #FFF8E6); color: var(--ink-800, #1D1E1C); text-align: center; }
.close h2 { max-width: 20ch; margin: 0 auto; }
.close .actions { display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 34px; }

/* ---- EPISODE PAGE ------------------------------------------------------ */
.ep-hero { border-top: 0; padding: 56px 0 0; }
.ep-hero .kicker { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 20px; }
.ep-hero .num {
  background: var(--coral-500, #F2624C); color: var(--navy-900, #012A45);
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 3px;
}
.ep-hero .facts { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .74; }
.ep-hero h1 { max-width: 20ch; }
.ep-hero .byline { display: flex; gap: 16px; align-items: center; margin: 30px 0 0; }
.ep-hero .byline img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.ep-hero .byline b { display: block; font-size: 16px; font-weight: 700; }
.ep-hero .byline span { font-size: 14px; opacity: .74; }

/* The embed. 16:9 with no JavaScript, and youtube-nocookie so a visitor is not
   tracked before they have chosen to play anything. */
.player { margin-top: 44px; border-radius: var(--radius-md, 6px); overflow: hidden; background: #000; }
.player .frame { position: relative; padding-top: 56.25%; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ep-quote { border-top: 0; padding: 80px 0; }
.ep-quote blockquote { margin: 0; max-width: 30ch; }
.ep-quote p {
  font-family: var(--font-display, "Poppins", Arial, sans-serif);
  font-size: clamp(28px, 3.6vw, 50px); line-height: 1.18;
  letter-spacing: -.02em; margin: 0;
}
.ep-quote cite { display: block; font-style: normal; font-size: 14px; opacity: .74; margin-top: 26px; }

/* Show notes: real chapters with real timecodes, deep-linked into the video. */
.notes ol { list-style: none; counter-reset: none; margin: 34px 0 0; padding: 0; }
.notes li { border-top: 1px solid rgba(255,248,230,.16); }
.notes a { display: flex; gap: 22px; align-items: baseline; padding: 15px 0; text-decoration: none; }
.notes a:hover { color: var(--coral-500, #F2624C); }
.notes .t {
  font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700;
  color: var(--coral-500, #F2624C); min-width: 62px;
}
.notes .c { font-size: 16.5px; }

/* The article. Written as the show, third person, no byline — the hybrid
   ruling of 23 August, which keeps it off Siya's sign-off queue. */
.article { background: var(--cream-100, #FFF8E6); color: var(--ink-800, #1D1E1C); }
.article h2 { max-width: 22ch; }
.article .body { max-width: 68ch; margin-top: 30px; }
.article .body p { font-size: 17.5px; line-height: 1.72; margin: 0 0 22px; }
/* h2 WAS NEVER STYLED HERE. Only h3 was, because the episode articles use h3
   and nothing else in .body did -- so the privacy and accessibility pages, which
   use h2 for their sections, rendered their headings hard against the paragraph
   underneath with no space at all. Both are styled now, h2 a step larger. */
.article .body h2 { font-size: 27px; margin: 46px 0 16px; line-height: 1.25; }
.article .body h2:first-child { margin-top: 0; }
.article .body h3 { font-size: 24px; margin: 40px 0 14px; }
.article .body a { color: var(--navy-800, #013B60); font-weight: 600; }

/* SIYA'S TAKE. The one place --font-hand is permitted outside Siya's Thoughts,
   and it carries HER WORDS, spoken on the episode, not a reflection written for
   her. That distinction is the whole reason the slot is safe to ship. */
.take {
  background: var(--cream-200, #F7EFD8); color: var(--ink-800, #1D1E1C);
  border-left: 6px solid var(--coral-500, #F2624C);
  padding: 34px 38px; border-radius: var(--radius-md, 6px); margin: 44px 0 0;
}
.take .label { color: var(--coral-600, #D94B36); margin-bottom: 14px; }
.take p {
  font-family: var(--font-hand, "Architects Daughter", cursive);
  font-size: 24px; line-height: 1.5; margin: 0;
}
.take .src { font-family: var(--font-body, Montserrat, sans-serif); font-size: 13px; opacity: .66; margin-top: 16px; }

/* The rendered cards for this episode — real PNGs out of the pipeline. */
.cards .strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 232px);
  gap: 16px; overflow-x: auto; margin-top: 38px; padding-bottom: 14px;
  scroll-snap-type: x mandatory; }
.cards .strip img { scroll-snap-align: start; }
.cards .strip img { border-radius: var(--radius-md, 6px); width: 100%; }

.guest-about { background: var(--navy-800, #013B60); }
.guest-about .grid { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; }
.guest-about img { border-radius: var(--radius-md, 6px); aspect-ratio: 4/5; object-fit: cover; }
.guest-about p { font-size: 16.5px; max-width: 62ch; }
.guest-about .links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

.more .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 2px; margin-top: 38px; background: rgba(255,248,230,.12); border: 1px solid rgba(255,248,230,.12); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .hero .wrap, .archive .head, .rooms .inner, .guest-about .grid { grid-template-columns: 1fr; }
  .hero .shot { order: -1; }
  section { padding: 72px 0; }
  nav.site { display: none; }
  .ep-hero h1 { font-size: 34px; }
}


/* ---- forms -------------------------------------------------------------
   THE ACTION IS A mailto AND THAT IS DELIBERATE until a handler exists. A form
   that posts to nothing and says "thanks" is worse than one that opens a mail
   client, because the sender believes it arrived. Replace the action, not the
   fields. */
.form label { display: block; margin: 0 0 22px; }
.form label span {
  display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  margin-bottom: 8px;
}
.form label i { font-style: normal; opacity: .55; font-weight: 400; }
.form input, .form textarea {
  width: 100%; background: rgba(255,248,230,.06); color: var(--cream-100, #FFF8E6);
  border: 1px solid rgba(255,248,230,.28); border-radius: var(--radius-md, 6px);
  padding: 13px 15px; font: inherit; font-size: 16px;
}
.form input:focus, .form textarea:focus {
  outline: 2px solid var(--coral-500, #F2624C); outline-offset: 2px;
  border-color: transparent;
}
.form button { border: 0; cursor: pointer; margin-top: 6px; font: inherit; font-weight: 700; }
.form .small { font-size: 13.5px; opacity: .66; margin-top: 20px; max-width: 48ch; }
.form h2 { margin-bottom: 30px; }

.form select {
  width: 100%; background: var(--navy-800, #013B60); color: var(--cream-100, #FFF8E6);
  border: 1px solid rgba(255,248,230,.28); border-radius: var(--radius-md, 6px);
  padding: 13px 15px; font: inherit; font-size: 16px;
}
.form fieldset {
  border: 1px solid rgba(255,248,230,.2); border-radius: var(--radius-md, 6px);
  padding: 24px 24px 4px; margin: 0 0 26px;
}
.form legend {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-500, #F2624C); padding: 0 10px;
}


/* ---- hero eyebrow and section standfirst -------------------------------
   The hero now leads with the series name as a coral eyebrow above the
   headline, which is what lets the headline itself be the show's promise
   rather than a label. */
.hero .label { margin-bottom: 22px; }
.standfirst {
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 44ch;
  margin: 22px 0 0; opacity: .9;
}

/* ---- what I took from it -------------------------------------------------
   THREE STATEMENTS, NOT A BULLET LIST. These are the strongest lines on an
   episode page -- she records them live at the end of every episode, with the
   guest still sitting there -- and they were rendering as browser-default
   discs, because nothing here styled a list at all.

   THE TREATMENT IS THE DESIGN SYSTEM'S OWN, not a new idea. Its carousel index
   numeral is Poppins ExtraBold in --teal-500, and carousel-list marks each item
   with a teal rule. Same words on both surfaces, so the same marks.

   THE NUMERAL IS HERS. She numbers these when she posts them -- "1. Resilience
   is the whole job. 2. Agreeably disagreeable." -- which is the only thing that
   justifies numbering rather than decorating with it. Coral stays the line
   breaker and never becomes the accent, so the numeral is teal. */
.took { list-style: none; counter-reset: took; margin: 34px 0 0; padding: 0; }
.took li {
  counter-increment: took;
  position: relative;
  padding: 28px 0 28px 84px;
  border-top: 1px solid var(--rule-ink, rgba(1, 59, 96, .16));
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.45;
  text-wrap: pretty;
}
.took li:last-child { border-bottom: 1px solid var(--rule-ink, rgba(1, 59, 96, .16)); }
.took li::before {
  content: counter(took, decimal-leading-zero);
  position: absolute; left: 0; top: 30px;
  font-family: var(--font-display, "Poppins", Arial, sans-serif);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--teal-500, #32B9BC);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .took li { padding: 22px 0 22px 60px; }
  .took li::before { font-size: 26px; top: 24px; }
}

/* ---- two fixes the render showed, and only the render ------------------- */

/* THE PULL-QUOTE SITS ON THE ARTICLE'S MEASURE. It was running the full 1240px
   wrap while the prose beside it stopped at 68ch, so it read as an unrelated
   block rather than a quote from the same page. */
.article .take { max-width: 68ch; }

/* CONSECUTIVE ARTICLE SECTIONS ARE ONE PIECE OF WRITING. An episode page stacks
   up to three of them -- the conversation, what she took from it, her closing
   words -- and 104px of section padding either side of each join opened a 208px
   hole in the middle of a single argument. */
.article + .article { padding-top: 0; border-top: 0; }

/* AND THE MARGIN THAT ESCAPED. .take carries margin-top:44px to separate it from
   prose ABOVE IT INSIDE a section. Where the take IS the whole section, that
   margin has nothing to push against, so it collapses out through the top of the
   section and opens a 44px band of body navy across a cream page. Removing the
   section's padding-top above is what let it out. Measured in the browser: the
   takeaways ended at 5451 and the quote started at 5495. */
.article + .article .take { margin-top: 0; }

/* ---- the UX pass, 1 September 2026 -------------------------------------
   MEASURED AT 375, 768 AND 1440, which had never been done. Every screenshot
   of this site had been 1440 desktop -- shoot.js hardcodes it and its own
   comment calls a laptop viewport "the web". The audience arrives from
   Instagram and LinkedIn. site/audit_ux.py is the measurement. */

/* 1. THE NAVIGATION CAME BACK. It was display:none below 900px with NOTHING in
      its place, so every page on a phone and a tablet had no way to reach any
      other page except the links inside the prose. Five items wrap under the
      logo; no JavaScript, no hamburger to miss. */
@media (max-width: 900px) {
  nav.site { display: flex; }
  header.site .wrap {
    flex-wrap: wrap; gap: 14px 22px; padding-top: 16px; padding-bottom: 16px;
  }
  nav.site { margin-left: 0; width: 100%; gap: 8px 20px; }
  /* 44px of height each, which is the size a thumb actually hits. */
  nav.site a { padding: 12px 0; opacity: .92; }
  .brand img { width: 150px; }
}

/* 2. THE HERO PUT THE PHOTO FIRST AND CUT THE PROPOSITION IN HALF. Measured on
      a 812px screen: the photo ran 149 to 538, and the headline started at 654
      and ended at 863 -- fifty-one pixels below the fold, so a visitor saw a
      logo, a portrait and two lines of a four-line sentence. The sub-line and
      the only call to action were both below it.

      Leading with her face is the right instinct and it stays. Capping the
      photo is what lets the sentence finish. */
@media (max-width: 900px) {
  .hero .shot img { aspect-ratio: 3/4; max-height: 34vh; width: auto; margin: 0 auto; }
  .hero .wrap { gap: 26px; }
  .hero h1 { font-size: clamp(30px, 8.2vw, 40px); }
}

/* 3. TAP TARGETS. Thirty were under 44px, the arrow links at 28. The border is
      the underline, so the padding goes above it rather than around it. */
.link { padding-top: 11px; padding-bottom: 9px; }
footer.site nav a, footer.site a { display: inline-block; padding: 10px 0; }
/* The breadcrumb on an episode page was 18px of tappable height. It is a real
   route back to the home page and the series, not decoration. */
.crumb a { display: inline-block; padding: 12px 0; }

/* 4. TEXT THAT WAS TOO SMALL TO READ ON A PHONE. Fifty-one blocks under 15px,
      the episode meta at 12.5 and the labels at 12. Raised on small screens
      only: the desktop scale is the design system's and is not in question. */
@media (max-width: 640px) {
  .label { font-size: 13px; }
  .meta, .crumb, .src, .small { font-size: 14px; }
  .card__body .meta { font-size: 13.5px; }
}

/* ---- the label takes its colour from its ground -------------------------
   MEASURED, NOT ASSUMED. 24 contrast failures, every one of them this label.
   Coral #F2624C against each ground, where 12px text needs 4.5:

     navy-900 #012A45   4.67   passes, and keeps the coral
     navy-800 #013B60   3.69   fails
     cream-100 #FFF8E6  2.99   fails
     slate teal #3D6B7E 1.84   fails badly

   LIGHTENING CORAL IS BARRED, not merely ugly. To read on slate teal it needs
   91% lightness, which is #FCDBD6, and hard rule 10 bans blush outright for
   Siya's own stated reason. So coral darkens where the ground is light and
   gives way to cream where the ground is dark and coral cannot reach.

   THIS IS THE DESIGN SYSTEM'S OWN MECHANISM. Every carousel template already
   swaps --fg, --muted and --rule on [data-tbt-ground]. Colour that follows its
   ground is how this system works; this is one more token doing it.

   THE CORAL RULE IS UNTOUCHED EVERYWHERE. It is a divider rather than text, the
   4.5 threshold does not govern it, and it is the device that actually carries
   the brand. What changes is small-caps signpost text on five of fifteen labels. */

/* Light grounds: the same coral, darkened. 4.88 on cream-100, 4.50 on cream-200. */
.article .label,
.take .label { color: var(--coral-700, #D2290F); }

/* Dark grounds coral cannot reach: navy-800 at 3.69 and slate teal at 1.84.
   Cream gives 11.04 and 5.50. */
.latest .label,
.rooms .label,
.guest-about .label,
.success .label { color: var(--cream-100, #FFF8E6); }

/* ---- the menu is a hamburger below 900px --------------------------------
   Kev, 1 September: "the nav for the mobile should go to a hamburger not to a
   second line." Wrapping five items took about 200px off the first screen, which
   is the screen the hero had just been rebuilt to fit.

   IT WAS <details> FIRST AND THAT BROKE THE DESKTOP MENU ENTIRELY. A closed
   <details> reports no content size, so as a flex item it collapsed to 0x0 and
   the nav inside it wrapped every link onto its own line: display:flex, 0x229,
   invisible. Kev saw exactly that -- "now the live site has no menu bar at all".

   Measured both candidate fixes rather than reasoning about them. display:contents
   left it at 0x229. The `open` attribute fixed it, 429x21 -- and CSS cannot add
   or remove an attribute, so <details> cannot serve both breakpoints.

   SO: A CHECKBOX AND A LABEL. Pure CSS, no JavaScript, and every state is
   controlled by a rule rather than by a browser's idea of a closed disclosure.
   The checkbox stays focusable rather than hidden, so the menu is reachable by
   keyboard.

   AND THE AUDIT NOW CHECKS SIZE, NOT JUST display. It passed the collapsed nav
   because it only asked whether the element was displayed. */

/* The control itself: off-screen but focusable, never display:none. */
.menu-toggle {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.menu-btn { display: none; }
nav.site { margin-left: auto; }

@media (max-width: 900px) {
  header.site .wrap { flex-wrap: nowrap; gap: 16px; position: relative; }

  /* 48px square, clearing the 44px a thumb needs. */
  .menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto; cursor: pointer;
    border-radius: var(--radius-md, 6px);
  }
  .menu-toggle:focus-visible + .menu-btn { outline: 2px solid var(--coral-500, #F2624C); }

  /* Three bars drawn rather than typed, so they sit on the type grid instead of
     wherever a glyph happens to land. */
  .menu-btn i,
  .menu-btn i::before,
  .menu-btn i::after {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: var(--cream-100, #FFF8E6); content: "";
  }
  .menu-btn i { position: relative; }
  .menu-btn i::before { position: absolute; top: -7px; }
  .menu-btn i::after { position: absolute; top: 7px; }

  /* Open: the bars become a cross, so the control says what it will do next. */
  .menu-toggle:checked + .menu-btn i { background: transparent; }
  .menu-toggle:checked + .menu-btn i::before { top: 0; transform: rotate(45deg); }
  .menu-toggle:checked + .menu-btn i::after { top: 0; transform: rotate(-45deg); }

  nav.site { display: none; }
  .menu-toggle:checked ~ nav.site {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; right: 0; top: 68px; z-index: 40; min-width: 208px;
    background: var(--navy-900, #012A45); border-radius: var(--radius-md, 6px);
    border: 1px solid rgba(255, 248, 230, .16);
    padding: 8px 20px; box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  }
  .menu-toggle:checked ~ nav.site a { padding: 14px 0; opacity: .94; }
  .brand img { width: 150px; }
}