/* ============================================================
   David S. Pan personal website · shared styles
   Design system: "Dashboard Humanism" (Stripe DNA + deep-blue primary + dual-zone color strategy)
   Source: 02-design-system.md v1.0 (design-system-expert)
   Zero external dependencies · system fonts / dual theme · warm zone (stories) / cool zone (ethics / MCP)
   ============================================================ */

/* ---------- Design Tokens: Light Theme ---------- */
:root {
  /* Brand / Primary — "ji lan" (JILan), the traditional Chinese sacrificial-blue
     porcelain glaze. The historical names ji lan / bao shi lan all denote this
     single cobalt glaze; the documented base is #3B6EB5, deepened here for text
     contrast. Paired with the warm amber it forms the classical jing tai lan
     gold-on-cobalt scheme. Every pairing is WCAG AAA on this cream (7.7:1-8.2:1). */
  --color-primary:            #2A4E8C;
  --color-primary-hover:      #1F3C6E;
  --color-primary-soft:       #E9F0FA;
  --color-primary-text:       #24457D;

  /* ji lan ramp: #1F3C6E ink · #16305C glaze · #2A4E8C deep · #3B6EB5 base
     · #93B7E4 tint · #E9F0FA yue bai (porcelain white) */

  /* Neutral / Surfaces — warm paper ramp (cream, not cool grey) */
  --color-bg:                 #FBF8F4;
  --color-surface:            #FFFDFB;
  --color-surface-raised:     #FFFDFB;
  --color-surface-sunken:     #F5EFE8;
  --color-border:             #EDE4D9;
  --color-border-strong:      #DCCFBF;
  --color-text-primary:       #26201B;
  --color-text-secondary:     #6F6155;
  --color-text-disabled:      #A99C8F;

  /* Sidebar (constant ji lan glaze in both themes) */
  --color-sidebar-bg:         #16305C;
  --color-sidebar-bg-hover:   #1E4079;
  --color-sidebar-active-bg:  #2A4E8C;
  --color-sidebar-text:       #C6D5EC;
  --color-sidebar-text-strong:#FFFFFF;
  --color-sidebar-border:     #29456F;

  /* Warm Zone (stories) */
  --color-warm-primary:       #D97706;
  --color-warm-strong:        #B45309;
  --color-warm-soft:          #FDF3E3;
  --color-warm-border:        #F3DDB8;
  --color-warm-gradient:      linear-gradient(135deg, #F59E0B 0%, #EC7A4B 100%);
  --color-warm-card-bg:       linear-gradient(180deg, #FEF8EE 0%, #FFFDFB 62%);

  /* Tech Zone (ethics + MCP) — the cool pole, now the lighter end of
     the same ji lan glaze family so every blue on the site belongs to one tradition */
  --color-tech-primary:       #3B6EB5;
  --color-tech-strong:        #2A4E8C;
  --color-tech-soft:          #E7EFFA;
  --color-tech-border:        #C3D5EC;
  --color-tech-gradient:      linear-gradient(135deg, #3B6EB5 0%, #1F3C6E 100%);
  --color-tech-card-bg:       linear-gradient(180deg, #F0F5FC 0%, #FFFDFB 62%);

  /* Semantic */
  --color-success:            #10B981;
  --color-success-soft:       #DCF5EA;
  --color-warning:            #F59E0B;
  --color-warning-soft:       #FDF0D5;
  --color-danger:             #DC2626;
  --color-danger-soft:        #FDE8E8;
  --color-info:               #2A4E8C;
  --color-info-soft:          #E9F0FA;

  /* Status Badge */
  --badge-live-bg:            var(--color-success-soft);
  --badge-live-text:          #067A5B;
  --badge-dev-bg:             var(--color-info-soft);
  --badge-dev-text:           #24457D;
  --badge-planned-bg:         #F4EEE7;
  --badge-planned-text:       #6F6155;
  --badge-planned-border:     #B5A695;
  --badge-license-bg:         var(--color-success-soft);
  --badge-license-text:       #067A5B;

  /* Shadows / Focus — warm-tinted, softer */
  --shadow-flat:    none;
  --shadow-raised:  0 1px 2px rgba(74, 52, 32, 0.05), 0 2px 8px rgba(74, 52, 32, 0.06);
  --shadow-float:   0 6px 20px rgba(74, 52, 32, 0.11);
  --shadow-overlay: 0 12px 34px rgba(74, 52, 32, 0.17);
  --focus-ring: 0 0 0 3px rgba(42, 78, 140, 0.34);

  /* Radius / Spacing / Type — softer radii for a warmer hand */
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", sans-serif;
  /* Warmth: system serif stack for human-facing reading surfaces (still zero external deps) */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                Georgia, Cambria, "Times New Roman", "Songti SC",
                "Noto Serif CJK SC", STSong, serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* ---------- Design Tokens: Dark Theme ---------- */
[data-theme="dark"] {
  --color-primary:            #93B7E4;
  --color-primary-hover:      #AECBEE;
  --color-primary-soft:       #16294C;
  --color-primary-text:       #B6CFEF;

  /* Warm charcoal ramp (no longer cold blue-black) */
  --color-bg:                 #14110F;
  --color-surface:            #1C1917;
  --color-surface-raised:     #262220;
  --color-surface-sunken:     #100E0D;
  --color-border:             #322C28;
  --color-border-strong:      #4A423B;
  --color-text-primary:       #F1EAE3;
  --color-text-secondary:     #A99C8F;
  --color-text-disabled:      #7A6F64;

  --color-sidebar-bg:         #0D1930;
  --color-sidebar-bg-hover:   #16294B;
  --color-sidebar-active-bg:  #2A4E8C;
  --color-sidebar-text:       #C6D5EC;
  --color-sidebar-text-strong:#FFFFFF;
  --color-sidebar-border:     #1F3459;

  --color-warm-primary:       #F5A623;
  --color-warm-strong:        #FBBF24;
  --color-warm-soft:          #2A2113;
  --color-warm-border:        #4A3A1C;
  --color-warm-gradient:      linear-gradient(135deg, #B45309 0%, #C2503A 100%);
  --color-warm-card-bg:       linear-gradient(180deg, #231B13 0%, #1C1917 62%);

  --color-tech-primary:       #93B7E4;
  --color-tech-strong:        #A9C8EC;
  --color-tech-soft:          #16294C;
  --color-tech-border:        #29456F;
  --color-tech-gradient:      linear-gradient(135deg, #4A7FC4 0%, #24447E 100%);
  --color-tech-card-bg:       linear-gradient(180deg, #15233D 0%, #1C1917 62%);

  --color-success:            #34D399;
  --color-success-soft:       #0E2E24;
  --color-warning:            #FBBF24;
  --color-warning-soft:       #2E2410;
  --color-danger:             #F87171;
  --color-danger-soft:        #331719;
  --color-info:               #93B7E4;
  --color-info-soft:          #16294C;

  --badge-live-bg:            var(--color-success-soft);
  --badge-live-text:          #34D399;
  --badge-dev-bg:             var(--color-info-soft);
  --badge-dev-text:           #A9C8EC;
  --badge-planned-bg:         #241F1A;
  --badge-planned-text:       #A99C8F;
  --badge-planned-border:     #5A5048;
  --badge-license-bg:         var(--color-success-soft);
  --badge-license-text:       #34D399;

  --shadow-flat:    none;
  --shadow-raised:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-float:   0 6px 20px rgba(0, 0, 0, 0.50);
  --shadow-overlay: 0 12px 34px rgba(0, 0, 0, 0.60);
  --focus-ring: 0 0 0 3px rgba(147, 183, 228, 0.45);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button { font-family: inherit; cursor: pointer; }
/* Outline-based focus. The old box-shadow + border-radius rule silently
   re-shaped focused cards; an outline never changes geometry and cannot be
   clipped by an ancestor's overflow:hidden. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
h1, h2, h3 { line-height: 1.3; }
.display { font-size: 40px; font-weight: 700; line-height: 1.15; }
.h1 { font-size: 32px; font-weight: 700; line-height: 1.25; }
.h2 { font-size: 24px; font-weight: 600; line-height: 1.3; }
.h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.body-sm { font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); }
.mono { font-family: var(--font-mono); }

/* ---------- Layout ---------- */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 240px;
  background: var(--color-sidebar-bg);
  display: flex; flex-direction: column;
  z-index: 200;
  transition: transform 0.25s ease, visibility 0.25s ease;
}
.main {
  margin-left: 240px;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.main-inner {
  width: 100%; max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
  flex: 1;
}

/* ---------- Sidebar: Brand ---------- */
.brand {
  display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 var(--space-md);
  border-bottom: 1px solid var(--color-sidebar-border);
  text-decoration: none !important;
}
.brand-mark {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #2A4E8C, #4A82C8);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name {
  color: var(--color-sidebar-text-strong);
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
.brand-sub { color: var(--color-sidebar-text); font-size: 11px; }

/* ---------- Sidebar: Nav ---------- */
.nav { flex: 1; padding: var(--space-md) var(--space-sm); overflow-y: auto; }
.nav-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 226, 244, 0.80);
  padding: 0 12px; margin-bottom: var(--space-sm);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px; margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: var(--color-sidebar-text);
  text-decoration: none !important;
  font-size: 14px;
  position: relative;
  transition: background 0.15s ease;
}
.nav-item:hover { background: var(--color-sidebar-bg-hover); }
.nav-item.is-active { background: var(--color-sidebar-active-bg); color: var(--color-sidebar-text-strong); }
.nav-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px;
  background: var(--color-sidebar-text-strong);
}

/* ---------- Sidebar: Foot ---------- */
.sidebar-foot {
  padding: var(--space-md);
  border-top: 1px solid var(--color-sidebar-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.mcp-mini { text-decoration: none !important; }
.theme-toggle {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-sidebar-border);
  background: transparent;
  color: var(--color-sidebar-text);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.2s ease;
}
.theme-toggle:hover { background: var(--color-sidebar-bg-hover); }
.theme-toggle:active { transform: rotate(20deg); }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Topbar (mobile < 640px) ---------- */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 190;
  height: 56px; padding: 0 var(--space-md);
  background: var(--color-sidebar-bg);
  align-items: center; gap: var(--space-md);
}
.topbar-brand {
  color: var(--color-sidebar-text-strong);
  font-weight: 700; font-size: 15px; flex: 1;
}
.menu-btn {
  width: 44px; height: 44px; margin-left: -10px;
  border: none; background: transparent;
  color: var(--color-sidebar-text);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}
.menu-btn:hover { background: var(--color-sidebar-bg-hover); }
.topbar .theme-toggle { width: 44px; height: 44px; border-color: var(--color-sidebar-border); }
.drawer-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 150;
  background: rgba(2, 6, 23, 0.55);
}
.drawer-overlay.show { display: block; }

/* ---------- Page Header ---------- */
.page-head { margin-bottom: var(--space-xl); }
.page-head-kicker {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--color-text-secondary); text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.page-head-sub { margin-top: var(--space-sm); max-width: 640px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 12px; font-weight: 500; line-height: 1.6;
  white-space: nowrap;
}
.badge--live    { background: var(--badge-live-bg); color: var(--badge-live-text); }
.badge--dev     { background: var(--badge-dev-bg); color: var(--badge-dev-text); }
.badge--planned {
  background: var(--badge-planned-bg); color: var(--badge-planned-text);
  border: 1.5px dashed var(--badge-planned-border);
}
.badge--license { background: var(--badge-license-bg); color: var(--badge-license-text); }
.badge--warm    { background: var(--color-warm-soft); color: var(--color-warm-strong); }
.badge--tech    { background: var(--color-tech-soft); color: var(--color-tech-strong); }
.badge--neutral { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--live { background: var(--badge-live-text); }
.dot--dev  { background: var(--badge-dev-text); }
.badge--planned .dot { border: 1.5px dashed var(--badge-planned-border); background: transparent; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--secondary {
  background: transparent; color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-surface-sunken); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover { background: var(--color-primary-soft); color: var(--color-primary-text); }
/* WCAG AA checked. White on --color-warm-strong (#B45309) = 5.0:1; white on
   --color-tech-strong (#2A4E8C, ji lan) = 8.2:1. The previous warm/tech-primary
   tops scored only 3.19:1 and 4.09:1 and failed AA. In dark theme those "strong"
   tokens flip light, so the button inverts to dark text on a light fill. */
.btn--warm { background: var(--color-warm-strong); color: #FFFFFF; }
.btn--warm:hover { background: #8F4207; }
.btn--tech { background: var(--color-tech-strong); color: #FFFFFF; }
.btn--tech:hover { background: #1F3C6E; }
[data-theme="dark"] .btn--warm { background: var(--color-warm-primary); color: #14110F; }
[data-theme="dark"] .btn--warm:hover { background: var(--color-warm-strong); }
[data-theme="dark"] .btn--tech { background: var(--color-tech-primary); color: #0B0F14; }
[data-theme="dark"] .btn--tech:hover { background: var(--color-tech-strong); }
.btn--sm { padding: 6px 14px; font-size: 13px; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 20px;
}
a.card { text-decoration: none !important; color: inherit; display: block; }

/* Zone hero cards (two entry points: warm / cool side by side) */
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.zone-card {
  position: relative; overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.zone-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.zone-card--warm::before { background: var(--color-warm-gradient); }
.zone-card--tech::before { background: var(--color-tech-gradient); }
.zone-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.zone-card--warm .zone-icon { background: var(--color-warm-soft); color: var(--color-warm-primary); }
.zone-card--tech .zone-icon { background: var(--color-tech-soft); color: var(--color-tech-primary); }
.zone-card h2 { font-size: 20px; }
.zone-card .zone-desc { color: var(--color-text-secondary); font-size: 14px; flex: 1; }
.zone-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

/* Stat cards */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 20px;
  text-decoration: none !important; color: inherit; display: block;
  position: relative; overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-primary); }
.stat-card--warm::before { background: var(--color-warm-gradient); }
.stat-card--tech::before { background: var(--color-tech-gradient); }
.stat-card:hover { box-shadow: var(--shadow-float); border-color: var(--color-border-strong); }
.stat-card--warm:hover { border-color: var(--color-warm-border); }
.stat-card--tech:hover { border-color: var(--color-tech-border); }
.stat-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
.stat-num {
  font-size: 32px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-xs);
}
.stat-card--warm .stat-num, .stat-card--warm .stat-icon { color: var(--color-warm-primary); }
.stat-card--tech .stat-num, .stat-card--tech .stat-icon { color: var(--color-tech-primary); }
.stat-sub { font-size: 14px; color: var(--color-text-secondary); }

/* ---------- Section ---------- */
.section { margin-bottom: var(--space-2xl); }
.section-head {
  display: flex; align-items: center; gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.section-head h2 { font-size: 24px; font-weight: 600; }
.section-head .spacer { flex: 1; }
.section-head a { font-size: 14px; font-weight: 500; }
.section--warm .section-head a { color: var(--color-warm-strong); }
.section--tech .section-head a { color: var(--color-tech-strong); }

/* ---------- Story Cards ---------- */
.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.story-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  text-decoration: none !important; color: inherit; display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.story-card:hover {
  box-shadow: var(--shadow-float);
  border-color: var(--color-warm-border);
  transform: translateY(-2px);
}
.story-card:hover .story-title { color: var(--color-warm-strong); }
.story-media { height: 120px; background: var(--color-warm-gradient); position: relative; overflow: hidden; }
.story-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-media--tech { background: var(--color-tech-gradient); }
.story-body { padding: 20px; display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.story-title { font-size: 18px; font-weight: 600; line-height: 1.4; transition: color 0.15s ease; }
.story-excerpt {
  font-size: 14px; color: var(--color-text-secondary); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
  font-size: 12px; color: var(--color-text-secondary);
  margin-top: auto; padding-top: var(--space-sm);
}
.story-meta .sep { opacity: 0.5; }

/* ---------- Story Detail ---------- */
.article-head-media {
  height: 200px; border-radius: var(--radius-xl); overflow: hidden;
  position: relative; margin-bottom: var(--space-xl);
  background: var(--color-warm-gradient);
}
.article-head-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.article-title { font-size: 32px; font-weight: 700; line-height: 1.25; margin-bottom: var(--space-md); }
.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
  font-size: 14px; color: var(--color-text-secondary);
  padding-bottom: var(--space-lg); margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.article-body { max-width: 720px; }
.article-body p { margin-bottom: var(--space-md); font-size: 16px; line-height: 1.9; }
/* Warm editorial drop cap on the opening paragraph */
.article-body p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.1em; font-weight: 600; line-height: 0.86;
  padding: 8px 14px 0 0;
  color: var(--color-warm-strong);
}
.license-card { margin-top: var(--space-xl); }
.license-rows { display: flex; flex-direction: column; }
.license-row {
  display: flex; align-items: baseline; gap: var(--space-md);
  padding: 10px 0; border-bottom: 1px dashed var(--color-border);
  font-size: 14px;
}
.license-row:last-child { border-bottom: none; }
.license-row dt { flex: none; width: 96px; color: var(--color-text-secondary); }
.license-row dd { flex: 1; }

/* Prev / Next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); }
.pager a {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 20px;
  text-decoration: none !important; color: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pager a:hover { border-color: var(--color-warm-border); box-shadow: var(--shadow-float); }
.pager .dir { font-size: 12px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; }
.pager .pt { font-size: 15px; font-weight: 600; color: var(--color-warm-strong); }
.pager .next { text-align: right; align-items: flex-end; }

/* ---------- Ethics ---------- */
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.principle-card {
  background: var(--color-surface);
  border: 1px solid var(--color-tech-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 20px;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.principle-card .p-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--color-tech-strong); letter-spacing: 0.06em;
}
.principle-card h3 { font-size: 18px; }
.principle-card p { font-size: 14px; color: var(--color-text-secondary); }
.goal-list { display: flex; flex-direction: column; gap: var(--space-md); }
.goal-item {
  display: flex; gap: var(--space-md); align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 20px;
  box-shadow: var(--shadow-raised);
}
.goal-item .g-icon {
  width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
  background: var(--color-tech-soft); color: var(--color-tech-primary);
  display: flex; align-items: center; justify-content: center;
}
.goal-item h3 { font-size: 16px; }
.goal-item p { font-size: 14px; color: var(--color-text-secondary); }
.case-row {
  display: flex; align-items: center; gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 20px; box-shadow: var(--shadow-raised);
  flex-wrap: wrap;
}
.case-row .c-id { font-family: var(--font-mono); font-size: 13px; color: var(--color-tech-strong); flex: none; }
.case-row .c-title { font-weight: 600; font-size: 15px; flex: 1; min-width: 200px; }
.case-row .c-desc { font-size: 14px; color: var(--color-text-secondary); flex-basis: 100%; }

/* ---------- Code Block ---------- */
.codeblock {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-md) 0;
}
.codeblock-head {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
}
.codeblock-head .lang {
  font-size: 12px; font-weight: 500;
  background: var(--color-tech-soft); color: var(--color-tech-strong);
  border-radius: var(--radius-full); padding: 1px 10px;
  font-family: var(--font-mono);
}
.codeblock-head .fname { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); }
.codeblock pre {
  padding: 16px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.6;
  color: var(--color-text-primary);
}
.tok-key { color: var(--color-tech-strong); }
.tok-str { color: var(--color-warm-strong); }
.tok-com { color: var(--color-text-disabled); }

/* ---------- Tables (MCP docs) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); background: var(--color-surface); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc-table th {
  text-align: left; padding: 10px 16px;
  background: var(--color-surface-sunken);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.doc-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.doc-table tr:last-child td { border-bottom: none; }
.doc-table code { font-family: var(--font-mono); font-size: 13px; color: var(--color-tech-strong); background: var(--color-tech-soft); border-radius: var(--radius-sm); padding: 1px 6px; white-space: nowrap; }
.doc-table .cell-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

/* ---------- Steps ---------- */
.step { display: flex; gap: var(--space-md); margin-bottom: var(--space-xl); }
.step-num {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-full);
  background: var(--color-tech-soft); color: var(--color-tech-strong);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.step-body { flex: 1; min-width: 0; }
.step-body h3 { font-size: 18px; margin-bottom: var(--space-xs); }
.step-body > p { font-size: 14px; color: var(--color-text-secondary); margin-bottom: var(--space-sm); }

/* ---------- Status Banner ---------- */
.status-banner {
  display: flex; align-items: flex-start; gap: var(--space-md);
  background: var(--color-surface);
  border: 1.5px dashed var(--badge-planned-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.status-banner .sb-icon {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  background: var(--color-surface-sunken); color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.status-banner p { font-size: 14px; color: var(--color-text-secondary); }
.status-banner .sb-title { font-weight: 600; color: var(--color-text-primary); font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: var(--space-2xl);
}
.site-footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  font-size: 13px; color: var(--color-text-secondary);
}
.site-footer-inner .spacer { flex: 1; }
.site-footer a { color: var(--color-text-secondary); }
.site-footer a:hover { color: var(--color-primary); }
.footer-links { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }

/* ---------- Utility ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-sm); }
.row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.muted { color: var(--color-text-secondary); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet: 640-1023px sidebar collapses to icon rail */
@media (max-width: 1023px) {
  .sidebar { width: 68px; }
  .brand { justify-content: center; padding: 0; }
  .brand-text, .nav-group-label, .nav-text, .mcp-mini { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item.is-active::before { top: 8px; bottom: 8px; }
  .sidebar-foot { flex-direction: column; align-items: center; }
  .main { margin-left: 68px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid { grid-template-columns: 1fr; }
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: < 640px top bar + drawer */
@media (max-width: 639px) {
  /* visibility:hidden keeps the off-canvas drawer out of the tab order */
  .sidebar { transform: translateX(-100%); visibility: hidden; width: 240px; box-shadow: none; }
  .sidebar.open { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-overlay); }
  .sidebar .brand-text, .sidebar .nav-group-label, .sidebar .nav-text, .sidebar .mcp-mini { display: flex; }
  .sidebar .nav-item { justify-content: flex-start; padding: 0 12px; }
  .main { margin-left: 0; }
  .topbar { display: flex; }
  .main-inner { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .hero-grid, .grid-2, .pager { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .principles-grid { grid-template-columns: 1fr; }
  .display { font-size: 32px; }
  .h1, .article-title { font-size: 26px; }
}

/* Wide: >= 1440px main content centered, larger side gutters */
@media (min-width: 1440px) {
  .main-inner { max-width: 1200px; }
}

/* ============================================================
   Landing Graphics
   ============================================================ */

/* Signature hero panorama (warm stories | cool ethics) */
.hero-visual {
  position: relative;
  margin: 0 0 var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-raised);
  line-height: 0;
}
.hero-visual svg { width: 100%; height: clamp(170px, 24vw, 290px); }

/* Zone-card corner watermark (sun = warm / node-grid = cool) */
.zone-watermark {
  position: absolute; right: -34px; bottom: -34px;
  width: 190px; height: 190px;
  pointer-events: none;
}
.zone-card--warm .zone-watermark { color: var(--color-warm-primary); opacity: 0.10; }
.zone-card--tech .zone-watermark { color: var(--color-tech-primary); opacity: 0.10; }
.zone-card > *:not(.zone-watermark) { position: relative; z-index: 1; }

/* Stat cards: icon chip + corner glow */
.stat-label { gap: 8px; }
.stat-chip {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.stat-card--warm .stat-chip { background: var(--color-warm-soft); color: var(--color-warm-primary); }
.stat-card--tech .stat-chip { background: var(--color-tech-soft); color: var(--color-tech-primary); }
.stat-card > * { position: relative; z-index: 1; }
.stat-card::after {
  content: ""; position: absolute; right: -46px; top: -46px; z-index: 0;
  width: 152px; height: 152px; border-radius: 50%;
  pointer-events: none;
}
.stat-card--warm::after { background: radial-gradient(circle, rgba(217, 119, 6, 0.15), transparent 68%); }
.stat-card--tech::after { background: radial-gradient(circle, rgba(2, 132, 199, 0.15), transparent 68%); }
[data-theme="dark"] .stat-card--warm::after { background: radial-gradient(circle, rgba(245, 166, 35, 0.20), transparent 68%); }
[data-theme="dark"] .stat-card--tech::after { background: radial-gradient(circle, rgba(56, 189, 248, 0.20), transparent 68%); }

/* Small screens: shrink the decorative graphics */
@media (max-width: 639px) {
  .hero-visual svg { height: clamp(150px, 46vw, 220px); }
  .zone-watermark { width: 132px; height: 132px; right: -22px; bottom: -22px; }
}

/* ============================================================
   Warmth Layer — the site should feel warm and welcoming
   Cream paper wash · serif reading type · warm zone panels
   (Additive only: dual-zone colour strategy + navy brand anchor untouched)
   ============================================================ */

/* Soft paper wash: two very low-opacity warm glows. Zero external assets. */
body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(1150px 540px at 10% -10%, rgba(245, 158, 11, 0.065), transparent 60%),
    radial-gradient(950px 480px at 92% -6%, rgba(59, 110, 181, 0.055), transparent 58%);
  background-repeat: no-repeat;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(1150px 540px at 10% -10%, rgba(245, 166, 35, 0.075), transparent 60%),
    radial-gradient(950px 480px at 92% -6%, rgba(147, 183, 228, 0.06), transparent 58%);
}

/* Serif on human-facing reading surfaces; the technical zone stays sans + mono.
   Warmth lives where the stories are; precision stays where the specs are. */
.display,
.article-title,
.article-body p,
.story-title,
.pager .pt,
.zone-card--warm h2 { font-family: var(--font-serif); }
.display { letter-spacing: -0.012em; }

/* Slightly larger, airier story prose — a page that invites you to stay */
.article-body p { font-size: 17px; line-height: 2.0; }
.article-body p:first-of-type { font-size: 19px; }

/* Zone panels get a soft tinted panel instead of flat white */
.zone-card--warm { background: var(--color-warm-card-bg); }
.zone-card--tech { background: var(--color-tech-card-bg); }

/* More breathing room and a friendlier reading width in the page header */
.page-head { margin-bottom: var(--space-2xl); }
.page-head-sub { font-size: 15px; line-height: 1.8; max-width: 660px; }

/* Cards feel softer and warmer on hover */
.card, .zone-card, .stat-card, .story-card { transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.card:hover { border-color: var(--color-border-strong); }

/* ============================================================
   Accessibility layer
   ============================================================ */

/* Skip link — first focusable element on every page */
.skip-link {
  position: fixed;
  left: var(--space-md);
  top: -120px;
  z-index: 400;
  background: var(--color-primary);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600;
  text-decoration: none !important;
  box-shadow: var(--shadow-float);
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-md); }
.skip-link:hover { color: #FFFFFF; }

/* Emphasised dual-audience words (replaces inline style attributes) */
.warm-em { color: var(--color-warm-strong); }
.tech-em { color: var(--color-tech-strong); }

/* Quiet explanatory line under a section heading */
.section-note {
  font-size: 13px; line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 720px;
  margin: calc(var(--space-sm) * -1) 0 var(--space-lg);
}

/* ------------------------------------------------------------
   Daily feed (Ethics for AI MCP).
   A seven-day module cycle. Colour is never the only signal - the
   module code is always written out - so the accents only have to be
   distinguishable from each other, not legible as text.
   ------------------------------------------------------------ */
.feed-cycle { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.feed-day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--fd-accent, var(--color-tech-primary));
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.feed-day .fd-name {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.feed-day .fd-mod {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--color-text-primary);
}
.feed-day .fd-kind { font-size: 11px; line-height: 1.45; color: var(--color-text-secondary); }
.feed-day .fd-kind em { font-style: normal; color: var(--color-tech-strong); }
.feed-day--m1 { --fd-accent: #16305C; }
.feed-day--m2 { --fd-accent: #2A4E8C; }
.feed-day--m3 { --fd-accent: #3B6EB5; }
.feed-day--m4 { --fd-accent: #5E8AC7; }
.feed-day--all { --fd-accent: #D97706; }
.feed-day--featured { box-shadow: var(--focus-ring); }

[data-theme="dark"] .feed-day--m1 { --fd-accent: #B9D2F0; }
[data-theme="dark"] .feed-day--m2 { --fd-accent: #93B7E4; }
[data-theme="dark"] .feed-day--m3 { --fd-accent: #6E97D0; }
[data-theme="dark"] .feed-day--m4 { --fd-accent: #5E8AC7; }
[data-theme="dark"] .feed-day--all { --fd-accent: #FBBF24; }

.mod-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mod-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mod-swatch--m1 { background: #16305C; }
.mod-swatch--m2 { background: #2A4E8C; }
.mod-swatch--m3 { background: #3B6EB5; }
.mod-swatch--m4 { background: #5E8AC7; }
.mod-swatch--all { background: #D97706; }
[data-theme="dark"] .mod-swatch--m1 { background: #B9D2F0; }
[data-theme="dark"] .mod-swatch--m2 { background: #93B7E4; }
[data-theme="dark"] .mod-swatch--m3 { background: #6E97D0; }
[data-theme="dark"] .mod-swatch--m4 { background: #5E8AC7; }
[data-theme="dark"] .mod-swatch--all { background: #FBBF24; }

@media (max-width: 1180px) { .feed-cycle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .feed-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Motion respects the visitor's system preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .story-card:hover { transform: none; }
  .theme-toggle:active { transform: none; }
}


/* ============================================================
   Nature layer — the site should read as a living landscape.
   Every motif is an inline data-URI SVG, so the project keeps its
   zero-external-dependency rule: no network request is ever made.
   ============================================================ */

/* 1 · Ridge line above the footer (every page) */
.site-footer::before {
  content: "";
  display: block;
  height: 74px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%2080'%3E%3Cpath%20d='M0%2080%20L0%2044%20C110%2018%20210%2056%20330%2042%20C455%2027%20545%206%20690%2028%20C812%2047%20930%2020%201050%2039%20C1120%2050%201165%2043%201200%2034%20L1200%2080%20Z'%20fill='%233B6EB5'%20fill-opacity='.13'/%3E%3Cpath%20d='M0%2080%20L0%2060%20C140%2042%20262%2069%20400%2057%20C540%2045%20640%2028%20780%2047%20C900%2063%201010%2045%201120%2057%20C1160%2061%201180%2059%201200%2055%20L1200%2080%20Z'%20fill='%23F59E0B'%20fill-opacity='.14'/%3E%3Cpath%20d='M0%2080%20L0%2071%20C160%2061%20300%2076%20440%2067%20C600%2057%20720%2072%20860%2066%20C980%2061%201080%2070%201200%2063%20L1200%2080%20Z'%20fill='%231F3C6E'%20fill-opacity='.10'/%3E%3Cg%20fill='%23B45309'%20fill-opacity='.30'%3E%3Cpath%20d='M148%2047%20l5%20-13%20l5%2013%20z'/%3E%3Cpath%20d='M163%2049%20l4%20-9%20l4%209%20z'/%3E%3Cpath%20d='M392%2056%20l5%20-11%20l5%2011%20z'/%3E%3Cpath%20d='M700%2044%20l5%20-12%20l5%2012%20z'/%3E%3Cpath%20d='M716%2046%20l3%20-8%20l3%208%20z'/%3E%3Cpath%20d='M968%2056%20l4%20-10%20l4%2010%20z'/%3E%3Cpath%20d='M1082%2055%20l5%20-12%20l5%2012%20z'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%237C2D12'%20stroke-opacity='.34'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M540%2026c4-4%209-4%2013%200'/%3E%3Cpath%20d='M562%2018c4-4%209-4%2013%200'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 2 · Leaf sprig beside every section heading, tinted by zone */
.section-head h2::before {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 10px;
  vertical-align: -2px;
  background-color: var(--color-warm-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21.2%203.2C21.4%2013%2014.2%2020.6%204.4%2020.8%204.2%2011%2011.4%203.4%2021.2%203.2z'%20fill='%23fff'/%3E%3Cpath%20d='M4.6%2020.6C9.4%2015%2014.6%209.4%2020.6%204.6'%20stroke='%23000'%20stroke-width='1.15'%20fill='none'/%3E%3Cpath%20d='M9.4%2014.8c2.4-.4%204.5-1.6%205.9-3.4M12.6%2017.4c2-.3%203.8-1.3%205-2.8'%20stroke='%23000'%20stroke-width='.95'%20fill='none'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21.2%203.2C21.4%2013%2014.2%2020.6%204.4%2020.8%204.2%2011%2011.4%203.4%2021.2%203.2z'%20fill='%23fff'/%3E%3Cpath%20d='M4.6%2020.6C9.4%2015%2014.6%209.4%2020.6%204.6'%20stroke='%23000'%20stroke-width='1.15'%20fill='none'/%3E%3Cpath%20d='M9.4%2014.8c2.4-.4%204.5-1.6%205.9-3.4M12.6%2017.4c2-.3%203.8-1.3%205-2.8'%20stroke='%23000'%20stroke-width='.95'%20fill='none'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.section--tech .section-head h2::before { background-color: var(--color-tech-primary); }

/* 3 · Topographic contours behind the page header, tinted by the brand blue */
.page-head { position: relative; }
.page-head::after {
  content: "";
  position: absolute;
  right: -20px; top: -26px;
  width: 300px; height: 190px;
  pointer-events: none;
  z-index: 0;
  background-color: var(--color-primary);
  opacity: 0.11;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%20200'%3E%3Cpath%20d='M142.3%2092.0L143.6%2094.8L143.4%2097.6L141.7%20100.1L139.1%20102.2L136.1%20104.0L133.2%20105.5L130.5%20107.0L127.8%20108.5L124.8%20109.6L121.5%20110.1L118.2%20110.1L115.0%20109.7L112.0%20109.2L109.1%20109.2L106.0%20109.7L102.3%20110.4L98.3%20110.9L94.2%20110.6L90.6%20109.4L88.0%20107.3L86.5%20104.7L85.7%20101.9L85.2%2099.3L84.8%2096.8L84.4%2094.4L84.4%2092.0L85.0%2089.6L86.5%2087.5L88.6%2085.6L90.6%2083.9L92.3%2082.2L93.5%2080.2L94.4%2077.7L95.6%2074.9L97.7%2072.3L100.6%2070.4L104.3%2069.5L108.2%2069.5L112.0%2070.3L115.5%2071.3L118.7%2072.3L121.9%2073.2L124.9%2074.3L127.6%2075.8L129.6%2077.7L131.1%2079.8L132.1%2082.0L133.1%2084.0L134.8%2085.8L137.1%2087.5L139.9%2089.6Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M166.0%2092.0L168.4%2096.9L168.0%20101.9L165.1%20106.5L160.4%20110.3L155.1%20113.4L149.9%20116.2L145.1%20118.9L140.2%20121.4L134.8%20123.3L129.0%20124.4L123.1%20124.3L117.3%20123.5L112.0%20122.8L106.8%20122.7L101.2%20123.5L94.7%20124.8L87.5%20125.7L80.1%20125.2L73.8%20123.1L69.2%20119.3L66.4%20114.7L65.0%20109.8L64.2%20105.1L63.4%20100.6L62.7%2096.3L62.6%2092.0L63.8%2087.8L66.5%2083.9L70.1%2080.6L73.8%2077.6L76.8%2074.5L78.9%2070.9L80.6%2066.4L82.8%2061.5L86.4%2056.8L91.7%2053.4L98.2%2051.8L105.2%2051.9L112.0%2053.2L118.2%2055.1L124.0%2056.8L129.6%2058.5L135.0%2060.4L139.8%2063.0L143.5%2066.4L146.0%2070.3L147.8%2074.2L149.8%2077.7L152.7%2080.9L156.9%2084.0L161.7%2087.7Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M189.8%2092.0L193.2%2099.1L192.7%20106.3L188.4%20112.9L181.6%20118.3L174.0%20122.8L166.6%20126.8L159.6%20130.7L152.6%20134.3L144.9%20137.1L136.5%20138.6L127.9%20138.5L119.7%20137.4L112.0%20136.4L104.5%20136.3L96.4%20137.4L87.1%20139.2L76.7%20140.5L66.1%20139.8L57.0%20136.7L50.3%20131.4L46.3%20124.6L44.4%20117.6L43.2%20110.8L42.0%20104.4L41.0%2098.2L40.9%2092.0L42.6%2085.9L46.5%2080.4L51.7%2075.5L57.1%2071.2L61.4%2066.8L64.3%2061.6L66.7%2055.2L69.9%2048.1L75.1%2041.4L82.7%2036.4L92.2%2034.1L102.3%2034.2L112.0%2036.2L121.0%2038.8L129.3%2041.4L137.4%2043.8L145.1%2046.6L152.0%2050.3L157.4%2055.1L161.0%2060.7L163.6%2066.4L166.4%2071.5L170.6%2076.0L176.6%2080.5L183.6%2085.7Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M213.6%2092.0L218.0%20101.3L217.3%20110.7L211.7%20119.2L202.9%20126.4L193.0%20132.2L183.3%20137.5L174.2%20142.5L165.0%20147.2L155.0%20150.9L144.0%20152.8L132.8%20152.7L122.0%20151.3L112.0%20149.9L102.3%20149.8L91.7%20151.3L79.5%20153.7L65.9%20155.3L52.1%20154.5L40.2%20150.4L31.5%20143.4L26.3%20134.6L23.7%20125.4L22.1%20116.5L20.7%20108.2L19.3%20100.1L19.2%2092.0L21.5%2084.1L26.4%2076.8L33.3%2070.5L40.3%2064.9L45.9%2059.2L49.8%2052.3L52.9%2044.0L57.0%2034.7L63.8%2025.9L73.8%2019.4L86.1%2016.3L99.3%2016.6L112.0%2019.1L123.7%2022.6L134.6%2025.9L145.2%2029.1L155.2%2032.7L164.2%2037.5L171.2%2043.9L176.0%2051.2L179.4%2058.5L183.0%2065.2L188.5%2071.1L196.3%2077.0L205.5%2083.8Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M292.7%20118.0L290.1%20120.2L288.3%20122.1L287.0%20124.1L285.5%20125.9L283.1%20127.3L280.2%20128.3L277.8%20129.4L276.3%20131.2L275.1%20133.9L273.2%20136.8L270.0%20138.7L266.0%20138.9L262.0%20137.6L258.6%20136.0L255.5%20134.8L252.5%20134.0L249.7%20133.1L247.4%20131.5L245.9%20129.7L244.2%20128.1L241.3%20127.1L237.1%20126.4L232.6%20125.1L229.7%20123.1L229.4%20120.5L231.3%20118.0L233.9%20115.8L235.7%20113.9L237.0%20111.9L238.5%20110.1L240.9%20108.7L243.8%20107.7L246.2%20106.6L247.7%20104.8L248.9%20102.1L250.8%2099.2L254.0%2097.3L258.0%2097.1L262.0%2098.4L265.4%20100.0L268.5%20101.2L271.5%20102.0L274.3%20102.9L276.6%20104.5L278.1%20106.3L279.8%20107.9L282.7%20108.9L286.9%20109.6L291.4%20110.9L294.3%20112.9L294.6%20115.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M316.7%20118.0L312.2%20121.9L308.9%20125.4L306.7%20128.8L304.0%20132.1L299.7%20134.7L294.5%20136.4L290.2%20138.4L287.5%20141.6L285.3%20146.5L281.9%20151.6L276.2%20155.0L269.1%20155.2L262.0%20153.0L255.9%20150.2L250.4%20148.0L245.0%20146.6L240.0%20144.9L236.0%20142.1L233.2%20138.8L230.2%20136.0L225.1%20134.3L217.5%20132.9L209.5%20130.8L204.2%20127.1L203.8%20122.5L207.3%20118.0L211.8%20114.1L215.1%20110.6L217.3%20107.2L220.0%20103.9L224.3%20101.3L229.5%2099.6L233.8%2097.6L236.5%2094.4L238.7%2089.5L242.1%2084.4L247.8%2081.0L254.9%2080.8L262.0%2083.0L268.1%2085.8L273.6%2088.0L279.0%2089.4L284.0%2091.1L288.0%2093.9L290.8%2097.2L293.8%20100.0L298.9%20101.7L306.5%20103.1L314.5%20105.2L319.8%20108.9L320.2%20113.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M340.8%20118.0L334.3%20123.6L329.5%20128.7L326.4%20133.6L322.5%20138.3L316.3%20142.0L308.8%20144.6L302.6%20147.3L298.7%20152.0L295.6%20159.0L290.7%20166.4L282.5%20171.2L272.2%20171.6L262.0%20168.4L253.2%20164.3L245.4%20161.2L237.6%20159.2L230.3%20156.7L224.5%20152.8L220.5%20148.0L216.2%20144.0L208.9%20141.5L197.9%20139.5L186.3%20136.4L178.8%20131.1L178.2%20124.5L183.2%20118.0L189.7%20112.4L194.5%20107.3L197.6%20102.4L201.5%2097.7L207.7%2094.0L215.2%2091.4L221.4%2088.7L225.3%2084.0L228.4%2077.0L233.3%2069.6L241.5%2064.8L251.8%2064.4L262.0%2067.6L270.8%2071.7L278.6%2074.8L286.4%2076.8L293.7%2079.3L299.5%2083.2L303.5%2088.0L307.8%2092.0L315.1%2094.5L326.1%2096.5L337.7%2099.6L345.2%20104.9L345.8%20111.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M364.9%20118.0L356.4%20125.3L350.2%20131.9L346.0%20138.4L341.0%20144.5L332.9%20149.3L323.2%20152.7L315.0%20156.3L309.9%20162.4L305.9%20171.5L299.5%20181.2L288.8%20187.5L275.3%20188.0L262.0%20183.9L250.5%20178.4L240.3%20174.4L230.1%20171.8L220.6%20168.5L213.1%20163.4L207.8%20157.1L202.2%20151.9L192.7%20148.6L178.4%20146.1L163.2%20142.0L153.4%20135.1L152.6%20126.5L159.1%20118.0L167.6%20110.7L173.8%20104.1L178.0%2097.6L183.0%2091.5L191.1%2086.7L200.8%2083.3L209.0%2079.7L214.1%2073.6L218.1%2064.5L224.5%2054.8L235.2%2048.5L248.7%2048.0L262.0%2052.1L273.5%2057.6L283.7%2061.6L293.9%2064.2L303.4%2067.5L310.9%2072.6L316.2%2078.9L321.8%2084.1L331.3%2087.4L345.6%2089.9L360.8%2094.0L370.6%20100.9L371.4%20109.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20360%20200'%3E%3Cpath%20d='M142.3%2092.0L143.6%2094.8L143.4%2097.6L141.7%20100.1L139.1%20102.2L136.1%20104.0L133.2%20105.5L130.5%20107.0L127.8%20108.5L124.8%20109.6L121.5%20110.1L118.2%20110.1L115.0%20109.7L112.0%20109.2L109.1%20109.2L106.0%20109.7L102.3%20110.4L98.3%20110.9L94.2%20110.6L90.6%20109.4L88.0%20107.3L86.5%20104.7L85.7%20101.9L85.2%2099.3L84.8%2096.8L84.4%2094.4L84.4%2092.0L85.0%2089.6L86.5%2087.5L88.6%2085.6L90.6%2083.9L92.3%2082.2L93.5%2080.2L94.4%2077.7L95.6%2074.9L97.7%2072.3L100.6%2070.4L104.3%2069.5L108.2%2069.5L112.0%2070.3L115.5%2071.3L118.7%2072.3L121.9%2073.2L124.9%2074.3L127.6%2075.8L129.6%2077.7L131.1%2079.8L132.1%2082.0L133.1%2084.0L134.8%2085.8L137.1%2087.5L139.9%2089.6Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M166.0%2092.0L168.4%2096.9L168.0%20101.9L165.1%20106.5L160.4%20110.3L155.1%20113.4L149.9%20116.2L145.1%20118.9L140.2%20121.4L134.8%20123.3L129.0%20124.4L123.1%20124.3L117.3%20123.5L112.0%20122.8L106.8%20122.7L101.2%20123.5L94.7%20124.8L87.5%20125.7L80.1%20125.2L73.8%20123.1L69.2%20119.3L66.4%20114.7L65.0%20109.8L64.2%20105.1L63.4%20100.6L62.7%2096.3L62.6%2092.0L63.8%2087.8L66.5%2083.9L70.1%2080.6L73.8%2077.6L76.8%2074.5L78.9%2070.9L80.6%2066.4L82.8%2061.5L86.4%2056.8L91.7%2053.4L98.2%2051.8L105.2%2051.9L112.0%2053.2L118.2%2055.1L124.0%2056.8L129.6%2058.5L135.0%2060.4L139.8%2063.0L143.5%2066.4L146.0%2070.3L147.8%2074.2L149.8%2077.7L152.7%2080.9L156.9%2084.0L161.7%2087.7Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M189.8%2092.0L193.2%2099.1L192.7%20106.3L188.4%20112.9L181.6%20118.3L174.0%20122.8L166.6%20126.8L159.6%20130.7L152.6%20134.3L144.9%20137.1L136.5%20138.6L127.9%20138.5L119.7%20137.4L112.0%20136.4L104.5%20136.3L96.4%20137.4L87.1%20139.2L76.7%20140.5L66.1%20139.8L57.0%20136.7L50.3%20131.4L46.3%20124.6L44.4%20117.6L43.2%20110.8L42.0%20104.4L41.0%2098.2L40.9%2092.0L42.6%2085.9L46.5%2080.4L51.7%2075.5L57.1%2071.2L61.4%2066.8L64.3%2061.6L66.7%2055.2L69.9%2048.1L75.1%2041.4L82.7%2036.4L92.2%2034.1L102.3%2034.2L112.0%2036.2L121.0%2038.8L129.3%2041.4L137.4%2043.8L145.1%2046.6L152.0%2050.3L157.4%2055.1L161.0%2060.7L163.6%2066.4L166.4%2071.5L170.6%2076.0L176.6%2080.5L183.6%2085.7Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M213.6%2092.0L218.0%20101.3L217.3%20110.7L211.7%20119.2L202.9%20126.4L193.0%20132.2L183.3%20137.5L174.2%20142.5L165.0%20147.2L155.0%20150.9L144.0%20152.8L132.8%20152.7L122.0%20151.3L112.0%20149.9L102.3%20149.8L91.7%20151.3L79.5%20153.7L65.9%20155.3L52.1%20154.5L40.2%20150.4L31.5%20143.4L26.3%20134.6L23.7%20125.4L22.1%20116.5L20.7%20108.2L19.3%20100.1L19.2%2092.0L21.5%2084.1L26.4%2076.8L33.3%2070.5L40.3%2064.9L45.9%2059.2L49.8%2052.3L52.9%2044.0L57.0%2034.7L63.8%2025.9L73.8%2019.4L86.1%2016.3L99.3%2016.6L112.0%2019.1L123.7%2022.6L134.6%2025.9L145.2%2029.1L155.2%2032.7L164.2%2037.5L171.2%2043.9L176.0%2051.2L179.4%2058.5L183.0%2065.2L188.5%2071.1L196.3%2077.0L205.5%2083.8Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M292.7%20118.0L290.1%20120.2L288.3%20122.1L287.0%20124.1L285.5%20125.9L283.1%20127.3L280.2%20128.3L277.8%20129.4L276.3%20131.2L275.1%20133.9L273.2%20136.8L270.0%20138.7L266.0%20138.9L262.0%20137.6L258.6%20136.0L255.5%20134.8L252.5%20134.0L249.7%20133.1L247.4%20131.5L245.9%20129.7L244.2%20128.1L241.3%20127.1L237.1%20126.4L232.6%20125.1L229.7%20123.1L229.4%20120.5L231.3%20118.0L233.9%20115.8L235.7%20113.9L237.0%20111.9L238.5%20110.1L240.9%20108.7L243.8%20107.7L246.2%20106.6L247.7%20104.8L248.9%20102.1L250.8%2099.2L254.0%2097.3L258.0%2097.1L262.0%2098.4L265.4%20100.0L268.5%20101.2L271.5%20102.0L274.3%20102.9L276.6%20104.5L278.1%20106.3L279.8%20107.9L282.7%20108.9L286.9%20109.6L291.4%20110.9L294.3%20112.9L294.6%20115.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M316.7%20118.0L312.2%20121.9L308.9%20125.4L306.7%20128.8L304.0%20132.1L299.7%20134.7L294.5%20136.4L290.2%20138.4L287.5%20141.6L285.3%20146.5L281.9%20151.6L276.2%20155.0L269.1%20155.2L262.0%20153.0L255.9%20150.2L250.4%20148.0L245.0%20146.6L240.0%20144.9L236.0%20142.1L233.2%20138.8L230.2%20136.0L225.1%20134.3L217.5%20132.9L209.5%20130.8L204.2%20127.1L203.8%20122.5L207.3%20118.0L211.8%20114.1L215.1%20110.6L217.3%20107.2L220.0%20103.9L224.3%20101.3L229.5%2099.6L233.8%2097.6L236.5%2094.4L238.7%2089.5L242.1%2084.4L247.8%2081.0L254.9%2080.8L262.0%2083.0L268.1%2085.8L273.6%2088.0L279.0%2089.4L284.0%2091.1L288.0%2093.9L290.8%2097.2L293.8%20100.0L298.9%20101.7L306.5%20103.1L314.5%20105.2L319.8%20108.9L320.2%20113.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M340.8%20118.0L334.3%20123.6L329.5%20128.7L326.4%20133.6L322.5%20138.3L316.3%20142.0L308.8%20144.6L302.6%20147.3L298.7%20152.0L295.6%20159.0L290.7%20166.4L282.5%20171.2L272.2%20171.6L262.0%20168.4L253.2%20164.3L245.4%20161.2L237.6%20159.2L230.3%20156.7L224.5%20152.8L220.5%20148.0L216.2%20144.0L208.9%20141.5L197.9%20139.5L186.3%20136.4L178.8%20131.1L178.2%20124.5L183.2%20118.0L189.7%20112.4L194.5%20107.3L197.6%20102.4L201.5%2097.7L207.7%2094.0L215.2%2091.4L221.4%2088.7L225.3%2084.0L228.4%2077.0L233.3%2069.6L241.5%2064.8L251.8%2064.4L262.0%2067.6L270.8%2071.7L278.6%2074.8L286.4%2076.8L293.7%2079.3L299.5%2083.2L303.5%2088.0L307.8%2092.0L315.1%2094.5L326.1%2096.5L337.7%2099.6L345.2%20104.9L345.8%20111.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3Cpath%20d='M364.9%20118.0L356.4%20125.3L350.2%20131.9L346.0%20138.4L341.0%20144.5L332.9%20149.3L323.2%20152.7L315.0%20156.3L309.9%20162.4L305.9%20171.5L299.5%20181.2L288.8%20187.5L275.3%20188.0L262.0%20183.9L250.5%20178.4L240.3%20174.4L230.1%20171.8L220.6%20168.5L213.1%20163.4L207.8%20157.1L202.2%20151.9L192.7%20148.6L178.4%20146.1L163.2%20142.0L153.4%20135.1L152.6%20126.5L159.1%20118.0L167.6%20110.7L173.8%20104.1L178.0%2097.6L183.0%2091.5L191.1%2086.7L200.8%2083.3L209.0%2079.7L214.1%2073.6L218.1%2064.5L224.5%2054.8L235.2%2048.5L248.7%2048.0L262.0%2052.1L273.5%2057.6L283.7%2061.6L293.9%2064.2L303.4%2067.5L310.9%2072.6L316.2%2078.9L321.8%2084.1L331.3%2087.4L345.6%2089.9L360.8%2094.0L370.6%20100.9L371.4%20109.5Z'%20fill='none'%20stroke='%23fff'%20stroke-width='1.4'%20stroke-opacity='.7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center right; mask-position: center right;
  -webkit-mask-size: contain;     mask-size: contain;
}
.page-head > * { position: relative; z-index: 1; }

/* Keep decorations out of the way on small screens */
@media (max-width: 1023px) { .page-head::after { display: none; } }
@media (max-width: 639px)  { .site-footer::before { height: 52px; } }