/*
  Omoikane — design system.
  Single source of truth for both the public Hugo site (www/, beta/) and the
  daemon/mockups/ post-login HTML scaffolds. Tokens declared once, primitives
  used everywhere. Self-host fonts later (Cormorant Garamond + Inter); for
  now the system fallbacks are good enough.

  CSP-friendly: no remote font/script imports. No third-party trackers.
  Per omoikane mission rules.
*/

/* ─── landing type pair (OMOIKANE-1439 theme harmonization) ──────────────
   hero.css is home-only, so these faces were never available off the
   homepage and content pages fell back to the editorial serif world.
   Same self-hosted files the landing uses. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans.woff2') format('woff2');
}

/* ─── design tokens ──────────────────────────────────────────────────── */

:root {
  /* primary palette */
  --c-navy:        #1A2530;
  --c-navy-darker: #121A22;
  --c-navy-soft:   #24333F;       /* sidebar nav active */
  --c-cream:       #F7F9F9;       /* page bg */
  --c-cream-soft:  #FDFEFE;       /* card bg variant */
  --c-white:       #ffffff;
  --c-gold:        #D96C5B;
  /* OMOIKANE-1507 a11y — white text on --c-gold measures 2.69:1, far under the
     4.5:1 AA floor. --c-gold stays the brand accent (13 uses: rules, borders,
     watermarks) and is NOT darkened; this deep variant exists only for the two
     surfaces that put white ON gold, so the fix is an accessibility change and
     not a rebrand. #8a734e with #ffffff measures 4.53:1. */
  --c-gold-deep:   #A84630;
  --c-gold-darker: #B0492F;
  --c-gold-soft:   #F1CEC6;       /* gold tints / accents */

  /* text */
  --c-text:        #1A2530;
  --c-text-muted:  #5A6B76;
  /* OMOIKANE-1507 a11y — was #9a9a9a, which measured 2.20:1 on --c-border and
     2.67:1 on --c-cream-soft. Both are body-text pairings, so both were well
     under 4.5:1 and under even the 3:1 large-text floor. #616161 clears 4.5:1
     against BOTH with margin (4.84:1 and 5.89:1). #666666 was tried first and
     measured 4.49:1 on --c-border — a boundary value is not a pass, and the
     re-audit is what caught it. */
  --c-text-light:  #46555F;
  --c-text-on-navy:#F7F9F9;
  --c-text-on-navy-muted: #b6c0d4;
  /* OMOIKANE-1502 a11y — express "fainter than muted" as a colour, never as
     `opacity`. .footer-legal used --c-text-on-navy-muted with opacity 0.75,
     overridden to 0.65 inside .site-footer. axe measured the COMPOSITED result
     at 4.07:1 on the navy footer (12px, normal weight -> 4.5:1 required).
     The token itself is ~7:1; the alpha is what broke it.
     This is why a token-pair contrast audit cannot catch it: opacity is not a
     colour, so no amount of checking color/background pairs will see it.
     #94a0b6 at full opacity measures 5.16:1 and looks close to the intended
     composite (#818da5). */
  --c-text-on-navy-faint: #94a0b6;

  /* borders / dividers */
  --c-border:      #DCE4E9;
  --c-border-soft: #E9EFF3;
  --c-border-on-navy: #2E3F4C;

  /* status colors (bg / text pairs) */
  --c-pink-bg:     #fad4d4;
  /* OMOIKANE-1507 a11y — 4.50:1 on --c-pink-bg sat exactly on the boundary;
     nudged to 4.57:1 so rounding cannot put it under. */
  --c-pink-text:   #9e4444;
  --c-blue-bg:     #d9e5f5;
  --c-blue-text:   #3a5a8a;
  --c-sage-bg:     #d8e8dc;
  /* OMOIKANE-1507 a11y — 4.46:1 on --c-sage-bg, just under. Now 4.53:1. */
  --c-sage-text:   #496e54;
  --c-cream-bg:    #efe5d2;
  --c-cream-text:  #6f5e3f;
  --c-purple-bg:   #e5d9f0;
  --c-purple-text: #5e4570;

  /* match score colors */
  --c-match-strong-bg:   #c7d9c0;
  --c-match-strong-text: #2f5d3a;
  --c-match-mid-bg:      #f0e0c0;
  --c-match-mid-text:    #6f5d2f;
  --c-match-weak-bg:     #f0c7c0;
  /* OMOIKANE-1507 a11y — 3.97:1 on --c-match-weak-bg. Now 4.56:1. */
  --c-match-weak-text:   #923f3f;

  /* typography — editorial pair (matches sibling daemon). Out: generic
     Inter slop. In: Manrope (humanist-geometric body) + Newsreader
     (long-form serif) + Cormorant Garamond (display italic). Fonts are
     loaded via the @font-face block at the top of this file (self-hosted
     option) OR fall back gracefully to Georgia / system if the
     omoikane-nginx-base CSP blocks an external CDN. */
  --font-serif:      'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:       'Plus Jakarta Sans', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif-body: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono:       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --font-cjk:        'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  /* spacing scale (4px base) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* shadows (soft, low-contrast — calm aesthetic) */
  --shadow-sm: 0 1px 2px rgba(30, 45, 79, 0.04);
  --shadow-md: 0 2px 8px rgba(30, 45, 79, 0.06);
  --shadow-lg: 0 8px 24px rgba(30, 45, 79, 0.08);

  /* layout */
  --max-width-page: 1140px;
  --max-width-prose: 660px;
  --max-width-narrow: 480px;
}

/* ─── reset ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  min-height: 100vh;
}
/* (Removed 2026-07-15) The Omoigane-shrine atmospheric body::before was dead
   CSS — the fractal-noise grain body::before further down (§8 "Atmosphere")
   shares the same selector and overrides its background-image, so the shrine
   never rendered or was fetched. Rule + image-set + .no-shrine companion and
   the two ~2.4MB image files removed. The noise grain is the intended texture. */

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }

/* ─── typography ────────────────────────────────────────────────────── */

.t-serif         { font-family: var(--font-serif); }
.t-cjk           { font-family: var(--font-cjk); letter-spacing: 0.1em; }
.t-mono          { font-family: var(--font-mono); }
.t-eyebrow {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--c-gold-darker);
  font-weight: 500;
}
.t-eyebrow-muted {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--c-text-muted);
  font-weight: 500;
}
.t-muted   { color: var(--c-text-muted); }
.t-light   { color: var(--c-text-light); }

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.25; font-weight: 500; }
.t-display {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  font-weight: 500;
  color: var(--c-navy);
  letter-spacing: -0.01em;
}
.t-h1 { font-size: 2rem; line-height: 1.2; font-weight: 500; }
.t-h2 { font-size: 1.5rem; font-weight: 500; }
.t-h3 { font-size: 1.15rem; font-weight: 500; }
.t-h4 { font-size: 1rem; font-weight: 500; }

.t-lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  max-width: var(--max-width-prose);
  margin: var(--s-4) auto 0;
}

