/* House style for Quaintscience micro-SaaS apps, taken from the live sites:
   Akshouini (EB Garamond headlines, paper + lapis + vermilion) and Quaintrade (Noto Sans UI, JetBrains Mono numbers,
   ink + bone + amber). Light mode is Akshouini's paper; dark mode is Quaintrade's ink.
   Re-skin an app through --accent (and at most --accent-2); leave the rest alone. Fonts are subset (~36 KB per page). */
@font-face { font-family: 'EBG'; font-weight: 400; font-display: swap; src: url('../fonts/ebgaramond-regular.woff2') format('woff2'); }
@font-face { font-family: 'EBG'; font-weight: 500; font-display: swap; src: url('../fonts/ebgaramond-medium.woff2') format('woff2'); }
@font-face { font-family: 'EBG'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/ebgaramond-italic.woff2') format('woff2'); }
@font-face { font-family: 'JBM'; font-weight: 400; font-display: swap; src: url('../fonts/jetbrainsmono-regular.woff2') format('woff2'); }

/* Quaint Cards: Akshouini's world (akshouini.quaintscience.com). Lapis night with grain; teal is the ink of the app,
   vermilion is intent (the one action); EB Garamond for everything: a book face, not a tech face. Matte: no glow.
   The card itself is paper (cards.css): a sheet on the night. One theme; there is no light/dark switch. */
:root {
  --lapis: #0a1240; --lapis-lo: #040820; --lapis-ink: #101a52; --paper: #ebe8e2; --paper-hi: #fbfaf9;
  --verm: #e23b1a; --verm-hi: #ff6a3d; --verm-ink: #c4301a;
  --teal: #00a89c; --teal-hi: #6fe0d6; --teal-ink: #007d74;
  --ink: #0b1014; --ink-hi: #141b22; --bone: #e9e2d4; --amber: #f8b041; --amber-deep: #d47e0f; --slate: #5b6b7a;

  --bg: var(--lapis);
  --surface: rgba(16, 26, 82, 0.72);           /* lapis-ink panel */
  --fg: var(--teal-hi);
  --fg-strong: #dff7f4;
  --muted: rgba(206, 240, 236, 0.66);
  --line: rgba(111, 224, 214, 0.22);
  --accent: var(--verm);
  --accent-fg: #fff7f2;
  --ok: var(--teal-hi);
  --warn: var(--amber);
  --bad: var(--verm-hi);

  --serif: 'EBG', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: var(--serif);                         /* Akshouini sets everything in Garamond */
  --display: var(--serif);
  --mono: 'JBM', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --radius: 14px;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--lapis-lo); } /* behind the gradient: never grey */
body { margin: 0; min-height: 100svh; color: var(--fg); font: 400 19px/1.55 var(--serif);
  background: radial-gradient(120% 900px at 50% 0%, #1a2266 0%, var(--lapis) 45%, var(--lapis-lo) 100%) no-repeat var(--lapis-lo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
/* film grain, as on akshouini.quaintscience.com */
body::before { content: ''; position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body > * { position: relative; z-index: 1; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.05; letter-spacing: -0.005em; margin: 0 0 0.35em; color: var(--fg-strong); }
h1 { font-size: clamp(38px, 7vw, 72px); }
h2 { font-size: clamp(28px, 4.4vw, 44px); }
h3 { font: 500 14px/1.3 var(--serif); letter-spacing: 0.32em; text-transform: uppercase; margin: 0 0 0.8em; color: var(--muted); }
em { font-family: var(--serif); font-style: italic; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.center { min-height: 100svh; display: grid; place-items: center; padding: var(--gutter); text-align: center; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* one obvious primary action per screen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--accent-fg);
  font: 500 18px/1 var(--serif); letter-spacing: 0.06em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.4s var(--ease), background 0.3s, border-color 0.3s; }
.btn:hover { background: var(--verm-ink); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: rgba(10, 18, 64, 0.35); color: var(--fg); border-color: rgba(111, 224, 214, 0.45); }
.btn.ghost:hover { border-color: var(--teal-hi); background: rgba(10, 18, 64, 0.55); }
.btn.lg { min-height: 58px; padding: 0 34px; font-size: 21px; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn[disabled] { opacity: 0.5; cursor: default; }
:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }

.field { display: grid; gap: 6px; text-align: left; font-size: 15px; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(4, 8, 32, 0.5); color: var(--fg-strong); font: 400 19px/1.4 var(--serif); }
.field input::placeholder, .field textarea::placeholder { color: rgba(206, 240, 236, 0.4); }
.field input:focus, .field textarea:focus { border-color: var(--teal-hi); outline: none; }
.err { color: var(--bad); font-size: 15px; min-height: 1.4em; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }

/* a short status line instead of modals */
.toast { font-family: var(--serif); position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
  opacity: 0; pointer-events: none; background: var(--paper); color: var(--lapis); padding: 12px 20px; border-radius: 999px;
  font-size: 15px; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* "Made with" mark on shared pages (removed on paid) */
.madewith { display: inline-block; margin: 48px auto 24px; font: 400 13px/1 var(--sans); color: var(--muted); text-decoration: none; }
.madewith b { font: 500 15px/1 var(--serif); color: var(--fg); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Long-form pages (privacy, terms): one readable column */
.prose { max-width: 720px; padding-top: 40px; padding-bottom: 24px; }
.prose h1 { margin-bottom: 0.15em; }
.prose h2 { font-size: clamp(24px, 3.4vw, 30px); margin: 1.6em 0 0.4em; }
.prose p, .prose li { line-height: 1.55; }
.prose ul { padding-left: 1.1em; margin: 0 0 1em; }
.prose li { margin: 0 0 0.5em; }
.prose b { color: var(--fg-strong); font-weight: 500; }
.prose a { color: var(--fg-strong); }
.prose-foot { max-width: 720px; padding-top: 24px; padding-bottom: max(40px, env(safe-area-inset-bottom)); font-size: 15px; color: var(--muted); }
.prose-foot a { color: var(--muted); }