/* ============================================================================
   Tea With Socrates — style.css
   teawithsocrates.com · plain CSS, no build step, no external requests

   PALETTE (the only six colours; everything else is one of them at an opacity
   or blended with another)
     Ceramic  #E7E6DF  light surfaces
     Steep    #22261F  dark surfaces and the liquid
     Ink      #171A18  text on light
     Leaf     #4C5A49  accent, the subscribe control
     Sage     #6E7A6A  secondary text, pure only at 24 px and above
     Gold     #B08A34  one highlight per page, never a fill
                       (home: the launch line · episodes: the current episode)

   Sage does not reach 4.5:1 on either surface below 24 px, so at label and
   body sizes it is blended a little toward the surface's text colour:
     on Ceramic  #5D675A  (Sage 80 % · Ink 20 %)      4.7:1
     on Steep    #8C9587  (Sage 75 % · Ceramic 25 %)  5.0:1
   Leaf on Steep is 2.1:1, so on the dark page "Subscribe" is set in Ceramic
   and Leaf carries it as the 2 px underline; on a light surface the word
   itself would be Leaf (5.9:1). Hairlines are the surface's text colour at
   about 16 %. Gold on Steep is 4.8:1; on Ceramic it is only used as a rule.

   TYPE  one family, true italics, old-style figures
     family   Iowan Old Style → Palatino (Linotype) → Book Antiqua → Georgia
     root     20 px desktop · 18 px under 48 em
     display  clamp(2.6rem, 1.4rem + 4.6vw, 3.6rem)   52–72 px · lh 1.02
     title    2.4 rem   48 px · lh 1.1     (page title)
     h2       1.7 rem   34 px · lh 1.18    (episode titles)
     lede     1.2 rem   24 px · lh 1.4     (tellable line, questions)
     body     1 rem     20 px · lh 1.6  =  32 px baseline
     small    0.85 rem  17 px · lh 1.5     (colophon, notes)
     label    0.7 rem   14 px · lh 1.5 · tracking 0.06 em

   SPACE  8 px unit; vertical rhythm in multiples of it
     --s1 8 · --s2 16 · --s3 24 · --s4 32 · --s6 48 · --s8 64 · --s12 96 · --s16 128
     measure  33 rem ≈ 64–66 characters at the reading size
     gutter   clamp(1.25rem, 5vw, 5rem)
     column offset on wide screens  clamp(0rem, 10vw, 13rem)
     episodes page: a 9 rem margin column + 3.2 rem gap + the measure
     breakpoints  64 em (editorial grid folds) · 48 em (phone type and hero)
                  · 30 em (masthead stacks, platform row becomes a list)

   MOTION  a fade on first paint, steam that drifts, a pulse on the pour
   control. All of it is removed under prefers-reduced-motion.
   ========================================================================== */

:root {
  --ceramic: #E7E6DF;
  --steep:   #22261F;
  --ink:     #171A18;
  --leaf:    #4C5A49;
  --sage:    #6E7A6A;
  --gold:    #B08A34;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 3.6rem);
  --fs-title: 2.4rem;
  --fs-h2: 1.7rem;
  --fs-lede: 1.2rem;
  --fs-body: 1rem;
  --fs-small: 0.85rem;
  --fs-label: 0.7rem;

  --s1: 0.4rem;  --s2: 0.8rem;  --s3: 1.2rem;  --s4: 1.6rem;
  --s6: 2.4rem;  --s8: 3.2rem;  --s12: 4.8rem; --s16: 6.4rem;

  --measure: 33rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --offset: clamp(0rem, 10vw, 13rem);

  /* light surface (episodes page) */
  --bg: var(--ceramic);
  --text: var(--ink);
  --text-2: #555754;          /* Ink toward Ceramic 30 % · 5.8:1 */
  --label: #5D675A;           /* Sage toward Ink 20 % · 4.7:1 */
  --rule: #C6C5BF;            /* Ink at 16 % over Ceramic */
  --rule-soft: #D5D4CD;
  --field: #B3B3AD;
}

html.dark {
  --bg: var(--steep);
  --text: var(--ceramic);
  --text-2: #C0C0B9;          /* Ceramic toward Steep 20 % · 8.4:1 */
  --label: #8C9587;           /* Sage toward Ceramic 25 % · 5.0:1 */
  --rule: #42453E;            /* Ceramic at 16 % over Steep */
  --rule-soft: #33362F;
  --field: #53564F;
}

