/* Seriesly marketing — shared stylesheet.
   Editorial-paper system. Themes mirror in-app: Linen / Vellum / Quartz / Mist / Grain / Slate / Ink / Char.
   Tokens drive everything. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root,
[data-theme="linen"] {
  /* Linen — default light, warm paper */
  --paper:        #F2ECDD;
  --paper-deep:   #E8E1CE;
  --paper-rule:   #D9D0B8;
  --ink:          #1C1A15;
  --ink-soft:     #5B544A;
  --ink-faint:    #8F8775;
  --rule:         rgba(28, 26, 21, 0.14);
  --hair:         rgba(28, 26, 21, 0.08);
  --accent:       #7A4A26;        /* burnt sienna / taupe */
  --accent-soft:  rgba(122, 74, 38, 0.10);
  --chrome:       rgba(242, 236, 221, 0.82);
  --figure-bg:    #ECE4CF;
  --figure-rule:  rgba(28, 26, 21, 0.16);
}

[data-theme="vellum"] {
  --paper:        #EFE7D2;
  --paper-deep:   #E4DAC0;
  --paper-rule:   #D2C5A6;
  --ink:          #2A2418;
  --ink-soft:     #6B5F46;
  --ink-faint:    #998B6D;
  --rule:         rgba(42, 36, 24, 0.14);
  --hair:         rgba(42, 36, 24, 0.08);
  --accent:       #8E5A1A;
  --accent-soft:  rgba(142, 90, 26, 0.10);
  --chrome:       rgba(239, 231, 210, 0.82);
  --figure-bg:    #E9DFC4;
  --figure-rule:  rgba(42, 36, 24, 0.16);
}

[data-theme="ink"] {
  --paper:        #15110E;
  --paper-deep:   #1E1813;
  --paper-rule:   #2A221B;
  --ink:          #ECE3D2;
  --ink-soft:     #A89C87;
  --ink-faint:    #6E6357;
  --rule:         rgba(236, 227, 210, 0.14);
  --hair:         rgba(236, 227, 210, 0.08);
  --accent:       #D88A4A;
  --accent-soft:  rgba(216, 138, 74, 0.12);
  --chrome:       rgba(21, 17, 14, 0.82);
  --figure-bg:    #1B1611;
  --figure-rule:  rgba(236, 227, 210, 0.14);
}

[data-theme="slate"] {
  --paper:        #2B3038;
  --paper-deep:   #232830;
  --paper-rule:   #383E47;
  --ink:          #E6E8EC;
  --ink-soft:     #A4ABB6;
  --ink-faint:    #6C7480;
  --rule:         rgba(230, 232, 236, 0.14);
  --hair:         rgba(230, 232, 236, 0.08);
  --accent:       #E4A857;
  --accent-soft:  rgba(228, 168, 87, 0.12);
  --chrome:       rgba(43, 48, 56, 0.82);
  --figure-bg:    #313740;
  --figure-rule:  rgba(230, 232, 236, 0.14);
}

/* ── globals ────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Paper grain + dial micro-texture — extremely subtle, woven into the background.
   SVG noise as a base64-data-uri so the site can ship as a single CSS file. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.65;
}
[data-theme="ink"] body::before,
[data-theme="slate"] body::before { mix-blend-mode: screen; opacity: 0.35; }

/* Figure backgrounds get a finer brushed-dial texture, like a Grand Seiko Mt. Iwate finish. */
.figure, .price-card, .brief {
  background-image:
    repeating-linear-gradient(
      92deg,
      transparent 0 2px,
      rgba(28,26,21,0.018) 2px 3px,
      transparent 3px 7px
    );
}
[data-theme="ink"] .figure,
[data-theme="ink"] .price-card,
[data-theme="ink"] .brief,
[data-theme="slate"] .figure,
[data-theme="slate"] .price-card,
[data-theme="slate"] .brief {
  background-image:
    repeating-linear-gradient(
      92deg,
      transparent 0 2px,
      rgba(255,250,235,0.022) 2px 3px,
      transparent 3px 7px
    );
}

/* ── type ───────────────────────────────────────────────────────────── */

.serif       { font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
.serif-italic{ font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; }
.mono        { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.folio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.marginalia {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(56px, 8vw, 112px); line-height: 1.02; font-weight: 600; }
h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; }
h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }
h4 { font-size: 18px; line-height: 1.25; }

p { margin: 0; }
.lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.body-prose {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 60ch;
}
.body-prose strong { color: var(--ink); font-weight: 600; }
.drop-cap::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 4.2em;
  line-height: 0.9;
  float: left;
  padding: 0.08em 0.1em 0 0;
  color: var(--ink);
}

/* ── layout ─────────────────────────────────────────────────────────── */

.page { position: relative; z-index: 1; }
.wrap { width: min(100% - 56px, 1240px); margin: 0 auto; }
.wrap-narrow { width: min(100% - 56px, 880px); margin: 0 auto; }
.wrap-prose  { width: min(100% - 56px, 720px); margin: 0 auto; }

