/* foliologic. — the public pages' shared stylesheet (served from our own origin, no external request).

   WHAT THIS IS. The public site's design language lives in public/index.html (spec-landing-redesign.md): the cream ground,
   the navy ink, teal for links and actions, the editorial serif (Cormorant Garamond) for the H1, section headlines and
   editorial titles ONLY, Onest — the app's face — for everything that is read or clicked, hairline rules and whitespace
   instead of card grids and shadows, sentence case. This file carries that language for every OTHER public page (the
   legal pages, the methodology pages, the blog index, the research reports, the free tools, the public Index), so they stop
   each carrying a private copy of an older look. IBM Plex Mono is for code only (spec-editorial-design-system.md, faces).

   WHAT THIS IS NOT. The landing keeps its own inline styles and does not load this file; its :root tokens below are
   copied from it and scripts/diagnostics/check-public-pages.mjs ties the two so they cannot drift. A page's genuinely
   page-specific styles (the blog's entry list, a form, a report's print rules) stay inline in that page.

   Floor: no text under 12 px (check-public-pages.mjs), body copy 16–17 px, 44 px targets for anything clickable. */

:root {
  --navy: #1A314E; --navy-deep: #132840; --teal: #2A758D; --teal-hover: #22677d; --teal-light: #7cc3d6;
  --teal-wash: rgba(42,117,141,0.07);
  --gold: #b8a04c; --gold-ink: #7a6624; --gold-light: #d9c57a;
  --paper: #f7f4ee; --cream: #f0ebe1; --sheet: #fffdf9; --beige: #d4cbb5; --rule: #ddd5c4;
  --text: #1A314E; --text2: #4d5f72; --text3: #6f7f8f;
  --green: #2d7a55; --red: #b23a3a;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* code only */
  --wrap: 1160px; --gut: 48px;
}
@media (max-width: 1100px) { :root { --gut: 32px; } }
@media (max-width: 640px) { :root { --gut: 16px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.6; background: var(--paper); color: var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--teal); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

/* ── type roles ── */
.kicker { font-size: 15px; font-weight: 600; color: var(--teal); letter-spacing: 0.01em; margin-bottom: 14px; }
.lede { font-size: 18px; line-height: 1.65; color: var(--text2); max-width: 640px; margin-top: 16px; }
.tlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--teal); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; text-align: left; }
.tlink:hover { text-decoration: underline; text-underline-offset: 4px; }
code, pre, kbd, samp { font-family: var(--mono); font-size: 0.9em; }

