/* ============================================================================
   PERSONAL KOSMOLOGY — kosmos.css
   One ground: black. The colour lives in the mark, the light, and the action.
   ========================================================================== */

:root {
  /* ground — a single field, never a sequence of plates */
  --ink:        #000000;
  --ink-well:   #070B0C;                  /* only inside inputs and wells */

  /* light */
  --fg:         #F4F7F7;
  --fg-2:       rgba(244, 247, 247, 0.70);
  --fg-3:       rgba(244, 247, 247, 0.50);
  --fg-4:       rgba(244, 247, 247, 0.46);
  --fg-dim:     rgba(244, 247, 247, 0.26);   /* separators and marks, never text */
  --rule:       rgba(244, 247, 247, 0.11);
  --rule-lift:  rgba(244, 247, 247, 0.22);

  /* the brand's own colours — graphics and action, never body copy */
  --gold:       #FFAF02;
  --leaf:       #04995C;
  --forest:     #004F1D;
  --fountain:   #08AEC7;
  --steel:      #0A83BA;

  --wrap:   1180px;             /* the reading column */
  --gut-wide: clamp(1.4rem, 3.4vw, 4.5rem);   /* nav and footer run edge to edge */
  --gut:    clamp(1.4rem, 5vw, 3.5rem);
  --sp:     clamp(5.5rem, 11vw, 9.5rem);
  --ease:   cubic-bezier(.16, 1, .3, 1);

  --sans: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg-2);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.09rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

::selection { background: rgba(255, 175, 2, 0.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.k-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #000; padding: .7rem 1.1rem;
  font-weight: 600; font-size: .85rem;
}
.k-skip:focus { left: .6rem; top: .6rem; }

/* ── type ──────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 300; color: var(--fg); }

/* the largest voice — hairline weight, wide and unhurried */
.k-display {
  font-weight: 100;
  font-size: clamp(2.35rem, 5.4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--fg);
  text-wrap: balance;
}
.k-h2 {
  font-weight: 200;
  font-size: clamp(1.75rem, 3.3vw, 2.85rem);
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.k-h3 {
  font-weight: 300;
  font-size: clamp(1.22rem, 1.9vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.k-lead {
  font-weight: 300;
  font-size: clamp(1.12rem, 1.35rem + 0.25vw, 1.5rem);
  line-height: 1.52;
  color: var(--fg);
  letter-spacing: -0.008em;
}

em { font-style: italic; }
strong { font-weight: 600; color: var(--fg); }

a { color: inherit; }

.k-meta {
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 400;
}

/* ── layout ────────────────────────────────────────────────────────────── */

.k-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.k-measure { max-width: 66ch; }
.k-section { padding-block: var(--sp); position: relative; }
.k-section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* a hairline with the brand's hexagon set into it */
.k-rule {
  display: flex; align-items: center; gap: 1.1rem;
  color: var(--rule);
  margin-block: clamp(3rem, 6vw, 5rem);
}
.k-rule::before, .k-rule::after {
  content: ""; flex: 1; height: 1px; background: currentColor;
}
.k-rule svg { width: 22px; height: auto; flex: none; opacity: .9; }
.k-rule--start::before { flex: 0 0 0; }

/* ── buttons ───────────────────────────────────────────────────────────── */

.k-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .84rem 1.55rem;
  font-family: inherit; background: transparent; cursor: pointer;
  font-size: .93rem; font-weight: 400; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.k-btn svg { flex: none; }

.k-btn--gold { background: var(--gold); color: #0A0700; border-color: var(--gold); font-weight: 500; }
.k-btn--gold:hover { background: #FFC444; border-color: #FFC444; }

.k-btn--line { color: var(--fg); border-color: var(--rule-lift); }
.k-btn--line:hover { border-color: var(--fg-2); background: rgba(244,247,247,.05); }

.k-btn--sm { padding: .5rem 1rem; font-size: .82rem; }

/* a text link that goes somewhere */
.k-go {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg); text-decoration: none; font-weight: 400;
  padding-bottom: .35rem; border-bottom: 1px solid var(--rule-lift);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.k-go:hover { border-color: var(--gold); gap: .9rem; }
.k-go svg { transition: transform .3s var(--ease); }
.k-go:hover svg { transform: translateX(2px); }

/* prose links */
.k-prose a, .k-inline-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 175, 2, .5);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.k-prose a:hover, .k-inline-link:hover { border-color: var(--gold); color: #fff; }

/* ── nav ───────────────────────────────────────────────────────────────── */

/* Full width: the bar spans the whole ground the page sits on, and the hairline
   under it runs edge to edge as the page's own horizon. Three columns, so the
   navigation sits on the centre line the hero mark is built around. */

.k-nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-bottom: 1px solid rgba(244, 247, 247, .06);
  transition: background .45s var(--ease), border-color .45s var(--ease),
              backdrop-filter .45s var(--ease);
}
.k-nav.is-stuck {
  background: rgba(0, 0, 0, .80);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  border-bottom-color: var(--rule);
}
.k-nav-in {
  padding: 1.15rem var(--gut-wide);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
}
/* the bar keeps one height all the way down the page — what changes on scroll
   is the ground arriving under it, not the furniture resizing */

.k-brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--fg);
}
.k-brand-mark {
  width: 36px; height: 36px; object-fit: contain;
  transition: transform .8s var(--ease);
}
.k-brand:hover .k-brand-mark { transform: rotate(30deg); }
.k-brand-text { display: block; }
.k-brand-name {
  display: block;
  font-style: italic; font-weight: 300; font-size: 1.06rem; letter-spacing: -.005em;
  white-space: nowrap; line-height: 1.15;
}
.k-brand-tag {
  display: none; margin-top: .12rem;
  font-size: .61rem; letter-spacing: .21em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
}
@media (min-width: 1100px) { .k-brand-tag { display: block; } }

.k-nav-links { display: flex; align-items: center; gap: 2.2rem; }
.k-nav-links a {
  position: relative; padding-block: .4rem;
  text-decoration: none; color: var(--fg-2); font-size: .89rem;
  transition: color .25s var(--ease);
}
.k-nav-links a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px;
  background: var(--gold); opacity: 0;
  transition: left .4s var(--ease), right .4s var(--ease), opacity .3s var(--ease);
}
.k-nav-links a:hover { color: var(--fg); }
.k-nav-links a:hover::after { left: 0; right: 0; opacity: .9; }
.k-nav-links a[aria-current="page"] { color: var(--fg); }
.k-nav-links a[aria-current="page"]::after { left: 0; right: 0; opacity: .6; }

.k-nav-end { justify-self: end; display: flex; align-items: center; gap: .6rem; }
.k-nav-end .k-btn { color: var(--fg); }

.k-navtoggle {
  display: none; width: 42px; height: 42px; padding: 0; margin-right: -8px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.k-navtoggle span {
  position: absolute; left: 10px; width: 22px; height: 1px; background: var(--fg);
  transition: transform .35s var(--ease), opacity .2s linear;
}
.k-navtoggle span:nth-child(1) { top: 17px; }
.k-navtoggle span:nth-child(2) { top: 24px; }
.k-navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.k-navtoggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* small screens: the menu opens as its own dark room, not a dropped slab */
@media (max-width: 900px) {
  .k-navtoggle { display: block; }
  .k-nav-in { grid-template-columns: 1fr auto; }
  .k-nav-links {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0; padding: 5rem var(--gut) 4rem;
    background: rgba(0, 0, 0, .97);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease), visibility .35s;
    visibility: hidden;
  }
  .k-nav-links.is-open { opacity: 1; pointer-events: auto; visibility: visible; }
  .k-nav-links a {
    width: 100%; padding: 1.15rem 0; font-size: clamp(1.5rem, 7vw, 2.1rem);
    font-weight: 200; color: var(--fg); letter-spacing: -.015em;
    border-bottom: 1px solid var(--rule);
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .k-nav-links.is-open a { opacity: 1; transform: none; }
  .k-nav-links.is-open a:nth-child(1) { transition-delay: .06s; }
  .k-nav-links.is-open a:nth-child(2) { transition-delay: .12s; }
  .k-nav-links.is-open a:nth-child(3) { transition-delay: .18s; }
  .k-nav-links a::after { display: none; }
}
/* the one action stays reachable on a phone, so it tightens rather than hides */
@media (max-width: 520px) {
  .k-nav-in { gap: .75rem; }
  .k-brand { gap: .6rem; }
  .k-brand-mark { width: 30px; height: 30px; }
  .k-brand-name { font-size: .96rem; }
  .k-nav-follow { padding: .58rem .9rem; font-size: .82rem; }
}

/* ── hero ──────────────────────────────────────────────────────────────── */

.k-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 5.5rem 0 4.5rem;
  overflow: hidden;
}
.k-hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the light the mark sits in — the brand's own gradient ground, kept faint */
.k-hero-glow {
  position: absolute; left: 50%; top: 42%;
  width: min(115vw, 1250px); aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(8, 174, 199, .085), transparent 70%),
    radial-gradient(closest-side at 44% 42%, rgba(4, 153, 92, .05), transparent 62%);
}
.k-hero-vign {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 78% at 50% 40%, transparent 42%, rgba(0,0,0,.62) 100%);
}

