/* ============================================================
   Shridhar Navanageri, Executive Profile
   Blue edition, light and dark themes
   ============================================================ */

:root {
  /* ---- one accent family: navy and slate. Names kept for back-compat so every
         component inherits the restrained palette without markup changes ---- */
  --teal:   #94a3b8;
  --cyan:   #cbd5e1;
  --indigo: #60a5fa;
  --violet: #3b82f6;
  --pink:   #2563eb;
  --amber:  #64748b;

  /* Foreground for anything filled with the accent gradient. The palette
     inverts between themes, so this has to invert with it. */
  --on-accent: #06121f;
  --fab-a: #5eead4;
  --fab-b: #60a5fa;
  --fab-c: #818cf8;
  --fab-glow: rgba(96,165,250,.42);

  /* ---- constant text on dark bands ---- */
  --on-dark:     #f2f4f7;
  --on-dark-mut: #98a2b3;

  /* ---- themed surfaces, DARK is the alternate theme ---- */
  --bg:        #0c111d;
  --bg-elev:   #121828;
  --surface:   #151c2c;
  --surface-2: #101728;
  --border:    #232b3d;
  --text:      #f2f4f7;
  --text-soft: #b4bcca;
  --text-mut:  #8792a5;
  --alt-grad:  linear-gradient(180deg, #0e1421 0%, #111827 100%);

  --radius: 12px;
  --maxw:   1140px;
  --shadow:    0 18px 44px -26px rgba(0,0,0,.6);
  --shadow-sm: 0 8px 22px -16px rgba(0,0,0,.5);
  --glow-teal: 0 10px 26px -16px rgba(0,0,0,.5);
  --glow-pink: 0 10px 26px -16px rgba(0,0,0,.5);
  --glow-blue: 0 10px 26px -16px rgba(0,0,0,.5);

  /* ---- theme-aware chrome (nav / hero / stats / footer), DARK defaults ---- */
  --accent-link:    #60a5fa;
  --accent-soft:    rgba(96,165,250,.14);
  --nav-bg:         rgba(12,17,29,.78);
  --nav-border:     rgba(255,255,255,.08);
  --nav-fg:         #a6b3dd;
  --nav-fg-strong:  #eaf0ff;
  --ctl-border:     rgba(255,255,255,.18);
  --ctl-hover:      rgba(255,255,255,.08);
  --hero-bg:        #070b18;
  --hero-grad-end:  #0a1024;
  --hero-fg:        #eaf0ff;
  --hero-fg-mut:    #a6b3dd;
  --hero-glow1:     rgba(59,130,246,.34);
  --hero-glow2:     rgba(148,163,184,.10);
  --hero-glow3:     rgba(56,189,248,.20);
  --hero-surface:   rgba(255,255,255,.05);
  --hero-border:    rgba(255,255,255,.14);
  --hero-chip-bg:   rgba(255,255,255,.03);
  --stats-bg:       #070b18;
  --stats-border:   rgba(255,255,255,.08);
  --foot-bg:        #070b18;
  --foot-fg:        #a6b3dd;
  --foot-border:    rgba(255,255,255,.06);

  --font:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

[data-theme="light"] {
  /* one accent family: deep navy and slate on paper */
  --teal:   #475569;
  --cyan:   #334155;
  --indigo: #1e40af;
  --violet: #1d4ed8;
  --pink:   #2563eb;
  --amber:  #64748b;

  /* On paper the accent fill is deep blue, so its foreground flips to white. */
  --on-accent: #ffffff;
  --fab-a: #3b82f6;
  --fab-b: #2563eb;
  --fab-c: #1d4ed8;
  --fab-glow: rgba(29,78,216,.40);

  --bg:        #ffffff;
  --bg-elev:   #ffffff;
  --surface:   #ffffff;
  --surface-2: #f8f9fb;
  --border:    #e4e7ec;
  --text:      #101828;
  --text-soft: #475467;
  --text-mut:  #98a2b3;
  --alt-grad:  linear-gradient(180deg, #fafbfc 0%, #f5f7f9 100%);
  --shadow:    0 12px 32px -20px rgba(16,24,40,.22);
  --shadow-sm: 0 4px 14px -8px rgba(16,24,40,.14);
  --glow-teal: 0 6px 18px -12px rgba(16,24,40,.24);
  --glow-pink: 0 6px 18px -12px rgba(16,24,40,.24);
  --glow-blue: 0 6px 18px -12px rgba(16,24,40,.24);

  /* ---- theme-aware chrome, LIGHT overrides ---- */
  --accent-link:    #1d4ed8;
  --accent-soft:    rgba(29,78,216,.09);
  --nav-bg:         rgba(255,255,255,.88);
  --nav-border:     rgba(16,24,40,.09);
  --nav-fg:         #475467;
  --nav-fg-strong:  #101828;
  --ctl-border:     rgba(16,24,40,.14);
  --ctl-hover:      rgba(16,24,40,.04);
  --hero-bg:        #ffffff;
  --hero-grad-end:  #f7f9fb;
  --hero-fg:        #101828;
  --hero-fg-mut:    #475467;
  --hero-glow1:     rgba(29,78,216,.05);
  --hero-glow2:     rgba(71,85,105,.04);
  --hero-glow3:     rgba(29,78,216,.04);
  --hero-surface:   rgba(16,24,40,.03);
  --hero-border:    rgba(16,24,40,.10);
  --hero-chip-bg:   rgba(16,24,40,.02);
  --stats-bg:       #f8f9fb;
  --stats-border:   rgba(16,24,40,.08);
  --foot-bg:        #f8f9fb;
  --foot-fg:        #475467;
  --foot-border:    rgba(16,24,40,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .4s ease, color .4s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* An author rule such as .post { display: flex } ties with the browser's own
   [hidden] { display: none } on specificity and wins, so hidden has to be
   made non-negotiable or filtering silently does nothing. */
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.accent { color: var(--indigo); }

/* ---------- CURSOR GLOW + PROGRESS ---------- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px;
  border-radius: 50%; pointer-events: none; z-index: 1; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(29,78,216,.10), rgba(29,78,216,.05) 40%, transparent 68%);
  mix-blend-mode: screen; transition: opacity .3s; opacity: 0;
}
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 90;
  background: linear-gradient(90deg, var(--teal), var(--cyan), var(--indigo), var(--violet), var(--amber));
  box-shadow: 0 0 14px rgba(16,24,40,.22);
}

/* ---------- NAV (theme-aware glass) ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--nav-border);
  transition: background .4s ease, border-color .4s ease;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--nav-fg-strong); font-weight: 700; letter-spacing: -.01em; }
.brand .mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #06121f;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  box-shadow: var(--glow-blue);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }
.brand small { display: block; font-size: 11px; font-weight: 500; color: var(--nav-fg); letter-spacing: .02em; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--nav-fg); font-size: 14.5px; font-weight: 500; position: relative; transition: color .2s; }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--violet)); transition: width .25s;
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-links a:hover { color: var(--nav-fg-strong); }
.nav-cta { padding: 9px 17px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent-link) 50%, transparent); color: var(--accent-link) !important; transition: all .2s; }
.nav-cta:hover { background: color-mix(in srgb, var(--accent-link) 14%, transparent); box-shadow: var(--glow-blue); }

.theme-toggle {
  background: none; border: 1px solid var(--ctl-border); color: var(--nav-fg-strong);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--ctl-hover); box-shadow: var(--glow-blue); transform: rotate(18deg); }
.theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun  { display: block; }
[data-theme="light"] .theme-toggle .i-sun  { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ---------- HERO (theme-aware) ---------- */
.hero { position: relative; overflow: hidden; color: var(--hero-fg); background: var(--hero-bg); padding: 60px 0 56px; transition: background .4s ease, color .4s ease; }
/* hero scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--hero-fg-mut); text-decoration: none; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  transition: opacity .4s ease, color .2s ease; animation: cuebounce 1.9s ease-in-out infinite; }
.scroll-cue:hover { color: var(--hero-fg); }
.scroll-cue.hide { opacity: 0; pointer-events: none; }
@keyframes cuebounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 80% -8%, var(--hero-glow1), transparent 60%),
    radial-gradient(820px 460px at 6% 8%, var(--hero-glow2), transparent 58%),
    radial-gradient(700px 500px at 50% 110%, var(--hero-glow3), transparent 60%),
    linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-grad-end) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-link); font-weight: 600; padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-link) 36%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent-link) 9%, transparent);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-link); box-shadow: 0 0 0 0 rgba(56,189,248,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{ box-shadow: 0 0 0 0 rgba(56,189,248,.55) } 70%{ box-shadow: 0 0 0 10px rgba(56,189,248,0) } 100%{ box-shadow: 0 0 0 0 rgba(56,189,248,0) } }
.hero h1 { font-family: var(--serif); font-size: clamp(33px, 4.7vw, 56px); line-height: 1.06; letter-spacing: -.025em; font-weight: 600; margin: 16px 0 12px; min-height: 2.2em; }
.hero h1 .word, .hero h1 .grad { display: inline-block; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--teal), var(--cyan) 28%, var(--indigo) 56%, var(--pink) 82%, var(--amber));
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }
.rotator { display: inline-block; position: relative; min-width: 1ch; }
.rotator .word {
  background: linear-gradient(100deg, var(--teal), var(--cyan) 45%, var(--indigo) 78%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap;
}
.hero .lede { font-size: clamp(16.5px, 2vw, 20px); color: color-mix(in srgb, var(--hero-fg) 78%, var(--hero-fg-mut)); max-width: 700px; line-height: 1.62; }
.hero .lede strong { color: var(--hero-fg); font-weight: 600; }

/* CAREER THROUGH-LINE (Build, Scale, Modernize, Apply) */
.arc { position: relative; z-index: 2; margin-top: 30px; display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--hero-border); padding-top: 24px; }
.arc-step { flex: 1 1 0; min-width: 134px; display: flex; flex-direction: column; gap: 3px; padding: 2px 4px; }
.arc-when { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-link); }
.arc-what { font-family: var(--serif); font-size: clamp(17px, 1.9vw, 21px); font-weight: 600; color: var(--hero-fg); letter-spacing: -.01em; line-height: 1.12; }
.arc-scale { font-size: 12px; color: var(--hero-fg-mut); font-weight: 500; line-height: 1.32; }
.arc-arrow { align-self: center; flex: 0 0 30px; height: 2px; position: relative; margin: 0 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-link) 15%, transparent), var(--accent-link)); border-radius: 2px; overflow: hidden; }
.arc-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--accent-link); border-right: 2px solid var(--accent-link); transform: translateY(-50%) rotate(45deg); }
.arc-arrow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-link) 70%, #fff) 50%, transparent); animation: arcflow 2.6s ease-in-out infinite; }
@keyframes arcflow { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(120%); } }

