/* =========================================================================
   Sonu Yadav — portfolio
   One stylesheet, no framework. Everything themable is a custom property, so
   light and dark are the same rules with a different set of values rather than
   two parallel sets of overrides.
   ========================================================================= */

/* ------------------------------- reset ---------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

/* ------------------------------- tokens --------------------------------- */

:root {
  --wrap: 1140px;
  --gutter: 24px;
  /* One flat radius everywhere — nothing rounder than 4px. */
  --r: 4px;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --header-h: 66px;
}

:root[data-theme='dark'] {
  --bg: #0b0d10;
  --bg-alt: #0f1318;
  --surface: #12171d;
  --surface-2: #171d25;
  --line: #232b35;
  --line-strong: #313b47;
  --text: #e8edf3;
  --text-2: #a7b3c1;
  --text-3: #77838f;
  --accent: #ff8a8a;
  /* #e5484d reads better against the dark page, but white on it is only
     3.9:1 — under AA for button text. This is the brightest red that still
     clears 4.5:1 with a white label. */
  --accent-solid: #d63539;
  --accent-hover: #e5484d;
  --accent-on: #ffffff;
  --accent-soft: rgba(229, 72, 77, .14);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
  --header-bg: rgba(11, 13, 16, .82);
  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #ffffff;
  --bg-alt: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f2f5f8;
  --line: #e3e8ee;
  --line-strong: #cdd5df;
  --text: #0f141a;
  --text-2: #4b5563;
  /* Muted text also has to clear 4.5:1 on --bg-alt, which is slightly darker
     than white; #6b7684 passed on white and failed on the alt sections. */
  --text-3: #656f7c;
  --accent: #c62828;
  --accent-solid: #c62828;
  --accent-hover: #a91f1f;
  --accent-on: #ffffff;
  --accent-soft: rgba(198, 40, 40, .09);
  --shadow: 0 1px 2px rgba(16,20,26,.06), 0 12px 28px -14px rgba(16,20,26,.22);
  --header-bg: rgba(255, 255, 255, .85);
  color-scheme: light;
}

/* --------------------------- base + layout ------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--accent-solid);
  color: var(--accent-on);
  font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

.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;
}

::selection { background: var(--accent-soft); }

/* ------------------------------- header --------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r);
  background: var(--accent-solid);
  color: var(--accent-on);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.brand-name { font-size: 15.5px; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.is-active { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--surface);
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon-btn svg { width: 19px; height: 19px; }

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg.filled { fill: currentColor; stroke: none; }

/* One button, two glyphs — show whichever the *next* theme is. */
:root[data-theme='dark'] .icon-sun { display: block; }
:root[data-theme='dark'] .icon-moon { display: none; }
:root[data-theme='light'] .icon-sun { display: none; }
:root[data-theme='light'] .icon-moon { display: block; }

/* The hamburger swaps to a cross while the menu is open, so the control says
   what it will do next rather than what it did. */
.nav-toggle { display: none; }
.nav-toggle .icon-x { display: none; }
.nav-toggle[aria-expanded='true'] .icon-bars { display: none; }
.nav-toggle[aria-expanded='true'] .icon-x { display: block; }
.nav-toggle[aria-expanded='true'] { color: var(--text); border-color: var(--line-strong); }

.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 95;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-scrim[hidden] { display: none; }

/* -------------------------------- hero ---------------------------------- */

/* Bottom padding is light: the stats strip that used to close the hero is
   gone, and the About section brings its own generous top padding. */
.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(8px, 2vw, 24px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.dot {
  width: 7px; height: 7px;
  border-radius: var(--r);
  background: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, .18);
}

.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.1rem);
  letter-spacing: -.035em;
  margin-bottom: 10px;
}

.hero-role {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 18px;
}

.hero-lede {
  max-width: 60ch;
  font-size: 1.0625rem;
  color: var(--text-2);
  margin-bottom: 30px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  transition: transform .16s var(--ease), background-color .16s var(--ease),
              border-color .16s var(--ease), color .16s var(--ease);
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent-solid); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost { border-color: var(--line-strong); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--text-3); }