/* No z-index here. It is the last positioned child of the hero, so it already
   paints above the canvas — and a stacking context on this element would cut
   the mark's blend off from the star field it is supposed to blend with. */
.k-hero-in {
  position: relative;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.k-hero-copy {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}

/* the mark occupies this space; the canvas draws it, this reserves it */
.k-hero-mark { width: 100%; height: clamp(205px, 35vh, 400px); flex: none; pointer-events: none; }

/* ── the mark itself, when the page mounts the real artwork ────────────── */

.k-mark {
  position: relative; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.k-mark.is-ready { opacity: 1; }
.k-mark-tilt, .k-mark-spin { display: block; height: 100%; will-change: transform; }
.k-mark-spin { animation: k-turn 320s linear infinite; }
.k-mark svg { display: block; height: 100%; width: auto; max-width: 100%; }
@keyframes k-turn { to { transform: rotate(360deg); } }

/* in the hero the mark is the thing you touch, so it takes the pointer back.
   No added glow: the artwork carries its own centre bloom, and stacking a
   second one turns the black ground green.

   It is also the one element on the site that blends: `lighten` keeps whichever
   is brighter, the mark or the sky behind it, so the star field carries on
   through the leaves instead of stopping at their edge. The mark stops being an
   object standing in front of the kosmos and becomes part of it — which is the
   whole argument the hero is making. */
.k-hero-mark.k-mark {
  pointer-events: auto; cursor: pointer;
  mix-blend-mode: lighten;
}

.k-wordmark {
  font-style: italic; font-weight: 300;
  font-size: clamp(2.5rem, 6.6vw, 5.1rem);
  line-height: 1.02; letter-spacing: -0.028em;
  color: var(--fg); margin: 0;
}
.k-tagline {
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.9vw, 1.32rem);
  color: var(--fg-2); margin: .5rem 0 0; letter-spacing: -0.004em;
}
.k-hero-sub {
  margin: clamp(1.6rem, 3.4vw, 2.4rem) 0 0;
  max-width: 38ch; color: var(--fg-2); font-weight: 300;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem); line-height: 1.55;
}
.k-hero-cta {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.k-hero-foot {
  margin-top: clamp(2.2rem, 4vw, 3rem);
}

/* scroll cue */
.k-cue {
  position: absolute; left: 50%; bottom: 2.1rem; translate: -50% 0;
  width: 1px; height: 46px; overflow: hidden; z-index: 2;
  background: var(--rule);
}
.k-cue::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--fg-2));
  animation: k-cue 2.6s var(--ease) infinite;
}
@keyframes k-cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* the hero recedes as you leave it */
.k-hero-in { transition: opacity .2s linear; }

