/* ============================================================
   Naloku — shared site stylesheet
   Living document. Last updated 2026-05-07.

   Design tokens, layout primitives, and component styles for all
   pages: index.html, privacy.html, terms.html, kokua-privacy.html,
   kokua-eula.html.

   Design direction: branding/2026-05-07-website-design-direction.md
   Color system anchor: branding/color-system-spec.md (Kokua spec)
   ============================================================ */


/* ----- Self-hosted webfonts (all open-source, all optional) -----
   The site is designed to use three self-hosted typefaces. Each
   gracefully falls back to a system stack if the font file is
   absent, so the site never breaks.

   To install the fonts (one-time, ~30 seconds each):
     1. Fraunces (display headlines)
        https://fonts.google.com/specimen/Fraunces  → Get → Download family
        Place at:  website/fonts/fraunces-variable.woff2

     2. Atkinson Hyperlegible (default body — accessibility-friendly)
        https://fonts.google.com/specimen/Atkinson+Hyperlegible  → Get → Download family
        Place regular + bold weights as woff2 at:
          website/fonts/atkinson-hyperlegible-regular.woff2
          website/fonts/atkinson-hyperlegible-bold.woff2

     3. OpenDyslexic (opt-in body via accessibility toggle)
        https://opendyslexic.org  → Download
        Convert TTF → woff2 if needed (use https://transfonter.org)
        Place at:
          website/fonts/opendyslexic-regular.woff2
          website/fonts/opendyslexic-bold.woff2

   No font is required for the site to function. Each missing font
   falls through to the next stack entry below.
   ------------------------------------------------------------- */

/* Display — Fraunces */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-variable.woff2") format("woff2-variations"),
       url("fonts/fraunces-variable.woff2") format("woff2");
  font-variation-settings: "opsz" 14;
}

/* Body — Atkinson Hyperlegible (default) */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
}

/* Body — OpenDyslexic (opt-in via Accessibility panel) */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/opendyslexic-regular.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/opendyslexic-bold.woff2") format("woff2");
}


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
  /* Background palette */
  --bg:           #FAF7F2;   /* warm ivory — page default */
  --bg-alt:       #EFEAE0;   /* sand — alternating section bands, callouts */
  --bg-deep:      #0F2A33;   /* deep ocean — hero, footer */
  --bg-deep-2:    #154453;   /* mid-ocean — gradient mid-stop */

  /* Text */
  --text:         #1F2937;   /* charcoal */
  --text-muted:   #5B6772;   /* warm gray */
  --text-on-deep: #E8E5DD;   /* warm off-white on deep ocean */
  --text-on-deep-muted: #94A3AC;

  /* Brand */
  --brand:        #0E7490;   /* Kokua-aligned deep teal — primary */
  --brand-hover:  #0B5566;   /* darker, for hovered links */
  --brand-bright: #22D3EE;   /* brighter teal for dark mode */
  --pisces:       #7C6FBA;   /* Pisces violet — secondary accent, used sparingly */
  --warm:         #C97B5C;   /* sunset coral — used at most once or twice */

  /* Structural */
  --rule:         #DDD5C7;   /* warm hairline divider */
  --max-width:    640px;     /* body-text max width */
  --max-width-legal: 720px;  /* legal-doc max width */
  --max-width-band:  1200px; /* full section bands width cap */
  --radius:       4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0E1719;
    --bg-alt:        #172227;
    --bg-deep:       #050C0F;
    --bg-deep-2:     #0E1719;

    --text:          #E8E5DD;
    --text-muted:    #9AA5AC;
    --text-on-deep:  #E8E5DD;
    --text-on-deep-muted: #94A3AC;

    --brand:         #22D3EE;
    --brand-hover:   #67E8F9;
    --brand-bright:  #67E8F9;
    --pisces:        #A89DD3;
    --warm:          #E29A7C;

    --rule:          #2D343C;
  }
}


/* ============================================================
   2. RESET + BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Atkinson Hyperlegible",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--base-font-size, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Accessibility — opt-in body font (set via the Accessibility panel) */