/* ─── layout primitives ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container--narrow { max-width: 720px; }

.section { padding: var(--s-8) 0; }
.section--alt { background: var(--c-white); }
.section--cream { background: var(--c-cream); }

.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }

.row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.row--center { justify-content: center; align-items: center; }
.row--between { justify-content: space-between; align-items: center; }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ─── card primitive ────────────────────────────────────────────────── */

.card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-soft);
}
.card--soft       { background: var(--c-cream-soft); border: 1px solid var(--c-border); }
.card--navy       { background: var(--c-navy); color: var(--c-text-on-navy); border-color: transparent; }
.card--bordered   { box-shadow: none; border: 1px solid var(--c-border); }
.card--padded-lg  { padding: var(--s-6); }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.card__head a { color: var(--c-text-muted); font-size: 0.88rem; }
.card__head a:hover { color: var(--c-gold-darker); }

/* ─── button primitive ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 120ms ease;
  white-space: nowrap;
}
.btn--primary {
  /* OMOIKANE-1560 — the landing's accent is the coral "My Office" corner;
     the navy button read as a different site. #B0492F keeps white text at
     5.4:1 (AA); the brighter landing coral #D96C5B fails at this size. */
  background: var(--c-gold-darker, #B0492F);
  color: #FFFFFF;
}
.btn--primary:hover { background: #96391F; }
.btn--secondary {
  background: var(--c-white);
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn--secondary:hover { border-color: var(--c-text-muted); }
.btn--ghost {
  background: transparent;
  color: var(--c-text);
}
.btn--ghost:hover { background: var(--c-cream-soft); }
.btn--block { width: 100%; }
.btn--sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.btn--icon-only { padding: 0.5rem; }

/* ─── chip / tag primitive ──────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.18rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--c-border-soft);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.chip--match-strong { background: var(--c-match-strong-bg); color: var(--c-match-strong-text); }
.chip--match-mid    { background: var(--c-match-mid-bg);    color: var(--c-match-mid-text); }
.chip--match-weak   { background: var(--c-match-weak-bg);   color: var(--c-match-weak-text); }
.chip--blue         { background: var(--c-blue-bg);    color: var(--c-blue-text); }
.chip--sage         { background: var(--c-sage-bg);    color: var(--c-sage-text); }
.chip--pink         { background: var(--c-pink-bg);    color: var(--c-pink-text); }
.chip--purple       { background: var(--c-purple-bg);  color: var(--c-purple-text); }
.chip--cream        { background: var(--c-cream-bg);   color: var(--c-cream-text); }
.chip--neutral      { background: var(--c-border-soft); color: var(--c-text-muted); }
.chip--master       { background: #f0d8a0; color: #6f5d2f; }
.chip--cv           { background: #c8e4cc; color: #3a5e44; }
.chip--letter       { background: #d8d0e8; color: #5a4a78; }
.chip--snippet      { background: #e0e0e0; color: #555; }

/* ─── KPI card (dashboard) ──────────────────────────────────────────── */

.kpi {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-border-soft);
}
.kpi__label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  font-weight: 500;
}
.kpi__num {
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--c-text);
  margin-top: var(--s-2);
  line-height: 1;
}
.kpi__sub {
  font-size: 0.8rem;
  color: var(--c-text-light);
  margin-top: var(--s-2);
}
.kpi--accent {
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  border-color: transparent;
}
.kpi--accent .kpi__label { color: var(--c-gold-soft); }
.kpi--accent .kpi__num   { color: var(--c-text-on-navy); }
.kpi--accent .kpi__sub   { color: var(--c-text-on-navy-muted); }

/* ─── feature tile (landing) ────────────────────────────────────────── */

.feature {
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.feature > summary.feature__head {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4);
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.feature > summary.feature__head::-webkit-details-marker { display: none; }
.feature > summary.feature__head:hover { background: var(--c-cream); }
.feature__main { flex: 1 1 auto; min-width: 0; }
.feature__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-navy);
  color: var(--c-cream);
  font-size: 1rem;
}
.feature__icon--gold { background: var(--c-gold-deep); color: var(--c-white); }
.feature__title { font-weight: 600; color: var(--c-text); margin-bottom: 0.2rem; font-size: 0.97rem; }
.feature__desc  { color: var(--c-text-muted); font-size: 0.88rem; line-height: 1.45; }
.feature__chevron {
  flex-shrink: 0;
  align-self: center;
  color: var(--c-text-muted);
  font-size: 0.85rem;
  transition: transform 0.18s ease;
}
.feature[open] .feature__chevron { transform: rotate(180deg); }
.feature__more {
  padding: var(--s-3) var(--s-4) var(--s-4) var(--s-4);
  color: var(--c-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  border-top: 1px solid var(--c-border-soft);
}
.feature__more p { margin: 0; }
.feature__more p + p { margin-top: var(--s-3); }

.feature--wide {
  background: var(--c-navy);
  color: var(--c-text-on-navy);
  border-color: transparent;
  grid-column: 1 / -1;
}
.feature--wide .feature__title { color: var(--c-text-on-navy); }
.feature--wide .feature__desc  { color: var(--c-text-on-navy-muted); }
.feature--wide .feature__icon  { background: var(--c-gold-deep); color: var(--c-white); }
.feature--wide > summary.feature__head:hover { background: rgba(255,255,255,0.04); }
.feature--wide .feature__chevron { color: var(--c-text-on-navy-muted); }
.feature--wide .feature__more {
  color: var(--c-text-on-navy-muted);
  border-top-color: rgba(255,255,255,0.10);
}

/* ─── trust card (landing) ──────────────────────────────────────────── */

.trust {
  background: var(--c-white);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-gold);
}
.trust__title { font-weight: 600; font-size: 0.92rem; margin-bottom: var(--s-1); }
.trust__desc  { color: var(--c-text-muted); font-size: 0.85rem; line-height: 1.45; }

/* ─── sign-in card (landing) ────────────────────────────────────────── */

.signin {
  max-width: 380px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-md);
}
.signin__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: var(--s-2);
}
.signin__sub {
  color: var(--c-text-muted);
  font-size: 0.88rem;
  margin-bottom: var(--s-4);
}
.signin__or {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-text-light);
  font-size: 0.78rem;
  text-align: center;
  margin: var(--s-3) 0;
}
.signin__or::before, .signin__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.signin .input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  background: var(--c-white);
  color: var(--c-text);
  margin-bottom: var(--s-2);
}
.signin .input:focus { outline: none; border-color: var(--c-navy); }
.signin__forgot {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: var(--c-gold-darker);
  margin-bottom: var(--s-3);
}
.signin__legal {
  text-align: center;
  font-size: 0.78rem;
  color: var(--c-text-light);
  margin-top: var(--s-3);
}

/* ─── header / footer ───────────────────────────────────────────────── */

