/* ==========================================================================
   Sly Reader — sly-reader.com

   Brand palette: TEAL · CHARCOAL · BLACK · WHITE
   Written in OKLCH so lightness steps look evenly spaced to the eye.

   Neutrals carry a trace of the teal hue (chroma 0.005–0.014 at hue 200)
   rather than being flat grey. It reads as a considered charcoal instead of
   a default one, and it keeps black, charcoal and white feeling like one
   family with the accent rather than three unrelated values.

   To retune the whole site, change --accent below. Everything follows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

/* ---- Two themes, one token set --------------------------------------------

   Every color is written as light-dark(LIGHT, DARK). Which half applies is
   decided by `color-scheme` on the root element:

     no data-theme stamp   -> `light dark` -> the visitor's OS preference wins
     data-theme="light"    -> `light`      -> light, whatever the OS says
     data-theme="dark"     -> `dark`       -> dark, whatever the OS says

   So the toggle sets one attribute and the browser resolves the rest. There is
   no second copy of the palette to keep in sync, and the page is still correct
   with JavaScript switched off.

   DARK  — black and charcoal ground, white type, teal accent.
   LIGHT — the inverse rather than a lightened copy: teal becomes the base and
           runs through every surface, charcoal takes over type and accent,
           white appears only as the lift on raised cards. Kept pale on
           purpose; a saturated teal ground is punishing to read against.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* GROUND — teal (light) / black → charcoal (dark), ascending in elevation */
  --ink: light-dark(oklch(96% 0.021 195), oklch(12% 0.006 200));
  --ink-sunken: light-dark(oklch(92% 0.032 195), oklch(9% 0.005 200));
  --ink-raised: light-dark(oklch(99.2% 0.008 195), oklch(17% 0.008 200));
  --surface: light-dark(oklch(94% 0.026 195), oklch(21% 0.01 200));
  --surface-hover: light-dark(oklch(90% 0.036 195), oklch(25% 0.012 200));
  --line: light-dark(oklch(85% 0.034 195), oklch(30% 0.012 200));
  --line-strong: light-dark(oklch(66% 0.046 195), oklch(41% 0.014 200));

  /* TYPE — charcoal (light) / white (dark), stepped down for hierarchy */
  --text: light-dark(oklch(24% 0.016 200), oklch(97% 0.003 200));
  --text-muted: light-dark(oklch(38% 0.018 200), oklch(77% 0.008 200));
  --text-faint: light-dark(oklch(45% 0.016 200), oklch(63% 0.01 200));

  /* ACCENT — charcoal (light) / teal (dark). One accent, never two. */
  --accent: light-dark(oklch(28% 0.022 200), oklch(74% 0.115 195));
  --accent-bright: light-dark(oklch(18% 0.018 200), oklch(82% 0.1 197));
  --accent-deep: light-dark(oklch(43% 0.024 200), oklch(56% 0.105 197));
  --accent-glow: light-dark(oklch(28% 0.022 200 / 0.2), oklch(74% 0.115 195 / 0.26));
  --on-accent: light-dark(oklch(97% 0.014 195), oklch(14% 0.014 200));

  /* One exception to charcoal-as-accent: the emphasised word in the hero.
     It is the brand's single typographic moment, and charcoal-on-charcoal
     erases it. Teal in both themes — deepened in light so it separates from
     both the pale ground and the charcoal headline beside it. */
  --emphasis: light-dark(oklch(48% 0.118 196), oklch(74% 0.115 195));

  /* TRANSLUCENT LAYERS — tokenised so both themes stay legible */
  --scrim: light-dark(oklch(96% 0.021 195 / 0.86), oklch(12% 0.006 200 / 0.84));
  --scrim-solid: light-dark(oklch(96% 0.021 195 / 0.98), oklch(12% 0.006 200 / 0.97));
  --hairline: light-dark(oklch(24% 0.016 200 / 0.22), oklch(97% 0.003 200 / 0.26));
  --sheen: light-dark(oklch(24% 0.016 200 / 0.045), oklch(97% 0.003 200 / 0.025));
  --sheen-strong: light-dark(oklch(24% 0.016 200 / 0.07), oklch(97% 0.003 200 / 0.08));

  /* These two sit over video thumbnails, so they stay dark in both themes —
     a light veil over a photograph reads as a rendering fault. */
  --veil: oklch(15% 0.01 200 / 0.38);
  --veil-strong: oklch(12% 0.008 200 / 0.88);

  /* ATMOSPHERIC WASH behind the page and inside feature panels */
  --wash-1: light-dark(oklch(68% 0.105 195 / 0.24), oklch(74% 0.115 195 / 0.13));
  --wash-2: light-dark(oklch(60% 0.09 205 / 0.16), oklch(62% 0.09 205 / 0.1));
  --wash-3: light-dark(oklch(99% 0.01 195 / 0.5), oklch(90% 0.02 200 / 0.05));
  --wash-panel-1: light-dark(oklch(64% 0.11 195 / 0.45), oklch(74% 0.115 195 / 0.22));
  --wash-panel-2: light-dark(oklch(45% 0.075 200 / 0.32), oklch(56% 0.105 197 / 0.2));
  --wash-band: light-dark(oklch(64% 0.11 195 / 0.3), oklch(56% 0.105 197 / 0.2));

  /* Fluid type scale — ratio ~1.28, five steps plus display */
  --text-xs: clamp(0.76rem, 0.74rem + 0.1vw, 0.82rem);
  --text-sm: clamp(0.88rem, 0.85rem + 0.14vw, 0.96rem);
  --text-base: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --text-lg: clamp(1.2rem, 1.12rem + 0.38vw, 1.44rem);
  --text-xl: clamp(1.52rem, 1.36rem + 0.78vw, 2.05rem);
  --text-2xl: clamp(2rem, 1.66rem + 1.66vw, 3.05rem);
  --text-3xl: clamp(2.7rem, 1.95rem + 3.6vw, 5.2rem);
  --text-4xl: clamp(2.9rem, 1.9rem + 5vw, 6.4rem);

  /* Spacing — 4pt base, semantic names */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3rem, 2.2rem + 3.4vw, 5rem);
  --space-3xl: clamp(4.5rem, 3rem + 5.5vw, 7.5rem);

  /* Measure */
  --measure: 66ch;
  --measure-tight: 48ch;
  --shell: 78rem;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3.5rem);

  /* Radii — restrained. Nothing is a pill except the pills. */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* Motion — exponential ease-out, no bounce */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 480ms;
  --dur-enter: 720ms;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, "Helvetica Neue", sans-serif;
}

