@import url("https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600&display=swap");
/* ==========================================================================
   Philia design system, v1. One file: tokens, then components.
   Built to the designsystems.surf model: two layers.
     Layer 1, primitives: raw values. Never used by a component.
     Layer 2, roles: named by what they do, never by colour. Components use only these.
   Naming: token.path.name becomes --token-path-name.
   Mode: DARK ONLY. This site has no light mode and no [data-theme] switch.
         "inverse" means paper (the spot card), not a light theme.
   Source of the look: site/index.html :root. Items marked "ours" differ from the docs on purpose
   (see dss/DIGEST.md). Items marked "fix" repair a failure found in the audit (see colour.html).
   ========================================================================== */
@font-face { font-family: "Microgramma"; src: url("microgramma.otf") format("opentype"); font-display: swap; }

:root {
  /* ===== LAYER 1: PRIMITIVES ===== */
  /* colour */
  --color-brand-50: #F7DCAA;  --color-brand-100: #FFD68A; --color-brand-400: #E9A23B;
  --color-brand-500: #F18930; --color-brand-700: #C83D2A; --color-brand-800: #A52F20; /* 800 is new (fix) */
  --color-brand-900: #581325;
  --color-neutral-0: #F3EDE4;   --color-neutral-300: #B9AAA4; --color-neutral-400: #A89A96;
  --color-neutral-500: #85766F; /* new (fix) */
  --color-neutral-600: #6B5A57; --color-neutral-700: #54433F; /* 700 is new (fix) */
  --color-neutral-800: #3D2328; --color-neutral-950: #1A0C0F;
  --color-wine-800: #4A1620;    --color-wine-900: #2A0E14;
  --color-negative-400: #F07A62;
  --color-alpha-light-100: rgb(243 237 228 / .08); --color-alpha-light-200: rgb(243 237 228 / .12);
  --color-alpha-light-300: rgb(243 237 228 / .16); --color-alpha-light-500: rgb(243 237 228 / .28);
  --color-alpha-dark-200: rgb(26 12 15 / .18);     --color-alpha-dark-800: rgb(26 12 15 / .8);
  --color-alpha-brand-300: rgb(241 137 48 / .28);  --color-alpha-brand-400: rgb(241 137 48 / .35);
  --color-alpha-brand-450: rgb(233 162 59 / .45);  --color-alpha-rust-150: rgb(200 61 42 / .14);
  --color-alpha-negative-150: rgb(240 122 98 / .14); /* new */

  /* type */
  --type-family-primary: "Microgramma", "Eurostile", system-ui, sans-serif;
  --type-family-secondary: "Saira", system-ui, sans-serif;
  --type-weight-regular: 400; --type-weight-medium: 500; --type-weight-semibold: 600;
  --type-size-100: .75rem;  --type-size-200: .8rem;  --type-size-300: .875rem; --type-size-350: 1rem;
  --type-size-400: clamp(1.1rem, 1.6vw, 1.3rem); --type-size-450: 1.08rem; --type-size-500: 1.6rem; --type-size-600: min(var(--type-size-900), 2.6rem);
  --type-size-900: clamp(2rem, 4.6vw, 3.4rem); --type-size-1300: clamp(5.5rem, min(22vw, 24svh), 15rem); --type-size-1400: 21vw;
  --type-line-height-tight: .8; --type-line-height-snug: 1.02; --type-line-height-heading: 1.1; --type-line-height-ui: 1; --type-line-height-reading: 1.5;
  --type-letter-spacing-tight: -.01em; --type-letter-spacing-none: 0; --type-letter-spacing-button: .04em; --type-letter-spacing-wide: .14em; --type-letter-spacing-code: .3em;

  /* space */
  --spacing-space-100: 2px;  --spacing-space-200: 4px;  --spacing-space-300: 8px;  --spacing-space-400: 12px;
  --spacing-space-500: 16px; --spacing-space-600: 24px; --spacing-space-700: 32px; --spacing-space-800: 40px;
  --spacing-space-900: 48px; --spacing-space-1000: 64px; --spacing-space-1100: 80px; --spacing-space-1200: 96px;

  /* radius */
  --radius-scale-0: 0; --radius-scale-300: 8px; --radius-scale-500: 16px; --radius-scale-800: 999px;

  /* border width */
  --border-scale-0: 0; --border-scale-100: 1px; --border-scale-150: 1.5px; --border-scale-200: 2px;

  /* motion */
  --motion-duration-instant: 0ms; --motion-duration-fast: 160ms; --motion-duration-moderate: 240ms; --motion-duration-slow: 320ms;
  --motion-duration-expressive: 400ms; --motion-duration-cinematic: 700ms; /* cinematic: ours, for whole-screen moves */
  --motion-duration-loop: 900ms; /* ours: one loading cycle */
  --motion-easing-standard: cubic-bezier(.4, 0, .2, 1);
  --motion-easing-decelerate: cubic-bezier(.2, .7, .2, 1);   /* ours: softer than the docs' (0, 0, .2, 1) */
  --motion-easing-accelerate: cubic-bezier(.4, 0, 1, 1);
  --motion-easing-emphasized: cubic-bezier(.2, 0, 0, 1);
  --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --motion-distance-none: 0px; --motion-distance-xs: 4px; --motion-distance-sm: 8px; --motion-distance-md: 16px;

  /* ===== LAYER 2: ROLES ===== */
  /* ---- colour: bg ---- */
  --color-bg-base-canvas: var(--color-neutral-950);
  --color-bg-base-section: var(--color-wine-900);
  --color-bg-base-surface: var(--color-wine-900);
  --color-bg-base-raised: var(--color-wine-800);
  --color-bg-base-elevated: var(--color-wine-800);
  --color-bg-base-overlay: var(--color-alpha-dark-800);
  --color-bg-base-glow: radial-gradient(110% 75% at 72% 22%, var(--color-wine-800) 0, var(--color-wine-900) 38%, var(--color-neutral-950) 75%);
  --color-bg-base-inverse: linear-gradient(115deg, var(--color-neutral-0) 50%, var(--color-brand-50));
  --color-bg-base-disabled: var(--color-alpha-light-200);
  --color-bg-intent-accent-strong: radial-gradient(circle at 50% 35%, var(--color-brand-100) 0, var(--color-brand-500) 45%, var(--color-brand-700) 80%, var(--color-brand-900) 100%);
  --color-bg-intent-negative-subtle: var(--color-alpha-negative-150);
  --color-bg-action-accent-primary-default: linear-gradient(100deg, var(--color-brand-400), var(--color-brand-100) 50%, var(--color-brand-400));
  --color-bg-state-hover: var(--color-alpha-light-100);
  --color-bg-state-pressed: var(--color-alpha-light-300);
  /* ---- colour: fg ---- */
  --color-fg-base-primary: var(--color-neutral-0);
  --color-fg-base-secondary: var(--color-neutral-300);
  --color-fg-base-tertiary: var(--color-neutral-400);     /* new: placeholders, optional marks (fix: placeholder used border-strong, 2.28:1) */
  --color-fg-base-disabled: var(--color-neutral-600);
  --color-fg-base-inverse: var(--color-neutral-950);
  --color-fg-base-inverse-secondary: var(--color-neutral-700);   /* ours; fix: now neutral-700 */
  --color-fg-base-inverse-tertiary: var(--color-neutral-600);    /* ours; fix: was neutral-400, 2.34:1 */
  --color-fg-base-on-color: var(--color-neutral-950);
  --color-fg-intent-accent: var(--color-brand-400);
  --color-fg-intent-hot: var(--color-brand-500);
  --color-fg-intent-hover: var(--color-brand-100);
  --color-fg-intent-negative: var(--color-negative-400);
  --color-fg-intent-inverse-accent: var(--color-brand-800);      /* ours; fix: was brand-700, 3.79:1 on paper end */
  /* ---- colour: border and focus ---- */
  --color-border-base-subtle: var(--color-alpha-light-200);
  --color-border-base-medium: var(--color-neutral-800);
  --color-border-base-strong: var(--color-alpha-light-500);
  --color-border-base-control: var(--color-neutral-500);  /* new (fix): field lines need 3:1, strong gave 2.28:1 */
  --color-border-base-inverse: var(--color-alpha-dark-200);
  --color-border-intent-negative: var(--color-negative-400);
  --color-focus-default: var(--color-brand-400);
  --color-focus-inverse: var(--color-brand-800);           /* new: focus on paper */

  /* ---- type roles: size, line-height, weight, letter-spacing, family ---- */
  --type-display-lg-size: var(--type-size-1400);  --type-display-lg-line-height: var(--type-line-height-tight);   --type-display-lg-weight: var(--type-weight-regular); --type-display-lg-letter-spacing: var(--type-letter-spacing-tight); --type-display-lg-family: var(--type-family-primary); /* PHILIA across the screen, once */
  --type-display-md-size: var(--type-size-1300);  --type-display-md-line-height: var(--type-line-height-tight);   --type-display-md-weight: var(--type-weight-regular); --type-display-md-letter-spacing: var(--type-letter-spacing-tight); --type-display-md-family: var(--type-family-primary);
  --type-headline-md-size: var(--type-size-900);  --type-headline-md-line-height: var(--type-line-height-snug);   --type-headline-md-weight: var(--type-weight-regular); --type-headline-md-letter-spacing: var(--type-letter-spacing-tight); --type-headline-md-family: var(--type-family-primary); /* every page headline, one size */
  --type-headline-sm-size: var(--type-size-600);  --type-headline-sm-line-height: var(--type-line-height-snug);   --type-headline-sm-weight: var(--type-weight-regular); --type-headline-sm-letter-spacing: var(--type-letter-spacing-tight); --type-headline-sm-family: var(--type-family-primary); /* sheet headline */
  --type-title-lg-size: var(--type-size-500);     --type-title-lg-line-height: var(--type-line-height-heading);  --type-title-lg-weight: var(--type-weight-regular); --type-title-lg-letter-spacing: var(--type-letter-spacing-none);  --type-title-lg-family: var(--type-family-primary); /* spot card name */
  --type-title-md-size: var(--type-size-450);     --type-title-md-line-height: 1.35;                              --type-title-md-weight: var(--type-weight-medium);  --type-title-md-letter-spacing: var(--type-letter-spacing-none);  --type-title-md-family: var(--type-family-secondary); /* FAQ question */
  --type-title-sm-size: var(--type-size-400);     --type-title-sm-line-height: var(--type-line-height-heading);  --type-title-sm-weight: var(--type-weight-regular); --type-title-sm-letter-spacing: var(--type-letter-spacing-none);  --type-title-sm-family: var(--type-family-primary); /* timeline time, bring-box heading */
  --type-body-md-size: var(--type-size-400);      --type-body-md-line-height: var(--type-line-height-reading);   --type-body-md-weight: var(--type-weight-regular); --type-body-md-letter-spacing: var(--type-letter-spacing-none);  --type-body-md-family: var(--type-family-secondary);
  --type-body-sm-size: var(--type-size-300);      --type-body-sm-line-height: var(--type-line-height-reading);   --type-body-sm-weight: var(--type-weight-regular); --type-body-sm-letter-spacing: .02em;                             --type-body-sm-family: var(--type-family-secondary);
  --type-label-lg-size: var(--type-size-350);     --type-label-lg-line-height: var(--type-line-height-ui);       --type-label-lg-weight: var(--type-weight-regular); --type-label-lg-letter-spacing: var(--type-letter-spacing-button); --type-label-lg-family: var(--type-family-primary); /* buttons */
  --type-label-md-size: var(--type-size-300);     --type-label-md-line-height: var(--type-line-height-ui);       --type-label-md-weight: var(--type-weight-regular); --type-label-md-letter-spacing: var(--type-letter-spacing-wide);   --type-label-md-family: var(--type-family-primary); /* PHILIA in the top bar, uppercase */
  --type-label-sm-size: var(--type-size-200);     --type-label-sm-line-height: var(--type-line-height-ui);       --type-label-sm-weight: var(--type-weight-regular); --type-label-sm-letter-spacing: var(--type-letter-spacing-none);  --type-label-sm-family: var(--type-family-secondary); /* field label */
  --type-caption-md-size: var(--type-size-300);   --type-caption-md-line-height: var(--type-line-height-reading); --type-caption-md-weight: var(--type-weight-regular); --type-caption-md-letter-spacing: var(--type-letter-spacing-none); --type-caption-md-family: var(--type-family-secondary); /* helper line, errors */
  --type-caption-sm-size: var(--type-size-100);   --type-caption-sm-line-height: var(--type-line-height-ui);       --type-caption-sm-weight: var(--type-weight-medium);  --type-caption-sm-letter-spacing: var(--type-letter-spacing-none); --type-caption-sm-family: var(--type-family-secondary); /* Powered by flow */

  /* ---- spacing: semantic families (docs defaults where our scale has the step) ---- */
  --spacing-stack-xs: var(--spacing-space-200);   --spacing-stack-sm: var(--spacing-space-300);   --spacing-stack-md: var(--spacing-space-500);  --spacing-stack-lg: var(--spacing-space-700);  --spacing-stack-xl: var(--spacing-space-900);
  --spacing-inline-xs: var(--spacing-space-100);  --spacing-inline-sm: var(--spacing-space-200);  --spacing-inline-md: var(--spacing-space-300); --spacing-inline-lg: var(--spacing-space-500); --spacing-inline-xl: var(--spacing-space-700);
  --spacing-inset-xs: var(--spacing-space-300);   --spacing-inset-sm: var(--spacing-space-400);   --spacing-inset-md: var(--spacing-space-500);  --spacing-inset-lg: var(--spacing-space-700);  --spacing-inset-xl: var(--spacing-space-900);
  --spacing-gap-xs: var(--spacing-space-200);     --spacing-gap-sm: var(--spacing-space-300);     --spacing-gap-md: var(--spacing-space-500);    --spacing-gap-lg: var(--spacing-space-700);    --spacing-gap-xl: var(--spacing-space-900);
  --spacing-section-xs: var(--spacing-space-500); --spacing-section-sm: var(--spacing-space-700); --spacing-section-md: var(--spacing-space-900); --spacing-section-lg: var(--spacing-space-1100);
  --spacing-section-xl: clamp(var(--spacing-space-1200), 14vw, 180px);  /* the site's: between sections */
  --spacing-container-xs: var(--spacing-space-300); --spacing-container-sm: var(--spacing-space-500); --spacing-container-md: var(--spacing-space-700); --spacing-container-lg: var(--spacing-space-900); --spacing-container-xl: var(--spacing-space-1100);
  --spacing-touch-min: 44px;   /* smallest tap target */
  --spacing-touch-clearance: var(--spacing-space-300); /* docs invariant: 8px between controls */

  /* ---- shape ---- */
  --shape-edge-hard: var(--radius-scale-0);
  --shape-control-base: var(--radius-scale-300);
  --shape-surface-raised: var(--radius-scale-500);
  --shape-overlay-base: var(--radius-scale-500);
  --shape-rounded: var(--radius-scale-800);

  /* ---- border width ---- */
  --border-none: var(--border-scale-0); --border-divider: var(--border-scale-100); --border-container: var(--border-scale-100);
  --border-control: var(--border-scale-100); --border-dashed: var(--border-scale-200); --border-focus: var(--border-scale-200);

  /* ---- elevation: planes (z) and shadows ---- */
  --plane-canvas: 0; --plane-section: 0; --plane-surface: 1; --plane-raised: 2; --plane-overlay: 3; --plane-elevated: 4;
  --elevation-shadow-0: none;
  --elevation-shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px -2px rgb(0 0 0 / .35);
  --elevation-shadow-2: 0 4px 12px -2px rgb(0 0 0 / .5), 0 8px 24px -8px rgb(0 0 0 / .4);
  --elevation-shadow-3: 0 12px 28px -8px rgb(0 0 0 / .55);
  --elevation-shadow-4: 0 30px 80px -20px #000;                  /* the spot card, floating pictures */
  --elevation-plane-surface: var(--elevation-shadow-1);
  --elevation-plane-raised: var(--elevation-shadow-2);
  --elevation-plane-overlay: var(--elevation-shadow-0);          /* a scrim, no shadow */
  --elevation-plane-elevated: var(--elevation-shadow-3), var(--elevation-shadow-4); /* docs: shadow 3 + 4 together */
  --elevation-glow-accent: 0 12px 36px -16px var(--color-alpha-brand-450); /* ours: warm lift under the primary button */
  --elevation-glow-sun: 0 0 120px 30px var(--color-alpha-brand-300), 0 0 300px 80px var(--color-alpha-rust-150);
  --elevation-glow-seat: 0 0 24px var(--color-alpha-brand-400);

  /* ---- motion: intents (duration, easing, distance) ---- */
  --motion-enter-duration: var(--motion-duration-expressive);   --motion-enter-easing: var(--motion-easing-decelerate);   --motion-enter-distance: var(--motion-distance-sm);   /* something arrives */
  --motion-exit-duration: var(--motion-duration-fast);          --motion-exit-easing: var(--motion-easing-accelerate);     --motion-exit-distance: var(--motion-distance-sm);    /* something leaves */
  --motion-replace-duration: var(--motion-duration-cinematic);  --motion-replace-easing: var(--motion-easing-decelerate);  --motion-replace-distance: var(--motion-distance-md); /* the whole screen changes */
  --motion-feedback-duration: var(--motion-duration-fast);      --motion-feedback-easing: var(--motion-easing-standard);   --motion-feedback-distance: var(--motion-distance-none); /* hover, focus, colour */
  --motion-emphasize-duration: var(--motion-duration-expressive); --motion-emphasize-easing: var(--motion-easing-emphasized); --motion-emphasize-distance: var(--motion-distance-xs); /* a seat fills */
  --motion-attention-duration: var(--motion-duration-slow);     --motion-attention-easing: var(--motion-easing-emphasized); --motion-attention-distance: var(--motion-distance-sm); /* an error shakes it in */
  --motion-loading-duration: var(--motion-duration-loop);       --motion-loading-easing: var(--motion-easing-linear);      /* continuous, no distance */

  /* ---- layout ---- */
  --layout-page-margin: clamp(20px, 5vw, 64px);
  --layout-content-constrained-max-width: 1120px;
  --layout-content-reading-max-width: 34ch;     /* leads */
  --layout-content-faq-max-width: 1040px;
  --layout-pane-sheet-width: 460px;             /* the sheet on a wide screen */
  --layout-toast-width: 356px;
  /* Breakpoints cannot be var() in @media. Values to type: xs 420 (header collapses), md 700 (story pictures), lg 900 (two-column rows), xl 1280 (design width). */
  --layout-breakpoint-xs: 420px; --layout-breakpoint-md: 700px; --layout-breakpoint-lg: 900px; --layout-breakpoint-xl: 1280px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-enter-duration: var(--motion-duration-fast); --motion-exit-duration: var(--motion-duration-instant);
    --motion-replace-duration: var(--motion-duration-fast); --motion-emphasize-duration: var(--motion-duration-fast);
    --motion-attention-duration: var(--motion-duration-moderate);
    --motion-enter-distance: var(--motion-distance-none); --motion-exit-distance: var(--motion-distance-none); --motion-replace-distance: var(--motion-distance-none);
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--color-bg-base-canvas); color-scheme: dark; overflow-x: clip; scroll-behavior: smooth; interpolate-size: allow-keywords; }
body { margin: 0; background: var(--color-bg-base-glow) no-repeat 0 0 / 100% 110svh, var(--color-bg-base-canvas); color: var(--color-fg-base-primary); font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-line-height) var(--type-body-md-family); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
h2 { font: var(--type-headline-md-weight) var(--type-headline-md-size)/var(--type-headline-md-line-height) var(--type-headline-md-family); letter-spacing: var(--type-headline-md-letter-spacing); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
.wrap { max-width: var(--layout-content-constrained-max-width); margin-inline: auto; padding-inline: var(--layout-page-margin); }
.section { padding-block: var(--spacing-section-xl) 0; }
.lead { color: var(--color-fg-base-secondary); max-width: var(--layout-content-reading-max-width); margin-top: var(--spacing-stack-md); }
.hot { color: var(--color-fg-intent-hot); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: var(--border-focus) solid var(--color-focus-default); outline-offset: 3px; }
@keyframes enter { from { opacity: 0; translate: 0 var(--motion-enter-distance); } }   /* the one way things arrive */
@keyframes spin { to { rotate: 1turn; } }

/* Type role utilities: put a role on any element */
.type-display-lg { font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-line-height) var(--type-display-lg-family); letter-spacing: var(--type-display-lg-letter-spacing); text-transform: uppercase; white-space: nowrap; }
.type-display-md { font: var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-line-height) var(--type-display-md-family); letter-spacing: var(--type-display-md-letter-spacing); text-transform: uppercase; white-space: nowrap; }
.type-headline-md { font: var(--type-headline-md-weight) var(--type-headline-md-size)/var(--type-headline-md-line-height) var(--type-headline-md-family); letter-spacing: var(--type-headline-md-letter-spacing); text-wrap: balance; }
.type-headline-sm { font: var(--type-headline-sm-weight) var(--type-headline-sm-size)/var(--type-headline-sm-line-height) var(--type-headline-sm-family); letter-spacing: var(--type-headline-sm-letter-spacing); text-wrap: balance; }
.type-title-lg { font: var(--type-title-lg-weight) var(--type-title-lg-size)/var(--type-title-lg-line-height) var(--type-title-lg-family); }
.type-title-md { font: var(--type-title-md-weight) var(--type-title-md-size)/var(--type-title-md-line-height) var(--type-title-md-family); }
.type-title-sm { font: var(--type-title-sm-weight) var(--type-title-sm-size)/var(--type-title-sm-line-height) var(--type-title-sm-family); }
.type-body-md { font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-line-height) var(--type-body-md-family); }
.type-body-sm { font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-line-height) var(--type-body-sm-family); letter-spacing: var(--type-body-sm-letter-spacing); }
.type-label-lg { font: var(--type-label-lg-weight) var(--type-label-lg-size)/var(--type-label-lg-line-height) var(--type-label-lg-family); letter-spacing: var(--type-label-lg-letter-spacing); }
.type-label-md { font: var(--type-label-md-weight) var(--type-label-md-size)/var(--type-label-md-line-height) var(--type-label-md-family); letter-spacing: var(--type-label-md-letter-spacing); text-transform: uppercase; }
.type-label-sm { font: var(--type-label-sm-weight) var(--type-label-sm-size)/var(--type-label-sm-line-height) var(--type-label-sm-family); }
.type-caption-md { font: var(--type-caption-md-weight) var(--type-caption-md-size)/var(--type-caption-md-line-height) var(--type-caption-md-family); }
.type-caption-sm { font: var(--type-caption-sm-weight) var(--type-caption-sm-size)/var(--type-caption-sm-line-height) var(--type-caption-sm-family); }