/* ── the question ──────────────────────────────────────────────────────── */

.k-question .k-display { max-width: 16ch; }
.k-answer {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .k-answer { grid-template-columns: 5fr 7fr; align-items: start; }
}
.k-sign {
  margin-top: 2rem; font-size: .84rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
}
.k-sign strong { color: var(--fg); font-weight: 400; letter-spacing: .12em; }

/* ── the weave: three parametric figures living under a section ────────── */

/* They are ground, not content. Each is masked back into the black at its own
   edges, sits under everything, and never takes the pointer. */
.k-weave {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 2.2s var(--ease);
  /* --mx/--my come from the figure's own centre, so it dissolves into the black
     around itself; the two linear passes make sure it never meets an edge of
     the section with anything still drawn on it */
  -webkit-mask-image:
    radial-gradient(46% 58% at var(--mx, 50%) var(--my, 50%),
      #000 22%, rgba(0,0,0,.55) 62%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(46% 58% at var(--mx, 50%) var(--my, 50%),
      #000 22%, rgba(0,0,0,.55) 62%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.js .k-weave { opacity: var(--weave, .5); }
.k-weave-in { position: relative; z-index: 1; }
.k-has-weave { position: relative; overflow: hidden; }

/* On a phone there is no pointer to answer, so the figures are driven by the
   section's own passage through the viewport instead — see kosmos-weave.js.
   They sit lower and quieter there, because the type has nowhere else to go. */
@media (max-width: 760px) {
  .k-weave { opacity: 0; }
  /* the figure sits behind the copy here rather than beside it, so it gives
     up a little more of itself to the type */
  .js .k-weave { opacity: calc(var(--weave, .5) * .72); }
  /* A phone section is tall and narrow, so the figure travels with the screen
     rather than sitting at the section's middle where you would meet it once.
     That means the mask cannot be tied to the figure either: it becomes plain
     edge fades, which hold still while the figure moves under them. */
  .k-weave {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ── the constellation of voices ───────────────────────────────────────── */

/* the stage's sky is drawn wider than the stage, so the section holds it in */
.k-cons { position: relative; overflow: hidden; }
.k-cons-head { max-width: 46ch; }

.k-stage {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  height: clamp(480px, 62vw, 660px);
}
.k-stage-gl { position: absolute; inset: -8% -12%; width: 124%; height: 116%; display: block; }
.k-stage-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* --w is set per line from how much two lives actually share, so a strong tie
   reads as a strong line instead of every pair looking equally connected */
.k-stage-lines line {
  stroke: rgba(139, 224, 236, .75);
  stroke-width: 1;
  stroke-opacity: var(--w, .2);
  transition: stroke .4s var(--ease), stroke-opacity .4s var(--ease);
}
.k-stage-lines line.is-lit { stroke: rgba(255, 175, 2, .85); stroke-opacity: 1; }

/* lines that have not been drawn yet: dashed, and crawling slowly outward, so
   the map reads as one that keeps going rather than one that has finished */
.k-stage-lines line.is-forming {
  stroke: rgba(139, 224, 236, .5);
  stroke-opacity: .17;
  stroke-dasharray: 2.5 6;
  animation: k-forming 14s linear calc(var(--i, 0) * -2.6s) infinite;
}
.k-stage-lines line.is-forming.is-lit {
  stroke: rgba(255, 175, 2, .7); stroke-opacity: .55;
}
@keyframes k-forming { to { stroke-dashoffset: -68; } }

/* conversations not yet had: the hexagon with nothing inside it yet, standing
   at its own distance among and beyond the voices */
.k-future {
  position: absolute; left: var(--x); top: var(--y);
  translate: -50% -50%;
  width: calc(clamp(84px, 10.6vw, 128px) * var(--s, .5));
  aspect-ratio: 1.155;
  pointer-events: none;
  color: rgba(139, 224, 236, .55);
  filter: blur(var(--blur, 0));
}
.k-future svg { width: 100%; height: 100%; display: block; overflow: visible; }
.k-future path { fill: none; stroke: currentColor; stroke-width: 1; }
.js .k-stage .k-future { opacity: 0; }
.js .k-stage.is-in .k-future {
  opacity: var(--o, .4);
  transition: opacity 1.6s var(--ease) calc(1.1s + var(--i, 0) * 190ms);
  animation: k-breathe var(--dur, 9s) ease-in-out calc(3s + var(--i, 0) * .7s) infinite;
}
@keyframes k-breathe {
  0%, 100% { opacity: var(--o, .4); }
  50%      { opacity: calc(var(--o, .4) * 2.05); }
}

.k-voice {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: block; text-decoration: none; color: inherit;
  background: none; border: 0; padding: 0; font: inherit; text-align: center;
  cursor: default;
}
a.k-voice { cursor: pointer; }

/* the points of light arrive one after another, then the lines find them.
   --dim is the depth: a voice further back is dimmer as well as smaller. */
.js .k-stage .k-voice { opacity: 0; }
.js .k-stage.is-in .k-voice {
  opacity: var(--dim, 1);
  transition: opacity 1.1s var(--ease) calc(var(--i, 0) * 130ms);
}
.js .k-stage.is-in .k-voice:hover,
.js .k-stage.is-in .k-voice:focus-visible,
.js .k-stage.is-in .k-voice.is-active { opacity: 1; }
.js .k-stage-lines { opacity: 0; transition: opacity 1.4s var(--ease) .9s; }
.js .k-stage.is-in .k-stage-lines { opacity: 1; }

/* --blur is the rest of the depth: distance softens a face the way a lens does,
   and clears the moment you look straight at it */
.k-voice-figure {
  display: block; position: relative;
  width: clamp(84px, 10.6vw, 128px); aspect-ratio: 1.155;
  margin-inline: auto;
  filter: blur(var(--blur, 0));
  transition: filter .5s var(--ease);
}
.k-voice:hover .k-voice-figure,
.k-voice:focus-visible .k-voice-figure,
.k-voice.is-active .k-voice-figure { filter: none; }
.k-voice-portrait {
  display: block; position: absolute; inset: 0;
  clip-path: polygon(25% 100%, 75% 100%, 100% 50%, 75% 0, 25% 0, 0 50%);
  background: #061014;
  transition: filter .55s var(--ease), opacity .55s var(--ease);
  /* on the stage, dimming is depth in a star field — not a "not available" grey */
  filter: grayscale(.28) brightness(.86);
  opacity: .92;
}
.k-voice-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* the logo's hexagon, drawn as a hairline frame */
.k-voice-ring {
  position: absolute; inset: -13%; pointer-events: none; display: block;
  opacity: .45; transition: opacity .55s var(--ease);
}
.k-voice-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.k-voice-ring path {
  fill: none; stroke: rgba(139, 224, 236, .8); stroke-width: 1;
  transition: stroke .5s var(--ease);
}
/* On the stage an episode's frame is drawn at 2px and a conversation still to
   come at 1px, so the hairline itself says which of the two a hexagon is. */
.k-stage .k-voice-ring path { stroke-width: 2; }

/* the next conversation: an episode's frame with no face in it yet. The inside
   is not empty — it is lit, the way a place set at a table is not an absence. */
.k-voice.is-next { cursor: default; }
.k-voice.is-next .k-voice-portrait {
  background:
    radial-gradient(66% 66% at 50% 46%, rgba(139, 224, 236, .13), transparent 72%),
    #04090C;
  filter: none; opacity: 1;
}
.k-voice.is-next .k-voice-ring { opacity: .62; }
.k-voice.is-next .k-voice-ring path {
  stroke: rgba(139, 224, 236, .8);
  stroke-dasharray: 5 4;
}
.k-voice.is-next .k-voice-name { color: var(--fg-2); font-style: italic; }
.k-voice.is-next .k-voice-ep { color: rgba(139, 224, 236, .72); }
.k-voice.is-next:hover .k-voice-ring,
.k-voice.is-next:focus-visible .k-voice-ring { opacity: 1; }
.k-voice.is-next:hover .k-voice-name,
.k-voice.is-next:focus-visible .k-voice-name { color: var(--fg); }

/* the labels are counter-scaled against the depth so a far voice can still be
   read; --label is 1 at the front and rises toward the back */
.k-voice-name, .k-voice-ep {
  scale: var(--label, 1);
  transform-origin: top center;
}
.k-voice-name {
  display: block; margin-top: .9rem; font-size: .95rem; font-weight: 300; color: var(--fg);
  letter-spacing: -.005em; white-space: nowrap;
  transition: color .4s var(--ease);
}
.k-voice-ep {
  display: block; margin-top: .2rem;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-4); transition: color .4s var(--ease);
}
.k-voice.is-live .k-voice-ep { color: var(--gold); }
.k-voice.is-live .k-voice-portrait { filter: none; opacity: 1; }
.k-voice.is-live .k-voice-ring { opacity: .8; }
.k-voice.is-live .k-voice-ring path { stroke: rgba(255, 175, 2, .75); }

.k-voice:hover .k-voice-portrait,
.k-voice:focus-visible .k-voice-portrait,
.k-voice.is-active .k-voice-portrait {
  filter: none; opacity: 1;
}
.k-voice:hover .k-voice-ring,
.k-voice:focus-visible .k-voice-ring,
.k-voice.is-active .k-voice-ring { opacity: 1; }
.k-voice:hover .k-voice-ep,
.k-voice.is-active .k-voice-ep { color: var(--fg-2); }
.k-voice.is-live:hover .k-voice-ep { color: var(--gold); }

/* the light each voice sits on */
.k-voice-portrait::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 22px 4px rgba(0, 0, 0, .38);
  pointer-events: none;
}

.k-cons-caption {
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
  min-height: 2.6em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem 1.1rem;
  border-top: 1px solid var(--rule); padding-top: 1.2rem;
}
.k-cons-caption p { margin: 0; font-size: .95rem; color: var(--fg-3); }
.k-cons-caption .k-themes { color: var(--fg); font-weight: 300; }
.k-cons-caption .k-themes span { color: var(--fg-dim); margin-inline: .45rem; }

/* mobile: the constellation becomes a column of points */
@media (max-width: 760px) {
  .k-stage {
    height: auto; perspective: none;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 7vw, 3rem) 1rem;
    padding-block: 2.5rem;
  }
  .k-stage-lines, .k-future { display: none; }
  .k-stage-gl { inset: -4% -8%; width: 116%; height: 108%; }
  .k-voice { position: static; translate: none; transform: none; }
  .k-voice-figure { width: clamp(88px, 28vw, 132px); }
}

/* ── the latest conversation ───────────────────────────────────────────── */

.k-latest-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .k-latest-grid { grid-template-columns: 5fr 7fr; } }