/* The toggle writes one of these onto <html>. Everything else follows. */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Ease the swap so it reads as a change of light rather than a hard cut.
   Skipped for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root.theme-animating,
  :root.theme-animating *,
  :root.theme-animating *::before,
  :root.theme-animating *::after {
    transition:
      background-color 300ms var(--ease-out-soft),
      border-color 300ms var(--ease-out-soft),
      color 220ms var(--ease-out-soft) !important;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

body {
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A fixed atmospheric wash. In dark it reads as teal light raking across a
   black room; in light it deepens the teal ground toward the corners and lifts
   the middle. Both stay low enough in alpha that the ground still reads as one
   color rather than as a gradient. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 12% -8%, var(--wash-1), transparent 62%),
    radial-gradient(ellipse 70% 50% at 88% 4%, var(--wash-2), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 108%, var(--wash-3), transparent 65%);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-variation-settings:
    "SOFT" 22,
    "WONK" 1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--accent);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-3xl);
  position: relative;
}

.section--tight {
  padding-block: var(--space-2xl);
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  opacity: 0.6;
}

/* Section label — small, tracked, with a leading tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.section-title {
  font-size: var(--text-2xl);
  max-width: 20ch;
}

.section-lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: var(--measure);
  margin-top: var(--space-md);
}

.section-head {
  margin-bottom: var(--space-2xl);
}

/* Header row that puts a title and a link on the same baseline */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   4. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.btn:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  box-shadow: 0 8px 30px -12px var(--accent-glow);
}
.btn--primary:hover {
  box-shadow: 0 14px 38px -12px var(--accent-glow);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  --btn-bg: var(--surface-hover);
  border-color: var(--accent);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
}

.btn .icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* Text link with an underline that grows from the left */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--accent);
  position: relative;
  padding-bottom: 2px;
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover::after {
  transform: scaleX(1);
}
.link-arrow .icon {
  width: 0.9em;
  height: 0.9em;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover .icon {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   5. Site header
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    backdrop-filter var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.masthead[data-scrolled="true"] {
  background: var(--scrim);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 4.5rem;
}

/* The tools group sits outside <nav> in the DOM so it stays reachable when the
   nav collapses on mobile; order puts it last visually at every width. */
.brand {
  order: 1;
  margin-right: auto;
}
.nav {
  order: 2;
}
.masthead__tools {
  order: 3;
}

/* The lockup mirrors the supplied logo: fox above, wordmark in Yellowtail.
   Set side by side here because a stacked lockup is wrong for a header bar.
   The wordmark is live text rather than the image so it recolors per theme
   and stays crisp at any size — Yellowtail is the face used in the artwork. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.brand__mark {
  width: auto;
  height: 2.2rem;
  transition: transform var(--dur-slow) var(--ease-out);
}

.brand__word {
  font-family: "Yellowtail", "Brush Script MT", cursive;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.01em;
  /* Yellowtail sits high in its em box; nudge it onto the fox's optical center */
  transform: translateY(0.09em);
  color: var(--text);
}

.brand:hover .brand__mark {
  transform: rotate(-7deg) scale(1.06);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  padding-block: 0.4rem;
  transition: color var(--dur) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover {
  color: var(--text);
}
.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__link[aria-current="true"] {
  color: var(--text);
}

/* Mobile menu toggle — two lines that cross */
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 1.1rem;
  height: 0.7rem;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur-fast) linear;
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(0.345rem) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  transform: translateY(-0.345rem) rotate(-45deg);
}

