/*
Theme Name: PRAXIA
Theme URI: https://praxia.ch
Author: PRAXIA.CH Ltd
Author URI: https://praxia.ch
Description: Qualified Board Intelligence for confidence in governance. Sovereign Instrument.
Version: 3.9.68
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: praxia
*/

/* ============================================================
   FONTS — loaded via wp_enqueue_style in functions.php
   ============================================================ */


/* ============================================================
   TOKENS
   ============================================================ */

:root {
  --swiss-red:          #DA291C;
  --swiss-red-dark:     #990000;
  --swiss-red-light:    #FF3333;
  --strategic-blue:     #002B49;
  --blueprint-blue:     #0047AB;
  --slate-900:          #0F172A;
  --slate-700:          #334155;
  --slate-500:          #64748B;
  --slate-100:          #F1F5F9;
  --off-white:          #F8FAFC;

  --font-display:       'Hanken Grotesk', sans-serif;
  --font-body:          'Inter', sans-serif;
  --font-mono:          'JetBrains Mono', monospace;
  --font-editorial:     'Libre Baskerville', serif;
  --font-brand:         'Hanken Grotesk', sans-serif;
  --font-tech:          'JetBrains Mono', monospace;
  --tracking-tight:     -0.03em;

  --gradient-logic-vivid:   linear-gradient(135deg, #002B49 0%, #020617 100%);
  --gradient-action:        linear-gradient(135deg, #FF3333 0%, #990000 100%);
  --gradient-red-pill:      linear-gradient(135deg, #FF3333 0%, #990000 100%);
  --gradient-blue-pill:     linear-gradient(135deg, #0047AB 0%, #002B49 100%);
  --gradient-border-accent: linear-gradient(135deg, rgba(218,41,28,0.4), rgba(0,71,171,0.4));
  --gradient-accent-subtle: linear-gradient(135deg, rgba(218,41,28,0.08) 0%, rgba(0,71,171,0.08) 100%);

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.04), 0 10px 20px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 16px rgba(0,0,0,0.04), 0 20px 40px rgba(0,0,0,0.08);
  --shadow-glow-red:  0 8px 24px rgba(218,41,28,0.2), 0 2px 8px rgba(218,41,28,0.12);
  --shadow-glow-blue: 0 8px 24px rgba(0,71,171,0.15), 0 2px 8px rgba(0,71,171,0.1);

  --glass-bg:           rgba(255,255,255,0.06);
  --glass-border:       rgba(255,255,255,0.12);
  --glass-bg-light:     rgba(255,255,255,0.55);
  --glass-border-light: rgba(0,43,73,0.08);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  --hairline:    0.5px;
  --radius:      0rem;
  --radius-card: 12px;

  --max-w-content: 860px;
  --max-w-wide:    1100px;
  --max-w-narrow:  640px;
}


/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-900);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--strategic-blue); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) ease; }
a:hover { color: var(--swiss-red); }
a:focus-visible { outline: 3px solid var(--swiss-red); outline-offset: 3px; }

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 10000;
  padding: 0.5rem 1rem; background: var(--swiss-red); color: white;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 1rem; }


/* ============================================================
   WORDPRESS ADMIN BAR
   ============================================================ */

.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--strategic-blue);
  line-height: 1.1;
}

h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; }
h3 { font-size: clamp(1.05rem, 2.5vw, 1.4rem); font-weight: 700; }

p {
  font-size: clamp(0.95rem, 2.2vw, 1.125rem);
  line-height: 1.8;
  max-width: 65ch;
  margin-bottom: 1.25rem;
  color: var(--slate-700);
}
p:last-child { margin-bottom: 0; }

.editorial {
  font-family: var(--font-editorial);
  font-size: clamp(0.95rem, 2vw, 1.125rem);
  line-height: 1.85;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--swiss-red);
  display: block;
  margin-bottom: 0.75rem;
}
.eyebrow--light { color: rgba(255,255,255,0.6); }

.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-500);
  display: block;
  margin-bottom: 1rem;
  border-left: 2px solid var(--swiss-red);
  padding-left: 10px;
}
.label--light { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.4); }

/* Post title — class replaces inline margin on single.php */
.post-title { margin-bottom: 2rem; }


/* ============================================================
   LAYOUT
   ============================================================ */

.container        { max-width: var(--max-w-content); margin: 0 auto; padding: 0 2rem; }
.container--wide  { max-width: var(--max-w-wide);    margin: 0 auto; padding: 0 2rem; }
.container--narrow{ max-width: var(--max-w-narrow);  margin: 0 auto; padding: 0 2rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }

/* Front-page cards — constrained width on desktop only */
.fp-cards { max-width: 640px; }


/* ============================================================
   HEADER & NAV
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 200;
  /* Blueprint chrome, 8 July 2026: flat blueprint blue with the
     drafting grid. The red rule below is pinned, survives all schemes. */
  background: var(--blueprint-blue);
  border-bottom: 3px solid #DA291C; /* pinned — schemes must not override */
  overflow: visible;
}
.site-header::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.site-header__inner { position: relative; z-index: 1; }

.site-header__inner {
  max-width: var(--max-w-wide); margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  min-height: 80px;
}

.site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-logo:hover { opacity: 0.85; }
.site-logo svg, .site-logo img { height: 44px; width: auto; }

.site-nav {
  display: flex; align-items: center;
  gap: 0; list-style: none;
  flex-wrap: nowrap;
}
.site-nav a {
  font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); text-decoration: none;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  transition: color var(--dur-fast) ease;
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: white; }

.site-nav .nav-cta a {
  background: var(--gradient-action) !important;
  color: white !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 6px !important;
  font-family: var(--font-display) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-glow-red) !important;
  white-space: nowrap !important;
  transition: transform var(--dur-normal) var(--ease-spring) !important;
}
.site-nav .nav-cta a:hover { transform: translateY(-2px) !important; color: white !important; }

.nav-signin {
  font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 1px solid rgba(255,255,255,0.1);
  transition: color var(--dur-fast) ease;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-signin:hover { color: white; }

.nav-toggle {
  display: none; background: none; border: none;
  cursor: pointer; color: white; padding: 0.5rem;
  min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}

.nav-drawer {
  display: none; position: fixed; inset: 0;
  background: var(--strategic-blue); z-index: 190;
  padding: 5rem 2rem 2rem;
  flex-direction: column; gap: 0;
  overflow-y: auto;
}
.nav-drawer.is-open { display: flex; }
.nav-drawer a {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
  color: white; text-decoration: none; letter-spacing: -0.03em;
  padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: 60px; display: flex; align-items: center;
}
.nav-drawer a:hover { color: var(--swiss-red); }
.nav-drawer__close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  background: none; border: none; color: white;
  cursor: pointer; min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.section { padding: 64px 2rem; }
.section--white { background: white; }
.section--off   { background: var(--off-white); }
.section--blue  { background: var(--gradient-logic-vivid); }
.section--lt    { background: var(--slate-100); }

.section--blue h1,
.section--blue h2,
.section--blue h3 { color: white; }
.section--blue p  { color: rgba(255,255,255,0.72); }


/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: var(--gradient-logic-vivid);
  padding: 80px 2rem 64px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.hero__inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  position: relative; z-index: 1;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 800;
  color: white;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.hero__title em { color: var(--swiss-red); font-style: normal; }

.hero__body {
  font-size: clamp(0.95rem, 2.5vw, 1.125rem);
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
  max-width: 56ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}

/* ── Declaration block, 12 July 2026 ──────────────────────
   Continues the hero's register at full breathing room, for
   the fuller PRAXIA definition. Same pattern to reuse for
   sidebar/pull-quote notices on other pages, per Charlie. */
.declaration {
  background: var(--gradient-logic-vivid);
  padding: 56px 2rem 88px;
  position: relative;
}
.declaration__inner {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.declaration__text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}
.declaration__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.declaration__link:hover {
  border-color: white;
  opacity: 0.85;
}

.gyroscope-watermark {
  position: absolute;
  right: -40px; top: 50%;
  transform: translateY(-50%);
  width: 480px; height: 480px;
  opacity: 0.06;
  pointer-events: none; z-index: 0;
}

.hero__footer {
  max-width: var(--max-w-content);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
}
.hero__footer-note {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}


/* ============================================================
   CARDS
   ============================================================ */

.swiss-card {
  background: var(--glass-bg-light);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  padding: 2rem;
  border-radius: var(--radius-card);
  border: var(--hairline) solid var(--glass-border-light);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo);
  position: relative; overflow: hidden;
}
.swiss-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.swiss-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--strategic-blue); margin-bottom: 0.5rem; }
.swiss-card p  { font-size: 0.92rem; color: var(--slate-700); margin: 0; max-width: none; }