.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: var(--r); }

.hero-social { display: flex; flex-wrap: wrap; gap: 20px; }
.hero-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: color .16s var(--ease);
}
.hero-social a:hover { color: var(--accent); }
.hero-social svg { width: 18px; height: 18px; }

.hero-photo { justify-self: center; }
.hero-photo img {
  width: min(300px, 62vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* ------------------------------ sections -------------------------------- */

.section { padding: clamp(56px, 9vw, 104px) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(1.65rem, 3.6vw, 2.35rem);
  letter-spacing: -.03em;
  margin-bottom: 14px;
  max-width: 22ch;
}

.section-lede {
  max-width: 62ch;
  color: var(--text-2);
  margin-bottom: 40px;
}

.sub-title {
  font-size: 1.3rem;
  margin: 56px 0 20px;
}

/* -------------------------------- about --------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.prose p { color: var(--text-2); margin-bottom: 16px; max-width: 66ch; }
.prose p:last-child { margin-bottom: 0; }

.about-facts {
  padding: 8px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.about-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.about-facts li:last-child { border-bottom: 0; }
.about-facts span { font-size: 12.5px; color: var(--text-3); }
.about-facts strong { font-size: 14.5px; font-weight: 600; }
.about-facts a { color: var(--accent); overflow-wrap: anywhere; }
.about-facts a:hover { text-decoration: underline; }

/* ----------------------------- featured work ---------------------------- */

.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.feature-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.feature-head {
  padding: 26px 26px 0;
}
.feature-head h3 { font-size: 1.3rem; margin-bottom: 6px; }
.feature-sub { font-size: 14px; color: var(--text-3); }

.feature-body { padding: 18px 26px 4px; flex: 1; }
.feature-body > p { color: var(--text-2); margin-bottom: 20px; }
.feature-body h4 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}

.tick-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 14.8px;
  color: var(--text-2);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .58em;
  width: 7px; height: 7px;
  border-radius: var(--r);
  background: var(--accent-solid);
}
.tick-list strong { color: var(--text); font-weight: 650; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tags li {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 22px 26px 26px;
  border-top: 1px solid var(--line);
  margin-top: 22px;
}
.feature-note { font-size: 12.8px; color: var(--text-3); flex: 1 1 240px; }
code {
  padding: 1px 6px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--text);
}

/* ---------------------------- other projects ---------------------------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}

.project {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.project:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.project h3 { font-size: 1.05rem; margin-bottom: 8px; }
.project h3 a { transition: color .16s var(--ease); }
.project h3 a:hover { color: var(--accent); }
.project > p { font-size: 14.3px; color: var(--text-2); flex: 1; }
.project .tags { margin-top: 16px; }

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.project-links a, .link-btn {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  padding: 0;
  transition: opacity .16s var(--ease);
}
.project-links a:hover, .link-btn:hover { opacity: .72; text-decoration: underline; }

/* -------------------------------- skills -------------------------------- */

/* Eight cards, so a four-column track makes two clean rows on a wide screen
   instead of three with a hole in the last one. `align-items: start` stops a
   short card being stretched to match the tallest in its row, which was
   leaving a large empty box under "Cloud & tooling". */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: start;
  gap: 18px;
}

.skill-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .2s var(--ease);
}
.skill-card:hover { border-color: var(--line-strong); }

.skill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.skill-head h3 { font-size: 1rem; letter-spacing: -.01em; }

.skill-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
}
.skill-icon svg { width: 19px; height: 19px; }

.skill-card .tags { margin-top: 0; }

/* The whole point of the section is which of these I actually reach for.
   A flat wall of identical pills says everything is equally true, which is
   never the case — so the day-to-day stack is marked and the rest recedes. */