/* Icons: the phi is an SVG symbol (#phi). Arrows and the close mark are text glyphs today; see icons.html. */
.icon { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Elements: one button, one text button, one icon button, one field.
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-inline-md); min-height: 56px; padding: 0 var(--spacing-inset-lg); border: 0; border-radius: var(--shape-rounded); font: var(--type-label-lg-weight) var(--type-label-lg-size)/var(--type-label-lg-line-height) var(--type-label-lg-family); letter-spacing: var(--type-label-lg-letter-spacing); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-position var(--motion-replace-duration) var(--motion-replace-easing), background-color var(--motion-feedback-duration) var(--motion-feedback-easing), box-shadow var(--motion-feedback-duration) var(--motion-feedback-easing), scale var(--motion-feedback-duration) var(--motion-feedback-easing); }
.btn:active, .btn.is-pressed { scale: .98; }
.btn-primary { color: var(--color-fg-base-on-color); background: var(--color-bg-action-accent-primary-default) 0 0 / 200% 100%; box-shadow: var(--elevation-glow-accent); }
.btn-primary::after { content: "→"; transition: translate var(--motion-enter-duration) var(--motion-enter-easing); }
.btn-primary:hover, .btn-primary.is-hover { background-position: 100% 0; }
.btn-primary:hover::after, .btn-primary.is-hover::after { translate: 4px 0; }
.btn-primary:disabled, .btn-primary.is-loading { cursor: progress; }
.btn-primary:disabled::after, .btn-primary.is-loading::after { content: none; }
.btn-ghost { background: transparent; color: var(--color-fg-base-primary); box-shadow: 0 0 0 var(--border-control) var(--color-border-base-strong) inset; }
.btn-ghost:hover, .btn-ghost.is-hover { background: var(--color-bg-state-hover); }
.btn-ghost:active, .btn-ghost.is-pressed { background: var(--color-bg-state-pressed); }
.btn-s { min-height: var(--spacing-touch-min); padding: 0 var(--spacing-inset-md); font-size: .9rem; }   /* fix: was 40px, under the 44px tap target */
.btn-block { width: 100%; }
.btn.is-focus { outline: var(--border-focus) solid var(--color-focus-default); outline-offset: 3px; }

