/* ===== Design tokens ===== */
:root {
  --bg: #0c1a23;          /* dark navy */
  --bg-alt: #0f2230;
  --text: #e8eef2;
  --muted: #a9b7c0;
  --accent: #1dd0e3;
  --border: #203445;

  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --trans: 180ms cubic-bezier(.2,.8,.2,1);

  --maxw: 72rem;
  --lh: 1.6;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: light) {
  :root { --bg:#ffffff; --bg-alt:#f7f9fb; --text:#0b1217; --muted:#44525c; --border:#dfe7ee; --shadow:0 6px 20px rgba(0,0,0,.08); }
}

[data-theme="light"] { --bg:#ffffff; --bg-alt:#f7f9fb; --text:#0b1217; --muted:#44525c; --border:#dfe7ee; --shadow:0 6px 20px rgba(0,0,0,.08); }

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/var(--lh) var(--font);
  color: var(--text);
  background: radial-gradient(1200px 700px at 80% -10%, var(--bg-alt), var(--bg)) no-repeat fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { line-height: 1.2; margin: 0 0 .5rem }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 2rem }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; color: var(--text); }
ul { padding-left: 1.2rem; }

/* Utility */
.container { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 1rem; top: 1rem; width:auto; height:auto; padding:.5rem 1rem; background:var(--accent); color:#003; border-radius:6px; z-index:1000; }

/* ===== Header & Nav ===== */
.site-header { position: sticky; top: 0; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border); z-index: 50; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; }
.brand { display:inline-flex; align-items:center; gap:.6rem; color: var(--text); font-weight:600; }
.nav__menu { display:flex; align-items:center; gap:.5rem; list-style:none; margin:0; padding:0; }
.nav__toggle { display:none; background:transparent; border:1px solid var(--border); color:var(--text); padding:.5rem .6rem; border-radius:8px; }

@media (max-width: 820px) {
  .nav__toggle { display:block; }
  .nav__menu { position:absolute; right:1rem; top:3.2rem; flex-direction:column; align-items:stretch; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:.5rem; width:min(92vw, 20rem); box-shadow: var(--shadow); display:none; }
  .nav__menu[aria-expanded="true"] { display:flex; }
}

/* ===== Buttons & Chips ===== */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; transition: transform var(--trans), background var(--trans); text-decoration: none; }
.btn:hover { transform: translateY(-1px); text-decoration:none; }
.btn--primary { background: var(--accent); color: #032a31; border-color: transparent; }
.btn--ghost { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.chip { padding:.35rem .7rem; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text); cursor:pointer; }
.chip.is-active { background: var(--accent); color:#032a31; border-color: transparent; }

/* ===== Hero ===== */
.hero { position:relative; padding: clamp(3rem, 10vw, 6rem) 0 2rem; overflow:hidden; }
.hero .subhead { color: var(--muted); max-width: 60ch; }
.badge-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.25rem; }
.badge { border:1px solid var(--border); padding:.3rem .6rem; border-radius:999px; font-size:.9rem; color:var(--muted); }
.cta-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; opacity:.15; fill: var(--accent); z-index:-1; }

/* ===== Sections ===== */
.snapshot { padding: 1rem 0 1.5rem; }
.keypoints { display:grid; gap:.4rem; }

.section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.filters { display:flex; gap:.4rem; align-items:center; }

.card-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem; margin-top:1rem; }
.card { grid-column: span 6; background: color-mix(in oklab, var(--bg-alt) 70%, var(--bg)); border:1px solid var(--border); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow); transition: transform var(--trans), border-color var(--trans); }
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card h3 { margin-bottom:.4rem; }
.card p { color: var(--muted); }
.tags { display:flex; gap:.4rem; list-style:none; padding:0; margin:.6rem 0 0; }
.tags li { font-size:.8rem; padding:.2rem .5rem; border:1px solid var(--border); border-radius:999px; color:var(--muted); }

@media (max-width: 900px) {
  .card { grid-column: span 12; }
}

.more { margin-top:1rem; border-top:1px dotted var(--border); padding-top:.5rem; }

.writing .notes { display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr); }
.writing .note { grid-column: span 6; background: color-mix(in oklab, var(--bg-alt) 70%, var(--bg)); border:1px solid var(--border); border-radius: var(--radius); padding:1rem; }
@media (max-width: 900px) {
  .writing .note { grid-column: span 12; }
}

.about .lead { color: var(--muted); }
.skills { display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr); margin-top:1rem; }
.skill-col { grid-column: span 3; border:1px solid var(--border); border-radius: var(--radius); padding:1rem; background: color-mix(in oklab, var(--bg-alt) 70%, var(--bg)); }
@media (max-width: 900px) {
  .skill-col { grid-column: span 12; }
}

.contact a { word-break: break-word; }

/* ===== Footer ===== */
.site-footer { margin-top: 2rem; border-top:1px solid var(--border); }
.site-footer .container { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; }
.to-top { border:1px solid var(--border); border-radius:10px; padding:.3rem .6rem; color:var(--muted); }

/* Focus outline */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }