/* =========================================================================
   site.css — tokens, header, footer and the few things every page shares.

   EVERY NUMBER IN THIS FILE WAS MEASURED, NOT CHOSEN. The live
   Squarespace site was probed at 390, 768, 1280 and 1600 before it was
   switched off, and the values below are what came back.

   THE TYPE SCALE IS 16px + Nvw. That is the whole system, and it fell
   straight out of the measurements -- every heading fits it exactly:

                      N        1280px     role
     --display-xs   1.44vw     34.43px    tagline, card titles
     --display-sm   2.16vw     43.65px    section h2
     --display-md   3.00vw     54.40px    section h1
     --display-lg   3.60vw     62.08px    "Get the tea"

   Below roughly 844px the original stops scaling and sits flat, so
   each clamp's floor is the measured phone value rather than a guess.

   TRACKING IS NEGATIVE. Shrikhand is set at -0.02em everywhere on the
   original. Positive tracking on a face this heavy reads as a
   different typeface, which is what the first pass got wrong.

   BODY COPY IS 14.4px UPPERCASE INTER AT 1.5, with normal tracking --
   not the looser, letter-spaced setting a caps run usually wants. It
   is tight on purpose; that is the brand's voice.

   SECTION PADDING IS NOT UNIFORM. The original runs three different
   rhythms (measured 36 / 73 / 84 at 1280) and jumps to a flat 70 on
   phones, so they are three tokens, not one.

   THERE IS NO MAX WIDTH. The original is full-bleed with a ~7.5px
   gutter, and each section constrains its own content by percentage
   instead. --w-* below are those percentages.
   ========================================================================= */

:root {
  /* ---- colour ---- */
  --blush: #e4d5d1;
  --white: #ffffff;
  --rose: #b49d96;
  --brown: #665854;
  --taupe: #806e6a;
  --rose-dark: #9d857e;      /* hover only; not on the original */
  --hairline: rgba(102, 88, 84, 0.16);
  --shadow: 0 2px 10px rgba(102, 88, 84, 0.08);
  --shadow-lift: 0 10px 30px rgba(102, 88, 84, 0.16);

  /* ---- type ---- */
  --display: "Shrikhand", Georgia, serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --button: "Bitter", Georgia, serif;

  /* one step below --display-xs, for headings inside a post. The
     original set those at 25.22px at 1280 (its h4) against 43.65 for
     a section heading -- a post is read, not scanned, so its headings
     sit much closer to the body than the marketing pages do. */
  --display-xxs: clamp(20px, 12px + 1.03vw, 30px);
  --display-xs: clamp(28.15px, 16px + 1.44vw, 43.65px);
  --display-sm: clamp(34.23px, 16px + 2.16vw, 57.47px);
  --display-md: clamp(41.32px, 16px + 3vw, 73.6px);
  --display-lg: clamp(46.38px, 16px + 3.6vw, 85.12px);

  --body: 0.9rem;            /* 14.4px, measured at 768 and 1280 */
  --body-lh: 1.5;

  /* measured line heights, one per display size */
  --lh-xs: 1.142;
  --lh-sm: 1.114;
  --lh-md: 1.08;
  --lh-lg: 1.4;
  --track: -0.02em;

  /* ---- space: phone values; the desktop rhythm is below ---- */
  --pad-s: 70px;
  --pad-m: 70px;
  --pad-l: 56px;
  --gutter: 7.5px;

  /* ---- content widths, as a share of the wrapper ---- */
  --w-hero: 88%;
  --w-narrow: 100%;
  --w-form: 88%;
  --w-wide: 88%;
}

@media (min-width: 768px) {
  :root {
    --pad-s: clamp(26px, 10px + 2vw, 48px);
    --pad-m: clamp(52px, 21px + 4vw, 96px);
    --pad-l: clamp(84px, 6.6vw, 120px);

    --w-narrow: 37.8%;
    --w-form: 45.5%;
    --w-wide: 92%;
  }
}

/* -------------------------------------------------------------------------
   reset
   ------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;        /* clears the sticky header */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--brown);
  font-family: var(--ui);
  font-size: var(--body);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;        /* Shrikhand has exactly one weight */
  color: var(--rose);
  letter-spacing: var(--track);
  line-height: var(--lh-md);
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

/* -------------------------------------------------------------------------
   helpers
   ------------------------------------------------------------------------- */