.glass-card-dark {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--hairline) solid var(--glass-border);
  padding: 2rem;
  border-radius: var(--radius-card);
  color: white;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo);
  position: relative; overflow: hidden;
}
.glass-card-dark:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.glass-card-dark h3 { color: white; }
.glass-card-dark p  { color: rgba(255,255,255,0.8); margin: 0; max-width: none; }

.thinking-card {
  background: var(--glass-bg-light);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(0,43,73,0.12);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  text-decoration: none; display: block; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo), border-color var(--dur-normal) ease;
  position: relative; overflow: hidden;
}
.thinking-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(218,41,28,0.2); color: inherit; }
.thinking-card__title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; color: var(--strategic-blue); margin-bottom: 0.5rem; }
.thinking-card__excerpt { font-size: 0.88rem; color: var(--slate-700); line-height: 1.7; margin: 0; max-width: none; }

.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: white;
  border-radius: var(--radius-card); margin-bottom: 1.25rem;
  border: 1px solid #E2E8F0; box-shadow: var(--shadow-sm);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -0.01em; text-decoration: none;
  border-radius: 6px; border: none; cursor: pointer;
  transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-slow) var(--ease-out-expo);
  min-height: 48px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary { background: var(--gradient-action); color: white; box-shadow: var(--shadow-glow-red); }
.btn-primary:hover { color: white; box-shadow: 0 12px 32px rgba(218,41,28,0.35); }

.btn-outline-light { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.5); }
.btn-outline-light:hover { color: white; border-color: white; }

.btn-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: var(--hairline) solid var(--glass-border);
  color: white;
  box-shadow: var(--shadow-glow-red), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-glass:hover {
  background: rgba(218,41,28,0.14);
  border-color: rgba(218,41,28,0.4);
  color: white;
  box-shadow: 0 12px 32px rgba(218,41,28,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-outline { background: transparent; color: var(--swiss-red); border: 1px solid var(--swiss-red); }
.btn-outline:hover { background: rgba(218,41,28,0.05); color: var(--swiss-red); }


/* ============================================================
   FORMS
   ============================================================ */

.form-group { margin-bottom: 1.5rem; }

.form-label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-500); margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(0,43,73,0.2);
  padding: 0.6rem 0;
  font-family: var(--font-body); font-size: 1rem; color: var(--slate-900);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-normal) ease;
  min-height: 44px;
  border-radius: 0; /* prevent iOS rounding */
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--slate-500); opacity: 0.6; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--strategic-blue); }
.form-textarea { resize: vertical; min-height: 100px; }

.form-note { font-family: var(--font-mono); font-size: 0.65rem; color: var(--slate-500); margin-top: 0.4rem; }

.referee-toggle { display: flex; border-bottom: 1px solid rgba(0,43,73,0.15); margin-bottom: 1rem; }
.toggle-btn {
  flex: 1; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0.75rem 0;
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-500); cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.toggle-btn.is-active { color: var(--strategic-blue); border-bottom-color: var(--strategic-blue); }

.referee-field { display: none; }
.referee-field.is-visible { display: block; }

/* Front-page form helpers — replace inline styles */
.fp-form-intro   { margin: 1.5rem 0 2.5rem; }
.fp-form-submit  { margin-top: 2rem; }
.fp-form-success { padding: 2rem 0; }
.fp-form-success__title {
  font-family: var(--font-editorial); font-style: italic;
  font-size: 1.1rem; color: var(--strategic-blue);
  max-width: none;
}
.fp-form-success__note {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--slate-500); margin-top: 1rem; max-width: none;
}


/* ============================================================
   GYROSCOPE
   ============================================================ */

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}

.gyroscope-divider {
  display: flex; justify-content: center; align-items: center;
  padding: 3rem 0;
}
.gyroscope-divider svg { width: 36px; height: 36px; opacity: 0.2; }

.abii-thinking {
  display: flex; justify-content: center; align-items: center;
  padding: 3rem;
}
.abii-thinking svg { width: 100px; height: 100px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   ENTRY CONTENT
   ============================================================ */

.entry-content p        { max-width: 65ch; }
.entry-content h2       { margin-top: 3rem; }
.entry-content h3       { margin-top: 2rem; }
.entry-content ul,
.entry-content ol       { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.entry-content li       { margin-bottom: 0.5rem; line-height: 1.7; }
.entry-content blockquote {
  border-left: 4px solid var(--strategic-blue);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  background: white;
  border-radius: 0 6px 6px 0;
  box-shadow: var(--shadow-sm);
}
.entry-content blockquote p {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 700;
  color: var(--strategic-blue);
  line-height: 1.5;
  font-style: normal;
  margin: 0; max-width: none;
}


/* ============================================================
   UTILITIES
   ============================================================ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.text-red    { color: var(--swiss-red); }
.text-blue   { color: var(--strategic-blue); }
.text-muted  { color: var(--slate-500); }
.text-white  { color: white; }
.hidden      { display: none !important; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.w-full      { width: 100%; }


/* ============================================================
   FOOTER
   All layout in classes — no inline CSS anywhere in footer.php
   ============================================================ */

.site-footer {
  /* Blueprint ground, 8 July 2026: blueprint blue over strategic
     blue with the hero's fine drafting grid, replacing the heavy
     near-black gradient. */
  background: linear-gradient(160deg, var(--blueprint-blue) 0%, var(--strategic-blue) 62%);
  padding: 64px 0 32px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.site-footer > * { position: relative; z-index: 1; }

.site-footer__inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 2rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.site-footer__brand { display: flex; flex-direction: column; }

.site-footer__logo  { margin-bottom: 1.5rem; }
.site-footer__logo svg,
.site-footer__logo img { height: 40px; width: auto; }

.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 0;
  line-height: 1.8;
  max-width: none;
}

.site-footer__reg {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.45);
  margin-top: 1rem;
  line-height: 1.7;
  max-width: none;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.site-footer__col-heading {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
  max-width: none;
}

.site-footer__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__nav a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  letter-spacing: 0.06em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0;
  transition: color var(--dur-fast) ease;
}
.site-footer__nav a:hover { color: white; }

.site-footer__base {
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0; max-width: none;
}

.site-footer__doctrine {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.18);
  margin: 0; max-width: none;
  letter-spacing: 0.08em;
}


/* ============================================================
   COMMAND DIAL (FAB)
   ============================================================ */

.command-dial-container {
  position: fixed; bottom: 20px; right: 16px; z-index: 300;
  display: flex; align-items: center; gap: 8px;
}

.command-trigger {
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--gradient-action); color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow-red);
  transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-normal) ease;
  order: 1;
  -webkit-tap-highlight-color: transparent;
}
.command-trigger:hover { box-shadow: 0 14px 36px rgba(218,41,28,0.4), 0 4px 12px rgba(0,0,0,0.2); }
.command-dial-container.is-open .command-trigger { transform: rotate(135deg); }

.command-options {
  display: flex; align-items: center; gap: 6px; order: 0;
  opacity: 0; transform: translateX(12px) scale(0.9); pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-out-expo), transform var(--dur-slow) var(--ease-spring);
}
.command-dial-container.is-open .command-options {
  opacity: 1; transform: translateX(0) scale(1); pointer-events: auto;
}

.dial-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 20px; border: none;
  background: var(--strategic-blue); color: white;
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast) ease, transform var(--dur-normal) var(--ease-spring);
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.dial-action:hover { background: var(--blueprint-blue); color: white; transform: translateY(-2px); }


/* ============================================================
   FULL WIDTH TEMPLATE
   ============================================================ */

