/* Velvet Rope: the design system.

   The idea: a dim private room. One warm lamp on the right, satin on the bed, and you read in the shadow.

   1. Two kinds of space. "Stages" are the room itself: the darkest surface, with the satin in it. They
      are the top of every page, the home page's interlude and the closing scene at the end of a page.
      Everything you read sits on "paper", one shade lighter and perfectly still. Paper melts into a
      stage over a hand's width; there are no hard edges anywhere.
   2. The light comes from the right. In a stage the satin glows on the right and the text sits in
      shadow on the left (on phones: light at the top, text below). Text never sits on moving cloth.
   3. Every colour has one job. Amber: you can press it. Red: live, nothing else. Wine: decoration only.
      Blush: text, at three strengths (blush, soft, smoke). A brighter blush appears only on hover.
   4. Four kinds of control, always in this order of weight:
        filled amber      the main action (one per screen)
        amber outline     the alternative action
        outlined pill     choices and utilities (niches, Live now, Hide, Menu)
        amber underline   a link in text, or the quiet option
      Navigation lists (menu, footer, the guide's list) are plain text that underlines in amber on hover.
      A red light on a button or row means it opens live rooms.
   5. Lists of places look the same everywhere: a row with a title, a short note and an amber action.
      Lists of choices look the same everywhere: a heading and a line on the left, pills on the right.
   6. Calm motion. The door plays once per visit; the satin moves only while you do and then rests.
      Hover states fade in 160ms. Nothing flickers, pulses, lights up or reacts to scrolling.
   7. One spacing scale (8-point), one type scale. Containers have 4px corners; things you press are round.
*/

@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: italic; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }

/* ================================================================ 1. tokens */
:root {
  /* surfaces: the room is darkest; what you read is one step lighter; what you work with, one more */
  --room: #0F0B0B;       /* stages and the footer */
  --paper: #191213;      /* everything you read */
  --raised: #231A1B;     /* calculators, dialogs, the phone bar, a row you point at */
  --shade: 15, 11, 11;   /* --room as numbers, for the shadow over the satin */

  /* text: three strengths, each at least 5.5:1 on every surface above */
  --blush: #F3DDD3;      /* headings, body, emphasis */
  --soft: #CDB5AC;       /* secondary text */
  --smoke: #A68E86;      /* small print and labels */
  --bright: #FFF3EC;     /* hover only */

  /* action: amber means "you can press this" */
  --ember: #EBA46E;
  --ember-hi: #F6C196;
  --ink: #1F120C;        /* text on amber */

  /* status: red means live, and only live */
  --live: #FF4D63;
  --live-on-amber: #8E1323;

  /* decoration: the wine of the satin */
  --wine: #6B2231;

  /* lines */
  --line: rgba(243, 221, 211, .10);
  --line-2: rgba(243, 221, 211, .20);
  --line-3: rgba(243, 221, 211, .44);  /* borders of form controls: 3:1 */

  /* type */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-fine: 14px;
  --t-small: 16px;
  --t-body: 18px;
  --t-lede: 21px;
  --t-title: 34px;                        /* row titles, group headings */
  --t-h2: clamp(36px, 3.4vw, 48px);       /* headings inside a page */
  --t-section: clamp(42px, 4.8vw, 68px);  /* home sections and stage lines */
  --t-h1: clamp(54px, 7vw, 104px);
  --t-display: clamp(62px, 8vw, 120px);

  /* space: 8-point */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* shape */
  --r: 4px;        /* containers */
  --round: 999px;  /* things you press */

  /* motion */
  --quick: 160ms;
  --move: 260ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.05, .7, .1, 1);

  --page: min(1120px, 100% - 56px);
  --head: 72px;
  color-scheme: dark;
}

