/*
 * base.css — the shared floor under all four directions: fonts, the type scale, spacing, and the few components
 * every page uses (media frames, labels, citations, prompt cards, the motion control, toast, lightbox).
 *
 * TYPE RULE (owner, universal): zoomed out and scaled down — small text, generous space. Desktop headings
 * 20–28 px, body and labels 12–13 px, meta 11–12 px; phone text 11–13 px. Drama comes from media, motion and
 * whitespace, never from bigger type. Inputs stay 16 px and touch targets stay ≥ 44 px (hit area, not text size).
 * A direction restyles through the custom properties below; it never raises the scale.
 */

/* Fonts: each page links the families it uses from shared/fonts/<family>.css (data: URIs, so they load from
   file:// too — studio/build-fonts.mjs writes them). */

/* ── Tokens (a direction overrides these on :root) ────────────────────────────────────────────────────── */
:root {
  --fs-meta: 11px;
  --fs-small: 12px;
  --fs-body: 13px;
  --fs-lead: 14px;
  --fs-h3: 16px;
  --fs-h2: 22px;
  --fs-h1: 28px;
  --lh-tight: 1.12;
  --lh-body: 1.6;
  --track-caps: 0.14em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 4.2vw, 72px);
  --maxw: 1760px;
  --radius: 14px;
  --tap: 44px;

  --bg: #0b0b0c;
  --fg: #f3efe8;
  --muted: color-mix(in oklab, var(--fg) 62%, var(--bg));
  --line: color-mix(in oklab, var(--fg) 14%, transparent);
  --accent: #e9b46a;
  --focus: #7cc4ff;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --font-ui: 'Inter Tight', system-ui, sans-serif;
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@media (max-width: 640px) {
  :root { --fs-h1: 22px; --fs-h2: 19px; --fs-h3: 15px; --fs-lead: 13px; --fs-body: 13px; }
}

/* ── Reset ────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--fs-body) / var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; font-size: 16px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sv-skip { position: fixed; left: var(--s-4); top: var(--s-4); z-index: 1000; padding: 10px 14px; background: var(--fg); color: var(--bg); border-radius: 8px; font-size: var(--fs-small); transform: translateY(-200%); }
.sv-skip:focus { transform: none; }

/* ── Layout helpers ───────────────────────────────────────────────────────────────────────────────────── */
.sv-wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sv-caps { font-size: var(--fs-meta); letter-spacing: var(--track-caps); text-transform: uppercase; }
.sv-muted { color: var(--muted); }
.sv-tap { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }

/* ── Media frames ─────────────────────────────────────────────────────────────────────────────────────── */
.sv-media { position: relative; overflow: hidden; background: var(--media-bg, #111); isolation: isolate; }
.sv-media img, .sv-media > video { width: 100%; height: 100%; object-fit: var(--fit, cover); object-position: var(--pos, 50% 50%); }
.sv-media > picture { display: contents; }
.sv-img { background-size: cover; background-position: center; }
.sv-img--alpha { background: none !important; }
.sv-media img.sv-poster { position: absolute; inset: 0; z-index: 0; }
.sv-media > .sv-video { position: relative; z-index: 1; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.sv-media > .sv-video.is-playing, .sv-media > .sv-video.is-ready { opacity: 1; }
.sv-play {
  position: absolute; z-index: 2; inset: auto auto var(--s-3) var(--s-3); min-width: var(--tap); min-height: var(--tap);
  display: none; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase;
}
.sv-media.is-tap-to-play .sv-play { display: inline-flex; }

/* Honesty labels: AI illustration · concept · sample data · real photo */
.sv-label {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  font: 500 var(--fs-meta) / 1.3 var(--font-ui); letter-spacing: 0.04em;
  background: rgb(0 0 0 / 0.5); color: rgb(255 255 255 / 0.86); backdrop-filter: blur(6px);
}
.sv-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.sv-media > .sv-label { position: absolute; z-index: 3; right: var(--s-3); bottom: var(--s-3); }

/* Citations */
.sv-cite { font-size: var(--fs-meta); color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong, var(--line)); text-underline-offset: 3px; }
.sv-cite:hover { color: var(--fg); text-decoration-color: currentColor; }
/* The outbound arrow is drawn, not typed: ↗ is outside the embedded font subsets and fell back to a system face. */
.sv-cite::after {
  content: ''; display: inline-block; inline-size: 0.62em; block-size: 0.62em; margin-inline-start: 0.32em; vertical-align: 0.02em;
  background: currentColor; -webkit-mask: var(--sv-arrow-out) center / contain no-repeat; mask: var(--sv-arrow-out) center / contain no-repeat;
}
:root { --sv-arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 7.8 7.6 2.4M3.4 2.2h4.4v4.4' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E"); }
/* Touch screens: a 44 px hit area around small links without moving the layout. */
@media (pointer: coarse) { .sv-cite { display: inline-block; padding-block: 13px; margin-block: -13px; } }

/* ── Prompt card (the anatomy of a real prompt) ───────────────────────────────────────────────────────── */
.sv-prompt { font: 400 var(--fs-small) / 1.55 var(--font-mono); }
.sv-prompt dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.sv-prompt dt { color: var(--accent); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 1px; }
.sv-prompt dd { color: color-mix(in oklab, var(--fg) 86%, transparent); overflow-wrap: anywhere; }
.sv-prompt__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-meta); }
.sv-copy { min-height: var(--tap); padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font: 500 var(--fs-meta) / 1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.sv-copy:hover { border-color: currentColor; }
@media (max-width: 640px) { .sv-prompt dl { grid-template-columns: 1fr; gap: 2px; } .sv-prompt dd { margin-bottom: 8px; } }

/* ── Reveal (a direction may replace it with its own GSAP motion) ─────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--delay, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
html.no-js [data-reveal] { opacity: 1; transform: none; }
.sv-nowrap { white-space: nowrap; }
/* Boot (core.js): hidden until the page has rendered from content.js; shown after 2.5 s regardless. */
html.sv-boot body { visibility: hidden; animation: sv-boot 0s 2.5s forwards; }
@keyframes sv-boot { to { visibility: visible; } }

/* ── Motion control (WCAG 2.2.2: anything moving > 5 s can be paused) ─────────────────────────────────── */
.sv-motion {
  position: fixed; z-index: 900; left: max(var(--s-3), env(safe-area-inset-left)); bottom: max(var(--s-3), env(safe-area-inset-bottom));
  min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px;
  border-radius: 999px; background: var(--motion-bg, rgb(20 20 22 / 0.72)); color: var(--motion-fg, #fff); border: 1px solid rgb(255 255 255 / 0.12);
  font: 500 var(--fs-meta) / 1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px);
}
.sv-motion__icon { width: 10px; height: 10px; display: inline-grid; grid-auto-flow: column; gap: 3px; }
.sv-motion__icon::before, .sv-motion__icon::after { content: ''; width: 3px; background: currentColor; border-radius: 1px; }
html[data-motion='paused'] .sv-motion__icon { gap: 0; }
html[data-motion='paused'] .sv-motion__icon::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; background: none; }
html[data-motion='paused'] .sv-motion__icon::after { display: none; }
html[data-motion='paused'] *, html[data-motion='paused'] *::before, html[data-motion='paused'] *::after { animation-play-state: paused !important; }
/* In a page bar: a quiet round icon button; the label stays for screen readers. */
.sv-motion--bar { position: static; width: var(--tap); padding: 0; border-radius: 50%; background: transparent; color: var(--fg); border: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sv-motion--bar:hover { border-color: var(--fg); }
.sv-motion--bar [data-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Toast + lightbox ─────────────────────────────────────────────────────────────────────────────────── */
.sv-toast {
  position: fixed; z-index: 1000; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom)); transform: translate(-50%, 140%);
  padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: var(--fs-small);
  transition: transform 0.5s var(--ease-out); pointer-events: none;
}
.sv-toast.is-on { transform: translate(-50%, 0); }

.sv-lightbox { border: 0; padding: 0; width: min(96vw, 1600px); max-height: 92vh; background: transparent; color: #fff; overflow: visible; }
.sv-lightbox::backdrop { background: rgb(6 6 8 / 0.88); }
.sv-lightbox__frame { position: relative; display: grid; gap: var(--s-3); }
.sv-lightbox__frame img, .sv-lightbox__frame video { width: 100%; max-height: 82vh; object-fit: contain; border-radius: 10px; background: #000; }
.sv-lightbox__close { position: absolute; top: -52px; right: 0; min-width: var(--tap); min-height: var(--tap); border-radius: 999px; background: rgb(255 255 255 / 0.1); font-size: 18px; }
.sv-lightbox__caption { font-size: var(--fs-small); color: rgb(255 255 255 / 0.78); }

/* ── Performance tier: on 'lite' devices the expensive layers step down ───────────────────────────────── */
html[data-perf='lite'] .sv-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-perf='lite'] .sv-lite-hide { display: none !important; }