/* ASK BAR */
.ask { margin-top: 30px; max-width: 600px; }
.ask-bar { position: relative; }
.ask-box {
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px;
  background: var(--hero-surface); border: 1px solid var(--hero-border);
  border-radius: 16px; backdrop-filter: blur(8px); transition: border-color .2s, box-shadow .2s;
}
.ask-box:focus-within { border-color: color-mix(in srgb, var(--accent-link) 60%, transparent); box-shadow: var(--glow-blue); }
.ask-box svg { color: var(--accent-link); flex-shrink: 0; }
.ask-box input { flex: 1; background: none; border: none; outline: none; color: var(--hero-fg); font-family: var(--font); font-size: 15.5px; padding: 12px 0; }
.ask-box input::placeholder { color: var(--hero-fg-mut); }
.ask-send { border: none; cursor: pointer; padding: 11px 18px; border-radius: 12px; font-weight: 700; font-family: var(--font); color: #06121f; background: linear-gradient(135deg, var(--teal), var(--indigo)); transition: transform .15s, box-shadow .2s; }
.ask-send:hover { transform: translateY(-1px); box-shadow: var(--glow-blue); }

/* AUTOCOMPLETE */
.ac { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 8;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 320px; overflow-y: auto; }
.ac[hidden] { display: none; }
.ac-item { display: flex; align-items: center; gap: 11px; padding: 11px 15px; cursor: pointer;
  font-size: 14.2px; color: var(--text); border-bottom: 1px solid var(--border); transition: background .12s; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: color-mix(in srgb, var(--accent-link) 14%, var(--surface)); }
.ac-item .ac-ic { color: var(--accent-link); flex-shrink: 0; display: grid; place-items: center; }
.ac-item .ac-tag { margin-left: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mut); font-weight: 600; }
.ac-item b { color: var(--accent-link); font-weight: 600; }
.ac-empty { padding: 13px 15px; color: var(--text-mut); font-size: 13.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.chip { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--hero-fg-mut); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--hero-border); background: var(--hero-chip-bg); transition: all .18s; }
.chip:hover { color: var(--hero-fg); border-color: var(--accent-link); background: color-mix(in srgb, var(--accent-link) 12%, transparent); transform: translateY(-1px); }
.ask-answer { margin-top: 14px; font-size: 14.5px; color: var(--accent-link); min-height: 0; height: 0; overflow: hidden; opacity: 0; transition: opacity .3s, height .3s; font-weight: 500; }
.ask-answer.show { opacity: 1; height: auto; min-height: 22px; }

/* LOCAL ASSISTANT RESULT PANEL */
.ask-result { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px 20px; box-shadow: var(--shadow-sm); }
.ask-result[hidden] { display: none; }
.ar-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text-mut); }
.ar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-link); box-shadow: 0 0 0 0 rgba(56,189,248,.5); animation: pulse 2s infinite; }
.ar-body { margin-top: 11px; font-size: 15.5px; line-height: 1.72; color: var(--text); min-height: 1.2em; white-space: pre-wrap; }
.ar-body b { color: var(--text); font-weight: 700; }
.ar-cursor { display: inline-block; width: 7px; height: 1.05em; background: var(--accent-link); margin-left: 2px; vertical-align: -2px; border-radius: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ar-sources { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; opacity: 0; transition: opacity .35s; }
.ar-sources.show { opacity: 1; }
.ar-sources .ar-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--text-mut); margin-right: 2px; }
.ar-src { font-size: 12.8px; font-weight: 600; color: var(--accent-link); border: 1px solid color-mix(in srgb, var(--accent-link) 38%, transparent); padding: 5px 12px; border-radius: 999px; cursor: pointer; background: none; font-family: var(--font); transition: background .15s, transform .15s; }
.ar-src:hover { background: color-mix(in srgb, var(--accent-link) 12%, transparent); transform: translateY(-1px); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; font-family: var(--font); cursor: pointer; transition: transform .18s ease, box-shadow .2s, background .2s; }
.btn-primary { background: linear-gradient(135deg, var(--teal), var(--indigo)); color: #06121f; box-shadow: 0 14px 32px -12px rgba(16,24,40,.22); border: none; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-blue); }
.btn-ghost { border: 1px solid rgba(255,255,255,.2); color: var(--on-dark); background: none; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.hero .btn-ghost { border-color: var(--hero-border); color: var(--hero-fg); }
.hero .btn-ghost:hover { background: var(--ctl-hover); }

/* MARQUEE */
.marquee { position: relative; z-index: 2; margin-top: 52px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); border-top: 1px solid var(--hero-border); border-bottom: 1px solid var(--hero-border); padding: 16px 0; }
.marquee-track { display: flex; gap: 42px; width: max-content; animation: scrollx 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { color: var(--hero-fg-mut); font-size: 14.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; display: inline-flex; align-items: center; gap: 42px; }
.marquee-track span::after { content: ""; color: var(--accent-link); font-size: 9px; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- SECTIONS ---------- */
section { padding: 60px 0; position: relative; }
.section-head { max-width: 730px; margin-bottom: 34px; }
.kicker { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  background: linear-gradient(100deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; margin: 12px 0 14px; color: var(--text); }
.section-head p { color: var(--text-soft); font-size: 17px; }
.section-alt { background: var(--alt-grad); }

@keyframes flash { 0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,0); } 30%{ box-shadow: 0 0 0 6px rgba(59,130,246,.22); } }
.flash { animation: flash 1.4s ease; border-radius: 24px; }

/* ---------- STATS STRIP (theme-aware) ---------- */
.stats-strip { background: var(--stats-bg); color: var(--text); padding: 14px 0; transition: background .4s ease; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-cell { padding: 24px 20px; text-align: center; border-left: 1px solid var(--stats-border); position: relative; overflow: hidden; }
.stat-cell:first-child { border-left: none; }
.stat-cell .num { font-family: var(--serif); font-size: clamp(28px, 3.8vw, 42px); font-weight: 600; letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--teal), var(--indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-cell .lbl { font-size: 13.5px; color: var(--text-soft); margin-top: 4px; }
.stat-cell:nth-child(2) .num { background: linear-gradient(135deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; }
.stat-cell:nth-child(3) .num { background: linear-gradient(135deg, var(--indigo), var(--pink)); -webkit-background-clip: text; background-clip: text; }
.stat-cell:nth-child(4) .num { background: linear-gradient(135deg, var(--violet), var(--amber)); -webkit-background-clip: text; background-clip: text; }

/* ---------- EXPERTISE ---------- */
.grid-exp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1180px) { .grid-exp { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow-sm); overflow: hidden;
  transform-style: preserve-3d; transition: transform .18s ease, box-shadow .25s, border-color .25s;
}
.card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), rgba(16,24,40,.05), transparent 60%); }
.card:hover::before { opacity: 1; }
.card:hover { box-shadow: 0 12px 28px -18px rgba(16,24,40,.22), var(--shadow); border-color: color-mix(in srgb, var(--indigo) 45%, var(--border)); }
/* fallback gradient so every card has a filled icon tile, whatever the count */
.card .ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 13px; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--cyan)); }
.card .ico svg { width: 21px; height: 21px; }
.card:nth-child(1) .ico { background: linear-gradient(135deg, var(--teal), var(--cyan)); }
.card:nth-child(2) .ico { background: linear-gradient(135deg, var(--cyan), var(--indigo)); }
.card:nth-child(3) .ico { background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.card:nth-child(4) .ico { background: linear-gradient(135deg, var(--violet), var(--pink)); }
.card:nth-child(5) .ico { background: linear-gradient(135deg, var(--pink), var(--amber)); }
.card:nth-child(6) .ico { background: linear-gradient(135deg, var(--amber), var(--teal)); }
.card:nth-child(7) .ico { background: linear-gradient(135deg, var(--teal), var(--indigo)); }
.card:nth-child(8) .ico { background: linear-gradient(135deg, var(--violet), var(--cyan)); }
.card h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 7px; position: relative; color: var(--text); line-height: 1.25; }
.card p { color: var(--text-soft); font-size: 13.6px; line-height: 1.55; position: relative; }

/* ---------- CAPABILITY STACK ---------- */
.cap-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 30px; align-items: stretch; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.layer {
  --c: var(--teal);
  position: relative; cursor: pointer; text-align: left; width: 100%; font-family: var(--font);
  display: flex; align-items: center; gap: 16px; padding: 17px 18px 17px 16px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c);
  border-radius: 14px; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s, border-color .2s;
}
.layer:hover { transform: translateX(5px); }
.layer.active {
  transform: translateX(10px) scale(1.012);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 70%);
  border-color: var(--c);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--c) 75%, transparent);
}
.layer .lyr-idx { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #2563eb)); box-shadow: 0 8px 18px -8px var(--c); }
.layer .lyr-txt { display: flex; flex-direction: column; line-height: 1.25; }
.layer .lyr-name { font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--text); }
.layer .lyr-tag { font-size: 12.5px; color: var(--text-mut); margin-top: 1px; }
.layer .lyr-arrow { margin-left: auto; color: var(--c); opacity: 0; transform: translateX(-6px); transition: all .2s; }
.layer.active .lyr-arrow { opacity: 1; transform: none; }
.cap-axis { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mut); font-weight: 600; text-align: center; padding: 4px 0; }
.cap-panel-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 34px 32px; overflow: hidden; }
.cap-panel-wrap::before { content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pc, var(--indigo)) 22%, transparent), transparent 70%); transition: background .3s; }
.cap-panel { display: none; position: relative; }
.cap-panel.active { display: block; animation: capfade .4s cubic-bezier(.2,.7,.2,1); }
@keyframes capfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cap-panel .cp-step { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--pc, var(--indigo)); }
.cap-panel h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 3vw, 30px); letter-spacing: -.01em; margin: 8px 0 12px; color: var(--text); }
.cap-panel p { color: var(--text-soft); font-size: 16px; line-height: 1.7; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cap-chips span { font-size: 12.8px; font-weight: 500; color: var(--text); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); transition: border-color .2s, transform .15s; }
.cap-chips span:hover { border-color: var(--pc, var(--indigo)); transform: translateY(-2px); }