.site-header {
  /* OMOIKANE-1560 — transparent over the page sky; the border made it a
     detached grey bar the landing does not have. */
  background: transparent;
  border-bottom: none;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  /* OMOIKANE — reserve the width of the coral page-hero Sign-in corner
     (.page-hero__corner is viewport-anchored top-right) so the last nav link
     never runs under it. Mirrors .page-hero__inner's right reservation; the
     clamp keeps it locale-elastic (EL "Επικοινωνία" is the longest label). */
  padding-right: clamp(9rem, 16vw, 12rem);
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  color: var(--c-navy);
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
.site-header .brand img { width: 28px; height: 28px; border-radius: var(--r-pill); }
.site-header nav { display: flex; align-items: center; gap: var(--s-5); }
/* :not(.btn): this selector (0,2,1) outweighs .btn--primary (0,1,0), so
   without the exclusion the Sign-in button's label rendered muted-grey on
   navy — an invisible label (OMOIKANE-1439 theme pass). */
.site-header nav a:not(.btn) {
  color: var(--c-text-muted);
  font-size: 0.9rem;
}
/* WCAG 2.2 AA 2.5.8: give the text nav links a >=24px tap target. The header
   is a fixed 64px flex row (align-items:center), so vertical padding only
   grows the hit area — it does not shift the layout. Excludes the sign-in
   .btn, which already has its own padding. */
.site-header nav a:not(.btn) { padding-block: 8px; }
.site-header nav a:not(.btn):hover { color: #3A7CA5; }
/* Footer nav links: same >=24px tap target (footer link row). */
.site-footer .footer-links a { display: inline-block; padding-block: 5px; }

.site-footer {
  background: var(--c-navy);
  color: var(--c-text-on-navy-muted);
  padding: var(--s-5) 0;
  font-size: 0.85rem;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-serif);
  color: var(--c-cream);
}
.site-footer .footer-brand img { width: 24px; height: 24px; border-radius: var(--r-pill); opacity: 0.9; }
.site-footer .footer-links { display: flex; gap: var(--s-4); }
.site-footer .footer-links a:hover { color: var(--c-cream); }
.site-footer .footer-legal {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.75rem;
  /* OMOIKANE-1502 — `opacity: 0.65` removed. It stacked on the base rule's
     0.75 intent and took the composited contrast to 4.07:1 across 25 pages.
     The muting now lives in --c-text-on-navy-faint. */
  letter-spacing: 0.02em;
}

/* ─── landing-specific ──────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: var(--s-9) 0 var(--s-7);
}
.hero__logo {
  width: 64px; height: 64px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-border);
  background: var(--c-white);
  padding: 4px;
}
.hero__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-pill); }
.hero__brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3rem, 7.5vw, 4.6rem);
  color: var(--c-navy);
  letter-spacing: -0.02em;
  font-weight: 500;
  line-height: 1;
}
.hero__kanji {
  font-family: var(--font-cjk);
  color: var(--c-text-muted);
  letter-spacing: 0.4em;
  font-size: 1.25rem;
  margin: var(--s-3) 0 var(--s-2);
  opacity: 0.85;
}
.hero__tagline {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: var(--c-vermilion, #c73e1d);
  font-weight: 500;
  margin-bottom: var(--s-5);
}
.hero__line {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--c-text);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}
.hero__sub {
  color: var(--c-text-muted);
  font-size: 1.02rem;
  max-width: 560px;
  margin: var(--s-3) auto 0;
  line-height: 1.55;
}
.hero__cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ─── contact form (markdown-embedded) ──────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: var(--s-5) 0;
  /* constrain so name/email don't stretch the full prose column and read as
     a bare default form */
  max-width: 32rem;
  /* editorial card so the form reads as a designed panel on the content
     surface (matches the rounded white modal treatment), not a bare form */
  background: #FFFFFF;
  border: 1px solid var(--c-border-soft);
  border-radius: 14px;
  padding: clamp(1.4rem, 3.5vw, 2.3rem);
  box-shadow: 0 1px 2px rgba(26, 37, 48, 0.04), 0 12px 32px -20px rgba(26, 37, 48, 0.28);
}
.contact-form label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-text);
  margin-top: var(--s-3);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  /* OMOIKANE WCAG 1.4.11: input boundary >=3:1 (var(--c-border) #DCE4E9 was
     1.29:1 on the white card); #767F86 = 4.08:1 on white, 3.88:1 on the field. */
  border: 1px solid #767F86;
  border-radius: var(--r-md);
  font: inherit;
  background: var(--c-cream-soft, #fbf9f4);
  color: var(--c-text);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  /* brand coral focus + ring (was navy) so the form matches the coral
     Sign-in corner / primary buttons instead of reading as a generic form */
  border-color: #B0492F;
  box-shadow: 0 0 0 3px rgba(176, 73, 47, 0.16);
}
.contact-form textarea {
  resize: vertical;
  min-height: 8rem;
}
.contact-form .btn {
  align-self: flex-start;
  margin-top: var(--s-4);
}
.contact-form .cf-hp {
  position: absolute;
  left: -9999px;
  height: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
}
/* Cloudflare Turnstile widget sits between the (invisible) honeypot
   and the submit button. The api.js renders it at a fixed ~300x65
   light/auto size; we just give it some breathing room from the
   message textarea above and the submit button below. */
.contact-form .cf-turnstile {
  margin: var(--s-3) 0 var(--s-1);
}
.contact-form input:disabled,
.contact-form textarea:disabled {
  background: var(--c-cream-soft);
  color: var(--c-text-light);
  cursor: not-allowed;
}
.contact-form .btn:disabled {
  background: var(--c-border);
  color: var(--c-text-light);
  cursor: not-allowed;
}
.contact-form-notice {
  background: var(--c-cream-soft);
  border-left: 3px solid var(--c-gold);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  font-size: 0.92rem;
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
}
.contact-form-status {
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  border-radius: var(--r-md);
  font-size: 0.95rem;
}
.contact-form-status--ok {
  background: var(--c-sage-bg);
  color: var(--c-sage-text);
}
.contact-form-status--err {
  background: var(--c-pink-bg);
  color: var(--c-pink-text);
}

/* ─── how-it-works / how-it-won't sections (story-telling) ──────────── */
/* Added 2026-05-12 — operator feedback that the marketing pages don't
   tell the full app story. These sections walk through the 4-step
   workflow + the 3 product refusals using the editorial-shrine voice
   established on /workflow/posting/new in the daemon. */

.how-it-works, .how-not {
  /* Slightly narrower max-width so the prose breathes — landing copy
     reads as a magazine column, not a four-column grid of cards. */
}
.how__intro {
  text-align: center;
  margin-bottom: var(--s-7);
}
.how__heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-navy);
  margin: var(--s-3) auto 0;
  max-width: 580px;
}
.how__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  counter-reset: how-step;
}
.how__step {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-7);
  border-left: 1px solid var(--c-border);
}
.how__step::before {
  /* A small leading rule that ties the step block back to the navy
     accent — same visual language as the editorial-eyebrow rule on the
     daemon's /workflow/posting/new. Sits flush with the H3 baseline. */
  content: '';
  position: absolute;
  left: -1px;
  top: var(--s-5);
  width: 2px;
  height: 24px;
  background: var(--c-navy);
}
.how__step-label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--c-text-muted);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.how__step-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.2;
  margin: 0 0 var(--s-3) 0;
}
.how__step-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
  max-width: 56ch;
}