.praxia-full-width-content { max-width: 100%; margin: 0; padding: 0; }
.praxia-full-width-content > .section,
.praxia-full-width-content > .hero { width: 100%; }
.praxia-full-width-content .entry-content {
  max-width: var(--max-w-content); margin: 0 auto; padding: 3rem 2rem;
}
body.page-template-full-width .site-content,
body.page-template-page-templates-full-width .site-content { max-width: 100%; padding: 0; }


/* ============================================================
   INFORMATIONAL PAGE TEMPLATE — pit- prefix
   Mode A documentation layout with margin rail.
   No inline CSS. No scoped style blocks.

   Alignment principle: every section uses padding: vertical 0
   on the outer div. The inner container or grid applies
   padding: 0 2rem — exactly matching site-header__inner.
   This guarantees logo, title, and content share one left edge.
   ============================================================ */

.pit-doc-header {
  background: white;
  border-bottom: 1px solid var(--glass-border-light);
  padding: 64px 0 56px;
}
.pit-doc-header h1 {
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.75rem, 5vw, 3.5rem);
}
.pit-doc-header__standfirst {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.75;
  color: var(--slate-700);
  max-width: 58ch;
  margin-bottom: 2rem;
}
.pit-doc-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  max-width: none;
  margin: 0;
  gap: 0;
}
.pit-doc-header__meta span {
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--glass-border-light);
}
.pit-doc-header__meta span:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.pit-body {
  background: var(--off-white);
  padding: 72px 0 100px;
}
.pit-body__grid {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 620px) 240px;
  gap: 80px;
  align-items: start;
}

.pit-content { min-width: 0; }

.pit-content .entry-content h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--glass-border-light);
}
.pit-content .entry-content h2:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
.pit-content .entry-content p {
  font-size: 1.05rem;
  line-height: 1.9;
  max-width: 62ch;
}

.pit-rail { position: sticky; top: 100px; }

.pit-rail__marker {
  border-left: 2px solid var(--swiss-red);
  padding-left: 14px;
  margin-bottom: 24px;
}
.pit-rail__marker-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--swiss-red);
  display: block;
  margin-bottom: 4px;
}
.pit-rail__marker-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--strategic-blue);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0;
}
.pit-rail__card {
  background: white;
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.pit-rail__card-row { margin-bottom: 12px; }
.pit-rail__card-row:last-child { margin-bottom: 0; }
.pit-rail__card-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-500);
  display: block;
  margin-bottom: 3px;
}
.pit-rail__card-value {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--slate-900);
}
.pit-rail__gyro {
  display: flex;
  justify-content: center;
  padding: 20px 0 16px;
  color: var(--strategic-blue);
}
.pit-rail__gyro svg { width: 72px; height: 72px; opacity: 0.14; }
.pit-rail__doctrine {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  line-height: 2.1;
  color: var(--slate-500);
  letter-spacing: 0.04em;
}

.pit-connect { padding: 72px 0; }
.pit-connect__inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.pit-connect__label {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  display: block;
  margin-bottom: 10px;
}
.pit-connect__heading {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: white;
  line-height: 1.15;
  margin: 0;
  max-width: none;
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   Hierarchy:
     1024px — tablet landscape / large tablet: nav collapses
      960px — pit-body rail hides
      768px — tablet portrait: major layout changes
      640px — large phone: pit- mobile adjustments
      480px — standard phone: type scale, spacing tightened
      390px — iPhone 15 / Pixel / Galaxy: tightest adjustments
   ============================================================ */

/* ── 1024px — nav collapses ─────────────────────────────── */
@media (max-width: 1024px) {
  .site-nav    { display: none; }
  .nav-signin  { display: none; }
  .nav-toggle  { display: flex; }
}

/* ── 960px — pit rail hides, grid collapses ─────────────── */
@media (max-width: 960px) {
  .pit-body__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pit-rail { display: none; }
  .pit-doc-header { padding: 48px 0 40px; }
}

/* ── 768px — tablet portrait / large phone ──────────────── */
@media (max-width: 768px) {
  /* Header */
  .site-header__inner { padding: 1rem 1.5rem; min-height: 64px; }
  .site-logo svg, .site-logo img { height: 36px; }

  /* Hero */
  .hero { padding: 56px 1.5rem 44px; }
  .hero__title { margin-bottom: 1rem; }
  .hero__body  { margin-bottom: 1.5rem; }
  .gyroscope-watermark { display: none; }
  .hero__footer { margin-top: 28px; flex-direction: column; gap: 0.25rem; }

  /* Hero actions — stack vertically */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  /* Sections */
  .section { padding: 48px 1.5rem; }

  /* Grids */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .fp-cards { max-width: 100%; }

  /* Containers */
  .container,
  .container--wide,
  .container--narrow { padding: 0 1.5rem; }

  /* Buttons — full width in stacked contexts */
  .hero__actions .btn,
  .pit-connect__inner .btn { width: 100%; }

  /* pit-connect — stack on tablet */
  .pit-connect { padding: 56px 0; }
  .pit-connect__inner {
    flex-direction: column;
    align-items: stretch;
  }

  /* pit-body */
  .pit-body { padding: 48px 0 72px; }
  .pit-body__grid { padding: 0 1.5rem; }

  /* pit-doc-header */
  .pit-doc-header__meta { gap: 6px; }

  /* Footer — stack brand above columns */
  .site-footer { padding: 48px 0 24px; }
  .site-footer__inner { padding: 0 1.5rem; }
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .site-footer__cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  /* Full-width template */
  .praxia-full-width-content .entry-content { padding: 2rem 1.5rem; }
}

/* ── 640px — larger phones ──────────────────────────────── */
@media (max-width: 640px) {
  /* pit- */
  .pit-doc-header { padding: 40px 0 32px; }
  .pit-doc-header__meta { flex-direction: column; gap: 6px; }
  .pit-doc-header__meta span { border-right: none; padding-right: 0; margin-right: 0; }
  .pit-body__grid { padding: 0 1.25rem; }

  /* Footer columns — two-up then single */
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .site-footer__cols .site-footer__col:last-child {
    grid-column: 1 / -1;
  }

  /* Connect strip */
  .pit-connect { padding: 44px 0; }
  .pit-connect__inner { padding: 0 1.25rem; }
}

/* ── 480px — standard phones ────────────────────────────── */
@media (max-width: 480px) {
  /* Typography */
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.25rem, 5.5vw, 1.75rem); }
  h3 { font-size: clamp(1rem, 4vw, 1.25rem); }

  /* Hero */
  .hero { padding: 44px 1.25rem 36px; }
  .label--light { font-size: 0.65rem; }

  /* Sections */
  .section { padding: 40px 1.25rem; }

  /* Containers */
  .container,
  .container--wide,
  .container--narrow { padding: 0 1.25rem; }

  /* Cards */
  .thinking-card { padding: 1.25rem; }
  .swiss-card    { padding: 1.5rem; }

  /* Buttons */
  .btn { padding: 0.875rem 1.5rem; font-size: 0.95rem; }

  /* Command dial */
  .command-trigger { width: 44px; height: 44px; }
  .command-dial-container { bottom: 16px; right: 12px; }
  .dial-action { padding: 6px 10px; font-size: 0.6rem; min-height: 44px; }

  /* pit- */
  .pit-body__grid { padding: 0 1.25rem; }
  .pit-connect__inner { padding: 0 1.25rem; }
  .pit-content .entry-content p { font-size: 1rem; }

  /* Footer */
  .site-footer__inner { padding: 0 1.25rem; }
  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .site-footer__cols .site-footer__col:last-child {
    grid-column: auto;
  }
  .site-footer__base { flex-direction: column; gap: 0.5rem; }
}