html[data-font="dyslexic"] body,
html[data-font="dyslexic"] .band p,
html[data-font="dyslexic"] .band li,
html[data-font="dyslexic"] .legal-document p,
html[data-font="dyslexic"] .legal-document li,
html[data-font="dyslexic"] .legal-document dd,
html[data-font="dyslexic"] .lede,
html[data-font="dyslexic"] .principle p,
html[data-font="dyslexic"] .contact-email,
html[data-font="dyslexic"] footer.site-footer p,
html[data-font="dyslexic"] footer.site-footer .legal-links a,
html[data-font="dyslexic"] nav.toc li {
  font-family:
    "OpenDyslexic",
    "Atkinson Hyperlegible",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Accessibility — text-size adjustment via base-font-size variable.
   Only body and inheriting elements scale; section headings stay
   sized for visual hierarchy. */
html[data-text-size="larger"]  { --base-font-size: 19px; }
html[data-text-size="largest"] { --base-font-size: 21px; }

/* Display typeface stack — Fraunces with strong system-serif fallback */
.display, h1, h2, .wordmark {
  font-family:
    "Fraunces",
    "Iowan Old Style", "Charter", "Bitstream Charter",
    Georgia, "Times New Roman", serif;
  font-feature-settings: "ss01" on, "ss02" on; /* Fraunces stylistic sets — gracefully ignored when fallback */
  letter-spacing: -0.01em;
}

a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
a:hover, a:focus { color: var(--brand-hover); }

::selection {
  background: var(--brand);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip-link for keyboard / screen-reader users */
.skip {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
}
.skip:focus { top: 0; }


/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--wide {
  max-width: var(--max-width-band);
}

.legal-document .wrap {
  max-width: var(--max-width-legal);
}


/* ============================================================
   4. HEADER
   ============================================================ */

header.site-header {
  position: relative;
  z-index: 2;
  padding: 28px 0 20px;
}

/* On the homepage, the header sits over the deep-ocean hero,
   so the wordmark needs to read in light. The .site-header--on-deep
   modifier flips its colors. */
header.site-header--on-deep {
  background: transparent;
}
header.site-header--on-deep .wordmark {
  color: var(--text-on-deep);
}

.wordmark {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-feature-settings: "ss01" on;
}
.wordmark:hover, .wordmark:focus {
  color: var(--brand-hover);
}
header.site-header--on-deep .wordmark:hover,
header.site-header--on-deep .wordmark:focus {
  color: #fff;
}
.wordmark svg {
  display: block;
  flex-shrink: 0;
}


/* ============================================================
   5. HERO (homepage only)
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  margin-top: -84px;          /* pull hero up so header sits inside the gradient panel */
  padding: 132px 0 96px;
  color: var(--text-on-deep);
  background:
    radial-gradient(ellipse 80% 60% at 18% 12%, rgba(124, 111, 186, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 88% 78%, rgba(34, 211, 238, 0.18) 0%, transparent 65%),
    linear-gradient(168deg, var(--bg-deep) 0%, var(--bg-deep-2) 55%, var(--bg-deep) 100%);
  overflow: hidden;
}

/* Slowly-drifting deep-ocean glow layer */
.hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(34, 211, 238, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(124, 111, 186, 0.10) 0%, transparent 70%);
  animation: ocean-drift 18s ease-in-out infinite alternate;
}

@keyframes ocean-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4%, -2%, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* Hero typography */
.hero h1 {
  font-size: clamp(40px, 6.5vw, 68px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--text-on-deep);
}
.hero .lede {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--text-on-deep-muted);
  margin: 0;
  max-width: 600px;
}
.hero strong {
  color: var(--text-on-deep);
  font-weight: 600;
}

/* Wave shape that bridges the hero to the first content section */
.hero-wave {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: -1px;          /* prevent any sub-pixel gap */
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ============================================================
   6. SECTION BANDS
   ============================================================ */

.band {
  position: relative;
  padding: 88px 0 88px;
}

.band--ivory { background: var(--bg); }
.band--sand  { background: var(--bg-alt); }

.band--ivory + .band--sand,
.band--sand + .band--ivory {
  /* the alternating bands already give visual rhythm without a hard rule */
}

/* Section marker — magazine-style oversized small caps */
.section-marker {
  display: block;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 18px;
}

.section-marker .num {
  color: var(--pisces);
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
}

/* Section headings */
.band h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px;
}

.band h3 {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 32px 0 10px;
}

.band p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.7;
}

.band em {
  font-style: italic;
  color: var(--text);
}


/* ============================================================
   7. PRINCIPLES GRID (How we work — homepage)
   ============================================================ */

.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 8px;
}
@media (min-width: 720px) {
  .principles {
    grid-template-columns: 1fr 1fr;
    gap: 36px 48px;
  }
}

.principle {
  position: relative;
  padding-left: 18px;
  border-left: 2px solid var(--brand);
}
.principle:nth-child(2) { border-left-color: var(--pisces); }
.principle:nth-child(3) { border-left-color: var(--brand); }
.principle:nth-child(4) { border-left-color: var(--pisces); }