.text-btn { padding: var(--spacing-inset-xs) var(--spacing-inline-sm); border: 0; background: none; color: var(--color-fg-base-primary); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-base-strong); cursor: pointer; transition: text-decoration-color var(--motion-feedback-duration) var(--motion-feedback-easing); }
.text-btn:hover, .text-btn.is-hover { text-decoration-color: currentColor; }

.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--color-bg-state-hover); color: var(--color-fg-base-primary); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background-color var(--motion-feedback-duration) var(--motion-feedback-easing); }
.icon-btn:hover, .icon-btn.is-hover { background: var(--color-bg-state-pressed); }

/* Field: label, then the input on its line, then the error under the line. Variants: default, focus, error (.bad), optional (.opt in the label). */
.field { display: grid; padding-top: var(--spacing-inset-md); cursor: text; }
.field label { font: var(--type-label-sm-weight) var(--type-label-sm-size)/var(--type-label-sm-line-height) var(--type-label-sm-family); color: var(--color-fg-base-secondary); transition: color var(--motion-feedback-duration) var(--motion-feedback-easing); }
.field .opt { color: var(--color-fg-base-tertiary); }
.field input { width: 100%; height: 48px; padding: 0; border: 0; border-bottom: var(--border-control) solid var(--color-border-base-control); border-radius: 0; background: none; color: var(--color-fg-base-primary); font: var(--type-body-md-weight) var(--type-body-md-size)/1 var(--type-body-md-family); outline: none; transition: border-color var(--motion-feedback-duration) var(--motion-feedback-easing); }
.field input::placeholder { color: var(--color-fg-base-tertiary); }
.field input:focus, .field.is-focus input { border-bottom: var(--border-focus) solid var(--color-focus-default); }
.field-err { display: none; margin-top: var(--spacing-stack-sm); font: var(--type-caption-md-weight) var(--type-caption-md-size)/var(--type-caption-md-line-height) var(--type-caption-md-family); color: var(--color-fg-intent-negative); }
.field.bad label, .field.bad .field-err { color: var(--color-fg-intent-negative); }
.field.bad .field-err { display: block; animation: enter var(--motion-attention-duration) var(--motion-attention-easing); }
.field.bad input { border-bottom-color: var(--color-border-intent-negative); }
.code-input { letter-spacing: var(--type-letter-spacing-code); font-variant-numeric: tabular-nums; }
.fine { margin-top: var(--spacing-stack-sm); font: var(--type-caption-md-weight) var(--type-caption-md-size)/var(--type-caption-md-line-height) var(--type-caption-md-family); color: var(--color-fg-base-secondary); text-align: center; }
.fine.err { color: var(--color-fg-intent-negative); }
.going-line { margin-top: var(--spacing-stack-sm); text-align: center; color: var(--color-focus-default); font-weight: var(--type-weight-medium); }
.going-line:empty { display: none; }