/* Theme toggle. Lives beside the menu button so it stays reachable at every
   width instead of hiding inside the collapsed mobile menu. */
.masthead__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.theme-toggle {
  display: none; /* revealed by JS — see :root[data-theme] below */
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

/* Only shown once JavaScript has stamped a theme. Without JS there is nothing
   for the button to do, so it never appears. */
:root[data-theme] .theme-toggle {
  display: inline-grid;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface-hover);
}

.theme-toggle .icon {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform var(--dur-slow) var(--ease-out);
}

.theme-toggle:hover .icon {
  transform: rotate(18deg);
}

/* Show the destination, not the current state: in dark you see a sun to go
   toward, in light a moon. */
.theme-toggle [data-icon="moon"] {
  display: none;
}
:root[data-theme="light"] .theme-toggle [data-icon="moon"] {
  display: block;
}
:root[data-theme="light"] .theme-toggle [data-icon="sun"] {
  display: none;
}

@media (max-width: 56rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md) var(--gutter) var(--space-lg);
    background: var(--scrim-solid);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--dur-slow) var(--ease-out),
      opacity var(--dur) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }

  .nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding-block: var(--space-sm);
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--line);
  }

  .nav__link::after {
    display: none;
  }

  .nav .btn {
    margin-top: var(--space-md);
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(100svh, 60rem);
  display: flex;
  align-items: center;
  padding-block: 9rem var(--space-2xl);
  overflow: hidden;
}

/* Oversized watermark fox, bled off the right edge */
.hero__watermark {
  position: absolute;
  top: 50%;
  right: clamp(-6rem, -4vw, -1rem);
  translate: 0 -50%;
  /* Sized by height, not width — the real mark is portrait, so a width-based
     rule scales it far past the viewport. */
  height: min(78vh, 40rem);
  width: auto;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.hero__eyebrow .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.hero__title {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.038em;
  font-variation-settings:
    "SOFT" 18,
    "WONK" 1;
  max-width: 15ch;
}

.hero__title em {
  font-style: italic;
  color: var(--emphasis);
  font-variation-settings:
    "SOFT" 60,
    "WONK" 1;
}

.hero__lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: var(--space-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
  max-width: 46rem;
}

.hero__meta div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero__meta dt {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}

.hero__meta dd {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. Pillars — the three review criteria
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pillar {
  background: var(--ink-raised);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: background-color var(--dur) var(--ease-out);
}

.pillar:hover {
  background: var(--surface);
}

.pillar__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pillar__title {
  font-size: var(--text-lg);
}

.pillar__body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   8. Video feed
   -------------------------------------------------------------------------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-lg);
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease-out);
}

.video-card:hover {
  transform: translateY(-4px);
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease-out);
}

.video-card:hover .video-card__thumb {
  border-color: var(--accent);
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur) linear;
}

.video-card:hover .video-card__thumb img {
  transform: scale(1.05);
}

/* Play glyph that fades up on hover */
.video-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--veil);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.video-card:hover .video-card__play,
.video-card:focus-within .video-card__play {
  opacity: 1;
}

.video-card__play span {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transform: scale(0.85);
  transition: transform var(--dur) var(--ease-out);
}

.video-card:hover .video-card__play span {
  transform: scale(1);
}

.video-card__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card__date {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Loading skeletons */
.video-card--skeleton .video-card__thumb {
  border-color: var(--line);
}

.skeleton {
  background: linear-gradient(
    100deg,
    var(--surface) 30%,
    var(--surface-hover) 50%,
    var(--surface) 70%
  );
  background-size: 220% 100%;
  animation: shimmer 1.6s var(--ease-out-soft) infinite;
  border-radius: var(--radius-sm);
}

.skeleton--line {
  height: 0.85rem;
}
.skeleton--line + .skeleton--line {
  margin-top: 0.5rem;
  width: 55%;
}

@keyframes shimmer {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -60% 0;
  }
}

/* Empty / error state — teaches rather than apologizes */
.feed-fallback {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.feed-fallback__mark {
  width: 2.75rem;
  color: var(--text-faint);
}
.feed-fallback p {
  color: var(--text-muted);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 60rem) {
  .about {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Portrait slot. Replace .portrait__fill with an <img> when you have a photo. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 60% at 30% 22%, var(--wash-panel-1), transparent 65%),
    radial-gradient(ellipse 80% 70% at 78% 84%, var(--wash-panel-2), transparent 62%),
    var(--ink-raised);
  display: grid;
  place-items: center;
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent 0 11px, var(--sheen) 11px 12px);
  pointer-events: none;
}

