/* Klver AI, one evening: page styles. The engine's CSS is mechanism only;
   everything visual lives here. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/sora.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jbmono.woff2") format("woff2"); }

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Klver brand: ink, paper, one indigo. */
  --ground: #0A0B12;
  --surface: #12141F;
  --ink: #F4F2EC;
  --ink-soft: color-mix(in srgb, var(--sw-ground-ink, var(--ink)) 76%, var(--sw-ground, var(--ground)));
  --accent: #4F46E5;
  --accent-ink: #FFFFFF;
  --accent-hover: #3F37C9;
  --accent-bright: #8B85FF;
  --accent-soft: #CFCBFF;     /* small accent text over imagery */
  /* The How section is paper on a dark page. Its block, and the header while over it,
     redeclare these three so every derived colour follows. */
  --ground-now: var(--ground);
  --ink-now: var(--ink);
  --accent-now: color-mix(in srgb, var(--accent) 65%, var(--ink-now));
  --line: color-mix(in srgb, var(--ink-now) 16%, transparent);
  /* The documents on the desk are paper. */
  --paper: #F4F2EC;
  --paper-ink: #15161D;
  --paper-soft: #454652;
  --paper-accent: #3F37C9;

  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.25rem + 1.5vw, 2.6rem);
  --step-3: clamp(2.1rem, 1.5rem + 2.8vw, 4.2rem);
  --step-4: clamp(2.6rem, 1.5rem + 4.6vw, 6.4rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 12vw, 176px);
  --gutter: clamp(20px, 5vw, 72px);
  /* Wide screens: the header and the pinned slide keep to the same 1440px column as .wrap,
     so the list and the film stay near each other instead of at the screen's edges. */
  --stage-left: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  --measure: 60ch;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sw-ground, var(--ground));
  color: var(--sw-ground-ink, var(--ink));
  font: 400 var(--step-0)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.06; letter-spacing: -0.028em; }
h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
h2 + p, h3 + p { margin-top: var(--s-4); }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s-4); border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none;
}
.skip:focus { top: var(--s-4); }
.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }

.kicker {
  font: 500 0.78rem/1.4 var(--font-mono);
  /* A halo, like labels on a map: small type over photographs stays readable. */
  text-shadow: 0 0 10px rgba(10, 11, 18, 0.95), 0 0 22px rgba(10, 11, 18, 0.8);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-soft);
}

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 var(--s-6); border: 1px solid transparent; border-radius: 999px;   /* the border shows only in forced-colours mode */
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 1rem; text-decoration: none; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(79, 70, 229, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.button-small { min-height: 44px; padding: 0 var(--s-5); font-size: 0.9rem; }
.button-large { min-height: 60px; padding: 0 var(--s-7); font-size: 1.08rem; }

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--stage-left) var(--s-7);
  color: var(--ink-now);
  background: linear-gradient(color-mix(in srgb, var(--ground-now) 82%, transparent) 45%, transparent);
  pointer-events: none;
}
/* Over the paper section the header takes paper's colours (page.js sets the class). */
html.nav-paper .nav { --ground-now: var(--paper); --ink-now: var(--paper-ink); --accent-now: color-mix(in srgb, var(--accent) 65%, var(--paper-ink)); }
.nav :is(a, button) { pointer-events: auto; }
.brand { display: inline-flex; align-items: baseline; min-height: 44px; align-items: center; text-decoration: none; font-weight: 600; font-size: 22px; letter-spacing: -0.04em; line-height: 1; }
.brand svg { margin-right: -3px; transform: translateY(-1px); }
.brand .spark { fill: color-mix(in srgb, var(--accent) 60%, var(--ink-now)); }
.brand-ai { margin-left: 0.28em; font-weight: 500; color: var(--accent-now); }
/* Two ways in from the top: a quick question by email, or the call. */
.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.nav-short { display: none; }
.button-quiet {
  gap: var(--s-2); background: color-mix(in srgb, var(--ink-now) 7%, transparent); color: var(--ink-now);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink-now) 34%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.button-quiet:hover { background: color-mix(in srgb, var(--ink-now) 14%, transparent); }
/* One indigo button per screen: the header's waits until the hero's own has scrolled away
   (page.js). It folds shut rather than vanishing, so the Ask control slides, never jumps. */