/* ==========================================================================
   Header: one bar, both pages. PHILIA left, Powered by flow, then Log in and (once the hero button is gone) the primary.
   ========================================================================== */
.top { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-gap-sm); padding: calc(var(--spacing-inset-sm) + env(safe-area-inset-top)) var(--layout-page-margin) var(--spacing-inset-sm); background: var(--color-bg-base-overlay); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: var(--border-divider) solid var(--color-border-base-subtle); }
.brand { display: flex; align-items: center; gap: var(--spacing-gap-sm); min-width: 0; }
.mark { display: flex; align-items: center; gap: var(--spacing-gap-sm); color: var(--color-fg-base-primary); text-decoration: none; font: var(--type-label-md-weight) 14px/1 var(--type-label-md-family); letter-spacing: var(--type-label-md-letter-spacing); text-transform: uppercase; white-space: nowrap; }
.mark svg { width: 28px; height: 28px; }
.by { display: flex; align-items: center; gap: var(--spacing-inline-sm); padding-left: var(--spacing-inset-sm); border-left: var(--border-divider) solid var(--color-border-base-subtle); color: var(--color-fg-base-secondary); font: 500 12px/1 var(--type-family-secondary); white-space: nowrap; }
.by img { height: 15px; width: auto; }
.top-act { display: flex; align-items: center; gap: var(--spacing-gap-sm); }
.top-cta { display: none; }
.top.cta .top-cta { display: inline-flex; animation: enter var(--motion-enter-duration) var(--motion-enter-easing); }   /* shows once the hero button is gone */
@media (max-width: 420px) { .mark span, .top.cta [data-login], .top.cta .by { display: none; } }   /* phones: the phi alone; the button takes Log in's place */
@media (max-width: 380px) { .by { display: none; } }   /* the footer still credits flow */