/* ================================================================ 2. base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--room); }
body {
  margin: 0; background: var(--paper); color: var(--blush);
  font: 400 var(--t-body)/1.65 var(--sans);
  font-variant-numeric: lining-nums;   /* the serif's old-style figures read badly in prices; every serif "font:" below restates this */
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::after { /* a whisper of film grain, so flat areas don't look digital */
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main { overflow-x: clip; padding-bottom: var(--s8); }
main:has(> .stage-close:last-child) { padding-bottom: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.age-pending body > :not(dialog) { pointer-events: none; } /* nothing behind the age notice can be clicked before it's confirmed */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: var(--r); }
dialog:focus, dialog:focus-visible { outline: none; }
::selection { background: rgba(235, 164, 110, .35); color: var(--bright); }
.skip { position: absolute; left: var(--s2); top: -60px; z-index: 100; background: var(--ember); color: var(--ink); padding: 10px var(--s2); border-radius: var(--round); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ================================================================ 3. type and links */
h1, h2 { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.lede { font-size: var(--t-lede); line-height: 1.5; }
.fine { font-size: var(--t-fine); line-height: 1.55; color: var(--smoke); }
.nobr { white-space: nowrap; }

/* links in text, and quiet options: amber with an underline */
.prose a:not([class]), .scene p a:not([class]), a.aff, .text-link, .btn-quiet {
  color: var(--ember); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(235, 164, 110, .5);
  text-underline-offset: 4px; transition: color var(--quick) var(--ease), text-decoration-color var(--quick) var(--ease);
}
.prose a:not([class]):hover, .scene p a:not([class]):hover, a.aff:hover, .text-link:hover, .btn-quiet:hover { color: var(--ember-hi); text-decoration-color: currentColor; }

/* navigation lists: plain text that underlines in amber when you point at it */
.foot-links a, .menu-more a {
  color: var(--soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color var(--quick) var(--ease), text-decoration-color var(--quick) var(--ease);
}
.foot-links a:hover, .menu-more a:hover { color: var(--bright); text-decoration-color: var(--ember); }

/* ================================================================ 4. controls */
.live-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }

/* filled amber: the main action. Amber outline: the alternative. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--round); border: 1.5px solid var(--ember);
  background: var(--ember); color: var(--ink); font: 600 16px/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), color var(--quick) var(--ease), transform var(--move) var(--ease);
}
.btn:hover { background: var(--ember-hi); border-color: var(--ember-hi); }
.btn:active { transform: translateY(1px); }
.btn .live-dot { background: var(--live-on-amber); }   /* on amber the live light goes deep red, so it still reads */
.btn-big { min-height: 56px; padding: 16px 32px; font-size: 17px; }
.btn-line { background: transparent; color: var(--ember); }
.btn-line:hover { background: rgba(235, 164, 110, .12); color: var(--ember-hi); }
.btn-line .live-dot { background: var(--live); }
.btn-quiet { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 8px; }

/* outlined pills: choices and utilities */
.top-btn, .who-pill, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line-2); border-radius: var(--round); background: rgba(var(--shade), .55); color: var(--blush);
  font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: border-color var(--quick) var(--ease), color var(--quick) var(--ease), background-color var(--quick) var(--ease);
}
.top-btn:hover, .who-pill:hover, .chip:hover, .chip[aria-pressed="true"] { border-color: var(--ember); color: var(--bright); background: rgba(235, 164, 110, .08); }
.top-btn { min-height: 40px; padding: 9px 16px; white-space: nowrap; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.pills li { margin: 0; }

.plain-toggle { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--soft); cursor: pointer; margin-top: var(--s4); max-width: 46ch; }
.plain-toggle input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: none; border: 1px solid var(--line-3); border-radius: var(--r); background: transparent; display: grid; place-content: center; cursor: pointer; transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease); }
.plain-toggle input::after { content: ""; width: 10px; height: 6px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--quick) var(--ease); }
.plain-toggle input:checked { background: var(--ember); border-color: var(--ember); }
.plain-toggle input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.plain-toggle:hover input { border-color: var(--ember); }

/* ================================================================ 5. stages: the room, where the satin lives */
/* Layers, back to front: the room (paper melting into it at the edges), a still glow from the lamp
   (all you see without WebGL), the satin, the shadow the text sits in, then the text. The glow, the
   satin and the shadow fade out at the same edges, so a stage has no visible border. */