/* ── buttons (the app's system: page actions outlined, the finishing action of a form filled teal) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 8px; border: 1px solid transparent; font: 600 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-hover); }
.btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal-wash); }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-light:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── the bar (the landing's: hairline under a translucent paper; the content aligns with the landing's 1160 px column) ── */
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 12px max(var(--gut), calc((100% - var(--wrap)) / 2)); background: rgba(247,244,238,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.topnav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.topnav-brand span { font-family: var(--serif); font-size: 23px; font-weight: 700; color: var(--navy); }
.topnav-right, .topnav-links { display: flex; align-items: center; gap: 16px; }
.topnav-links { gap: 28px; }
.topnav a.back { display: inline-flex; align-items: center; min-height: 44px; color: var(--text2); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.15s; }
.topnav a.back:hover { color: var(--navy); }
.nav-pages { display: flex; gap: 28px; align-items: center; }
.nav-pages a { position: relative; color: var(--text2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 0; transition: color 0.15s; }
.nav-pages a:hover, .nav-pages a[aria-current="true"], .nav-pages a.nav-here { color: var(--navy); }
.nav-pages a[aria-current="true"]::after, .nav-pages a.nav-here::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--teal); border-radius: 1px; }
.nav-pages a.nav-login { color: var(--teal); font-weight: 600; }
.lang-toggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.lang-toggle button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--text2); font-size: 14px; font-weight: 600; cursor: pointer; }
.lang-toggle button.lang-active, .lang-toggle button.active { background: var(--navy); color: #fff; }
.btn-nav { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-nav .nav-short { display: none; }
.nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.nav-burger span { width: 20px; height: 2px; background: var(--navy); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
.topnav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.topnav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }
  .topnav-links { gap: 12px; }
  .nav-pages { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(247,244,238,0.98); border-bottom: 1px solid var(--rule); padding: 4px var(--gut) 12px; }
  .topnav.nav-open .nav-pages { display: flex; }
  .nav-pages a { display: flex; align-items: center; min-height: 52px; padding: 0; font-size: 17px; border-bottom: 1px solid var(--rule); }
  .nav-pages a[aria-current="true"]::after, .nav-pages a.nav-here::after { display: none; }
  .nav-pages a[aria-current="true"], .nav-pages a.nav-here { color: var(--teal); }
}
@media (max-width: 640px) {
  .topnav { min-height: 60px; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .topnav-brand img { width: 28px; height: 28px; }
  .topnav-brand span { font-size: 20px; }
  .topnav-right { gap: 8px; }
  .topnav-links { gap: 6px; }
  .topnav a.back { font-size: 14px; line-height: 1.25; max-width: 8.5em; text-align: right; }
  .btn-nav { padding: 0 14px; }
  .btn-nav .nav-full { display: none; }
  .btn-nav .nav-short { display: inline; }
}
/* the language switch moves into the burger menu where the bar runs out of room (the landing's pattern; a page that has no .lang-menu keeps its switch in the bar) */
.lang-menu { display: none; }
@media (max-width: 420px) {
  .lang-toggle button { min-width: 40px; }
  .lang-head { display: none; }
  .lang-menu { display: flex; justify-content: flex-start; padding: 14px 0 6px; }
  .lang-menu .lang-toggle button { min-width: 52px; }
}

/* ── the footer (the landing's navy close; legal links at 15 px with 44 px targets) ── */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 36px max(var(--gut), calc((100% - var(--wrap)) / 2)); background: var(--navy-deep); color: rgba(255,255,255,0.75); }
.footer-brand { font-family: var(--serif); font-size: 21px; font-weight: 700; color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: rgba(255,255,255,0.82); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
  .footer { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 28px; padding-bottom: 20px; }
}

/* ── the reading layout (legal pages, methodology pages, the public Index): a narrow column, Onest body, the serif only for
      the page title; section headings are Onest, set by weight and space, with hairline rules between ── */
.legal-wrap { max-width: calc(720px + 2 * var(--gut)); margin: 0 auto; padding: 128px var(--gut) 96px; }
.legal-wrap h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 2.4vw + 16px, 46px); line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 16px; }
.legal-meta, .stand { font-size: 15px; line-height: 1.6; color: var(--text2); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.legal-wrap h2 { font: 600 21px/1.3 var(--sans); letter-spacing: -0.005em; color: var(--navy); margin: 48px 0 14px; }
.legal-wrap h3 { font: 600 17px/1.4 var(--sans); color: var(--navy); margin: 28px 0 10px; }
.legal-wrap p { font-size: 16px; line-height: 1.75; color: var(--text2); margin-bottom: 12px; }
.legal-wrap ul, .legal-wrap ol { margin: 10px 0 16px 22px; }
.legal-wrap li { font-size: 16px; line-height: 1.75; color: var(--text2); margin-bottom: 6px; }
.legal-wrap strong { color: var(--navy); font-weight: 600; }
.legal-wrap a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.legal-wrap a:hover { color: var(--teal-hover); }
.legal-wrap hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.legal-wrap blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--teal); }
.legal-wrap blockquote p { margin: 0; font-weight: 600; color: var(--navy); }
.legal-wrap code { background: var(--cream); padding: 1px 6px; border-radius: 4px; }
.legal-wrap .table-wrap { overflow-x: auto; margin: 20px 0; }
.legal-wrap table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 22rem; }
.legal-wrap th, .legal-wrap td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--text2); }
.legal-wrap th { font-size: 14px; font-weight: 600; color: var(--navy); border-bottom-color: var(--beige); }
.legal-wrap footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--text2); font-size: 15px; }
.legal-wrap footer em { font-style: normal; display: block; margin-bottom: 10px; }
[lang-content] { display: none; }
[lang-content].visible { display: block; }
@media (max-width: 640px) {
  .legal-wrap { padding-top: 104px; padding-bottom: 64px; }
  .legal-wrap h2 { font-size: 20px; margin-top: 40px; }
  .legal-meta, .stand { margin-bottom: 32px; padding-bottom: 20px; }
}