/* peruvian.dev — shared design system (tokens, themes, base components, nav) */
:root {
  /* Liquid Glass — macOS-style light vibrancy: frosted white panels floating over a soft grey desktop */
  --bg-0: #e9ebf1;
  --ink: #15161b;
  --ink-dim: #3c3e46;
  --mute: #6b6d78;
  --mute-2: #93959e;
  --accent: #ff4258;
  --accent-2: #ff6a4d;
  --surface-tint: #ffffff;
  --shadow-tint: #1b1d28;
  --glass-blur: 26px;
  --glass-sat: 180%;
  --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --r-btn: 10px;
  --border-w: 1px;
  --heading-tracking: -0.022em;
  --body-tracking: -0.006em;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --green: #34d399;
  --btn-primary-ink: #fff;
  --icon-filter: invert(1);

  --line: color-mix(in srgb, var(--ink) 9%, transparent);
  --line-2: color-mix(in srgb, var(--ink) 15%, transparent);
  --glass-border: color-mix(in srgb, var(--ink) 13%, transparent);
  --glass-border-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --panel-grad: linear-gradient(158deg, color-mix(in srgb, var(--surface-tint) 11%, transparent), color-mix(in srgb, var(--surface-tint) 2%, transparent) 60%);
  --panel-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--surface-tint) 20%, transparent), inset 0 0 60px color-mix(in srgb, var(--surface-tint) 4%, transparent), 0 24px 60px color-mix(in srgb, var(--shadow-tint) 38%, transparent);
  --card-grad: linear-gradient(160deg, color-mix(in srgb, var(--surface-tint) 9%, transparent), color-mix(in srgb, var(--surface-tint) 1.5%, transparent) 65%);
  --card-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--surface-tint) 16%, transparent), 0 14px 34px color-mix(in srgb, var(--shadow-tint) 28%, transparent);
  --card-shadow-hover: inset 0 1.5px 0 color-mix(in srgb, var(--surface-tint) 22%, transparent), 0 26px 56px color-mix(in srgb, var(--shadow-tint) 42%, transparent);
  --btn-grad: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 18%, transparent), color-mix(in srgb, var(--surface-tint) 3%, transparent));
  --btn-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--surface-tint) 34%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--shadow-tint) 25%, transparent), 0 10px 26px color-mix(in srgb, var(--shadow-tint) 30%, transparent);
  --btn-shadow-hover: inset 0 1px 0 color-mix(in srgb, var(--surface-tint) 36%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--shadow-tint) 25%, transparent), 0 16px 36px color-mix(in srgb, var(--shadow-tint) 40%, transparent);
  --btn-primary-grad: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent));
  --btn-primary-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), inset 0 -1px 0 color-mix(in srgb, black 20%, transparent), 0 14px 32px color-mix(in srgb, var(--accent) 35%, transparent);
  --btn-primary-shadow-hover: inset 0 1px 0 color-mix(in srgb, white 50%, transparent), inset 0 -1px 0 color-mix(in srgb, black 20%, transparent), 0 18px 40px color-mix(in srgb, var(--accent) 45%, transparent);
  --nav-bg: color-mix(in srgb, var(--bg-0) 62%, transparent);
  --tile-grad: linear-gradient(160deg, color-mix(in srgb, var(--surface-tint) 9%, transparent), color-mix(in srgb, var(--surface-tint) 2%, transparent));
  --pill-grad: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 8%, transparent), color-mix(in srgb, var(--surface-tint) 2%, transparent));
  --soc-bg: color-mix(in srgb, var(--surface-tint) 5%, transparent);
  --soc-bg-hover: color-mix(in srgb, var(--surface-tint) 10%, transparent);
  --chip-open-bg: color-mix(in srgb, var(--surface-tint) 8%, transparent);
  --heat-l1: color-mix(in srgb, var(--accent) 35%, var(--shadow-tint));
  --heat-l2: color-mix(in srgb, var(--accent) 60%, var(--shadow-tint));
  --heat-l3: color-mix(in srgb, var(--accent) 85%, var(--shadow-tint));
  --heat-l4: var(--accent);
  --heat-glow: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ---- 10 additional business-ready styles ---- */
