/* Kroki — marketing landing. Derives from shared/tokens.json (same values the SPA's
   app.css and the iOS DesignSystem use). Self-contained: the only external assets are the
   bundled OFL fonts in fonts.css. Mobile-first; the media queries scale UP to tablet/desktop.
   Neutrals do the layout; Vermillion is Kroki's only voice accent; the four colourways
   belong to the artwork, never to the UI chrome. */

:root {
  --paper:#F4F1E9; --card:#FCFAF3; --chalk:#E8E4D8; --stone:#A19B8C;
  --warm-grey:#6E695E; --ink:#17150F; --vermillion:#D6491F; --ultramarine:#2E5FE0;
  --marigold:#F0A800; --poppy:#D6491F; --cobalt:#2E5FE0; --leaf:#6FA544;

  /* Semantic, theme-aware */
  --bg:var(--paper); --surface:var(--card); --well:var(--chalk);
  --text:var(--ink); --text-2:var(--warm-grey); --text-3:var(--stone);
  --hairline:rgba(23,21,15,0.10); --strong:rgba(23,21,15,0.30);
  --shadow-card:0 4px 18px rgba(23,21,15,0.10);
  --shadow-print:0 18px 44px rgba(23,21,15,0.22);
  /* Primary button flips with the theme so it never goes dark-on-dark */
  --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-press:#33302A;

  /* The four bundled OFL families (fonts.css), with graceful fallbacks */
  --f-display:"Young Serif", Georgia, "Iowan Old Style", serif;
  --f-ui:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:"Space Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --f-hand:"Shantell Sans", "Bradley Hand", "Segoe Print", var(--f-ui);
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:var(--ink); --surface:#211E17; --well:#232019;
    --text:var(--paper); --text-2:#C9C3B4; --text-3:var(--stone);
    --hairline:rgba(244,241,233,0.14); --strong:rgba(244,241,233,0.34);
    --shadow-card:0 4px 18px rgba(0,0,0,0.45);
    --shadow-print:0 18px 44px rgba(0,0,0,0.6);
    --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-press:#E4DECF;
  }
}
:root[data-theme="light"] {
  --bg:var(--paper); --surface:var(--card); --well:var(--chalk);
  --text:var(--ink); --text-2:var(--warm-grey); --text-3:var(--stone);
  --hairline:rgba(23,21,15,0.10); --strong:rgba(23,21,15,0.30);
  --shadow-card:0 4px 18px rgba(23,21,15,0.10);
  --shadow-print:0 18px 44px rgba(23,21,15,0.22);
}
:root[data-theme="light"] { --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-press:#33302A; }
:root[data-theme="dark"] {
  --bg:var(--ink); --surface:#211E17; --well:#232019;
  --text:var(--paper); --text-2:#C9C3B4; --text-3:var(--stone);
  --hairline:rgba(244,241,233,0.14); --strong:rgba(244,241,233,0.34);
  --shadow-card:0 4px 18px rgba(0,0,0,0.45);
  --shadow-print:0 18px 44px rgba(0,0,0,0.6);
  --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-press:#E4DECF;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-ui); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:inherit; }
img, svg { max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }

.eyebrow {
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--vermillion); margin:0 0 18px;
}
.eyebrow.muted { color:var(--text-3); }
h1, h2, h3 { font-family:var(--f-display); font-weight:400; letter-spacing:-0.01em; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-ui); font-size:15px; font-weight:600;
  padding:15px 26px; border-radius:3px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg); text-decoration:none; cursor:pointer;
  transition:background .18s ease-out, transform .18s ease-out, border-color .18s ease-out;
}
.btn:hover { background:var(--btn-press); }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:transparent; color:var(--text); border-color:var(--strong); }
.btn.ghost:hover { background:transparent; border-color:var(--text); }

/* Nav */
nav { border-bottom:1px solid var(--hairline); position:sticky; top:0; background:var(--bg); z-index:20; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:60px; }
.wordmark { font-family:var(--f-display); font-size:23px; color:var(--text); text-decoration:none; }
.nav-links { display:flex; align-items:center; gap:22px; }
.nav-links a { font-size:14px; text-decoration:none; color:var(--text-2); }
.nav-links a:hover { color:var(--text); }
.nav-links a.btn { color:var(--btn-fg); }
.nav-links a:not(.btn) { display:none; }

