/* ============================================================
   Ostinato — landing page. Urtext edition: warm paper, cobalt ink,
   brass foil, editorial type. Tokens lifted from src/styles/tokens.css.
   ============================================================ */

/* ---- Fonts (self-hosted, relative paths so file:// preview works) ---- */
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/ostinato/hanken-grotesk.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/ostinato/cormorant-garamond.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400 500; font-display:swap; src:url('fonts/ostinato/cormorant-garamond-italic.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ostinato/spectral-400.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ostinato/spectral-500.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ostinato/spectral-600.woff2') format('woff2'); }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/ostinato/spectral-400-italic.woff2') format('woff2'); }

:root {
  --paper-0:#fffdf7; --paper-1:#fbf8f0; --paper-2:#f1ecde; --paper-3:#e6dfcd;
  --ink-0:#1b1813; --ink-1:#3a352c; --ink-2:#6b6354; --ink-3:#a0977f;
  --cobalt:#234a99; --cobalt-deep:#1b3a78; --cobalt-bright:#2f5dbf; --cobalt-tint:#e2e9f6; --cobalt-wash:#eef3fb;
  --brass:#9a7b3f; --brass-light:#b79a60; --brass-tint:#efe6cf;
  --line-soft:rgba(27,24,19,.09); --line:rgba(27,24,19,.15); --line-strong:rgba(27,24,19,.28);
  --cream-line:rgba(243,237,220,.18); --cream-faint:rgba(243,237,220,.62);
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-serif:'Spectral',Georgia,'Times New Roman',serif;
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ease-resolve:cubic-bezier(.16,.84,.3,1);
  --measure:42rem;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--paper-1);
  color:var(--ink-1);
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* faint paper grain */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

::selection { background:var(--cobalt-tint); color:var(--ink-0); }

.wrap { width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:24px; }

.eyebrow {
  font-family:var(--font-sans); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  margin:0 0 18px; max-width:none;
}
.eyebrow .dot { color:var(--brass); margin-inline:.5em; }

h1,h2,h3 { font-family:var(--font-display); color:var(--ink-0); font-weight:600; letter-spacing:-.01em; margin:0; }
p { margin:0 0 1.1em; max-width:34em; }
em { font-style:italic; }
a { color:var(--cobalt); text-decoration:none; }
a:hover { color:var(--cobalt-bright); }

