/* HumanSounding shared shell: tokens, nav, footer, common components.
   Redesign 2026-08: light sage surfaces, green accent, amber highlighter,
   Source Sans 3. Light is the default; dark follows [data-theme="dark"]. */

/* Source Sans 3, self-hosted. Deliberately NOT the Google Fonts CDN: that would
   make every visitor's browser hand their IP to a third party on a site whose
   whole promise is that nothing leaves their machine. It was also slower, since
   an @import inside this file cannot start downloading until this file has
   already arrived. Four weights, latin subset, 64 KB total, SIL OFL, licence in
   assets/fonts/OFL.txt. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --surface-1: #ffffff; --page: #f5f7f4;
  --ink-1: #22302a; --ink-2: #4c5a53; --ink-muted: #7d8a83;
  --grid: #e3e8e4; --baseline: #cfd9d2; --border: #e3e8e4;
  --series-1: #2f7d5d; --series-2: #c07b2e; --series-3: #4a7fae;
  --accent: #2f7d5d; --accent-deep: #22563f; --btnbg: #2f7d5d;
  --accent-soft: #e6f0ea;
  --delta-up: #22563f; --delta-down: #a1731f;
  --hl: #fdeed3; --hl-border: #e0a83e;
  --band: #eef1ee; --codebg: #f0f4f1;
  --menu-border: #cfd9d2;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1c2822; --page: #131c17;
  --ink-1: #edf2ee; --ink-2: #b6c2ba; --ink-muted: #8a968e;
  --grid: #2a362f; --baseline: #3a463f; --border: #2a362f;
  --series-1: #57a583; --series-2: #cf9350; --series-3: #6f9dc4;
  --accent: #57a583; --accent-deep: #8fc7ab; --btnbg: #2f7d5d;
  --accent-soft: #24382e;
  --delta-up: #7cc4a2; --delta-down: #d9a95a;
  --hl: #3a3116; --hl-border: #c98500;
  --band: #1c2822; --codebg: #131c17;
  --menu-border: #3a463f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--page); color: var(--ink-1);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.62; font-size: 16px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }

/* legacy helper, now a calm solid underline instead of the wavy amber */
.wavy {
  text-decoration: underline;
  text-decoration-color: var(--hl-border);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---- top nav ---- */
#topnav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--surface-1) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
#topnav .in { max-width: 1080px; margin: 0 auto; padding: 13px 24px; display: flex; gap: 4px; align-items: center; }
#topnav .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16.5px; letter-spacing: -0.2px; color: var(--ink-1); margin-right: 20px; text-decoration: none; }
#topnav .brand::before { content: ""; width: 11px; height: 11px; border-radius: 4px; background: var(--accent); flex: none; }
#topnav .brand:hover { color: var(--accent-deep); text-decoration: none; }
#topnav a.nl { color: var(--ink-2); font-size: 14px; font-weight: 600; padding: 6px 11px; border-radius: 8px; white-space: nowrap; }
#topnav a.nl:hover { color: var(--ink-1); text-decoration: none; background: var(--accent-soft); }
#topnav a.nl[aria-current="page"] {
  color: var(--accent-deep); background: none;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0; padding-bottom: 8px; margin-bottom: -2px;
}
#topnav .cta { margin-left: auto; background: var(--btnbg); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 10px; white-space: nowrap; }
#topnav .cta:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
#topnav .nl .short { display: none; }

/* mid breakpoint: tighten the nav before the 760px mobile pattern kicks in */
@media (max-width: 980px) {
  #topnav .brand { font-size: 15.5px; margin-right: 12px; }
  #topnav a.nl { font-size: 13px; padding: 6px 8px; }
  #topnav .cta { font-size: 13px; padding: 8px 14px; }
  #topnav .nl-overflow { display: none; }
  #topnav .nl .long { display: none; }
  #topnav .nl .short { display: inline; }
  #topnav .in .more { display: block; }
  #topnav .cta { margin-left: 0; }
}

