/* ============================================================
   SOCIAL RETURN ADVISORY  ·  main.css
   Single source of truth for the TEV framework site.
   Forest + gold + cream + charcoal + sage. Restrained editorial.

   This file is shared by every page. Pages link to it, never
   redefine tokens or fonts locally. Tokens and type styles below
   are the production brand system (Brand System v3.1). Chrome and
   content components are built on those tokens.

   A one-off page layout may live in /css/pages/<page>.css, scoped
   under a page wrapper class and built only from these tokens.
   Inline style on a page is for brand tokens or data-driven
   geometry (a bar or segment width) only, never raw color or fonts.
   ============================================================ */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-300.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/libre-franklin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/libre-franklin-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/libre-franklin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/libre-franklin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/libre-franklin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/libre-franklin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/libre-franklin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/libre-franklin-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/dm-mono-300.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/dm-mono-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-mono-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-mono-500-italic.woff2") format("woff2");
}

:root {
  /* ── COLOR TOKENS ─────────────────────────────────────── */
  --forest:        #1F3D2B;   /* Primary. Headings, wordmark, rules, buttons */
  --forest-deep:   #162E20;   /* Hover/active state for forest surfaces */
  --forest-on:     #E8EDE6;   /* Type color on forest backgrounds */
  --gold:          #C9B88A;   /* Accent only — tick, micro-details */
  --gold-soft:     #D4C69A;   /* Hover state on gold surfaces */
  --gold-tint:     rgba(201, 184, 138, 0.15);
  --cream:         #F4F1EC;   /* Default page background */
  --white:         #FFFFFF;   /* Content surfaces on cream */
  --charcoal:      #2C3040;   /* Body text */
  --sage:          #A7B5A2;   /* Secondary labels, captions, metadata */
  --sage-deep:     #6B7D66;   /* Deeper sage for higher-contrast labels */
  --rule:          #D4C9B4;   /* Hairline borders, table dividers */
  --border:        rgba(212, 201, 180, 0.55);
  --border-strong: rgba(212, 201, 180, 0.85);
  --hover-green:   rgba(31, 61, 43, 0.06);

  /* ── TYPE FAMILIES ────────────────────────────────────── */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "Libre Franklin", system-ui, sans-serif;
  --font-mono:    "DM Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ── LAYOUT TOKENS ────────────────────────────────────── */
  --max-w:    1100px;
  --col-pad:  clamp(24px, 5vw, 80px);
  --radius:   2px;            /* Sharp by design. 2px max anywhere. */
  --rule-w:   0.5px;

  /* ── SPACING SCALE ────────────────────────────────────── */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-7:  32px;  --space-8:  40px;
  --space-9:  56px;  --space-10: 80px;  --space-11: 120px;

  /* ── ELEVATION ────────────────────────────────────────────
     No drop shadows in this brand. Elevation is communicated
     through hairline borders and background tint only. */
  --elevation-1: 0 0 0 0.5px var(--border) inset;
  --elevation-2: 0 0 0 1px var(--border-strong) inset;

  /* ── MOTION ───────────────────────────────────────────── */
  --t-fast: 180ms ease-out;
  --t-med:  220ms ease-out;
  --t-slow: 400ms ease-out;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

/* Visible keyboard focus everywhere. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}

/* ============================================================
   SEMANTIC TYPE STYLES  (brand system — do not alter)
   ============================================================ */
.t-cover-title   { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.01em; color: var(--forest); }
.t-cover-subtitle{ font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); }
.t-h1 { font-family: var(--font-body); font-weight: 600; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.15; letter-spacing: -0.005em; color: var(--forest); }
.t-h2 { font-family: var(--font-body); font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -0.003em; color: var(--forest); }
.t-h3 { font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--forest); }
.t-h4 { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--forest); }
.t-eyebrow    { font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal); }
.t-label-sage { font-family: var(--font-mono); font-weight: 400; font-size: 10px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.t-body       { font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.85; color: var(--charcoal); }
.t-body-small { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.75; color: var(--charcoal); }
.t-emphasis   { font-family: var(--font-body); font-weight: 600; color: var(--forest); }
.t-pullquote  { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--forest); }
.t-stat-number  { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; color: var(--forest); }
.t-stat-caption { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--sage); }
.t-mono         { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); }
.t-table-header { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest); }

/* ============================================================
   STRUCTURAL PRIMITIVES  (brand system — do not alter)
   ============================================================ */
.tick-gold     { display: inline-block; width: 20px; height: 1.5px; background: var(--gold); }
.rule-hairline { height: var(--rule-w); background: var(--rule); border: 0; }
.rule-sage     { height: var(--rule-w); background: var(--sage); border: 0; opacity: 0.45; }

/* ============================================================
   SITE CHROME  —  masthead, nav, footer, main column
   Defined once. Every page copies the shell markup verbatim.
   ============================================================ */

/* ── Masthead ─────────────────────────────────────────── */
.site-header {
  background: var(--cream);
  border-bottom: var(--rule-w) solid var(--rule);
}
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-5) var(--col-pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Primary stacked wordmark (Social Return / gold tick / ADVISORY) */
.wordmark { text-decoration: none; line-height: 1; display: inline-block; }
.wordmark__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.01em;
  color: var(--forest);
  white-space: nowrap;
}
.wordmark__tick { width: 20px; height: 1.5px; background: var(--gold); margin: 7px 0; }
.wordmark__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

