* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  font-family: var(--font-mono);
  color: var(--ink);
}
body { overflow: hidden; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--clay); }
button { font: inherit; color: inherit; }

@keyframes dotpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Page shell ---------- */
.page {
  padding: var(--space-4);
  height: 100dvh;
  background: var(--paper);
}
.frame {
  position: relative;
  height: 100%;
  background: var(--paper-2);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

/* ---------- Top bar ---------- */
.topbar {
  flex: none;
  border: var(--border-strong);
  background: var(--paper);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.topbar__id { display: flex; gap: var(--space-6); }
.topbar__id .role { opacity: var(--dim); }
.topbar__meta { display: flex; align-items: center; gap: var(--space-6); }
.topbar__divider { width: 1px; height: 12px; background: var(--line-mid); }
.availability { display: flex; align-items: center; gap: var(--space-2); }
/* Only index.html's is a real <button> (opens the contact popup, see
   js/contact-popup.js) — case-studies.html/side-projects.html still use
   a plain non-interactive <span class="availability">, which must NOT
   pick up a pointer cursor or hover/focus styling it can't act on. */
button.availability {
  border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
}
button.availability:hover { color: var(--cobalt); }
button.availability:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.availability__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  animation: dotpulse 2.4s ease-in-out infinite;
}
.hamburger {
  display: none; /* shown only below 1280px — see the breakpoint below */
  border: var(--border-strong);
  background: transparent;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  cursor: pointer;
  line-height: 1;
  font-size: var(--fs-dense);
}
.hamburger:hover { background: var(--paper); color: var(--cobalt); }
.hamburger:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.nav-close {
  display: none; /* shown only below 1280px, alongside the hamburger */
  width: 20px; height: 20px; border: var(--border-strong);
  background: transparent; color: var(--ink);
  align-items: center; justify-content: center;
  font-size: var(--fs-label); line-height: 1; cursor: pointer; padding: 0;
}
.nav-close:hover { background: var(--paper-2); }
.nav-close:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ---------- Grid ---------- */
.grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gutter);
}

/* ---------- Card shell ---------- */
.card {
  border: var(--border-strong);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
}
.card--interactive {
  cursor: pointer;
  transition: transform 280ms var(--ease-lift);
}
.card--interactive:hover { transform: translate(-2px, -2px); }
.card--interactive:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.card__bar {
  height: 30px; flex: none;
  background: var(--paper);
  border-bottom: var(--border-strong);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-2) 0 var(--space-3);
}
.card__bar--tint { background: var(--paper-2); }
.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-window-title);
  letter-spacing: var(--ls-window-title);
  text-transform: uppercase;
}
.card__bar-meta {
  flex: none; white-space: nowrap;
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; opacity: var(--dim);
}
.card__foot {
  flex: none;
  border-top: var(--border-strong);
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: 500; white-space: nowrap;
}
.card__foot span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Grid placement — desktop */
.card--profile    { grid-column: span 3; grid-row: 1; }
.card--gallery     { grid-column: span 6; grid-row: 1; }
.card--nav         { grid-column: span 3; grid-row: 1 / span 2; }
.card--experience  { grid-column: span 3; grid-row: 2; }
.card--mentoring   { grid-column: span 3; grid-row: 2; }
.card--about       { grid-column: span 3; grid-row: 2; }

/* ---------- Profile card ---------- */
.profile__body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  justify-content: flex-start; gap: var(--space-4);
  padding: var(--space-7);
  overflow: hidden;
}
.profile__eyebrow {
  flex: none; font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; opacity: var(--dim);
}
.profile__headline {
  flex: none;
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--display-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-display);
}
.profile__bio { margin: 0; flex: none; font-size: var(--fs-body); line-height: var(--lh-card); opacity: var(--dim); }
.profile__tags { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tag {
  border: var(--border-strong); padding: var(--space-1) var(--space-2);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; white-space: nowrap;
}

/* ---------- Work gallery ---------- */
.gallery__folders {
  flex: 1; min-height: 0;
  display: flex; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--paper-2);
  overflow: hidden; isolation: isolate;
}
.folder {
  flex: 1; min-width: 0; overflow: hidden;
  background: transparent; border: 0; padding: 0;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform 280ms var(--ease-lift);
}
.folder:hover { transform: translateY(-5px); }
.folder:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.folder--ink:focus-visible { outline: 3px solid var(--ink); }

.folder__tab-row { flex: none; display: flex; align-items: flex-end; min-width: 0; overflow: hidden; }
.folder__tab {
  position: relative; z-index: 2; margin-bottom: -2px;
  display: flex; align-items: center; gap: var(--space-2);
  border: var(--border-strong); border-bottom: 0;
  padding: var(--space-2) var(--space-2);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden;
  transition: background 180ms, color 180ms;
}
.folder__tab span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.folder:hover .folder__tab { background: var(--cobalt) !important; color: var(--paper) !important; }

