/* ============ TOKENS ============ */
:root {
  --bg1:#0C1B26; --bg2:#123041;
  --glow1:#D9A845; --glow2:#3E7FA6;
  --accent:#E3B658; --accent-ink:#101114;
  --ink:#F2EDE3; --muted:#9DAAB0;
  --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.11);
  --log-bg:#071019;
  --focus:#E3B658;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg1:#F0F4F5; --bg2:#DEE9EC;
    --glow1:#C9974F; --glow2:#7FB0C4;
    --accent:#8A6410; --accent-ink:#FFFFFF;
    --ink:#14232E; --muted:#54666F;
    --card:rgba(255,255,255,.72); --line:rgba(20,35,46,.14);
    --log-bg:#14232E;
    --focus:#8A6410;
  }
}
:root[data-theme="light"] {
  --bg1:#F0F4F5; --bg2:#DEE9EC;
  --glow1:#C9974F; --glow2:#7FB0C4;
  --accent:#8A6410; --accent-ink:#FFFFFF;
  --ink:#14232E; --muted:#54666F;
  --card:rgba(255,255,255,.72); --line:rgba(20,35,46,.14);
  --log-bg:#14232E;
  --focus:#8A6410;
}

/* ============ FONTS ============ */
@font-face { font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

/* ============ BASE ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme: dark light; }
body {
  font-family:Inter, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 460px at 78% -8%, color-mix(in srgb, var(--glow2) 16%, transparent), transparent 70%),
    radial-gradient(760px 300px at 12% 4%, color-mix(in srgb, var(--glow1) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 130%);
  background-attachment: fixed;
  min-height:100vh;
  transition: background .35s, color .35s;
}
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
main { max-width:1080px; margin:0 auto; }

.stars { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.65;
  background-image:
    radial-gradient(1px 1px at 12% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 8%,  rgba(255,255,255,.32) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 20%, rgba(255,255,255,.38) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 30%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 34%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 4%,  rgba(255,255,255,.32) 50%, transparent 51%);
}
:root[data-theme="light"] .stars { opacity:0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .stars { opacity:0; } }
body > * { position:relative; z-index:1; }

/* ============ NAV / FOOTER ============ */
.nav { max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:26px 28px; }
.mark { display:flex; align-items:center; gap:13px; }
.mark .sq { width:36px; height:36px; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; border-radius:8px; font-family:'Space Grotesk'; font-weight:700; font-size:14px; backdrop-filter:blur(4px); }
.mark .nm { font-family:'Space Grotesk'; font-weight:500; font-size:16px; }
.nav .links { display:flex; gap:26px; align-items:center; font-size:14px; font-weight:500; color:var(--muted); }
.nav .links a:hover { color:var(--ink); }
.theme-toggle { background:none; border:1px solid var(--line); color:var(--muted); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:15px; line-height:1; }
.theme-toggle:hover { color:var(--ink); border-color:var(--ink); }
.foot { max-width:1080px; margin:0 auto; padding:34px 28px; font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.14em; color:var(--muted); opacity:.8; }

/* ============ HERO ============ */
.hero { padding:64px 28px 30px; max-width:820px; }
.hero .kicker { font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; }
.hero .headline { font-family:'Instrument Serif'; font-weight:400; font-size:clamp(38px, 6.4vw, 66px); line-height:1.05; letter-spacing:-.5px; }
.hero .headline em { font-style:italic; color:var(--accent); }
.hero .sub { margin-top:22px; font-size:17px; color:var(--muted); line-height:1.65; max-width:540px; }

/* ============ SHIPPING LOG ============ */
.ship { margin:38px 28px 0; border:1px solid var(--line); background:var(--log-bg); color:#F2EDE3; border-radius:12px; padding:16px 24px; display:flex; align-items:center; gap:22px; overflow-x:auto; }
.ship .lbl { font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.16em; color:var(--glow1); white-space:nowrap; }
.ship .log { font-family:'JetBrains Mono'; font-size:12px; color:#B8C4CE; white-space:nowrap; }
.ship .log b { color:#F2EDE3; font-weight:500; }

/* ============ APP CARDS ============ */
.cardgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; padding:34px 28px 8px; }
.appcard { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; backdrop-filter:blur(6px); position:relative; transition:transform .2s, border-color .2s, box-shadow .2s; }
.appcard:hover { border-color:color-mix(in srgb, var(--accent) 55%, transparent); transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.35); color:inherit; }
.appcard .ver { position:absolute; top:20px; right:20px; font-family:'JetBrains Mono'; font-size:10px; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:4px; }
.appcard h3 { font-family:'Space Grotesk'; font-size:18px; font-weight:700; letter-spacing:-.3px; padding-right:56px; }
.appcard p { margin-top:9px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.appcard .go { margin-top:16px; font-size:13px; font-weight:600; color:var(--accent); }

/* ============ TEASER ============ */
.teaser { margin:34px 28px 0; border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:14px; padding:28px; }
.teaser .eyebrow { font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.teaser h2 { font-family:'Instrument Serif'; font-weight:400; font-size:30px; }
.teaser p { margin-top:10px; color:var(--muted); font-size:15px; line-height:1.65; max-width:560px; }
.teaser a { color:var(--accent); font-weight:600; }

/* ============ SUBPAGES ============ */
.pagehead { padding:56px 28px 12px; max-width:820px; }
.pagehead .kicker { font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.pagehead h1 { font-family:'Instrument Serif'; font-weight:400; font-size:clamp(34px, 5vw, 52px); line-height:1.08; }
.pagehead .tagline { margin-top:12px; color:var(--muted); font-size:17px; }
.prose { padding:14px 28px 56px; max-width:680px; font-size:16px; line-height:1.75; }
.prose p + p { margin-top:1em; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); font-family:'Space Grotesk'; font-weight:700; font-size:14px; border-radius:9px; padding:12px 26px; margin-top:20px; }
.btn:hover { color:var(--accent-ink); filter:brightness(1.08); }

/* ============ ERROR ============ */
.errbox { padding:110px 28px; max-width:640px; }
.errbox .kicker { font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.3em; color:var(--accent); }
.errbox h1 { font-family:'Instrument Serif'; font-weight:400; font-size:44px; margin-top:14px; }
.errbox .sub { margin-top:12px; color:var(--muted); line-height:1.65; }

/* ============ MOTION — "quietly alive" ============ */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.reveal { animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
.reveal-2 { animation:rise .6s cubic-bezier(.2,.7,.2,1) .12s both; }
.reveal-3 { animation:rise .6s cubic-bezier(.2,.7,.2,1) .24s both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}