:root[data-theme="corporate"] {
  --bg-0: #f4f6fa; --ink: #10172a; --ink-dim: #33405c; --mute: #64708a; --mute-2: #8a93a8;
  --accent: #1e4fd6; --accent-2: #3f7cf0; --surface-tint: #ffffff; --shadow-tint: #17213e;
  --glass-blur: 8px; --glass-sat: 110%; --r-lg: 16px; --r-md: 12px; --r-sm: 8px; --r-btn: 8px;
  --heading-tracking: -0.02em; --icon-filter: invert(1);
}
:root[data-theme="boutique"] {
  --bg-0: #f7f1e8; --ink: #2b1d12; --ink-dim: #4a3624; --mute: #7a6650; --mute-2: #9c8b76;
  --accent: #c1552c; --accent-2: #e08a4f; --surface-tint: #fffaf3; --shadow-tint: #3a2a1a;
  --glass-blur: 14px; --glass-sat: 130%; --r-lg: 32px; --r-md: 24px; --r-sm: 16px; --r-btn: 999px;
  --heading-tracking: -0.005em; --icon-filter: invert(1);
  --display: ui-serif, Georgia, 'Times New Roman', serif;
}
:root[data-theme="startup"] {
  --bg-0: #0a0a14; --ink: #f2f1fb; --ink-dim: #cfccec; --mute: #928fc2; --mute-2: #6b6896;
  --accent: #7c5cff; --accent-2: #40c9ff; --surface-tint: #b9aaff; --shadow-tint: #000000;
  --glass-blur: 24px; --glass-sat: 190%; --r-lg: 24px; --r-md: 18px; --r-sm: 12px; --r-btn: 12px;
  --heading-tracking: -0.02em;
}
:root[data-theme="luxury"] {
  --bg-0: #0c0b09; --ink: #f3ecd9; --ink-dim: #d8cba3; --mute: #a89b78; --mute-2: #756a4e;
  --accent: #b4863a; --accent-2: #e9cd8a; --surface-tint: #e9cd8a; --shadow-tint: #000000;
  --glass-blur: 16px; --glass-sat: 120%; --r-lg: 10px; --r-md: 8px; --r-sm: 6px; --r-btn: 4px;
  --heading-tracking: 0em;
  --display: ui-serif, Georgia, 'Times New Roman', serif;
}
:root[data-theme="vibrant"] {
  --bg-0: #fdf5f0; --ink: #1c1530; --ink-dim: #392a54; --mute: #6f6089; --mute-2: #9a8fb3;
  --accent: #ff5c8a; --accent-2: #6a5cff; --surface-tint: #ffffff; --shadow-tint: #3a1a4a;
  --glass-blur: 18px; --glass-sat: 160%; --r-lg: 30px; --r-md: 22px; --r-sm: 16px; --r-btn: 999px;
  --heading-tracking: -0.02em; --icon-filter: invert(1);
}
:root[data-theme="hacker"] {
  --bg-0: #030503; --ink: #baffc9; --ink-dim: #7fe89a; --mute: #4b9d61; --mute-2: #2f6b40;
  --accent: #00ff66; --accent-2: #7dffb0; --surface-tint: #00ff66; --shadow-tint: #000000;
  --glass-blur: 0px; --glass-sat: 100%; --r-lg: 2px; --r-md: 2px; --r-sm: 2px; --r-btn: 2px;
  --heading-tracking: 0em; --btn-primary-ink: #030503;
  --sans: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --body-tracking: 0em;
  --glass-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --glass-border-strong: color-mix(in srgb, var(--accent) 70%, transparent);
  --card-grad: linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  --panel-grad: linear-gradient(160deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
  --card-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
  --card-shadow-hover: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent);
  --panel-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
  --btn-grad: transparent;
  --btn-shadow: inset 0 0 0 1px var(--accent);
  --btn-shadow-hover: inset 0 0 0 1px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
  --btn-primary-grad: var(--accent);
  --btn-primary-shadow: inset 0 0 0 1px var(--accent);
  --btn-primary-shadow-hover: inset 0 0 0 1px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
  --nav-bg: color-mix(in srgb, var(--bg-0) 85%, transparent);
}
:root[data-theme="minimal"] {
  --bg-0: #ffffff; --ink: #0a0a0a; --ink-dim: #2b2b2b; --mute: #6b6b6b; --mute-2: #9a9a9a;
  --accent: #0a0a0a; --accent-2: #4a4a4a; --surface-tint: #000000; --shadow-tint: #000000;
  --glass-blur: 0px; --glass-sat: 100%; --r-lg: 6px; --r-md: 4px; --r-sm: 4px; --r-btn: 4px;
  --heading-tracking: -0.015em; --icon-filter: invert(1);
  --card-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-tint) 6%, transparent);
  --card-shadow-hover: 0 2px 8px color-mix(in srgb, var(--shadow-tint) 10%, transparent);
  --panel-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 8%, transparent);
  --btn-shadow: none;
  --btn-shadow-hover: 0 2px 8px color-mix(in srgb, var(--shadow-tint) 12%, transparent);
  --btn-primary-shadow: none;
  --btn-primary-shadow-hover: 0 4px 14px color-mix(in srgb, var(--shadow-tint) 16%, transparent);
}
:root[data-theme="neumorph"] {
  --bg-0: #e6e9ef; --ink: #2d3142; --ink-dim: #4a4f66; --mute: #7d8298; --mute-2: #a3a7b8;
  --accent: #6c7ee1; --accent-2: #93a1ea; --surface-tint: #ffffff; --shadow-tint: #a3aec9;
  --glass-blur: 0px; --glass-sat: 100%; --r-lg: 28px; --r-md: 22px; --r-sm: 16px; --r-btn: 999px;
  --heading-tracking: -0.015em; --icon-filter: invert(1); --border-w: 0;
  --card-grad: var(--bg-0); --panel-grad: var(--bg-0); --btn-grad: var(--bg-0);
  --card-shadow: -8px -8px 16px color-mix(in srgb, var(--surface-tint) 90%, transparent), 8px 8px 16px color-mix(in srgb, var(--shadow-tint) 55%, transparent);
  --card-shadow-hover: -10px -10px 20px color-mix(in srgb, var(--surface-tint) 95%, transparent), 10px 10px 20px color-mix(in srgb, var(--shadow-tint) 65%, transparent);
  --panel-shadow: -10px -10px 24px color-mix(in srgb, var(--surface-tint) 85%, transparent), 10px 10px 24px color-mix(in srgb, var(--shadow-tint) 60%, transparent);
  --btn-shadow: -6px -6px 12px color-mix(in srgb, var(--surface-tint) 90%, transparent), 6px 6px 12px color-mix(in srgb, var(--shadow-tint) 55%, transparent);
  --btn-shadow-hover: -7px -7px 14px color-mix(in srgb, var(--surface-tint) 95%, transparent), 7px 7px 14px color-mix(in srgb, var(--shadow-tint) 65%, transparent);
}
:root[data-theme="brutalist"] {
  --bg-0: #fdfcf7; --ink: #0a0a0a; --ink-dim: #201f1a; --mute: #46433d; --mute-2: #726d63;
  --accent: #ffde59; --accent-2: #ff5b39; --surface-tint: #000000; --shadow-tint: #000000;
  --glass-blur: 0px; --glass-sat: 100%; --r-lg: 0px; --r-md: 0px; --r-sm: 0px; --r-btn: 0px;
  --heading-tracking: 0em; --icon-filter: invert(1); --border-w: 3px; --btn-primary-ink: #0a0a0a;
  --glass-border: #000000; --glass-border-strong: #000000;
  --card-grad: #ffffff; --panel-grad: #ffffff; --btn-grad: #ffffff;
  --card-shadow: 6px 6px 0 0 #000; --card-shadow-hover: 8px 8px 0 0 #000;
  --panel-shadow: 8px 8px 0 0 #000;
  --btn-shadow: 4px 4px 0 0 #000; --btn-shadow-hover: 6px 6px 0 0 #000;
  --btn-primary-shadow: 4px 4px 0 0 #000; --btn-primary-shadow-hover: 6px 6px 0 0 #000;
}
:root[data-theme="material"] {
  --bg-0: #fafbff; --ink: #1b1b1f; --ink-dim: #44464f; --mute: #74777f; --mute-2: #999da8;
  --accent: #1a73e8; --accent-2: #34a0f7; --surface-tint: #1a73e8; --shadow-tint: #1b1b1f;
  --glass-blur: 6px; --glass-sat: 100%; --r-lg: 24px; --r-md: 16px; --r-sm: 12px; --r-btn: 999px;
  --heading-tracking: -0.015em; --icon-filter: invert(1); --border-w: 0;
  --card-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-tint) 12%, transparent), 0 4px 12px color-mix(in srgb, var(--shadow-tint) 10%, transparent);
  --card-shadow-hover: 0 2px 4px color-mix(in srgb, var(--shadow-tint) 14%, transparent), 0 10px 24px color-mix(in srgb, var(--shadow-tint) 16%, transparent);
  --panel-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-tint) 10%, transparent), 0 12px 32px color-mix(in srgb, var(--shadow-tint) 14%, transparent);
  --btn-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 20%, transparent);
  --btn-shadow-hover: 0 4px 10px color-mix(in srgb, var(--shadow-tint) 24%, transparent);
}

