/* Varun Gawade portfolio v1. Tokens and rules come from DESIGN.md. */

:root {
  --ground: #120e14;
  --surface: var(--raised);
  --raised: #1b1519;
  --ink: #f4ece3;
  --muted: #a99b96;
  --accent: #e4602c;
  --accent-hover: #f0743f;
  --on-accent: #1a0d08;
  --hairline: rgba(244, 236, 227, 0.10);
  --hairline-strong: rgba(244, 236, 227, 0.18);
  --display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --text: "Figtree", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --radius: 12px;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(64px, 8vw, 104px);
  --spring: 650ms linear(0, 0.0792, 0.2371, 0.4044, 0.5525, 0.6726, 0.7652, 0.8341, 0.8842, 0.9199, 0.9451, 0.9626, 0.9747, 0.9829, 0.9886, 0.9924, 0.9949, 0.9966, 0.9978, 0.9985, 0.999, 1);
  --press: 400ms linear(0, 0.2322, 0.5714, 0.8083, 0.9336, 0.9868, 1.0038, 1.0062, 1.0045, 1.0024, 1.001, 1.0003, 1);
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding clears the 64px sticky nav, so every anchor jump lands the
   section heading below it rather than behind it. */
html { scroll-behavior: smooth; scroll-padding-top: 64px; scrollbar-color: #3a2f35 var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
svg[hidden] { display: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 4.2vw, 3.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

.skip { position: absolute; left: -999px; top: 12px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { left: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 32px;
  height: 64px;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  background: rgba(18, 14, 20, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.nav-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { color: var(--muted); font-weight: 500; transition: color 180ms ease-out; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: 8px; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; white-space: nowrap;
  transition: transform var(--spring), background-color 180ms ease-out, border-color 180ms ease-out;
}
.button svg { width: 18px; height: 18px; flex: none; }
.button:hover { background: var(--accent-hover); transform: translateY(-2px); }
.button:active { transform: scale(0.98); transition: transform var(--press); }
.button-small { min-height: 40px; padding: 0 16px; font-size: 0.95rem; }
.button-large { min-height: 60px; padding: 0 30px; font-size: 1.1rem; }
/* Secondary action. DESIGN.md keeps one accent button per section, so the chrome stays
   neutral and only the mark carries the brand's own colour, the same allowance the logos have. */
.button-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.button-ghost:hover { background: rgba(244, 236, 227, 0.06); border-color: rgba(244, 236, 227, 0.3); }
.button-ghost svg { color: #25d366; width: 20px; height: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero: the Prisma pattern rebuilt. A rounded video panel under the nav, noise and shade over it,
   the name bottom-left pulling up word by word, the lede and a pill action bottom-right. */
.hero { padding: 12px; }
.hero-panel { position: relative; height: calc(100svh - 64px - 24px); min-height: min(520px, calc(100svh - 88px)); border-radius: 24px; overflow: hidden; background: var(--raised); isolation: isolate; }
.hero-video, .hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* The portrait encodes are already cut around the subject (scripts/encode-hero.sh crops
   at x=716, reproducing what 60% picked out of the landscape frame), so anchoring at 60%
   again would push the framing off it. The still's query must stay identical to the
   <source media> beside it in index.html; the video's class comes from script.js, which
   is where the video tier is chosen. */
.hero-video--narrow { object-position: 50% 50%; }
@media (max-width: 700px) and (orientation: portrait) { .hero-still { object-position: 50% 50%; } }
/* The still sits under the video and shows through until there is a frame to paint. */
.hero-video { background: transparent; }
.hero-noise { position: absolute; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("img/noise.svg"); }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18, 14, 20, 0.35) 0%, rgba(18, 14, 20, 0) 30%, rgba(18, 14, 20, 0) 55%, rgba(18, 14, 20, 0.72) 100%); }
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: end; padding: 0 clamp(20px, 3vw, 44px) clamp(14px, 2vw, 24px); }
.hero-name .w:nth-child(1) { --i: 0; }
.hero-name .w:nth-child(2) { --i: 1; }
.hero-name { font-size: clamp(3.5rem, 11vw, 14rem); font-weight: 700; line-height: 0.85; letter-spacing: -0.06em; color: var(--ink); margin: 0 0 -0.08em -0.04em; white-space: nowrap; text-wrap: nowrap; }
.hero-name .w { display: inline-block; opacity: 0; transform: translateY(20px); animation: pull 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 80ms); }
.hero-aside { display: grid; gap: 20px; justify-items: start; padding-bottom: clamp(8px, 1.5vw, 24px); }
.hero-aside .lede { font-size: clamp(0.95rem, 1.1vw, 1.1rem); line-height: 1.35; color: rgba(244, 236, 227, 0.82); max-width: 30rem; margin: 0; opacity: 0; transform: translateY(20px); animation: pull 800ms cubic-bezier(0.16, 1, 0.3, 1) 500ms forwards; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 1rem; opacity: 0; transform: translateY(20px); animation: pull 800ms cubic-bezier(0.16, 1, 0.3, 1) 700ms forwards; transition: gap 200ms ease-out, background-color 180ms ease-out; }
.pill:hover { gap: 16px; background: var(--accent-hover); }
.pill:active .pill-arrow { transform: scale(0.94); }
.pill-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--ground); color: var(--ink); display: grid; place-items: center; transition: transform var(--spring); }
.pill-arrow svg { width: 18px; height: 18px; }
.pill:hover .pill-arrow { transform: scale(1.1); }
@keyframes pull { to { opacity: 1; transform: none; } }