.principle h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.principle p {
  margin-bottom: 0;
  color: var(--text);
}


/* ============================================================
   8. CALLOUTS + CONTACT
   ============================================================ */

.callout {
  background: var(--bg-alt);
  border-left: 3px solid var(--pisces);
  padding: 16px 22px;
  margin: 28px 0;
  font-weight: 500;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.band--sand .callout { background: var(--bg); }

.contact-email {
  font-size: 22px;
  font-weight: 500;
  margin: 8px 0 16px;
}
.contact-email a {
  text-decoration-thickness: 1.5px;
}

/* Multi-alias contact list (homepage Contact section) */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 22px;
  border-left: 2px solid var(--brand);
}
.contact-list li {
  padding: 12px 0 12px 18px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule);
}
.contact-list li:last-child { border-bottom: none; }
.contact-list li strong {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.contact-list li a {
  text-decoration-thickness: 1.5px;
  font-size: 17px;
}


/* ============================================================
   9. WAVE DIVIDER (between same-tone sections)
   ============================================================ */

.wave-divider {
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
  color: var(--brand);
  opacity: 0.35;
  pointer-events: none;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ============================================================
   10. LEGAL-DOCUMENT LAYOUT
   ============================================================ */

.legal-document {
  background: var(--bg);
  padding-top: 16px;
  padding-bottom: 80px;
}

.legal-header {
  padding: 20px 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.legal-header h1 {
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--text);
}

.legal-header .legal-subtitle {
  font-size: 17px;
  color: var(--text-muted);
  margin: 0 0 22px;
  font-style: italic;
}

.legal-header dl.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.legal-header dl.meta dt {
  font-weight: 600;
  color: var(--text);
}
.legal-header dl.meta dd { margin: 0; }

/* Effective-date placeholder — visually conspicuous so it's spotted before deployment */
.legal-header dd .placeholder {
  background: var(--bg-alt);
  border: 1px dashed var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--radius);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Table of contents */
nav.toc {
  background: var(--bg-alt);
  border-left: 3px solid var(--brand);
  padding: 22px 26px;
  margin: 28px 0 44px;
}
nav.toc h2 {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand);
  margin: 0 0 12px;
}
nav.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav.toc li {
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.55;
}
nav.toc li a {
  text-decoration: none;
  color: var(--text);
}
nav.toc li a:hover, nav.toc li a:focus {
  text-decoration: underline;
  color: var(--brand);
}

/* Legal sections */
.legal-document section {
  margin: 32px 0;
  scroll-margin-top: 24px;
}
.legal-document section h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: var(--brand);
}
.legal-document section h3 {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}
.legal-document section h4 {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  margin: 20px 0 6px;
}
.legal-document p { margin: 0 0 14px; }

.legal-document ul {
  list-style: none;     /* legal docs use (a)(b)(c) markers as text */
  margin: 0 0 14px;
  padding-left: 24px;
}
.legal-document ol {
  margin: 0 0 14px;
  padding-left: 24px;
}
.legal-document li { margin: 6px 0; }

.legal-document strong { font-weight: 600; }
.legal-document em { font-style: italic; }

/* All-caps disclaimer blocks — softened visually */
.legal-document .all-caps {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-alt);
  border-left: 3px solid var(--rule);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Defined-terms list */
.legal-document dl.terms { margin: 0 0 16px; }
.legal-document dl.terms dt {
  font-weight: 600;
  color: var(--text);
  margin-top: 12px;
}
.legal-document dl.terms dd { margin: 0 0 6px; }

/* Back-to-home link at top of legal pages */
.back-link {
  display: inline-block;
  margin: 8px 0 24px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
}
.back-link::before { content: "← "; }
.back-link:hover, .back-link:focus {
  color: var(--brand);
  text-decoration: underline;
}

/* End-of-document mark */
.legal-document .end-mark {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}


/* ============================================================
   11. FOOTER (deep ocean treatment)
   ============================================================ */

footer.site-footer {
  position: relative;
  margin-top: 80px;
  padding: 56px 0 48px;
  background: var(--bg-deep);
  color: var(--text-on-deep-muted);
  font-size: 14px;
  line-height: 1.7;
  overflow: hidden;
}

