/* The standalone story page: its chrome only (the bar, the theme toggle, the skip link).
   The story itself is the shared component in ../styles/story.css. */

:root {
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --u-type: 1; --u-text: 1; --u-leading: 1; --u-measure: 1; --u-space: 1; --u-radius: 1; --u-motion: 1;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: calc(240ms * var(--u-motion));
}

html[data-theme='light'] {
  --bg: #ebe4d9;
  --text: #28241f;
  --text-2: #49433b;
  --text-3: #5e574d;
  --accent: #7a4f2c;
  --surface: rgba(248, 244, 237, .9);
  --line: rgba(40, 36, 31, .14);
  --scrim-a: rgba(235, 228, 217, .82);
  --scrim-b: rgba(235, 228, 217, 0);
  --shadow: 0 1px 2px rgba(60, 44, 28, .06), 0 12px 32px -12px rgba(60, 44, 28, .22);
  --tick: rgba(40, 36, 31, .3);
}
html[data-theme='dark'] {
  --bg: #14110e;
  --text: #ede7dc;
  --text-2: #c7bfb2;
  --text-3: #a39a8c;
  --accent: #d6b086;
  --surface: rgba(26, 22, 18, .84);
  --line: rgba(237, 231, 220, .12);
  --scrim-a: rgba(20, 17, 14, .78);
  --scrim-b: rgba(20, 17, 14, 0);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -16px rgba(0, 0, 0, .7);
  --tick: rgba(237, 231, 220, .28);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 calc(16px * var(--u-text)) / calc(1.6 * var(--u-leading)) var(--font-body);
  background: var(--bg);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 30; padding: 8px 12px;
  background: var(--surface); color: var(--text); border-radius: 8px; transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: none; }

/* ── Chrome ───────────────────────────────────────────────────────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 3vw, 36px) 14px;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.home {
  font: italic 400 20px/1 var(--font-display); text-decoration: none; color: var(--text);
  letter-spacing: -.01em;
}
.seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.seg button {
  display: grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-checked='true'] { background: var(--text); color: var(--bg); }

.noscript { position: relative; z-index: 30; max-width: 32rem; margin: 30vh auto; padding: 0 24px; }

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