.folder--1 .folder__tab { background: var(--paper); color: var(--ink); }
.folder--2 .folder__tab { background: var(--clay); color: var(--ink); }
.folder--3 .folder__tab { background: var(--ink); color: var(--paper); }

.folder__body {
  flex: 1; min-height: 0;
  border: var(--border-strong);
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
}
.folder__content {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  justify-content: flex-start; gap: var(--space-2);
  padding: var(--space-3); overflow: hidden;
}
.folder__foot {
  flex: none; border-top: var(--border-strong);
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: 500; white-space: nowrap;
}
.folder__foot span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.folder__foot span:last-child { flex: none; }

/* Work Gallery cards: metric (+ optional unit) and caption, a before→after
   comparison table, then a short methodology note — same structure for
   all three, driven by home-content-data.js */
.folder__metric-row { display: flex; align-items: baseline; gap: 2px; }
.figure--feature {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--display-feature);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
  color: var(--clay);
}
.figure__unit {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-window-title);
  color: var(--clay);
}
.figure__caption {
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; opacity: var(--dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.folder__table { border: var(--border-strong); background: var(--paper); }
.folder__table-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-tight) var(--space-2);
  font-size: var(--fs-dense); white-space: nowrap;
}
.folder__table-row + .folder__table-row { border-top: var(--border-mid); }
.folder__table-label { font-weight: 500; }
.folder__table-from { opacity: var(--dim); text-decoration: line-through; }
.folder__table-to { font-weight: 700; }

/* Above the mobile-stack breakpoint, the metric moves to the right of its
   label on one line; below it, keep the stacked wrap (narrower columns
   need the room). */
@media (min-width: 1280px) {
  .folder__table-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
  }
}

.folder__note {
  margin: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; opacity: var(--dim); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Nav card (drawer) ---------- */
.drawer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer__row {
  flex: 1; min-height: 0;
  border: 0; border-bottom: var(--border-mid);
  background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-5);
  font-family: inherit;
  font-size: var(--fs-nav); letter-spacing: var(--ls-nav);
  text-transform: uppercase; cursor: pointer;
  transition: background 180ms, color 180ms;
}
.drawer__row:hover { background: var(--paper-2); }
a.drawer__row:hover { color: var(--cobalt); }
.drawer__row:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
.drawer__row span:last-child { opacity: var(--dim); }
.drawer__foot {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  border-top: var(--border-strong);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: 500;
}

/* ---------- Experience card ---------- */
.experience__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.experience__row {
  flex: none; display: flex; gap: var(--space-3);
  padding: var(--space-5); border-bottom: var(--border-mid);
  white-space: nowrap; align-items: stretch;
}
.experience__row:first-child { padding: var(--space-2) var(--space-4); }
.experience__dot { width: 11px; height: 11px; margin-top: 2px; flex: none; background: var(--ink); }
.experience__dot--current { background: var(--cobalt); }
.experience__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.experience__org { font-size: var(--fs-dense); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.experience__role { font-size: var(--fs-dense); opacity: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.experience__span { font-size: var(--fs-dense); opacity: var(--dim); text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Mentoring card ---------- */
.mentoring__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mentoring__grid { flex: 1; display: flex; flex-direction: column; }
.stat-row { flex: 1; display: flex; }
.stat {
  flex: 1; min-width: 0; padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-mid);
  display: flex; flex-direction: column; justify-content: center;
}
.stat-row:first-child .stat:first-child { border-right: var(--border-mid); }
.stat-row:last-child .stat:last-child { border-bottom: 0; }
.stat-row:last-child .stat:first-child { border-right: var(--border-mid); border-bottom: 0; }
.stat__figure {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--display-compact);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
}
.stat__figure--accent { color: var(--cobalt); }
.stat__label {
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; opacity: var(--dim); margin-top: var(--space-tight);
}

/* ---------- About card ---------- */
.card--about { background: var(--paper-2); }
.about__body { flex: 1; min-height: 0; display: flex; flex-direction: row; overflow: hidden; }
.about__image {
  flex: 0 0 40%; min-width: 72px;
  border-right: var(--border-strong);
  background: url("../images/ankit-1.jpg") center / cover no-repeat;
}
.about__content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-4); overflow: hidden; }
.about__figure-row { flex: none; display: flex; align-items: flex-end; gap: var(--space-2); min-width: 0; }
.about__figure {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--display-card);
  line-height: .78; letter-spacing: var(--tracking-display);
}
.about__figure-label {
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; opacity: var(--dim); padding-bottom: var(--space-1);
  min-width: 0;
}
.about__bio { margin: 0; flex: none; font-size: var(--fs-body); line-height: var(--lh-card); }

