/* ─────────────────────────────────────────────
   Finback Digital — shared "Broadsheet" stylesheet.
   One source of truth for every page (index, press, privacy, terms) so the
   token layer can't drift between them. Tokens/type/spacing/motion + motifs
   are the studio's Broadsheet system (packages/shared-config/src/{tokens,global}.css).

   Self-hosted type (latin subset, variable). Files in /fonts. One variable
   file per style covers the whole weight range; Fraunces' optical-size axis
   is driven automatically by font-optical-sizing: auto.
   ───────────────────────────────────────────── */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 300 800;
  font-display: swap; src: url("/fonts/jetbrains-mono.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("/fonts/jetbrains-mono-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("/fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 300 700;
  font-display: swap; src: url("/fonts/fraunces-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --color-paper: #F4EEE2;
  --color-paper-alt: #EAE2CE;
  --color-ink: #1A1A17;
  --color-muted: #5A544A;
  --color-oak: #B88A4A;
  --color-oak-text: #8A6420; /* AA-legible oak for small label text on paper (decorative --color-oak stays lighter) */
  --color-stamp: #C73E2E;
  --color-stamp-text: #A83226; /* AA-safe red for small text; decorative/large brand red remains --color-stamp */
  --color-rule-soft: #D4C8B0;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --text-display-xl: clamp(44px, 8.5vw, 124px);
  --text-display: clamp(40px, 5.5vw, 88px);
  --text-h2: 28px;
  --text-h3: 20px;
  --text-pull: clamp(20px, 2.2vw, 26px);
  --text-body: 17px;
  --text-ui: 13px;
  --text-meta: 11px;

  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-prose: 1.65;
  --lh-ui: 1.5;

  --tracking-display: -0.055em;
  --tracking-heading: -0.035em;
  --tracking-ui: -0.02em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --container-max: 1180px;
  --gutter: 48px;

  --rule-hair: 1px;
  --rule-border: 1.5px;
  --rule-section: 3px;
  --radius-input: 2px;

  --duration-fast: 150ms;
  --duration-slow: 300ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --stagger-step: 80ms;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: #14120E;
  --color-paper-alt: #1F1C17;
  --color-ink: #F4EEE2;
  --color-muted: #9A9288;
  --color-oak: #D4A35F;
  --color-oak-text: #D4A35F; /* passes AA on dark paper (8.2:1) */
  --color-stamp: #E56046;
  --color-stamp-text: #F07860;
  --color-rule-soft: #2F2A22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: #14120E;
    --color-paper-alt: #1F1C17;
    --color-ink: #F4EEE2;
    --color-muted: #9A9288;
    --color-oak: #D4A35F;
    --color-oak-text: #D4A35F;
    --color-stamp: #E56046;
    --color-stamp-text: #F07860;
    --color-rule-soft: #2F2A22;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--lh-prose);
  font-feature-settings: "ss01", "onum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-transform: lowercase;
  margin: 0;
}
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
a {
  color: var(--color-ink);
  text-decoration-color: var(--color-rule-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-default);
}
a:hover { text-decoration-color: var(--color-stamp); }
::selection { background: var(--color-stamp); color: var(--color-paper); }
:focus-visible { outline: 2px solid var(--color-stamp); outline-offset: 3px; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); }
@media (min-width: 768px) { .wrap { padding: 0 var(--gutter); } }

/* ── Header ── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-weight: 600; font-size: 15px;
  letter-spacing: var(--tracking-ui); text-transform: lowercase;
  text-decoration: none; color: var(--color-ink);
}
.brand .mark { height: 15px; width: auto; color: var(--color-stamp); display: block; }
.brand .slash { color: var(--color-stamp); }
.site-header nav { display: flex; align-items: center; gap: var(--space-5); }
.navlink {
  font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 500;
  letter-spacing: var(--tracking-ui); text-transform: lowercase; text-decoration: none;
  color: var(--color-muted);
}
.navlink:hover { color: var(--color-ink); }
.navlink[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-stamp); }
.theme-toggle {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 600;
  letter-spacing: var(--tracking-ui); text-transform: lowercase;
  background: transparent; color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule-soft);
  padding: 6px 10px; border-radius: 0; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.theme-toggle::before { content: "◐ "; color: var(--color-stamp); }
.theme-toggle:hover { color: var(--color-ink); border-color: var(--color-ink); }

/* ── Masthead (the filing header) ── */
main { min-height: 60vh; }
.masthead { padding: var(--space-9) 0 0; }

/* Filing strip: entity · jurisdiction · incorporated · dba, divided like a document header */
.filing {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--space-5); row-gap: var(--space-3);
}
.filing li {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500;
  letter-spacing: var(--tracking-ui); text-transform: lowercase; color: var(--color-ink);
  padding-left: var(--space-5); border-left: var(--rule-hair) solid var(--color-rule-soft);
}
.filing li:first-child { padding-left: 0; border-left: 0; }
.filing .k { color: var(--color-oak-text); }