/* ── 390px — iPhone 15, Pixel, Galaxy S24 ──────────────── */
@media (max-width: 390px) {
  /* Tightest side margins */
  .container,
  .container--wide,
  .container--narrow,
  .site-header__inner,
  .site-footer__inner,
  .pit-body__grid,
  .pit-connect__inner { padding-left: 1rem; padding-right: 1rem; }

  /* Hero */
  .hero { padding: 36px 1rem 32px; }
  .hero__footer-note { font-size: 0.55rem; }

  /* Sections */
  .section { padding: 36px 1rem; }

  /* Nav drawer links — larger touch targets on tiny screens */
  .nav-drawer a { font-size: 1.25rem; min-height: 56px; }
  .nav-drawer { padding: 4.5rem 1rem 1.5rem; }

  /* Footer */
  .site-footer { padding: 40px 0 20px; }
  .site-footer__inner { padding: 0 1rem; }

  /* pit- */
  .pit-doc-header { padding: 32px 0 28px; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .site-header, .nav-toggle, .nav-drawer,
  .gyroscope-watermark, .btn,
  .command-dial-container, .site-footer { display: none !important; }
  body { background: white; color: black; }
  .pit-rail { display: block !important; position: static; }
}


/* ============================================================
   ARTICLE TEMPLATE — art- prefix
   single.php — two-column post layout with sticky rail.
   Alignment: same left edge as site-header__inner and pit- classes.
   Outer sections: padding vertical 0. Inner grids: padding 0 2rem.
   ============================================================ */

/* ── Article header — white ground ──────────────────────── */
.art-header {
  background: white;
  border-bottom: 1px solid var(--glass-border-light);
  padding: 56px 0 48px;
}
.art-header__cat {
  text-decoration: none;
  transition: color var(--dur-fast) ease;
  margin-bottom: 1.25rem;
}
.art-header__cat:hover { color: var(--strategic-blue); }

.art-header__title {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  max-width: 820px;
}
.art-header__standfirst {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.75;
  color: var(--slate-700);
  max-width: 64ch;
  margin-bottom: 1.75rem;
}
.art-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  max-width: none;
  margin: 0;
}
.art-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--glass-border-light);
}
.art-header__meta-item:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.art-header__meta-item svg { opacity: 0.5; flex-shrink: 0; }
.art-header__author-link {
  color: var(--strategic-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur-fast) ease;
}
.art-header__author-link:hover { color: var(--swiss-red); }
.art-header__updated { color: var(--slate-500); }


/* ── Featured image ──────────────────────────────────────── */
.art-image {
  background: var(--slate-100);
  padding: 0;
}
.art-image__inner { padding-top: 0; padding-bottom: 0; }
.art-image__img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}


/* ── Article body — two-column grid ─────────────────────── */
.art-body {
  background: var(--off-white);
  padding: 64px 0 80px;
}
.art-body__grid {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: start;
}


/* ── Article content column ──────────────────────────────── */
.art-content { min-width: 0; }

/* Content structure elements — blocks authors add via editor */
.art-content .entry-content p {
  font-size: clamp(0.975rem, 1.8vw, 1.05rem);
  line-height: 1.9;
  max-width: 68ch;
  margin-bottom: 1.5rem;
}
.art-content .entry-content > p:first-child {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--slate-700);
}
.art-content .entry-content h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--glass-border-light);
  scroll-margin-top: 160px;
}
.art-content .entry-content h2:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
.art-content .entry-content h3 {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  margin-top: 2rem;
  scroll-margin-top: 128px;
}

/* Key takeaways box — author adds wp:group with class="post-takeaways" */
.post-takeaways {
  background: white;
  border-left: 3px solid var(--strategic-blue);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
}
.post-takeaways > p:first-child {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--strategic-blue);
  margin-bottom: 0.75rem;
  max-width: none;
}
.post-takeaways ul {
  padding-left: 1.25rem;
  margin: 0;
}
.post-takeaways li {
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--slate-700);
  margin-bottom: 0.5rem;
}
.post-takeaways li:last-child { margin-bottom: 0; }

/* Key insights box — same style, Swiss Red accent */
.post-insights {
  background: white;
  border-left: 3px solid var(--swiss-red);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 1.5rem 1.75rem;
  margin: 3rem 0 0;
  box-shadow: var(--shadow-sm);
}
.post-insights > p:first-child {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--swiss-red);
  margin-bottom: 0.75rem;
  max-width: none;
}
.post-insights ul  { padding-left: 1.25rem; margin: 0; }
.post-insights li  { font-size: 0.975rem; line-height: 1.7; color: var(--slate-700); margin-bottom: 0.5rem; }
.post-insights li:last-child { margin-bottom: 0; }

/* Inline CTA block — author adds wp:group with class="post-cta-inline" */
.post-cta-inline {
  background: var(--gradient-logic-vivid);
  border-radius: var(--radius-card);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.post-cta-inline p {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  font-weight: 600;
  color: white;
  margin: 0;
  max-width: 38ch;
  line-height: 1.45;
}
.post-cta-inline .btn { flex-shrink: 0; }

/* Tables */
.art-content .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.art-content .entry-content th {
  background: var(--strategic-blue);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 500;
}
.art-content .entry-content td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--glass-border-light);
  color: var(--slate-700);
  line-height: 1.6;
  vertical-align: top;
}
.art-content .entry-content tr:last-child td { border-bottom: none; }
.art-content .entry-content tr:nth-child(even) td { background: rgba(0,43,73,0.02); }

/* FAQ accordion — author adds wp:group with class="post-faq" */
.post-faq { margin: 2.5rem 0; }
.post-faq > p:first-child {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  color: var(--strategic-blue);
  margin-bottom: 1rem;
  max-width: none;
}
.post-faq-item {
  border-top: 1px solid var(--glass-border-light);
}
.post-faq-item:last-child { border-bottom: 1px solid var(--glass-border-light); }
.post-faq-trigger {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  color: var(--strategic-blue); text-align: left; cursor: pointer;
  min-height: 52px; gap: 1rem;
  -webkit-tap-highlight-color: transparent;
}
.post-faq-trigger:hover { color: var(--swiss-red); }
.post-faq-trigger svg {
  flex-shrink: 0; transition: transform var(--dur-normal) var(--ease-out-expo);
}
.post-faq-trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.post-faq-answer {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-out-expo);
}
.post-faq-answer.is-open { max-height: 600px; }
.post-faq-answer p {
  font-size: 0.95rem; line-height: 1.8;
  color: var(--slate-700); padding-bottom: 1rem;
  max-width: none; margin: 0;
}


/* ── Article rail ────────────────────────────────────────── */
.art-rail {
  position: relative;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  will-change: transform;
}

/* Table of contents */
.art-toc {
  background: white;
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}
.art-toc__heading {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.875rem;
  max-width: none;
}
.art-toc__list {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: toc-counter;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border-light) transparent;
}
.art-toc__list::-webkit-scrollbar { width: 3px; }
.art-toc__list::-webkit-scrollbar-track { background: transparent; }
.art-toc__list::-webkit-scrollbar-thumb { background: var(--glass-border-light); border-radius: 2px; }
.art-toc__list li { counter-increment: toc-counter; }
.art-toc__list a {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--slate-700);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  padding: 5px 8px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.art-toc__list a:hover {
  color: var(--strategic-blue);
  background: var(--off-white);
  border-left-color: var(--slate-100);
}
.art-toc__list a.is-active {
  color: var(--swiss-red);
  border-left-color: var(--swiss-red);
  background: rgba(218,41,28,0.04);
}

/* Rail subscribe CTA */
.art-rail__subscribe {
  background: var(--gradient-logic-vivid);
  border-radius: var(--radius-card);
  padding: 20px 22px;
}
.art-rail__subscribe-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
  max-width: none;
}
.art-rail__subscribe-text {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: white;
  line-height: 1.4;
  margin-bottom: 14px;
  max-width: none;
}
.art-rail__subscribe-btn {
  width: 100%; font-size: 0.82rem;
  padding: 0.7rem 1rem; min-height: 40px;
}

/* Author card */
.art-author {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.art-author__avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--glass-border-light);
}
.art-author__body { min-width: 0; }
.art-author__label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-500);
  display: block;
  margin-bottom: 3px;
}
.art-author__name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--strategic-blue);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  transition: color var(--dur-fast) ease;
}
.art-author__name:hover { color: var(--swiss-red); }
.art-author__bio {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--slate-500);
  line-height: 1.6;
  margin: 0; max-width: none;
}

/* Rail author — desktop rail only */
.art-author--rail {
  background: white;
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
/* Inline author — shown on mobile below article, hidden on desktop */
.art-author--inline {
  display: none;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--glass-border-light);
}