/* operating loop */
.loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 24px; position: relative; }
@media (max-width: 1040px) { .loop { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.loop-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s, box-shadow .25s, border-color .2s; }
.loop-step:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -18px rgba(16,24,40,.22), var(--shadow); border-color: color-mix(in srgb, var(--indigo) 45%, var(--border)); }
.loop-step .ls-num { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.02em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.loop-step:nth-child(1) .ls-num { background: linear-gradient(135deg, var(--teal), var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.loop-step:nth-child(2) .ls-num { background: linear-gradient(135deg, var(--indigo), var(--violet)); -webkit-background-clip: text; background-clip: text; }
.loop-step:nth-child(3) .ls-num { background: linear-gradient(135deg, var(--indigo), var(--pink)); -webkit-background-clip: text; background-clip: text; }
.loop-step:nth-child(4) .ls-num { background: linear-gradient(135deg, var(--violet), var(--pink)); -webkit-background-clip: text; background-clip: text; }
.loop-step:nth-child(5) .ls-num { background: linear-gradient(135deg, var(--pink), var(--amber)); -webkit-background-clip: text; background-clip: text; }
.loop-step .ls-num { font-size: 34px; }
.loop-step h4 { font-size: 16.5px; letter-spacing: -.01em; margin: 10px 0 7px; color: var(--text); }
.loop-step p { color: var(--text-soft); font-size: 14px; line-height: 1.5; }
.loop-step .ls-arrow { display: none; }

/* ---------- TIMELINE ---------- */
.timeline { position: relative; margin-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--indigo) 22%, transparent); }
.timeline-fill { position: absolute; left: 19px; top: 6px; width: 3px; border-radius: 3px; height: 0; background: linear-gradient(var(--teal), var(--indigo), var(--violet)); transition: height .15s linear; }
.tl-item { position: relative; padding: 0 0 18px 64px; }
.tl-dot { position: absolute; left: 10px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 3px solid var(--indigo); box-shadow: 0 0 0 5px color-mix(in srgb, var(--indigo) 16%, transparent); transition: transform .2s; }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 13px; cursor: pointer; user-select: none; padding: 8px 0; }
.tl-head:hover .tl-dot { transform: scale(1.12); }
.tl-role { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.tl-co { font-weight: 700; background: linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-meta { font-size: 13.5px; color: var(--text-mut); }
.tl-when { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); padding: 4px 12px; border-radius: 999px; }
.tl-toggle { margin-left: 10px; color: var(--indigo); transition: transform .25s; }
.tl-item.open .tl-toggle { transform: rotate(45deg); }
/* A fixed max-height clips any role that grows past it, so the open and closed
   states are expressed as grid rows instead and the card fits whatever it holds. */
.tl-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.tl-item.open .tl-body { grid-template-rows: 1fr; }
.tl-body > * { overflow: hidden; min-height: 0; }
.tl-body ul { list-style: none; padding: 8px 0 6px; display: grid; gap: 9px; }
.tl-body li { position: relative; padding-left: 20px; color: var(--text-soft); font-size: 15px; }
.tl-body li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg,var(--teal),var(--indigo)); }
.tl-body li b { color: var(--text); font-weight: 600; }
.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; }

/* proof link: the published write-up behind a claim */
.proof {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  padding: 5px 11px 5px 9px; border-radius: 999px; text-decoration: none;
  background: var(--accent-soft); color: var(--accent-link);
  border: 1px solid color-mix(in srgb, var(--accent-link) 22%, transparent);
  transition: background .2s, border-color .2s, transform .2s;
}
.proof:hover { background: color-mix(in srgb, var(--accent-link) 14%, transparent);
               border-color: color-mix(in srgb, var(--accent-link) 46%, transparent);
               transform: translateY(-1px); }
.proof-i { display: grid; place-items: center; flex-shrink: 0; }
.proof-t { font-size: 12.4px; font-weight: 600; line-height: 1.2; }
.proof-m { font-size: 10.5px; font-family: var(--mono); color: var(--text-mut); flex-shrink: 0;
           padding-left: 7px; border-left: 1px solid color-mix(in srgb, var(--accent-link) 24%, transparent); }
.tl-body li:has(.proof) { padding-bottom: 2px; }
/* an externally published proof reads differently from one I wrote myself */
.proof-ext { background: var(--surface-2); color: var(--text-soft);
             border-color: color-mix(in srgb, var(--text-mut) 26%, transparent); }
.proof-ext:hover { background: var(--accent-soft); color: var(--accent-link);
                   border-color: color-mix(in srgb, var(--accent-link) 46%, transparent); }
.proof-ext .proof-m { color: var(--text-mut); border-left-color: color-mix(in srgb, var(--text-mut) 26%, transparent); }

/* depth toggle: summary by default, full profile on request */
.lens-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tier { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tier-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
            color: var(--text-mut); margin-right: 2px; }
.tier-btn {
  font: inherit; font-size: 12.8px; font-weight: 600; cursor: pointer; color: var(--text-mut);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 8px 6px 13px; display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s, background .2s, border-color .2s;
}
.tier-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent-link) 40%, var(--border)); }
.tier-n { font-family: var(--mono); font-size: 10px; font-weight: 700; min-width: 19px; text-align: center;
          padding: 2px 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-mut); }
.tier-btn.is-on { color: #fff; background: var(--accent-link); border-color: var(--accent-link); }
.tier-btn.is-on .tier-n { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 620px) {
  .lens-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tier-btn { font-size: 12.2px; }
}

/* scope-setting line at the top of each role, outside the bullet list so the
   skill lens neither counts it nor filters it away */
.tl-ctx {
  color: var(--text-mut); font-size: 13.4px; line-height: 1.55; margin: 0;
  padding: 10px 0 9px; border-bottom: 1px dashed var(--border);
}

/* recognition */
.recog { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--border); }
.recog-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.recog-head h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -.01em; color: var(--text); margin: 0; }
.recog-head p { font-size: 14px; color: var(--text-mut); margin: 0; }
.recog-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.rec {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 18px 16px; box-shadow: var(--shadow-sm); display: grid; gap: 7px;
  align-content: start; transition: border-color .2s, transform .2s;
}
.rec:hover { border-color: color-mix(in srgb, var(--accent-link) 40%, var(--border)); transform: translateY(-2px); }
.rec-yr { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent-link); }
.rec-t { font-size: 14.6px; font-weight: 600; color: var(--text); line-height: 1.35; }
.rec-co { font-size: 12.6px; color: var(--text-mut); }
@media (max-width: 900px) { .recog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .recog-grid { grid-template-columns: minmax(0,1fr); } }

.tl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
          flex-wrap: wrap; margin-bottom: 18px; }
.tl-hint { font-size: 13px; color: var(--text-mut); margin: 0; }
.tl-all { display: flex; gap: 7px; flex-shrink: 0; }
.tl-allbtn {
  font: inherit; font-size: 12.6px; font-weight: 600; cursor: pointer; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 8px 6px 12px; display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s, border-color .2s, background .2s, opacity .2s;
}
.tl-allbtn svg { color: var(--accent-link); flex-shrink: 0; }
.tl-allbtn:hover:not([disabled]) { color: var(--text); border-color: color-mix(in srgb, var(--accent-link) 42%, var(--border)); }
.tl-allbtn[disabled] { opacity: .4; cursor: default; }
.tl-allbtn[disabled] svg { color: var(--text-mut); }
.tl-alln { font-family: var(--mono); font-size: 10px; font-weight: 700; min-width: 18px; text-align: center;
           padding: 2px 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-mut); }
@media (max-width: 620px) {
  .tl-bar { gap: 10px; }
  .tl-allbtn { font-size: 12px; padding: 6px 7px 6px 11px; }
}