.nav .js-book { max-width: 320px; transition: opacity 0.3s var(--ease-out), visibility 0.3s, max-width 0.3s var(--ease-out), padding 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
html.nav-hero .nav .js-book { opacity: 0; visibility: hidden; max-width: 0; padding-inline: 0; margin-left: calc(-1 * var(--s-3)); overflow: hidden; }
/* Until the engine has had its first frame, the list and the film stay out of sight, so a
   slow connection never shows the whole opening piled up. page.js adds sw-ready. */
html.sw-on:not(.sw-ready) :is(.copy-week, .film) { opacity: 0; }
button.button { font-family: inherit; cursor: pointer; }
.link-button {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em;
  padding-block: 10px; margin-block: -10px;   /* a finger-sized target without moving the line */
}
/* Asking needs page.js; without it the close line offers the phone only. */
.no-js-line { display: none; }
html:not(.js) :is(.js-ask, .js-ask-line) { display: none; }
html:not(.js) .no-js-line { display: inline; }

/* ---------------------------------------------------------------- panels -- */
/* Native dialogs over the page, light like the sample documents: paper panels
   over the dimmed evening. The page underneath stops scrolling while one is open. */
html.panel-open { overflow: hidden; }
.panel {
  width: min(100% - 2 * var(--s-4), 600px); max-width: none; max-height: calc(100dvh - 2 * var(--s-4));
  padding: 0; border: 1px solid rgba(21, 22, 29, 0.08); border-radius: 22px;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  overscroll-behavior: contain; overflow: auto;
}
.panel-book { width: min(100% - 2 * var(--s-4), 880px); }
.panel::backdrop { background: rgba(6, 7, 12, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.panel[open] { animation: panel-in 0.28s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .panel[open] { animation: none; } }
.panel :focus-visible { outline-color: var(--accent); }
.panel-in { position: relative; padding: var(--s-6); }
.panel .kicker { color: var(--paper-accent); text-shadow: none; }
.panel h2 { margin-top: var(--s-3); padding-right: var(--s-7); font-size: var(--step-2); color: var(--paper-ink); }
.panel-lede { margin-top: var(--s-3); font-size: 1rem; color: var(--paper-soft); }
.panel-close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 999px; background: rgba(21, 22, 29, 0.06); color: var(--paper-ink); cursor: pointer;
}
.panel-close:hover { background: rgba(21, 22, 29, 0.12); }
.panel .button-quiet {
  background: rgba(21, 22, 29, 0.04); color: var(--paper-ink);
  box-shadow: inset 0 0 0 1px rgba(21, 22, 29, 0.22); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.panel .button-quiet:hover { background: rgba(21, 22, 29, 0.09); }

/* Book: the booking calendar, a white card on the paper. Cal.com sizes its own
   frame to the calendar; the card shrinks to fit and scrolls only if it's taller. */
.book-frame {
  position: relative; margin-top: var(--s-5);
  max-height: max(260px, min(720px, 100dvh - 220px)); min-height: 160px;
  border-radius: 14px; overflow-y: auto; overscroll-behavior: contain;
  background: #FFFFFF; color: var(--paper-soft); box-shadow: inset 0 0 0 1px #E3DFD6;
}
.book-frame iframe { display: block; width: 100%; border: 0; }
.book-wait { position: absolute; inset: 0; display: grid; place-items: center; max-width: none; font-size: 0.95rem; }
.book-empty { position: absolute; inset: 0; background: #FFFFFF; display: grid; place-content: center; gap: var(--s-2); padding: var(--s-6); text-align: center; color: var(--paper-ink); }
.book-empty p { margin-inline: auto; max-width: 42ch; font-size: 1rem; }
.book-empty .book-empty-tag { font: 500 0.78rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-accent); }
.book-alt { margin-top: var(--s-4); max-width: none; font-size: 0.95rem; color: var(--paper-soft); }

/* Ask: three fields, then a thank-you in place of the form. */
.ask-form { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.ask-form[hidden], .ask-done[hidden], .is-done .panel-lede { display: none; }
.field { display: grid; gap: var(--s-2); font-size: 0.95rem; font-weight: 500; color: var(--paper-ink); }
.field em { font-style: normal; font-weight: 400; color: var(--paper-soft); }
.field :is(input, textarea) {
  width: 100%; padding: 12px 14px;
  border: 1px solid #CFCAC0; border-radius: 12px;
  background: #FFFFFF; color: var(--paper-ink); font: 400 1rem/1.5 var(--font-text);
}
.field textarea { min-height: 120px; resize: vertical; }
.field :is(input, textarea)::placeholder { color: #86858F; }
.field :is(input, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.ask-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-2); }
.ask-send .button[disabled] { opacity: 0.6; cursor: progress; }
.ask-status { font-size: 0.95rem; color: var(--paper-soft); }
.hp { position: absolute; left: -9999px; }
.ask-done { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-6); }
.ask-done h3 { color: var(--paper-ink); }
.ask-done p { font-size: 1rem; color: var(--paper-soft); }
.ask-done strong { color: var(--paper-ink); font-weight: 600; }
.ask-done .button { margin-top: var(--s-3); }

/* ------------------------------------------------- the evening (one pin) -- */
.evening { --film: min(38vw, 60vh, 600px); }
.evening .sw-stage { position: relative; overflow: hidden; background: var(--ground); }
.view, .view-in, .drops-fade, .shade, .shade-film { position: absolute; inset: 0; }
.view { inset: -2%; }
.plate { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.fog { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.drops-fade { inset: -6%; mix-blend-mode: screen; opacity: 0.55; pointer-events: none; }
.drops { position: absolute; inset: 0; background: url("media/hero-droplets.jpg") center / cover no-repeat; }
/* A local scrim on the side the copy sits on; the rest of the frame stays clean. */
.shade {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 11, 18, 0.72) 0%, rgba(10, 11, 18, 0.58) 30%, rgba(10, 11, 18, 0.26) 50%, rgba(10, 11, 18, 0) 66%),
    linear-gradient(rgba(10, 11, 18, 0.35), rgba(10, 11, 18, 0) 22%);
}
/* Behind the film the window goes to the page's own dark, so the film has no edge to see. */
.shade-film {
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 11, 18, 0) 0%, rgba(10, 11, 18, 0.5) 27%, var(--ground) 44%);
}

.copy { position: absolute; left: var(--stage-left); z-index: 3; width: min(64rem, calc(100% - 2 * var(--stage-left))); }
/* Anchored to the bottom, but never under the header: the headline is sized so its first
   line holds on one line from 1280px up, and the block can't grow past the screen. */
.copy-open { bottom: clamp(32px, 6vh, 96px); max-height: calc(100vh - 120px); }
.copy-open h1 { font-size: clamp(2.6rem, 1rem + 4vw, 4.6rem); }
.copy-open .kicker { margin-bottom: var(--s-5); }
.h1-2 { display: block; color: #C9C6D6; }
.lede { margin-top: var(--s-5); font-size: var(--step-1); line-height: 1.45; color: #E4E1EA; max-width: 36ch; }
.open-action { margin-top: var(--s-6); }

/* What eats the week, on the left; the film of three jobs done, on the right. The list's
   title hangs just above the film's top edge, so the two share one line, not one band.
   Each line is one chapter of the film and plays it; the chapter playing is lit. */
.copy-week { top: max(96px, calc(50% - var(--film) / 2 - 44px)); width: min(40vw, 34rem); }
/* This box only positions items that fade in; the empty box must not take clicks. */
.evening .copy-week { pointer-events: none; }
.evening .copy-week .film-tab { pointer-events: auto; }
.week-title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); color: var(--ink); letter-spacing: -0.02em; max-width: 14ch; }
.week { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-5); }
.week .film-tab {
  display: grid; gap: var(--s-2); width: 100%; max-width: 24ch; padding: 0 0 var(--s-2); border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.week-line { display: block; font-size: clamp(1.15rem, 0.85rem + 1.1vw, 1.85rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.02em; color: #D8D5E0; }
.week-see { display: inline-flex; align-items: center; gap: 6px; font: 500 0.78rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #B9B7C3; }
.week-more { margin-top: var(--s-4); max-width: none; font: 500 0.78rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #B9B7C3; }
.film-tab-go { flex: none; width: 12px; height: 12px; opacity: 0.7; }
.week .film-tab[aria-current="true"] .week-see { color: var(--accent-soft); }
.week .film-tab:hover .week-line, .week .film-tab[aria-current="true"] .week-line { color: var(--ink); }
.week .film-tab[aria-current="true"] .film-tab-go { opacity: 1; }
.film-bar { display: block; height: 2px; border-radius: 2px; background: rgba(244, 242, 236, 0.22); border-bottom: 1px solid transparent; overflow: hidden; }
.film-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); }

/* The film: a little smaller than the page's own headline, so its captions never outweigh it. */
.film { position: absolute; z-index: 3; right: var(--stage-left); top: calc(50% - var(--film) / 2); width: var(--film); }
.film-kicker { display: none; margin: 0 5% var(--s-2); max-width: none; font: 500 0.78rem/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #B9B7C3; }
.film video {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: none;
  /* Feathered, so no box shows even if a decoder shifts the dark by a level or two. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
/* Under the film: pause, and the one line the house rules insist on. */
.film-controls { position: relative; display: flex; align-items: center; gap: var(--s-4); margin: -3.5% 6% 0; }
.film-pp {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(244, 242, 236, 0.07); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(244, 242, 236, 0.34);
}
.film-pp:hover { background: rgba(244, 242, 236, 0.14); }
.film-play, .film-pp[aria-pressed="true"] .film-pause { display: none; }
.film-pp[aria-pressed="true"] .film-play { display: block; }
.film-note { margin: 0; max-width: none; font: 500 0.78rem/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #B9B7C3; }
.film-note span { white-space: nowrap; }          /* each part wraps as a unit, so no orphaned word */
.film-note-ill::before { content: "· "; }
@media (forced-colors: active) {
  .film video { -webkit-mask: none; mask: none; outline: 1px solid CanvasText; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* No engine: the evening reads as a short document. */
:is(html:not(.sw-on), html.flat) .evening .sw-stage { height: auto; overflow: visible; display: flex; flex-direction: column; gap: var(--s-7); padding-block: 96px var(--s-8); }
:is(html:not(.sw-on), html.flat) .evening .view { position: relative; inset: auto; height: 60svh; opacity: 1; }
:is(html:not(.sw-on), html.flat) .evening .view-in { inset: 0; }
:is(html:not(.sw-on), html.flat) .evening :is(.drops-fade, .shade, .shade-film, .fog) { display: none; }
:is(html:not(.sw-on), html.flat) .evening :is(.copy, .film) { position: relative; inset: auto; transform: none; translate: none; width: auto; margin-inline: var(--gutter); display: block; }
:is(html:not(.sw-on), html.flat) .film { max-width: 640px; }
:is(html:not(.sw-on), html.flat) .film-kicker { position: static; margin: 0 0 var(--s-3); }

/* ---------------------------------------------------------- how it works -- */
/* Daylight after the dark window: a sheet of paper with its own background and inks.
   Left column: the claim, then the four won'ts under it at body size. Right column: one
   numbered path, with the button inside step 01. */
.how {
  position: relative; overflow: clip; padding-block: clamp(80px, 9vw, 136px);
  min-height: calc(100svh - 72px); display: grid; align-content: center;   /* fills the last screen on tall displays */
  --ground-now: var(--paper); --ink-now: var(--paper-ink);
  --ink-soft: color-mix(in srgb, var(--paper-ink) 76%, var(--paper));
  --accent-now: color-mix(in srgb, var(--accent) 65%, var(--ink-now));
  --line: color-mix(in srgb, var(--ink-now) 16%, transparent);
  background: var(--paper); color: var(--ink-now);
}
.how-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s-6); row-gap: 0; align-items: start; }
.how-lead { grid-column: 1 / span 5; grid-row: 1; }
.how-lead h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.how-lead p { margin-top: var(--s-5); font-size: 1.12rem; line-height: 1.45; color: var(--ink-soft); max-width: 30ch; }
.how-steps { grid-column: 7 / -1; grid-row: 1 / span 2; }
.how .kicker { color: var(--accent-now); text-shadow: none; }

.stance { grid-column: 1 / span 5; grid-row: 2; margin-top: clamp(40px, 5vw, 64px); display: grid; gap: var(--s-4); max-width: 28rem; }
.stance p { font-size: 1.12rem; line-height: 1.4; letter-spacing: -0.012em; font-weight: 500; }
.stance p span { color: var(--ink-soft); font-weight: 400; }

.path { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.path li { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.path-n { font: 500 0.78rem/1.6 var(--font-mono); letter-spacing: 0.06em; color: var(--accent-now); padding-top: 0.3rem; }
.path h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.path h3 small { font: 500 0.78rem/1.6 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.path p { margin-top: var(--s-2); font-size: 1rem; line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
.path-action { margin-top: var(--s-4); }
.path-end { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }
.path-end a, .path-end .link-button { color: var(--ink-now); }
.path-end a, .foot a { padding-block: 10px; margin-block: -10px; }   /* finger-sized targets without moving the line */
@media (max-width: 1000px) {
  .how-grid { grid-template-rows: none; }
  .how-lead, .how-steps, .stance { grid-column: 1 / -1; grid-row: auto; }
  .stance { order: 1; margin-top: var(--s-6); max-width: none; }
  .how-steps { order: 2; margin-top: var(--s-8); }
}

.foot { padding-block: var(--s-5); font-size: 0.95rem; --ink-now: var(--paper-ink); --line: color-mix(in srgb, var(--paper-ink) 16%, transparent); background: var(--paper); color: color-mix(in srgb, var(--paper-ink) 70%, var(--paper)); border-top: 1px solid var(--line); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); }

/* ---------------------------------------------------------------- phones -- */
@media (max-width: 700px) {
  .nav { padding-bottom: var(--s-6); }
  .nav .button-small { padding: 0 var(--s-4); font-size: 0.82rem; }
  .nav-actions { gap: var(--s-2); }
  .nav .nav-long { display: none; }
  .nav .nav-short { display: inline; }
  .nav .button-quiet { width: 44px; padding: 0; }
  /* Panels become full-screen sheets. The booking sheet goes straight to the dates. */
  .panel, .panel-book { width: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .panel-in { min-height: 100%; padding: var(--s-5) var(--s-4) var(--s-6); }
  .panel h2 { font-size: 1.7rem; }
  .panel-book .panel-lede { display: none; }
  .book-frame { max-height: calc(100dvh - 180px); margin-inline: calc(-1 * var(--s-2)); }
  .field-row { grid-template-columns: 1fr; }
  .ask-send .button { width: 100%; }
  .brand { font-size: 20px; }
  .shade {
    background:
      linear-gradient(rgba(10, 11, 18, 0.2) 0%, rgba(10, 11, 18, 0) 25%, rgba(10, 11, 18, 0.5) 48%, rgba(10, 11, 18, 0.72) 78%);
  }
  .copy-open { bottom: 40px; }
  .lede { font-size: 1.05rem; }
  .plate { object-position: 42% 60%; }
  /* The film on top with the window dark behind it; the three lines under it, over glass
     that clears as on a desktop. */
  .evening { --film: min(100%, 34svh); }
  .shade-film { background: linear-gradient(var(--ground) 0%, var(--ground) 50%, rgba(10, 11, 18, 0.45) 62%); }
  .film { left: 0; right: 0; top: 104px; width: var(--film); margin-inline: auto; display: flex; flex-direction: column; }
  .film video { order: 1; }
  .film-controls { order: 2; margin: -4% 5% 0; gap: var(--s-3); align-items: center; }
  .film-kicker { display: block; order: 0; font-size: 0.72rem; }
  .film-note { font-size: 0.72rem; }
  .film-note-what { display: none; }
  .film-note-ill::before { content: none; }
  .copy-week { top: calc(104px + min(100vw, 34svh) + 92px); width: calc(100% - 2 * var(--gutter)); }
  .week-title { font-size: 1.6rem; max-width: none; }
  .week { gap: var(--s-3); margin-top: var(--s-4); }
  .week .film-tab { max-width: none; gap: 4px; padding-bottom: 6px; }
  .week-line { font-size: 1.12rem; }

  .how { padding-top: 104px; }
  .path-action .button { width: 100%; }
  .nav { background: linear-gradient(color-mix(in srgb, var(--ground-now) 94%, transparent) 60%, transparent); }
  .copy-open .kicker { font-size: 0.78rem; }
  .path-end, .foot { font-size: 1rem; }
}
/* Short phones (iPhone SE class): a smaller film, no label above it, a tighter list. */
@media (max-width: 700px) and (max-height: 720px) {
  .evening { --film: min(100%, 27svh); }
  .film-kicker { display: none; }
  .copy-week { top: calc(104px + var(--film) + 64px); }
  .week { gap: var(--s-2); }
  .week-line { font-size: 1.05rem; }
  .week-more { margin-top: var(--s-3); }
}
/* The smallest phones: the logo and both header buttons still fit on one row. */
@media (max-width: 359px) {
  .nav { gap: var(--s-2); padding-inline: var(--s-4); }
  .brand { flex-shrink: 0; font-size: 18px; }
  .nav .button-small:not(.button-quiet) { padding: 0 var(--s-3); font-size: 0.78rem; }
  .open-action .button { padding: 0 var(--s-4); font-size: 0.95rem; }
}