/* ── Related posts ───────────────────────────────────────── */
.art-related {
  background: white;
  border-top: 1px solid var(--glass-border-light);
  padding: 56px 0;
}
.art-related__heading {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 1.5rem;
  max-width: none;
}
.art-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.art-related__card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--off-white);
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo), border-color var(--dur-normal) ease;
  box-shadow: var(--shadow-sm);
}
.art-related__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(218,41,28,0.15);
}
.art-related__card-img img {
  width: 100%; height: 180px;
  object-fit: cover; display: block;
}
.art-related__card-body { padding: 1.25rem; }
.art-related__card-cat {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--swiss-red);
  display: block;
  margin-bottom: 2px;
}
.art-related__card-time {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.5rem;
  max-width: none;
}
.art-related__card-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--strategic-blue);
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0; max-width: none;
}


/* ── Article responsive ──────────────────────────────────── */

/* 960px — rail collapses, inline author appears */
@media (max-width: 960px) {
  .art-body__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .art-rail          { display: none; }
  .art-author--inline { display: flex; }
  .art-related__grid { grid-template-columns: 1fr 1fr; }
}

/* 768px — tablet portrait */
@media (max-width: 768px) {
  .art-header { padding: 40px 0 36px; }
  .art-body   { padding: 44px 0 60px; }
  .art-body__grid { padding: 0 1.5rem; }
  .art-related { padding: 44px 0; }
  .art-related__inner { padding: 0 1.5rem; }
  .art-header__meta { flex-direction: column; gap: 6px; }
  .art-header__meta-item { border-right: none; padding-right: 0; margin-right: 0; }
  .art-image__img { max-height: 320px; }
  .post-cta-inline { flex-direction: column; }
}

/* 640px — larger phones */
@media (max-width: 640px) {
  .art-related__grid { grid-template-columns: 1fr; }
  .art-related__card-img img { height: 140px; }
  .post-cta-inline { padding: 1.25rem; }
}

/* 480px — standard phones */
@media (max-width: 480px) {
  .art-header { padding: 32px 0 28px; }
  .art-body   { padding: 36px 0 48px; }
  .art-body__grid { padding: 0 1.25rem; }
  .art-header__title { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .art-content .entry-content table { font-size: 0.8rem; }
  .art-content .entry-content th,
  .art-content .entry-content td { padding: 0.625rem 0.75rem; }
}

/* 390px — smallest phones */
@media (max-width: 390px) {
  .art-body__grid,
  .art-related__inner { padding-left: 1rem; padding-right: 1rem; }
  .art-header { padding: 28px 0 24px; }
}


/* ============================================================
   MEGA MENU
   Triggered by .menu-item-has-children in the primary nav.
   WordPress outputs sub-menus as nested <ul class="sub-menu">.
   The mega panel opens below the header, full width of the
   site-header__inner container.

   Desktop: hover opens panel, focus-within keeps it open.
   Mobile: handled in nav-drawer — sub-menus expand inline.
   ============================================================ */

/* ── Parent item indicator ───────────────────────────────── */
.site-nav .menu-item-has-children > a {
  position: relative;
}
.site-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(255,255,255,0.45);
  border-bottom: 1.5px solid rgba(255,255,255,0.45);
  transform: rotate(45deg) translateY(-2px);
  margin-left: 5px;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
  vertical-align: middle;
}
.site-nav .menu-item-has-children:hover > a::after,
.site-nav .menu-item-has-children.is-open > a::after {
  transform: rotate(-135deg) translateY(-2px);
  border-color: white;
}

/* ── Mega panel ──────────────────────────────────────────── */
.site-nav .menu-item-has-children {
  position: static; /* panel positions relative to header, not li */
}

.site-nav .sub-menu {
  /* Hidden state */
  display: block;
  position: fixed;
  top: 0; /* set by JS to header bottom */
  left: 0; right: 0;
  z-index: 190;

  background: var(--strategic-blue);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 3px solid #DA291C;
  padding: 32px 0 36px;

  /* Transition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-normal) var(--ease-out-expo),
    transform var(--dur-normal) var(--ease-out-expo),
    visibility var(--dur-normal);

  /* Reset list styles */
  list-style: none;
  margin: 0;
}

.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children.is-open > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Panel inner layout ──────────────────────────────────── */
.site-nav .sub-menu::before {
  /* Centres content to match site-header__inner */
  content: '';
  display: block;
}

.site-nav .sub-menu li {
  display: inline-block; /* overridden below */
}

/* Grid of items inside the panel */
.site-nav .sub-menu {
  display: none; /* fallback */
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children.is-open > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

/* Inner wrapper — injected by JS for layout control */
.mega-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 2rem;
}

/* ── Sub-menu links ──────────────────────────────────────── */
.site-nav .sub-menu a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 0.6rem 0.75rem;
  display: block;
  border-radius: 6px;
  min-height: 40px;
  display: flex;
  align-items: center;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
  white-space: nowrap;
}
.site-nav .sub-menu a:hover {
  color: white;
  background: rgba(255,255,255,0.06);
}
.site-nav .sub-menu a[aria-current="page"] {
  color: white;
  background: rgba(255,255,255,0.08);
}

/* ── Section label (optional — add class mega-label to li) ── */
.mega-label > a {
  font-family: var(--font-mono) !important;
  font-size: 0.52rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.25) !important;
  pointer-events: none !important;
  cursor: default !important;
  padding-bottom: 0.25rem !important;
}
.mega-label > a:hover {
  background: transparent !important;
  color: rgba(255,255,255,0.25) !important;
}

/* ── Bridge — transparent pseudo-element fills gap between
   nav item and panel so mouseleave does not fire mid-travel ── */
.site-nav .sub-menu::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
  background: transparent;
  pointer-events: auto; /* captures mouse during travel */
}

/* ── Overlay — closes panel on outside click ─────────────── */
.mega-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 185;
  background: transparent;
}
.mega-overlay.is-active { display: block; }


/* ── Mobile nav-drawer — sub-menus expand inline ─────────── */
.nav-drawer .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-drawer .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,0.4);
  border-bottom: 2px solid rgba(255,255,255,0.4);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform var(--dur-normal) ease;
}
.nav-drawer .menu-item-has-children.is-open > a::after {
  transform: rotate(-135deg);
}
.nav-drawer .sub-menu {
  /* Override mega panel styles for mobile */
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 1rem !important;
  display: none !important;
  transition: none !important;
}
.nav-drawer .menu-item-has-children.is-open > .sub-menu {
  display: block !important;
}
.nav-drawer .sub-menu a {
  font-size: 1rem !important;
  color: rgba(255,255,255,0.55) !important;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: 44px !important;
}
.nav-drawer .sub-menu a:hover {
  color: white !important;
  background: transparent !important;
}
.nav-drawer .sub-menu li:last-child a {
  border-bottom: none !important;
}

/* ── Responsive — hide mega on tablet/mobile ─────────────── */
/* Legacy sub-menu hiding removed 8 July 2026: the drawer now carries
   full navigation parity via inc/mega-menu.php. */
@media (max-width: 1024px) {
  .mega-overlay { display: none !important; }
}

/* ============================================================
   Archive & Search — listing, pagination, search form
   ============================================================ */

.listing { display: grid; gap: 1.5rem; }
.listing-card__title { font-size: 1.2rem; margin: 0.25rem 0 0.5rem; }
.listing-card__title a {
  text-decoration: none;
  color: var(--strategic-blue);
  transition: color var(--dur-fast) ease;
}
.listing-card__title a:hover { color: var(--swiss-red); }
.listing-empty { padding: 2rem 0; }
.listing-empty .editorial { margin-bottom: 1.5rem; }

/* Pagination — the_posts_pagination markup */
.pagination { margin-top: 2.5rem; }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border: 1px solid var(--glass-border-light);
  background: white;
  color: var(--slate-700);
  text-decoration: none;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.pagination .page-numbers:hover { color: var(--strategic-blue); border-color: var(--strategic-blue); }
.pagination .page-numbers.current { background: var(--strategic-blue); border-color: var(--strategic-blue); color: white; }
.pagination .page-numbers.dots { border: none; background: none; }

/* Search form */
.praxia-search {
  display: flex;
  gap: 0.5rem;
  max-width: 560px;
  margin-bottom: 1.75rem;
}
.praxia-search__field {
  flex: 1;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--glass-border-light);
  background: white;
  font-size: 0.95rem;
  color: var(--slate-700);
}
.praxia-search__field:focus { outline: 2px solid var(--strategic-blue); outline-offset: 1px; }
@media (max-width: 480px) { .praxia-search { flex-direction: column; } }