/* "What it won't do" — three short cards, sage tone to signal "promises
   kept", not "limitations". Kept compact so they don't compete with
   the longer 4-step block above them. */
.how__refuses { gap: var(--s-4); }
.how__refuse {
  background: var(--c-cream-soft);
  border-left: 3px solid var(--c-gold-darker);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.how__refuse-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: var(--s-2);
  line-height: 1.3;
}
.how__refuse-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
}

/* ─── content (markdown) prose ──────────────────────────────────────── */

.prose {
  max-width: var(--max-width-prose);
  margin: 0 auto;
  padding: var(--s-7) 0;
}
.prose h1 { font-family: var(--font-serif); font-size: 2.2rem; color: var(--c-navy); margin-bottom: var(--s-4); line-height: 1.2; }
.prose h2 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--c-navy); margin: var(--s-6) 0 var(--s-3); }
.prose h3 { font-size: 1.1rem; color: var(--c-navy); margin: var(--s-5) 0 var(--s-2); }
.prose p  { margin: 0 0 var(--s-4); }
.prose a  { color: var(--c-gold-darker); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--c-navy); }
.prose ul, .prose ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose blockquote {
  border-left: 3px solid var(--c-gold);
  padding: var(--s-2) var(--s-4);
  color: var(--c-text-muted);
  margin: var(--s-4) 0;
  font-style: italic;
}
.prose hr { border: none; border-top: 1px solid var(--c-border); margin: var(--s-6) 0; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-cream-soft); padding: 0.1em 0.4em; border-radius: var(--r-sm); border: 1px solid var(--c-border-soft); }

/* ─── tables (used in dashboard mockups) ────────────────────────────── */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: var(--s-3) var(--s-2);
  text-align: left;
  font-size: 0.9rem;
}
.table th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--c-border-soft);
}
.table td { border-top: 1px solid var(--c-border-soft); color: var(--c-text); }
.table tr:first-child td { border-top: none; }

/* ─── prose tables (markdown-rendered, e.g. legal pages) ─────────────── */
/* Hugo's goldmark emits plain <table>, not class="table". These rules give
   markdown tables borders + padding without each MD author having to touch
   layouts. Scoped to .prose so dashboard tables (.table) keep their theme. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-4) 0;
  font-size: 0.92rem;
}
.prose th, .prose td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border-soft);
}
.prose th {
  background: var(--c-cream-soft, #fbf9f4);
  font-weight: 600;
  border-bottom: 2px solid var(--c-border-soft);
}
.prose tbody tr:hover { background: var(--c-cream-soft, #fbf9f4); }
.prose td:first-child { font-weight: 500; }
/* an empty markdown header row (| | |) otherwise renders as a blank cream
   band above the table (imprint Registration table) — collapse it. */
.prose thead th:empty { padding: 0; background: transparent; border: 0; }
@media (max-width: 720px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* keep columns at full width so the table SCROLLS instead of crushing to
     one word per line (sub-processor register / cookie table). */
  .prose table th, .prose table td { white-space: nowrap; }
}

/* ─── lang switcher ─────────────────────────────────────────────────── */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.78rem;
  color: var(--c-text-light);
}
/* WCAG 2.2 target-size (2.5.8): the switcher links are small text, so give
   each anchor a >=24x24 hit area. Surfaced by the a11y gate once fonts went
   self-hosted — CI finally renders the same metrics users see. */
.lang-switcher a {
  color: var(--c-text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.lang-switcher a:hover { color: var(--c-cream); }
.lang-switcher .lang-current { color: var(--c-cream); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   Post-launch MR1 (2026-05-13) — sibling polish to daemon/static/main.css.
   Marketing-site equivalent: animation tokens + page-enter reveals +
   universal focus/hover polish. Skeleton primitives omitted (Hugo
   pages have no async loading state).

   See daemon/app/static/main.css for the post-login app's version which
   adds .skeleton-* primitives + Maud render helpers.

   All animation rules gated under prefers-reduced-motion: no-preference;
   reduce-block explicitly nullifies them for vestibular-disorder users.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* timing tokens — match daemon's so authenticated + marketing
     surfaces feel like the same product. */
  --ms-instant:  80ms;
  --ms-quick:    160ms;
  --ms-medium:   320ms;
  --ms-slow:     560ms;
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── Keyframes ───────────────────────────────────────────────────── */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Opt-in animation classes ────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .anim-fade-in   { animation: fade-in   var(--ms-medium) var(--ease-soft) both; }
  .anim-slide-up  { animation: slide-up  var(--ms-medium) var(--ease-soft) both; }
  .anim-pop-in    { animation: pop-in    var(--ms-quick)  var(--ease-soft) both; }

  /* Stagger for hero/features grids — first 8 children animate with
     incremental delays. ND-friendly: short total duration (~0.4s) so
     no one is waiting on motion to read content. */
  .anim-stagger > *           { animation: slide-up var(--ms-medium) var(--ease-soft) backwards; }
  .anim-stagger > *:nth-child(1) { animation-delay: 0.00s; }
  .anim-stagger > *:nth-child(2) { animation-delay: 0.05s; }
  .anim-stagger > *:nth-child(3) { animation-delay: 0.10s; }
  .anim-stagger > *:nth-child(4) { animation-delay: 0.15s; }
  .anim-stagger > *:nth-child(5) { animation-delay: 0.20s; }
  .anim-stagger > *:nth-child(6) { animation-delay: 0.25s; }
  .anim-stagger > *:nth-child(7) { animation-delay: 0.30s; }
  .anim-stagger > *:nth-child(8) { animation-delay: 0.35s; }

  /* Page-load reveal — opt in by adding .anim-page to <main>. */
  .anim-page > * { animation: slide-up var(--ms-medium) var(--ease-soft) backwards; }
  .anim-page > *:nth-child(1) { animation-delay: 0.00s; }
  .anim-page > *:nth-child(2) { animation-delay: 0.06s; }
  .anim-page > *:nth-child(3) { animation-delay: 0.12s; }
  .anim-page > *:nth-child(4) { animation-delay: 0.18s; }
  .anim-page > *:nth-child(5) { animation-delay: 0.24s; }
  .anim-page > *:nth-child(6) { animation-delay: 0.30s; }
  .anim-page > *:nth-child(7) { animation-delay: 0.36s; }
  .anim-page > *:nth-child(8) { animation-delay: 0.42s; }
}

/* ─── Universal micro-interactions ─────────────────────────────────
   Visitors crossing the auth boundary (marketing → app.omoikane.coach)
   should feel they're in the same product. Same focus + hover posture
   as the post-login app. */

/* :focus-visible — gold outline, visible on cream + navy bgs. Only on
   keyboard navigation (not mouse-click focus, which would be noisy). */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Input focus — soft gold border + glow ring. */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(184, 153, 104, 0.18);
  transition:
    border-color var(--ms-quick) var(--ease-soft),
    box-shadow var(--ms-quick) var(--ease-soft);
}

/* Button polish — calm transition + 1px hover lift on the primary
   call-to-action (.btn + the anon hero CTA). */
.btn,
.anon-cta {
  transition:
    background-color var(--ms-quick) var(--ease-soft),
    border-color var(--ms-quick) var(--ease-soft),
    transform var(--ms-quick) var(--ease-soft),
    box-shadow var(--ms-quick) var(--ease-soft);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover,
  .anon-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .btn:active,
  .anon-cta:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }
}