/* ---------- IMPACT BAND (constant dark) ---------- */
.band { position: relative; overflow: hidden; color: var(--on-dark); border-radius: 26px; padding: 60px 48px; box-shadow: var(--shadow);
  background:
    radial-gradient(700px 360px at 88% -30%, rgba(96,165,250,.16), transparent 60%),
    radial-gradient(600px 340px at 8% 120%, rgba(148,163,184,.12), transparent 60%),
    radial-gradient(500px 300px at 95% 120%, rgba(96,165,250,.10), transparent 60%),
    linear-gradient(135deg, #070b18 0%, #0c1733 55%, #0a1024 100%); }
.band h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px,3.8vw,38px); letter-spacing: -.01em; }
.band p { color: var(--on-dark-mut); margin-top: 10px; max-width: 640px; }
.band-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 22px; margin-top: 36px; position: relative; }
@media (max-width: 900px) { .band-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.band-grid > div:nth-child(5) .num { background: linear-gradient(135deg,var(--pink),var(--amber)); -webkit-background-clip: text; background-clip: text; }
.band-grid .num { font-family: var(--serif); font-size: clamp(30px,4.2vw,46px); font-weight: 600; background: linear-gradient(135deg, var(--teal), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band-grid > div:nth-child(2) .num { background: linear-gradient(135deg,var(--cyan),var(--indigo)); -webkit-background-clip: text; background-clip: text; }
.band-grid > div:nth-child(3) .num { background: linear-gradient(135deg,var(--indigo),var(--pink)); -webkit-background-clip: text; background-clip: text; }
.band-grid > div:nth-child(4) .num { background: linear-gradient(135deg,var(--violet),var(--amber)); -webkit-background-clip: text; background-clip: text; }
.band-grid .lbl { color: var(--on-dark-mut); font-size: 14px; margin-top: 4px; }

/* ---------- BLOG ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.post { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .25s, border-color .25s; }
.post:hover { transform: translateY(-5px); box-shadow: 0 12px 28px -18px rgba(16,24,40,.22), var(--shadow); border-color: color-mix(in srgb, var(--indigo) 45%, var(--border)); }
/* default cover, so a card with no cN variant still looks intentional */
.post-cover { height: 138px; position: relative; overflow: hidden;
  background: linear-gradient(150deg,#101828,#1e3a5f 60%,#2f4a7a); }
.post-cover.c1 { background: linear-gradient(150deg,#101828,#1e3a5f 60%,#2f4a7a); }
.post-cover.c2 { background: linear-gradient(150deg,#101828,#1e3a8a 60%,#2b5ca8); }
.post-cover.c3 { background: linear-gradient(150deg,#101828,#243b53 60%,#3d5875); }
.post-cover.c4 { background: linear-gradient(150deg,#101828,#1c3557 60%,#26507f); }
.post-cover.c5 { background: linear-gradient(150deg,#101828,#20344d 60%,#35618f); }
.post-cover.c6 { background: linear-gradient(150deg,#101828,#17304a 60%,#2c5580); }
.post-cover.c7 { background: linear-gradient(150deg,#101828,#22384f 60%,#3a6390); }
.post-cover.c8 { background: linear-gradient(150deg,#101828,#1b3a52 60%,#2e5f84); }
.post-cover::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px); background-size: 16px 16px; opacity: .35; }
.post-cover span { position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; background: rgba(0,0,0,.3); padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
.post-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-body .post-meta { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-mut);
                        letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.pm-alt { color: var(--accent-link); }
.pm-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; flex-shrink: 0; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pt { font-size: 11.5px; font-weight: 600; color: var(--text-mut); background: var(--surface-2);
      border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; line-height: 1.25; }
.post:hover .pt { border-color: color-mix(in srgb, var(--accent-link) 26%, var(--border)); }

/* search and filters over the writing index */
.blog-tools { margin-bottom: 26px; display: grid; gap: 14px; position: relative; }
.blog-row { display: flex; align-items: center; gap: 0; }
.blog-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 520px; min-width: 0; }
.blog-search .bs-i { position: absolute; left: 15px; color: var(--text-mut); pointer-events: none; }
.blog-search input {
  width: 100%; min-width: 0; font: inherit; font-size: 15.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 76px 13px 42px; box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.blog-search input::placeholder { color: var(--text-mut); }
.blog-search input:focus { outline: none; border-color: var(--accent-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-link) 16%, transparent); }
.blog-search input::-webkit-search-cancel-button { display: none; }
.bs-k { position: absolute; right: 14px; font-family: var(--mono); font-size: 11px; color: var(--text-mut);
        background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
        padding: 2px 7px; pointer-events: none; }
.blog-search input:focus ~ .bs-k, .blog-search.has-q .bs-k { opacity: 0; }
.bs-x { position: absolute; right: 12px; display: grid; place-items: center; width: 26px; height: 26px;
        border: 0; border-radius: 50%; cursor: pointer; color: var(--text-mut);
        background: var(--surface-2); transition: color .2s, background .2s; }
.bs-x:hover { color: var(--text); background: var(--border); }
.bs-help {
  flex-shrink: 0; width: 34px; height: 34px; margin-left: 10px; border-radius: 50%;
  font: 700 14px/1 var(--font); cursor: pointer; color: var(--text-mut);
  background: var(--surface); border: 1px solid var(--border);
  transition: color .2s, border-color .2s, background .2s;
}
.bs-help:hover, .bs-help[aria-expanded="true"] {
  color: #fff; background: var(--accent-link); border-color: var(--accent-link);
}
.help-panel {
  position: absolute; z-index: 40; top: calc(100% + 10px); left: 0;
  width: min(620px, calc(100vw - 52px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 26px 20px; box-shadow: 0 24px 60px -28px rgba(16,24,40,.42), var(--shadow);
}
.help-panel h4 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 0 0 8px; color: var(--text); }
.hp-lede { font-size: 14px; color: var(--text-mut); line-height: 1.6; margin: 0 0 18px; }
.hp-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; counter-reset: hp; }
.hp-steps li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 3px 12px; counter-increment: hp; }
.hp-steps li::before {
  content: counter(hp, decimal-leading-zero); grid-row: span 3; align-self: start;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--accent-link);
  background: var(--accent-soft); border-radius: 7px; padding: 5px 0; text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent-link) 20%, transparent);
}
.hp-steps b { font-size: 13.6px; color: var(--text); }
.hp-steps span { font-size: 13px; color: var(--text-mut); line-height: 1.55; }
.hp-steps code { font-family: var(--mono); font-size: 11.6px; color: var(--accent-link);
                 background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
.hp-math { display: block; margin-top: 7px; padding: 9px 11px; font-size: 11.4px;
           color: var(--text-mut) !important; background: var(--surface-2) !important;
           border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; white-space: nowrap; }
.hp-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px;
            padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hp-stats div { display: grid; gap: 2px; }
.hp-stats b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--text); line-height: 1; }
.hp-stats span { font-size: 11px; color: var(--text-mut); line-height: 1.3; }
.hp-try { margin: 14px 0 0; font-size: 12.8px; color: var(--text-mut); display: flex;
          flex-wrap: wrap; gap: 7px; align-items: center; }
.hp-try button {
  font: 600 12.4px var(--mono); cursor: pointer; color: var(--accent-link);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent-link) 22%, transparent);
  border-radius: 7px; padding: 4px 9px; transition: background .2s, border-color .2s;
}
.hp-try button:hover { background: color-mix(in srgb, var(--accent-link) 16%, transparent); }
.blog-count em { font-style: normal; color: var(--accent-link); font-weight: 600; }
@media (max-width: 620px) {
  .help-panel { padding: 20px 18px 16px; }
  .hp-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 10px; }
  .hp-math { font-size: 10.2px; }
}
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.bf { font: inherit; font-size: 13.2px; font-weight: 600; color: var(--text-mut); cursor: pointer;
      background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
      padding: 7px 8px 7px 14px; display: inline-flex; align-items: center; gap: 8px;
      transition: color .2s, border-color .2s, background .2s; }
.bf:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent-link) 40%, var(--border)); }
.bf-n { font-family: var(--mono); font-size: 10.5px; font-weight: 700; min-width: 20px; text-align: center;
        padding: 2px 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-mut); }
.bf.is-on { color: #fff; background: var(--accent-link); border-color: var(--accent-link); }
.bf.is-on .bf-n { background: rgba(255,255,255,.22); color: #fff; }
.bf[disabled] { opacity: .42; cursor: default; }
.bf[disabled]:hover { color: var(--text-mut); border-color: var(--border); }
.blog-count { font-size: 13px; color: var(--text-mut); margin: 0; }
.blog-count b { color: var(--text); font-weight: 600; }
.blog-empty { text-align: center; padding: 56px 20px 60px; }
.blog-empty p { font-family: var(--serif); font-size: 21px; color: var(--text); margin: 0 0 8px; }
.blog-empty .be-sub { font-family: var(--font); font-size: 14.5px; color: var(--text-mut); max-width: 460px; margin: 0 auto; }
.post mark { background: color-mix(in srgb, var(--accent-link) 20%, transparent); color: inherit;
             border-radius: 3px; padding: 0 1px; }
@media (max-width: 620px) {
  .blog-search { max-width: none; }
  .bs-k { display: none; }
  .blog-filters { gap: 6px; }
  .bf { font-size: 12.4px; padding: 6px 7px 6px 12px; }
}
.post-body h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; margin: 8px 0 10px; color: var(--text); }
.post-body p { color: var(--text-soft); font-size: 14.6px; flex: 1; }
.post-body .more { margin-top: 16px; font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(100deg,var(--cyan),var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: gap .2s; }
.post:hover .more { gap: 11px; }

/* ---------- SUB-PAGE TOP BAR ---------- */
.subpage-top { padding: 20px 0 0; }
.subpage-top .back { color: var(--text-mut); font-size: 14px; font-weight: 500; display: inline-flex; gap: 7px; align-items: center; transition: color .2s; }
.subpage-top .back:hover { color: var(--accent-link); }
.teaser-cta { margin-top: 22px; }

/* ---------- PATENTS ---------- */
.pat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pat-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 22px 20px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .25s, border-color .2s; }
.pat-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--teal), var(--indigo), var(--violet)); opacity: .8; }
.pat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -18px rgba(16,24,40,.22), var(--shadow); border-color: color-mix(in srgb, var(--indigo) 45%, var(--border)); }
.pat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.pat-status { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pat-status.granted { color: #06121f; background: linear-gradient(135deg, var(--teal), var(--indigo)); }
.pat-status.pending { color: #06121f; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.pat-status.filed { color: var(--accent-link); border: 1px solid color-mix(in srgb, var(--accent-link) 40%, transparent); }
.pat-no { font-size: 12.5px; font-weight: 600; color: var(--text-mut); font-variant-numeric: tabular-nums; transition: color .2s; }
.pat-no:hover { color: var(--accent-link); }
.pat-card h3 { font-size: 17px; line-height: 1.28; letter-spacing: -.01em; margin-bottom: 8px; color: var(--text); }
.pat-card p { color: var(--text-soft); font-size: 14.2px; line-height: 1.6; flex: 1; }
.pat-foot { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.3px; color: var(--text-mut); }
.pat-foot a { font-weight: 700; color: var(--accent-link); white-space: nowrap; }
.pat-foot a:hover { text-decoration: underline; }

/* ---------- AI WORK / REFERENCE ARCHITECTURE ---------- */
.arch-figure { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px 18px; box-shadow: var(--shadow-sm); margin-bottom: 34px; overflow-x: auto; }
.arch-figure svg { width: 100%; height: auto; display: block; min-width: 660px; }
.arch-figure figcaption { margin-top: 12px; font-size: 12.5px; color: var(--text-mut); text-align: center; }
/* the vocabulary swap table in the leadership post */
.say { display: grid; gap: 12px; margin: 0 0 32px; }
.say-row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
           padding: 15px 18px; display: grid; gap: 8px; box-shadow: var(--shadow-sm); }
.say-old, .say-new { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px;
                     align-items: baseline; font-size: 15.6px; line-height: 1.52; }
.say-old { color: var(--text-mut); }
.say-new { color: var(--text); }
.say-old b, .say-new b { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
                         text-transform: uppercase; line-height: 1.8; }
.say-old b { color: var(--text-mut); opacity: .8; }
.say-new b { color: var(--accent-link); }
@media (max-width: 560px) {
  .say-old, .say-new { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .say-row { padding: 13px 15px; }
}

.work-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

/* first principles */
.principles { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px 32px; box-shadow: var(--shadow-sm); margin-bottom: 34px; }
.principles-head { max-width: 640px; margin-bottom: 22px; }
.principles-head h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.1; color: var(--text); margin: 10px 0 10px; }
.principles-head p { color: var(--text-soft); font-size: 16px; }
.principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; }
.principle { display: flex; gap: 13px; font-size: 14.6px; line-height: 1.56; color: var(--text-soft); }
.principle b { color: var(--text); font-weight: 700; }
.pr-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: linear-gradient(135deg, var(--teal), var(--indigo)); }
.principle:nth-child(2) .pr-dot { background: linear-gradient(135deg, var(--cyan), var(--indigo)); }
.principle:nth-child(3) .pr-dot { background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.principle:nth-child(4) .pr-dot { background: linear-gradient(135deg, var(--violet), var(--pink)); }
.principle:nth-child(5) .pr-dot { background: linear-gradient(135deg, var(--pink), var(--amber)); }
.principle:nth-child(6) .pr-dot { background: linear-gradient(135deg, var(--amber), var(--teal)); }
.principle:nth-child(7) .pr-dot { background: linear-gradient(135deg, var(--teal), var(--cyan)); }
.principle:nth-child(8) .pr-dot { background: linear-gradient(135deg, var(--indigo), var(--cyan)); }
@media (max-width: 720px) { .principles-grid { grid-template-columns: 1fr; } }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.work-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .25s, border-color .2s; }
.work-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--teal), var(--indigo)); opacity: .85; }
.work-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -18px rgba(16,24,40,.22), var(--shadow); border-color: color-mix(in srgb, var(--indigo) 45%, var(--border)); }
.work-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.work-num { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.02em; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.work-card h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; color: var(--text); }
.work-card p { color: var(--text-soft); font-size: 14.5px; line-height: 1.62; }
.work-chips { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 7px; }
.work-chips span { font-size: 11.8px; font-weight: 500; color: var(--text); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); }
.work-card[data-diagram] { cursor: pointer; }
.work-card[data-diagram]:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 3px; }
.work-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.work-link { font-size: 13px; font-weight: 700; color: var(--accent-link); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; }
.work-card:hover .work-link { gap: 10px; }