.hero-title {
  font-size: var(--text-display); letter-spacing: var(--tracking-display);
  line-height: var(--lh-display); max-width: 15ch; margin-bottom: var(--space-5);
}
.hero-title .stamp { color: var(--color-stamp); font-weight: 700; }
.lede {
  max-width: 52ch; color: var(--color-ink); font-size: var(--text-pull);
  line-height: 1.4;
}
.lede .name { font-style: italic; }

/* ── Featured launch ──
   A release notice in the same registry language as the rest of the page:
   prominent enough to lead, restrained enough to remain a corporate record. */
.launch-feature {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto;
  gap: var(--space-5); align-items: center;
  margin-top: var(--space-7); padding: var(--space-5) var(--space-4);
  border-top: var(--rule-section) solid var(--color-stamp);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  background: var(--color-paper-alt); color: var(--color-ink);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default);
}
.launch-feature:hover { background: color-mix(in srgb, var(--color-paper-alt) 72%, var(--color-oak) 28%); }
.launch-kicker, .launch-link {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 600;
  letter-spacing: var(--tracking-ui); text-transform: lowercase;
}
.launch-kicker { color: var(--color-stamp-text); }
.launch-copy { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.launch-copy strong {
  font-family: var(--font-mono); font-size: clamp(28px, 4vw, 46px); font-weight: 700;
  line-height: 1; letter-spacing: var(--tracking-heading);
}
.launch-copy > span { color: var(--color-muted); font-size: 15px; line-height: 1.45; }
.launch-link { color: var(--color-ink); white-space: nowrap; }
.launch-link span { color: var(--color-stamp); }
.launch-feature:hover .launch-link span { display: inline-block; transform: translateX(3px); }

/* ── Signature: the waterline ──
   The broadsheet rule becomes the ocean surface. The finback surfaces
   through it on load; oak depth + a faint reflection sit beneath. */
.waterline { position: relative; margin: var(--space-8) 0 var(--space-9); }
.wl-surface { position: relative; height: clamp(34px, 5.4vw, 58px); }
.wl-fin { position: absolute; right: 9%; bottom: 0; height: 100%; overflow: hidden; }
.wl-fin svg { height: 100%; width: auto; display: block; color: var(--color-stamp); }
.wl-line { height: var(--rule-border); background: var(--color-oak); opacity: 0.55; }
.wl-under { position: relative; }
.wl-reflection {
  position: absolute; right: 9%; top: 0;
  height: clamp(18px, 3.1vw, 32px); overflow: hidden;
  transform: scaleY(-1); opacity: 0.13;
}
.wl-reflection svg { height: 100%; width: auto; display: block; color: var(--color-oak); }
.wl-depth {
  height: 56px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-oak) 55%, transparent), transparent);
  opacity: 0.16;
}
.wl-coord {
  position: absolute; left: 0; bottom: 6px;
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: var(--tracking-ui);
  text-transform: lowercase; color: var(--color-muted);
}
.wl-coord .dot { color: var(--color-stamp); }

/* ── Sections ── */
.block { padding: var(--space-8) 0; border-top: var(--rule-hair) solid var(--color-rule-soft); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.section-title {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-h3); font-weight: 600;
  letter-spacing: var(--tracking-heading); text-transform: lowercase;
}
.section-title .hash { color: var(--color-stamp); }
.section-count {
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: var(--tracking-ui);
  text-transform: lowercase; color: var(--color-muted); white-space: nowrap;
}