/* ─── prefers-reduced-motion: REDUCE ──────────────────────────────
   Explicit nullification for vestibular-disorder + ND users.
   Paranoid coverage in addition to the gated rules above. */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-in,
  .anim-slide-up,
  .anim-pop-in,
  .anim-stagger > *,
  .anim-page > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .btn,
  .anon-cta,
  .btn:hover,
  .anon-cta:hover,
  .btn:active,
  .anon-cta:active,
  input:focus,
  textarea:focus,
  select:focus {
    transition: none !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL DESIGN SYSTEM — anti-AI-slop pass (audit 2026-05-16).
   Mirrors the daemon's editorial system so the public site + post-login
   app share the same visual vocabulary. Frontend-design skill compliant:
   distinctive typography, atmospheric depth, one accent (vermilion),
   calm motion.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Body type stack adoption — Manrope replaces Inter ─────────── */
body {
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
}

/* ── 2. Hero refinement — was busy shrine bg with overlay slop ────── */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::after {
  /* faint vermilion top-bleed (editorial gravity) */
  content: '';
  position: absolute;
  inset: 0 0 70% 0;
  background: linear-gradient(180deg, rgba(199, 81, 53, 0.06) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.hero__brand {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  letter-spacing: -0.018em;
  line-height: 1.04;
}
.hero__kanji {
  font-family: var(--font-cjk);
  color: var(--c-gold-darker);
  opacity: 0.7;
  letter-spacing: 0.22em;
  font-size: 0.92rem;
  margin: var(--s-2) 0 var(--s-4);
}
.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-text-muted);
  margin-bottom: var(--s-2);
}
.hero__line {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--c-text);
  max-width: 32ch;
  margin: var(--s-4) auto;
  line-height: 1.35;
}
.hero__sub {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-muted);
  max-width: 38ch;
  margin: 0 auto var(--s-5);
}

/* ── 3. Section eyebrow — magazine spec-sheet uppercase ───────────── */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-vermilion, #c75135);
  position: relative;
  display: inline-block;
  padding-left: 32px;
}
.t-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--c-vermilion, #c75135);
}
.t-display {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.08;
  color: var(--c-navy);
}
.t-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--c-text-muted);
  max-width: 56ch;
  margin: var(--s-3) auto 0;
  line-height: 1.55;
}

/* ── 4. Feature accordion refinement — was generic SaaS rounded card ─ */
.feature {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 2px;
  transition: border-color 220ms var(--ease-editorial, ease),
              transform 220ms var(--ease-editorial, ease);
}
.feature[open],
.feature:hover {
  border-color: var(--c-gold-soft);
  transform: translateY(-1px);
}
.feature__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--c-navy);
}
.feature__desc {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-muted);
  font-size: 0.95rem;
}

/* ── 5. Step rows — magazine-style "STAGE 01 / Title / italic body" ─ */
.step-row {
  position: relative;
  padding-left: 28px;
}
.step-row::before {
  /* vermilion ▎at the left edge */
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--c-vermilion, #c75135);
  opacity: 0.6;
}
.step-row__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-darker);
}
.step-row__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--c-navy);
  margin: var(--s-1) 0 var(--s-2);
}
.step-row__body {
  font-family: var(--font-serif);
  color: var(--c-text);
  line-height: 1.65;
  max-width: 56ch;
}

/* ── 6. Site-header polish — landing-nav treatment (OMOIKANE-1560) ── */
.site-header {
  /* Transparent over the page sky, no rule lines: the landing nav floats
     on the scene, so the subpage nav floats on the sky band. */
  background: transparent;
  border-bottom: none;
  position: relative;
  /* Above the page-hero band, which slides up under it (OMOIKANE-1560). */
  z-index: 5;
}
.site-header .brand {
  /* The landing wordmark is ROMAN Instrument Serif (omk-nav__brand,
     27px) — the italic here was the visible "different site" tell. */
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--c-navy);
}
/* :not(.btn) here too — this later block re-matched the Sign-in button and
   painted its label navy-on-navy (invisible). Same trap as the first
   .site-header nav a block above. */
.site-header nav a:not(.btn) {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--c-text);
  letter-spacing: 0.005em;
  transition: color 180ms ease;
}
.site-header nav a:not(.btn):hover {
  /* Landing nav hover blue (omk-nav__links a:hover). */
  color: #3A7CA5;
}

/* ── 7. Site-footer refinement — quieter, editorial closure ───────── */
.site-footer {
  background: var(--c-navy);
  color: var(--c-text-on-navy-muted);
  border-top: 1px solid var(--c-border-on-navy);
  font-family: var(--font-sans);
}
.footer-brand {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-cream);
}
.footer-links a {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--c-text-on-navy-muted);
  transition: color 180ms ease;
}
.footer-links a:hover {
  color: var(--c-gold-soft);
}
.footer-links .lang-current,
.footer-links .lang-switcher .lang-current {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-cream);
  border-bottom: 1px solid var(--c-vermilion, #c75135);
  padding-bottom: 1px;
}
.footer-legal {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.82rem;
  /* OMOIKANE-1502 — was --c-text-on-navy-muted + opacity 0.75. See the token
     comment: opacity composited it under the AA floor. */
  color: var(--c-text-on-navy-faint);
}

/* ── 8. Atmosphere — fractal-noise grain overlay ──────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: 0.35;
}
body > * { position: relative; z-index: 1; }

/* ── 9. Sign-in panel polish — was generic stacked OAuth buttons ──── */
.signin-panel {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 3px;
  padding: var(--s-5);
  max-width: 32rem;
  margin: 0 auto;
}
.signin__heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  text-align: center;
  color: var(--c-navy);
  margin-bottom: var(--s-2);
}
.signin__or {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-muted);
  text-align: center;
  margin: var(--s-3) 0;
  position: relative;
}
.signin__or::before,
.signin__or::after {
  content: '';
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--c-border);
  vertical-align: middle;
  margin: 0 var(--s-2);
}
.signin__social {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.005em;
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  transition: border-color 180ms ease, background 180ms ease;
}
.signin__social:hover {
  border-color: var(--c-navy);
  background: rgba(30, 45, 79, 0.02);
}
.signin__legal {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--c-text-muted);
  text-align: center;
  margin-top: var(--s-3);
}