/* ---------- INTERACTIVE DIAGRAM MODAL (two-pane) ---------- */
.dlg-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(5,8,16,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: dlgfade .2s ease; }
.dlg-overlay[hidden] { display: none; }
@keyframes dlgfade { from { opacity: 0; } to { opacity: 1; } }
.dlg { position: relative; width: 100%; max-width: 1140px; max-height: 92vh; overflow: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow); padding: 30px 32px 28px; animation: dlgrise .28s cubic-bezier(.2,.7,.2,1); }
@keyframes dlgrise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.dlg-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-soft); font-size: 14px; cursor: pointer; transition: all .15s; }
.dlg-close:hover { color: var(--text); border-color: var(--accent-link); }
.dlg-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; }
.dlg-arch { overflow-x: auto; }
.arch2-svg { width: 100%; height: auto; display: block; min-width: 520px; }
.dlg-cap { min-height: 44px; font-size: 14px; line-height: 1.55; color: var(--text-soft); padding: 12px 14px; margin-top: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; transition: color .2s; }
.dlg-hint { font-size: 11.5px; color: var(--text-mut); margin-top: 8px; text-align: center; }
.dlg-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  background: linear-gradient(100deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dlg-info h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -.01em; color: var(--text); margin: 8px 0 0; }
.dlg-tag { font-style: italic; font-weight: 600; color: var(--accent-link); margin-top: 8px; font-family: var(--serif); font-size: 17px; }
.dlg-tag[hidden] { display: none; }
.dlg-summary { color: var(--text-soft); font-size: 15px; line-height: 1.65; margin-top: 14px; }
.dlg-bullets { list-style: none; margin-top: 18px; display: grid; gap: 11px; }
.dlg-bullets li { position: relative; padding-left: 22px; font-size: 13.8px; line-height: 1.5; color: var(--text); }
.dlg-bullets li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--teal), var(--indigo)); }

/* diagram nodes & edges */
.dnode { --nc: var(--indigo); cursor: default; transition: opacity .2s; outline: none; }
.dnode-rect { fill: color-mix(in srgb, var(--nc) 9%, var(--surface)); stroke: color-mix(in srgb, var(--nc) 48%, var(--border)); stroke-width: 1.6; transition: stroke .15s, fill .15s; }
.dnode-label { font-family: var(--font); font-size: 12.5px; font-weight: 700; fill: var(--text); }
.dnode-sub { font-family: var(--font); font-size: 10px; fill: var(--text-soft); }
.dgroup { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; fill: var(--text-mut); }
.arch2-svg.has-hot .dnode:not(.hot) { opacity: .3; }
.arch2-svg.has-hot .dedge:not(.lit) { opacity: .2; }
.dnode.hot .dnode-rect { stroke: var(--nc); stroke-width: 2.4; }
.dnode.hot { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--nc) 55%, transparent)); }
.dedge { stroke: var(--text-mut); stroke-width: 1.6; fill: none; }
.dedge.flow { stroke: var(--accent-link); stroke-dasharray: 6 7; animation: dflow 1s linear infinite; }
.dedge.dash { stroke-dasharray: 4 5; opacity: .55; }
.dedge.lit { stroke: var(--accent-link); stroke-width: 2.6; opacity: 1 !important; }
@keyframes dflow { to { stroke-dashoffset: -26; } }
@media (max-width: 860px) { .dlg-grid { grid-template-columns: 1fr; } .arch2-svg { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .dedge.flow { animation: none; } .dlg, .dlg-overlay { animation: none; } }

/* ---------- CONTACT ---------- */
.contact-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 50px; box-shadow: var(--shadow-sm); }
.contact-card::before { content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.2), transparent 70%); }
.contact-card h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px,3.8vw,40px); letter-spacing: -.02em; position: relative; color: var(--text); }
.contact-card p { color: var(--text-soft); margin-top: 12px; position: relative; }
.contact-list { display: grid; gap: 13px; position: relative; }
.contact-list a, .contact-list span { display: flex; align-items: center; gap: 13px; font-size: 15.5px; color: var(--text); padding: 14px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); transition: border-color .2s, transform .15s, box-shadow .2s; }
.contact-list a:hover { border-color: var(--cyan); transform: translateX(4px); box-shadow: var(--glow-blue); }
.contact-list .ci { width: 20px; color: var(--indigo); flex-shrink: 0; }

/* ---------- FOOTER (theme-aware) ---------- */
/* work published on the AWS engineering blogs: a slim strip, not a feature */
.extval { padding: 30px 0 0; }
.ev-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
           padding: 8px 18px 8px; box-shadow: var(--shadow-sm); }
.ev-lead { font-size: 13.4px; color: var(--text-mut); margin: 0; padding: 10px 0 11px;
           display: flex; align-items: center; gap: 11px; flex-wrap: wrap; line-height: 1.5; }
.ev-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
             color: var(--accent-link); background: var(--accent-soft); border-radius: 999px;
             padding: 4px 10px; flex-shrink: 0;
             border: 1px solid color-mix(in srgb, var(--accent-link) 20%, transparent); }
.ev { display: flex; align-items: center; gap: 14px; padding: 11px 0; text-decoration: none;
      border-top: 1px solid var(--border); transition: gap .2s; }
.ev-src { flex-shrink: 0; width: 176px; display: flex; align-items: baseline; gap: 8px;
          font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
          color: var(--accent-link); }
.ev-src i { font-family: var(--mono); font-style: normal; font-size: 10px; font-weight: 700;
            letter-spacing: 0; color: var(--text-mut); }
.ev-t { flex: 1; min-width: 0; font-size: 14.6px; font-weight: 500; color: var(--text); line-height: 1.4; }
.ev-go { flex-shrink: 0; color: var(--text-mut); transition: color .2s, transform .2s; }
.ev:hover .ev-t { color: var(--accent-link); }
.ev:hover .ev-go { color: var(--accent-link); transform: translate(2px, -2px); }
@media (max-width: 720px) {
  .extval { padding: 24px 0 0; }
  .ev-card { padding: 6px 15px; }
  .ev { flex-wrap: wrap; gap: 4px 10px; padding: 12px 0; }
  .ev-src { width: auto; }
  .ev-t { flex: 1 1 100%; font-size: 14px; }
  .ev-go { position: absolute; opacity: 0; }
}

/* The architecture and patents teasers sit back to back on the same background,
   so their stacked 60px paddings read as a hole rather than as separation. They
   are also short: a heading, a sentence and one button each. */
#aiwork  { padding-bottom: 26px; }
#patents { padding-top: 26px; }
#aiwork .section-head, #patents .section-head { margin-bottom: 0; }
/* close the gap on both sides of the teaser sentence: the heading sits nearer
   to it above, the button nearer below */
#aiwork .section-head h2, #patents .section-head h2 { margin: 8px 0 8px; }
#aiwork .teaser-cta,  #patents .teaser-cta  { margin-top: 14px; }
@media (max-width: 620px) {
  #aiwork  { padding-bottom: 18px; }
  #patents { padding-top: 18px; }
}

/* colophon: a footnote, so it reads at footnote weight rather than as a section */
.colophon { padding: 24px 0 30px; }
.colo {
  max-width: 780px; margin: 0 auto; text-align: center;
  padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12.8px; line-height: 1.62; color: var(--text-mut); text-wrap: pretty;
}
.colo b { color: var(--text); font-weight: 600; }
.colo-i { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--accent-link); }
@media (max-width: 620px) {
  .colophon { padding: 18px 0 24px; }
  .colo { font-size: 12.2px; padding-top: 15px; }
}