/* ── Ledger (holdings on index; reused wherever a document-log fits) ── */
.log { border-top: var(--rule-border) solid var(--color-ink); }
.log-row {
  display: grid; grid-template-columns: 2.5rem 4.5rem 1fr auto;
  gap: var(--space-4); align-items: center;
  padding: var(--space-5) var(--space-2);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  text-decoration: none; color: var(--color-ink);
  transition: background var(--duration-fast) var(--ease-default);
}
a.log-row:hover { background: var(--color-paper-alt); }
a.log-row:hover .cell-arrow { color: var(--color-stamp); transform: translateX(3px); }
.cell-hash { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }
.cell-state {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 600;
  text-transform: lowercase; letter-spacing: var(--tracking-ui);
}
.cell-state.is-active { color: var(--color-stamp-text); }
.cell-state.is-upcoming { color: var(--color-stamp-text); }
.log-row.is-featured { background: color-mix(in srgb, var(--color-paper-alt) 70%, transparent); }
.log-row.is-featured .cell-title .title { color: var(--color-stamp-text); }
.cell-title .title {
  font-family: var(--font-mono); font-size: var(--text-h3); font-weight: 600;
  letter-spacing: var(--tracking-heading);
}
.cell-title .tagline { font-family: var(--font-serif); font-size: 15px; color: var(--color-muted); line-height: 1.4; }
.cell-arrow { font-family: var(--font-mono); font-size: var(--text-h3); color: var(--color-muted); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-default); }

/* ── The record (registry data grid) ── */
.record { margin: 0; border-top: var(--rule-border) solid var(--color-ink); }
.record > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.record dt {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500;
  letter-spacing: var(--tracking-ui); text-transform: lowercase; color: var(--color-oak-text);
  padding-top: 2px;
}
.record dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-ui);
  letter-spacing: var(--tracking-ui); color: var(--color-ink); line-height: 1.5;
}
.record dd a { color: var(--color-ink); text-decoration-color: var(--color-stamp); }
.record .tag {
  display: inline-block; margin-left: var(--space-2);
  font-size: var(--text-meta); color: var(--color-stamp-text);
  border: var(--rule-hair) solid var(--color-stamp-text); padding: 1px 6px;
  text-transform: lowercase; vertical-align: 1px;
}

/* ── Prose (press intro + legal pages) ── */
.page-head { padding: var(--space-9) 0 var(--space-6); }
.page-head .eyebrow {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 600;
  letter-spacing: var(--tracking-ui); text-transform: lowercase; color: var(--color-oak-text);
  margin: 0 0 var(--space-3);
}
.page-head h1 {
  font-size: var(--text-display); letter-spacing: var(--tracking-display);
  line-height: var(--lh-display); max-width: 16ch;
}
.page-head .lede { margin-top: var(--space-5); }
.page-head .updated {
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: var(--tracking-ui);
  text-transform: lowercase; color: var(--color-muted); margin-top: var(--space-5);
}
.prose { max-width: 68ch; }
.prose h2 {
  font-size: var(--text-h3); margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-5); border-top: var(--rule-hair) solid var(--color-rule-soft);
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose h2 .hash { color: var(--color-stamp); }
.prose p { color: var(--color-ink); }
.prose a { text-decoration-color: var(--color-stamp); }
.prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose .fine { color: var(--color-muted); font-size: 15px; }
.prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--color-paper-alt); padding: 1px 5px; border-radius: var(--radius-input);
}
.prose strong { font-weight: 600; }