footer.site-footer::before {
  /* faint Pisces-violet glow accent in one corner */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 10%, rgba(124, 111, 186, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

footer.site-footer .wave-divider {
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  width: 100%;
  height: 32px;
  color: var(--bg-deep);
  opacity: 1;
  margin: 0;
  z-index: 1;
}
footer.site-footer .wave-divider svg {
  fill: var(--bg-deep);
}

footer.site-footer .footer-wordmark {
  font-family:
    "Fraunces",
    "Iowan Old Style", "Charter", "Bitstream Charter",
    Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-on-deep);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

footer.site-footer p {
  margin: 0 0 8px;
}

footer.site-footer .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 16px;
}
footer.site-footer .legal-links a {
  color: var(--text-on-deep-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
footer.site-footer .legal-links a:hover,
footer.site-footer .legal-links a:focus {
  color: var(--text-on-deep);
  border-bottom-color: var(--brand-bright);
}


/* ============================================================
   12. SCROLL-TRIGGERED SECTION FADE-IN
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: opacity, transform;
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   13. SCROLL PROGRESS INDICATOR
   ============================================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--pisces) 100%);
  z-index: 150;
  transition: width 50ms linear;
  pointer-events: none;
}


/* ============================================================
   14. HERO IMAGE — layered with the Gemini ocean
   ============================================================ */

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-image picture,
.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-image::after {
  /* tonal overlay so type stays readable over any part of the image */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 42, 51, 0.45) 0%, rgba(15, 42, 51, 0.15) 35%, rgba(15, 42, 51, 0.55) 100%);
  pointer-events: none;
}

/* Layered SVG wave shapes inside the hero, in front of the image */
.hero-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: -1;
  width: 100%;
  height: 35%;
  pointer-events: none;
  overflow: hidden;
}
.hero-waves svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.hero-waves .wave-back  { opacity: 0.35; animation: wave-drift 28s ease-in-out infinite alternate; }
.hero-waves .wave-mid   { opacity: 0.50; animation: wave-drift 22s ease-in-out infinite alternate-reverse; }
.hero-waves .wave-front { opacity: 0.85; }

@keyframes wave-drift {
  0%   { transform: translateX(-2%); }
  100% { transform: translateX(2%);  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-waves .wave-back, .hero-waves .wave-mid { animation: none; }
}

/* Scroll cue at the bottom of the hero */
.hero-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-deep-muted);
  z-index: 1;
  pointer-events: none;
  animation: scroll-cue-bob 2.6s ease-in-out infinite;
}
@keyframes scroll-cue-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; }
}


/* ============================================================
   15. DISPLAY SECTION NUMBERS
   ============================================================ */

.section-number {
  display: block;
  font-family: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  font-size: clamp(72px, 11vw, 132px);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--pisces);
  opacity: 0.65;
  margin: 0 0 8px -4px;
  font-variant-numeric: oldstyle-nums;
}

.band--showcase .section-number { color: var(--brand-bright); opacity: 0.55; }


/* ============================================================
   16. DEEP-TEAL SHOWCASE SECTION (Our first product)
   ============================================================ */