.tags li.is-core {
  border-color: color-mix(in srgb, var(--accent-solid) 42%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.legend-chip {
  display: inline-block;
  width: 26px; height: 13px;
  margin-right: 4px;
  vertical-align: -1px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--accent-solid) 42%, transparent);
  background: var(--accent-soft);
}

/* ------------------------------ timeline -------------------------------- */

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}

.tl-item { position: relative; padding-bottom: 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -26px; top: 7px;
  width: 12px; height: 12px;
  border-radius: var(--r);
  background: var(--accent-solid);
  box-shadow: 0 0 0 4px var(--bg);
}

.tl-head { margin-bottom: 14px; }
.tl-head h3 { font-size: 1.18rem; }
.tl-org { font-size: 14.5px; font-weight: 600; color: var(--text-2); margin-top: 3px; }
.tl-when { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* ------------------------------ education ------------------------------- */

.edu-list {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.edu-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.edu-list li:last-child { border-bottom: 0; }
.edu-list strong { display: block; font-size: 15px; }
.edu-list span { font-size: 13.6px; color: var(--text-3); }
.edu-meta { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-3); }
.pill {
  padding: 3px 10px;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px !important;
  font-weight: 600;
}

.resume-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ------------------------------- contact -------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 52px);
  align-items: start;
}

.contact-form {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  font-size: 15px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-solid);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Hidden from people, still in the DOM for bots that fill every field.
   Clipped rather than parked at -9999px, which shows up as an off-canvas
   element in layout tooling and can drag focus off-screen. */
.honey {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-note { margin-top: 12px; font-size: 13.5px; color: var(--text-3); min-height: 1.2em; }
.form-note.is-error { color: var(--accent); }

.contact-info li {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.contact-info li:last-child { border-bottom: 0; }
.contact-info svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 3px; }
.contact-info span { display: block; font-size: 12.5px; color: var(--text-3); }
.contact-info a, .contact-info strong { font-size: 14.6px; font-weight: 600; overflow-wrap: anywhere; }
.contact-info a:hover { color: var(--accent); text-decoration: underline; }

/* -------------------------------- footer -------------------------------- */

.site-footer {
  padding: 56px 0 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  padding-bottom: 40px;
}

.footer-brand .brand { margin-bottom: 14px; }
.footer-tag {
  font-size: 14.3px;
  color: var(--text-2);
  max-width: 38ch;
  margin-bottom: 14px;
}
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 20px;
}
.footer-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.footer-col h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a,
.footer-plain {
  font-size: 14px;
  color: var(--text-2);
  transition: color .16s var(--ease);
}
.footer-links a:hover { color: var(--accent); }
.footer-links a span { font-size: .85em; opacity: .7; }
.footer-plain { color: var(--text-3); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.8px;
  color: var(--text-3);
}
.footer-colophon { flex: 1 1 auto; text-align: center; }
.footer-totop {
  font-weight: 600;
  color: var(--text-2);
  transition: color .16s var(--ease);
}
.footer-totop:hover { color: var(--accent); }

/* ------------------------------- to top --------------------------------- */

.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent); }
.to-top svg { width: 19px; height: 19px; }

/* ------------------------------ lightbox -------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }

.lightbox-panel {
  width: min(1100px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--line);
}
.lightbox-title { font-size: 14.5px; font-weight: 600; }

.lightbox-stage {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  padding: 16px;
  background: var(--bg-alt);
}
.lightbox-stage img {
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: var(--r);
}

.lb-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  box-shadow: var(--shadow);
  transition: color .16s var(--ease);
}
.lb-nav:hover { color: var(--accent); }
.lb-nav svg { width: 20px; height: 20px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }

.lightbox-caption {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-3);
  text-align: center;
}

body.is-locked { overflow: hidden; }

/* ------------------------------ responsive ------------------------------ */

/* Brand takes the full width and the three link groups share a row beneath it.
   Two columns left "Elsewhere" stranded on a row of its own. */