/* ---------- base ---------------------------------------------------------- */

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

html {
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg); /* so the first-paint fade rises out of the page colour, not white */
}
@media (max-width: 47.99em) { html { font-size: 18px; } }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the dark page as a surface: a barely-there warm grain and a vignette */
html.dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 10%, rgba(231, 230, 223, 0.035), transparent 60%),
    radial-gradient(ellipse 140% 110% at 50% 100%, rgba(0, 0, 0, 0.32), transparent 65%);
}
html.dark body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.9 0 0 0 0 0.84 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, p, ul, ol, dl, figure, details { margin: 0; }
h1, h2, h3 { font-weight: 400; }
em, i, cite { font-style: italic; }
strong, b { font-weight: 400; font-style: italic; } /* there is no bold on this site */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--field);
  transition: text-decoration-color 200ms ease;
}
a:hover { text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 1px;
}

::selection { background: var(--leaf); color: var(--ceramic); }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: var(--s1) var(--s2);
  background: var(--bg);
  text-decoration: none;
}
.skip:focus { top: var(--s2); }

/* ---------- small labels -------------------------------------------------- */

.label {
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--label);
  font-variant-numeric: oldstyle-nums;
}

/* ---------- masthead ------------------------------------------------------ */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) var(--gutter) 0;
}
.wordmark {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark em { font-style: italic; letter-spacing: 0; }
.wordmark::after {
  /* a short hairline beneath the mark, the only ornament in the header */
  content: "";
  display: block;
  width: 1.6rem;
  height: 1px;
  margin-top: 0.35rem;
  background: var(--rule);
}
.masthead nav { display: flex; gap: var(--s4); }
.masthead nav a {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--label);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.masthead nav a:hover { color: var(--text); }
.masthead nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--rule); }

/* ---------- home: the hero ------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
}
.hero-text {
  position: relative;
  z-index: 1;
  padding: var(--s12) 0 var(--s12) calc(var(--gutter) + var(--offset));
  max-width: 34rem;
}
.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.008em;
  margin-bottom: var(--s4);
}
.tellable {
  font-size: var(--fs-lede);
  line-height: 1.4;
  font-style: italic;
  color: var(--text-2);
  max-width: 22em;
  margin-bottom: var(--s3);
  text-wrap: pretty;
}
.launch {
  color: var(--gold);         /* the one Gold element on this page */
  margin-bottom: var(--s6);
}

.cup {
  position: relative;
  align-self: stretch;
  min-height: 70vh;
  min-height: 70svh;
}
.cup svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.cup .cup-tall { display: none; }
.cup::after {
  /* dissolve the photograph's edges into the page */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--steep) 0%, rgba(34, 38, 31, 0) 52%),
    linear-gradient(0deg, var(--steep) 0%, rgba(34, 38, 31, 0) 38%),
    linear-gradient(180deg, var(--steep) 0%, rgba(34, 38, 31, 0) 42%),
    linear-gradient(270deg, var(--steep) 0%, rgba(34, 38, 31, 0) 16%);
}

/* the steam overlay: two soft shapes above the rim, drifting */
.steam { opacity: 0.55; }
.steam ellipse { transform-box: fill-box; transform-origin: 50% 100%; }

/* ---------- the pour control --------------------------------------------- */

.pour {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.2rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.pour:hover { border-bottom-color: var(--text); }
.pour-ring {
  position: relative;
  width: 0.62em;
  height: 0.62em;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: none;
  transition: background-color 300ms ease;
}
.pour[aria-pressed="true"] .pour-ring { background: currentColor; }
.pour[aria-pressed="true"] .pour-ring::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
}
.pour-note {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  color: var(--label);
  min-height: 1.5em;
}

/* ---------- prose and sections ------------------------------------------- */

.page {
  padding: 0 var(--gutter);
}
.column {
  margin-left: var(--offset);
}
.column > .section, .column > .colophon { max-width: var(--measure); }
.section {
  padding: var(--s8) 0;
  border-top: 1px solid var(--rule);
}
.section > .label { margin-bottom: var(--s3); }
.section > .label + p { margin-top: 0; }
.prose p + p { margin-top: var(--s3); }
.prose p { text-wrap: pretty; }

.note {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-top: var(--s3);
}

/* ---------- the listening platforms: a row of links with hairlines -------- */

.platforms {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--s2);
}
.platforms li { display: flex; align-items: baseline; }
.platforms li + li::before {
  content: "";
  width: 1px;
  height: 0.9em;
  margin: 0 var(--s3);
  background: var(--rule);
  align-self: center;
}
.platforms a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.platforms a[href]:hover { border-bottom-color: currentColor; }
.platforms a:not([href]) { color: var(--text-2); cursor: default; }

/* ---------- subscribe: a line on paper ------------------------------------ */

.paper {
  display: flex;
  align-items: flex-end;
  gap: var(--s4);
  max-width: 28rem;
}
.paper input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field);
  border-radius: 0;
  padding: 0.3rem 0;
  transition: border-color 200ms ease;
}
.paper input[type="email"]::placeholder { color: var(--label); opacity: 1; }
.paper input[type="email"]:focus { border-bottom-color: var(--text); outline: none; }
.paper input[type="email"]:focus-visible { outline: none; }
.paper button {
  flex: none;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--leaf);
  border-radius: 0;
  padding: 0.3rem 0 0.2rem;
  cursor: pointer;
  transition: color 200ms ease;
}
html:not(.dark) .paper button { color: var(--leaf); }
.paper button:hover { border-bottom-color: currentColor; }

/* ---------- a contents list (home: Arc One · episodes: contents) --------- */

.toc {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.toc li { border-bottom: 1px solid var(--rule); }
.toc a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  column-gap: var(--s3);
  align-items: baseline;
  padding: var(--s2) 0;
  text-decoration: none;
}
.toc .toc-num, .toc .toc-date { font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--label); }
.toc .toc-date { text-align: right; white-space: nowrap; }
.toc .toc-title { transition: color 200ms ease; }
.toc a:hover .toc-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--field); }

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

.colophon {
  padding: var(--s8) 0 var(--s12);
  border-top: 1px solid var(--rule);
}
.colophon .meaning {
  max-width: var(--measure);
  margin-bottom: var(--s6);
  text-wrap: pretty;
}
.colophon .lines {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-2);
  max-width: var(--measure);
}
.colophon .lines p + p { margin-top: var(--s1); }
.colophon .lines a { text-decoration-color: var(--rule); }

/* ---------- episodes page ------------------------------------------------- */

/* one editorial grid for the whole page: a margin column for labels and
   figures, a reading column for everything else; hairlines span both */
.row {
  display: grid;
  grid-template-columns: 9rem minmax(0, var(--measure));
  column-gap: var(--s8);
  max-width: calc(9rem + var(--s8) + var(--measure));
}
.row > * { grid-column: 2; }
.row > .margin { grid-column: 1; }

.page-head {
  padding: var(--s12) 0 var(--s8);
}
.page-head h1 {
  grid-column: 1 / -1;
  font-size: 2.8rem;
  line-height: 1.08;
  letter-spacing: -0.008em;
  max-width: 14em;
}
.page-head h1 .label { display: block; margin-bottom: var(--s3); letter-spacing: 0.08em; }
.page-head .lede {
  font-size: var(--fs-lede);
  line-height: 1.4;
  font-style: italic;
  color: var(--text-2);
  margin-top: var(--s4);
  text-wrap: pretty;
}

.contents { margin-bottom: var(--s12); }
.contents > .label { padding-top: 0.75rem; }

.episode {
  padding: var(--s8) 0 var(--s12);
  border-top: 1px solid var(--rule);
}
.episode.is-current { border-top-color: var(--gold); } /* the one Gold element on this page */

.ep-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.55rem;
}
.ep-meta .label { display: block; }
.ep-meta .ep-num { color: var(--sage); font-size: var(--fs-lede); letter-spacing: 0; line-height: 1.4; margin-bottom: 0.3rem; } /* pure Sage is reserved for 24 px and up (3.6:1 passes as large text) */
.ep-meta .ep-now { color: var(--text); }

.episode h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin-bottom: var(--s3);
}
.question {
  font-size: var(--fs-lede);
  line-height: 1.4;
  font-style: italic;
  color: var(--text-2);
  hanging-punctuation: first;
  margin-bottom: var(--s4);
  text-wrap: pretty;
}
.ep-main p + p { margin-top: var(--s3); }
.ep-main h3.label { margin: var(--s6) 0 var(--s2); }

.colophon.row { max-width: calc(9rem + var(--s8) + var(--measure)); }

/* sections: an ordered list with small figures hung in the margin */
.sections {
  list-style: none;
  padding: 0;
  counter-reset: section;
}
.sections li {
  position: relative;
  padding-left: 2rem;
  counter-increment: section;
}
.sections li::before {
  content: counter(section);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--label);
  font-variant-numeric: oldstyle-nums;
}

