/* ============================================================
   OurNG design system — "Lamplight"
   One token file shared by every page. The marketing site, the
   Studio shell and the Market all draw from here; page-specific
   styles layer on top and never redefine a token.
   Approved 2026-07-10 (redesign plan v1).
   NOTE: index.html inlines a full copy of this file (LCP: no
   render-blocking request) — update that copy when editing here.
   ============================================================ */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
/* Newsreader carries the story voice (italic 400) and display
   headlines (600, opsz 72). Instrument Sans is the product/UI
   voice. JetBrains Mono is the machinery: stats, dice, logic. */
@font-face{
  font-family:'Newsreader Display';
  src:url('/assets/fonts/newsreader-display.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:optional;
}
@font-face{
  font-family:'Newsreader';
  src:url('/assets/fonts/newsreader-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:optional;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('/assets/fonts/instrument-sans-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:optional;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:optional;
}

/* ---------- tokens ---------- */
:root{
  /* inks — blue-black grounds, same temperature as the accent */
  --ink0:#0a0d13;          /* page */
  --ink1:#11151e;          /* raised surface */
  --ink2:#1a2029;          /* higher surface / hover */
  --ink3:#242c38;          /* strongest surface */

  /* paper — warm text, the parchment heritage without the texture */
  --paper:#e8e4da;         /* primary text */
  --paper2:#c3c1b8;        /* secondary text */
  --mist:#969cab;          /* muted text, 15px+ only */
  --faint:#808896;         /* captions, metadata — lightest tier that still clears AA on ink0/ink1 */

  /* the one accent */
  --glacier:#8cc5f0;
  --glacier-bright:#a5d3f5;
  --glacier-deep:#4a7fae;
  --on-glacier:#081420;

  /* semantic only — never decoration */
  --ok:#7dba8f;
  --warn:#d9a05b;
  --err:#c96b67;

  /* lines */
  --line:rgba(140,197,240,.14);
  --line-paper:rgba(232,228,218,.10);

  /* type */
  --f-display:'Newsreader Display',Georgia,serif;
  --f-story:'Newsreader',Georgia,serif;
  --f-ui:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',Consolas,monospace;
  /* scale ×1.25 from 13 */
  --fs-0:13px; --fs-1:16px; --fs-2:20px; --fs-3:25px;
  --fs-4:31px; --fs-5:39px; --fs-6:49px; --fs-7:61px;

  /* spacing, 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* shape */
  --r-s:6px; --r-m:10px; --r-l:14px; --r-pill:999px;
  --shadow-1:0 4px 18px rgba(0,0,0,.35);
  --shadow-2:0 24px 70px rgba(0,0,0,.55);

  /* motion — three durations, one easing family */
  --t-fast:120ms; --t-med:240ms; --t-slow:400ms;
  --ease:cubic-bezier(.3,.7,.3,1);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--ink0);color:var(--paper);
  font-family:var(--f-ui);font-size:var(--fs-1);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(140,197,240,.30)}
:focus-visible{outline:2px solid var(--glacier);outline-offset:2px;border-radius:2px}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 var(--sp-5)}

/* ---------- voices ---------- */
/* story voice: serif italic, second person — demos and section leads */
.voice-story{font-family:var(--f-story);font-style:italic}
/* machinery: stats, dice, logic — anywhere the engine shows its workings */
.voice-mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- typography helpers ---------- */
h1,h2,h3,h4{text-wrap:balance;margin:0}
.display{font-family:var(--f-display);font-weight:600;line-height:1.05;letter-spacing:-.01em}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--glacier);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--f-ui);font-size:15px;font-weight:600;line-height:1;
  padding:14px 24px;border-radius:var(--r-m);border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--glacier);color:var(--on-glacier)}
.btn-primary:hover{background:var(--glacier-bright)}
.btn-ghost{border-color:var(--line);color:var(--paper);background:transparent}
.btn-ghost:hover{border-color:var(--glacier);background:rgba(140,197,240,.08)}
.btn-quiet{color:var(--mist);padding:14px 10px}
.btn-quiet:hover{color:var(--paper)}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} }

/* ---------- badge ---------- */
.badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glacier);
  border:1px solid rgba(140,197,240,.32);border-radius:var(--r-pill);padding:4px 11px;
}