.band--showcase {
  position: relative;
  background: linear-gradient(160deg, #0F2A33 0%, #154453 50%, #0E2A33 100%);
  color: var(--text-on-deep);
  padding: 110px 0 120px;
  overflow: hidden;
}

.band--showcase::before {
  /* subtle Pisces glow in upper-right */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 88% 18%, rgba(124, 111, 186, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 14% 82%, rgba(34, 211, 238, 0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.band--showcase > * { position: relative; z-index: 1; }

.band--showcase h2 {
  color: var(--text-on-deep);
  font-size: clamp(32px, 4.4vw, 44px);
  letter-spacing: -0.02em;
}
.band--showcase h3 {
  color: var(--text-on-deep);
}
.band--showcase p {
  color: var(--text-on-deep-muted);
  font-size: 18px;
}
.band--showcase strong { color: var(--text-on-deep); }
.band--showcase em { color: var(--text-on-deep); }

.band--showcase .callout {
  background: rgba(34, 211, 238, 0.08);
  border-left-color: var(--brand-bright);
  color: var(--text-on-deep);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}
@media (min-width: 880px) {
  .showcase-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
  }
}


/* ============================================================
   17. PISCES CONSTELLATION
   ============================================================ */

.constellation {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1200 / 600;
  margin: 0 auto;
}
.constellation svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.constellation .star {
  fill: #FBF5DC;
  filter: drop-shadow(0 0 6px rgba(251, 245, 220, 0.9))
          drop-shadow(0 0 18px rgba(124, 111, 186, 0.4));
  animation: star-twinkle 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.constellation .star--bright { animation-duration: 5.5s; }
.constellation .star--dim    { animation-duration: 6.8s; opacity: 0.78; }
.constellation .star--red    { fill: #F4C2A1; }   /* TX Psc, the carbon-star red */

.constellation .star:nth-child(3n)   { animation-delay: -1.2s; }
.constellation .star:nth-child(3n+1) { animation-delay: -2.7s; }
.constellation .star:nth-child(3n+2) { animation-delay: -3.9s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.constellation .cord {
  fill: none;
  stroke: rgba(168, 157, 211, 0.55);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 6;
}

/* Mesh-hop pulses traveling along the cords */
.constellation .hop {
  fill: var(--brand-bright);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.9));
  offset-rotate: 0deg;
}
.constellation .hop--north {
  offset-path: path("M 700 470 L 640 400 L 570 350 L 490 300 L 410 250 L 340 200 L 280 165 L 235 130 L 210 100");
  animation: hop-along 8s ease-in-out infinite;
}
.constellation .hop--west {
  offset-path: path("M 700 470 L 820 390 L 940 300 L 1040 220");
  animation: hop-along 6.5s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes hop-along {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .constellation .star,
  .constellation .hop {
    animation: none;
  }
  .constellation .hop { display: none; }
}

.constellation-caption {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-deep-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.constellation-caption .accent { color: var(--pisces); }


/* ============================================================
   18. HOW WE WORK — principle icons grid
   ============================================================ */

.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px 0;
  margin-top: 16px;
}
@media (min-width: 760px) {
  .principles {
    grid-template-columns: 1fr 1fr;
    gap: 56px 64px;
  }
}

.principle {
  position: relative;
  padding-left: 0;
  border-left: none;
}

.principle-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  color: var(--brand);
}
.principle:nth-child(2) .principle-icon { color: var(--pisces); }
.principle:nth-child(3) .principle-icon { color: var(--brand); }
.principle:nth-child(4) .principle-icon { color: var(--pisces); }

.principle h3 {
  font-family: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.principle p {
  margin-bottom: 0;
  font-size: 16.5px;
  line-height: 1.7;
}


/* ============================================================
   19. ABOUT SECTION — etymology spread with labels-on-waves
   ============================================================ */

/* The watercolor IS the etymology. On desktop, each Hawaiian term floats
   above its corresponding wave. On mobile, the same dl reflows into a
   triptych below the image. Same DOM, same content, two layouts. */
.etymology-spread {
  margin: 56px auto 28px;
  text-align: center;
  max-width: 880px;
}

.etymology-figure {
  position: relative;
  margin: 0 auto;
  max-width: 720px;
}
.etymology-figure picture, .etymology-figure picture img {
  display: block;
  width: 100%;
  height: auto;
}
.etymology-figure picture img {
  mix-blend-mode: multiply;  /* watercolor's warm-cream blends with page bg */
}

.etymology-title {
  font-family: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: 0.02em;
  color: var(--brand);
  margin: 12px 0 20px;
}

/* Mobile / fallback layout: triptych below the image */
.etymology {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 24px 0 0;
  padding: 0;
  text-align: center;
}
.etymology-item {
  padding: 0 8px;
}
.etymology dt {
  font-family: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin: 0 0 8px;
}
.etymology dd {
  margin: 0 auto;
  max-width: 240px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
}

/* Desktop: terms float above their corresponding waves */
@media (min-width: 760px) {
  .etymology {
    /* the dl becomes an absolutely-positioned overlay on the watercolor */
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }
  .etymology-item {
    position: absolute;
    transform: translateX(-50%);
    width: max-content;
    max-width: 180px;
    text-align: center;
    padding: 0;
  }
  .etymology dt {
    font-size: clamp(20px, 2.4vw, 28px);
    margin-bottom: 4px;
    text-shadow: 0 1px 8px rgba(250, 247, 242, 0.95),
                 0 0 16px rgba(250, 247, 242, 0.85);
  }
  .etymology dd {
    font-size: 11px;
    line-height: 1.35;
    max-width: 160px;
    text-shadow: 0 1px 6px rgba(250, 247, 242, 0.95);
  }

  /* Position each term above its wave (left → right, ascending sizes
     mirror the watercolor: small → medium → tall) */
  .etymology-item--nalu   { left: 22%; top: 28%; }
  .etymology-item--lokahi { left: 45%; top: 14%; }
  .etymology-item--kokua  { left: 73%; top: 4%;  }
}

/* Dark-mode handling — the watercolor was painted on warm cream, so we
   invert + tint it so it reads as luminous wave forms on the night-ocean bg */
@media (prefers-color-scheme: dark) {
  .etymology-figure picture img {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(170deg) saturate(0.85) brightness(1.05);
  }
  .etymology dt {
    text-shadow: 0 1px 10px rgba(14, 23, 25, 0.95),
                 0 0 20px rgba(14, 23, 25, 0.85);
  }
  .etymology dd {
    text-shadow: 0 1px 6px rgba(14, 23, 25, 0.95);
  }
}


/* ============================================================
   20. MANIFESTO MOMENT
   ============================================================ */

.manifesto {
  padding: 96px 0 96px;
  text-align: center;
  background: var(--bg);
  position: relative;
}
.manifesto blockquote {
  margin: 0;
  padding: 0;
  max-width: 800px;
  margin: 0 auto;
  font-family: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.25;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--text);
}
.manifesto blockquote::before { content: "\201C"; color: var(--pisces); margin-right: 4px; }
.manifesto blockquote::after  { content: "\201D"; color: var(--pisces); margin-left: 4px; }


/* ============================================================
   21. CONTACT LIST POLISH
   ============================================================ */

.contact-list li {
  transition: background 220ms ease, padding-left 220ms ease;
}
.contact-list li:hover {
  background: rgba(14, 116, 144, 0.05);
  padding-left: 22px;
}
.contact-list li a {
  position: relative;
  transition: color 200ms ease;
}


/* ============================================================
   22. FOOTER WITH GEMINI WAVE IMAGE
   ============================================================ */

footer.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding: 88px 0 56px;
  background: var(--bg-deep);
  color: var(--text-on-deep-muted);
  font-size: 14px;
  line-height: 1.7;
  overflow: hidden;
}
footer.site-footer .footer-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
footer.site-footer .footer-image picture,
footer.site-footer .footer-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.65;
}
footer.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15, 42, 51, 0.55) 0%, rgba(15, 42, 51, 0.85) 80%);
  pointer-events: none;
}