.k-latest-media {
  position: relative; display: block; text-decoration: none;
  aspect-ratio: 1.155; max-width: 420px; width: 100%;
}
.k-latest-media img {
  width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(25% 100%, 75% 100%, 100% 50%, 75% 0, 25% 0, 0 50%);
  transition: transform .8s var(--ease);
}
.k-latest-media:hover img { transform: scale(1.02); }
.k-latest-media .k-voice-ring { inset: 0; opacity: .85; }
.k-latest-media .k-voice-ring path { stroke: rgba(139, 224, 236, .75); }

.k-latest-body > * + * { margin-top: 1.1rem; }
.k-latest-title { text-decoration: none; }
.k-latest-title:hover { color: #fff; }
.k-latest-meta { font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.k-latest-meta b { color: var(--fg); font-weight: 400; }
.k-themes-row { font-size: .88rem; color: var(--fg-3); }
.k-themes-row span { color: var(--fg-dim); margin-inline: .5rem; }

/* ── three movements ───────────────────────────────────────────────────── */

.k-movements { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; }
.k-movement {
  display: grid; gap: 1rem 2.2rem;
  padding-block: clamp(1.9rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--rule);
}
.k-movement:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 800px) { .k-movement { grid-template-columns: 4.5fr 7.5fr; } }

.k-movement-mark { display: flex; align-items: flex-start; gap: 1.1rem; }
.k-movement-hex { position: relative; width: 50px; flex: none; }
.k-movement-hex svg { width: 100%; height: auto; display: block; overflow: visible; }
.k-movement-hex path {
  fill: none; stroke: rgba(139, 224, 236, .7); stroke-width: 1;
}
.k-movement-hex b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .78rem; font-weight: 300; color: var(--fg); letter-spacing: .08em;
  padding-left: .08em;
}
.k-movement h3 { padding-top: .15rem; }
.k-movement p { color: var(--fg-2); max-width: 60ch; }