/* ---------- Page footer ---------- */
.pagefoot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-tight) var(--space-4);
}
.wordmark {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--display-wordmark);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-display);
  white-space: nowrap;
}
.pagefoot__links {
  display: flex; align-items: center; gap: var(--space-6);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.pagefoot__links a {
  color: var(--ink);
}
.pagefoot__links a:hover { color: var(--cobalt); }
.pagefoot__copyright { opacity: var(--dim); }

/* Contact trigger + popup — replaces the old three icon links. Two
   triggers open the same popup (the footer's "Let's Connect" button and
   the topbar's availability pill, see js/contact-popup.js) listing
   LinkedIn, Instagram and Email; each row is a [data-social] link wired
   by js/social-render.js, with the icon on the left and the label +
   handle/URL stacked on the right. The popup is `position: fixed` with
   its top/left set in JS from whichever trigger was actually clicked
   (js/contact-popup.js's positionPopup()), so it always opens right next
   to that trigger instead of being pinned to one fixed spot on the page.
   Icons are the same SVGs as before, in images/icons/social/ (see
   reference/social-icons.md), drawn via mask-image so they pick up
   currentColor. */
.contact-trigger {
  font: inherit; font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink); background: transparent; border: var(--border-strong);
  padding: var(--space-1) var(--space-4); cursor: pointer;
}
.contact-trigger:hover,
.contact-trigger[aria-expanded="true"] { color: var(--cobalt); border-color: var(--cobalt); }
.contact-trigger:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.contact-popup {
  /* top/left are set inline by js/contact-popup.js's positionPopup() on
     every open — these are just a harmless fallback before that runs. */
  position: fixed; top: 0; left: 0; z-index: 90;
  width: max-content; min-width: 220px;
  display: flex; flex-direction: column;
  background: var(--paper); border: var(--border-strong);
  padding-top: 4px; padding-bottom: 4px;
}
.contact-popup[hidden] { display: none; }
.contact-popup__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--ink); text-transform: none;
  border-bottom: var(--border-mid);
}
.contact-popup__row:last-child { border-bottom: 0; }
.contact-popup__row:hover { background: var(--paper-2); color: var(--cobalt); }
.contact-popup__icon {
  flex: none; width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.contact-popup__icon--linkedin  { -webkit-mask-image: url("../images/icons/social/linkedin.svg");  mask-image: url("../images/icons/social/linkedin.svg"); }
.contact-popup__icon--instagram { -webkit-mask-image: url("../images/icons/social/instagram.svg"); mask-image: url("../images/icons/social/instagram.svg"); }
.contact-popup__icon--email     { -webkit-mask-image: url("../images/icons/social/email.svg");     mask-image: url("../images/icons/social/email.svg"); }
.contact-popup__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-popup__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; }
.contact-popup__hint {
  font-family: var(--font-mono); font-size: var(--fs-dense); opacity: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Case-study sheet ---------- */
.sheet {
  position: absolute; inset: 8px; z-index: 70;
  border: var(--border-strong); background: var(--paper);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet[hidden] { display: none; }
.sheet__close {
  width: 20px; height: 20px; border: var(--border-strong);
  background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-label); line-height: 1; cursor: pointer; padding: 0;
}
.sheet__close:hover { background: var(--paper-2); }
.sheet__close:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.sheet__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-7) var(--space-8) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.sheet__intro { display: flex; flex-direction: column; gap: var(--space-4); }
.sheet__kicker { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; opacity: var(--dim); }
.sheet__headline {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: var(--display-sheet); line-height: .94;
  letter-spacing: var(--tracking-display); max-width: 18ch;
}
.sheet__meta { border: var(--border-strong); display: grid; grid-template-columns: repeat(4, 1fr); }
.sheet__meta-cell { padding: var(--space-4); border-left: var(--border-strong); display: flex; flex-direction: column; gap: var(--space-2); }
.sheet__meta-cell:first-child { border-left: 0; }
.sheet__meta-label { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; opacity: var(--dim); }
.sheet__meta-value { font-size: var(--fs-body); }
.sheet__section { display: flex; flex-direction: column; gap: var(--space-4); max-width: 62ch; }
.sheet__section h4 { margin: 0; font-size: var(--fs-nav); letter-spacing: var(--ls-nav); text-transform: uppercase; opacity: var(--dim); font-weight: 400; }
.sheet__section p { margin: 0; font-size: var(--fs-body-sheet); line-height: var(--lh-sheet); }
.sheet__item { display: flex; gap: var(--space-4); font-size: var(--fs-body-sheet); line-height: var(--lh-sheet); }
.sheet__item::before { content: "—"; opacity: var(--dim); }
.sheet__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: var(--border-strong);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink);
  transition: background 180ms, color 180ms;
}
.sheet__cta:hover { background: var(--paper-2); color: var(--cobalt); }