.rule { height: 1px; background: var(--rule); }
.rule-hair { height: 1px; background: var(--hair); }
.rule-dbl { height: 4px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ── navigation (book-spine masthead) ───────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
}
.masthead-left,
.masthead-right { display: flex; align-items: center; gap: 28px; }
.masthead-right { justify-content: flex-end; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 22px; height: 22px; }
.brand-mark rect { fill: var(--ink); }
.brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-name em { font-style: italic; font-weight: 500; color: var(--ink-soft); }
.nav-list { display: flex; gap: 22px; }
.nav-list a {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--ink-soft);
  transition: color 140ms ease;
  position: relative;
  padding: 4px 0;
}
.nav-list a:hover { color: var(--ink); }
.nav-list a.is-active { color: var(--ink); }
.nav-list a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--ink);
}
.nav-vol {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ── buttons (editorial, restrained) ────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 160ms ease;
  background: var(--ink); color: var(--paper);
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-link {
  background: transparent; color: var(--ink);
  border: none; padding: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  font-size: 14px;
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--accent); border-color: var(--accent); transform: none; }
.btn .arrow { font-family: 'JetBrains Mono', monospace; opacity: 0.7; }

/* ── figures (in-frame product screenshots, like book plates) ───────── */

.figure {
  background: var(--figure-bg);
  border: 1px solid var(--figure-rule);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.figure-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}
.figure-caption .num {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-right: 14px;
}

/* ── tiny chrome utilities ──────────────────────────────────────────── */

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 5px 9px;
  background: var(--accent-soft);
  border-radius: 2px;
}

/* ── footer (colophon) ──────────────────────────────────────────────── */

.colophon {
  margin-top: 120px;
  padding: 56px 0 40px;
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
}
.colophon-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.colophon h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
  font-weight: 600;
}
.colophon a { display: block; padding: 3px 0; color: var(--ink-soft); font-size: 14px; }
.colophon a:hover { color: var(--ink); }
.colophon-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 12px; color: var(--ink-faint);
}

/* ── product brief mock (used on Home + How it works) ───────────────── */

.brief {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow:
    0 1px 0 var(--paper-deep),
    0 30px 80px -40px rgba(28, 26, 21, 0.22),
    0 8px 24px -12px rgba(28, 26, 21, 0.10);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  position: relative;
}
[data-theme="ink"] .brief,
[data-theme="slate"] .brief {
  box-shadow:
    0 1px 0 var(--paper-deep),
    0 30px 80px -40px rgba(0, 0, 0, 0.6),
    0 8px 24px -12px rgba(0, 0, 0, 0.4);
}
.brief-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(to bottom, var(--paper), var(--paper-deep));
}
.brief-traffic { display: flex; gap: 6px; }
.brief-traffic span { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-faint); opacity: 0.32; }
.brief-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-soft); }

/* ── tweaks panel (built atop starter, but minimal) ─────────────────── */

.tweaks-trigger { display: none; } /* hidden by default — toolbar handles it */

/* ── shared utility: triple-column fig-row used in product mockups ───── */
.fig-row.fig-row--triple {
  grid-template-columns: 60px 1fr 110px;
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .masthead-inner { grid-template-columns: 1fr auto; }
  .masthead-right { display: none; }
  .nav-list { gap: 16px; flex-wrap: wrap; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  /* Tighter gutters on phones */
  .wrap { width: min(100% - 32px, 1240px); }
  .wrap-narrow { width: min(100% - 32px, 880px); }
  .wrap-prose  { width: min(100% - 32px, 720px); }

  /* On phones, drop the in-page nav and surface the primary CTA.
     Phone navigation lives in the footer's Product column. */
  .masthead-inner { grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; }
  .masthead-right { display: flex; }
  .masthead-right .btn { padding: 9px 14px; font-size: 12.5px; }
  .nav-list { display: none; }
  .brand-name { font-size: 19px; }

  /* Type — let h1 breathe at 375px (the global clamp min was 56px) */
  h1 { font-size: clamp(40px, 12vw, 72px); }
  h2 { font-size: clamp(28px, 8vw, 44px); }
  h3 { font-size: clamp(20px, 5.5vw, 26px); }

  /* Tap targets */
  .btn { padding: 13px 18px; font-size: 14px; }
  .btn-link { font-size: 14px; padding-bottom: 3px; }

  /* Footer stacks single-column on phones */
  .colophon-grid { grid-template-columns: 1fr; gap: 28px; }
  .colophon { margin-top: 80px; padding: 40px 0 28px; }
  .colophon-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* Shared triple-column mockup row → stack on phones */
  .fig-row.fig-row--triple {
    grid-template-columns: 1fr;
    gap: 4px 0;
    padding: 14px 0;
  }
  .fig-row.fig-row--triple .folio:last-child {
    text-align: left;
    opacity: 0.7;
    font-size: 10px;
  }
}