@media (max-width: 1000px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; justify-self: start; }
  .hero-photo img { width: min(150px, 38vw); border-radius: var(--r); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root {
    --gutter: 18px;
    /* Tighter rhythm on a phone. The same generous desktop spacing turns a
       long single-page portfolio into a very long scroll. */
    --header-h: 60px;
  }

  .section { padding: 48px 0; }
  .hero { padding: 32px 0 8px; }
  .hero-actions { margin-bottom: 22px; }
  .sub-title { margin-top: 40px; }
  .tl-item { padding-bottom: 30px; }
  .section-lede { margin-bottom: 28px; }

  .nav-toggle { display: grid; }

  /* `.nav` carries margin-left:auto on desktop, and that is what pushes the
     controls to the right edge. Hidden here, the auto margin goes with it and
     the brand, theme toggle and hamburger all collapsed against the left with
     200px of dead space beside them. The actions take the job over. */
  .header-actions { margin-left: auto; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 96;
    margin: 0;
    padding: 8px var(--gutter) 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav a {
    padding: 14px 8px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 0;
  }
  .nav a:hover, .nav a:active { background: var(--surface-2); }
  .nav a.is-active { color: var(--accent); font-weight: 600; }
  .section-title { max-width: none; }
  .feature-head, .feature-body, .feature-actions { padding-inline: 20px; }
  .feature-actions { margin-top: 18px; padding-block: 18px 22px; }
  .skill-card, .project, .contact-form { padding: 18px; }

  /* Buttons go full width so they are easy to hit and read as primary. */
  .hero-actions .btn,
  .resume-cta .btn,
  .contact-form button[type=submit] { flex: 1 1 100%; justify-content: center; }

  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lightbox-stage { padding: 10px; }
  .lightbox-stage img { max-height: 60vh; }
  .to-top { right: 14px; bottom: 14px; }

  .site-footer { padding-top: 40px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
  .footer-tag { max-width: none; }
  .footer-bottom { justify-content: flex-start; }
  .footer-colophon { flex: 1 1 100%; text-align: left; order: 3; }
}

/* Touch targets. On a finger-driven device the inline text links were 17-23px
   tall — under both the WCAG 2.2 minimum and every platform guideline. Scoped
   to coarse pointers so the desktop layout keeps its tighter inline rhythm. */
@media (pointer: coarse) {
  .hero-social a,
  .project h3 a,
  .project-links a,
  .project-links .link-btn,
  .contact-info a,
  .about-facts a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .project-links { gap: 8px 20px; }
  .contact-info li { padding-block: 8px; }
  .about-facts li { padding-block: 10px; }
  .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Controls, not just text links: the icon buttons and small buttons were
     38-42px, which is close enough to look fine and just small enough to miss. */
  .icon-btn { width: 44px; height: 44px; }
  .to-top { width: 44px; height: 44px; }
  /* Short labels like "About" are only ~35px wide. In a stacked list the whole
     row is free space, so let the target fill it. Width, not align-self: the
     flex item is the <li>, so stretching the <a> inside it does nothing. */
  .footer-links a { width: 100%; }
  .btn-sm { padding: 12px 18px; }
  /* With the wordmark hidden on phones the brand shrinks to its 32px badge.
     Padded out to a 44px hit area without moving the badge itself. */
  .brand { min-height: 44px; padding-inline: 6px; margin-inline-start: -6px; }
  .nav a { min-height: 44px; display: flex; align-items: center; }
}

/* Below this the wordmark and both controls stop fitting on one row, so the
   badge carries the brand on its own. */
@media (max-width: 359px) {
  .site-header .brand-name { display: none; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 2.35rem; }
  .hero-social { gap: 6px 18px; }
  .edu-list li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .feature-actions { flex-direction: column; align-items: stretch; }
  .feature-actions .btn { justify-content: center; }
}

/* --------------------------- motion + print ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

@media print {
  .site-header, .to-top, .lightbox, .hero-actions, .resume-cta, .contact-form { display: none !important; }
  body { color: #000; background: #fff; }
  .section, .hero { padding: 16px 0; }
  a::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}