/* Screen reader text — WP standard, absent from theme */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  word-wrap: normal !important;
}

/* ============================================================
   Mega menu — accessible disclosure navigation
   ============================================================ */

.site-header { position: relative; }

.mega-nav { display: flex; align-items: center; }
.mega-nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.mega-nav__item { position: static; }

.mega-nav__trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.5rem 0.9rem;
  border: 0; background: none; font: inherit;
  /* Blueprint header: bright white resting, red-warmed on hover
     and while a panel is open. */
  color: white;
  font-size: 0.9rem; cursor: pointer;
  transition: color var(--dur-fast) ease;
}
.mega-nav__trigger:hover,
.mega-nav__trigger:focus-visible { color: white; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(255,255,255,0.6); }
.mega-nav__trigger[aria-expanded="true"] { color: white; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--swiss-red-light); }
.mega-nav__trigger:focus-visible { outline: 2px solid white; outline-offset: 2px; }

.mega-nav__chevron {
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) ease;
}
.mega-nav__trigger[aria-expanded="true"] .mega-nav__chevron { transform: rotate(-135deg) translateY(-2px); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  /* Solid white, fully opaque: panels are reading surfaces and
     nothing may show through them. Blueprint edge closes the panel. */
  background: #ffffff;
  border-top: 1px solid var(--glass-border-light);
  border-bottom: 2px solid var(--blueprint-blue);
  box-shadow: 0 24px 48px -24px rgba(0, 43, 73, 0.28);
}
.mega[hidden] { display: none; }
.mega__inner { max-width: 1240px; margin: 0 auto; padding: 2.25rem 2rem 2.5rem; }
.mega__intro {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate-500); margin: 0 0 1.5rem;
}
/* Content columns flow equally; the feature tile is fixed-width and
   always last. auto-fit lets 1, 2 or 3 content columns lay out cleanly. */
.mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 260px; gap: 2.5rem; align-items: start; }
.mega__feature { grid-column: -2 / -1; }
.mega__heading {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate-500); margin: 0 0 0.9rem;
}
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
/* Panel links must escape .site-nav a's top-level styling entirely:
   that rule imposes uppercase mono-ish display type, nowrap, and
   inline-flex, which crushes title and description onto one line. */
.site-nav .mega .mega__link,
.mega__link {
  display: block; padding: 0.7rem 0.8rem; margin-left: -0.8rem;
  font-family: inherit; font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; white-space: normal;
  min-height: 0;
  text-decoration: none; border-left: 2px solid transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.site-nav .mega .mega__feature-link { min-height: 0; display: inline-block; white-space: normal; padding: 0; }
.mega__link:hover, .mega__link:focus-visible { background: #F7F8FA; border-left-color: var(--swiss-red); }
.mega__link:focus-visible { outline: 2px solid var(--strategic-blue); outline-offset: -2px; }
.mega__link-title { display: block; font-size: 0.98rem; font-weight: 500; color: var(--strategic-blue); margin-bottom: 0.15rem; }
.mega__link-desc { display: block; font-size: 0.84rem; line-height: 1.45; color: var(--slate-700); }

.mega__feature {
  padding: 1.5rem;
  background: var(--blueprint-blue);
  border-top: 2px solid var(--swiss-red);
}
.mega__feature-label {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 0.6rem;
}
.mega__feature-text { font-size: 0.95rem; line-height: 1.5; color: var(--strategic-blue); margin: 0 0 0.9rem; }
.mega__feature-link {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--swiss-red); text-decoration: none;
}
.mega__feature-link:hover { text-decoration: underline; }
.mega__feature-link::after { content: " \2192"; }

.site-header__cta { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }

/* ── Mobile drawer: full parity ──────────────────────────── */
.drawer-group { border-bottom: 1px solid rgba(255,255,255,0.14); }
.drawer-group__summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0.9rem 0; color: white; font-size: 1.05rem;
  cursor: pointer; list-style: none;
}
.drawer-group__summary::-webkit-details-marker { display: none; }
.drawer-group__summary:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.drawer-group__chevron {
  width: 0.5rem; height: 0.5rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-fast) ease;
}
.drawer-group[open] .drawer-group__chevron { transform: rotate(-135deg); }
.drawer-group__body .mega__inner { padding: 0 0 1rem; max-width: none; }
.drawer-group__body .mega__grid { grid-template-columns: 1fr; gap: 1.25rem; }
.drawer-group__body .mega__intro, .drawer-group__body .mega__heading { color: rgba(255,255,255,0.6); }
.drawer-group__body .mega__link { margin-left: 0; padding: 0.7rem 0; min-height: 44px; }
.drawer-group__body .mega__link:hover, .drawer-group__body .mega__link:focus-visible { background: rgba(255,255,255,0.06); }
.drawer-group__body .mega__link-title { color: white; }
.drawer-group__body .mega__link-desc { color: rgba(255,255,255,0.62); }
.drawer-group__body .mega__feature { background: rgba(255,255,255,0.05); }
.drawer-group__body .mega__feature-text { color: white; }
.drawer-cta { margin-top: 1.5rem; width: 100%; justify-content: center; }

@media (max-width: 1024px) { .mega-nav, .site-header__cta { display: none; } }
@media (min-width: 1025px) { .drawer-group, .drawer-cta { display: none; } }

/* ── Mobile drawer fixes ──────────────────────────────────
   Force each drawer link to stack title over description with
   real spacing (desktop lays them inline via flex), and make the
   section noun in the summary a tappable link to its page while
   the chevron still toggles the disclosure. */
.drawer-group__body .mega__link {
  display: block;
}
.drawer-group__body .mega__link-title {
  display: block;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.drawer-group__body .mega__link-desc {
  display: block;
  line-height: 1.5;
}
.drawer-group__body .mega__item { margin-bottom: 0.35rem; }

/* Summary: the noun links to its section; chevron toggles. */
.drawer-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}
.drawer-group__link {
  color: white;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 500;
  flex: 1;
  padding: 0.9rem 0;
}
.drawer-group__link:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.drawer-group__chevron { flex-shrink: 0; padding: 0.9rem 0.5rem 0.9rem 1rem; cursor: pointer; }

/* ── Drawer rhythm pass, 11 July 2026 ─────────────────────
   Verified against real mobile renders: calmer intro, separated
   group headings, clear title/desc hierarchy, breathing room per
   item. Desktop panel gains matching internal air. */

/* Intro: quieter, smaller, roomier */
.drawer-group__body .mega__intro {
  font-size: 0.62rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  margin: 0.25rem 0 1.5rem;
  opacity: 0.75;
}

/* Group headings: clear separation above, tight to their items */
.drawer-group__body .mega__heading {
  margin: 1.75rem 0 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.drawer-group__body .mega__col:first-child .mega__heading:first-child,
.drawer-group__body .mega__heading:first-of-type { border-top: 0; padding-top: 0; margin-top: 0.5rem; }

/* Items: real vertical rhythm, hierarchy between title and desc */
.drawer-group__body .mega__item { margin: 0; }
.drawer-group__body .mega__link { padding: 0.85rem 0; }
.drawer-group__body .mega__link-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.drawer-group__body .mega__link-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  opacity: 0.72;
}

/* Feature tile on mobile: separated, not glued to the list */
.drawer-group__body .mega__feature { margin-top: 1.75rem; }

/* ── Desktop panel: internal air ── */
@media (min-width: 1025px) {
  .mega__link { padding: 0.55rem 0.75rem; }
  .mega__link-title { margin-bottom: 0.25rem; }
  .mega__link-desc { line-height: 1.5; }
  .mega__heading { margin-bottom: 1.1rem; }
}


@media (max-width: 640px) { .mega__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .mega-nav__chevron, .drawer-group__chevron, .mega__link, .mega-nav__trigger { transition: none; }
}

/* ============================================================
   Canonical type scale — 8 July 2026
   One fluid scale for the whole theme. Every text surface maps
   to a token; no template invents its own sizes. clamp() means
   type breathes between viewports instead of stepping.
   ============================================================ */

