/* ============================================================
   Mathaesthetics — shared design system
   "Cyborg Leonardo's notebook": precision drafting + the
   artisanal hand. Cool paper, ink, fine parabolic line-work.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

/* ---- Tokens ------------------------------------------------ */
:root {
  /* Studio (default / neutral cool paper) */
  --paper:      oklch(0.976 0.004 250);
  --paper-2:    oklch(0.945 0.006 252);
  --paper-3:    oklch(0.915 0.008 255);
  --ink:        oklch(0.235 0.022 268);
  --ink-soft:   oklch(0.435 0.022 266);
  --ink-mute:   oklch(0.595 0.018 262);
  --ink-faint:  oklch(0.74  0.012 260);
  --rule:       oklch(0.875 0.010 260);
  --rule-soft:  oklch(0.925 0.007 258);

  /* Accents — shared chroma/lightness family, hue varies */
  --accent:     oklch(0.520 0.125 264);   /* drafting indigo (studio) */
  --accent-ink: oklch(0.380 0.130 266);
  --violet:     oklch(0.555 0.170 285);    /* MathPaint */
  --violet-ink: oklch(0.430 0.160 286);
  --teal:       oklch(0.600 0.090 205);    /* Lexolotl */
  --teal-ink:   oklch(0.470 0.085 210);

  --paper-rgb: 248 247 244;

  /* Type */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:  'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --r: 14px;
}

/* Per-product theming hooks: set --accent locally */
[data-world="mathpaint"] { --accent: var(--violet); --accent-ink: var(--violet-ink); }
[data-world="lexolotl"]  { --accent: var(--teal);   --accent-ink: var(--teal-ink); }

/* Dark theme */
[data-theme="dark"] {
  --paper:      oklch(0.205 0.018 268);
  --paper-2:    oklch(0.255 0.020 268);
  --paper-3:    oklch(0.305 0.022 268);
  --ink:        oklch(0.945 0.006 250);
  --ink-soft:   oklch(0.795 0.012 255);
  --ink-mute:   oklch(0.640 0.016 258);
  --ink-faint:  oklch(0.480 0.018 262);
  --rule:       oklch(0.355 0.020 265);
  --rule-soft:  oklch(0.300 0.018 266);
  --accent:     oklch(0.660 0.135 266);
  --accent-ink: oklch(0.760 0.120 266);
  --violet:     oklch(0.680 0.160 288);
  --teal:       oklch(0.700 0.095 200);
  --paper-rgb: 30 28 40;
}

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; }

/* ---- Type helpers ----------------------------------------- */
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5; color: var(--ink-soft); }
.muted { color: var(--ink-mute); }

/* ---- Layout ----------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 132px); }

/* ---- Brand mark (tinted PNGs, theme-swapped) -------------- */
.brand-mark, .brand-lockup {
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.brand-mark   { background-image: url('assets/brand/mark-ink.png');   aspect-ratio: 1236/1270; }
.brand-lockup { background-image: url('assets/brand/lockup-ink.png'); aspect-ratio: 1236/1434; }
[data-theme="dark"] .brand-mark   { background-image: url('assets/brand/mark-paper.png'); }
[data-theme="dark"] .brand-lockup { background-image: url('assets/brand/lockup-paper.png'); }
.brand-mark.is-indigo { background-image: url('assets/brand/mark-indigo.png') !important; }
.brand-mark.is-violet { background-image: url('assets/brand/mark-violet.png') !important; }
.brand-mark.is-teal   { background-image: url('assets/brand/mark-teal.png') !important; }

/* Header brand lockup: mark + serif wordmark in HTML */
.brandbar { display: inline-flex; align-items: center; gap: 13px; }
.brandbar .brand-mark { width: 30px; height: 31px; }
.brandbar .wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em;
  padding: 12px 20px; border-radius: 100px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-1px); background: var(--accent-ink); }
.btn-accent  { background: var(--accent); color: #fff; }
.btn-accent:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn svg { width: 17px; height: 17px; }

/* App Store badge button */
.appstore {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 19px 11px 16px; border-radius: 14px;
  background: var(--ink); color: var(--paper);
  transition: transform .15s ease, filter .2s ease;
}
.appstore:hover { transform: translateY(-1px); }
.appstore svg { width: 26px; height: 26px; fill: currentColor; }
/* Stack the two label lines ("Coming to the" / "Mac App Store") so they don't
   run together on one line. */
.appstore > span { display: flex; flex-direction: column; }
.appstore .as-1 { font-size: 10px; letter-spacing: 0.04em; opacity: .8; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.appstore .as-2 { font-size: 17px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }

/* Icon button (nav theme toggle) — ported from the design-direction spec,
   which defined it page-locally; it is missing from the shared system. */
.iconbtn {
  width: 38px; height: 38px; border-radius: 100px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.iconbtn:hover { border-color: var(--ink); color: var(--ink); }

/* ---- Hairline rule ---------------------------------------- */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---- Top nav ---------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--paper-rgb) / 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
/* Scoped to .nav so WordPress core's pagination .nav-links doesn't collide. */
.nav .nav-links { display: flex; align-items: center; gap: 30px; }
.nav .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); transition: color .15s ease; }
.nav .nav-links a:hover, .nav .nav-links a.active { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }

/* ---- Footer ----------------------------------------------- */
.foot { border-top: 1px solid var(--rule); padding-block: 56px 40px; color: var(--ink-mute); }
.foot a:hover { color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 16px; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { font-size: 14.5px; color: var(--ink-mute); }

/* ---- Art treatments --------------------------------------- */
.art-frame { border-radius: var(--r); overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.art-duotone { filter: grayscale(1) contrast(1.05) brightness(1.02); mix-blend-mode: luminosity; }

/* ---- Drafting overlay (parabola line-work) ---------------- */
.draft-line { stroke: var(--accent); fill: none; vector-effect: non-scaling-stroke; }

/* ---- Utility ---------------------------------------------- */
.stack-6 > * + * { margin-top: 6px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-20 > * + * { margin-top: 20px; }
.stack-28 > * + * { margin-top: 28px; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 100px; border: 1px solid var(--rule);
  color: var(--ink-mute); background: var(--paper);
}

@media (max-width: 820px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nav .nav-links { display: none; }
}