/* ── Press: fact sheet + mark downloads + kit pointers ── */
.factsheet {
  position: relative;
  border: var(--rule-hair) solid var(--color-rule-soft);
  background: var(--color-paper-alt);
  padding: var(--space-5);
  overflow-x: auto;
}
.factsheet pre {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-ui);
  line-height: 1.7; letter-spacing: var(--tracking-ui); color: var(--color-ink);
  white-space: pre;
}
.copybar { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.btn {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 600;
  letter-spacing: var(--tracking-ui); text-transform: lowercase;
  background: transparent; color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink); padding: 7px 12px; border-radius: 0;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2);
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.btn::before { content: "→ "; color: var(--color-stamp); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:hover::before { color: var(--color-paper); }
.btn.is-ok { border-color: var(--color-stamp); color: var(--color-stamp); }

.marks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4); border-top: var(--rule-border) solid var(--color-ink); padding-top: var(--space-5);
}
.mark-card {
  border: var(--rule-hair) solid var(--color-rule-soft); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.mark-swatch {
  height: 90px; display: flex; align-items: center; justify-content: center;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-soft);
}
.mark-swatch svg { color: var(--color-stamp); }
.mark-swatch.wide svg { height: 26px; width: auto; }
.mark-swatch.square svg { height: 60px; width: auto; }
.mark-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.mark-meta .label { font-family: var(--font-mono); font-size: var(--text-ui); color: var(--color-ink); letter-spacing: var(--tracking-ui); }
.mark-meta .fmt { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--color-muted); }
.mark-card .dl {
  font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 600;
  letter-spacing: var(--tracking-ui); text-transform: lowercase; color: var(--color-ink);
  text-decoration: none;
}
.mark-card .dl::before { content: "↓ "; color: var(--color-stamp); }
.mark-card .dl:hover { color: var(--color-stamp); }
.mark-note { margin-top: var(--space-4); }

/* ── Utilities (kept as classes so no inline style is needed → strict CSP) ── */
.svg-defs { position: absolute; }
.eyebrow .sep { color: var(--color-stamp); }

/* ── Footer ── */
.site-footer {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-7) 0;
  margin-top: var(--space-8);
  border-top: var(--rule-hair) solid var(--color-rule-soft);
  font-family: var(--font-mono); font-size: var(--text-meta);
  letter-spacing: var(--tracking-ui); text-transform: lowercase; color: var(--color-muted);
}
.site-footer .meta { display: flex; flex-direction: column; gap: 4px; }
.site-footer .wordmark { color: var(--color-ink); font-weight: 600; font-size: var(--text-ui); }
.site-footer .wordmark .slash { color: var(--color-stamp); }
.site-footer .links { display: flex; gap: var(--space-5); }
.site-footer .links a { color: var(--color-muted); text-decoration: none; }
.site-footer .links a:hover { color: var(--color-ink); }

/* ── Motion ── */
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes surface { from { transform: translateY(118%); } to { transform: translateY(0); } }
@keyframes reflect { from { opacity: 0; } to { opacity: 0.13; } }

.masthead > *, .page-head > * { animation: fadeSlideIn var(--duration-slow) var(--ease-out) both; }
.masthead > *:nth-child(1), .page-head > *:nth-child(1) { animation-delay: 0ms; }
.masthead > *:nth-child(2), .page-head > *:nth-child(2) { animation-delay: var(--stagger-step); }
.masthead > *:nth-child(3), .page-head > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }

.wl-fin svg { animation: surface 760ms var(--ease-out) both; animation-delay: calc(var(--stagger-step) * 3 + 120ms); }
.wl-reflection { opacity: 0; animation: reflect var(--duration-slow) var(--ease-out) both; animation-delay: calc(var(--stagger-step) * 3 + 620ms); }

/* Progressive enhancement: only hide-for-reveal when JS is present (html.js set
   by head.js before paint). No JS → content is visible by default (legal pages
   never render blank). */
.js [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.js [data-reveal][data-revealed="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .masthead > *, .page-head > *, .wl-fin svg { animation: none; }
  .wl-reflection { opacity: 0.13; animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; row-gap: var(--space-3); }
  .site-header nav { gap: var(--space-4); }
  .masthead { padding: var(--space-8) 0 0; }
  .page-head { padding: var(--space-8) 0 var(--space-5); }
  .launch-feature { grid-template-columns: 1fr auto; gap: var(--space-3); }
  .launch-kicker { grid-column: 1 / -1; }
  .launch-copy { grid-column: 1; }
  .launch-link { grid-column: 2; grid-row: 2; font-size: 0; }
  .launch-link span { font-size: var(--text-h3); }
  .log-row { grid-template-columns: 2.25rem 1fr auto; }
  .log-row .cell-state { display: none; }
  .record > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .wl-coord { display: none; }
  .wl-fin, .wl-reflection { right: 4%; }
}