.k-taboo {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  max-width: 68ch;
}
.k-taboo p { color: var(--fg-2); }

/* ── the K ─────────────────────────────────────────────────────────────── */

/* The one photograph on the site, and it earns its place: a figure whose inside
   is a galaxy is the section's argument, not decoration. It drifts against the
   scroll, sits to the right of the reading column, and is scrimmed back to the
   black ground from the left so the type never crosses it. */
.k-idea { overflow: hidden; }
.k-idea-bg {
  position: absolute; inset: -12% 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
}
.k-idea-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  opacity: .3;
  will-change: transform;
  transform: translate3d(0, var(--shift, 0px), 0);
}
/* narrow: the figure is behind the reading column, so it is held right back */
.k-idea-bg::after {
  content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42);
}

/* Wide enough to hold both: the argument keeps the left, the figure takes the
   right, and the image dissolves into the black ground before it reaches the
   type rather than sitting behind it. */
@media (min-width: 1020px) {
  /* justify-content, or the auto track swallows the space meant for the figure */
  .k-idea .k-idea-grid {
    grid-template-columns: auto minmax(0, 31rem);
    justify-content: start;
  }
  .k-idea-bg {
    inset: -10% 0 -10% auto; width: min(58%, 820px);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 46%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 46%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
    mask-composite: intersect;
  }
  .k-idea-bg img { object-position: 46% 42%; opacity: .92; }
  .k-idea-bg::after { display: none; }   /* wide: it stands beside the type, not under it */
}

/* Narrow: there is no column of clear space to stand in, so instead of hiding
   the figure behind the type it gets a band of its own at the head of the
   section, at full strength, falling away into the black the copy sits on. */
@media (max-width: 1019px) {
  .k-idea { padding-top: calc(min(122vw, 540px) + clamp(1.5rem, 5vw, 2.5rem)); }
  .k-idea-bg {
    inset: -5% 0 auto; height: calc(min(122vw, 540px) + 5%);
    -webkit-mask-image: none; mask-image: none;
  }
  .k-idea-bg img { opacity: 1; object-position: 50% 26%; }
  .k-idea-bg::after {
    background: linear-gradient(180deg,
      rgba(0,0,0,.42) 0%, transparent 14%, transparent 50%, #000 98%);
  }
}
.k-idea-in { position: relative; z-index: 1; }

.k-idea-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 860px) { .k-idea-grid { grid-template-columns: auto 1fr; } }

.k-glyph {
  font-style: italic; font-weight: 100;
  font-size: clamp(7rem, 15vw, 13rem);
  line-height: .78; margin: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 247, 247, .34);
  user-select: none;
}
.k-idea-body > * + * { margin-top: 1.15rem; }

/* ── the host ──────────────────────────────────────────────────────────── */

.k-host-grid { display: grid; gap: clamp(1.6rem, 3.5vw, 3.2rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 880px) { .k-host-grid { grid-template-columns: 1fr 1fr; } }
.k-host-col > * + * { margin-top: 1.15rem; }
.k-aside {
  font-style: italic; font-weight: 300; color: var(--fg);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}
.k-byline { font-size: .92rem; color: var(--fg-3); }

/* The host, beside the line he closes on. The photograph is already lit on
   black, so it takes no frame and no clip — he simply comes out of the same
   ground the page is made of, with one fade so the crop never shows. */
.k-host-close {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .k-host-close { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.k-host-portrait { margin: 0; }
.k-host-portrait img {
  width: 100%; max-width: 420px; height: auto;
  /* the studio black is a shade lighter than the page, so every edge is faded
     rather than only the crop at his waist */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 64%, transparent 99%),
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 7%, #000 64%, transparent 99%),
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;
}
.k-host-close .k-quote { margin-top: 0; }

.k-quote {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0 0 0 clamp(1.2rem, 3vw, 2.4rem);
  border-left: 1px solid var(--rule-lift);
  font-style: italic; font-weight: 200;
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  line-height: 1.32; color: var(--fg); max-width: 24ch;
  letter-spacing: -.014em;
}

/* ── the essay disclosure ──────────────────────────────────────────────── */

.k-disclose {
  display: inline-flex; align-items: center; gap: .85rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--fg); font-family: inherit;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 300;
  letter-spacing: -.008em;
}
.k-disclose-mark {
  position: relative; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--rule-lift); border-radius: 50%;
  transition: border-color .35s var(--ease), transform .5s var(--ease);
}
.k-disclose-mark::before, .k-disclose-mark::after {
  content: ""; position: absolute; inset: 50% 30%; height: 1px;
  background: var(--fg); translate: 0 -50%;
  transition: transform .45s var(--ease), opacity .3s linear;
}
.k-disclose-mark::after { transform: rotate(90deg); }
.k-disclose:hover .k-disclose-mark { border-color: var(--gold); }
.k-disclose[aria-expanded="true"] .k-disclose-mark::after { transform: rotate(0deg); opacity: 0; }
.k-disclose-note { margin-top: 1rem; color: var(--fg-3); max-width: 54ch; font-size: .96rem; }