/* Hero */
.hero { padding:56px 0 60px; }
.hero-grid { display:grid; grid-template-columns:1fr; gap:52px; align-items:center; }
.hero h1 { font-size:40px; line-height:1.05; margin:0 0 20px; }
.hero p.lede { font-size:17px; color:var(--text-2); margin:0 0 26px; max-width:30em; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 12px; }
.hero-cta .btn { padding:16px 28px; }
.form-note { font-family:var(--f-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin:8px 0 0; }
.colorway-dots { display:flex; align-items:center; gap:12px; margin:28px 0 4px; flex-wrap:wrap; }
.dot { width:22px; height:22px; border-radius:50%; }
.dot.sel { outline:2px solid var(--text); outline-offset:3px; }
.cw-label { font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); }

/* Hero art: framed colourway poster + museum wall-label + "now showing" stamp */
.hero-art { position:relative; display:flex; justify-content:center; padding:8px 4px 12px; }
.poster {
  width:100%; max-width:300px; background:var(--marigold);
  padding:30px 26px 22px; border-radius:2px; box-shadow:var(--shadow-print);
  transform:rotate(1.2deg); position:relative;
}
.poster .art { display:block; width:100%; }
.poster .art-title { font-family:var(--f-hand); font-size:26px; color:var(--ink); text-align:center; margin:12px 0 2px; }
.wall-label {
  position:absolute; right:0; bottom:-22px; width:148px;
  background:var(--card); color:var(--ink); border:1px solid rgba(23,21,15,0.18);
  padding:16px 18px 14px; transform:rotate(-2deg); box-shadow:var(--shadow-card);
}
.wall-label .wl-title { font-family:var(--f-mono); font-size:12px; letter-spacing:0.04em; }
.wall-label .wl-rule { height:1px; background:var(--ink); width:20px; margin:9px 0; }
.wall-label .wl-by { font-family:var(--f-mono); font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--warm-grey); }
.stamp {
  position:absolute; left:0; top:-16px; width:78px; height:78px; border-radius:50%;
  border:1.5px solid var(--vermillion); color:var(--vermillion);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--f-mono); font-size:8px; letter-spacing:0.16em; text-transform:uppercase;
  transform:rotate(-9deg); background:var(--bg); padding:8px; line-height:1.35;
}

/* Section scaffolding */
section { padding:60px 0; border-top:1px solid var(--hairline); }
.section-head { max-width:34em; margin:0 0 34px; }
.section-head h2 { font-size:29px; line-height:1.1; margin:0 0 8px; }
.section-head p { color:var(--text-2); margin:0; }

/* How it works */
.steps { display:grid; grid-template-columns:1fr; gap:16px; }
.step { background:var(--well); border:1px solid var(--hairline); border-radius:3px; padding:24px 22px; }
.step .num { font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; color:var(--vermillion); text-transform:uppercase; }
.step h3 { font-size:21px; margin:12px 0 8px; }
.step p { color:var(--text-2); font-size:15px; margin:0; }