/* The page wrapper: near full-bleed, exactly as the original. Sections
   narrow their own content with --w-* rather than this doing it. */
.wrap {
  width: calc(100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.col-hero   { width: var(--w-hero);   margin-inline: auto; }
.col-narrow { width: var(--w-narrow); margin-inline: auto; }
.col-form   { width: var(--w-form);   margin-inline: auto; }
.col-wide   { width: var(--w-wide);   margin-inline: auto; }

/* The brand's body voice: uppercase Inter, 14.4px, tight. */
.u-caps {
  font-family: var(--ui);
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  letter-spacing: normal;
}

/* The original leaves 16px under every paragraph. */
.u-caps + .u-caps { margin-top: 16px; }

.u-center { text-align: center; }

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: 200;
  background: var(--rose);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.75rem 0.75rem;
  font-size: var(--body);
  text-transform: uppercase;
  text-decoration: none;
  transition: translate 0.18s ease;
}

.skip-link:focus-visible { translate: -50% 0; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   sections
   ------------------------------------------------------------------------- */

.section { position: relative; }

.section--s { padding-block: var(--pad-s); }
.section--m { padding-block: var(--pad-m); }
.section--l { padding-block: var(--pad-l); }

.section--blush { background: var(--blush); }
.section--white { background: var(--white); }
.section--rose  { background: var(--rose); }

/* -------------------------------------------------------------------------
   button — measured: 57px tall, 19.2/32 padding, Bitter 16 at weight 400
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 57px;
  padding: 19.2px 32px;
  border: 0;
  border-radius: 300px;
  background: var(--rose);
  color: var(--white);
  font-family: var(--button);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
  background: var(--rose-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.btn:active { transform: translateY(0); }

.btn[disabled] {
  opacity: 0.55;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--rose);
  box-shadow: inset 0 0 0 1.5px var(--rose);
}

.btn--ghost:hover { background: var(--rose); color: var(--white); }

/* on the rose sections, the pill inverts so it stays visible */
.section--rose .btn {
  background: var(--white);
  color: var(--brown);
}

.section--rose .btn:hover { background: var(--blush); }

.section--rose .btn--ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--white);
}

.section--rose .btn--ghost:hover { background: var(--white); color: var(--brown); }

/* -------------------------------------------------------------------------
   header — measured 118px tall at 1280, logo 67px
   ------------------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hdr[data-stuck="true"] {
  box-shadow: var(--shadow);
  border-bottom-color: var(--hairline);
}

.hdr__inner {
  /* measured: the logo sits 51px in at 1280, which is this column.
     .wrap is still on the element; this width wins by source order. */
  width: var(--w-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(100px, 92px + 2vw, 140px);
}

.hdr__logo { display: block; flex: none; }

.hdr__logo img {
  height: clamp(46px, 5.24vw, 67px);
  width: auto;
}

.hdr__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }

.hdr__nav a {
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--taupe);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding-block: 0.35rem;
}

.hdr__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--rose);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.22s ease;
}

.hdr__nav a:hover::after,
.hdr__nav a[aria-current="page"]::after { scale: 1 1; }

.hdr__nav a[aria-current="page"] { color: var(--brown); }

.hdr__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--taupe);
}

.hdr__toggle svg { margin-inline: auto; }
.hdr__toggle .is-close { display: none; }
.hdr__toggle[aria-expanded="true"] .is-close { display: block; }
.hdr__toggle[aria-expanded="true"] .is-open { display: none; }

@media (max-width: 820px) {
  .hdr__toggle { display: block; }

  .hdr__nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow);
    padding: 0.5rem calc(var(--gutter) * 2) 1.25rem;
    display: none;
  }

  .hdr__nav[data-open="true"] { display: flex; }

  .hdr__nav a {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--hairline);
  }

  .hdr__nav a:last-child { border-bottom: 0; }
  .hdr__nav a::after { display: none; }
}

/* -------------------------------------------------------------------------
   footer
   ------------------------------------------------------------------------- */

.ftr {
  background: var(--blush);
  padding-block: var(--pad-s);
  text-align: center;
}

.ftr__logo img {
  height: 48px;
  width: auto;
  margin-inline: auto;
}

.ftr__social { margin-block: 1.75rem 1.5rem; }

.ftr__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-bottom: 1.25rem;
}