.k-story { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); }
.k-story.is-open { grid-template-rows: 1fr; }
.k-story-in { overflow: hidden; min-height: 0; }
.k-story-in > .k-wrap { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 9vw, 8rem); }
.k-story .k-quote { max-width: 30ch; margin-top: clamp(2rem, 4vw, 3rem); }

/* ── a document inside the page ────────────────────────────────────────────
   Long prose on the same open ground as the rest of the page has nothing to
   hold it: every run looks like the last one and there is no telling how far
   in you are. A hairline edge and a barely-lit well turn it into a page you
   have opened, and the parts get numbers so the structure is legible before a
   word is read. Not a card — a card sits on the ground; this one is cut into
   it, which is why the light falls off downward and the border stays a
   hairline. */

.k-doc {
  border: 1px solid var(--rule);
  background: linear-gradient(180deg,
    rgba(244, 247, 247, .028) 0%, rgba(244, 247, 247, 0) 46%);
  padding: clamp(1.9rem, 4.4vw, 4rem) clamp(1.3rem, 4vw, 4rem);
}
/* the essay's page is only as wide as the numeral column plus a reading measure,
   so the border stays close to the words rather than ringing empty ground */
.k-doc--story { max-width: 62rem; margin-inline: auto; }
.k-doc-lede {
  margin: 0; max-width: 46ch;
  font-weight: 200; font-size: clamp(1.18rem, 2.1vw, 1.55rem);
  line-height: 1.46; letter-spacing: -.012em; color: var(--fg);
}

.k-story-part {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
  border-top: 1px solid var(--rule);
}
.k-story-part h2 { margin-bottom: 1.4rem; }
.k-story-num {
  margin: 0 0 .9rem; font-size: .7rem; letter-spacing: .26em;
  color: rgba(244, 247, 247, .36); font-variant-numeric: tabular-nums;
}

/* Wide enough, and the numeral steps out into a column of its own so the
   headings hang on one line and the eye can count the parts down the edge. */
@media (min-width: 880px) {
  .k-story-part {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    column-gap: clamp(1.4rem, 3vw, 2.4rem);
  }
  .k-story-part > * { grid-column: 2; }
  .k-story-num { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-top: .55em; }
  .k-story-part h2 { margin-top: 0; }
}

/* ── the chorus ────────────────────────────────────────────────────────── */

.k-chorus { position: relative; overflow: hidden; padding-block: clamp(8rem, 17vw, 15rem); }
.k-chorus-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-chorus::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 50%, rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
}
.k-chorus-in { position: relative; z-index: 2; text-align: center; }
.k-chorus-line {
  font-style: italic; font-weight: 100;
  font-size: clamp(1.7rem, 5vw, 3.6rem);
  line-height: 1.2; letter-spacing: -.022em; color: var(--fg);
  margin: 0 auto; max-width: 20ch;
}

/* ── subscribe ─────────────────────────────────────────────────────────── */

.k-sub { position: relative; text-align: center; }
.k-sub-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.k-sub .k-h2 { max-width: 20ch; }
.k-sub-note { margin-top: 1rem; color: var(--fg-3); }
.k-sub-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

.k-mail { margin-top: clamp(2.2rem, 4vw, 3rem); width: 100%; max-width: 470px; }
.k-mail-label { display: block; font-size: .82rem; color: var(--fg-3); margin-bottom: .8rem; }
.k-mail-row { display: flex; gap: .6rem; }
.k-mail-input {
  flex: 1; min-width: 0;
  background: var(--ink-well); border: 1px solid var(--rule-lift); color: var(--fg);
  font: inherit; font-size: .95rem; padding: .8rem 1rem;
  transition: border-color .3s var(--ease);
}
.k-mail-input::placeholder { color: var(--fg-4); }
.k-mail-input:hover { border-color: rgba(244,247,247,.34); }
.k-mail-input:focus { outline: none; border-color: var(--gold); }
.k-mail-msg { margin: .9rem 0 0; font-size: .86rem; min-height: 1.3em; color: var(--fg-3); }
.k-mail-msg.is-err { color: #FF9B7A; }
.k-mail-msg.is-ok { color: var(--gold); }
@media (max-width: 480px) { .k-mail-row { flex-direction: column; } }

.k-social { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; margin: 2.2rem 0 0; padding: 0; }
.k-social a { text-decoration: none; font-size: .86rem; color: var(--fg-3); transition: color .25s var(--ease); }
.k-social a:hover { color: var(--fg); }

/* ── footer ────────────────────────────────────────────────────────────── */

/* Full width, and read as the page's last movement: the hexagon rule closes the
   content, four short columns replace the old single run of links, and the
   mission gets the final line to itself. */

.k-foot { padding-bottom: clamp(2rem, 4vw, 3rem); }

.k-foot-rule {
  display: flex; align-items: center;
  padding-inline: var(--gut-wide);
  color: var(--fg-dim);
}
.k-foot-rule::before, .k-foot-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.k-foot-rule span { display: block; padding-inline: 1.4rem; }
.k-foot-rule svg { display: block; width: 20px; height: auto; }

.k-foot-in {
  padding-inline: var(--gut-wide);
  padding-top: clamp(3rem, 6vw, 5rem);
}
/* The lockup holds the left edge and everything else gathers at the far corner:
   two links on one line, and beneath them the two places the show actually
   lives, as marks rather than as more words. The nav is not repeated here —
   a footer that recites the header teaches the visitor nothing. */
.k-foot-grid {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: clamp(2.4rem, 5vw, 3.5rem);
}

.k-foot-brand img {
  width: clamp(150px, 17vw, 215px); height: auto; display: block;
}

.k-foot-end {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}
@media (min-width: 720px) { .k-foot-end { align-items: flex-end; text-align: right; } }

.k-foot-links { display: flex; flex-wrap: wrap; gap: .2rem 2.2rem; }
/* a link is a link: full-size, lit, and carrying a rule under it */
.k-foot-links a {
  font-size: .95rem; color: var(--fg-2); font-weight: 300;
  padding-block: .32rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  text-decoration-color: rgba(244, 247, 247, .2);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.k-foot-links a:hover { color: var(--fg); text-decoration-color: var(--gold); }

/* a label is a label: small, spaced, dim, and never underlined */
.k-foot-h {
  margin: 0 0 .55rem; font-size: .64rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fg-4);
}

.k-foot-sets { display: flex; gap: clamp(2rem, 4.5vw, 3.6rem); }
.k-foot-set { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 720px) { .k-foot-set { align-items: flex-end; } }

.k-ico-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
  /* the boxes are generous for the thumb; pulling the row out by half the
     surplus puts the glyph's own edge on the margin, not its hit area */
  margin-inline: -11px;
}
.k-ico {
  display: grid; place-items: center; width: 44px; height: 44px;
  color: var(--fg-3);
  transition: color .28s var(--ease), transform .35s var(--ease);
}
.k-ico svg { width: 21px; height: 21px; display: block; }
.k-ico:hover { color: var(--gold); transform: translateY(-2px); }