.foot { background: var(--foot-bg); color: var(--foot-fg); padding: 42px 0; border-top: 1px solid var(--foot-border); transition: background .4s ease, color .4s ease; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.foot a { transition: color .2s; }
.foot a:hover { color: var(--accent-link); }
.foot .fl { display: flex; gap: 22px; font-size: 14px; }

/* ---------- ARTICLE (blog posts) ---------- */
.article-hero { position: relative; overflow: hidden; color: var(--on-dark); padding: 66px 0 74px;
  background:
    radial-gradient(800px 420px at 82% -20%, rgba(96,165,250,.14), transparent 60%),
    radial-gradient(620px 360px at 4% 10%, rgba(148,163,184,.10), transparent 60%),
    linear-gradient(180deg, #070b18 0%, #0a1024 100%); }
.article-hero .wrap { position: relative; z-index: 1; }
.article-hero .back { color: var(--on-dark-mut); font-size: 14px; display: inline-flex; gap: 7px; align-items: center; transition: color .2s; }
.article-hero .back:hover { color: var(--cyan); }
.article-hero .tag { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12.5px; background: linear-gradient(100deg,var(--teal),var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.article-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px,5vw,52px); line-height: 1.08; letter-spacing: -.02em; margin: 14px 0 16px; max-width: 820px; }
.article-hero .meta { color: var(--on-dark-mut); font-size: 14.5px; display: flex; gap: 14px; flex-wrap: wrap; }
.article { max-width: 760px; margin: 0 auto; padding: 64px 26px 90px; }
.article p { font-size: 18px; line-height: 1.78; color: var(--text); margin-bottom: 22px; }
.article h2 { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -.01em; margin: 42px 0 14px; color: var(--text); }
.article h3 { font-size: 21px; margin: 28px 0 10px; letter-spacing: -.01em; color: var(--text); }
.article ul { margin: 0 0 22px 0; padding-left: 4px; list-style: none; display: grid; gap: 10px; }
.article ul li { position: relative; padding-left: 24px; font-size: 17px; color: var(--text); line-height: 1.6; }
.article ul li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg,var(--teal),var(--indigo)); }
.article blockquote { border-left: 3px solid var(--cyan); padding: 6px 0 6px 22px; margin: 28px 0; font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--text); font-style: italic; }
.article .lead { font-size: 21px; color: var(--text); line-height: 1.6; }
.article-cta { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 920px) {
  .grid-exp, .blog-grid, .band-grid, .pat-grid, .work-grid { grid-template-columns: repeat(2,1fr); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-cell:nth-child(3) { border-left: none; }
  .contact-card { grid-template-columns: 1fr; padding: 38px; }
}
@media (max-width: 900px) {
  .cap-layout { grid-template-columns: 1fr; }
  .loop { grid-template-columns: 1fr; }
  .loop-step .ls-arrow { right: 50%; top: auto; bottom: -26px; transform: translateX(50%) rotate(90deg); }
}
@media (max-width: 620px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .grid-exp, .blog-grid, .band-grid, .stats-grid, .pat-grid, .work-grid { grid-template-columns: 1fr; }
  .stat-cell { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .stat-cell:first-child { border-top: none; }
  section { padding: 66px 0; }
  .band { padding: 40px 26px; }
  .tl-when { margin-left: 0; }
  .article p, .article ul li { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .brand .mark, .hero h1 .grad, .eyebrow .dot, .arc-arrow::before, .scroll-cue { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- FLOATING CHAT WIDGET ---------- */
.cw { position: fixed; right: 22px; bottom: 22px; z-index: 300; font-family: var(--font); }
/* The assistant launcher. Three colour stops rather than two so the disc has a
   lit corner instead of reading as a flat circle, an inset highlight along the
   top edge, and a shadow tinted with the accent so it sits on paper rather than
   floating in grey. */
.cw-fab {
  position: relative; width: 60px; height: 60px; border-radius: 50%; border: none;
  cursor: pointer; display: grid; place-items: center; isolation: isolate;
  color: var(--on-accent);
  background: radial-gradient(120% 120% at 28% 22%, var(--fab-a) 0%, var(--fab-b) 48%, var(--fab-c) 100%);
  box-shadow: 0 10px 26px -8px var(--fab-glow),
              0 3px 10px -3px rgba(16,24,40,.18),
              inset 0 1px 0 rgba(255,255,255,.34),
              inset 0 -2px 6px rgba(16,24,40,.16);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.cw-fab svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(16,24,40,.22)); }
.cw-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 18px 38px -10px var(--fab-glow),
              0 5px 14px -4px rgba(16,24,40,.22),
              inset 0 1px 0 rgba(255,255,255,.4),
              inset 0 -2px 6px rgba(16,24,40,.16);
}
.cw-fab:active { transform: translateY(-1px) scale(1.01); }
.cw-fab:focus-visible { outline: 3px solid var(--accent-link); outline-offset: 3px; }
.cw-fab.hidden { display: none; }

/* a slow halo, so the launcher is noticed once without nagging */
.cw-fab::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1;
  border: 2px solid var(--fab-b); opacity: 0;
  animation: cwhalo 4.5s cubic-bezier(.2,.7,.2,1) 2.2s 3;
}
@keyframes cwhalo {
  0%   { transform: scale(1);    opacity: .55; }
  55%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}
.cw-fab:hover::after { animation: none; opacity: 0; }

.cw-fab-dot {
  position: absolute; top: 11px; right: 11px; width: 10px; height: 10px; border-radius: 50%;
  background: #34d399; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(16,24,40,.08);
}
@media (prefers-reduced-motion: reduce) {
  .cw-fab::after { animation: none; }
  .cw-fab:hover { transform: none; }
}
.cw-panel { position: fixed; right: 22px; bottom: 22px; width: min(390px, calc(100vw - 28px)); height: min(620px, calc(100vh - 90px)); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; animation: cwrise .26s cubic-bezier(.2,.7,.2,1); }
.cw-panel[hidden] { display: none; }
@keyframes cwrise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.cw-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cw-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.cw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-link); box-shadow: 0 0 0 0 rgba(56,189,248,.55); animation: pulse 2s infinite; }
.cw-actions { display: flex; gap: 6px; }
.cw-icbtn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; font-size: 13px; font-weight: 700; transition: all .15s; }
.cw-icbtn:hover { color: var(--text); border-color: var(--accent-link); }
.cw-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.cw-msg { max-width: 90%; font-size: 14px; line-height: 1.6; animation: cwmsg .25s ease; }
@keyframes cwmsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cw-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--teal), var(--indigo)); color: var(--on-accent); font-weight: 500; padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.cw-msg.bot { align-self: flex-start; color: var(--text); }
.cw-bubble { background: var(--surface-2); border: 1px solid var(--border); padding: 10px 13px; border-radius: 14px 14px 14px 4px; }
.cw-bubble b { color: var(--text); font-weight: 700; }
.cw-srcs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cw-srcs-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); font-weight: 700; }
.cw-src { font-size: 12px; font-weight: 600; color: var(--accent-link); border: 1px solid color-mix(in srgb, var(--accent-link) 36%, transparent); padding: 4px 10px; border-radius: 999px; cursor: pointer; background: none; font-family: var(--font); transition: background .15s; }
.cw-src:hover { background: color-mix(in srgb, var(--accent-link) 12%, transparent); }
.cw-typing { display: inline-flex; gap: 4px; }
.cw-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-mut); animation: cwblink 1s infinite; }
.cw-typing i:nth-child(2) { animation-delay: .15s; }
.cw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cwblink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
.cw-chips { display: flex; flex-wrap: nowrap; gap: 7px; padding: 0 14px 9px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.cw-chips::-webkit-scrollbar { display: none; }
.cw-chip { flex: 0 0 auto; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--text-soft); border: 1px solid var(--border); background: var(--surface-2); padding: 6px 11px; border-radius: 999px; cursor: pointer; font-family: var(--font); transition: border-color .15s, color .15s, transform .15s; }
.cw-chip:hover { border-color: var(--accent-link); color: var(--text); transform: translateY(-1px); }
.cw-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.cw-input input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; color: var(--text); font-family: var(--font); font-size: 14px; outline: none; transition: border-color .2s; }
.cw-input input:focus { border-color: var(--accent-link); }
.cw-send { width: 42px; flex-shrink: 0; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--teal), var(--indigo)); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.cw-send:hover { transform: translateY(-1px); }
.cw-foot { font-size: 10.5px; color: var(--text-mut); text-align: center; padding: 0 0 10px; }
.cw-helpcard { position: absolute; inset: 0; background: var(--surface); padding: 20px 18px; overflow-y: auto; z-index: 3; animation: cwrise .2s; }
.cw-helpcard h4 { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--text); margin: 6px 36px 10px 0; }
.cw-helpcard p { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); margin-bottom: 12px; }
.cw-helpcard p b { color: var(--text); }
.cw-helpback { position: absolute; top: 14px; right: 14px; }
.cw-step { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin-bottom: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.cw-step b { font-size: 12.5px; color: var(--accent-link); font-weight: 700; }
.cw-step span { font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.cw-help-meta { font-size: 11.5px; color: var(--text-mut); }
@media (max-width: 480px) { .cw-panel { width: calc(100vw - 20px); right: 10px; bottom: 10px; height: calc(100vh - 80px); } .cw { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .cw-panel, .cw-msg, .cw-helpcard { animation: none; } .cw-typing i, .cw-dot { animation: none; } }


/* ============================================================
   EXECUTIVE REFINEMENT
   Flat surfaces, one accent, no gradient-filled type.
   ============================================================ */

/* Numerals and kickers read as typography, not as artwork */
.stat-cell .num, .stat-cell:nth-child(1n) .num,
.loop-step .ls-num, .loop-step:nth-child(1n) .ls-num,
.work-num, .kicker, .dlg-kicker, .tl-co, .article-hero .tag, .hero h1 .grad {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}
.stat-cell .num, .stat-cell:nth-child(1n) .num { color: var(--text) !important; }
.loop-step .ls-num, .loop-step:nth-child(1n) .ls-num { color: var(--text-mut) !important; }
.work-num { color: var(--text-mut) !important; }
.kicker, .dlg-kicker { color: var(--accent-link) !important; }
.tl-co { color: var(--text-soft) !important; }
.hero h1 .grad { color: var(--accent-link) !important; }
.article-hero .tag { color: var(--accent-link) !important; }
.band-grid .num, .band-grid > div:nth-child(1n) .num {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: var(--on-dark) !important;
}

/* Icon tiles: a soft accent wash with an accent glyph, not a colour-cycled chip */
.card .ico, .card:nth-child(1n) .ico {
  background: var(--accent-soft) !important;
  color: var(--accent-link) !important;
  border: 1px solid color-mix(in srgb, var(--accent-link) 18%, transparent);
}

/* Primary action: solid, not a gradient pill */
.btn-primary {
  background: var(--accent-link) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -10px rgba(16,24,40,.4) !important;
  border: 1px solid var(--accent-link);
}
.btn-primary:hover { filter: brightness(1.06); }

/* Monogram badge */
.brand .mark { background: var(--accent-link) !important; color: #ffffff !important; }

/* Softer interaction: keep the motion, lower the volume */
.cursor-glow { background: radial-gradient(circle, rgba(29,78,216,.055), rgba(29,78,216,.03) 40%, transparent 68%); }
.cursor-glow { mix-blend-mode: normal; }
.card:hover, .post:hover, .pat-card:hover, .work-card:hover, .loop-step:hover { transform: translateY(-2px); }
.article-hero .back:hover { color: var(--accent-link); }

/* Section rhythm: more air on larger screens, mobile spacing left intact */
@media (min-width: 621px) {
  section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
}
.band { border-radius: 16px; }

/* ---- HERO: two column with portrait ---- */
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: center; }
.hero-portrait { position: relative; width: 300px; height: 360px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hero-border); background: var(--hero-surface); box-shadow: var(--shadow); justify-self: end; }
.hero-portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif);
  font-size: 84px; font-weight: 600; letter-spacing: .02em; color: var(--hero-fg-mut); opacity: .5; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-portrait { width: 190px; height: 230px; justify-self: start; order: -1; }
  .portrait-fallback { font-size: 54px; }
}