/* ---------- Sun ---------- */
.sun { aspect-ratio: 1; border-radius: 50%; background: var(--color-bg-intent-accent-strong); box-shadow: var(--elevation-glow-sun); }

/* ==========================================================================
   Hero: the poster. Footage, PHILIA across the screen (never wraps), one line, one action.
   ========================================================================== */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-content: end; padding-block: var(--spacing-section-lg) var(--spacing-stack-lg); }
.hero > :not(.hero-video) { position: relative; z-index: 1; }
.wordmark { order: 9; pointer-events: none; white-space: nowrap; margin: var(--spacing-stack-lg) 0 0; font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-line-height) var(--type-display-lg-family); letter-spacing: var(--type-display-lg-letter-spacing); text-transform: uppercase; color: var(--color-fg-base-primary); width: 100%; text-align: center; }
.hero-line { position: relative; margin: var(--spacing-stack-lg) 0 0; max-width: 16ch; font: var(--type-headline-md-weight) var(--type-headline-md-size)/1.05 var(--type-headline-md-family); letter-spacing: var(--type-headline-md-letter-spacing); color: var(--color-fg-base-primary); text-wrap: balance; }
.hero-lead { margin: var(--spacing-stack-md) 0 0; max-width: var(--layout-content-reading-max-width); color: var(--color-fg-base-secondary); text-wrap: pretty; }
.hero-act { display: grid; gap: var(--spacing-gap-sm); margin-top: var(--spacing-stack-lg); }
.hero-when { margin: 0; font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-line-height) var(--type-body-sm-family); color: var(--color-fg-base-secondary); letter-spacing: var(--type-body-sm-letter-spacing); text-align: center; }
.invited { display: none; color: var(--color-focus-default); font-weight: var(--type-weight-medium); }
.invited.on { display: block; }
@media (min-width: 900px) {
  .hero-act { grid-template-columns: auto 1fr; align-items: center; gap: var(--spacing-gap-lg); justify-items: start; }
  .hero-when { text-align: left; }
}
.hero-video { position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; translate: -50% 0; object-fit: cover; opacity: .8; filter: blur(1px) sepia(.45) saturate(1.5) hue-rotate(-12deg) brightness(.6); -webkit-mask: linear-gradient(#000 35%, #0006 80%, #0000); mask: linear-gradient(#000 35%, #0006 80%, #0000); pointer-events: none; }
.wordmark span { display: inline-block; }   /* letters lift apart on scroll */

/* ==========================================================================
   Story: pinned, one line at a time, the sun rises.
   ========================================================================== */
.story { height: 420svh; view-timeline: --story block; }
.story-pin { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; }
.story-lines { position: relative; align-self: start; padding-top: clamp(120px, 22svh, 220px); }
.story-line { position: absolute; inset: clamp(120px, 22svh, 220px) var(--layout-page-margin) auto; max-width: 22ch; font: var(--type-headline-md-weight) var(--type-headline-md-size)/var(--type-line-height-heading) var(--type-headline-md-family); }
.story-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: blur(6px) saturate(1.2); mask-image: linear-gradient(to bottom, transparent, #000 40%); }
.story-pic { position: absolute; right: 12vw; bottom: 14svh; width: min(24vw, 260px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--shape-surface-raised); box-shadow: var(--elevation-shadow-4); opacity: 0; }
.story-pic:nth-of-type(2) { right: auto; left: 46vw; bottom: 22svh; }
.story-pic:nth-of-type(3) { right: 4vw; bottom: 34svh; width: min(18vw, 200px); }
@media (max-width: 700px) { .story-pic { width: 40vw; bottom: 10svh; } .story-pic:nth-of-type(2) { left: var(--layout-page-margin); bottom: 8svh; } .story-pic:nth-of-type(3) { width: 32vw; } }
.story-pin::after { content: ""; position: absolute; inset: auto 0 0; height: 18svh; background: linear-gradient(transparent, var(--color-bg-base-canvas)); pointer-events: none; }
.story-sun { position: absolute; left: 50%; bottom: 0; width: min(78vw, 520px); translate: -50% 92%; scale: .8; opacity: .55; }
.ticks { position: absolute; left: calc(var(--layout-page-margin) - 14px); top: clamp(124px, 22.4svh, 224px); display: grid; gap: var(--spacing-stack-xs); }
.ticks i { width: 3px; height: 22px; border-radius: 2px; background: var(--color-border-base-medium); }

/* ---------- The night: timeline ---------- */
.night-grid { display: grid; gap: var(--spacing-gap-xl); }
.timeline { list-style: none; margin: 0; padding: 0; border-top: var(--border-divider) solid var(--color-border-base-medium); }
.timeline li { display: grid; grid-template-columns: 5.5ch 1fr; gap: var(--spacing-gap-md); padding: var(--spacing-inset-lg) 0; border-bottom: var(--border-divider) solid var(--color-border-base-medium); font-size: var(--type-body-md-size); }
.timeline time, .timeline b { font: var(--type-title-sm-weight) 1em/1.3 var(--type-title-sm-family); color: var(--color-focus-default); }
.timeline a { color: var(--color-focus-default); text-underline-offset: 4px; }

/* ---------- Bring your friends ---------- */
.bring { position: relative; text-align: center; }
.bring .lead { margin-inline: auto; } .bring .btn { margin-top: var(--spacing-stack-lg); }

/* ---------- Questions: all open ---------- */
.faq { margin-top: var(--spacing-stack-lg); border-top: var(--border-divider) solid var(--color-border-base-medium); max-width: var(--layout-content-faq-max-width); }
.faq div { padding: var(--spacing-inset-md) 0; border-bottom: var(--border-divider) solid var(--color-border-base-medium); }
.faq h3 { font: var(--type-title-md-weight) var(--type-title-md-size)/var(--type-title-md-line-height) var(--type-title-md-family); color: var(--color-fg-base-primary); }
.faq p { color: var(--color-fg-base-secondary); margin-top: var(--spacing-stack-xs); max-width: 52ch; }
@media (min-width: 900px) { .faq div { display: grid; grid-template-columns: 2fr 3fr; gap: var(--spacing-gap-xl); padding: var(--spacing-inset-md) 0; } .faq p { margin: 0; } }

/* ---------- Last call ---------- */
.end { position: relative; isolation: isolate; min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding-block: var(--spacing-section-xl) var(--spacing-space-1000); }
.end-video { -webkit-mask: linear-gradient(#0000, #000 40%, #000 70%, #0000); mask: linear-gradient(#0000, #000 40%, #000 70%, #0000); }
.end p { color: var(--color-fg-base-secondary); margin-top: var(--spacing-stack-sm); }
.end .btn { margin-top: var(--spacing-stack-lg); }

/* ---------- Footer: flow, three quiet links, PHILIA fading into the night ---------- */
.foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--spacing-gap-lg) var(--spacing-gap-lg); padding: var(--spacing-inset-lg) var(--layout-page-margin) 0; background: var(--color-bg-base-canvas); overflow: hidden; }
.foot-flow { display: flex; align-items: center; gap: var(--spacing-inline-md); color: var(--color-fg-base-secondary); font: 500 var(--type-label-sm-size)/1 var(--type-family-secondary); text-decoration: none; }
.foot-flow img { height: 16px; width: auto; }
.foot-links { display: flex; gap: var(--spacing-gap-md); }
.foot-links a, .foot-links .text-btn { padding: var(--spacing-inset-xs) 0; color: var(--color-fg-base-secondary); font: 500 var(--type-body-sm-size)/1 var(--type-family-secondary); text-decoration: none; transition: color var(--motion-feedback-duration) var(--motion-feedback-easing); }
.foot-links a:hover, .foot-links .text-btn:hover { color: var(--color-fg-base-primary); }
.foot-mark { grid-column: 1 / -1; margin: 0 0 -.2em; white-space: nowrap; text-align: center; font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-line-height) var(--type-display-lg-family); text-transform: uppercase; background: linear-gradient(var(--color-fg-base-primary) 10%, rgb(243 237 228 / .06) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   Sheet: the whole screen on a phone, a centred pane (max 460) on a wide one. Opens as a circle from the button.
   The spot card stays put; only the step under it changes.
   ========================================================================== */
dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-bg-base-canvas); color: var(--color-fg-base-primary); overflow-y: auto; overscroll-behavior: contain; isolation: isolate;
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path var(--motion-replace-duration) var(--motion-replace-easing), display var(--motion-replace-duration) allow-discrete, overlay var(--motion-replace-duration) allow-discrete; }
dialog[open] { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); }
@starting-style { dialog[open] { clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); } }
dialog::backdrop { background: var(--color-bg-base-canvas); }
.dlg-video { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .14; filter: blur(12px) sepia(.4) saturate(1.3) hue-rotate(-12deg) brightness(.45); pointer-events: none; }
.dlg-in { width: min(100% - 2 * var(--layout-page-margin), var(--layout-pane-sheet-width)); margin: 0 auto; padding: max(var(--spacing-space-1000), 10svh) 0 calc(var(--spacing-space-800) + env(safe-area-inset-bottom)); }
dialog .close { position: fixed; z-index: 3; top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.sheet { animation: enter var(--motion-enter-duration) var(--motion-enter-easing); }
.sheet h2 { margin-top: var(--spacing-stack-xl); font: var(--type-headline-sm-weight) var(--type-headline-sm-size)/var(--type-headline-sm-line-height) var(--type-headline-sm-family); }
.sheet .lead { margin-top: var(--spacing-stack-sm); font-size: var(--type-body-md-size); max-width: none; }
.sheet form .btn { margin-top: var(--spacing-stack-lg); }
.sheet .lead a { color: var(--color-fg-base-primary); text-underline-offset: 3px; }
.fields { margin-top: var(--spacing-stack-sm); }
dialog[data-mode="login"] .field:not(:has([name="email"])) { display: none; }

/* ---------- Bring-box: seats and the invite ---------- */
.bring-box { margin-top: var(--spacing-stack-lg); padding-top: var(--spacing-inset-lg); border-top: var(--border-divider) solid var(--color-border-base-subtle); text-align: center; }
.bring-box h3 { font: var(--type-title-sm-weight) var(--type-title-sm-size)/var(--type-title-sm-line-height) var(--type-title-sm-family); }
.seats { display: flex; justify-content: center; gap: var(--spacing-gap-sm); margin: var(--spacing-stack-md) 0; }
.seats button { width: 46px; aspect-ratio: 1; padding: 0; border-radius: 50%; border: var(--border-scale-150) dashed var(--color-border-base-control); color: var(--color-fg-base-secondary); background: linear-gradient(currentColor 0 0) center / 14px 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 14px no-repeat; cursor: pointer; transition: border-color var(--motion-feedback-duration) var(--motion-feedback-easing), color var(--motion-feedback-duration) var(--motion-feedback-easing), scale var(--motion-feedback-duration) var(--motion-feedback-easing); }
.seats button:hover, .seats button.is-hover { border-color: var(--color-fg-intent-hover); color: var(--color-fg-intent-hover); }
.seats button:active { scale: .92; }
.seats button.on { border: 0; cursor: default; background: var(--color-bg-intent-accent-strong); box-shadow: var(--elevation-glow-seat); }

/* ==========================================================================
   Spot card (class .ticket in code): name, status, when and where, and the PHILIA stub.
   Paper on dark. Elevated plane. Variants: empty name, filled, status (.t-status text).
   ========================================================================== */
.ticket { position: relative; display: grid; grid-template-columns: 1fr auto; border-radius: var(--shape-surface-raised); background: var(--color-bg-base-inverse); color: var(--color-fg-base-inverse); box-shadow: var(--elevation-shadow-4);
  -webkit-mask: radial-gradient(circle 9px at calc(100% - 92px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 92px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 9px at calc(100% - 92px) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 92px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.t-main { padding: var(--spacing-inset-md); min-width: 0; }
.t-name { display: block; font: var(--type-title-lg-weight) var(--type-title-lg-size)/var(--type-title-lg-line-height) var(--type-title-lg-family); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--motion-feedback-duration) var(--motion-feedback-easing); }
.t-name.empty { color: var(--color-fg-base-inverse-tertiary); }
.t-main small { display: block; margin-top: var(--spacing-stack-sm); color: var(--color-fg-base-inverse-secondary); font-size: var(--type-body-sm-size); }
.t-stub { width: 72px; display: grid; place-items: center; align-content: center; gap: var(--spacing-gap-sm); border-left: var(--border-dashed) dashed var(--color-border-base-inverse); }
.t-status { display: block; margin-bottom: var(--spacing-stack-xs); font-weight: var(--type-weight-semibold); color: var(--color-fg-intent-inverse-accent); } .t-status:empty { display: none; }
.t-stub span { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font: var(--type-title-lg-weight) 1.5rem/1 var(--type-family-primary); letter-spacing: .12em; color: var(--color-bg-base-canvas); }

/* ==========================================================================
   Toast (new class; the site uses vanilla-sonner, restyled to match). Bottom right on wide screens, bottom full width on phones.
   Anatomy: .toast > .toast-title + .toast-body. Variants: default, .toast--negative.
   ========================================================================== */
.toast-region { position: fixed; z-index: 40; right: var(--spacing-inset-md); bottom: calc(var(--spacing-inset-md) + env(safe-area-inset-bottom)); display: grid; gap: var(--spacing-gap-sm); width: min(var(--layout-toast-width), 100% - 2 * var(--spacing-inset-md)); }
.toast { display: grid; gap: var(--spacing-stack-xs); padding: var(--spacing-inset-md); border: var(--border-container) solid var(--color-border-base-subtle); border-radius: var(--shape-overlay-base); background: var(--color-bg-base-elevated); color: var(--color-fg-base-primary); box-shadow: var(--elevation-plane-elevated); animation: enter var(--motion-enter-duration) var(--motion-enter-easing); }
.toast-title { font: var(--type-title-md-weight) var(--type-title-md-size)/var(--type-title-md-line-height) var(--type-title-md-family); }
.toast-body { font: var(--type-caption-md-weight) var(--type-caption-md-size)/var(--type-caption-md-line-height) var(--type-caption-md-family); color: var(--color-fg-base-secondary); }
.toast--negative { border-color: var(--color-border-intent-negative); } .toast--negative .toast-title { color: var(--color-fg-intent-negative); }
.spinner { width: 1.25em; height: 1.25em; border-radius: 50%; border: 2px solid var(--color-border-base-strong); border-top-color: var(--color-focus-default); animation: spin var(--motion-loading-duration) var(--motion-loading-easing) infinite; }
.btn-primary .spinner { border-color: rgb(26 12 15 / .25); border-top-color: var(--color-fg-base-on-color); }   /* fix: was amber on amber, invisible */

/* ==========================================================================
   Motion: native CSS, scroll-driven where the browser has it
   ========================================================================== */
@keyframes rise { from { opacity: 0; translate: 0 40px; } }
@keyframes scatter { to { translate: 0 var(--y); rotate: var(--r); opacity: 0; filter: blur(10px); } }
@keyframes line-out { 0%, 70% { opacity: 1; translate: 0 0; filter: blur(0); } 100% { opacity: 0; translate: 0 -24px; filter: blur(6px); } }
@keyframes line-in-out { 0% { opacity: 0; translate: 0 24px; filter: blur(6px); } 30%, 70% { opacity: 1; translate: 0 0; filter: blur(0); } 100% { opacity: 0; translate: 0 -24px; filter: blur(6px); } }
@keyframes line-in { from { opacity: 0; translate: 0 24px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes pic { 0% { opacity: 0; translate: 0 30svh; rotate: -8deg; scale: .7; border-radius: 50%; } 35% { opacity: 1; border-radius: var(--shape-surface-raised); } 50% { translate: 0 0; rotate: 2deg; scale: 1; } 70% { opacity: 1; border-radius: var(--shape-surface-raised); } 100% { opacity: 0; translate: 0 -30svh; rotate: 8deg; scale: .85; border-radius: 40% 60% 55% 45%; } }
@keyframes sunrise { to { translate: -50% 30%; scale: 1.12; opacity: 1; } }
@keyframes tick { to { background: var(--color-fg-intent-hot); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .wordmark span { animation: scatter linear both; animation-timeline: scroll(root); animation-range: 0 80svh; }
    .wordmark span:nth-child(1) { --y: -55%; --r: -6deg; }
    .wordmark span:nth-child(2) { --y: -130%; --r: 4deg; }
    .wordmark span:nth-child(3) { --y: -80%; --r: -3deg; }
    .wordmark span:nth-child(4) { --y: -160%; --r: 7deg; }
    .wordmark span:nth-child(5) { --y: -95%; --r: -5deg; }
    .wordmark span:nth-child(6) { --y: -140%; --r: 5deg; }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
    .story-line { opacity: 0; animation: line-in-out ease-in-out both; animation-timeline: --story; will-change: opacity, translate, filter; }
    .story-line:nth-child(1) { animation-name: line-out; animation-range: contain 0% contain 34%; }
    .story-line:nth-child(2) { animation-range: contain 26% contain 66%; }
    .story-line:nth-child(3) { animation-name: line-in; animation-range: contain 58% contain 70%; }
    .story-pic { animation: pic linear both; animation-timeline: --story; }
    .story-pic:nth-of-type(1) { animation-range: entry 40% contain 34%; }
    .story-pic:nth-of-type(2) { animation-range: contain 22% contain 62%; }
    .story-pic:nth-of-type(3) { animation-range: contain 40% contain 80%; }
    .story-sun { animation: sunrise ease-out both; animation-timeline: --story; animation-range: entry 60% contain 85%; }
    .ticks i { animation: tick linear both; animation-timeline: --story; }
    .ticks i:nth-child(1) { animation-range: contain 0% contain 1%; }
    .ticks i:nth-child(2) { animation-range: contain 30% contain 35%; }
    .ticks i:nth-child(3) { animation-range: contain 62% contain 67%; }
  }
}
/* Without scroll timelines (or with reduced motion) the story simply stacks: every line visible, nothing pinned. */
@supports not (animation-timeline: view()) {
  .story { height: auto; } .story-pin { position: static; height: auto; padding-bottom: 260px; }
  .story-line { position: static; margin-bottom: var(--spacing-stack-lg); } .ticks { display: none; } .story-sun { translate: -50% 40%; scale: 1; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .story { height: auto; } .story-pin { position: static; height: auto; padding-bottom: 260px; }
  .story-line { position: static; margin-bottom: var(--spacing-stack-lg); opacity: 1; } .ticks { display: none; } .story-sun { translate: -50% 40%; scale: 1; opacity: 1; }
  .hero-video, .dlg-video, .story-bg { display: none; }
}

/* ===== Refinements (founder: raise every part to premium; same direction) =====
   Each block says was / now / why in its comment. Tokens first, then rules. */
:root {
  --elevation-highlight: inset 0 1px 0 rgb(243 237 228 / .10);                 /* top-light edge: surfaces catch light from above */
  --elevation-glow-accent-hover: 0 16px 44px -14px var(--color-alpha-brand-450);
  --motion-stagger-step: 60ms;                                                  /* delay between siblings that arrive together */
  --motion-hover-lift: -1px;
}
/* Selection: was browser blue. now brand-400 on near-black. why: the one place the page still felt default. */
::selection { background: var(--color-bg-action-accent-primary-default); color: var(--color-fg-base-on-color); }
/* Reading text: was ragged. now balanced headlines and no orphans in body. why: premium typesetting costs nothing. */
p, li, .lead { text-wrap: pretty; }
.type-headline-md, .type-headline-sm, h1, h2 { text-wrap: balance; }
/* Numbers: was proportional. now tabular. why: times and dates align and never jitter. */
.timeline time, .timeline b, .hero-when, .going-line, .ticket small, .code-input { font-variant-numeric: tabular-nums; }
/* Primary button: was flat glow only. now top-light edge, lift on hover, deeper glow. why: it is the one action, it should feel pressable. */
.btn-primary { box-shadow: var(--elevation-glow-accent), var(--elevation-highlight); transition: translate var(--motion-feedback-duration) var(--motion-feedback-easing), box-shadow var(--motion-feedback-duration) var(--motion-feedback-easing), background-position var(--motion-duration-slow) var(--motion-easing-decelerate), scale var(--motion-feedback-duration) var(--motion-feedback-easing); }
.btn-primary:hover, .btn-primary.is-hover { translate: 0 var(--motion-hover-lift); box-shadow: var(--elevation-glow-accent-hover), var(--elevation-highlight); }
.btn-primary:active, .btn-primary.is-pressed { translate: 0 0; box-shadow: var(--elevation-glow-accent); }
/* Ghost button: was ring only. now ring plus the same edge light on hover. why: pairs with the primary. */
.btn-ghost:hover, .btn-ghost.is-hover { box-shadow: 0 0 0 var(--border-control) var(--color-border-base-strong) inset, var(--elevation-highlight); }
/* Field: was a static label. now label warms to accent while the field is active. why: tells you where you are. */
.field:focus-within label, .field.is-focus label { color: var(--color-fg-intent-accent); }
.field.bad:focus-within label { color: var(--color-fg-intent-negative); }
/* Toast and sheet panel: was a bare shadow. now edge light plus the elevated shadow pair. why: reads as a raised plane, not a sticker. */
.toast { box-shadow: var(--elevation-plane-elevated), var(--elevation-highlight); }
.toast--negative { box-shadow: var(--elevation-plane-elevated), var(--elevation-highlight), 0 0 0 var(--border-container) var(--color-border-intent-negative) inset; }
/* Spot card: was flat paper. now a soft sheen from the top edge. why: it is the one prize object, it should glow like paper under a lamp. */
.ticket { background: linear-gradient(180deg, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 46%), var(--color-bg-base-inverse); }
/* Timeline and FAQ rows: was static. now the time warms on hover. why: rows feel alive without moving. */
.timeline li { transition: background var(--motion-feedback-duration) var(--motion-feedback-easing); }
.timeline li:hover { background: linear-gradient(90deg, var(--color-alpha-light-100), transparent 70%); }
/* Stagger: new. siblings that arrive together enter 60ms apart. why: one calm sweep instead of a block pop. */
.stagger > * { animation: enter var(--motion-enter-duration) var(--motion-enter-easing) backwards; animation-delay: calc(var(--i, 0) * var(--motion-stagger-step)); }
@media (prefers-reduced-motion: reduce) { .stagger > * { animation: none; } .btn-primary:hover { translate: 0 0; } }

/* ===== From the approved screen and state boards (design/states/board.css): the rich spot card, error mark, ok status =====
   Moved into the system so the page builds on components, not one-offs. */
.ticket.rich { grid-template-columns: 1fr 84px; }
.ticket.rich::before { content: ""; position: absolute; inset: 8px; border: var(--border-divider) solid var(--color-border-base-inverse); border-radius: 10px; pointer-events: none; }
.ticket.rich .t-main { padding: 22px 20px 20px 24px; display: grid; align-content: start; }
.ticket.rich .t-status { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 0 0 12px; padding: 4px 10px; border-radius: var(--shape-rounded); background: var(--color-alpha-rust-150); font-size: .75rem; letter-spacing: .04em; }
.ticket.rich .t-status:empty { display: none; }
.ticket.rich .t-status.ok::before { content: ""; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 40deg; translate: 0 -1px; }
.ticket.rich .t-main small { margin-top: 10px; }
.ticket.rich .t-stub { width: auto; gap: 14px; padding-block: 24px; color: var(--color-bg-base-canvas); }
.field-err::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; background: var(--color-fg-intent-negative); color: var(--color-bg-base-canvas); font: 600 .62rem/1 var(--type-family-secondary); vertical-align: 1px; }
.field { position: relative; }

/* Phone-native touch: no grey tap flash, no 300ms double-tap delay on controls. */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, input, label { touch-action: manipulation; }

/* One edge for the whole hero: the wordmark fills the content column; the header lines up with the same column. */
.hero { container-type: inline-size; }
.wordmark { width: 100%; text-align: left; font-size: 24.2cqi; }   /* PHILIA is ~4.12em wide: 24.2cqi fills the column exactly */
.top { padding-inline: max(var(--layout-page-margin), calc((100% - var(--layout-content-constrained-max-width)) / 2 + var(--layout-page-margin))); }

/* Between sections: each one arrives as a whole (the replace intent), then its parts in order (enter + stagger). Scroll-driven, so it follows the thumb. */
@keyframes section-in { from { opacity: .25; scale: .94; clip-path: inset(10% 4% 0 round var(--shape-surface-raised)); filter: brightness(.5); } }
@keyframes rise { from { opacity: 0; translate: 0 calc(var(--motion-replace-distance) * 2.5); filter: blur(6px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > .section, main > .end { animation: section-in var(--motion-replace-easing) both; animation-timeline: view(); animation-range: entry 0% entry 60%; transform-origin: 50% 0; }
    .reveal { animation-range: entry calc(5% + var(--i, 0) * 6%) entry calc(55% + var(--i, 0) * 6%); }
    .reveal:nth-child(2) { --i: 1; } .reveal:nth-child(3) { --i: 2; } .reveal:nth-child(4) { --i: 3; } .reveal:nth-child(5) { --i: 4; }
    .faq > div, .getting-there { animation: rise var(--motion-enter-easing) both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
  }
}

/* Spot card: the stub label sets the card's height, so it stays small enough that the card hugs its content. */
.ticket.rich .t-stub span { font-size: 1.05rem; letter-spacing: .1em; }

/* Sign-up: you write on the ticket (Bence, 9 Nov 02:44). Inputs live on the paper; the plain name shows on the other steps. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
dialog:focus-visible { outline: none; }
.t-field { display: none; padding: 0; }
dialog:has([data-step="form"]:not([hidden])) .t-field { display: grid; }
dialog:has([data-step="form"]:not([hidden])) .t-name { display: none; }
dialog[data-mode="login"] .t-field-name { display: none; }
.t-field input { height: auto; padding: 2px 0 6px; color: var(--color-fg-base-inverse); border-bottom: var(--border-divider) dashed var(--color-border-base-inverse); caret-color: var(--color-fg-intent-inverse-accent); }
.t-field input::placeholder { color: var(--color-fg-base-inverse-tertiary); }
.t-field input:focus { border-bottom: var(--border-control) solid var(--color-fg-intent-inverse-accent); }
.t-field-name input { font: var(--type-title-lg-weight) var(--type-title-lg-size)/var(--type-title-lg-line-height) var(--type-title-lg-family); }
.t-field-email { margin-top: 18px; }
.t-field-email input { font-size: var(--type-body-md-size); }
.t-field .field-err { color: var(--color-fg-intent-inverse-accent); }
.t-field.bad input { border-bottom-color: var(--color-fg-intent-inverse-accent); }
[data-step="form"] .fields { margin-top: var(--spacing-stack-md); }
.add-phone { color: var(--color-fg-base-secondary); }
.sheet[data-step="form"] form .btn { margin-top: var(--spacing-stack-md); }
.sheet[data-step="form"] .going-line { color: var(--color-fg-base-secondary); font-weight: inherit; }
.t-main .t-field .field-err { display: none; margin-top: 6px; }
.t-main .t-field.bad .field-err { display: block; }