.k-foot-close {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1.2rem 2rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.k-foot-mission {
  margin: 0; font-style: italic; font-weight: 300; color: var(--fg);
  font-size: clamp(1.22rem, 1.9vw, 1.7rem); line-height: 1.25;
  letter-spacing: -.01em;
}
.k-foot-copy {
  margin: 0; font-size: .78rem; color: var(--fg-4);
  display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; justify-content: flex-end;
}
.k-foot-credit a {
  color: var(--fg-3); text-decoration: underline;
  text-decoration-color: rgba(244, 247, 247, .2); text-underline-offset: .28em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.k-foot-credit a:hover { color: var(--fg); text-decoration-color: var(--gold); }

/* ── motion: one rise, everywhere, from an already-visible default ─────── */

.js .k-rise { opacity: 0; transform: translateY(16px); }
.js .k-rise.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .k-hero .k-in { opacity: 0; transform: translateY(18px); }
.js .k-hero .k-in.is-in {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .k-rise, .js .k-hero .k-in { opacity: 1 !important; transform: none !important; }
  .js .k-stage.is-in .k-future { animation: none; transition: none; }
  .k-stage-lines line.is-forming { animation: none; }
  .k-mark-spin { animation: none !important; }
  .k-cue::after { animation: none; opacity: .5; }
  .k-story { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* when WebGL is unavailable the canvas is dropped and the ground carries on */
canvas.is-nogl { display: none; }
.k-hero.is-nogl .k-hero-glow { opacity: 1.5; }
/* and the mark stands still rather than not standing at all */
.k-hero-mark.is-still {
  background: url("logo-icon-dark.png") center / contain no-repeat;
  opacity: 0; animation: k-still 1.6s var(--ease) .25s forwards;
}
@keyframes k-still { to { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .k-hero-mark.is-still { opacity: .95; animation: none; }
}

/* ============================================================================
   CONVERSATIONS — the index
   ========================================================================== */

.k-page-head {
  position: relative; overflow: hidden;
  padding: clamp(9rem, 16vw, 13rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.k-page-head-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-page-head-in { position: relative; z-index: 2; }
.k-page-head .k-display { max-width: 14ch; }
.k-page-head p { margin-top: 1.4rem; max-width: 52ch; }

.k-back {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 1.6rem;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.k-back:hover { color: var(--fg); gap: .8rem; }
.k-back svg { transition: transform .25s var(--ease); }
.k-back:hover svg { transform: translateX(-2px); }

/* themes — hairline text switches, not chips */
.k-filter {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; align-items: baseline;
  padding-block: 1.4rem; border-block: 1px solid var(--rule);
}
/* with one conversation out there is nothing to filter, and an empty bar with
   two rules through it reads as a mistake */
.k-filter:empty { display: none; }
.k-filter button {
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--fg-3);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.k-filter button:hover { color: var(--fg); }
.k-filter button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--gold); }

/* the list — hairlines, never cards */
.k-list { list-style: none; margin: 0; padding: 0; }
.k-row { border-bottom: 1px solid var(--rule); }
.k-row-in {
  display: grid; gap: 1.4rem 2.4rem; align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  text-decoration: none; color: inherit;
}
@media (min-width: 780px) {
  .k-row-in { grid-template-columns: 132px 1fr auto; align-items: center; }
}
.k-row-figure { position: relative; width: 132px; aspect-ratio: 1.155; flex: none; }
/* The index shows the guests in their own colour. Whether a conversation is out
   yet is carried by the gold episode line and the state word, not by draining
   every face of blood. */
.k-row-figure .k-voice-portrait { filter: none; opacity: 1; }
.k-row-figure .k-voice-ring { inset: 0; opacity: .5; }
a.k-row-in:hover .k-voice-portrait { filter: none; opacity: 1; }
a.k-row-in:hover .k-voice-ring { opacity: 1; }

.k-row-body, .k-row-body > span, .k-row-figure { display: block; }
.k-row-no {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 .5rem;
}
.k-row.is-live .k-row-no { color: var(--gold); }
.k-row-guest {
  font-weight: 300; font-size: clamp(1.35rem, 2.4vw, 1.9rem); color: var(--fg);
  letter-spacing: -.014em; margin: 0; line-height: 1.2;
  transition: color .25s var(--ease);
}
.k-row-title { margin: .45rem 0 0; font-size: 1.02rem; color: var(--fg-2); font-weight: 300; }
.k-row-dek { margin: .8rem 0 0; font-size: .95rem; color: var(--fg-2); max-width: 58ch; }
.k-row-themes { margin: .9rem 0 0; font-size: .82rem; color: var(--fg-3); }
.k-row-themes span { color: var(--fg-dim); margin-inline: .45rem; }
.k-row-state {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3);
  white-space: nowrap;
}
.k-row.is-live .k-row-state { color: var(--fg); }
a.k-row-in:hover .k-row-guest { color: #fff; }
.k-empty { padding: 4rem 0; color: var(--fg-3); }

/* ============================================================================
   ONE CONVERSATION
   ========================================================================== */

.k-ep-head {
  position: relative; overflow: hidden;
  padding: clamp(8.5rem, 15vw, 12rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.k-ep-head-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-ep-head-in { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 920px) {
  .k-ep-head-in { grid-template-columns: 1fr 300px; align-items: center; }
}
.k-ep-no {
  font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.1rem;
}
.k-ep-title {
  font-weight: 100; font-size: clamp(2.05rem, 4.4vw, 3.5rem); line-height: 1.08;
  letter-spacing: -.022em; color: var(--fg); margin: 0; text-wrap: balance;
}
.k-ep-guest {
  margin: 1.2rem 0 0; font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--fg);
}
.k-ep-role { margin: .35rem 0 0; font-size: .92rem; color: var(--fg-3); max-width: 48ch; }
.k-ep-dek { margin: 1.6rem 0 0; max-width: 56ch; }
.k-ep-figure {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1.155; justify-self: end;
}
.k-ep-figure .k-voice-portrait { filter: none; opacity: 1; }
.k-ep-figure .k-voice-ring { inset: 0; opacity: .8; }
@media (max-width: 919px) { .k-ep-figure { justify-self: start; max-width: 220px; } }

.k-yt {
  position: relative; aspect-ratio: 16/9; background: #05090B;
  border: 1px solid var(--rule); cursor: pointer; overflow: hidden;
  display: grid; place-items: center;
}
.k-yt img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .5; transition: opacity .5s var(--ease);
}
.k-yt:hover img { opacity: .68; }
.k-yt-play {
  position: relative; z-index: 2; width: 76px; height: 54px; border: 0; padding: 0;
  background: rgba(0, 0, 0, .6); cursor: pointer; display: grid; place-items: center;
  transition: background .3s var(--ease);
}
.k-yt:hover .k-yt-play { background: var(--gold); }
.k-yt-play svg { width: 20px; height: 22px; }
.k-yt-play path { fill: var(--fg); transition: fill .3s var(--ease); }
.k-yt:hover .k-yt-play path { fill: #0A0700; }
.k-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.k-listen { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.k-listen a {
  text-decoration: none; font-size: .85rem; color: var(--fg-2);
  border: 1px solid var(--rule-lift); padding: .5rem 1rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.k-listen a:hover { border-color: var(--fg-2); color: var(--fg); }

/* the same document treatment as the essay, holding the written reflection */
.k-doc--article { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 52rem; }
.k-doc--article > .k-article { max-width: none; }
.k-doc--article > .k-article > * { max-width: 66ch; }
.k-doc--article > .k-article > blockquote.pull-quote { max-width: none; }

.k-article { max-width: 66ch; }
.k-article p { margin-bottom: 1.35em; }
.k-article blockquote.ep-quote {
  margin: 2.2rem 0; padding: 0 0 0 clamp(1rem, 2.5vw, 1.8rem);
  border-left: 1px solid var(--rule-lift);
  font-style: italic; font-weight: 300; color: var(--fg);
  font-size: clamp(1.08rem, 1.6vw, 1.26rem); line-height: 1.45;
}
.k-article blockquote.pull-quote {
  margin: clamp(3rem, 6vw, 4.5rem) 0; padding: 0; border: 0;
  font-style: italic; font-weight: 100; color: var(--fg);
  font-size: clamp(1.45rem, 3.2vw, 2.3rem); line-height: 1.26; letter-spacing: -.018em;
}

.k-guest-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (min-width: 780px) { .k-guest-grid { grid-template-columns: 190px 1fr; } }
.k-guest-figure { position: relative; width: 190px; aspect-ratio: 1.155; }
.k-guest-figure .k-voice-portrait { filter: none; opacity: 1; }
.k-guest-figure .k-voice-ring { inset: 0; opacity: .65; }
.k-guest-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }

.k-notes { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 780px) { .k-notes { grid-template-columns: 1fr 1fr; } }
.k-notes ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.k-notes li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.k-notes a { text-decoration: none; color: var(--fg-2); transition: color .25s var(--ease); }
.k-notes a:hover { color: var(--fg); }

.k-chapters { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 52ch; }
.k-chapters li { border-bottom: 1px solid var(--rule); }
.k-chapters a {
  display: flex; gap: 1.2rem; padding: .7rem 0; text-decoration: none;
  color: var(--fg-2); transition: color .25s var(--ease);
}
.k-chapters a:hover { color: var(--fg); }
.k-chapters time { color: var(--fg-3); font-variant-numeric: tabular-nums; flex: none; }

.k-share { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.k-share a, .k-share button {
  font: inherit; font-size: .85rem; text-decoration: none; color: var(--fg-2);
  background: transparent; border: 1px solid var(--rule-lift); padding: .5rem 1rem;
  cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease);
}
.k-share a:hover, .k-share button:hover { border-color: var(--fg-2); color: var(--fg); }

.k-pager {
  display: grid; gap: 1.5rem; border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 720px) { .k-pager { grid-template-columns: 1fr 1fr; } }
.k-pager a { text-decoration: none; display: block; }
.k-pager .dir {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg-3); display: block;
}
.k-pager .name {
  display: block; margin-top: .5rem; font-size: 1.15rem; font-weight: 300;
  color: var(--fg); transition: color .25s var(--ease);
}
.k-pager a:hover .name { color: #fff; }
.k-pager .k-next { text-align: right; }
@media (max-width: 719px) { .k-pager .k-next { text-align: left; } }

details.k-transcript { border-block: 1px solid var(--rule); }
details.k-transcript summary {
  padding: 1.3rem 0; cursor: pointer; list-style: none; color: var(--fg);
  font-size: 1.02rem; font-weight: 300;
}
details.k-transcript summary::-webkit-details-marker { display: none; }
details.k-transcript[open] summary { border-bottom: 1px solid var(--rule); }
details.k-transcript .k-article { padding-block: 1.6rem; }