/* The design system for the rebuilt pages. One world: lacquer, gold, ivory.
   The proof pages load this first, then proof.css. The home page and
   /obavia.html live in game.css. */

:root {
  --lacquer: #0a0d0b;
  --deep: #060807;
  --panel: #101512;
  --panel-2: #141a16;
  --edge: #252724;
  --edge-2: #34372f;
  --ivory: #efe8d8;
  --link: #c9c2b2;
  --dim: #8f8a7c;
  --gold: #c9a642;
  --gold-2: #e0c065;
  --gold-ink: rgba(201, 166, 66, 0.85);
  --gold-wash: rgba(201, 166, 66, 0.08);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --u: 12px;
  --pad: clamp(20px, 5.6vw, 88px);
  --measure: 62ch;
  --h1: clamp(52px, 8.4vw, 96px);
  --h2: clamp(36px, 5.2vw, 64px);
  --h3: clamp(24px, 2.4vw, 32px);
  --body: 15px;
  --small: 13px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --cut: 280ms;

  --bar-h: 64px;
  --dock-h: 0px;
  --z-bars: 60;
  --z-chrome: 50;
  --z-dialog: 80;
  color-scheme: dark;
}
@media (max-width: 760px) { :root { --dock-h: 60px; --bar-h: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
dialog:not([open]) { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--lacquer); }
@media (prefers-reduced-motion: no-preference) { html:not([data-still]) { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--lacquer); color: var(--ivory);
  font: 400 var(--body)/1.62 var(--sans); letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--dock-h);
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: rgba(201, 166, 66, 0.55); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-2); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: -0.005em; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; color: var(--gold); }
::selection { background: rgba(201, 166, 66, 0.3); color: var(--ivory); }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Texture: one static grain tile, one static vignette */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.grain { opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

main, header, footer, nav, section { position: relative; z-index: 2; }

/* Type helpers */
.label { font: 500 11px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--link); }

/* Buttons: pill, gold primary, dark secondary, quiet ghost */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px;
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--edge); background: var(--panel);
  color: var(--link); font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { border-color: var(--gold); color: var(--ivory); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--lacquer); font-weight: 600; }
.btn--gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--lacquer); }

@media (max-width: 560px) { .btn { white-space: normal; text-align: center; line-height: 1.3; } }
.btn:disabled { opacity: 0.4; pointer-events: none; }

/* Chips: answers and proof links. A sentence of buttons, never a card grid. */

/* Ink: a hand-drawn gold stroke that draws itself */

/* Line masks: text rises out of an invisible slot */

/* Letterbox bars: the film grammar. --bars 0 open, 1 closed */
.bars { position: fixed; left: 0; right: 0; height: 9vh; background: var(--deep); z-index: var(--z-bars); pointer-events: none; transform: scaleY(var(--bars, 0)); transition: transform .7s var(--ease-io); }

/* Top bar */

/* Mobile dock */

/* Menu sheet */

/* Dialogs and drawers: opaque, never glass */
dialog { color: var(--ivory); }
dialog::backdrop { background: rgba(6, 8, 7, 0.86); }

.x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; color: var(--link); }
.x:hover { border-color: var(--gold); color: var(--ivory); }
.x::before, .x::after { content: ""; grid-area: 1 / 1; width: 14px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.x::after { transform: rotate(-45deg); }

/* The cut through black: a full-screen black frame for hard cuts */

/* Toast */

/* Still: every scene in its finished state */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   iOS grammar: springs, press states, the island, banners,
   sheets with a grabber, grouped lists, app icons
   ============================================================ */
:root { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --spring-soft: cubic-bezier(0.22, 1.2, 0.36, 1); --r-ios: 22px; --r-sm: 14px; }
.btn, .x { transition-property: transform, background-color, border-color, color, opacity; transition-duration: .45s; transition-timing-function: var(--spring); -webkit-tap-highlight-color: transparent; }
.btn:active, .x:active { transform: scale(0.95); transition-duration: .12s; transition-timing-function: var(--ease); }
.btn:hover { transform: translateY(-1px) scale(1.01); }

/* The island: a black pill at the top that springs open with a status */

/* Notification banner, lock-screen style */

/* App icons: squircle tiles for real logos */

/* Grouped lists, iOS settings style */
.group { border-radius: var(--r-ios); background: var(--panel); border: 1px solid var(--edge); overflow: hidden; }
.group > li { border-top: 1px solid var(--edge); }
.group > li:first-child { border-top: 0; }

/* Sheets: a grabber, and drag down to dismiss on phones */