/* reading: a bibliography with hanging indents */
.reading {
  list-style: none;
  padding: 0;
}
.reading li {
  padding-left: 1.5rem;
  text-indent: -1.5rem;
  text-wrap: pretty;
}
.reading li + li { margin-top: var(--s1); }

.listen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s3);
  row-gap: var(--s1);
  margin-top: var(--s6);
}
.listen-row .label { margin-right: var(--s1); }
.listen-row .platforms li + li::before { margin: 0 var(--s2); }

.transcript { margin-top: var(--s3); }
.transcript summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--field);
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary:hover { text-decoration-color: currentColor; }
.transcript[open] summary { text-decoration-color: currentColor; }
.transcript .transcript-body { margin-top: var(--s2); color: var(--text-2); }

/* ---------- motion -------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  body { animation: appear 900ms ease-out both; }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }

  .steam ellipse { animation: drift 16s ease-in-out infinite; }
  .steam ellipse:nth-child(2) { animation-duration: 21s; animation-delay: -7s; }
  .steam ellipse:nth-child(3) { animation-duration: 13s; animation-delay: -3s; }
  @keyframes drift {
    0%   { transform: translate(0, 0) scale(1, 1);       opacity: 0.35; }
    50%  { transform: translate(12px, -60px) scale(1.15, 1.25); opacity: 0.6; }
    100% { transform: translate(-6px, -120px) scale(1.3, 1.4); opacity: 0; }
  }

  .pour[aria-pressed="true"] .pour-ring::after { animation: pulse 2.6s ease-out infinite; }
  @keyframes pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(2.4); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 63.99em) {
  :root { --offset: 0rem; }
  .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

  /* the editorial grid folds to one column; the margin column's contents sit above the text */
  .row { grid-template-columns: 1fr; max-width: var(--measure); }
  .row > *, .row > .margin { grid-column: 1; }
  .contents > .label { padding-top: 0; margin-bottom: var(--s2); }
  .ep-meta { flex-direction: row; flex-wrap: wrap; column-gap: var(--s3); padding-top: 0; margin-bottom: var(--s2); }
  .ep-meta .ep-num { font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--label); line-height: 1.5; margin: 0; }
  .colophon.row { max-width: var(--measure); }
}

@media (max-width: 47.99em) {
  .masthead { padding-top: var(--s3); }
  .masthead nav { gap: var(--s3); }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cup {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 5;
    margin-top: var(--s3);
  }
  .cup .cup-wide { display: none; }
  .cup .cup-tall { display: block; }
  .cup::after {
    background:
      linear-gradient(0deg, var(--steep) 0%, rgba(34, 38, 31, 0) 36%),
      linear-gradient(180deg, var(--steep) 0%, rgba(34, 38, 31, 0) 30%),
      linear-gradient(90deg, var(--steep) 0%, rgba(34, 38, 31, 0) 22%),
      linear-gradient(270deg, var(--steep) 0%, rgba(34, 38, 31, 0) 22%);
  }
  .hero-text {
    padding: 0 var(--gutter) var(--s4);
    margin-top: -14vw;
    max-width: none;
  }
  .hero h1 { margin-bottom: var(--s3); }
  .launch { margin-bottom: var(--s4); }

  .section { padding: var(--s6) 0; }

  .toc a { grid-template-columns: 3.4rem minmax(0, 1fr); row-gap: 0.1rem; }
  .toc .toc-date { grid-column: 2; text-align: left; }

  .page-head { padding: var(--s8) 0 var(--s6); }
  .page-head h1 { font-size: var(--fs-title); }
  .contents { margin-bottom: var(--s8); }
  .episode { padding: var(--s6) 0 var(--s8); }

  .paper { flex-wrap: wrap; }
  .colophon { padding-bottom: var(--s8); }
}

@media (max-width: 30em) {
  .masthead { flex-direction: column; align-items: flex-start; gap: var(--s3); }

  /* the platform row becomes a list of lines, so no separator is left stranded at a line break */
  .section > .platforms { display: block; border-top: 1px solid var(--rule); }
  .section > .platforms li { display: block; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
  .section > .platforms li + li::before { content: none; }
}

/* very wide screens: keep the hero from becoming a letterbox */
@media (min-width: 110em) {
  .hero { min-height: 56rem; }
}