/* mobile: priority+ pattern. Home · Checker · Trends · Fix it stay visible; More holds the rest. */
#topnav .more { position: relative; margin-left: auto; display: none; }
#topnav .morebtn { background: var(--band); border: none; color: var(--ink-1); font: inherit; font-size: 13.5px; border-radius: 8px; padding: 10px 14px; cursor: pointer; white-space: nowrap; flex: none; }
#topnav .menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px;
  background: var(--surface-1); border: 1px solid var(--menu-border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 32, 26, .18); padding: 6px; display: none; z-index: 60;
}
#topnav .menu.open { display: block; }
#topnav .menu a { display: block; color: var(--ink-1); font-size: 14px; padding: 11px 14px; border-radius: 8px; }
#topnav .menu a:hover { background: var(--accent-soft); text-decoration: none; }
@media (max-width: 760px) {
  #topnav .in { padding: 10px 16px; flex-wrap: wrap; }
  #topnav .brand { width: 100%; margin: 2px 0 8px; }
  #topnav a.nl { padding: 10px 11px; }
  #topnav .nl-overflow, #topnav .cta { display: none; }
  #topnav .more { display: block; }
  #topnav .nl .short { display: inline; }
  #topnav .nl .long { display: none; }
}

/* ---- page scaffolding ---- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px 40px; }
.wrap-narrow { max-width: 908px; margin: 0 auto; padding: 0 24px 40px; }
.wrap-post { max-width: 768px; margin: 0 auto; padding: 0 24px 40px; }
h2.page { font-size: 30px; margin: 40px 0 6px; letter-spacing: -0.6px; }
.pagesub { color: var(--ink-2); font-size: 15px; margin: 0 0 22px; }

.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px; }

.label-caps { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }

.btn { display: inline-block; background: var(--btnbg); color: #fff; border: none; border-radius: 10px; padding: 11px 20px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.btn2 { display: inline-block; background: var(--surface-1); color: var(--ink-1); border: 1.5px solid var(--menu-border); border-radius: 10px; padding: 10px 19px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn2:hover { border-color: var(--accent); color: var(--accent-deep); text-decoration: none; }

.pill { display: inline-block; background: var(--surface-1); border: 1px solid var(--menu-border); color: var(--ink-2); border-radius: 99px; padding: 8px 17px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pill:hover { color: var(--ink-1); }
.pill[aria-selected="true"], .pill.on { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-deep); font-weight: 700; }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 99px; border: none; }
.chip.rising { color: var(--delta-down); background: var(--hl); }
.chip.falling { color: var(--delta-up); background: var(--accent-soft); }
.chip.stable { color: var(--ink-muted); background: var(--band); }

mark.tell { background: var(--hl); border-bottom: 2px solid var(--hl-border); color: var(--ink-1); border-radius: 3px; padding: 0 2px; cursor: help; position: relative; }
mark.tell:hover::after {
  content: attr(data-tell); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10;
  background: var(--ink-1); color: var(--page); font-size: 12px; line-height: 1.4;
  padding: 8px 10px; border-radius: 8px; width: 240px; white-space: normal;
}

/* display-size specimen marks (home hero, post header band) */
.specimen mark { background: var(--hl); color: var(--ink-1); padding: 0 5px; border-radius: 4px; text-decoration: none; box-shadow: inset 0 -2px 0 var(--hl-border); }

/* ---- footer strip ---- */
footer.site { margin-top: 48px; border-top: 1px solid var(--border); background: var(--surface-1); }
footer.site .in { max-width: 1080px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 16px; color: var(--ink-muted); font-size: 13px; flex-wrap: wrap; }
footer.site .privacy-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); padding: 5px 13px; border-radius: 99px; }
#themeBtn { margin-left: auto; background: var(--surface-1); border: 1px solid var(--border); color: var(--ink-2); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Chips on the home card double as doors into the tells glossary. */
.chips a { color: inherit; text-decoration: none; }
.chips a:hover { text-decoration: underline; }
.explain-more { margin: 12px 0 0; font-size: 13.5px; line-height: 1.9; }