footer.site-footer .footer-wave-top {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 110px;
  pointer-events: none;
}
footer.site-footer .footer-wave-top svg {
  width: 100%;
  height: 100%;
  display: block;
}
footer.site-footer .footer-wave-top svg path {
  fill: var(--bg-deep);
}

footer.site-footer .footer-wordmark {
  font-family: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-on-deep);
  letter-spacing: -0.02em;
  margin: 16px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

footer.site-footer .pisces-mark {
  display: block;
  width: 64px;
  height: 24px;
  margin: 28px 0 18px;
  color: var(--pisces);
  opacity: 0.6;
}

footer.site-footer .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 18px;
}
footer.site-footer .legal-links a {
  position: relative;
  color: var(--text-on-deep-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
footer.site-footer .legal-links a:hover,
footer.site-footer .legal-links a:focus {
  color: var(--text-on-deep);
  border-bottom-color: var(--brand-bright);
}


/* ============================================================
   23. ACCESSIBILITY PANEL
   ============================================================ */

/* The toggle button lives in the footer's legal-links nav. */
.a11y-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 1px 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-on-deep-muted);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.a11y-toggle:hover, .a11y-toggle:focus {
  color: var(--text-on-deep);
  border-bottom-color: var(--brand-bright);
}

/* On legal pages and other light-bg pages, the footer is dark — the
   button color rules above already work. No further variant needed. */

/* The panel itself — modal dialog rendered as part of the footer DOM */
.a11y-panel {
  position: fixed;
  z-index: 200;
  bottom: 24px;
  right: 24px;
  width: min(360px, calc(100vw - 48px));
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(15, 42, 51, 0.18), 0 4px 12px rgba(15, 42, 51, 0.08);
  padding: 22px 24px;
  font-size: 15px;
  line-height: 1.5;
}
.a11y-panel[hidden] { display: none; }

@media (max-width: 480px) {
  .a11y-panel {
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

.a11y-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}
.a11y-panel h2 {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand);
  margin: 0;
}
.a11y-panel .a11y-close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font: inherit;
  color: var(--text-muted);
  border-radius: 3px;
  line-height: 1;
}
.a11y-panel .a11y-close:hover, .a11y-panel .a11y-close:focus {
  color: var(--text);
  background: var(--bg-alt);
}

.a11y-panel fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.a11y-panel fieldset:last-of-type { margin-bottom: 8px; }
.a11y-panel legend {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--text);
}

.a11y-panel .a11y-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.a11y-panel label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 120ms ease;
}
.a11y-panel label:hover {
  background: var(--bg-alt);
}
.a11y-panel input[type="radio"] {
  accent-color: var(--brand);
  margin: 0;
}

.a11y-panel .a11y-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.a11y-panel .a11y-reset {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text-muted);
  border-radius: 4px;
  transition: color 180ms ease, border-color 180ms ease;
}
.a11y-panel .a11y-reset:hover, .a11y-panel .a11y-reset:focus {
  color: var(--text);
  border-color: var(--text-muted);
}

