/* ==========================================================================
   Ember — foundation
   Fonts, tokens and base components, taken from the app itself
   (Ember-App: lib/theme/ember_tokens.dart, shell_tokens.dart,
   widgets/ember_button.dart, widgets/ember_mark.dart) so the site and the
   app are one visual system.
   ========================================================================== */

/* ---- fonts: self-hosted from the app's own files (tools/build_fonts.py) -- */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}
/* metric-matched local fallbacks, so the font swap doesn't shift the layout */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial");
  size-adjust: 98%;
  ascent-override: 98%;
  descent-override: 26%;
}

/* ---- tokens (the app's, verbatim) -------------------------------------- */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg0: #110b07;        /* deepest */
  --bg1: #1b130f;        /* base */
  --surface: #251c17;    /* inputs, low cards */
  --surface2: #322722;   /* raised */
  --card: #1d1511;
  --hairline: #352c27;
  --warm-glow: #352112;
  --line: rgb(98 85 78 / 0.45);
  --line-soft: rgb(109 96 89 / 0.18);

  /* the accent */
  --ember: #f2913c;
  --ember-deep: #dd5d2c;
  --ember-hi: #f9c880;
  --ember-ink: #2c1204;
  --accent-line: #de8639;
  --glow-hue: 203 104 0; /* #CB6800, the button glow */

  /* text */
  --text-hi: #f6efe8;
  --text: #ded4cc;
  --text-mid: #a99b92;
  --text-low: #81736a;

  /* fills */
  --accent-fill: linear-gradient(135deg, var(--ember-hi) 0%, var(--ember) 46%, var(--ember-deep) 100%);
  --ghost-fill: rgb(54 43 38 / 0.5);
  --chip-wash: rgb(168 91 5 / 0.10);
  --page-bg: linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 64%, var(--bg0) 100%);

  /* control boundaries: --line is 1.35:1 on --bg0 (fine for dividers, too
     faint for an input or button edge — WCAG 1.4.11 wants 3:1) */
  --line-strong: #8a7b72;

  /* washes, always built on the deep ember #A85B05 */
  --wash-tile: rgb(168 91 5 / 0.14);
  --wash-border-soft: rgb(201 121 51 / 0.36);

  /* "Night Paper": the board card (Ember-App widgets/ember_card.dart) */
  --paper-top: #2f241c;
  --paper-bottom: #281e18;
  --paper-border: rgb(95 71 56 / 0.5);
  --paper-inset: rgb(223 202 178 / 0.10);
  --paper-ghost: rgb(188 103 12 / 0.20);
  --paper-ink: #c2b5ab;
  --paper-hairline: rgb(103 80 64 / 0.35);
  --stamp-border: rgb(181 108 45 / 0.5);

  /* "Letter": the card-detail sheet */
  --letter-top: #31251d;
  --letter-bottom: #281e18;
  --letter-border: rgb(105 79 61 / 0.55);
  --letter-inset: rgb(223 202 178 / 0.12);
  --letter-ghost: rgb(188 103 12 / 0.16);
  --letter-rule: rgb(142 104 81 / 0.6);
  --letter-ink: #cfc1b8;
  --letter-glow: rgb(116 60 1 / 0.22);
  --dropcap-glow: rgb(230 129 27 / 0.45);

  /* the island: the app's floating tab bar, reused as the site header */
  --island: rgb(26 18 13 / 0.92);
  --island-border: rgb(123 91 73 / 0.30);
  --island-shadow: 0 12px 34px rgb(1 0 0 / 0.55);

  /* the flourish: the app's only divider */
  --flourish-hair: rgb(142 104 81 / 0.5);
  --flourish-glow: rgb(226 131 45 / 0.6);

  /* type */
  --display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --ui: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* radii */
  --r-card: 24px;
  --r-button: 16px;
  --r-input: 15px;
  --r-chip: 14px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);      /* emphasized */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-press: 180ms;
  --t-reveal: 700ms;
  --t-breathe: 5500ms;

  /* layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 72px;
}

/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 32px); /* island height + its 12px inset + air */
}
/* the page is lighter at the top and settles into --bg0, like every app screen */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--page-bg); pointer-events: none; }
body {
  min-height: 100vh;
  background: var(--bg0);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
::selection { background: rgb(242 145 60 / 0.32); color: var(--text-hi); }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 450;
  color: var(--text-hi);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
p { text-wrap: pretty; }
em, .accent {
  font-family: var(--display);
  font-style: italic;
  font-weight: 450;
  color: var(--ember-hi);
}

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-button);
  background: var(--surface2); color: var(--text-hi); text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip:focus { top: 12px; }