:root {
  /* Display: page titles */
  --type-display:   clamp(2.1rem, 1.35rem + 3.2vw, 3.4rem);
  /* Title: article titles, major section heads */
  --type-title:     clamp(1.55rem, 1.2rem + 1.5vw, 2.1rem);
  /* Heading: h2 within content */
  --type-heading:   clamp(1.3rem, 1.12rem + 0.8vw, 1.6rem);
  /* Subheading: h3 within content */
  --type-subhead:   clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
  /* Standfirst: editorial lead lines */
  --type-standfirst: clamp(1.1rem, 1rem + 0.55vw, 1.35rem);
  /* Body: reading text */
  --type-body:      clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  /* Small: captions, card excerpts */
  --type-small:     clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  /* Metadata: mono instrument markings */
  --type-meta:      clamp(0.66rem, 0.64rem + 0.1vw, 0.72rem);

  --leading-tight:  1.15;
  --leading-heading: 1.25;
  --leading-body:   1.7;
}

/* ── Body copy: one voice everywhere ─────────────────────── */

body { font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-body); }

.entry-content p,
.entry-content li,
.editorial p,
p.editorial {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.entry-content { max-width: 68ch; }

/* ── Headings: display family, one scale ─────────────────── */

.pit-doc-header h1,
.art-header__title,
.hero__title {
  font-family: var(--font-display);
  font-size: var(--type-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.entry-content h2 {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--leading-heading);
  margin-top: 2.25em;
  margin-bottom: 0.6em;
  color: var(--strategic-blue);
}

.entry-content h3 {
  font-family: var(--font-display);
  font-size: var(--type-subhead);
  line-height: var(--leading-heading);
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  color: var(--strategic-blue);
}

/* ── Standfirsts: one treatment ──────────────────────────── */

.pit-doc-header__standfirst,
.art-header__standfirst {
  font-family: var(--font-editorial);
  font-size: var(--type-standfirst);
  line-height: 1.55;
  max-width: 52ch;
}

/* ── Cards and listings ──────────────────────────────────── */

.listing-card__title,
.swiss-card h2 { font-family: var(--font-display); font-size: var(--type-subhead); }
.listing-card .entry-summary p,
.swiss-card p { font-size: var(--type-small); }

/* ── Blockquotes in content ──────────────────────────────── */

.entry-content blockquote {
  border-left: 2px solid var(--swiss-red);
  margin: 2em 0;
  padding: 0.25em 0 0.25em 1.25rem;
}
.entry-content blockquote p {
  font-family: var(--font-editorial);
  font-size: var(--type-standfirst);
  line-height: 1.5;
  color: var(--strategic-blue);
}

/* ── Mono metadata: instrument markings ──────────────────── */

.pit-doc-header__meta,
.art-header__meta,
.eyebrow,
.label { font-size: var(--type-meta); }

/* ── Root the content in one family ──────────────────────────
   The Plain template stacks .entry-content with .editorial, whose
   serif then leaks into any element not explicitly reset (the
   table mess of 8 July). Rooting the family here, later in the
   cascade, makes sans the inherited default for ALL content;
   serif survives only where deliberately stated (standfirsts,
   blockquotes). */

.entry-content,
.entry-content.editorial {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* ── Tables: one treatment everywhere ────────────────────── */

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: var(--type-small);
  line-height: 1.55;
}
.entry-content th {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--strategic-blue);
  background: var(--off-white);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--glass-border-light);
  border-bottom: 2px solid var(--strategic-blue);
}
.entry-content td {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--slate-700);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--glass-border-light);
  vertical-align: top;
}
.entry-content tr:nth-child(even) td { background: var(--off-white); }

/* ── Remaining content elements ──────────────────────────── */

.entry-content dt { font-family: var(--font-display); font-weight: 600; color: var(--strategic-blue); }
.entry-content dd { margin: 0 0 1em; }
.entry-content figcaption {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: 0.06em;
  color: var(--slate-500);
  margin-top: 0.5em;
}
.entry-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--off-white);
  padding: 0.1em 0.35em;
  border: 1px solid var(--glass-border-light);
}
.entry-content pre {
  font-family: var(--font-mono);
  font-size: var(--type-small);
  background: var(--off-white);
  border: 1px solid var(--glass-border-light);
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
.entry-content pre code { background: none; border: 0; padding: 0; }
.entry-content hr { border: 0; border-top: 1px solid var(--glass-border-light); margin: 2.5em 0; }
.entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--strategic-blue);
  margin-top: 1.5em; margin-bottom: 0.4em;
}

/* ── Contents nav in the page rail ───────────────────────── */

.pit-rail { position: sticky; top: 110px; align-self: start; }

.pit-toc { margin: 1.5rem 0; }
.pit-toc__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.75rem;
}
.pit-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--glass-border-light); }
.pit-toc__item { margin: 0; }
.pit-toc__item--h3 .pit-toc__link { padding-left: 1.6rem; font-size: 0.8rem; }
.pit-toc__link {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--slate-700);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.pit-toc__link:hover,
.pit-toc__link:focus-visible {
  color: var(--strategic-blue);
  border-left-color: var(--swiss-red);
}
.pit-toc__link:focus-visible { outline: 2px solid var(--strategic-blue); outline-offset: 2px; }

/* Reading position in the Contents rail */
.pit-toc__link.is-current {
  color: var(--strategic-blue);
  border-left-color: var(--swiss-red);
  font-weight: 600;
}


/* Anchor targets clear the sticky header */
.entry-content h2[id],
.entry-content h3[id] { scroll-margin-top: 120px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (max-width: 900px) {
  .pit-rail { position: static; }
}

/* ── Plain template: contents rail when the page earns one ── */

.plain-body__grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 68ch) 240px;
  gap: 4rem;
  justify-content: center;
  align-items: start;
}
.plain-rail { position: sticky; top: 110px; }
@media (max-width: 900px) {
  .plain-body__grid { grid-template-columns: 1fr; gap: 0; }
  .plain-rail { position: static; order: -1; }
}

/* ── Editorial series ─────────────────────────────────────
   Head note prepended to each series member, and the standing
   panel that gathers a whole series. Kept in the theme's register:
   mono eyebrows, serif titles, blueprint rule, no ornament. */

.series-note {
  margin: 0 0 2.5rem;
  padding: 0 0 1.25rem 1rem;
  border-left: 2px solid var(--swiss-red);
}
.series-note__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.5rem;
}
.series-note__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: series;
}
.series-note__item {
  counter-increment: series;
  font-size: var(--type-small);
  line-height: 1.5;
  padding: 0.15rem 0;
}
.series-note__item::before {
  content: counter(series, decimal-leading-zero) "  ";
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  color: var(--slate-500);
}
.series-note__item a { color: var(--strategic-blue); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; }
.series-note__item a:hover { border-bottom-color: var(--swiss-red); }
.series-note__item.is-current span { color: var(--slate-700); font-style: italic; }


/* ── Reusable pull-quote / epigraph component, 12 July 2026 ──
   Placeable on any post via [praxia_pullquote]. */
.praxia-pullquote {
  margin: 2.5rem 0;
  padding: 2rem 2.25rem;
  background: var(--cream, #F5EFE3);
  border-left: 4px solid var(--swiss-red);
  border-radius: 0 6px 6px 0;
}
.praxia-pullquote__text {
  margin: 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.6;
  color: var(--strategic-blue);
}
.praxia-pullquote__text p { margin: 0 0 0.75rem; }
.praxia-pullquote__text p:last-child { margin-bottom: 0; }
.praxia-pullquote__attribution {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--strategic-blue);
  opacity: 0.7;
}
.praxia-pullquote__share {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.praxia-pullquote__share-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}
.praxia-pullquote__share-link {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--strategic-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,43,73,0.3);
  background: none;
  border-top: none; border-left: none; border-right: none;
  padding: 0 0 2px;
  cursor: pointer;
}
.praxia-pullquote__share-link:hover { border-bottom-color: var(--swiss-red); color: var(--swiss-red); }

