/* ============================================================
   Base: reset, type scale (two jumps only), buttons, utilities.
   Every value comes from tokens/dist/tokens.css. No magic hex.
   Shape rule: pills for actions (buttons, chips), 22px for surfaces and inputs, 28px for dialogs.
   Motion rule: only transform and opacity move; durations use semantic tokens so
   prefers-reduced-motion collapses them to ~0 automatically.
   ============================================================ */
:root {
  --display-size: clamp(var(--p-font-size-6xl), 1.5rem + 8.4vw, var(--p-font-size-9xl));
  --utility-size: var(--type-label-size);
  --ease-out: var(--p-easing-out-expo);
  --ease-move: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-step: calc(var(--motion-ui-duration-slow) + var(--motion-ui-duration-micro) * 0.667);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --dock-h: calc(var(--nav-height-mobile) + var(--safe-b));
  --pad-room: var(--space-section);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--color-surface-base); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
:focus-visible { outline: var(--border-width-strong) solid var(--color-border-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-accent-default); color: var(--color-text-on-accent); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 8px; inset-inline-start: 8px; z-index: var(--z-cursor); padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--color-accent-default); color: var(--color-text-on-accent); font-weight: var(--p-font-weight-semibold);
  transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Placeholder CONFIG fields (rendered ember until the studio fills them in) */
.ph { color: var(--color-highlight-warm); text-decoration: underline dashed var(--color-highlight-warm); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

.ic { width: var(--p-size-icon-sm); height: var(--p-size-icon-sm); flex: none; }
[dir="rtl"] .ic-flip, [dir="rtl"] .lb__prev .ic, [dir="rtl"] .lb__next .ic, [dir="rtl"] #wizBack .ic, [dir="rtl"] #wizNext .ic { transform: scaleX(-1); }

/* ---- Type: display (italic Cormorant) and utility. Nothing in between. ---- */
.display {
  font-family: var(--font-family-display);
  font-style: italic;
  font-weight: var(--type-hero-weight);
  font-size: var(--display-size);
  line-height: var(--p-font-leading-tight);
  letter-spacing: var(--p-font-tracking-tight);
  padding-block-end: 0.12em; /* descender clearance for y g j p q in translated words */
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.label, .num {
  font-family: var(--font-family-body);
  font-size: var(--utility-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-leading);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--p-font-tracking-wide); color: var(--color-text-accent); }
.line, .hero__line, .chapter__line, .step__line, .studio__line {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--color-text-secondary);
  max-width: min(32ch, var(--size-measure));
  text-wrap: pretty;
}

/* ---- Buttons ---- */
.btn, .pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline-sm);
  min-height: var(--size-touch-target);
  padding-inline: var(--button-primary-pad-x);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-body);
  font-size: var(--utility-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--border-width-hairline) solid transparent;
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--motion-ui-duration-micro);
  transition-timing-function: var(--button-primary-easing);
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .pill:active, .dock__btn:active, .chip:active, .tile:active, .size:active, .seg:active { transform: scale(0.96); }
.btn--solid, .pill--solid { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.btn--ghost, .pill--ghost { color: var(--button-ghost-fg); border-color: var(--button-ghost-border); background: var(--color-scrim-default); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover, .pill--solid:hover { background: var(--button-primary-bg-hover); box-shadow: var(--button-primary-shadow-hover); }
  .btn--ghost:hover, .pill--ghost:hover { border-color: var(--button-ghost-border-hover); background: var(--button-ghost-bg-hover); }
}
.btn[hidden], .pill[hidden] { display: none; }

/* ---- Grain (fixed, static, never on scrolling containers) ---- */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: var(--opacity-grain);
  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='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ---- Loader ---- */
.loader { position: fixed; inset: 0; z-index: calc(var(--z-grain) + 1); background: var(--color-surface-void); display: grid; place-items: center; }
.loader__mark { font-family: var(--font-family-display); font-style: italic; font-size: var(--p-font-size-5xl); color: var(--color-text-accent); opacity: 0.9; }
html.no-motion .loader { display: none; }

/* ---- Rooms share a rhythm ---- */
main { display: block; }
section { position: relative; }

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