/* ── 10. Button refinement — vermilion focus discipline ───────────── */
.btn,
.anon-cta {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.015em;
  border-radius: 2px;
}
.btn--primary {
  /* Coral accent — see the OMOIKANE-1560 note on the first .btn--primary
     block; the two blocks move together. */
  background: var(--c-gold-darker, #B0492F);
  color: #FFFFFF;
  border: 1px solid var(--c-gold-darker, #B0492F);
}
.btn--primary:hover {
  background: #96391F;
  border-color: #96391F;
}
.btn--primary:focus-visible {
  outline: 2px solid var(--c-vermilion, #c75135);
  outline-offset: 2px;
}
.btn--secondary {
  background: transparent;
  color: var(--c-navy);
  border: 1px solid var(--c-border);
}
.btn--secondary:hover {
  border-color: var(--c-navy);
}

/* ════════════════════════════════════════════════════════════════════
   PROSE PAGES — landing-matched: Plus Jakarta Sans body, Instrument
   Serif display (OMOIKANE-1439 theme harmonization; was Newsreader
   long-form serif from the 2026-05-16 audit era).
   ════════════════════════════════════════════════════════════════════ */
.prose {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-text);
}
.prose h1 {
  /* Roman, not italic — the landing h1 (omk-hero__h1) is roman
     Instrument Serif with italics reserved for <em> (OMOIKANE-1560). */
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.012em;
  color: var(--c-navy);
  margin-bottom: var(--s-4);
  line-height: 1.08;
}
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: -0.008em;
  color: var(--c-navy);
  margin: var(--s-6) 0 var(--s-3);
}
.prose h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--c-navy);
  margin: var(--s-5) 0 var(--s-2);
}
.prose strong {
  font-weight: 600;
  color: var(--c-navy);
}
.prose blockquote {
  border-left: 3px solid var(--c-vermilion, #c75135);
  padding: var(--s-2, 0.5rem) var(--s-4, 1.4rem);
  background: rgba(199, 81, 53, 0.03);
  margin: var(--s-4, 1.5rem) 0;
  font-style: italic;
  color: var(--c-text-muted);
}
.prose a {
  color: var(--c-navy);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--c-gold-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease;
}
.prose a:hover {
  text-decoration-color: var(--c-vermilion, #c75135);
}
.prose ul,
.prose ol {
  padding-left: var(--s-5);
  margin: 0 0 var(--s-4);
}
.prose li {
  margin-bottom: var(--s-2);
  line-height: 1.6;
}
.prose hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-gold-soft) 50%, transparent 100%);
  opacity: 0.6;
  margin: var(--s-6, 2rem) 0;
}

/* Feature accordion — sharper editorial chrome (was SaaS rounded card) */
.feature__head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-3, 1rem);
  padding: var(--s-3, 1rem) var(--s-4, 1.4rem);
}
.feature__head::-webkit-details-marker { display: none; }
.feature__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  background: var(--c-navy);
  color: var(--c-cream);
  border-radius: 2px;
  flex-shrink: 0;
}
.feature__icon--gold {
  background: var(--c-gold-soft);
  color: var(--c-navy);
}
.feature__main { flex: 1; min-width: 0; }
.feature__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--c-navy);
}
.feature__desc {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-muted);
  font-size: 0.93rem;
  margin-top: 2px;
}
.feature__chevron {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  transition: transform 220ms ease;
}
.feature[open] .feature__chevron { transform: rotate(180deg); }
.feature__more {
  padding: var(--s-2, 0.5rem) var(--s-4, 1.4rem) var(--s-4, 1.4rem) calc(36px + var(--s-3, 1rem) + var(--s-4, 1.4rem));
  font-family: var(--font-sans);
  color: var(--c-text);
  line-height: 1.6;
  border-top: 1px solid var(--c-border-soft);
  padding-top: var(--s-3, 1rem);
}

/* Footer language switcher */
.footer-links .lang-switcher {
  display: inline-flex;
  gap: var(--s-2, 0.5rem);
  align-items: center;
  margin-left: var(--s-3, 1rem);
}
.footer-links .lang-switcher a,
.footer-links .lang-switcher .lang-current {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
}
.footer-links .lang-switcher a {
  color: var(--c-text-on-navy-muted);
  text-decoration: none;
  transition: color 180ms ease;
}
.footer-links .lang-switcher a:hover { color: var(--c-gold-soft); }

/* Hero — sumi-e ink-wash atmospheric background built from layered
   radial gradients + SVG fractal-noise grain. Replaces the photo
   shrine per operator's frontend-design preference (atmospheric depth
   via gradient mesh + noise texture, not a literal photograph).
   Reads as "ink seeping into paper": warm vermilion + gold tones
   diffusing into cream, anchored by a heavy noise pass for texture.

   No external image dependency. CSP-clean (data: URL for SVG noise).
   Renders identically across all themes. */