/* Education: the window still runs to the right edge and blends into the dark on its left,
   the way the first hero was built; the two school cards stack on the left. */
.edu-section { position: relative; overflow: hidden; }
.edu-art { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; pointer-events: none; }
.edu-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.edu-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ground) 0%, var(--ground) 8%, rgba(18, 14, 20, 0.75) 28%, rgba(18, 14, 20, 0) 55%); }
.edu-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ground) 0%, rgba(18, 14, 20, 0) 22%, rgba(18, 14, 20, 0) 78%, var(--ground) 100%); }
.edu-section .wrap { position: relative; max-width: none; }
.edu-col { max-width: 30rem; }
.card.card-edu { min-height: 0; padding: 20px 22px 22px; gap: 10px; }
.card-edu > p { margin: 0; }

/* Sections */
.section { padding: var(--section) 0; }
.section h2 { margin-bottom: 40px; }
.intro { font-size: 1.15rem; color: var(--muted); max-width: 62ch; margin: -28px 0 48px; }
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.reveal.in { opacity: 1; transform: none; }

/* Work: a soft lamp-coloured light field sits behind the glass cards so the blur reads as material */
#work { position: relative; overflow: hidden; }
#work::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% 22%, rgba(228, 96, 44, 0.16), transparent 70%),
    radial-gradient(45% 40% at 18% 78%, rgba(254, 218, 139, 0.09), transparent 70%); }
#work .wrap { position: relative; }
.work-grid, .edu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.edu { grid-template-columns: 1fr; }

/* Glass card: the 21st.dev GradientCard pattern (logo, heading, line, arrow, springing object) rebuilt to DESIGN.md */
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  min-height: 240px; padding: 26px 26px 24px;
  background: rgba(244, 236, 227, 0.045);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(244, 236, 227, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--spring), border-color 180ms ease-out, background-color 180ms ease-out;
}
.card:hover { transform: translateY(-2px); border-color: rgba(244, 236, 227, 0.22); background: rgba(244, 236, 227, 0.07); }
.card:active { transform: scale(0.98); transition: transform var(--press); }
.card-logo {
  flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(244, 236, 227, 0.08); border: 1px solid rgba(244, 236, 227, 0.10);
  transition: transform var(--spring);
}
.card-logo-text { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; color: var(--ink); }
.card-logo img { width: 32px; height: 32px; object-fit: contain; }
.card:hover .card-logo { transform: scale(1.08) rotate(3deg); }
.card-head { display: flex; align-items: center; gap: 14px; }
.card h3 { margin: 0; }
.card > p { color: var(--muted); font-size: 0.98rem; line-height: 1.55; }
.card-link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 0.95rem; width: fit-content; }
.card-link svg { width: 16px; height: 16px; transition: transform var(--spring); }
.card-link:hover { color: var(--accent-hover); }
.card-link:hover svg { transform: translate(2px, -2px); }
.card-link-off { color: var(--muted); font-weight: 500; }
.card-meta { color: var(--muted); font-size: 0.9rem; }

/* Experience: one rail down the page with an accent fill bound to scroll
   progress (Motion's scroll(), see motion-rail.js). The roles are always open now;
   the collapsing <details> rows and the Now/Before grouping are gone. */