.stage {
  --fade: 160px; --top: var(--fade); --bottom: var(--fade);
  --glow: radial-gradient(55% 75% at 88% 45%, rgba(107, 34, 49, .5), rgba(107, 34, 49, 0) 72%);
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(to bottom, var(--paper) 0, var(--room) var(--fade), var(--room) calc(100% - var(--fade)), var(--paper) 100%);
}
.stage-hero, .stage-head { --top: 200px; background: linear-gradient(to bottom, var(--room) 0, var(--room) calc(100% - var(--fade)), var(--paper) 100%); }
.stage-hero { --glow: radial-gradient(55% 75% at 88% 34%, rgba(107, 34, 49, .55), rgba(107, 34, 49, 0) 72%); }
.stage-close { --bottom: 96px; --glow: radial-gradient(55% 75% at 88% 62%, rgba(107, 34, 49, .42), rgba(107, 34, 49, 0) 72%);
  background: linear-gradient(to bottom, var(--paper) 0, var(--room) var(--fade), var(--room) 100%); }
.stage::after, .stage::before, .stage > .satin {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--top), #000 calc(100% - var(--bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--top), #000 calc(100% - var(--bottom)), transparent 100%);
}
.stage::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; background: var(--glow); }
.stage > .satin { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.stage > .satin.is-on { opacity: 1; }
.stage::before { /* the shadow the text sits in */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--shade), .97) 0%, rgba(var(--shade), .94) 36%, rgba(var(--shade), .72) 52%, rgba(var(--shade), .28) 66%, rgba(var(--shade), 0) 78%);
}
.stage-hero::before { background: linear-gradient(90deg, rgba(var(--shade), .97) 0%, rgba(var(--shade), .95) 42%, rgba(var(--shade), .76) 56%, rgba(var(--shade), .3) 70%, rgba(var(--shade), 0) 82%); }

.stage-inner { position: relative; width: var(--page); margin: 0 auto; }
.stage h1 { color: var(--blush); max-width: 9.5ch; }
.stage .lede { color: var(--blush); max-width: 34ch; margin-top: var(--s4); }
.stage-title { font: italic 600 var(--t-section)/1.02 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.01em; max-width: 19ch; text-wrap: balance; }
.stage-text { margin-top: var(--s3); font-size: 19px; line-height: 1.55; color: var(--blush); max-width: 38ch; }
/* the button; beside it, the quiet alternative; under both, what happens when you press */
.stage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); margin-top: var(--s5); max-width: 560px; }
.stage-actions > .btn { order: 1; }
.stage-actions > .text-link { order: 2; display: inline-flex; align-items: center; min-height: 48px; }
.stage-actions > .stage-fine { order: 3; flex-basis: 100%; }
.stage-fine { font-size: 15px; line-height: 1.55; color: var(--soft); max-width: 46ch; }

.stage-hero { min-height: 100svh; display: flex; align-items: center; padding: 120px 0 var(--s7); }
.stage-hero h1 { font-size: var(--t-display); line-height: .92; letter-spacing: -.025em; }
.stage-head { display: flex; align-items: flex-end; min-height: 520px; padding: 184px 0 var(--s7); }
.stage-head h1 { font-size: var(--t-h1); line-height: .94; letter-spacing: -.02em; max-width: 12ch; }
.stage-head .lede { color: var(--soft); max-width: 46ch; }
.stage-interlude { margin-top: var(--s7); padding: 192px 0; }
.stage-close { margin-top: var(--s7); padding: 192px 0 var(--s8); }

/* the 404 is one stage, the whole screen */
.layout-404 .stage-head { --bottom: 0px; min-height: 100svh; align-items: center; padding-bottom: var(--s7); background: var(--room); }
.layout-404 .page-body { display: none; }
.layout-404 main { padding-bottom: 0; }