.hero-inner { max-width: 1060px; }
.hero-copy { min-width: 0; }

/* ---------- CONTACT FORM ---------- */

/* ---------- CONTACT: reveal toggle ---------- */
.contact-toggle {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  font-family: var(--font); font-size: 15.5px; font-weight: 600; color: var(--accent-link);
  padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent-link) 35%, transparent);
  border-radius: 11px; background: var(--accent-soft); cursor: pointer;
  transition: border-color .18s, transform .18s, background .18s;
}
.contact-toggle:hover { border-color: var(--accent-link); transform: translateX(4px); }
.contact-toggle .ci { width: 20px; color: var(--accent-link); flex-shrink: 0; }
.contact-toggle[aria-expanded="true"] { background: transparent; }

/* the hidden attribute must win over the form's display:grid */
.pat-meta { font-size: 13.5px; color: var(--text-mut); line-height: 1.55; margin-top: 4px; }

/* ---------------------------------------------------------------------------
   CODE BLOCKS IN ARTICLES
   Used for Redis command listings and Lua scripts. Monospace, horizontally
   scrollable on narrow screens, and quiet enough to sit inside running prose.
--------------------------------------------------------------------------- */
:root { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

.article pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 26px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.article pre code {
  font-family: var(--mono);
  font-size: 13.2px;
  line-height: 1.72;
  color: var(--text-soft);
  white-space: pre;
  background: none;
  border: 0;
  padding: 0;
}
.article p code, .article li code {
  font-family: var(--mono);
  font-size: .88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
.article pre .cm { color: var(--text-mut); }
.article pre .kw { color: var(--accent-link); font-weight: 600; }

/* a short caption that labels what a listing is, sitting right above it */
.code-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mut); margin: 0 0 9px; display: block;
}
@media (max-width: 620px) {
  .article pre code { font-size: 12.2px; }
  .article pre { padding: 15px 15px; border-radius: 12px; }
}

/* ---------------------------------------------------------------------------
   OPERATING PRINCIPLES, five-metric strip, and the SKILL LENS over experience
--------------------------------------------------------------------------- */
.op-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 34px; }
.op-principle {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
.op-principle:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-link) 42%, var(--border)); }
.op-principle .op-idx {
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--accent-link);
  letter-spacing: .04em; display: block; margin-bottom: 8px;
}
.op-principle h3 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 9px; color: var(--text); }
.op-principle p { font-size: 14.6px; line-height: 1.62; color: var(--text-soft); margin: 0; }
@media (max-width: 900px) { .op-principles { grid-template-columns: 1fr; } }

.stats-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- skill lens ---- */
.lens { margin-bottom: 26px; }
.lens-note {
  font-size: 14.6px; line-height: 1.62; color: var(--text-soft);
  max-width: 720px; margin: 0 0 16px;
}
.lens-note b { color: var(--text); font-weight: 600; }
.lens-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lens-chip {
  font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .18s, color .18s, background .18s, transform .15s;
}
.lens-chip:hover { border-color: var(--accent-link); color: var(--text); transform: translateY(-1px); }
.lens-chip[aria-pressed="true"] {
  color: var(--accent-link); border-color: var(--accent-link);
  background: var(--accent-soft); font-weight: 600;
}
.lens-chip .lc-n { font-size: 11.5px; opacity: .72; font-variant-numeric: tabular-nums; }
.lens-chip[disabled] { opacity: .38; cursor: default; }
.lens-chip[disabled]:hover { transform: none; border-color: var(--border); color: var(--text-soft); }

.lens-status {
  margin-top: 14px; font-family: var(--mono); font-size: 12.4px; letter-spacing: .01em;
  color: var(--text-mut); display: flex; align-items: center; gap: 9px; min-height: 18px;
}
.lens-status .ls-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-link);
  flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent-soft);
}
.lens-status b { color: var(--text); font-weight: 600; }

/* filtered-out bullets and roles collapse rather than vanish abruptly */
.tl-body li { transition: opacity .25s; }
.tl-body li[hidden] { display: none; }
.tl-item[data-lens-off="1"] { display: none; }
.tl-item.lens-hit .tl-role::after {
  content: attr(data-hits); margin-left: 9px; font-size: 11px; font-weight: 600;
  font-family: var(--mono); color: var(--accent-link); background: var(--accent-soft);
  border-radius: 999px; padding: 2px 8px; vertical-align: middle;
}
.lens-empty {
  border: 1px dashed var(--border); border-radius: 14px; padding: 22px;
  color: var(--text-mut); font-size: 14.5px; text-align: center;
}
@media (max-width: 620px) {
  .lens-chip { font-size: 12.4px; padding: 6px 12px; }
  .lens-status { font-size: 11.6px; }
}

/* ===========================================================================
   LAYOUT PASS: circular portrait, six-step arc, no-clip timeline, mobile
   =========================================================================== */

/* ---- portrait: smaller and circular, so it reads as a headshot not a poster ---- */
.hero-portrait {
  width: 216px; height: 216px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent-link) 34%, transparent);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.55);
}
.hero-portrait img { border-radius: 50%; }
.portrait-fallback { font-size: 62px; }
.hero-grid { grid-template-columns: minmax(0,1fr) 216px; gap: 44px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-portrait { width: 132px; height: 132px; border-width: 2px; }
  .portrait-fallback { font-size: 40px; }
}

/* ---- career arc: six facets that wrap cleanly instead of a flex row with
       orphaned arrows. Each step carries its own accent rail. ---- */
.arc {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px 18px; flex-wrap: nowrap;
  border-top: 1px solid var(--hero-border); padding-top: 26px; margin-top: 32px;
}
.arc-step {
  position: relative; min-width: 0; padding-left: 13px;
  display: flex; flex-direction: column; gap: 5px;
}
.arc-step::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-link), color-mix(in srgb, var(--accent-link) 12%, transparent));
}
.arc-when  { font-size: 10px; letter-spacing: .15em; }
.arc-what  { font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.16; }
.arc-scale { font-size: 11.6px; line-height: 1.42; overflow-wrap: break-word; }
.arc-arrow { display: none; }
@media (max-width: 1100px) { .arc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .arc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding-top: 22px; } }

/* ---- timeline body: animate with grid rows so long roles are never clipped.
       A fixed max-height cut text off once bullets wrapped on narrow screens. ---- */
.tl-body { max-height: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s ease; }
.tl-item.open .tl-body { max-height: none; grid-template-rows: 1fr; }
.tl-body > * { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .tl-body { transition: none; } }

/* ---- give prose room to breathe and stop long tokens from overflowing ---- */
.card p, .tl-body li, .skill-block p, .op-principle p, .cap-panel p, .lens-note { overflow-wrap: break-word; }
.grid-exp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid-exp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 920px)  { .grid-exp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- five stat cells: dividers have to follow the column count, not assume four ---- */
@media (max-width: 1080px) {
  .stat-cell { border-left: none; border-top: 1px solid var(--stats-border); }
  .stat-cell:nth-child(-n+3) { border-top: none; }
  .stat-cell { padding: 18px 14px; }
  .stat-cell .lbl { font-size: 12.6px; }
}
@media (max-width: 620px) {
  .stat-cell:nth-child(-n+3) { border-top: 1px solid var(--stats-border); }
  .stat-cell:nth-child(-n+2) { border-top: none; }
}

/* ---- mobile: more line length, tighter headings, nothing running off screen ---- */
@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .hero h1 { font-size: clamp(29px, 8.4vw, 38px); min-height: 2.3em; }
  .hero .lede { font-size: 16px; line-height: 1.6; }
  .eyebrow { font-size: 11.5px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .tl-item { padding-left: 42px; }
  .tl-role { font-size: 17px; }
  .tl-head { gap: 5px 10px; }
  .tl-when { font-size: 11.5px; padding: 3px 9px; }
  .tl-body li { font-size: 14.6px; }
  .section-head h2 { overflow-wrap: break-word; }
  .op-principle { padding: 20px 18px; }
  .card { padding: 20px 18px; }
  .lens-note { font-size: 14px; }
}
@media (max-width: 344px) {
  .arc { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 27px; }
}

/* five cells do not divide by two, so the last one takes the full row */
@media (max-width: 780px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell:nth-child(5) { grid-column: 1 / -1; }
  .stat-cell { border-left: none; border-top: 1px solid var(--stats-border); }
  .stat-cell:nth-child(-n+2) { border-top: none; }
}

/* ---------------------------------------------------------------------------
   THE STACK: skills as scannable chips in blocks of uneven width, ordered top
   of stack to foundation so it mirrors the rest of the page. Filled chips are
   the ones he goes deep on, which is the hierarchy a flat list never shows.
--------------------------------------------------------------------------- */
.stack-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.sk { grid-column: span 2; }
.sk.wide { grid-column: span 3; }
.sk.full { grid-column: span 6; }

.sk {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 20px 18px; box-shadow: var(--shadow-sm);
  transition: border-color .22s, transform .18s, box-shadow .25s;
}
.sk:hover { border-color: color-mix(in srgb, var(--accent-link) 40%, var(--border)); transform: translateY(-2px); }
.sk-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; }
.sk-head h3 { font-size: 15.5px; letter-spacing: -.01em; color: var(--text); margin: 0; }
.sk-n {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-mut);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chips span {
  font-size: 12.4px; line-height: 1.25; color: var(--text-soft);
  border: 1px solid var(--border); background: var(--surface-2);
  padding: 5px 10px; border-radius: 8px; transition: color .15s, border-color .15s;
}
.sk-chips span:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent-link) 45%, var(--border)); }
.sk-chips span.c {
  color: var(--accent-link); font-weight: 600;
  border-color: color-mix(in srgb, var(--accent-link) 40%, transparent);
  background: var(--accent-soft);
}
.sk-legend { font-size: 13px; color: var(--text-mut); margin-top: 20px; display: flex; align-items: center; gap: 9px; }
.sk-legend i { font-style: normal; font-size: 11.6px; font-weight: 600; color: var(--accent-link);
  border: 1px solid color-mix(in srgb, var(--accent-link) 40%, transparent);
  background: var(--accent-soft); padding: 3px 9px; border-radius: 7px; }

