/* =========================================================
   Meet Shah — portfolio
   Palette taken from the existing meetshah.xyz theme.
   ========================================================= */

/* Metric-matched local fallback for Poppins, so headings don't jump
   when the web font swaps in. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 112.16%;
  ascent-override: 93.62%;
  descent-override: 31.21%;
  line-gap-override: 8.92%;
}

:root {
  /* From the existing site */
  --azure: #007ced;        /* signature accent (body background, borders, heading bars) */
  --ink-900: #222222;      /* page */
  --ink-800: #282828;      /* raised surface */
  --ink-700: #333333;      /* controls, quiet surfaces */
  --line: #444444;         /* borders */
  --text-1: #f5f5f5;       /* headings */
  --text-2: #d5d5d5;       /* body */
  --text-3: #aaaaaa;       /* secondary */

  /* Derived: a deeper step of the azure so white button text passes WCAG AA (5.4:1) */
  --azure-deep: #0069cc;
  --azure-deeper: #005bb0;

  --font-display: "Poppins", "Poppins Fallback", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 64px;
  --section-y: clamp(72px, 10vw, 136px);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text-2);
  font: 400 1.0625rem/1.65 var(--font-body);
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.2;
}

a { color: inherit; text-decoration-color: var(--azure); text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--text-1);
  color: var(--ink-900);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;            /* pill, as on the current site */
  border: 1.5px solid transparent;
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--azure-deep); color: #fff; }
.btn-primary:hover { background: var(--azure-deeper); }

.btn-ghost { border-color: var(--text-2); color: var(--text-1); }
.btn-ghost:hover { border-color: var(--azure); }

.btn-small { min-height: 40px; padding: 0 18px; font-size: .9375rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(34, 34, 34, .94);
  border-bottom: 1px solid var(--ink-700);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 600 1.0625rem/1 var(--font-display);
  color: var(--text-1);
}
.brand img { width: 28px; height: 28px; }

.nav-desktop { display: none; align-items: center; gap: 32px; }
.nav-desktop ul { display: flex; gap: 28px; }
.nav-desktop ul a {
  color: var(--text-2);
  text-decoration: none;
  font-size: .9375rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-desktop ul a:hover,
.nav-desktop ul a[aria-current] { color: var(--text-1); border-bottom-color: var(--azure); }

/* Mobile menu: native <details>, works without JavaScript */
.nav-mobile { position: relative; }
.nav-mobile summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px 0 12px;
  list-style: none;
  cursor: pointer;
  color: var(--text-1);
  font-size: .9375rem;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.burger { position: relative; order: 2; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.nav-mobile[open] .burger { background: transparent; }
.nav-mobile[open] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-mobile[open] .burger::after { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile nav {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  background: var(--ink-800);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 20px;
}
.nav-mobile nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-700);
  color: var(--text-1);
  text-decoration: none;
  font: 600 1.25rem/1.3 var(--font-display);
}
.nav-mobile nav li:last-child a { border-bottom: 0; color: #fff; }

@media (min-width: 880px) {
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(36px, 6vw, 88px) clamp(64px, 9vw, 120px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "photo" "body";
  row-gap: 32px;
}
.hero-intro { grid-area: intro; }
.hero-photo { grid-area: photo; }
.hero-body  { grid-area: body; }

.hero-name {
  font-size: clamp(3.5rem, 23vw, 8.75rem);
  line-height: .9;
  letter-spacing: -0.035em;
}
.hero-name span { display: block; }
.hero-title {
  margin-top: 20px;
  max-width: 22ch;
  font: 600 clamp(1.125rem, 2.2vw, 1.5rem)/1.35 var(--font-display);
  color: var(--text-2);
}

/* Portrait on an azure slab that runs out to the right edge of the screen */
.hero-photo {
  position: relative;
  margin-right: calc(var(--gutter) * -1);
  padding: 28px var(--gutter) 0 0;
}
.hero-photo .slab {
  position: absolute;
  top: 0;
  bottom: 18%;
  left: 22%;
  right: 0;
  background: var(--azure);
}
.hero-photo img {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 4 / 5;                /* original is 709x945; trims sky above the face */
  object-fit: cover;
  object-position: 48% 78%;
  background: var(--ink-700);         /* shown while the photo loads */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}

.hero-statement { max-width: 62ch; color: var(--text-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-roles {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: .9375rem;
}
.hero-roles { display: flex; flex-wrap: wrap; gap: 4px 0; }
.hero-roles li + li::before { content: "/"; color: var(--azure); padding-inline: 10px; }

@media (min-width: 880px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro photo" "body photo";
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: 40px;
    align-items: start;
  }
  .hero-intro { padding-top: clamp(16px, 4vw, 56px); }
  .hero-photo {
    align-self: stretch;
    margin-right: 0;
    padding: 48px 0 0 0;
  }
  /* slab bleeds past the wrapper to the viewport edge */
  .hero-photo .slab {
    left: 26%;
    right: calc((100vw - min(100vw, var(--wrap) + var(--gutter) * 2)) / -2 - var(--gutter));
    bottom: 22%;
  }
  .hero-photo img { width: 100%; max-width: 480px; }
}

/* Hero entrance, timed to start as the intro curtain clears.
   Transform-only (no opacity), so the browser paints the hero content immediately
   and Largest Contentful Paint isn't delayed by the animation. */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo .slab { transform-origin: right; animation: slab-in .9s calc(var(--intro-end) - .2s) cubic-bezier(.2, .7, .1, 1) both; }
  .hero-photo img { animation: rise .8s calc(var(--intro-end) - .05s) cubic-bezier(.2, .7, .1, 1) both; }
  .hero-name span { animation: rise .7s calc(var(--intro-end) - .25s) cubic-bezier(.2, .7, .1, 1) both; }
  .hero-name span + span { animation-delay: calc(var(--intro-end) - .17s); }
}
@keyframes slab-in { from { transform: scaleX(0); } }
@keyframes rise { from { transform: translateY(28px); } }

/* ---------- Intro ----------
   0.00s  logo scales in
   0.15s  azure line fills under it
   1.00s  logo lifts away
   1.10s  charcoal layer slides up, revealing an azure layer
   1.25s  azure layer slides up, revealing the page
   1.95s  intro removed (no pointer blocking after this)
   Skipped on repeat visits in the same session and for reduced-motion users. */
:root { --intro-end: 1.75s; }
.intro-seen { --intro-end: 0s; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  animation: intro-done 0s 1.95s forwards;
}
.intro::before {                      /* azure layer, under the charcoal panel */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azure);
  animation: intro-lift .7s 1.25s cubic-bezier(.75, 0, .2, 1) forwards;
}
.intro-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink-900);
  animation: intro-lift .7s 1.1s cubic-bezier(.75, 0, .2, 1) forwards;
}
.intro-mark {
  display: grid;
  justify-items: center;
  gap: 22px;
  animation: intro-mark-out .35s 1s ease-in forwards;
}
.intro-mark img {
  width: 80px;
  height: 80px;
  animation: intro-logo .7s cubic-bezier(.2, .8, .2, 1) both;
}
.intro-bar {
  position: relative;
  width: 80px;
  height: 2px;
  background: var(--ink-700);
  overflow: hidden;
}
.intro-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azure);
  transform-origin: left;
  animation: intro-fill .8s .15s cubic-bezier(.6, 0, .2, 1) both;
}