/* ── Primary navigation ───────────────────────────────── */
.site-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  padding: 6px 10px;
  border-bottom: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.site-nav a:hover { background: var(--hover-green); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ── Dropdown nav (parent items with a sub-menu) ──────── */
.site-nav { align-items: center; }
.nav-item { position: relative; }
.nav-trigger {
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nav-trigger::after {
  content: ""; width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.5;
  transition: transform var(--t-fast);
}
.nav-trigger:hover { background: var(--hover-green); }
.nav-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-item[data-active] > .nav-trigger { border-bottom-color: var(--gold); }

.nav-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 210px; display: none; flex-direction: column;
  background: var(--white); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: var(--space-2);
}
@media (hover: hover) {
  /* Open on hover, and keep it open while the cursor travels to the menu. */
  .nav-item:hover > .nav-menu,
  .nav-menu:hover { display: flex; }
  /* Invisible bridge over the gap so hover is not lost between trigger and menu. */
  .nav-menu::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: -8px; height: 8px;
  }
}
.nav-trigger[aria-expanded="true"] + .nav-menu { display: flex; }

.nav-menu a {
  border-bottom: 0; padding: 8px 12px; border-radius: var(--radius);
  letter-spacing: 0.08em; white-space: nowrap;
}
.nav-menu a:hover { background: var(--hover-green); }
.nav-menu a[aria-current="page"] { border-bottom: 0; box-shadow: inset 2px 0 0 var(--gold); }

/* Mobile: nav becomes a stacked list, menus expand inline */
@media (max-width: 720px) {
  .site-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .site-nav > a, .nav-item > .nav-trigger {
    width: 100%; justify-content: space-between; padding: 10px 0;
    border-bottom: 0.5px solid var(--rule);
  }
  .nav-item { width: 100%; }
  .nav-menu {
    position: static; min-width: 0; border: 0; background: transparent;
    padding: var(--space-2) 0 var(--space-3) var(--space-5);
  }
  .nav-menu a { padding: 8px 0; }
}

/* ── Main column ──────────────────────────────────────── */
.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-10) var(--col-pad) var(--space-11);
}

/* ── Footer ───────────────────────────────────────────── */
.site-footer {
  border-top: var(--rule-w) solid var(--rule);
  background: var(--cream);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-7) var(--col-pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-lockup {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
}
.footer-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--sage-deep);
}

/* ============================================================
   CONTENT COMPONENTS  —  building blocks for page <main>
   Use these so pages stay consistent by construction.
   ============================================================ */

/* Page header: eyebrow + title + lede */
.page-header { margin-bottom: var(--space-9); max-width: 760px; }
.page-header .t-eyebrow { display: block; margin-bottom: var(--space-4); }
.page-header .lede { margin-top: var(--space-5); font-size: 19px; line-height: 1.7; color: var(--charcoal); }

/* Section spacing */
.section { margin-top: var(--space-10); }
.section > .t-h2 { margin-bottom: var(--space-5); }
.section p + p { margin-top: var(--space-5); }

/* Gold tick used as a structural break (left-anchored, never centered) */
.divider-tick { width: 20px; height: 1.5px; background: var(--gold); margin: var(--space-9) 0; border: 0; }

/* Panel: hairline-bordered surface, no shadow */
.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-7);
}

/* Stat block */
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--forest); }
.stat .cap { font-family: var(--font-body); font-size: 13px; color: var(--sage-deep); }

/* Data table: DM Mono headers, cream label column, forest on white data */
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table thead th {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--forest);
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule); background: var(--cream);
}
.data-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: var(--rule-w) solid var(--rule); vertical-align: top; }
.data-table tbody tr td:first-child { background: var(--cream); font-weight: 500; color: var(--forest); }

/* Tag / pill (e.g. confidence tier, value mode) */
.tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 3px 8px;
}

/* Simple responsive card grid */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Note: bordered callout with a forest left edge, no shadow */
.note {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 2px solid var(--forest);
  border-radius: var(--radius);
  padding: var(--space-6);
}

/* ============================================================
   FORM + AUTH  —  passcode gate (login.html) and reusable
   form primitives. Same brand rules: hairline borders, sharp
   corners, two type families, no shadows.
   ============================================================ */

/* Centered single-card screen for the passcode gate */
.auth-screen {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--col-pad);
}
.auth-card { width: 100%; max-width: 380px; }
.auth-brand { text-align: center; margin-bottom: var(--space-7); }
.auth-brand .wordmark { display: inline-block; }
.auth-brand .wordmark__tick { margin-left: auto; margin-right: auto; }
.auth-body {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-7);
}
.auth-body .t-h3 { margin-bottom: var(--space-2); }
.auth-body .t-body-small { color: var(--sage-deep); }
.auth-error {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--forest);
  background: var(--gold-tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}
.auth-form { margin-top: var(--space-6); }

/* Labelled input */
.field { display: block; }
.field__label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: var(--space-2);
}
.field__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.field__input:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-color: var(--forest);
}

/* Primary button */
.btn {
  display: inline-block;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-on);
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-top: var(--space-6);
  cursor: pointer;
  transition: background var(--t-fast);
}
.btn:hover { background: var(--forest-deep); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-header__inner { align-items: flex-start; }
  .site-main { padding-top: var(--space-8); padding-bottom: var(--space-10); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}