/* Psych Safety house style for the Field Guide's static pages (node, trail,
   theme, author, about, privacy, text index, 404). Tokens from the brand
   guide's developer reference (v1.0, August 2026), with one correction: green
   used as a button fill or as text on white is #00796B, as on
   measure.psychsafety.com. The guide's #00897A measures 4.32:1 on white and
   white on #00A892 measures 2.99:1, both under WCAG AA. See
   docs/reports/2026-10-08-styling-alignment.md. Site chrome (header,
   breadcrumb, footer) follows measure.psychsafety.com, as failure-lab's
   Learning Lab pages already do. The interactive map does not use this file. */

@font-face { font-family: "Jost"; src: url("/brand/Jost-Medium.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/brand/Jost-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/brand/Jost-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/brand/Jost-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ps-black: #0A0A0A; --ps-true-black: #000000; --ps-white: #FFFFFF;
  --ps-green: #00A892;       /* fills, markers, green on black */
  --ps-green-deep: #00796B;  /* green as text on white, button fills (5.32:1) */
  --ps-green-tint: #E5F6F3;  /* callout backgrounds only */
  --ps-grey-900: #1A1A1A; --ps-grey-800: #2E2E2E; --ps-grey-700: #454545;
  --ps-grey-600: #6B6B6B; --ps-grey-500: #8A8A8A; --ps-grey-300: #D2D2D2;
  --ps-grey-200: #E6E6E6; --ps-grey-100: #F2F2F2; --ps-grey-050: #F8F8F8;
  --fg-1: var(--ps-black); --fg-2: var(--ps-grey-700); --fg-3: var(--ps-grey-600);
  --bg-2: var(--ps-grey-050); --border-1: var(--ps-grey-200);
  --accent: var(--ps-green); --accent-text: var(--ps-green-deep);
  --font-sans: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
  --fs-h1: clamp(2rem, 4vw, 2.75rem); --fs-h2: 1.375rem; --fs-body: 1.0625rem;
  --fs-small: 0.9375rem; --fs-caption: 0.8125rem;
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --radius-sm: 2px;
  --border-hairline: 1px solid var(--border-1);
  --dur-base: 200ms; --ease-standard: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ps-white); color: var(--fg-2); font-family: var(--font-sans);
       font-weight: 500; font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { color: var(--ps-black); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { color: var(--fg-1); text-wrap: pretty; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: var(--sp-2) 0 var(--sp-4); }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: var(--sp-7) 0 var(--sp-3); }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.2rem; }
li { margin: .3rem 0; }

/* ---------- page body ---------- */
main { flex: 1 0 auto; width: 100%; max-width: 46rem; margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); }
.eyebrow { font-weight: 700; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase;
           color: var(--accent-text); margin: 0 0 var(--sp-2); }
.meta, .crumb { color: var(--fg-3); font-size: var(--fs-small); }
.meta a { color: var(--fg-3); }
.meta a:hover { color: var(--accent-text); }
.summary, .pitch { font-size: 1.125rem; color: var(--fg-2); }

.ps-btn, .mapbtn { display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; background: var(--ps-green-deep);
  color: var(--ps-white); transition: background var(--dur-base) var(--ease-standard); }
.ps-btn:hover, .mapbtn:hover { background: var(--ps-black); color: var(--ps-white); }
.ps-btn:active, .mapbtn:active { transform: scale(.98); }

.mapcta { margin: var(--sp-5) 0 var(--sp-6); }
.mapcta svg { display: block; width: 100%; height: auto; background: var(--bg-2); border: var(--border-hairline);
              margin: 0 0 var(--sp-4); }
.signin { margin: var(--sp-6) 0 0; padding: var(--sp-4) var(--sp-5); background: var(--bg-2); border: var(--border-hairline);
          border-radius: var(--radius-sm); }
.signin p { margin: 0; font-size: var(--fs-small); color: var(--fg-2); }
.signin a { font-weight: 700; white-space: nowrap; }
.actions { margin: var(--sp-6) 0; padding: var(--sp-4) 0; border-top: var(--border-hairline); border-bottom: var(--border-hairline); }
.actions a { display: block; margin: .35rem 0; font-weight: 700; }

/* trails */
ol.stops { padding-left: 1.4rem; }
ol.stops > li { margin: var(--sp-5) 0; }
.stopdesc { color: var(--fg-2); font-size: var(--fs-small); margin: .2rem 0 .3rem; }
ul.detours { padding-left: 1.1rem; font-size: var(--fs-small); }
ul.detours li { margin: .15rem 0; }
.trail { margin: var(--sp-5) 0; padding-bottom: var(--sp-5); border-bottom: var(--border-hairline); }
.trail p { color: var(--fg-2); font-size: var(--fs-small); margin: .3rem 0 0; }

/* the page's own closing line, above the site footer */
.pagefoot { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: var(--border-hairline);
            font-size: var(--fs-small); color: var(--fg-3); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; } }