.hero {
  position: relative;
  isolation: isolate;
  background:
    /* sumi-e ink wash — three offset radial pools in editorial palette */
    radial-gradient(800px 500px at 20% 22%, rgba(199, 81, 53, 0.10) 0%, transparent 65%),
    radial-gradient(900px 600px at 82% 38%, rgba(184, 153, 104, 0.13) 0%, transparent 70%),
    radial-gradient(700px 500px at 50% 78%, rgba(30, 45, 79, 0.06) 0%, transparent 65%),
    /* paper-stock base — warmer than the page bg for the hero to assert itself */
    linear-gradient(180deg, var(--c-cream, #f5f1e8) 0%, var(--c-cream-soft, #fbf9f4) 100%);
}
.hero::before {
  /* Heavy noise texture — a "rice paper" grain layer that ties the
     gradient pools into a single atmospheric surface. SVG data-URL,
     no network fetch.  Slightly more opacity than the global body
     grain because the hero deserves more visible texture. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 280px 280px;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
  z-index: -2;
}
.hero::after {
  /* faint vermilion top-bleed (editorial gravity) */
  content: '';
  position: absolute;
  inset: 0 0 70% 0;
  background: linear-gradient(180deg, rgba(199, 81, 53, 0.06) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.hero__logo img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--c-border-soft);
  background: var(--c-cream-soft);
  padding: 6px;
  box-shadow: 0 6px 18px -8px rgba(26, 22, 18, 0.18);
}

/* ════════════════════════════════════════════════════════════════════
   SIGN-IN PANEL — restore visibility hierarchy.  Operator-flagged
   2026-05-16: 'Sign in fonts and button is the same color, they are
   not visible'. Root cause: the OAuth buttons (.btn--secondary +
   .signin__social) render in navy text, while the primary Sign-in
   button (.btn--primary) is navy bg + cream text. Both elements share
   the navy hue which fights for attention.

   Fix: differentiate the OAuth buttons via per-provider accent colours
   on the left edge + a distinct hover state.  Primary Sign-in button
   gets a vermilion left accent so its hierarchy stays unambiguous.
   ════════════════════════════════════════════════════════════════════ */
.signin {
  /* Carry the editorial paper-stock — was bright white, looked sterile. */
  background: var(--c-cream-soft, #fbf9f4);
  border: 1px solid var(--c-border-soft);
  border-radius: 3px;
  box-shadow: 0 18px 40px -28px rgba(26, 22, 18, 0.22);
}
.signin__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--c-navy);
}
.signin__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
}
.signin__social {
  position: relative;
  background: var(--c-white, #fff) !important;
  color: var(--c-text, #2a2a2a) !important;
  border: 1px solid var(--c-border) !important;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.005em;
  padding-left: calc(0.8rem + 16px);
  text-align: left;
}
.signin__social::before {
  /* left-edge accent — distinguishes OAuth buttons from primary Sign in */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-gold-soft);
}
.signin__social--linkedin::before  { background: #0a66c2; }
.signin__social--google::before    { background: #ea4335; }
.signin__social--github::before    { background: #1f2328; }
.signin__social--microsoft::before { background: #00a4ef; }
.signin__social:hover {
  background: var(--c-cream-soft, #fbf9f4) !important;
  border-color: var(--c-navy) !important;
}
.signin__social:focus-visible {
  outline: 2px solid var(--c-vermilion, #c75135);
  outline-offset: 2px;
}

/* Primary Sign-in button — keep navy/cream but give it a vermilion
   bottom-accent so it visually anchors below the OAuth row, and the
   hierarchy is unambiguous. */
.signin .btn--primary.btn--block {
  position: relative;
  margin-top: var(--s-3, 1rem);
}
.signin .btn--primary.btn--block::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--c-vermilion, #c75135);
  border-radius: 0 0 1px 1px;
  opacity: 0.85;
}

.signin__or {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}
.signin__legal {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}
.signin__legal a {
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-color: var(--c-gold-soft);
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME — auto-honors prefers-color-scheme.
   Operator-asked 2026-05-16: www + daemon both light + dark, default
   to user's system preference; no manual toggle (privacy posture).
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Operator-flagged 2026-05-16: keep --c-cream STABLE (always light)
       because it serves a dual role — page bg in light mode AND "text on
       dark surface" elsewhere (sidebar nav, primary CTA, brand wordmark).
       Flipping it to slate broke contrast on every dark-on-dark rule. The
       page bg flips via explicit overrides below instead. */
    --c-navy:         #e8e1d0;
    --c-navy-darker:  #f3eddb;
    --c-navy-soft:    #2a2d34;
    --c-vermilion:        #d76549;
    --c-vermilion-tint:   rgba(215, 101, 73, 0.15);
    --c-gold:        #c4a36b;
    --c-gold-darker: #d8b878;
    --c-gold-soft:   #5b4d2e;
    --c-text:        #e0dbcd;
    --c-text-muted:  #9c9588;
    --c-text-light:  #6b6557;
    --c-text-on-navy:#e0dbcd;
    --c-text-on-navy-muted: #9c9588;
    --c-ink:         #f3eddb;
    --c-border:      #2c2f37;
    --c-border-soft: #23262d;
    --c-rule:        #3a3e48;
    /* New stable role-tokens so future rules can target them directly */
    --c-page-bg:     #15171c;
    --c-surface:     #1c1f26;
  }

  body {
    background: #15171c;
    color: var(--c-text);
  }
  /* Override anywhere that previously used --c-cream for page bg —
     re-anchor explicitly so the surface is dark in dark mode. */
  .section--alt,
  .signin {
    background: #1c1f26 !important;
  }
  .site-header {
    background: #15171c !important;
  }
  .card,
  .anon-steps__item {
    background: #1c1f26;
  }
  body::before {
    mix-blend-mode: screen;
    opacity: 0.18;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.80 0 0 0 0 0.70 0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* Hero — sumi-e gradient mesh recoloured for dark surface */
  .hero {
    background:
      radial-gradient(800px 500px at 20% 22%, rgba(215, 101, 73, 0.16) 0%, transparent 65%),
      radial-gradient(900px 600px at 82% 38%, rgba(196, 163, 107, 0.13) 0%, transparent 70%),
      radial-gradient(700px 500px at 50% 78%, rgba(232, 225, 208, 0.06) 0%, transparent 65%),
      linear-gradient(180deg, #15171c 0%, #1c1f26 100%);
  }
  .hero::before {
    /* heavier noise tone for dark hero */
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.90 0 0 0 0 0.80 0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: screen;
    opacity: 0.30;
  }

  /* Site header sits on dark, hairline gold rule below */
  .site-header {
    background: var(--c-cream);
    border-bottom-color: var(--c-border-soft);
  }

  /* Feature accordion — dark paper-stock */
  .feature {
    background: var(--c-cream-soft);
    border-color: var(--c-border);
  }
  .feature__icon {
    background: #2a2d34;
    color: var(--c-cream);
  }

  /* Sign-in panel — dark surface */
  .signin {
    background: var(--c-cream-soft);
    border-color: var(--c-border);
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.5);
  }
  .signin__social {
    background: #21252e !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
  }
  .signin__social:hover {
    background: #2a2d34 !important;
    border-color: var(--c-gold) !important;
  }

  /* Footer */
  .site-footer {
    background: #0e1015;
    border-top-color: var(--c-border);
  }
  .footer-brand,
  .footer-links a,
  .footer-legal {
    color: var(--c-text-muted);
  }

  /* Prose pages — long-form serif in dark */
  .prose {
    color: var(--c-text);
  }
  .prose code {
    background: #21252e;
    border-color: var(--c-border);
  }
  .prose blockquote {
    background: rgba(215, 101, 73, 0.08);
  }

  /* Buttons */
  .btn--primary {
    background: #2a2d34;
    color: var(--c-cream);
    border-color: #3a3e48;
  }
  .btn--primary:hover {
    background: #353944;
    border-color: var(--c-gold);
  }
  .btn--secondary {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
  }
  .btn--secondary:hover {
    border-color: var(--c-gold);
  }
}

/* ════════════════════════════════════════════════════════════════════
   DARK-MODE WHITE-BOX FIX (operator-flagged): comprehensive surface
   sweep — flips every cream/white card bg to dark slate in dark mode.
   --c-cream stays stable (text-on-dark); these rules override the bg.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  .card,
  .anon-steps__item,
  .signin,
  .section--alt,
  .feature,
  .feature__more,
  .signin__legal,
  details,
  .trust,
  .how__refuse {
    background: #1c1f26 !important;
    border-color: #2c2f37;
    color: var(--c-text);
  }
  .feature__icon {
    background: #21252e !important;
    color: var(--c-cream) !important;
  }
  .feature__icon--gold {
    background: rgba(196, 163, 107, 0.18) !important;
    color: var(--c-gold) !important;
  }
  .section--alt {
    background: #15171c !important;
  }
  /* OAuth buttons: dark-slate fill with light text + per-provider accent */
  .signin__social {
    background: #21252e !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
  }
  .signin__social:hover {
    background: #2a2d34 !important;
    border-color: var(--c-gold) !important;
  }
  /* Buttons */
  .btn--primary {
    background: #2a2d34 !important;
    color: #f5f1e8 !important;
    border-color: #3a3e48 !important;
  }
  .btn--primary:hover {
    background: #353944 !important;
    border-color: var(--c-gold) !important;
  }
  .btn--secondary {
    background: transparent !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
  }
  /* Prose code blocks */
  .prose code {
    background: #21252e !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
  }
  /* Sign-in legal small print */
  .signin__legal {
    background: transparent !important;
  }
  /* Header sticky bar */
  .site-header {
    background: #15171c !important;
    border-bottom-color: var(--c-border) !important;
  }
  /* Trust strip + how-it-works steps shouldn't have cream cards */
  .trust,
  .how__step,
  .how__refuse {
    background: transparent !important;
    color: var(--c-text);
  }

  /* HOVER STATES — operator-flagged 2026-05-17: every `:hover` rule
     that uses `var(--c-cream)` or `var(--c-cream-soft)` flips to a
     white box on dark mode (those tokens stay light always). Override
     each hover to a dark-slate fill so the hover signal still reads. */
  .feature > summary.feature__head:hover {
    background: #21252e !important;
  }
  .btn--ghost:hover {
    background: #21252e !important;
  }
  .prose tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
  }
  /* `.feature--wide` already has its own hover rule on a dark navy
     base — confirm it doesn't fall through to the cream hover. */
  .feature--wide > summary.feature__head:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE HEADER / FOOTER (2026-07-15) — cross-device compatibility.
   The content-page header + footer had no mobile treatment: the fixed
   64px flex header let the brand collide with the nav links, and the
   footer link row never wrapped, forcing ~116px of horizontal overflow
   on phones. These rules stack both on narrow screens. Uses the site's
   established 720px breakpoint (matches the grid/table rules above).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* --- header: stack brand over a wrapping nav row, no overlap --- */
  .site-header .container {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    row-gap: var(--s-2);
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
  }
  .site-header nav {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-4);
    justify-content: flex-start;
  }
  .site-header nav a:not(.btn) {
    padding: 6px 0;               /* >=24px tap target with line-height */
  }
  .site-header nav .btn {
    margin-left: auto;            /* keep the sign-in CTA to the right */
  }

  /* --- footer: stack + center, let the link row wrap --- */
  .site-footer .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
  }
  .site-footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3) var(--s-4);
  }
  .site-footer .footer-links a {
    padding: 4px 0;               /* comfortable tap target */
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   OMOIKANE-1507 — skip link (WCAG 2.4.1 Bypass Blocks, Level A)
   ═══════════════════════════════════════════════════════════════════════
   Off-screen until focused, then pinned top-left over everything. It is
   NOT `display:none` and NOT `visibility:hidden` — both remove the element
   from the tab order, which would make the link unreachable by exactly the
   users it exists for. The clip-rect/1px technique keeps it focusable.

   Contrast: --c-navy on --c-cream is the site's primary body pairing and
   already clears AA; the focus ring uses the same 2px outline as the rest
   of the site so it is recognisable rather than novel. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--c-cream);
  color: var(--c-navy);
  border: 2px solid var(--c-navy);
  border-radius: 0 0 4px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--c-gold-deep);
  outline-offset: 2px;
}
/* The skip target must not draw a focus ring when reached via the link —
   the ring on <main> is meaningless to a sighted user and confusing to
   partially-sighted ones. Focus still lands there for screen readers. */