.ftr__nav a {
  font-size: var(--body);
  text-transform: uppercase;
  color: var(--taupe);
  text-decoration: none;
}

.ftr__nav a:hover { color: var(--rose); text-decoration: underline; text-underline-offset: 4px; }

.ftr__legal {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--taupe);
  opacity: 0.8;
}

/* -------------------------------------------------------------------------
   social icons — measured 48px with an 18px gap
   ------------------------------------------------------------------------- */

.social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--rose);
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.social a:hover {
  background: var(--rose);
  color: var(--white);
  transform: translateY(-3px);
}

.social svg { width: 20px; height: 20px; fill: currentColor; }

/* -------------------------------------------------------------------------
   reveal on scroll
   ------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s ease, translate 0.6s ease;
}

[data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; translate: none; }
}

/* -------------------------------------------------------------------------
   marquee — shared by the home page and the blog, which both open on one
   ------------------------------------------------------------------------- */

/* The band is a host element; marquee.js measures the type and builds
   the SVG wave inside it. The two custom properties below are written
   by that script once it knows the period. */
.marquee {
  --marquee-shift: 1100px;
  --marquee-duration: 24s;
  overflow: hidden;
  width: 100vw;
  margin-left: 50%;
  translate: -50% 0;
  /* the type size lives here so the script can measure against it */
  font-family: var(--display);
  font-size: var(--display-lg);
  letter-spacing: var(--track);
  color: var(--rose);
  line-height: 1.1;
  /* measured band: 134px against a 99px wave box, so ~17.5px of air
     above and below. In em so it holds as the type scales. */
  padding-block: 0.282em;
}

.marquee svg { display: block; width: 100%; overflow: visible; }

.marquee__group {
  animation: marquee-slide var(--marquee-duration) linear infinite;
  will-change: transform;
}

@keyframes marquee-slide {
  /* exactly one wave period: the path repeats on that interval and so
     do the three copies of the text inside it, so the reset is
     invisible */
  to { transform: translateX(calc(var(--marquee-shift) * -1)); }
}

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

/* -------------------------------------------------------------------------
   listen strip — closes every post and the library, so it lives here
   rather than in post.css, which the library does not load
   ------------------------------------------------------------------------- */

.post-listen { text-align: center; }

.post-listen h2 {
  font-size: var(--display-sm);
  line-height: var(--lh-sm);
  margin-bottom: 16px;
}

.post-listen p { margin: 0 auto 20px; }

/* -------------------------------------------------------------------------
   reading progress — injected by site.js on pages that have a .prose
   ------------------------------------------------------------------------- */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 150;
  background: transparent;
  pointer-events: none;
}

.read-progress span {
  display: block;
  height: 100%;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
}

/* -------------------------------------------------------------------------
   load-more, mid-load

   The cards are already in the document, so there is nothing to wait
   for; this is the 320ms beat that makes twelve more appearing read as
   an arrival rather than a jump.
   ------------------------------------------------------------------------- */

.blog-more[data-loading="true"] button {
  color: transparent;
  position: relative;
  pointer-events: none;
}

.blog-more[data-loading="true"] button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--white);
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .blog-more[data-loading="true"] button::after { animation: none; }
}

/* -------------------------------------------------------------------------
   YouTube facade — a thumbnail and a play button standing in for the
   real embed until it is clicked.

   THIS LIVES HERE, NOT IN home.css, because the posts use it too.
   It started on the front page and moved when every episode page
   gained its own player: a post loads site.css and post.css only, so
   while these rules sat in home.css the embed rendered as a 491px
   blank box with an unpositioned button inside it.
   ------------------------------------------------------------------------- */

.featured__video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--taupe);
}

.featured__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The facade: a thumbnail and a play button standing in for the embed
   until it is clicked. Two real players on the front page cost about a
   megabyte and set cookies before anybody asks to watch anything. */
.featured__video button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: var(--taupe);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}

.featured__video button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(102, 88, 84, 0.25);
  transition: background 0.2s ease;
}

.featured__video button:hover::before { background: rgba(102, 88, 84, 0.1); }

.featured__play {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

.featured__video button:hover .featured__play {
  transform: scale(1.09);
  background: var(--rose-dark);
}

.featured__play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }

/* The no-JS state: a plain link filling the slot. site.js swaps it for
   the facade, so it is only ever seen when the script did not run. */
.featured__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  color: var(--white);
  font-family: var(--button);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
}