@keyframes intro-logo { from { opacity: 0; transform: scale(.8) rotate(-8deg); } }
@keyframes intro-fill { from { transform: scaleX(0); } }
@keyframes intro-mark-out { to { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes intro-lift { to { transform: translateY(-100%); } }
@keyframes intro-done { to { visibility: hidden; } }

.intro-seen .intro { display: none; }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section-raised { background: var(--ink-800); border-block: 1px solid var(--ink-700); }

/* Short azure bar under headings: carried over from the current site */
.section-title {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
.section-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 14px;
  background: var(--azure);
}
.section-lede { max-width: 34ch; color: var(--text-3); margin-top: -12px; }

/* What I do */
.split { display: grid; gap: 8px; }
.services { display: grid; gap: 0; }
.services li { padding: 28px 0; border-top: 1px solid var(--line); }
.services h3 { font-size: 1.25rem; margin-bottom: 10px; }
.services p { max-width: 54ch; }

@media (min-width: 760px) {
  .services { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 56px); }
  .services li { padding: 32px 0 40px; }
}
@media (min-width: 1080px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; }
  .split-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* Experience */
.career { display: grid; gap: 72px; }
@media (min-width: 1000px) {
  .career { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); }
}

.timeline { border-left: 2px solid var(--line); margin-left: 5px; }
.timeline li {
  position: relative;
  display: grid;
  gap: 4px 28px;
  padding: 0 0 32px 28px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {           /* marker on the line */
  content: "";
  position: absolute;
  left: -7px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 2px solid var(--azure);
}
.timeline li:first-child::before { background: var(--azure); }
.tl-years {
  font: 600 .9375rem/1.6 var(--font-display);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.timeline h3 { font-size: 1.1875rem; line-height: 1.35; }
.timeline p { color: var(--text-3); }
.timeline .tl-note { margin-top: 8px; color: var(--text-2); font-size: .9688rem; max-width: 48ch; }

@media (min-width: 560px) {
  .timeline:not(.timeline-compact) li { grid-template-columns: 9.5ch minmax(0, 1fr); }
}

.cert {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color .2s ease;
}
.cert:hover { border-color: var(--azure); }
.cert img { width: 72px; height: 72px; flex: none; }
.cert-text { display: grid; gap: 4px; font-size: .9375rem; color: var(--text-3); }
.cert-text strong { color: var(--text-1); font: 600 1.0625rem/1.3 var(--font-display); }

/* Testimonials */
.quotes { display: grid; gap: 48px; }
.quote { display: flex; flex-direction: column; gap: 24px; }
.quote blockquote p { max-width: 62ch; }
.quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote figcaption img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink-700);
}
.quote figcaption span { display: grid; color: var(--text-3); font-size: .9375rem; line-height: 1.4; }
.quote figcaption strong { color: var(--text-1); font-weight: 600; }

.quote-featured { position: relative; }
.quote-mark {
  font: 600 6rem/0.6 var(--font-display);
  color: var(--azure);
  height: 40px;
}
.quote-featured blockquote p {
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  line-height: 1.55;
  color: var(--text-1);
}
.quote-featured figcaption { margin-top: 8px; }

@media (min-width: 900px) {
  .quotes {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 48px;
  }
  .quote-featured { grid-row: span 2; padding-right: 8px; }
  .quote:not(.quote-featured) { padding-left: 32px; border-left: 1px solid var(--line); }
}

/* Contact: the azure field from the current site, with a dark panel */
.contact {
  background: var(--azure);
  padding-block: clamp(64px, 9vw, 120px);
}
.contact-grid { display: grid; gap: 40px; align-items: center; }
.contact-title {
  color: #fff;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 10ch;
}
.contact-list {
  background: var(--ink-900);
  padding: clamp(8px, 2vw, 16px) clamp(20px, 3vw, 36px);
}
.contact-list li {
  display: grid;
  gap: 2px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-700);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-label { color: var(--text-3); font-size: .875rem; }
.contact-list a {
  color: var(--text-1);
  font: 600 clamp(1.125rem, 2.4vw, 1.5rem)/1.35 var(--font-display);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  overflow-wrap: anywhere;
  transition: text-decoration-color .2s ease;
}
.contact-list a:hover { text-decoration-color: var(--azure); }
.contact :focus-visible { outline-color: #fff; }
.contact-list :focus-visible { outline-color: var(--azure); }

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 64px; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--ink-700); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 28px;
  color: var(--text-3);
  font-size: .875rem;
}
.footer-inner a { color: var(--text-2); }