/* ---------- cards ---------- */
.card{
  background:var(--ink1);border:1px solid var(--line-paper);border-radius:var(--r-l);
  padding:var(--sp-5);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
a.card:hover,.card.hoverable:hover{border-color:var(--line);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){ a.card:hover,.card.hoverable:hover{transform:none} }

/* ---------- stat HUD (the engine speaking) ---------- */
.hud{
  display:flex;gap:var(--sp-5);flex-wrap:wrap;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;letter-spacing:.04em;color:var(--faint);
}
.hud b{color:var(--glacier);font-weight:500}

/* ---------- section head ---------- */
.shead{max-width:62ch;margin-bottom:var(--sp-7)}
.shead .eyebrow{display:block;margin-bottom:var(--sp-3)}
.shead h2{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4.5vw,var(--fs-5));line-height:1.12}
.shead p{font-family:var(--f-story);font-style:italic;font-size:var(--fs-2);color:var(--mist);margin:var(--sp-3) 0 0}

/* ---------- forms ---------- */
.field label{
  display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint);margin:0 0 6px;
}
.field input,.field textarea,.field select{
  width:100%;padding:11px 13px;border-radius:var(--r-s);
  background:var(--ink0);border:1px solid var(--line-paper);
  color:var(--paper);font-family:var(--f-ui);font-size:15px;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--glacier)}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--line-paper);padding:var(--sp-4) 0}
details.faq summary{
  cursor:pointer;font-weight:600;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';color:var(--glacier);font-size:22px;font-weight:400;flex:none}
details.faq[open] summary::after{content:'−'}
details.faq p{color:var(--paper2);max-width:68ch;margin:var(--sp-3) 0 0}

/* ---------- book cards + shelf grid (hub, Market) ---------- */
.shelf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
@media (max-width:760px){.shelf-grid{grid-template-columns:1fr 1fr;gap:var(--sp-3)}}
@media (max-width:480px){.shelf-grid{grid-template-columns:1fr}}
.bookcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink1);border:1px solid var(--line-paper);border-radius:var(--r-l);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.bookcard:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:var(--shadow-1)}
@media (prefers-reduced-motion:reduce){ .bookcard:hover{transform:none} }
.bookcard .bc-cover{
  /* fixed height, not aspect-ratio: portrait cover images otherwise stretch
     the flex column to their intrinsic height and the card grows huge */
  position:relative;height:170px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 130% at 50% 0%,var(--ink3),var(--ink0));
  border-bottom:1px solid var(--line-paper);padding:var(--sp-4);text-align:center;
}
.bookcard .bc-cover.has{padding:0}
.bookcard .bc-cover img{width:100%;height:100%;object-fit:cover}
.bookcard .bc-cover .ct{font-family:var(--f-display);font-weight:600;font-size:var(--fs-2);line-height:1.15}
.bookcard .bc-price{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  background:rgba(10,13,19,.82);border:1px solid var(--line);color:var(--glacier);
  border-radius:var(--r-pill);padding:3px 10px;backdrop-filter:blur(4px);
}
.bookcard .bc-body{padding:var(--sp-4);display:flex;flex-direction:column;flex:1;gap:var(--sp-2)}
.bookcard .bc-tag{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--glacier)}
.bookcard h3{font-family:var(--f-display);font-weight:600;font-size:var(--fs-2);line-height:1.2}
.bookcard h3 .bmk{display:inline-block;width:12px;height:12px;margin-left:7px;vertical-align:-1px}
.bookcard h3 .bmk svg{display:block;width:100%;height:100%;fill:var(--glacier)}
.bookcard .bc-meta{font-size:13.5px;color:var(--mist);line-height:1.55;margin:0;flex:1}
.bookcard .bc-go{font-size:13.5px;font-weight:600;color:var(--paper2)}
.bookcard:hover .bc-go{color:var(--glacier)}

/* ---------- quote card (held until real testimonials exist) ---------- */
.quote{border-left:2px solid var(--glacier);padding:var(--sp-2) 0 var(--sp-2) var(--sp-5)}
.quote blockquote{font-family:var(--f-story);font-style:italic;font-size:var(--fs-2);margin:0;color:var(--paper)}
.quote cite{display:block;font-style:normal;font-family:var(--f-ui);font-size:14px;color:var(--faint);margin-top:var(--sp-3)}