.a11y-panel .a11y-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}


/* ============================================================
   14. RESPONSIVE TUNING
   ============================================================ */

@media (max-width: 600px) {
  .band { padding: 64px 0; }
  .hero { padding: 108px 0 72px; }
  footer.site-footer { padding: 56px 0 40px; }
  .band--showcase { padding: 80px 0 90px; }
  .manifesto { padding: 64px 0; }
  .section-number { font-size: clamp(56px, 14vw, 80px); }
}


/* ============================================================
   25. ANIMATED WORDMARK + REFINED LINK AFFORDANCES
   ============================================================ */

/* Wordmark wave gently rises on hover */
.wordmark svg path {
  transition: d 400ms ease, transform 400ms ease;
  transform-origin: center;
}
.wordmark:hover svg,
.wordmark:focus svg {
  animation: wordmark-pulse 1.2s ease-in-out;
}
@keyframes wordmark-pulse {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-2px); }
  70%      { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark:hover svg, .wordmark:focus svg { animation: none; }
}

/* Body-text links inside legal documents — gradient underline that animates */
.legal-document p a,
.legal-document li a,
.legal-document dd a {
  background-image: linear-gradient(90deg, var(--brand) 0%, var(--pisces) 100%);
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  text-decoration: none;
  padding-bottom: 1px;
  transition: background-size 320ms ease, color 200ms ease;
}
.legal-document p a:hover,
.legal-document p a:focus,
.legal-document li a:hover,
.legal-document li a:focus,
.legal-document dd a:hover,
.legal-document dd a:focus {
  background-size: 100% 1.5px;
  color: var(--brand-hover);
}


/* ============================================================
   26. SUB-FOOTER (the footer of the footer)
   ============================================================ */

.sub-footer {
  background: var(--bg-deep-2);
  color: var(--text-on-deep-muted);
  border-top: 1px solid rgba(34, 211, 238, 0.10);
  padding: 24px 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.sub-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: baseline;
}
.sub-footer p { margin: 0; }
.sub-footer .sub-footer-statement {
  flex: 1 1 60%;
  min-width: 280px;
}
.sub-footer .sub-footer-meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-align: right;
  color: var(--text-on-deep-muted);
  opacity: 0.7;
}


/* ============================================================
   27. FOOTER CONSTELLATION ECHO
   — A small Pisces silhouette behind the footer wordmark
   ============================================================ */

.footer-constellation {
  position: absolute;
  top: 84px;
  right: 32px;
  width: 220px;
  height: 110px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  color: var(--brand-bright);
}
.footer-constellation svg { width: 100%; height: 100%; display: block; }
.footer-constellation .star { fill: currentColor; }
.footer-constellation .cord { stroke: currentColor; stroke-width: 0.6; fill: none; stroke-dasharray: 1 4; }

@media (max-width: 720px) {
  .footer-constellation { display: none; }
}


/* ============================================================
   28. NIGHT-OCEAN DARK MODE TREATMENT
   ============================================================ */

@media (prefers-color-scheme: dark) {
  /* The about-illustration was painted on warm cream and looks foreign
     on a dark page. Invert it so the watercolor reads as luminous wave
     forms against the night-ocean background. */
  .about-illustration img {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(170deg) saturate(0.85) brightness(1.05);
  }

  /* Hero gets a deeper night-ocean glow */
  .hero {
    background:
      radial-gradient(ellipse 80% 60% at 18% 12%, rgba(124, 111, 186, 0.32) 0%, transparent 60%),
      radial-gradient(ellipse 90% 70% at 88% 78%, rgba(34, 211, 238, 0.22) 0%, transparent 65%),
      linear-gradient(168deg, #050C0F 0%, #0E1B22 55%, #050C0F 100%);
  }
  .hero-image picture, .hero-image img { opacity: 0.78; }
  .hero-image::after {
    background: linear-gradient(180deg, rgba(5, 12, 15, 0.55) 0%, rgba(5, 12, 15, 0.30) 35%, rgba(5, 12, 15, 0.70) 100%);
  }

  /* Showcase section becomes truly nocturnal */
  .band--showcase {
    background: linear-gradient(160deg, #050C0F 0%, #0E2A33 50%, #050C0F 100%);
  }

  /* Constellation: stars more luminous against the dark; cords slightly brighter */
  .constellation .star {
    filter: drop-shadow(0 0 8px rgba(251, 245, 220, 0.95))
            drop-shadow(0 0 22px rgba(168, 157, 211, 0.55));
  }
  .constellation .cord {
    stroke: rgba(168, 157, 211, 0.70);
  }

  /* Footer-image opacity bumped slightly — it's already dark */
  footer.site-footer .footer-image picture,
  footer.site-footer .footer-image img {
    opacity: 0.55;
  }
}


/* ============================================================
   29. 404 PAGE
   ============================================================ */

.notfound {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 240px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 96px;
  background: linear-gradient(168deg, var(--bg-deep) 0%, var(--bg-deep-2) 55%, var(--bg-deep) 100%);
  color: var(--text-on-deep);
  overflow: hidden;
}
.notfound::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 18% 18%, rgba(124, 111, 186, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 82% 82%, rgba(34, 211, 238, 0.16) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.notfound .wrap {
  text-align: center;
  max-width: 640px;
}
.notfound .marker {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin: 0 0 16px;
}
.notfound .number {
  font-family: "Fraunces", "Iowan Old Style", "Charter", Georgia, serif;
  font-size: clamp(120px, 22vw, 220px);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--pisces);
  margin: 0 0 24px;
  font-variant-numeric: oldstyle-nums;
}
.notfound h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text-on-deep);
  font-weight: 600;
}
.notfound p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-on-deep-muted);
  margin: 0 0 28px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.notfound .home-link {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-bright);
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid var(--brand-bright);
  border-radius: 4px;
  transition: background 220ms ease, color 220ms ease;
}
.notfound .home-link:hover, .notfound .home-link:focus {
  background: var(--brand-bright);
  color: var(--bg-deep);
}