/* ---------- Settings & Consent sheet ---------- */
.settings-list { border: var(--border-strong); }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  border: 0; border-bottom: var(--border-mid);
  background: transparent; color: var(--ink);
  padding: var(--space-4) var(--space-5);
  font-family: inherit;
  font-size: var(--fs-nav); letter-spacing: var(--ls-nav);
  text-transform: uppercase; cursor: pointer; text-align: left;
  transition: background 180ms, color 180ms;
}
.settings-list .settings-row:last-child { border-bottom: 0; }
.settings-row:hover { background: var(--paper-2); }
.settings-row:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
.settings-row span:last-child { opacity: var(--dim); }
.settings-row.is-active span:last-child { color: var(--clay); opacity: 1; }
.settings-row--static { cursor: default; opacity: var(--dim); }
.settings-row--static:hover { background: transparent; }

/* 1280px–1365px used to switch to a taller vertical folder stack here and
   let the page scroll (see git history if you need it back) — removed so
   this width shares the exact-fit desktop layout below instead. That
   layout already shrinks to whatever height is available and clips
   overflow instead of growing past it (.grid's minmax(0, ...) rows,
   .folder/.folder__content's flex:1 + min-height:0 + overflow:hidden,
   .figure__caption's line-clamp) — no extra rule was needed here, this
   width just needed to stop opting out of it. Folders stay side-by-side
   at this width, simply narrower.

   The analogous "wide but short" case (>=1366px width, <=820px height)
   had the same scrolling opt-out for the same non-reason and was removed
   too — no media query for it exists below 1366px+max-height anymore. */

/* Below 1280px: every card stacks full-width in a single column, and the
   nav card leaves the flow entirely to become a hamburger-triggered
   overlay (see .card--nav rules + js/main.js). */
@media (max-width: 1279px) {
  body { overflow: auto; }
  .page { height: auto; min-height: 100dvh; }
  .frame { height: auto; }
  .grid { grid-template-rows: none; grid-auto-rows: min-content; flex: none; }

  .card--profile   { grid-column: span 12; grid-row: auto; min-height: 330px; }
  .card--gallery   { grid-column: span 12; grid-row: auto; min-height: 400px; }
  .card--experience{ grid-column: span 6;  grid-row: auto; min-height: 210px; }
  .card--mentoring { grid-column: span 6;  grid-row: auto; min-height: 210px; }
  .card--about     { grid-column: span 12; grid-row: auto; min-height: 240px; }

  .gallery__folders { flex-direction: column; }
  .card--interactive, .folder { transition: none; }

  .topbar {
    height: auto; flex-wrap: wrap; row-gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
  }
  .topbar__id, .topbar__meta { flex: 1 1 100%; }
  .topbar__meta { justify-content: space-between; }

  .hamburger { display: flex; }
  .nav-close { display: flex; }

  .card--nav {
    /* fixed, not absolute — .frame is height:auto here (it fits all the
       stacked cards below), so an absolutely-positioned overlay would
       stretch to the full scrollable page instead of just the viewport */
    position: fixed; inset: 8px; z-index: 80;
    grid-column: unset; grid-row: unset; min-height: 0;
  }
  .card--nav[hidden] { display: none; }

  /* Rows default to flex:1, stretching to fill the whole overlay height
     (fine on the desktop nav column). In the overlay, that turns 6 rows
     into oversized tap targets — give them a natural, content-sized
     height instead so the list reads as a normal compact menu. */
  .drawer__row { flex: none; padding: var(--space-4) var(--space-5); }

  body.nav-open { overflow: hidden; }
}

/* True mobile: light theme forced regardless of OS dark-mode setting
   (see the color-scheme meta tag in index.html — this CSS property backs
   it up for engines that check the property over the meta), Experience
   and Mentoring stack full-width instead of sitting side by side, and the
   footer keeps the compact Contact trigger so the wordmark can take the
   freed-up width. */
@media (max-width: 980px) {
  :root { color-scheme: light; }

  .card--experience { grid-column: span 12; }
  .card--mentoring  { grid-column: span 12; }

  .pagefoot { flex-wrap: nowrap; }
  .wordmark { flex: 1 1 auto; min-width: 0; }
  .pagefoot__links { flex: none; gap: var(--space-4); }
  .contact-popup { min-width: 200px; }
}