/* ===== v3 — Light editorial theme (consulting-report feel) ===== */
:root {
  --paper: #f6f3ec;
  --paper-2: #efebe1;
  --card: #fbf9f4;
  --ink: #0f1b2d;
  --ink-2: #2b3a52;
  --muted: #5b6577;
  --dim: #8a909b;
  --rule: rgba(15, 27, 45, 0.12);
  --rule-strong: rgba(15, 27, 45, 0.28);
  --accent: #c2410c;
  --accent-ink: #9a3412;
  --accent-soft: rgba(194, 65, 12, 0.08);
  --accent-border: rgba(194, 65, 12, 0.35);
  /* names kept for the swarm overlay */
  --bright: var(--ink); --text: var(--ink-2); --border: var(--rule); --border-strong: var(--rule-strong);
  --accent-dim: var(--accent-soft);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: var(--serif);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 4px;
  --swarm-colors: #0f1b2d,#c2410c,#1d4ed8,#0f766e,#a16207,#7c3aed,#be123c,#0369a1,#4d7c0f,#9a3412,#334155,#b45309;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--paper); color: var(--ink-2); font-family: var(--sans);
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong, b { color: var(--ink); font-weight: 600; }
::selection { background: var(--accent); color: #fff; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.container { width: min(1120px, 100% - 48px); margin-inline: auto; }

/* paper grain + faint ledger lines */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% 32px; opacity: .25;
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dot, .status i, .portrait-tag i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

/* ===== Dock ===== */
.dock-wrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 12px; }
.dock {
  display: flex; align-items: center; gap: 18px; padding: 7px 10px 7px 7px;
  background: rgba(251, 249, 244, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 8px 30px rgba(15,27,45,.08);
}
.dock-brand { display: flex; align-items: center; gap: 9px; }
.dock-mark {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font: 600 italic 13px var(--serif);
}
.dock-name { font: 600 15px var(--serif); color: var(--ink); letter-spacing: -.01em; }
.dock-links { display: flex; gap: 2px; }
.dock-links a { display: block; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); transition: all .2s var(--ease); }
.dock-links a:hover { color: var(--ink); }
.dock-links a.active { background: var(--ink); color: var(--paper); }
.dock-cta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; padding-right: 6px; }
.status { font: 500 10px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.status i { width: 6px; height: 6px; background: #15803d; }
.dock-hire { font: 600 12px var(--mono); color: var(--accent); }
.dock-hire:hover { color: var(--ink); }

/* ===== Hero ===== */
.hero { position: relative; padding-top: 90px; overflow: hidden; }
.hero-outline {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(100px, 21vw, 300px); line-height: .9; text-align: center; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(15, 27, 45, .22); user-select: none; white-space: nowrap;
}
.portrait { display: flex; justify-content: center; margin-top: clamp(-140px, -8vw, -45px); position: relative; z-index: 2; }
.portrait-frame {
  position: relative; width: min(280px, 68vw); aspect-ratio: 4 / 5; padding: 10px;
  background: var(--card); border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(15,27,45,.35);
}
.portrait-frame::after { content: ''; position: absolute; inset: 20px -12px -12px 20px; border: 1px solid var(--accent-border); z-index: -1; }
.portrait-fill {
  position: relative; height: 100%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(165deg, #1c2d47 0%, var(--ink) 70%);
}
.portrait-fill img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.portrait-initials { font: 400 italic clamp(100px, 20vw, 150px)/1 var(--serif); color: var(--paper); letter-spacing: -.04em; }
.portrait-chart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 35%; }
.portrait-chart polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 2.4s .4s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.portrait-tag {
  position: absolute; left: -16px; bottom: 26px; display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; background: var(--paper); border: 1px solid var(--rule-strong);
  font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--ink); white-space: nowrap;
}

.hero-intro { padding-top: 56px; }
.hello { font: 400 italic 26px var(--serif); color: var(--accent); line-height: 1; }
.hero-name { font: 600 clamp(48px, 13.5vw, 150px)/.92 var(--serif); letter-spacing: -.045em; color: var(--ink); margin-top: 6px; }
.hero-name span { color: var(--accent); }
.hero-role { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; color: var(--ink); margin: 18px 0 18px; }
.hero-sub { max-width: 620px; font: 400 20px/1.55 var(--serif); color: var(--ink-2); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 52px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; border-radius: 999px; transition: all .25s var(--ease);
}
.btn-primary { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn-primary span { transition: transform .25s var(--ease); }
.btn-primary:hover span { transform: translateX(4px); }
.btn-ghost { border: 1px solid var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(15,27,45,.04); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.stat { padding: 22px 20px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat b { font: 500 44px/1 var(--serif); color: var(--ink); letter-spacing: -.03em; }
.stat:nth-child(odd) b { color: var(--accent); }
.stat span { font: 400 11px var(--mono); color: var(--muted); margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.card:hover { border-color: var(--rule-strong); box-shadow: 0 18px 40px -24px rgba(15,27,45,.3); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pillar { position: relative; padding: 26px 24px 28px; border-right: 1px solid var(--rule); transition: background .3s var(--ease); }
.pillar:last-child { border-right: 0; }
.pillar:hover { background: var(--card); }
.pillar-num { font: 400 italic 30px/1 var(--serif); color: var(--accent); }
.pillar h3 { font: 600 21px/1.25 var(--serif); color: var(--ink); margin: 18px 0 8px; letter-spacing: -.01em; }
.pillar p { color: var(--muted); font-size: 14.5px; }
.pillar .badge { position: absolute; top: 26px; right: 22px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-2);
}
.badge.accent { color: var(--accent-ink); border-color: var(--accent-border); background: var(--accent-soft); }

.chips, .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chips { margin-top: 26px; }
.chips li, .tags li { font: 500 11px var(--mono); padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink-2); }
.hero-foot { display: flex; justify-content: space-between; padding: 26px 0; margin-top: 44px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--dim); letter-spacing: .12em; }

/* ===== Sections ===== */
.section { padding: 110px 0; position: relative; }
.section:nth-of-type(even) { background: var(--paper-2); }
.eyebrow { font-size: 11px; letter-spacing: .22em; color: var(--accent); margin-bottom: 14px; }
.section-title { font: 500 clamp(40px, 5.6vw, 64px)/1.05 var(--serif); letter-spacing: -.035em; color: var(--ink); }
.section-sub { max-width: 640px; color: var(--muted); font-size: 17px; margin-top: 16px; }

/* About */
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 48px; }
.about-copy { padding: 36px; }
.about-copy p { color: var(--ink-2); font-size: 16.5px; margin-bottom: 18px; }
.about-copy p:first-child::first-letter { float: left; font: 600 64px/.85 var(--serif); color: var(--accent); margin: 6px 10px 0 0; }
.about-copy blockquote {
  margin-top: 28px; padding: 22px 0 0; border-top: 1px solid var(--rule);
  font: 400 italic 22px/1.45 var(--serif); color: var(--ink);
}
.about-side { display: grid; gap: 12px; align-content: start; }
.principle { display: flex; gap: 16px; padding: 22px; }
.num { font: 400 italic 20px var(--serif); color: var(--accent); }
.principle h3 { font: 600 17px var(--serif); color: var(--ink); }
.principle p { color: var(--muted); font-size: 14px; }
.facts { padding: 22px; display: grid; gap: 14px; background: var(--ink); border-color: var(--ink); }
.facts:hover { border-color: var(--ink); }
.facts span { font-size: 10px; letter-spacing: .16em; color: rgba(246,243,236,.55); }
.facts p { font-size: 14px; color: var(--paper); }

/* Experience */
.exp { margin-top: 48px; padding: 36px; }
.exp-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.exp-head h3 { font: 600 34px var(--serif); color: var(--ink); margin-top: 12px; letter-spacing: -.02em; }
.exp-head .badge .dot { width: 6px; height: 6px; }
.exp-metrics { display: grid; grid-template-columns: repeat(4, auto); gap: 0; border: 1px solid var(--rule); }
.exp-metrics div { padding: 14px 18px; text-align: center; border-right: 1px solid var(--rule); }
.exp-metrics div:last-child { border-right: 0; }
.exp-metrics b { display: block; font: 500 26px/1.1 var(--serif); color: var(--accent); letter-spacing: -.02em; }
.exp-metrics span { font: 400 9.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 24px; padding-top: 26px; border-top: 1px solid var(--rule); }
.tab, .filter { padding: 8px 15px; font-size: 12px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-2); transition: all .2s var(--ease); }
.tab:hover, .filter:hover { border-color: var(--ink); color: var(--ink); }
.tab.active, .filter.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.tab-panel { display: none; animation: fadeUp .45s var(--ease); }
.tab-panel.active { display: block; }
.bullets { display: grid; gap: 0; counter-reset: b; }
.bullets li { position: relative; padding: 14px 0 14px 44px; color: var(--ink-2); border-bottom: 1px solid var(--rule); counter-increment: b; }
.bullets li:last-child { border-bottom: 0; }
.bullets li::before { content: counter(b, decimal-leading-zero); position: absolute; left: 0; top: 15px; font: 500 11px var(--mono); color: var(--accent); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

/* Projects */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.project { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.project:hover { transform: translateY(-4px); }
.project.hidden { display: none; }
.project-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.project h3 { font: 600 25px/1.2 var(--serif); color: var(--ink); margin-top: 8px; letter-spacing: -.02em; }
.client { font-size: 10.5px; letter-spacing: .12em; color: var(--dim); }
.project > p:not(.client) { color: var(--muted); font-size: 15px; }
.kpi { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-block: 1px solid var(--rule); margin: 6px 0; }
.kpi b { font: 500 30px/1 var(--serif); color: var(--accent); white-space: nowrap; letter-spacing: -.02em; }
.kpi span { font-size: 13px; color: var(--muted); }
.project .tags { margin-top: auto; padding-top: 6px; }

/* Skills */
.skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.skill-group { padding: 28px; }
.skill-group h3 { font: 600 23px var(--serif); color: var(--ink); margin: 6px 0 16px; letter-spacing: -.01em; }

/* Contact */
.contact { padding-bottom: 0; text-align: center; background: var(--ink) !important; color: var(--paper); }
.contact .eyebrow { color: #fb923c; }
.contact .section-sub { margin-inline: auto; color: rgba(246,243,236,.7); }
.contact-title { font: 500 clamp(42px, 6.8vw, 84px)/1.02 var(--serif); letter-spacing: -.04em; color: var(--paper); max-width: 920px; margin-inline: auto; }
.contact-mail { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 46px 0 30px; }
.mail { font: 400 italic clamp(26px, 4vw, 44px) var(--serif); color: #fb923c; border-bottom: 1px solid rgba(251,146,60,.4); padding-bottom: 4px; transition: color .2s; }
.mail:hover { color: var(--paper); }
.contact .btn-ghost { color: var(--paper); border-color: rgba(246,243,236,.3); }
.contact .btn-ghost:hover { border-color: var(--paper); background: rgba(246,243,236,.06); }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; font-size: 13px; color: rgba(246,243,236,.7); }
.contact-links a:hover { color: var(--paper); }
.footer { display: flex; justify-content: space-between; margin-top: 90px; padding: 26px 0; border-top: 1px solid rgba(246,243,236,.15); font-size: 11px; color: rgba(246,243,236,.5); letter-spacing: .12em; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; z-index: 60; padding: 10px 16px; font-size: 12px; background: var(--ink); color: var(--paper); border-radius: 999px; transition: all .3s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 880px) {
  .dock-links { display: none; }
  .about-grid, .project-grid, .skills-grid, .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--rule); }
  .pillar:last-child { border-bottom: 0; }
  .exp-metrics { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .exp-metrics div:nth-child(2) { border-right: 0; }
  .exp-metrics div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .stat { padding: 18px 12px 16px; }
  .stat b { font-size: 32px; }
  .stat span { font-size: 9.5px; }
  .exp, .about-copy { padding: 24px; }
  .hero-sub { font-size: 18px; }
  .footer { flex-direction: column; gap: 6px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .portrait-chart polyline { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

/* Download resume */
.dock-cv { font-size: 11px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink); transition: all .2s var(--ease); }
.dock-cv:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.contact-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn-cv { background: #fb923c; color: var(--ink); border: 1px solid #fb923c; }
.btn-cv:hover { background: var(--paper); border-color: var(--paper); transform: translateY(-2px); }