/* Styles gallery — live-rendered swatches (the real art engine) */
.styles-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.style { background:var(--surface); border:1px solid var(--hairline); border-radius:3px; overflow:hidden; }
.style .swatch {
  display:block; width:100%; aspect-ratio:1/1; background:var(--well);
  object-fit:cover; border-bottom:1px solid var(--hairline);
}
.style .swatch.loading { background:linear-gradient(100deg, var(--well) 30%, var(--surface) 50%, var(--well) 70%); background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; }
.style .meta { padding:12px 14px 14px; }
.style .sn { font-family:var(--f-display); font-size:18px; }
.style .sd { color:var(--text-2); font-size:13px; margin-top:2px; line-height:1.45; }
.styles-foot { font-family:var(--f-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-top:22px; line-height:1.7; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* The credit — dark band */
.credit-band { background:var(--ink); color:var(--paper); border:none; text-align:center; }
.credit-band .eyebrow { color:var(--stone); }
.credit-band h2 { font-family:var(--f-display); font-size:29px; margin:0 auto 26px; max-width:16em; color:var(--paper); }
.signature { display:inline-block; text-align:center; }
.signature .sig-title { font-family:var(--f-hand); font-size:40px; color:var(--paper); }
.signature svg { display:block; margin:2px auto 8px; }
.signature .sig-by { font-family:var(--f-ui); font-weight:600; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:#C9C3B4; }
.credit-explain { color:#C9C3B4; max-width:34em; margin:30px auto 0; font-size:15px; }

/* Products */
.products { display:grid; grid-template-columns:1fr; gap:16px; }
.product { background:var(--well); border:1px solid var(--hairline); border-radius:3px; padding:24px 22px; display:flex; flex-direction:column; }
.product .pname { font-family:var(--f-display); font-size:22px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.product .price { font-family:var(--f-mono); font-size:16px; letter-spacing:0.02em; color:var(--text); }
.product .pdesc { color:var(--text-2); font-size:14.5px; margin:12px 0 0; }
.product .spec { font-family:var(--f-mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); margin:14px 0 0; line-height:1.7; }

/* Privacy promise */
.promise { display:grid; grid-template-columns:1fr; gap:18px; }
.promise .p { border-left:2px solid var(--vermillion); padding:2px 0 2px 16px; }
.promise .p h3 { font-family:var(--f-display); font-size:18px; margin:0 0 4px; }
.promise .p p { color:var(--text-2); font-size:14px; margin:0; }
.promise-recap { font-family:var(--f-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin-top:28px; line-height:1.7; }

/* Final CTA — marigold band */
.final { background:var(--marigold); color:var(--ink); border:none; position:relative; overflow:hidden; }
.final .eyebrow { color:#4a3d10; }
.final h2 { font-size:29px; line-height:1.08; margin:0 0 14px; max-width:14em; color:var(--ink); }
.final p { color:#4a3d10; max-width:32em; margin:0 0 24px; }
.final .final-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.final .btn { background:var(--ink); color:var(--marigold); }
.final .btn:hover { background:#33302A; }
.waitlist { display:flex; gap:10px; max-width:420px; flex-wrap:wrap; }
.waitlist input[type=email] {
  flex:1 1 200px; min-width:0; font-family:var(--f-ui); font-size:15px;
  padding:14px 16px; border-radius:3px; border:1px solid rgba(23,21,15,0.4);
  background:rgba(255,255,255,0.6); color:var(--ink);
}
.waitlist input[type=email]:focus { outline:2px solid var(--ultramarine); outline-offset:1px; }
.waitlist .btn { background:var(--ink); color:var(--marigold); }
.form-status { font-size:14px; color:#2f5f14; margin:12px 0 0; min-height:1.2em; font-weight:600; }
.final .bird { position:absolute; right:-24px; bottom:-30px; width:180px; opacity:.45; transform:rotate(-4deg); pointer-events:none; }

/* Footer */
footer { border-top:1px solid var(--hairline); padding:40px 0; }
.foot-inner { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.foot-wordmark { font-family:var(--f-display); font-size:17px; }
.foot-meta { font-family:var(--f-mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-3); }
.foot-links { display:flex; gap:26px; }
.foot-links a { font-size:13px; color:var(--text-2); text-decoration:none; padding:8px 0; }
.foot-links a:hover { color:var(--text); }

/* ---- Tablet / iPad (≥600) ---- */
@media (min-width:600px) {
  .wrap { padding:0 24px; }
  .hero h1 { font-size:52px; }
  .section-head h2, .credit-band h2, .final h2 { font-size:34px; }
  .steps { grid-template-columns:repeat(3,1fr); gap:20px; }
  .styles-grid { grid-template-columns:repeat(3,1fr); }
  .products { grid-template-columns:repeat(3,1fr); gap:20px; }
  .promise { grid-template-columns:repeat(2,1fr); }
  .foot-inner { flex-direction:row; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
  .foot-links a { padding:0; }
  .nav-links a:not(.btn) { display:inline; }
  .final .bird { width:220px; opacity:.55; }
}

/* ---- Desktop (≥900) ---- */
@media (min-width:900px) {
  nav .nav-inner { height:66px; }
  .hero { padding:84px 0 72px; }
  .hero-grid { grid-template-columns:1.05fr .95fr; gap:56px; }
  .hero h1 { font-size:62px; line-height:1.04; }
  .hero p.lede { font-size:18px; }
  section { padding:80px 0; }
  .section-head { margin-bottom:44px; }
  .section-head h2 { font-size:38px; }
  .credit-band h2, .final h2 { font-size:44px; }
  .promise { grid-template-columns:repeat(4,1fr); }
  .final .bird { width:300px; opacity:.9; right:-30px; bottom:-40px; }
  .wall-label { width:150px; bottom:-30px; }
}
@media (min-width:1181px) {
  .wall-label { right:-26px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}