#main-content:focus {
  outline: none;
}

/* ── OMOIKANE-1560: subpages carry the landing sky ─────────────────────
   The landing is an illustrated sky scene; subpages were a flat cream
   void, which read as a different site (operator, 2026-07-31). Every
   non-home page gets the sky: a soft blue band fading to cream, a faint
   sunburst echoing the hero's rays, and the hero's outlined comic clouds
   (drawn in partials/header.html with the exact hero.js path). Light
   mode only — the dark scheme overrides body background above and hides
   the clouds below. */
/* A real element rather than a body background: body backgrounds
   propagate to the canvas (html carries none), and Chromium ignores
   per-layer background-size on the propagated copy — the sunburst
   painted the full page height. A positioned div has a well-defined
   box, so the band ends where it says it ends. */
/* ── OMOIKANE-1560: illustrated subpage header band ─────────────────
   Reproduces the landing's dawn-city world on every subpage: dawn-sky
   gradient, the pre-rendered skyline+sunburst SVG anchored to the base,
   two crisp comic clouds, and the coral sign-in corner — with the page
   title set in the sky above the skyline. Prose flows below on cream.
   The band slides up under the transparent 64px nav so the nav floats
   over the sky exactly like the landing. */
.page-hero {
  position: relative;
  margin-top: -64px;            /* slide under the transparent header */
  padding-top: 64px;
  min-height: clamp(300px, 42vh, 384px);
  overflow: hidden;
  background: linear-gradient(180deg, #DCEAF1 0%, #E8F1F4 45%, #F1F6F7 100%);
}
.page-hero__scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* skyline is a FIXED bottom strip (not a % of the band): the clear-sky
     zone above then GROWS with the title+description, so longer NL/EL ledes
     never spill onto the dark buildings (dark-on-dark). Pairs with the
     padding-bottom reservation on .page-hero__inner below. */
  height: clamp(150px, 20vh, 200px);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}
.page-hero__cloud {
  position: absolute;
  width: 190px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  animation: page-hero-sway 10s ease-in-out infinite alternate;
}
.page-hero__cloud--a { top: 74px; left: 4%; width: 150px; }
.page-hero__cloud--b { top: 120px; right: 26%; width: 108px; animation-duration: 14s; }
@keyframes page-hero-sway {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}
/* coral sign-in corner — the landing's "My Office" motif */
.page-hero__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  background: #B0492F;          /* AA-safe coral; white text 5.4:1 */
  border-radius: 0 0 0 100%;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  text-decoration: none;
  transition: background 160ms ease;
}
.page-hero__corner:hover { background: #96391F; }
.page-hero__corner span {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 20px 26px 0 0;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 68rem;
  margin: 0 auto;
  /* title lives in the upper clear-sky zone, above the skyline */
  padding: clamp(1.4rem, 4vw, 2.4rem) var(--s-4) 0;
  padding-right: clamp(9rem, 16vw, 12rem);
  /* keep title+lede above the fixed skyline strip in every locale */
  padding-bottom: clamp(160px, 21vh, 210px);
  min-height: clamp(300px, 42vh, 384px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.page-hero__title {
  font-family: var(--font-serif);
  font-style: normal;          /* roman, like the landing wordmark */
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  /* OMOIKANE — fixed dark, NOT var(--c-navy): the illustrated hero keeps its
     light daylight sky in dark mode, so the title must stay dark or it goes
     light-on-light (WCAG 1.4.3, invisible for dark-mode visitors). */
  color: #1A2530;
  margin: 0;
}
.page-hero__lede {
  font-family: var(--font-serif-body, Georgia, serif);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: #33454f;
  margin: var(--s-3) 0 0;
  max-width: 44ch;
  text-shadow: 0 0 6px rgba(240, 246, 248, 0.9);
}
@media (max-width: 720px) {
  .page-hero__cloud { display: none; }
  .page-hero__corner { width: 104px; height: 104px; }
  .page-hero__corner span { font-size: 0.85rem; padding: 16px 18px 0 0; }
  .page-hero__inner { padding-right: 7rem; }
  .site-header .container { padding-right: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__cloud { animation: none; }
}
/* Dark mode keeps the hero as the landing's daylight illustration
   (the landing scene is always the lit dawn city), just softened. */
@media (prefers-color-scheme: dark) {
  .page-hero { filter: saturate(0.9) brightness(0.94); }
}