/* ============================================================ HERO */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #28529f 0%, var(--cobalt-deep) 46%, #16306a 100%);
  color:#f3eddc;
  padding:clamp(56px,11vh,108px) 0 clamp(52px,9vh,90px);
  text-align:center;
}
.hero::after { /* foil hairline at the foot of the cover */
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(var(--measure),calc(100% - 48px)); height:1px;
  background:linear-gradient(90deg,transparent, var(--brass-light) 28%, var(--brass-light) 72%, transparent);
  opacity:.55;
}
.hero .eyebrow { color:#c9b487; text-indent:.16em; }
.hero .eyebrow .dot { color:#c9b487; }

.lockup { display:inline-flex; align-items:center; gap:14px; margin-bottom:30px; }
.lockup .mark { width:46px; height:46px; color:#f3eddc; }
.lockup .mark svg { width:100%; height:100%; display:block; }
/* full wordmark (inline <symbol> + <use>; "stinat" uses the page's Cormorant) */
.wm-defs { position:absolute; width:0; height:0; overflow:hidden; }
.wordmark-svg { display:block; color:#f3eddc; fill:currentColor; }
.hero-wm { height:58px; width:169px; margin:0 auto 28px; }
.footer-wm { height:30px; width:87px; margin:0 auto 18px; }

.hero h1 {
  color:#fdf8ec;
  font-size:clamp(46px,9vw,86px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 auto;
  max-width:14ch;
}
.hero .lede {
  font-family:var(--font-serif);
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.55;
  color:var(--cream-faint);
  max-width:30em; margin:26px auto 0;
}
.hero .lede em { color:#f3eddc; font-style:italic; }

.badge {
  display:inline-flex; align-items:center; gap:.6em; margin-top:38px;
  font-family:var(--font-sans); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:#dfe7f5;
  padding:11px 20px; border:1px solid var(--cream-line); border-radius:999px;
  background:rgba(255,255,255,.04);
}
.badge .pip { width:6px; height:6px; border-radius:50%; background:var(--brass-light); box-shadow:0 0 0 4px rgba(154,123,63,.18); }

/* ============================================================ SECTIONS */
section { padding:clamp(64px,11vh,112px) 0; }
.rule { border:0; height:1px; background:var(--line-soft); max-width:var(--measure); margin:0 auto; }

.lede-statement {
  font-family:var(--font-display); font-weight:600; color:var(--ink-0);
  font-size:clamp(30px,5vw,46px); line-height:1.08; letter-spacing:-.015em;
  max-width:16ch; margin:0 0 28px;
}
.body-lg { font-size:19px; color:var(--ink-1); }
.body-lg strong { font-weight:600; color:var(--ink-0); }
.muted { color:var(--ink-2); }

/* pattern ladder */
.ladder { display:grid; gap:0; margin-top:8px; border-top:1px solid var(--line-soft); }
.rung {
  display:grid; grid-template-columns:100px 1fr; gap:22px; align-items:center;
  padding:26px 4px; border-bottom:1px solid var(--line-soft);
}
.rung .glyph { height:40px; width:auto; opacity:.92; }
.rung h3 { font-size:25px; margin-bottom:3px; }
.rung .num { font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:7px; }
.rung p { font-family:var(--font-serif); color:var(--ink-1); margin:0; font-size:16.5px; line-height:1.5; max-width:40ch; }
.ladder-foot { margin-top:26px; font-family:var(--font-display); font-style:italic; font-size:clamp(20px,3vw,26px); color:var(--cobalt); line-height:1.25; }

/* who it's for — sunken */
.sunken { background:var(--paper-2); }
.sunken .pull {
  font-family:var(--font-serif); font-size:clamp(20px,2.8vw,25px); line-height:1.5; color:var(--ink-0);
  max-width:26em;
}
.sunken .pull em { font-style:italic; color:var(--cobalt); }

/* faq */
.faq { display:grid; gap:0; margin-top:10px; }
.qa { padding:24px 0; border-bottom:1px solid var(--line-soft); }
.qa:first-child { border-top:1px solid var(--line-soft); }
.qa h3 { font-family:var(--font-sans); font-weight:600; font-size:16px; letter-spacing:0; color:var(--ink-0); margin-bottom:8px; }
.qa p { font-size:16.5px; color:var(--ink-1); margin:0; max-width:46ch; }

/* footer */
footer { background:var(--cobalt-deep); color:#f3eddc; padding:64px 0 56px; text-align:center; }
footer .mark { display:block; width:40px; height:40px; color:#f3eddc; margin:0 auto 18px; }
footer .mark svg { width:100%; height:100%; display:block; }
footer .fwm { font-family:var(--font-display); font-weight:500; font-size:24px; color:#f3eddc; }
footer .tag { font-family:var(--font-serif); font-style:italic; color:var(--cream-faint); margin:6px 0 22px; max-width:none; }
footer .meta { font-family:var(--font-sans); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#9fb0d2; max-width:none; text-indent:.14em; }
footer .meta .dot { color:var(--brass-light); margin-inline:.6em; }

/* ============================================================ MOTION */
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.reveal { opacity:0; animation:rise .9s var(--ease-resolve) forwards; }
.hero .d1 { animation-delay:.05s; } .hero .d2 { animation-delay:.18s; }
.hero .d3 { animation-delay:.32s; } .hero .d4 { animation-delay:.46s; } .hero .d5 { animation-delay:.6s; }

@media (prefers-reduced-motion:reduce) {
  .reveal { animation:none; opacity:1; }
  html { scroll-behavior:auto; }
}

@media (max-width:560px) {
  body { font-size:17px; }
  .rung { grid-template-columns:74px 1fr; gap:16px; padding:22px 2px; }
  .rung .glyph { height:30px; width:auto; }
  .lockup .mark { width:40px; height:40px; }
  .wordmark { font-size:30px; }
}

/* ============================================================ ARTICLE / CONTENT PAGES */
.topbar { position:sticky; top:0; z-index:10; background:rgba(251,248,240,.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; padding-block:13px; }
.topbar a.home { display:inline-flex; align-items:center; }
.topbar .wordmark-svg { color:var(--cobalt); height:23px; width:67px; margin:0; }
.topbar .nav { font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.topbar .nav:hover { color:var(--cobalt); }

.article { max-width:39rem; margin-inline:auto; padding:clamp(40px,7vh,76px) 24px clamp(56px,9vh,96px); }
.article .eyebrow { margin-bottom:20px; }
.article h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(34px,6vw,52px); line-height:1.06; letter-spacing:-.015em; color:var(--ink-0); margin:0 0 22px; }
.article .lede { font-family:var(--font-serif); font-size:clamp(19px,2.4vw,22px); line-height:1.5; color:var(--ink-1); margin:0 0 14px; max-width:34em; }
.article .lede em { font-style:italic; color:var(--cobalt); }
.article h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(23px,3.4vw,30px); line-height:1.16; color:var(--ink-0); margin:42px 0 12px; }
.article p { font-family:var(--font-serif); font-size:18px; line-height:1.66; color:var(--ink-1); margin:0 0 1.2em; max-width:34em; }
.article p strong { color:var(--ink-0); font-weight:600; }
.article em { font-style:italic; }
.article a { color:var(--cobalt); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.article a:hover { color:var(--cobalt-bright); }
.article ul { margin:0 0 1.2em; padding-left:1.15em; max-width:34em; }
.article li { font-family:var(--font-serif); font-size:18px; line-height:1.6; color:var(--ink-1); margin-bottom:.55em; }
.article li strong { color:var(--ink-0); font-weight:600; }
.article .note { color:var(--ink-2); font-style:italic; }
.article .cta { margin-top:46px; padding:26px 28px; background:var(--cobalt-wash); border:1px solid var(--cobalt-tint); border-radius:14px; }
.article .cta p { margin:0; max-width:none; }
.article .cta .k { font-family:var(--font-display); font-weight:600; font-size:23px; color:var(--ink-0); display:block; margin-bottom:7px; }

.footer-links { margin-top:18px; }
.footer-links a { font-family:var(--font-sans); font-weight:500; font-size:12px; letter-spacing:.03em; color:#9fb0d2; text-decoration:none; }
.footer-links a:hover { color:#f3eddc; }
.footer-links .sep { color:var(--brass-light); margin-inline:.6em; }