/* the door: the first home page of a visit, opens after the age notice */
.entry { display: none; }
.door-armed .entry { display: block; position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.entry-l, .entry-r { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: #080505; will-change: transform; }
.entry-l { transform: translateX(-38%); }
.entry-r { transform: translateX(62%); }
.entry-l::after, .entry-r::before { content: ""; position: absolute; top: -10%; bottom: -10%; width: 2px; background: #FFE2C8;
  box-shadow: 0 0 14px 3px rgba(255, 186, 130, .6), 0 0 70px 18px rgba(235, 120, 80, .22); }
.entry-l::after { right: -1px; }
.entry-r::before { left: -1px; }
.door-opening .entry-l { animation: door-l 2.1s cubic-bezier(.62, 0, .16, 1) forwards; }
.door-opening .entry-r { animation: door-r 2.1s cubic-bezier(.62, 0, .16, 1) forwards; }
@keyframes door-l { to { transform: translateX(-100%); } }
@keyframes door-r { to { transform: translateX(100%); } }
.door-done .entry { opacity: 0; transition: opacity .7s var(--ease); }
.door-armed:not(.door-js) .entry { animation: door-failsafe .6s ease 4s forwards; } /* if the script never runs, nobody stays in the dark */
@keyframes door-failsafe { to { opacity: 0; visibility: hidden; } }
/* the headline arrives with the door, once; on later pages it's simply there */
.door-armed .hero-inner > * { animation: arrive .6s var(--ease-in) both; animation-play-state: paused; }
.door-armed.door-opening .hero-inner > * { animation-play-state: running; }
.door-armed .hero-inner > :nth-child(1) { animation-delay: .7s; }
.door-armed .hero-inner > :nth-child(2) { animation-delay: .78s; }
.door-armed .hero-inner > :nth-child(3) { animation-delay: .86s; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
.door-armed:not(.door-js) .hero-inner > * { animation: none; } /* no script, no door: the headline is simply there when the dark fades */

/* ================================================================ 6. the home page's sections, on paper */
.layout-home .page-body { width: auto; margin: 0; }
.scene { margin-top: var(--s8); }
.stage-hero + .page-body .scene:first-child { margin-top: var(--s7); }
.scene-inner { width: var(--page); margin: 0 auto; }
.scene-inner > h2 { font-size: var(--t-section); line-height: 1; max-width: 14ch; }
.scene-inner > h2 + p { margin-top: var(--s3); max-width: 46ch; color: var(--soft); font-size: 19px; line-height: 1.55; }
@media (min-width: 1000px) {
  .scene-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); }
  .scene-inner > * { grid-column: 1 / -1; }
  .scene-inner > h2 { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
  .scene-inner > h2 + p { grid-column: 8 / -1; grid-row: 1; align-self: end; margin: 0 0 6px; }
  .scene-inner > .plain-toggle { grid-column: 8 / -1; }
}

/* ================================================================ 7. rows and groups: the two list patterns */
/* rows: every list of places (who, the guide) */
.doors, .night { list-style: none; margin: var(--s5) 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.doors > li, .night > li { margin: 0; border-top: 1px solid var(--line); }
.door, .hour {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 6px var(--s3); padding-block: var(--s3); text-decoration: none;
}
.door::before, .hour::before { /* the row lifts when you point at it */
  content: ""; position: absolute; inset: 0 calc(-1 * var(--s2)); z-index: -1; border-radius: var(--r);
  background: var(--raised); opacity: 0; transition: opacity var(--quick) var(--ease);
}
.door:hover::before, .hour:hover::before { opacity: 1; }
.door-name, .hour-title { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 14px; font: italic 600 var(--t-title)/1.1 var(--serif); font-variant-numeric: lining-nums; transition: color var(--quick) var(--ease); }
.door-note, .hour-note { grid-column: 1 / -1; grid-row: 2; color: var(--soft); font-size: var(--t-small); line-height: 1.55; max-width: 56ch; }
.door-go, .hour-go {
  grid-column: 2; grid-row: 1; justify-self: end; color: var(--ember); font-size: 15px; font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--quick) var(--ease);
}
.door:hover .door-name, .hour:hover .hour-title { color: var(--bright); }
.door:hover .door-go, .hour:hover .hour-go { text-decoration-color: currentColor; }
@media (min-width: 1000px) {
  .door, .hour { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); align-items: center; padding-block: 28px; }
  .door-name, .hour-title { grid-column: 1 / span 6; }
  .door-note, .hour-note { grid-column: 8 / span 4; grid-row: 1; }
  .door-go, .hour-go { grid-column: 12; grid-row: 1; }
}

/* groups: every list of choices (home's niches, the niche directory) */
.group { margin-top: var(--s7); }
.niche-short { margin-top: var(--s6); }
.group > .group-head > :is(h2, h3) { font: italic 600 var(--t-title)/1.1 var(--serif); font-variant-numeric: lining-nums; margin: 0; color: var(--blush); }
.group > .group-head > p { margin-top: var(--s1); color: var(--soft); font-size: var(--t-small); line-height: 1.55; max-width: 40ch; }
.group > .pills, .group > .group-body { margin-top: var(--s3); }
.niche-more { margin-top: var(--s3); font-size: var(--t-small); }
@media (min-width: 1000px) {
  .group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); align-items: start; }
  .group > .group-head { grid-column: 1 / span 5; }
  .group > .pills, .group > .group-body { grid-column: 7 / -1; margin-top: 4px; }
}