/* Hacker terminal flourishes */
[data-theme="hacker"] .kicker::before { content: '>'; width: auto; height: auto; background: none; color: var(--accent); font-weight: 700; }
[data-theme="hacker"] .grain {
  background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 10%, transparent) 0px, color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: normal; opacity: 0.3;
}
[data-theme="hacker"] h1::after {
  content: '_'; display: inline-block; margin-left: 6px; color: var(--accent); animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-theme="hacker"] h1::after { animation: none; } }
[data-theme="minimal"] .grain, [data-theme="material"] .grain, [data-theme="neumorph"] .grain, [data-theme="brutalist"] .grain { opacity: 0.015; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; background: var(--bg-0); color: var(--ink); }
body {
  font-family: var(--sans);
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Ambient backdrop ---------- */
#fx { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.grain {
  position: fixed; inset: -60px; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.shell { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; }

/* ---------- Liquid glass primitives ---------- */
.glass {
  background: var(--panel-grad);
  border: var(--border-w) solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--panel-shadow);
  border-radius: var(--r-lg);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.glass-card {
  position: relative;
  background: var(--card-grad);
  border: var(--border-w) solid var(--glass-border);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(calc(var(--glass-sat) - 10%));
  backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(calc(var(--glass-sat) - 10%));
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.25s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}
.glass-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--surface-tint) 9%, transparent), transparent 60%);
  transition: opacity 0.3s ease;
}
.glass-card:hover { transform: translateY(-3px); border-color: var(--glass-border-strong); box-shadow: var(--card-shadow-hover); }
.glass-card:hover::before { opacity: 1; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: var(--r-btn); border: var(--border-w) solid var(--glass-border);
  font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--btn-grad);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 2px)) saturate(var(--glass-sat));
  box-shadow: var(--btn-shadow);
  color: var(--ink);
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--glass-border-strong); box-shadow: var(--btn-shadow-hover); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary {
  background: var(--btn-primary-grad);
  border-color: color-mix(in srgb, white 30%, transparent); color: var(--btn-primary-ink);
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover { box-shadow: var(--btn-primary-shadow-hover); }
.btn-primary { overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, color-mix(in srgb, white 55%, transparent), transparent);
  transform: skewX(-20deg); animation: shine-sweep 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes shine-sweep { 0%, 18% { left: -60%; } 62%, 100% { left: 130%; } }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13px; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---- Theme-button attention sequence (draw the eye to the style switcher) ---- */
.theme-btn-icon { display: inline-flex; }
.theme-btn-icon svg { width: 16px; height: 16px; }
.theme-pulse-ring { position: absolute; inset: -4px; border-radius: inherit; pointer-events: none; border: 2px solid var(--accent); opacity: 0; }
.theme-btn.pulse .theme-pulse-ring { animation: pulse-ring 1.3s cubic-bezier(.2,.8,.2,1) 3; }
@keyframes pulse-ring { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
.theme-hint {
  position: fixed; z-index: 9999;
  padding: 9px 14px; border-radius: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: color-mix(in srgb, var(--bg-0) 92%, var(--surface-tint) 8%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
}
.theme-hint.show { opacity: 1; transform: none; }

/* ---- Staggered word-reveal for headlines ---- */
.word { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: word-rise 0.6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes word-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .word { animation: none; opacity: 1; transform: none; }
  .theme-btn.pulse .theme-pulse-ring { animation: none; }
  .btn-primary::after { animation: none; display: none; }
}

.tile {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0;
  background: var(--tile-grad);
  border: var(--border-w) solid var(--glass-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-tint) 14%, transparent);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px;
  border-radius: 999px; border: var(--border-w) solid var(--glass-border);
  background: var(--pill-grad);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 12.5px; font-weight: 700; color: var(--ink-dim); letter-spacing: -0.01em;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52,211,153,0.18); flex-shrink: 0; }
.flagmark { display: inline-flex; gap: 1.5px; width: 13px; height: 10px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.flagmark i { flex: 1; display: block; }
.flagmark i:nth-child(1), .flagmark i:nth-child(3) { background: var(--accent); }
.flagmark i:nth-child(2) { background: #f2f3f6; }

.kicker { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.kicker::before { content: ''; width: 16px; height: 1px; background: var(--line-2); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: var(--heading-tracking); color: var(--ink); }
section { position: relative; }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head h1, .section-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; }
.section-head p { margin: 12px 0 0; color: var(--mute); font-size: 15.5px; line-height: 1.6; max-width: 520px; }

main { flex: 1; width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

/* ---------- Header ---------- */
header.nav {
  position: sticky; top: 0; z-index: 200;
  padding: 14px max(20px, calc((100% - 1160px) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: var(--heading-tracking); color: var(--ink); }
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 13.5px; font-weight: 600;
  color: var(--mute); transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--soc-bg-hover); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.status-chip { display: none; }
@media (min-width: 860px) { .status-chip { display: inline-flex; } }
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 12px; border: var(--border-w) solid var(--glass-border); background: var(--soc-bg); align-items: center; justify-content: center; cursor: pointer; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { content: ''; display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-burger span::before { position: absolute; top: -5px; }
.nav-burger span::after { position: absolute; top: 5px; }
.mobile-panel {
  display: none; position: fixed; top: 66px; right: 12px; left: 12px; z-index: 199; padding: 10px; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--bg-0) 92%, var(--surface-tint) 8%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
}
.mobile-panel a { padding: 12px 14px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--ink-dim); }
.mobile-panel a:hover, .mobile-panel a[aria-current="page"] { background: var(--soc-bg-hover); color: var(--ink); }
.mobile-panel.open { display: flex; animation: rise 0.2s ease both; }
@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  header.nav .btn-sm.mail-cta { display: none; }
}

/* ---------- Theme switcher ---------- */
.theme-switch { position: relative; }
.theme-btn-label { display: inline; }
@media (max-width: 520px) { .theme-btn-label { display: none; } .theme-btn { padding: 0 12px; } }
.theme-swatch-icon { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--accent), var(--accent-2), var(--accent)); border: 1px solid color-mix(in srgb, white 30%, transparent); }
.theme-menu {
  /* position:fixed + moved to <body> by JS: the header's own backdrop-filter would
     otherwise make it the containing/stacking-context ancestor and can lose to
     unrelated content elsewhere on the page. */
  display: none; position: fixed; z-index: 9999;
  width: min(300px, 86vw); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 8px; flex-direction: column; gap: 3px;
  /* readable popover, not another sheet of glass stacked on the content behind it */
  background: color-mix(in srgb, var(--bg-0) 92%, var(--surface-tint) 8%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
}
.theme-menu.open { display: flex; animation: rise 0.18s ease both; }
.theme-menu-label { padding: 8px 10px 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); }
.theme-opt {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid transparent;
  background: transparent; cursor: pointer; text-align: left; width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-opt:hover { background: var(--soc-bg-hover); }
.theme-opt.active { background: var(--chip-open-bg); border-color: var(--glass-border); }
.theme-swatch { width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; border: 1px solid var(--glass-border); background: linear-gradient(135deg, var(--sw1) 50%, var(--sw2) 50%); }
.theme-opt-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.theme-opt-meta b { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.theme-opt-meta span { font-size: 11px; color: var(--mute); }
.theme-check { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.theme-opt.active .theme-check { opacity: 1; }

/* ---------- Shared socials / identity chip ---------- */
.soc-tile { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: var(--border-w) solid var(--glass-border); background: var(--soc-bg); transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; cursor: pointer; text-decoration: none; position: relative; }
.soc-tile:hover { transform: translateY(-2px); background: var(--soc-bg-hover); border-color: var(--glass-border-strong); }
.soc-tile img { width: 15px; height: 15px; filter: var(--icon-filter); transition: filter 0.3s ease; }
.soc-copied { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: var(--green); white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.soc-copied.show { opacity: 1; }

/* ---------- Thumbnails: neutral until you engage with them ---------- */
.thumb-grayscale { filter: grayscale(1) contrast(1.05); transition: filter 0.5s ease, transform 0.5s cubic-bezier(.2,.8,.2,1); }
.glass-card:hover .thumb-grayscale, .shot:hover .thumb-grayscale, .shot.show .thumb-grayscale, .shot:focus-within .thumb-grayscale { filter: grayscale(0) contrast(1); }

footer {
  padding: 22px max(20px, calc((100% - 1160px) / 2)) 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute-2);
}
footer a { text-decoration: none; color: var(--mute); font-weight: 600; }
footer a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise 0.6s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .glass-card { animation: none !important; transition: none !important; } }