.portrait__fill {
  width: 44%;
  height: auto;
  opacity: 0.55;
}

.portrait__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to top, var(--veil-strong), transparent);
}

.about__body > * + * {
  margin-top: var(--space-md);
}
.about__body p {
  color: var(--text-muted);
  max-width: var(--measure);
}

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.28;
  color: var(--text);
  font-variation-settings:
    "SOFT" 55,
    "WONK" 1;
  border-left: 2px solid var(--accent);
  padding-left: var(--space-md);
  margin-block: var(--space-lg);
  max-width: 26ch;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}

.tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   10. Featured series
   -------------------------------------------------------------------------- */

.series {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(115deg, var(--wash-band), transparent 52%), var(--ink-raised);
  padding: var(--space-2xl) var(--space-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: center;
}

@media (max-width: 52rem) {
  .series {
    grid-template-columns: 1fr;
  }
}

.series__watermark {
  position: absolute;
  right: -2rem;
  bottom: -4rem;
  height: 15rem;
  width: auto;
  opacity: 0.12;
  pointer-events: none;
}

.series__content {
  position: relative;
  z-index: 1;
}
.series__title {
  font-size: var(--text-xl);
}
.series__body {
  color: var(--text-muted);
  max-width: 48ch;
  margin-top: var(--space-sm);
}
.series__actions {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   11. Shop
   -------------------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (min-width: 48rem) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

.product {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-raised);
  transition:
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}

.product:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: translateY(-3px);
}

/* Garment tile — colored by the product's actual base color */
.product__tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--tile, var(--surface));
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.product__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, var(--sheen-strong), transparent 70%);
}

.product__tile img {
  width: 46%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
  position: relative;
  z-index: 1;
}

.product:hover .product__tile img {
  transform: scale(1.07) rotate(-3deg);
}

.product__meta {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.product__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.product__price {
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.product__swatches {
  display: flex;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: var(--space-2xs);
}

.product__swatches span {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   11b. Second channel — Slow Your Stroll
   --------------------------------------------------------------------------
   Deliberately lower in the page and quieter than the main video section:
   this is the side project, not the headline. It gets its own panel so it
   reads as a distinct place rather than more of the same channel.
   -------------------------------------------------------------------------- */

.second-channel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--wash-band), transparent 55%), var(--ink-raised);
}

@media (max-width: 62rem) {
  .second-channel {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-md);
  }
}

.second-channel__intro .section-title {
  max-width: 14ch;
}
.second-channel__intro .section-lede {
  font-size: var(--text-base);
}

.second-channel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Three across on wide screens, two on tablets, one on phones */
.video-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (max-width: 62rem) {
  .video-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .video-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.video-grid--compact .video-card__title {
  font-size: var(--text-sm);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* --------------------------------------------------------------------------
   12. Connect / signup
   -------------------------------------------------------------------------- */

.connect {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 60rem) {
  .connect {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.signup {
  margin-top: var(--space-lg);
}

.signup__row {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.signup__row input {
  flex: 1 1 16rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  background: var(--ink-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color var(--dur) var(--ease-out);
}

.signup__row input::placeholder {
  color: var(--text-faint);
}
.signup__row input:focus {
  border-color: var(--accent);
}

.signup__note {
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-top: var(--space-2xs);
}

.signup__status {
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
  min-height: 1.4rem;
}

.signup__status[data-tone="ok"] {
  color: var(--accent-bright);
}
.signup__status[data-tone="err"] {
  color: var(--accent-bright);
}

.social-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.social-list a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--ink-raised);
  transition: background-color var(--dur) var(--ease-out);
}

.social-list a:hover {
  background: var(--surface);
}

.social-list .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  flex: none;
}

.social-list__label {
  font-weight: 700;
  font-size: var(--text-sm);
}
.social-list__sub {
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.social-list__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.social-list__arrow {
  margin-left: auto;
  color: var(--text-faint);
  transition: transform var(--dur) var(--ease-out);
}
.social-list a:hover .social-list__arrow {
  transform: translateX(3px);
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-2xl) var(--space-xl);
  margin-top: var(--space-2xl);
  background: var(--ink-sunken);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

@media (max-width: 48rem) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

.footer__tagline {
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 34ch;
  margin-top: var(--space-sm);
}

.footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-sm);
}

.footer__col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease-out);
}

.footer__col a:hover {
  color: var(--accent);
}

.footer__base {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  align-items: center;
}

.footer__legal {
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: 68ch;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   14. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
}

[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   15. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  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;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--text-sm);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

body[data-menu-open="true"] {
  overflow: hidden;
}