/* credentials are not skills, so they get their own quiet strip */
.creds { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cred {
  flex: 1 1 240px; display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 14px; padding: 15px 18px; background: var(--surface-2);
}
.cred svg { width: 20px; height: 20px; color: var(--accent-link); flex-shrink: 0; }
.cred-t { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cred-s { font-size: 12.4px; color: var(--text-mut); line-height: 1.35; margin-top: 2px; }

@media (max-width: 1080px) {
  .stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sk, .sk.wide { grid-column: span 2; }
  .sk.full { grid-column: span 4; }
}
@media (max-width: 720px) {
  .stack-grid { grid-template-columns: minmax(0, 1fr); }
  .sk, .sk.wide, .sk.full { grid-column: span 1; }
  .sk { padding: 18px 16px 16px; }
  .sk-chips span { font-size: 12px; padding: 5px 9px; }
}

/* ---------------------------------------------------------------------------
   PORTRAIT: nothing paints over the photo, and nothing blends into it.
   The fallback monogram sits in the same box as the image and the cursor glow
   is a blend layer on a shared stacking context, so both are fenced off here.
--------------------------------------------------------------------------- */
.hero-portrait {
  isolation: isolate;          /* no outside mix-blend-mode can reach inside */
  z-index: 3;                  /* above the cursor glow no matter the order */
  background-clip: padding-box;
  border-color: color-mix(in srgb, var(--accent-link) 55%, transparent);
}
.hero-portrait img {
  position: relative; z-index: 2;
  filter: none; mix-blend-mode: normal; opacity: 1;
}
/* the monogram is a fallback, so it should not exist once a photo has loaded */
.portrait-fallback { z-index: 0; }
.hero-portrait:has(img) .portrait-fallback { display: none; }
/* the file is already a square, face-centred crop, so the browser has nothing
   to reposition. Left at the default; no filter, blend or opacity is applied
   anywhere above, so what renders is the photograph as shot. */
.hero-portrait img { object-position: 50% 50%; }

/* ---------------------------------------------------------------------------
   HOMEPAGE HUB
   The homepage is now a front door, not the whole site. Each card quotes real
   content from the page it opens rather than describing it in the abstract.
--------------------------------------------------------------------------- */
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hub-card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 26px 24px; box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none; position: relative;
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
.hub-card:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-link) 45%, var(--border));
  box-shadow: 0 14px 32px -20px rgba(16,24,40,.26), var(--shadow);
}
.hub-card.wide { grid-column: 1 / -1; }
.hub-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-link); display: block; margin-bottom: 9px;
}
.hub-card h3 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 25px);
  letter-spacing: -.01em; color: var(--text); margin: 0 0 10px; line-height: 1.16;
}
.hub-card > p { font-size: 15.2px; line-height: 1.66; color: var(--text-soft); margin: 0 0 16px; }


/* the experience card shows the actual companies, so the card is evidence not a label */
.hub-roles { display: grid; gap: 2px; margin-bottom: 18px; }
.hub-role {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px;
  align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border);
  font-size: 13.6px;
}
.hub-role:first-child { border-top: none; }
.hub-role b { color: var(--text); font-weight: 700; }
.hub-role span { color: var(--text-soft); min-width: 0; }
.hub-role em { font-style: normal; color: var(--text-mut); font-size: 12.4px; white-space: nowrap; }
.hub-role.more b, .hub-role.more span { color: var(--text-mut); font-weight: 500; }

.hub-more {
  font-size: 13.6px; font-weight: 600; color: var(--accent-link);
  display: inline-flex; align-items: center; gap: 7px;
}
.hub-more::after {
  content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor;
  border-right: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .18s;
}
.hub-card:hover .hub-more::after { transform: rotate(45deg) translate(2px, -2px); }

@media (max-width: 860px) {
  .hub { grid-template-columns: minmax(0, 1fr); }
  .hub-card, .hub-card.wide { grid-column: auto; }
  .hub-role { grid-template-columns: minmax(0, 1fr) auto; }
  .hub-role span { display: none; }
}
@media (max-width: 620px) {
  .hub-card { padding: 22px 20px 20px; }
}

/* ---------------------------------------------------------------------------
   HEADING WRAP
   Section headings were capped at 730px while the type scales to 46px, so a
   long heading wrapped and left a single orphaned word on the second line.
--------------------------------------------------------------------------- */
.section-head h2 { text-wrap: balance; }   /* spread lines evenly, no orphans */
.hub-card h3    { text-wrap: balance; }

/* this one heading is long enough to need the extra room */
#explore .section-head { max-width: 880px; }
#explore .section-head p { max-width: 620px; }

/* ---------------------------------------------------------------------------
   COMPANY WALL on the experience hub card
   Each tile carries a monogram that a real logo file can cover if one is
   dropped into assets/logos. The monogram is the fallback, not a placeholder,
   so the card looks finished whether or not any logos are present.
--------------------------------------------------------------------------- */
.co-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin-bottom: 20px; }
.co { display: flex; align-items: center; gap: 12px; min-width: 0; }

.co-mark {
  position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-link) 24%, transparent);
  transition: border-color .2s, transform .2s;
}
.co-mark i {
  font-style: normal; font-weight: 700; font-size: 13.5px; letter-spacing: .01em;
  color: var(--accent-link);
}
/* a supplied logo sits on top of the monogram and hides it */
.co-mark img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 7px; background: #ffffff;
}
.hub-card:hover .co-mark { border-color: color-mix(in srgb, var(--accent-link) 50%, transparent); }

.co-txt { display: grid; gap: 1px; min-width: 0; }
.co-txt b     { font-size: 13.8px; font-weight: 700; color: var(--text); line-height: 1.25;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-txt em    { font-style: normal; font-size: 12.4px; font-weight: 600; color: var(--accent-link); }
.co-txt small { font-size: 11.8px; color: var(--text-mut); line-height: 1.35;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.co.earlier .co-mark { background: var(--surface-2); border-color: var(--border); }
.co.earlier .co-mark i { color: var(--text-mut); }
.co.earlier .co-txt b { font-weight: 600; color: var(--text-soft); white-space: normal; }

@media (max-width: 980px) { .co-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .co-wall { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .co-mark { width: 40px; height: 40px; border-radius: 10px; }
}

/* ---------------------------------------------------------------------------
   HUB CARD PREVIEWS
   Pills made these cards ragged, because the labels run from two words to six.
   Each card now previews the shape of the page it opens instead: the strengths
   as an icon index, the operating model as a miniature of its altitude stack.
--------------------------------------------------------------------------- */

/* strengths, borrowing the real icons from the expertise cards */
/* Four strength rows sit beside five ladder rungs, so the rows are paced to
   land on the same overall height and the two cards read as a pair. */
.sg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; margin-bottom: 18px; }
.sg { display: flex; align-items: center; gap: 11px; padding: 14px 0; min-width: 0;
      border-top: 1px solid var(--border); }
.sg:nth-child(1), .sg:nth-child(2) { border-top: none; }
.sg-i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
        background: var(--accent-soft); color: var(--accent-link);
        border: 1px solid color-mix(in srgb, var(--accent-link) 20%, transparent); }
.sg-t { font-size: 13.4px; font-weight: 600; color: var(--text); line-height: 1.25;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-card:hover .sg-i { border-color: color-mix(in srgb, var(--accent-link) 45%, transparent); }

/* The altitude stack, styled exactly like the strength rows opposite it:
   same tile, same typography, hairline separators, no filled boxes. Only the
   tile carries a number instead of an icon. */
.ladder { display: grid; margin-bottom: 18px; }
.lr {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 1px 11px;
  align-items: center; padding: 9px 0; min-width: 0;
  border-top: 1px solid var(--border);
}
.lr:first-child { border-top: none; }
.lr-n {
  grid-row: span 2; align-self: center;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-link);
  border: 1px solid color-mix(in srgb, var(--accent-link) 20%, transparent);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  transition: border-color .2s;
}
.lr-t { font-size: 13.4px; font-weight: 600; color: var(--text); line-height: 1.2;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-d { font-size: 11.8px; color: var(--text-mut); line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-card:hover .lr-n { border-color: color-mix(in srgb, var(--accent-link) 45%, transparent); }

@media (max-width: 980px) {
  .sg-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sg { padding: 9px 0; }
  .sg:nth-child(2) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .lr-d { display: none; }
}

/* ---------------------------------------------------------------------------
   CLOSING BAND
   The homepage ends on an invitation rather than stopping after patents, but
   the form itself lives on its own page so there is only one copy of it.
--------------------------------------------------------------------------- */
.closer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 34px 36px; box-shadow: var(--shadow-sm);
}
.closer h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -.015em; line-height: 1.12; margin: 10px 0 10px; color: var(--text);
  text-wrap: balance;
}
.closer p { font-size: 16px; line-height: 1.62; color: var(--text-soft); margin: 0; max-width: 620px; }
.closer .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .closer { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 24px; }
  .closer .btn { justify-content: center; }
}