.say:not(.stage-title) { font: italic 500 clamp(30px, 3.2vw, 40px)/1.2 var(--serif); font-variant-numeric: lining-nums; max-width: 24ch; text-wrap: balance; }

/* ================================================================ 8. reading pages */
.page-body { width: var(--page); margin: var(--s7) auto 0; }
.prose { max-width: 66ch; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { font-size: var(--t-h2); line-height: 1.05; margin-top: var(--s7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 600 20px/1.4 var(--sans); margin-top: var(--s5); color: var(--blush); }
.prose h2 + *, .prose h3 + * { margin-top: var(--s2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 10px; }
.prose ul li::marker { color: var(--smoke); }
.prose ol li::marker { color: var(--soft); font-family: var(--sans); font-weight: 600; font-size: .9em; }
.prose strong { color: var(--blush); font-weight: 600; }
.prose .doors, .prose .pills, .prose .night { padding-left: 0; }
.prose .doors li + li, .prose .pills li + li, .prose .night li + li { margin-top: 0; }

/* the niche directory uses the full width; its running text keeps a reading width */
.prose-wide { max-width: none; }
.prose-wide > :is(h2, p, ul:not([class]), ol:not([class]), .between) { max-width: 66ch; }
/* one ruled directory: the company rows, then every niche group, each line shared by its neighbours */
.prose-wide > .group { margin-top: 0; padding-block: var(--s5); border-top: 1px solid var(--line); }
.prose-wide > .doors + .group { border-top: 0; }
.prose-wide > :not(.group, .doors) + .group { margin-top: var(--s7); }
.prose-wide > .group:not(:has(+ .group)) { border-bottom: 1px solid var(--line); }

.prose > dl { margin-top: var(--s4); }
.prose > dl > dt { font: italic 600 30px/1.1 var(--serif); font-variant-numeric: lining-nums; margin-top: var(--s5); }
.prose > dl > dd { margin: var(--s1) 0 0; color: var(--soft); }

/* "Between us.": an aside in the margin of the conversation */
.between { margin-block: var(--s5) !important; padding-left: var(--s3); border-left: 2px solid var(--wine); max-width: 34em; }
.between p { font: italic 500 26px/1.42 var(--serif); font-variant-numeric: lining-nums; color: var(--blush); }
.between-lead { color: var(--soft); font-weight: 600; }

/* tables */
.table-wrap { overflow-x: auto; margin-block: var(--s4) var(--s1); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
table.data th { text-align: left; font: 500 13px/1.3 var(--sans); letter-spacing: .02em; color: var(--smoke); padding: 0 var(--s3) 12px 0; border-bottom: 1px solid var(--line-2); white-space: nowrap; vertical-align: bottom; }
table.data td { padding: 14px var(--s3) 14px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data .num { text-align: right; }
table.data td:first-child { color: var(--blush); font-weight: 500; }
table.data tr.best td { background: rgba(107, 34, 49, .22); }
.tag { display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: var(--r); background: var(--wine); color: var(--blush); font: 600 12.5px/1.3 var(--sans); vertical-align: 2px; white-space: nowrap; }
.prose .fine { margin-top: 12px; }

/* calculators: a panel you work with */
.tab { max-width: 560px; margin-block: var(--s5) !important; padding: var(--s4); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); }
.tab-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.tab-field { display: grid; gap: 6px; flex: 1 1 200px; font-size: var(--t-fine); color: var(--soft); }
.tab-field output { color: var(--blush); font-weight: 600; }
.tab-field input[type="number"] {
  font: 600 40px/1.1 var(--sans); color: var(--blush); background: transparent; letter-spacing: -.01em;
  border: 0; border-bottom: 1px solid var(--line-3); border-radius: 0; padding: 2px 0 6px; width: 100%; max-width: 200px;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; transition: border-color var(--quick) var(--ease);
}
.tab-field input[type="number"]:focus { outline: none; border-bottom-color: var(--ember); }
.tab-field input[type="number"]:focus-visible { outline: 2px solid var(--ember); outline-offset: 6px; }
.tab-field input::-webkit-outer-spin-button, .tab-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tab-field select {
  font: 500 17px/1.2 var(--sans); color: var(--blush); background: transparent; border: 0; border-bottom: 1px solid var(--line-3);
  border-radius: 0; padding: 10px 28px 10px 0; appearance: none; min-height: 48px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ember) 50%), linear-gradient(135deg, var(--ember) 50%, transparent 50%);
  background-position: calc(100% - 12px) 22px, calc(100% - 6px) 22px; background-size: 6px 6px; background-repeat: no-repeat;
}
.tab-field select option { background: var(--paper); }
.tab-field input[type="range"] { accent-color: var(--ember); width: 100%; height: 48px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip { min-height: 40px; padding: 9px 14px; color: var(--soft); background: transparent; }
.tab-error { color: #FFB4BE; font-size: var(--t-fine); margin-top: 12px; }
.tab-lines { margin: var(--s3) 0 0; }
.tab-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.tab-lines dt { font-size: 15px; color: var(--soft); }
.tab-lines dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.tab-lines .tab-total { border-bottom: 0; padding-top: var(--s2); }
.tab-total dt { font: italic 600 26px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--blush); }
.tab-total dd { font: 600 32px/1 var(--sans); color: var(--blush); letter-spacing: -.01em; }
.tab-nudge { margin-top: var(--s2); padding-left: 14px; border-left: 2px solid var(--wine); font-size: 15px; line-height: 1.5; color: var(--soft); }
.tab-act { display: grid; gap: 12px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.tab-act .btn { width: 100%; }
.tab-act-note { font-size: var(--t-fine); line-height: 1.55; color: var(--smoke); }

/* the guide's list beside the text, on wide screens */
.rail { display: none; }
@media (min-width: 1100px) {
  .page-body:has(> .rail) { display: grid; grid-template-columns: minmax(0, 66ch) minmax(0, 1fr); column-gap: var(--s6); }
  .rail { display: block; position: sticky; top: 120px; align-self: start; justify-self: end; width: 250px; }
  .rail-head { font-size: var(--t-fine); color: var(--smoke); margin-bottom: 14px; }
  .rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
  .rail a { display: block; padding: 9px 0 9px 20px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; }
  .rail-title { font-size: 15px; line-height: 1.4; color: var(--soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--quick) var(--ease), text-decoration-color var(--quick) var(--ease); }
  .rail a:hover .rail-title { color: var(--bright); text-decoration-color: var(--ember); }
  .rail a[aria-current] { border-left-color: var(--blush); }   /* "you are here" is a state, not an action */
  .rail a[aria-current] .rail-title { color: var(--blush); font-weight: 500; }
}

/* Back / Next: rows, like every other list of places */
.turns { width: var(--page); margin: var(--s7) auto 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.turn { position: relative; isolation: isolate; display: grid; gap: 6px; padding: var(--s4) 0; text-decoration: none; }
.turn::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s2)); z-index: -1; border-radius: var(--r); background: var(--raised); opacity: 0; transition: opacity var(--quick) var(--ease); }
.turn:hover::before { opacity: 1; }
.turn-next { text-align: right; grid-column: 2; }
.turn-label { font-size: var(--t-fine); color: var(--smoke); }
.turn-title { font: italic 600 var(--t-h2)/1.05 var(--serif); font-variant-numeric: lining-nums; transition: color var(--quick) var(--ease); }
.turn:hover .turn-title { color: var(--bright); }

/* ================================================================ 9. chrome: header, menu, age notice, phone bar, footer */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color var(--move) var(--ease), border-color var(--move) var(--ease); }
.top.scrolled { background: rgba(25, 18, 19, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.top-inner { width: var(--page); margin: 0 auto; }
.top-inner, .menu-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); height: var(--head); }
.wordmark { font: italic 600 32px/1 var(--serif); font-variant-numeric: lining-nums; text-decoration: none; color: var(--blush); white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: var(--s1); }

.menu { width: 100%; height: 100%; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--blush); }
.menu::backdrop { background: transparent; }
.menu-inner { width: var(--page); margin: 0 auto; padding-bottom: var(--s5); }
.menu-kicker { margin-top: var(--s4); color: var(--smoke); font-size: 15px; }
.menu-night { list-style: none; padding: 0; margin: var(--s2) 0 0; border-bottom: 1px solid var(--line); }
.menu-night li { border-top: 1px solid var(--line); }
.menu-night a { position: relative; isolation: isolate; display: block; padding: 14px 0; text-decoration: none; }
.menu-night a::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s2)); z-index: -1; border-radius: var(--r); background: var(--raised); opacity: 0; transition: opacity var(--quick) var(--ease); }
.menu-night a:hover::before { opacity: 1; }
.menu-title { font: italic 600 clamp(30px, 4.4vw, 44px)/1.05 var(--serif); font-variant-numeric: lining-nums; transition: color var(--quick) var(--ease); }
.menu-night a:hover .menu-title { color: var(--bright); }
.menu-cta { margin-top: var(--s4); }
.menu-more { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: var(--s4); font-size: 17px; }