/* ---------- floating nav ---------- */
.nav-float{
  position:sticky;top:var(--sp-3);z-index:40;margin:var(--sp-3) auto 0;
  max-width:1032px;width:calc(100% - 32px);
  display:flex;align-items:center;gap:var(--sp-2);
  padding:9px 10px 9px 14px;border-radius:var(--r-l);
  /* solid-ish ink, no backdrop-filter: the blur costs real main-thread time
     on low-end mobiles for a subtle effect */
  background:rgba(17,21,30,.94);border:1px solid var(--line-paper);
  box-shadow:var(--shadow-1);
}
.nav-float .logo{display:flex;align-items:center;flex:none}
/* no light-on-dark wordmark exists yet — the chip keeps the navy logo legible */
.nav-float .logo img{height:30px;width:auto;background:#e9eef5;border-radius:8px;padding:5px 10px;object-fit:contain}
.nav-float .links{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav-float .links a{
  padding:8px 13px;border-radius:var(--r-s);font-size:14px;font-weight:500;color:var(--mist);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav-float .links a:hover{color:var(--paper);background:var(--ink2)}
.nav-float .links a.cta{background:var(--glacier);color:var(--on-glacier);font-weight:600;padding:8px 16px;border-radius:var(--r-s)}
.nav-float .links a.cta:hover{background:var(--glacier-bright)}
/* signed-in avatar (pre-paint via html.authed, reconciled on load) */
.nav-float .links a.avatar{
  width:32px;height:32px;padding:0;border-radius:50%;background:var(--glacier);
  color:var(--on-glacier);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
}
.nav-float .links a.avatar:hover{background:var(--glacier-bright)}
.nav-float .links a.avatar img{width:100%;height:100%;object-fit:cover;background:none;border-radius:0;padding:0}
html.authed .nav-float .links #navsignin{
  width:32px;height:32px;padding:0;border-radius:50%;
  background:var(--glacier);color:transparent;font-size:0;overflow:hidden;
}
html.authed #navmybooks{display:inline-block !important}
@media (max-width:640px){
  .nav-float .links a:not(.cta):not(#navsignin):not(#navmybooks){display:none}
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line-paper);padding:var(--sp-7) 0 var(--sp-8);margin-top:var(--sp-9)}
.site-foot .cols{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);text-align:center}
.site-foot img.wordmark{width:140px;background:#e9eef5;border-radius:var(--r-m);padding:11px 16px}
.site-foot .made{font-family:var(--f-story);font-style:italic;color:var(--mist);font-size:14px}
.site-foot .legal{display:flex;gap:var(--sp-4);font-size:13px;flex-wrap:wrap;justify-content:center}
.site-foot .legal a{color:var(--mist)}
.site-foot .legal a:hover{color:var(--paper)}
.site-foot .dom{font-size:13px;color:var(--faint)}
.site-foot .dom b{color:var(--glacier);font-weight:600}

/* ---------- account panel (shared hub/nav component) ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(6,8,12,.66);backdrop-filter:blur(3px);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);
}
.acct{
  background:var(--ink1);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--sp-5);width:360px;max-width:100%;max-height:86vh;overflow:auto;
  box-shadow:var(--shadow-2);
}
.acct h3{font-family:var(--f-display);font-weight:600;font-size:var(--fs-3);margin:0 0 4px}
.acct .em{font-size:13px;color:var(--mist);margin:0 0 var(--sp-4)}
.acct .stat{font-size:14px;color:var(--paper2);margin:0 0 var(--sp-2)}
.acct .studio-link{display:block;margin-top:var(--sp-4);font-size:13px;color:var(--glacier)}
.acct .msg{font-size:12.5px;color:var(--mist);min-height:16px;margin-top:var(--sp-3)}
.acct .acts{display:flex;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4)}
.acct .btn{padding:10px 18px;font-size:14px}
/* Writer upsell card (shown to readers in the account panel) */
.upsell{border:1px solid rgba(140,197,240,.4);background:rgba(140,197,240,.07);
  border-radius:var(--r-m);padding:var(--sp-4);margin:var(--sp-3) 0 var(--sp-1)}
.upsell .u-price{font-family:var(--f-display);font-weight:600;font-size:21px;color:var(--paper)}
.upsell .u-price small{font-family:var(--f-ui);font-size:12px;color:var(--mist);font-weight:400}
.upsell p{font-size:13px;color:var(--paper2);line-height:1.55;margin:6px 0 12px}
.upsell .btn{width:100%;justify-content:center}