.series-panel {
  margin: 3rem 0;
  padding: 2rem;
  background: var(--off-white);
  border-top: 3px solid var(--blueprint-blue);
}
.series-panel__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 0.5rem;
}
.series-panel__title {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  color: var(--strategic-blue);
  margin: 0 0 0.4rem;
}
.series-panel__blurb {
  font-family: var(--font-editorial);
  font-size: var(--type-standfirst);
  color: var(--slate-700);
  margin: 0 0 1.5rem;
  max-width: 52ch;
}
.series-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.series-panel__item { display: flex; gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--glass-border-light); }
.series-panel__item:first-child { border-top: 0; }
.series-panel__num { font-family: var(--font-mono); font-size: var(--type-meta); color: var(--swiss-red); flex-shrink: 0; }
.series-panel__link { text-decoration: none; display: block; }
.series-panel__link-title { display: block; font-family: var(--font-display); font-size: var(--type-subhead); color: var(--strategic-blue); }
.series-panel__link-desc { display: block; font-size: var(--type-small); color: var(--slate-700); line-height: 1.5; margin-top: 0.2rem; }
.series-panel__link:hover .series-panel__link-title { color: var(--blueprint-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── Journal index: controls and cards ───────────────────── */
.journal-controls {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 1rem; margin: 2rem 0 1.5rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--glass-border-light);
}
.journal-controls__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.journal-filter {
  font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate-500);
  background: transparent; border: 1px solid var(--glass-border-light);
  padding: 0.4rem 0.8rem; cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.journal-filter:hover { color: var(--strategic-blue); border-color: var(--strategic-blue); }
.journal-filter.is-active { color: white; background: var(--strategic-blue); border-color: var(--strategic-blue); }
.journal-controls__sort { display: flex; align-items: center; gap: 0.5rem; }
.journal-sort__label { font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-500); }
.journal-sort {
  font-family: var(--font-body); font-size: var(--type-small); color: var(--strategic-blue);
  background: white; border: 1px solid var(--glass-border-light); padding: 0.4rem 0.6rem; cursor: pointer;
}
.journal-listing { display: grid; gap: 1.25rem; }
.listing-card__meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.5rem; }
.listing-card__cat {
  font-family: var(--font-mono); font-size: var(--type-meta); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--swiss-red);
}
.journal-empty { font-family: var(--font-editorial); font-style: italic; color: var(--slate-500); padding: 2rem 0; }



/* ── Feature living rings ─────────────────────────────────
   Concentric hairline rings bled off the right, echoing the
   reference hero, given slow honest motion in pure CSS. No
   runtime. Three rings breathe on different long periods so the
   drift never obviously repeats; the whole field turns almost
   imperceptibly. Silenced entirely for reduced-motion. */
.praxia-feature-content { position: relative; }
.feature-rings {
  position: absolute;
  top: 50%;
  right: -180px;
  width: min(680px, 56vw);
  transform: translateY(-50%);
  color: var(--strategic-blue);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.feature-rings__svg { width: 100%; height: auto; display: block; transform-origin: 50% 50%; }
.praxia-feature-content > *:not(.feature-rings) { position: relative; z-index: 1; }

/* Each ring drifts on its own long, offset cycle: a slow breath in
   scale plus a whisper of rotation. transform-box keeps the SVG
   circle scaling about its own centre. */
.feature-rings__a, .feature-rings__b, .feature-rings__c {
  transform-box: fill-box;
  transform-origin: center;
}
.feature-rings__a { animation: feature-ring-a 26s ease-in-out infinite; }
.feature-rings__b { animation: feature-ring-b 34s ease-in-out infinite; }
.feature-rings__c { animation: feature-ring-c 30s ease-in-out infinite; }
.feature-rings__svg { animation: feature-ring-turn 120s linear infinite; }

@keyframes feature-ring-a {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes feature-ring-b {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(0.985); }
}
@keyframes feature-ring-c {
  0%, 100% { transform: scale(0.99); }
  50%      { transform: scale(1.045); }
}
@keyframes feature-ring-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .feature-rings { right: -34%; width: 92vw; opacity: 0.09; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-rings__a, .feature-rings__b, .feature-rings__c, .feature-rings__svg { animation: none; }
}




/* ============================================================
   Home hero — light chart ground, live gyroscope, sonar pings
   Scoped to .hero--home only; the Plain title band is untouched.
   ============================================================ */

.hero--home {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 71, 171, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 71, 171, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(0, 71, 171, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 71, 171, 0.09) 1px, transparent 1px),
    #ffffff;
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px, auto;
  color: var(--strategic-blue);
  min-height: auto;
  padding: 3.5rem 0 2.5rem;
  cursor: default;
}

.hero--home .hero__inner--overlap {
  position: relative;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 380px;
  display: flex;
  align-items: center;
}
.hero--home .hero__copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  /* Soft white ground beneath the copy so the title always wins
     against the grid and the rings emerging behind it. */
  background: radial-gradient(ellipse 130% 110% at 35% 50%, rgba(255,255,255,0.96) 45%, rgba(255,255,255,0.75) 68%, rgba(255,255,255,0) 100%);
  padding: 2rem 3rem 2rem 0;
}
.hero__gyro {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.hero--home .label { color: var(--slate-500); }
.hero--home .hero__title {
  color: var(--strategic-blue);
  max-width: 18ch;
  text-wrap: balance;
}
.hero--home .hero__body {
  color: var(--slate-700);
  font-family: var(--font-editorial);
  font-size: var(--type-standfirst);
}
.hero--home .hero__footer {
  position: relative;
  max-width: var(--max-w-wide);
  margin: 3.5rem auto 0;
  padding: 1.25rem 2rem 0;
  border-top: 1px solid rgba(0, 71, 171, 0.15);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero--home .hero__footer-note { color: var(--slate-500); }

/* Dark outline button for light grounds */
.btn-outline-dark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--strategic-blue);
  color: var(--strategic-blue);
  background: transparent;
  text-decoration: none;
  font-weight: 500;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible { background: var(--strategic-blue); color: white; }
.btn-outline-dark:focus-visible { outline: 2px solid var(--strategic-blue); outline-offset: 2px; }

/* ── The gyroscope ───────────────────────────────────────── */

.gyro {
  width: min(360px, 42vw);
  height: auto;
  color: var(--strategic-blue);
  opacity: 0.8;
}
.gyro__ring { transform-origin: 200px 200px; }
/* Motion belongs to the hero context; the page rails hold still. */
.hero--home .gyro__ring--a { animation: gyro-sway-a 14s ease-in-out infinite; }
.hero--home .gyro__ring--b { animation: gyro-sway-b 11s ease-in-out infinite; }
.hero--home .gyro__ring--c { animation: gyro-sway-c 9s  ease-in-out infinite; }

@keyframes gyro-sway-a { 0%,100% { transform: rotate(12deg); }  50% { transform: rotate(-12deg); } }
@keyframes gyro-sway-b { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes gyro-sway-c { 0%,100% { transform: rotate(30deg); }  50% { transform: rotate(-30deg); } }

.gyro__pulse { transform-origin: 200px 200px; }
.hero--home .gyro__pulse { animation: gyro-pulse 4.5s ease-out infinite; }
.pit-rail__gyro .gyro__pulse { opacity: 0.5; }
@keyframes gyro-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  60%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ── Sonar pings on touch or click ───────────────────────── */

.hero-ping {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid var(--blueprint-blue);
  border-radius: 50%;
  pointer-events: none;
  animation: hero-ping 0.9s ease-out forwards;
}
.hero-ping--second { animation-delay: 0.18s; opacity: 0; }
@keyframes hero-ping {
  0%   { transform: scale(1);  opacity: 0.7; }
  100% { transform: scale(16); opacity: 0; }
}

@media (max-width: 900px) {
  /* On narrow screens the overlap fails: the copy's white fade
     blankets the instrument. Return the gyro to the flow, above
     the words, fully visible. */
  .hero--home .hero__inner--overlap { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__gyro { position: static; transform: none; display: flex; justify-content: center; margin: 0 0 1rem; order: -1; }
  .gyro { width: min(220px, 58vw); opacity: 0.9; }
  .hero--home .hero__copy { background: none; padding: 0; max-width: none; }
  /* Chart-sheet marginalia earn their place on the wide sheet only;
     on a phone they strand in whitespace and repeat the site footer. */
  .hero--home .hero__footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gyro__ring--a, .gyro__ring--b, .gyro__ring--c, .gyro__pulse { animation: none; }
  .hero-ping { display: none; }
}