.timeline { position: relative; padding-left: clamp(28px, 4vw, 48px); }
.timeline-rail { position: absolute; left: 3px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: var(--hairline-strong); overflow: hidden; }
.timeline-fill { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 2.4vw, 30px); }
.role { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
.role-logo { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 10px; background: #f4ece3; object-fit: contain; padding: 6px; box-sizing: border-box; }
.role-when, .role-title, .role-org, .role-summary { grid-column: 2; }
.role-dot { position: absolute; left: calc(clamp(28px, 4vw, 48px) * -1); top: 17px; width: 10px; height: 10px; margin-left: -1px; border-radius: 50%; background: var(--ground); border: 2px solid var(--hairline-strong); transition: background-color 240ms ease-out, border-color 240ms ease-out; }
.role.is-passed .role-dot { background: var(--accent); border-color: var(--accent); }
.role-when { margin: 0 0 4px; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.role.is-now .role-when { color: var(--accent); font-weight: 500; }
.role-title { font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.role-org { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }
.role-co { color: var(--ink); font-size: 1.15rem; font-weight: 500; }
/* Experience sits at the page gutter like Work, so its heading lines up with "Built with AI". */
#experience .wrap { max-width: none; }
.role-summary { margin: 8px 0 0; max-width: 80ch; font-size: 1rem; line-height: 1.55; color: rgba(244, 236, 227, 0.86); }

/* About: a full-screen statement. The type scale here is a deliberate exception
   to the body scale, so the bio reads as its own view rather than a paragraph. */
.statement { min-height: calc(100svh - 64px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: clamp(28px, 4vh, 56px) 0; }
.statement .wrap { max-width: none; margin: 0; }
#about h2 { margin-bottom: clamp(20px, 2.4vw, 34px); }
.statement-prose { display: grid; gap: 0.7em; font-size: clamp(1.25rem, min(2.5vw, 3.4vh), 2.15rem); line-height: 1.34; letter-spacing: -0.013em; color: var(--ink); text-wrap: pretty; }
.statement-prose p { margin: 0; }
.statement-prose p + p { color: var(--muted); }
/* The two projects he wants the eye to land on, in the one accent. */
.statement-prose .hl { color: var(--accent); font-weight: 500; }

/* Contact */
/* The closing sits at the page gutter like the statement, the Work grid and
   Education, so the page keeps one left edge instead of alternating. Its bottom
   padding is short because the footer supplies the separation underneath it. */
#contact .wrap { max-width: none; }
#contact { padding-bottom: clamp(48px, 6vw, 72px); }
/* Text column grows to its measure and no further; the cards take the rest to the
   right gutter, never less than a card's width, so the text wraps first on narrow screens. */
.contact { display: grid; grid-template-columns: 220px minmax(0, 36rem) minmax(220px, 1fr); gap: 40px; align-items: stretch; }
/* The photo fills the row so all three columns share one top and one bottom edge. */
.portrait { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; box-shadow: var(--shadow); }
/* This carries the one ask on the page, so it is sized well above the other h2s. */
#contact h2 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1; }
.contact .intro { max-width: 52ch; font-size: 1.15rem; margin: 20px 0 0; }
.contact .intro-second { color: var(--muted); margin: 14px 0 32px; }
.contact .address { margin-top: 14px; }
/* Socials as stacked cards under the headshot, each with the brand's own tile
   colour: these are logos, not UI colour, the way the Work cards carry theirs. */
.contact-aside { justify-self: end; width: 100%; display: grid; align-content: space-between; }
.social-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.social-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline); color: var(--ink); text-decoration: none; transition: transform var(--spring), border-color 180ms ease-out, background-color 180ms ease-out; }
.social-card:hover { transform: translateY(-2px); border-color: rgba(244, 236, 227, 0.3); background: rgba(244, 236, 227, 0.05); }
a.social-card:active { transform: scale(0.98); }
.social-tile { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
.social-tile svg { width: 24px; height: 24px; }
.tile-linkedin { background: #0a66c2; color: #fff; }
.tile-x { background: #000; color: #fff; }
.tile-github { background: #fff; color: #24292f; }
.tile-img { overflow: hidden; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A hairline separates the two groups: where to find him, then what he holds. */
.cert-cards { position: relative; margin-top: 12px; padding-top: 14px; }
.cert-cards::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent) 22%, var(--accent) 78%, transparent 100%); }
div.social-card { cursor: default; }
div.social-card:hover { transform: none; border-color: var(--hairline); background: var(--surface); }
.social-text { display: grid; line-height: 1.2; min-width: 0; text-align: center; justify-items: center; }
.social-text strong { font-weight: 600; font-size: 1.05rem; }
.social-text span { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.address { margin-top: 20px; color: var(--muted); font-size: 0.95rem; }
.address a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }

.nav-links a[aria-current="true"] { color: var(--ink); }

/* Follows the closing above it to the page gutter. */
.footer .wrap { max-width: none; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.footer-line { margin: 0; }
.footer-sig { margin-top: 4px; color: rgba(169, 155, 150, 0.8); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-nav a { color: var(--muted); transition: color 180ms ease-out; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ink); }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); transition: color 180ms ease-out, background-color 180ms ease-out; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--accent); background: rgba(244, 236, 227, 0.05); }
.footer-social svg { width: 20px; height: 20px; }
.statement-prose a { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; text-decoration-color: rgba(244, 236, 227, 0.45); transition: text-decoration-color 180ms ease-out; }
.statement-prose a:hover { text-decoration-color: var(--accent); }
.footer { padding: 40px 0 48px; color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--hairline); }

/* Mobile and narrow */
@media (max-width: 1000px) {
  /* Below this the email line cannot wrap and the three columns no longer fit. */
  .contact { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .contact-aside { grid-column: 2; justify-self: start; max-width: 320px; }
  .portrait { height: auto; }
}
@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .contact { grid-template-columns: 170px 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .cta-label { display: none; }
  .nav-cta .button-ghost { padding: 0; width: 40px; justify-content: center; }
  .hero { padding: 8px; }
  .hero-panel { height: calc(100svh - 64px - 16px); border-radius: 18px; }
  .hero-bottom { grid-template-columns: 1fr; gap: 16px; padding: 0 18px 18px; }
  .hero-name { font-size: 21vw; white-space: normal; text-wrap: balance; line-height: 0.9; }
  .hero-aside .lede { font-size: 0.95rem; }
  .work-grid, .edu { grid-template-columns: 1fr; }
  .statement { min-height: 0; padding: var(--section) 0; }
  .statement-prose { max-width: none; gap: 0.9em; }
  .card { min-height: 0; }
  .role-summary { font-size: 0.95rem; }
  .role { grid-template-columns: 36px 1fr; column-gap: 12px; }
  .role-logo { width: 36px; height: 36px; }
  .role-dot { top: 13px; }
  .contact { grid-template-columns: 1fr; gap: 28px; }
  /* The card column fills the page width on a phone rather than sitting in a 320px
     strip; it still starts at the gutter, like every other section. */
  .contact-aside { grid-column: 1; max-width: none; }
  /* Full bleed: a replaced element does not stretch in a grid, so the width is stated
     explicitly and the negative margin pulls it back out through the page gutter. */
  .portrait { max-width: none; width: 100vw; height: auto; aspect-ratio: 4 / 5;
    margin-inline: calc(50% - 50vw); border-radius: 0; box-shadow: none; }
  .actions .button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* Position feedback without motion, held here so it does not depend on motion-rail.js loading. */
  .timeline-fill { transform: scaleY(1); }
  .role-dot { background: var(--accent); border-color: var(--accent); }
  html { scroll-behavior: auto; }
  .hero-video { display: none; }  /* the still underneath is already in place */
  .hero-name .w, .hero-aside .lede, .pill { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button, .card, .card-logo, .card-link svg { transition: opacity 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out; }
  .button:hover, .card:hover, .card:hover .card-logo, .card-link:hover svg, .button:active, .card:active { transform: none; }
  .role-dot { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .card { background: var(--raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.logo-invert { filter: invert(1) brightness(1.1); mix-blend-mode: screen; }
.logo-wide { width: 40px !important; height: 40px !important; }

/* Work runs edge to edge: the grid uses the full viewport width minus the page gutter (Varun, 4 Sep) */
#work .wrap { max-width: none; }
.work-grid { gap: 24px; }
.card-logo.on-light { background: #f6f1ea; border-color: rgba(244, 236, 227, 0.35); }
.card-logo.on-light img { width: 38px; height: 38px; }
@media (max-width: 640px) {
  .edu-section { padding-top: 0; }
  .edu-art { position: relative; width: 100%; height: 58vw; min-height: 240px; }
  .edu-art::before { display: none; }
  .edu-art::after { background: linear-gradient(180deg, rgba(18, 14, 20, 0.2) 0%, rgba(18, 14, 20, 0) 30%, rgba(18, 14, 20, 0) 55%, var(--ground) 100%); }
  .edu-col { max-width: none; margin-top: 8px; }
}

/* Touch. On iOS a tapped element keeps :hover until the next tap elsewhere, so every hover
   that moves something would stay moved. :active already supplies the press feedback. */
@media (hover: none) {
  .button:hover, .card:hover, .card:hover .card-logo, .card-link:hover svg,
  .social-card:hover, .pill:hover .pill-arrow { transform: none; }
  .pill:hover { gap: 10px; }
}
/* Comfortable targets for a finger. WCAG 2.2 AA asks 24px; 44px is the platform guidance. */
@media (pointer: coarse) {
  .footer-social a { width: 44px; height: 44px; }
  .footer-nav a { display: inline-block; padding: 10px 0; }
  .card-link { min-height: 44px; align-items: center; }
  .address a { display: inline-block; padding: 4px 0; }
}
@media (max-width: 380px) {
  .cta-label-me { display: none; }
  .nav { gap: 8px; }
}