/* ---- buttons: the app's .btn-primary / .btn-ghost ----------------------- */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h);
  padding: 0 26px;
  border-radius: var(--r-button);
  font-family: var(--ui);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  transition: transform var(--t-press) var(--ease), box-shadow 260ms var(--ease),
    background-color 260ms var(--ease), border-color 260ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent-fill);
  color: var(--ember-ink);
  border-top: 1px solid rgb(251 233 200 / 0.5);
  box-shadow: 0 10px 26px rgb(var(--glow-hue) / 0.54), 0 2px 8px rgb(40 13 4 / 0.4);
}
.btn-primary:hover { box-shadow: 0 14px 34px rgb(var(--glow-hue) / 0.66), 0 2px 8px rgb(40 13 4 / 0.4); }
.btn-ghost {
  background: var(--ghost-fill);
  color: var(--text-hi);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: rgb(222 134 57 / 0.55); background: rgb(54 43 38 / 0.75); }
.btn-sm { --h: 44px; padding: 0 18px; font-size: 15px; border-radius: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; filter: saturate(0.6); box-shadow: none; cursor: default; }

/* ---- the Ember orb (widgets/ember_mark.dart: bloom, core, rim) ---------- */
.orb {
  --s: 28px;
  position: relative;
  isolation: isolate;
  width: var(--s); height: var(--s);
  flex: none;
  border-radius: 50%;
  background: radial-gradient(79.7% 79.7% at 50% 38%,
    var(--ember-hi) 0%, var(--ember) 36%, var(--ember-deep) 78%, #852a12 100%);
  box-shadow: 0 0 calc(var(--s) * 0.8) rgb(237 135 37 / 0.55);
}
.orb::before { /* bloom */
  content: ""; position: absolute; inset: calc(var(--s) * -0.9); border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgb(253 158 50 / 0.5) 0%, rgb(206 101 0 / 0.26) 45%, transparent 100%);
  pointer-events: none;
}
.orb::after { /* rim light */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 72%, rgb(255 215 145 / 0.08) 86%, rgb(255 215 145 / 0.25) 100%);
}
.orb.breathe { animation: breathe var(--t-breathe) ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.08); }
}

/* ---- device frame for the real app screenshots (393x852 @3x) ------------ */
.device {
  --sw: 300px;                       /* screen width */
  position: relative;
  width: calc(var(--sw) * 1.074);
  padding: calc(var(--sw) * 0.037);
  border-radius: calc(var(--sw) * 0.172);
  background: linear-gradient(155deg, #3a2e27 0%, #1a1310 38%, #0c0806 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 236 214 / 0.10),
    inset 0 1px 0 rgb(255 236 214 / 0.16),
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 50px 90px -30px rgb(0 0 0 / 0.75),
    0 24px 40px -24px rgb(0 0 0 / 0.6);
  flex: none;
}
.device img {
  width: 100%;
  aspect-ratio: 393 / 852;
  border-radius: calc(var(--sw) * 0.135);
  background: var(--bg1);
}
.device::after { /* Dynamic Island */
  content: "";
  position: absolute;
  top: calc(var(--sw) * 0.065);
  left: 50%;
  translate: -50% 0;
  width: calc(var(--sw) * 0.318);
  height: calc(var(--sw) * 0.094);
  border-radius: var(--r-pill);
  background: #000;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
}

/* ---- reveal-on-scroll (only hides when JS is running) ------------------- */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
/* same specificity as .js .rv and after it, so its transition shorthand
   doesn't reset the stagger back to 0 */
.js .rv-2 { transition-delay: 90ms; }
.js .rv-3 { transition-delay: 180ms; }
.js .rv-4 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .orb.breathe { animation: none; }
  .btn, .btn:active { transition: none; transform: none; }
  .skip { transition: none; }
}
/* the page's own "Pause animations" control (WCAG 2.2.2) */
.still .orb.breathe { animation: none; }