.age { max-width: min(560px, 100vw - 32px); padding: 40px 36px 32px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--raised); color: var(--blush); }
.age::backdrop { background: rgba(8, 5, 5, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.age-kicker { color: var(--smoke); font-size: 15px; }
.age h2 { font-size: 46px; line-height: 1; margin-top: 10px; }
.age p:not(.age-kicker) { margin-top: 14px; color: var(--soft); }
.age-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin-top: var(--s4); }

.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px var(--s2);
  background: rgba(35, 26, 27, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none;
  transition: transform .4s var(--ease), opacity var(--move) var(--ease);
}
.dock.is-shown { transform: none; opacity: 1; pointer-events: auto; }
.dock-text { display: flex; align-items: center; flex: 1; min-width: 0; }
.dock-words { display: grid; min-width: 0; line-height: 1.25; }
.dock-small { font-size: 12.5px; color: var(--smoke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-big { font-size: 15px; font-weight: 500; color: var(--blush); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-btn { flex: none; min-height: 44px; padding: 10px var(--s2); font-size: 15px; }
.dock-close { flex: none; display: grid; place-items: center; width: 36px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--smoke); cursor: pointer; transition: color var(--quick) var(--ease); }
.dock-close:hover { color: var(--bright); }
@media (min-width: 761px) { .dock { display: none !important; } }

.foot { border-top: 1px solid var(--line); background: var(--room); }
.foot-inner { width: var(--page); margin: 0 auto; padding: var(--s6) 0; display: grid; gap: 14px; }
.foot-mark { font: italic 600 36px/1 var(--serif); font-variant-numeric: lining-nums; }
.foot-line { color: var(--soft); }
.foot-fine { font-size: var(--t-fine); color: var(--smoke); max-width: 72ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) 26px; font-size: 15px; margin: var(--s1) 0; }

/* ================================================================ 10. phones */
@media (max-width: 760px) {
  :root { --page: calc(100% - 36px); --t-title: 28px; --head: 64px; }
  body { font-size: 17px; }
  .wordmark { font-size: 27px; }
  .top-btn { padding: 8px 12px; font-size: 14px; gap: 6px; }

  /* stages: the satin shows at the top, the text sits in shadow below */
  .stage { --fade: 96px; --glow: radial-gradient(95% 50% at 78% 16%, rgba(107, 34, 49, .5), rgba(107, 34, 49, 0) 75%); }
  .stage-hero, .stage-head { --top: 96px; }
  .stage::before, .stage-hero::before { background: linear-gradient(to top, rgba(var(--shade), .97) 0%, rgba(var(--shade), .94) 52%, rgba(var(--shade), .6) 70%, rgba(var(--shade), 0) 90%); }
  .stage-hero { min-height: 100svh; align-items: flex-end; padding: 280px 0 var(--s6); }
  .stage-head { min-height: 0; padding: 280px 0 var(--s6); }
  .stage-interlude, .stage-close { margin-top: var(--s7); padding: 300px 0 var(--s6); }
  .stage h1 { max-width: none; }
  .stage .lede { font-size: 18px; margin-top: var(--s3); }
  .stage-actions { margin-top: var(--s4); flex-direction: column; align-items: stretch; }
  .stage-actions > .btn { width: 100%; }
  .stage-actions > .stage-fine { order: 2; }
  .stage-actions > .text-link { order: 3; align-self: flex-start; }
  .layout-404 .stage-head { align-items: flex-end; }

  .scene { margin-top: var(--s7); }
  .page-body { margin-top: var(--s6); }
  .between p { font-size: 23px; }
  .door, .hour { padding-block: 20px; }
  .door::before, .hour::before, .turn::before, .menu-night a::before { inset: 0 -10px; }
  .group { margin-top: var(--s6); }
  .prose-wide > .group { padding-block: var(--s4); }
  .tab { padding: var(--s3) 20px 20px; }
  table.data { font-size: 15px; }
  table.data .unit { display: none; }
  table.data td, table.data th { padding-right: var(--s2); }
  table.data th { white-space: normal; }
  /* phones keep the columns that decide: the pack and its price; the tier, its rate and what ten minutes cost */
  table.packages th:nth-child(4), table.packages td:nth-child(4), table.tiers th:nth-child(3), table.tiers td:nth-child(3) { display: none; }
  .tab-total dd { font-size: 28px; }
  .turns { grid-template-columns: 1fr; margin-top: var(--s7); }
  .turn-next { grid-column: 1; text-align: left; border-top: 1px solid var(--line); }
  .turn-title { font-size: 32px; }
  main { padding-bottom: var(--s7); }
}
@media (max-width: 380px) { /* small phones: the name and the three header buttons still share one line */
  .wordmark { font-size: 24px; }
  .top-inner, .menu-top { gap: 12px; }
  .top-btn { padding-inline: 10px; }
  .top-actions { gap: 6px; }
  .dock { padding-left: 14px; gap: var(--s1); }
  .dock-btn { padding: 10px 14px; font-size: 14.5px; }
  .dock-close { width: 32px; }
}
@media (max-width: 355px) { /* the smallest phones: "Live now" keeps its name for screen readers, shows only its light */
  .live-link span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .live-link { padding-inline: 14px; }
}
@media (max-width: 300px) { .wordmark { font-size: 20px; } }

/* ================================================================ 11. motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entry { display: none !important; }
}