/* ============================================================
   30. PRINT STYLES
   ------------------------------------------------------------
   Optimized for printing the legal documents — strips out hero
   imagery, animations, the accessibility panel, and the dark
   footer so a printout reads as a clean legal document.
   ============================================================ */

@media print {
  :root {
    --bg: #FFFFFF;
    --bg-alt: #FFFFFF;
    --bg-deep: #FFFFFF;
    --text: #000000;
    --text-muted: #333333;
    --brand: #000000;
    --pisces: #000000;
    --rule: #999999;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Hide chrome and decorative elements */
  .hero, .hero-image, .hero-waves, .hero-scroll-cue,
  .scroll-progress,
  .footer-image, .footer-wave-top, .pisces-mark, .wave-divider,
  .a11y-panel, .a11y-toggle,
  .skip,
  .constellation, .constellation-caption,
  .about-illustration,
  .manifesto,
  .principle-icon,
  .section-number,
  .footer-wordmark svg,
  .wordmark svg {
    display: none !important;
  }

  /* Simpler header */
  header.site-header {
    padding: 12pt 0;
    background: #FFFFFF;
  }
  .wordmark {
    color: #000000;
    font-family: Georgia, serif;
  }

  /* Sections: kill backgrounds, keep content */
  .band, .band--ivory, .band--sand, .band--showcase {
    background: #FFFFFF !important;
    color: #000000 !important;
    padding: 16pt 0;
    page-break-inside: auto;
  }
  .band h2, .band--showcase h2,
  .legal-document h1, .legal-document section h2 {
    color: #000000 !important;
    page-break-after: avoid;
  }

  /* Legal-document specific */
  .legal-document { padding: 12pt 0; }
  .legal-document .all-caps {
    background: #FFFFFF !important;
    border-left: 2pt solid #999999;
    page-break-inside: avoid;
  }
  nav.toc {
    background: #FFFFFF !important;
    border-left: 2pt solid #000000;
    page-break-after: always;
  }
  .legal-header {
    border-bottom: 1pt solid #000000;
    page-break-after: avoid;
  }
  .legal-header dl.meta dd .placeholder {
    background: #FFFFFF;
    border: 1pt dashed #000000;
  }
  .legal-document section {
    page-break-inside: auto;
  }
  .legal-document section h2 {
    margin-top: 12pt;
  }

  /* Show URLs after links so the printout retains the reference */
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " <" attr(href) ">";
    font-size: 9pt;
    color: #555555;
  }
  a[href^="#"]::after { content: ""; }  /* don't print anchor URLs — they're not useful in print */

  /* Footer: simplified */
  footer.site-footer {
    background: #FFFFFF !important;
    color: #000000 !important;
    padding: 12pt 0;
    border-top: 1pt solid #999999;
  }
  footer.site-footer .footer-wordmark {
    color: #000000 !important;
    font-size: 14pt;
    margin: 8pt 0;
  }
  footer.site-footer .legal-links a {
    color: #000000 !important;
    border: none !important;
  }

  /* Don't print the back-link or end-mark in legal docs */
  .back-link, .end-mark { display: none !important; }
}