@charset "utf-8";
/* ==========================================================================
   Hardik Dhanak — portfolio v3
   Direction: monochrome broadsheet. Ink on paper, hairline and bar rules,
   square edges everywhere, editorial serif headlines, resume-style tables.
   Type: Newsreader (display, + italic) · Inter (text, labels).
   ========================================================================== */

/* --- fonts -------------------------------------------------------------- */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2-variations'),
       url('../fonts/newsreader-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-var.woff2') format('woff2-variations'),
       url('../fonts/newsreader-italic-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations'),
       url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ------------------------------------------------------------- */
:root {
  --paper: #fafaf7;
  --paper-2: #f1f1ed;
  --ink: #141413;
  --ink-2: #3c3c3a;
  --gray: #6f6f6b;
  --faint: #9b9b96;
  --rule: #d9d9d4;
  --rule-2: #e7e7e2;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --wrap: 76rem;
  --pad: clamp(1.1rem, 4vw, 3.5rem);
  --band: clamp(3.5rem, 8vw, 7rem);
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.91rem + 0.2vw, 1.05rem);
  line-height: 1.65;
  font-feature-settings: 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.skip {
  position: absolute;
  width: 1px; height: 1px; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--ink); color: var(--paper);
  font-weight: 600; z-index: 300;
}
.skip:focus {
  position: fixed; left: 0.8rem; top: 0.8rem;
  width: auto; height: auto;
  padding: 0.8rem 1.2rem;
  overflow: visible; clip-path: none;
}

/* --- primitives ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * 0.6); }

/* small-caps slug */
.kicker {
  display: block;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 1rem;
}

/* section head — bar rule, serif title, right-hand slug */
.shead {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  align-items: baseline; justify-content: space-between;
  position: relative;
  padding-top: 0.9rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.shead h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.shead__meta {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint);
}

/* buttons — square, ink */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn svg { width: 0.95em; height: 0.95em; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* status tags — square, monochrome */
.tag {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--ink);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
}
.tag--in-market { background: var(--ink); color: var(--paper); }
.tag--prototype { }
.tag--study { border-color: var(--gray); color: var(--gray); }

/* --- masthead -------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.25s var(--ease);
}
.masthead.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 8px 24px -20px rgba(20, 20, 19, 0.5); }
.masthead__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--pad);
  min-height: 4.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.mark { display: inline-flex; align-items: center; gap: 0.7rem; }
.mark__badge {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--serif); font-weight: 600; font-size: 0.82rem;
}
.mark__text {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.005em;
}

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__link {
  display: inline-block;
  padding: 0.6rem 0.1rem;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray);
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link.is-current { color: var(--ink); border-bottom-color: var(--ink); }
.nav__cta {
  margin-left: 0.4rem;
  padding: 0.55rem 1rem;
  font-size: 0.68rem;
}

.menu-toggle {
  display: none;
  align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ink);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.menu-toggle__bars { display: grid; gap: 4px; width: 14px; }
.menu-toggle__bars i { height: 1.5px; background: currentColor;
  transition: transform 0.28s var(--ease); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* --- headline block ---------------------------------------------------------- */
.headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.headline em { font-style: italic; font-weight: 400; }
.deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 36rem;
  margin-top: clamp(0.9rem, 2vw, 1.3rem);
}
.byline {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
  margin-top: clamp(1.3rem, 3vw, 2rem);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
}
.byline b { color: var(--ink); font-weight: 600; }

/* --- hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(2rem, 4vh, 3rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: clamp(1.4rem, 3vw, 2rem); }

/* figure with newspaper caption */
.figure { margin: 0; }
.figure__frame {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.figcap {
  padding-top: 0.55rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.55rem;
  font-size: 0.76rem; line-height: 1.5;
  color: var(--gray);
}
.figcap b { color: var(--ink); font-weight: 600; }

/* stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-top: clamp(2rem, 5vw, 3.2rem);
}
.stats__cell {
  padding: 1rem 1.1rem 1.1rem 0;
  border-right: 1px solid var(--rule);
}
.stats__cell:last-child { border-right: 0; }
.stats__cell + .stats__cell { padding-left: 1.1rem; }
.stats__cell b {
  display: block;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1;
}
.stats__cell span {
  display: block; margin-top: 0.35rem;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray);
}

/* client strip — static, ruled */
.clients {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.clients__list {
  max-width: var(--wrap); margin-inline: auto;
  padding: 0.9rem var(--pad);
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  align-items: center;
}
.clients__item {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.clients__item::after { content: '·'; margin-left: 1.6rem; color: var(--rule); }
.clients__item:last-child::after { content: ''; margin: 0; }

/* --- stories (work index) ---------------------------------------------------- */
.stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 3.2rem) clamp(1.4rem, 3vw, 2.4rem);
}
.story { display: block; }
.story--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
.story__media {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.story--lead .story__media { aspect-ratio: 16 / 10; }
.story__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.3s var(--ease);
}
.story:hover .story__media img { opacity: 0.9; }
.story__body { padding-top: 0.9rem; border-top: 3px solid var(--ink); margin-top: 0.9rem; }
.story--lead .story__body { margin-top: 0; }
.story__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.65rem;
}
.story__title {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s var(--ease);
}
.story--lead .story__title { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
.story:hover .story__title { text-decoration-color: var(--ink); }
.story__deck {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-2);
  font-size: 1rem;
  margin: 0.4rem 0 0.6rem;
}
.story__foot {
  font-size: 0.72rem;
  color: var(--gray);
}

/* --- capabilities: two-column ruled list -------------------------------------- */
.caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cap {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cap__no {
  display: block;
  font-family: var(--serif); font-style: italic;
  font-size: 0.95rem;
  color: var(--faint);
  margin-bottom: 0.6rem;
}
.cap__title { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.35rem; }
.cap__body { color: var(--gray); font-size: 0.86rem; line-height: 1.6; }

/* --- article (project page) ----------------------------------------------------- */
.article-head { padding-block: clamp(2rem, 5vh, 3.5rem) 0; }
.backlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray);
  margin-bottom: clamp(1.2rem, 3vh, 1.8rem);
  transition: color 0.2s var(--ease);
}
.backlink:hover { color: var(--ink); }

.metaline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.4rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
}

.phero-fig { margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; }
.phero-fig .figure__frame { aspect-ratio: 16 / 9; }

.pgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin-bottom: 1.2rem;
}
.lede + p { color: var(--ink-2); }
.prose p { color: var(--ink-2); }
.prose .lede { color: var(--ink); }

/* resume-style spec table */
.aside { position: sticky; top: 5.5rem; }
.aside__head {
  border-top: 3px solid var(--ink);
  padding-top: 0.7rem;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.spec { display: grid; }
.spec__row {
  display: grid; gap: 0.1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec__key {
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
}
.spec__val { font-size: 0.88rem; color: var(--ink); overflow-wrap: anywhere; }
.spec__val a { border-bottom: 1px solid var(--rule); }
.spec__val a:hover { border-color: var(--ink); }

/* process — numbered resume rows */
.steps { border-top: 1px solid var(--ink); }
.step {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.step__no {
  font-family: var(--serif); font-style: italic;
  font-size: 1.3rem; line-height: 1.2;
  color: var(--faint);
}
.step__name { font-weight: 600; font-size: 0.98rem; margin-bottom: 0.2rem; }
.step__desc { color: var(--gray); font-size: 0.88rem; }

/* --- plates: uniform gallery grid --------------------------------------------- */
.plates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.4rem);
}
.plates--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plate { margin: 0; display: flex; flex-direction: column; }

.plate__frame {
  position: relative; display: block; width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  cursor: zoom-in;
  transition: border-color 0.2s var(--ease);
}
.plate__frame:hover { border-color: var(--ink); }
.plate__img { width: 100%; height: 100%; }
.plate__img--cover { object-fit: cover; }
.plate__img--contain { object-fit: contain; padding: 5%; background: #fff; }
.plate__caption {
  margin-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.76rem; line-height: 1.55; color: var(--gray);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plate__caption b { color: var(--ink); font-weight: 600; }
.plate[hidden] { display: none; }

/* pull quote */
.quote {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  line-height: 1.5;
  max-width: 56ch;
}

/* prev / next */
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.pn__link { display: block; border-top: 3px solid var(--ink); padding-top: 0.8rem; }
.pn__key {
  font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray);
}
.pn__title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  margin-top: 0.45rem;
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s var(--ease);
}
.pn__link:hover .pn__title { text-decoration-color: var(--ink); }
.pn--next { text-align: right; }

/* --- filters -------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.4rem); }
.filter {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.filter:hover { color: var(--ink); border-color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- about / resume --------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.cv { border-top: 1px solid var(--ink); }
.cv__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.cv__role { font-weight: 600; font-size: 0.95rem; }
.cv__org { color: var(--gray); font-size: 0.86rem; }
.cv__when {
  font-family: var(--serif); font-style: italic;
  font-size: 0.86rem; color: var(--gray);
  white-space: nowrap;
}

.tl { border-top: 1px solid var(--ink); }
.tl__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: 0.25rem 1.6rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.tl__when {
  font-family: var(--serif); font-style: italic;
  font-size: 0.92rem; color: var(--gray);
  white-space: nowrap;
}
.tl__what { font-weight: 600; margin-bottom: 0.15rem; }
.tl__desc { color: var(--gray); font-size: 0.86rem; }

.panel { border: 1px solid var(--rule); background: #fff; padding: clamp(1.2rem, 2.6vw, 1.7rem); }

/* --- contact --------------------------------------------------------------------- */
.cgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --- footer / colophon -------------------------------------------------------------- */
.foot { border-top: 3px solid var(--ink); background: var(--paper); margin-top: var(--band); }
.foot__cta { padding-block: calc(var(--band) * 0.8); }
.foot__head {
  font-size: clamp(1.8rem, 5.4vw, 3.6rem);
  max-width: 18ch;
  margin-bottom: clamp(1.3rem, 3vw, 1.8rem);
}
.foot__head em { font-style: italic; font-weight: 400; }
.cta-mail {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.2vw, 1.9rem);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.2rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cta-mail:hover { color: var(--gray); border-color: var(--gray); }
.cta-mail svg { width: 0.7em; height: 0.7em; flex-shrink: 0; align-self: center; }
.foot__phone {
  display: inline-block; margin-top: 1rem;
  padding: 0.3rem 0;
  color: var(--gray); font-size: 0.88rem; letter-spacing: 0.03em;
}
.foot__phone:hover { color: var(--ink); }

.foot__base {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem;
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--ink);
  padding-block: 1.2rem 2rem;
  color: var(--gray); font-size: 0.76rem;
}
.foot__base p { margin: 0; max-width: 52ch; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.foot__nav a {
  display: inline-block; padding: 0.45rem 0;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
}
.foot__nav a:hover { color: var(--ink); }

/* --- lightbox -------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 15, 14, 0.96);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  color: #a5a5a0;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding-block: 1rem; }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__caption {
  color: #d7d7d2; font-size: 0.86rem; line-height: 1.55;
  text-align: center; max-width: 64ch; margin-inline: auto;
  padding-block: 0.7rem;
  font-family: var(--serif);
}
.lightbox__nav { display: flex; gap: 0.5rem; }
.lightbox__btn {
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border: 1px solid #4a4a46;
  color: #f4f4f0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox__btn:hover { background: #f4f4f0; color: #141413; border-color: #f4f4f0; }
.lightbox__btn svg { width: 1rem; height: 1rem; }
body.is-locked { overflow: hidden; }

/* --- reveal ---------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

/* --- 404 ------------------------------------------------------------------------- */
.err { padding-block: clamp(4rem, 14vh, 8rem); text-align: center; }
.err__code {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(4rem, 16vw, 9rem);
  line-height: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 68rem) {
  .pgrid { grid-template-columns: 1fr; }
  .aside { position: static; }
  .split { grid-template-columns: 1fr; }
  .plates--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 54rem) {
  .menu-toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .nav {
    position: fixed; inset: 4.25rem 0 auto; z-index: 80;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s var(--ease);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; overflow: hidden;
    padding-inline: var(--pad); }
  .nav.is-open { grid-template-rows: 1fr; }
  .nav__link { padding: 1rem 0; font-size: 0.82rem; border-bottom: 1px solid var(--rule);
    border-top: 0; }
  .nav__list li:last-child .nav__link { border-bottom: 0; padding-bottom: 1.3rem; }
  .nav__link.is-current { border-bottom-color: var(--rule); }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid .figure { max-width: 26rem; }
  .figure__frame { aspect-ratio: 4 / 3; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__cell { border-bottom: 1px solid var(--rule); padding-left: 0; }
  .stats__cell + .stats__cell { padding-left: 0; }
  .stats__cell:nth-child(even) { border-right: 0; padding-left: 1.1rem; }
  .stats__cell:nth-last-child(-n + 2) { border-bottom: 0; }

  .stories { grid-template-columns: 1fr; }
  .story--lead { grid-template-columns: 1fr; align-items: start; }
  .story--lead .story__body { margin-top: 0.9rem; }

  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .plates, .plates--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cv__row { grid-template-columns: 1fr auto; }
  .cv__org { grid-column: 1 / -1; }
  .pn { grid-template-columns: 1fr; }
  .pn--next { text-align: left; }
}

@media (max-width: 38rem) {
  .mark__text { display: none; }
  .caps { grid-template-columns: 1fr; }
  .plates, .plates--dense { grid-template-columns: 1fr; }
  .tl__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .cv__when { white-space: normal; }
  .foot__base { flex-direction: column; align-items: flex-start; }
  .hero__grid .figure { max-width: none; }
}

@media (max-height: 34rem) and (orientation: landscape) {
  .hero { padding-block: 1.6rem; }
}

/* --- preferences -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --gray: #4c4c49; --rule: #b9b9b3; }
}

@media print {
  .masthead, .menu-toggle, .lightbox, .filters, .foot__nav { display: none !important; }
  body { background: #fff; }
  .band, .foot__cta { padding-block: 1.2rem; }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   V4 — Madison-inspired monochrome art direction
   The source imagery is kept untouched; grayscale is applied at presentation.
   ========================================================================== */
:root {
  --paper: #f4f4f2;
  --paper-2: #e8e8e5;
  --ink: #080808;
  --ink-2: #272727;
  --gray: #696969;
  --faint: #a7a7a4;
  --rule: #cfcfcb;
  --rule-2: #dededb;
  --wrap: 92rem;
  --pad: clamp(1rem, 3.4vw, 3.25rem);
  --band: clamp(4rem, 9vw, 8rem);
  --ease: cubic-bezier(.2,.75,.2,1);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(.88rem, .84rem + .2vw, 1rem);
  letter-spacing: -.01em;
}

/* Imagery runs in colour; only Hardik's portrait carries the monochrome treatment. */
a, button { -webkit-tap-highlight-color: transparent; }

/* --- top bar ------------------------------------------------------------ */
.md-masthead {
  background: rgba(244,244,242,.92);
  border-bottom: 1px solid var(--ink);
  backdrop-filter: blur(16px);
}
.md-masthead .masthead__inner { min-height: 4rem; max-width: 96rem; }
.md-mark { gap: .85rem; }
.md-mark__name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.04em;
}
.md-mark__descriptor {
  padding-left: .85rem;
  border-left: 1px solid var(--rule);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--gray);
}
.md-masthead .nav__list { gap: clamp(1rem, 2vw, 2rem); }
.md-masthead .nav__link {
  font-size: .62rem;
  letter-spacing: .14em;
  color: var(--ink);
  border-bottom: 0;
}
.md-masthead .nav__link::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width .3s var(--ease);
}
.md-masthead .nav__link:hover::after,
.md-masthead .nav__link[aria-current="page"]::after { width: 100%; }
.md-masthead .nav__cta {
  border-radius: 999px;
  padding: .55rem 1.15rem;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.md-masthead .nav__cta:hover { background: transparent; color: var(--ink); }

/* --- homepage hero ------------------------------------------------------ */
.md-hero { padding-top: clamp(1rem, 2vw, 1.5rem); }
.md-hero__topline,
.md-hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding: .7rem 0;
  font-size: .57rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
}
.md-hero__topline > span:nth-child(2) { color: var(--gray); }
.md-status { display: inline-flex; align-items: center; gap: .45rem; }
.md-status i {
  width: .42rem; height: .42rem; display: inline-block;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 .18rem #d5d5d2;
}
.md-hero__stage {
  min-height: min(73vw, 49rem);
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}
.md-hello {
  position: absolute;
  top: 5%;
  left: 12%;
  z-index: 2;
  font-family: var(--serif);
  font-size: clamp(4.2rem, 13vw, 12rem);
  line-height: .76;
  letter-spacing: -.065em;
  white-space: nowrap;
}
.md-hello em { font-weight: 400; }
.md-portrait {
  position: relative;
  z-index: 3;
  width: min(39vw, 33rem);
  height: min(51vw, 42rem);
  margin-top: 4rem;
  overflow: hidden;
  background: #dededb;
}
.md-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(1) contrast(1.08);
}
.md-name,
.md-role {
  position: absolute;
  z-index: 5;
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.065em;
}
.md-name {
  left: 0;
  bottom: 8%;
  font-size: clamp(4rem, 11vw, 10.5rem);
}
.md-name span { display: inline-block; margin-left: 0; }
.md-role {
  right: 0;
  bottom: 10%;
  font-size: clamp(1.7rem, 4vw, 4rem);
  text-align: left;
}
.md-intro {
  position: absolute;
  right: 1%;
  top: 20%;
  width: min(15rem, 19vw);
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .55rem;
  font-size: .68rem;
  line-height: 1.5;
  z-index: 6;
}
.md-intro span {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--faint);
}
.md-intro p { margin: 0; }
.md-arrow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  font-size: 1.4rem;
  z-index: 6;
}
.md-hero__bottom { border-top: 1px solid var(--ink); border-bottom: 0; }
.md-hero__bottom a { text-decoration: underline; text-underline-offset: 4px; }

/* --- shared inspiration sections --------------------------------------- */
.md-services, .md-vision, .md-work, .md-experience, .md-workstation {
  padding-top: clamp(5rem, 10vw, 9rem);
}
.md-section-label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  position: relative;
  padding: .65rem 0;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.md-section-label b { color: var(--gray); font-weight: 700; }

.md-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--rule);
}
.md-service {
  min-height: 15rem;
  padding: 1.15rem;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.md-service:hover { background: var(--ink); color: var(--paper); }
.md-service__no {
  color: var(--faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}
.md-service h2 {
  margin-top: 2.7rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  letter-spacing: -.045em;
  line-height: 1;
  text-transform: uppercase;
}
.md-service p { margin-top: .8rem; max-width: 29ch; color: var(--gray); font-size: .74rem; line-height: 1.55; }
.md-service:hover p { color: #c7c7c4; }
.md-service__plus { position: absolute; right: 1rem; bottom: 1rem; font-size: 1.15rem; }

.md-vision__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.md-bigcopy {
  max-width: 10ch;
  font-family: var(--sans);
  font-size: clamp(2.5rem, 5.2vw, 5.2rem);
  font-weight: 800;
  line-height: .91;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.md-bigcopy em { font-family: var(--serif); font-weight: 400; text-transform: none; }
.md-smallcopy {
  max-width: 43ch;
  margin-top: 2rem;
  color: var(--gray);
  font-size: .78rem;
  line-height: 1.65;
}
.md-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  border-top: 1px solid var(--ink);
}
.md-stats div { padding-top: .7rem; }
.md-stats strong { display: block; font-family: var(--sans); font-size: clamp(2.4rem, 4vw, 4rem); line-height: .9; letter-spacing: -.07em; }
.md-stats span { display: block; margin-top: .45rem; color: var(--gray); font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.md-vision__image { margin: 0; }
.md-vision__image picture,
.md-vision__image img { width: 100%; height: 100%; }
.md-vision__image { aspect-ratio: 1.45 / 1; overflow: hidden; position: relative; background: #ddd; }
.md-vision__image img { object-fit: cover; transition: transform .8s var(--ease); }
.md-vision__image:hover img { transform: scale(1.035); }
.md-vision__image figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .7rem .8rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  font-size: .62rem;
}
.md-vision__image figcaption span { margin-right: 1rem; color: #bbb; }

/* --- projects ----------------------------------------------------------- */
.md-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.2rem, 5vw, 4rem) 1.4rem; }
.md-project { display: block; }
.md-project--large { grid-column: 1 / -1; display: grid; grid-template-columns: 1.45fr .75fr; gap: 2rem; align-items: end; }
.md-project__media {
  position: relative;
  aspect-ratio: 1.25 / 1;
  overflow: hidden;
  background: var(--paper-2);
}
.md-project--large .md-project__media { aspect-ratio: 1.72 / 1; }
.md-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s var(--ease); }
.md-project:hover .md-project__media img { transform: scale(1.03); }
.md-project__index {
  position: absolute; left: .7rem; top: .7rem;
  background: var(--paper); color: var(--ink);
  padding: .35rem .5rem;
  font-family: var(--serif);
  font-size: .85rem;
}
.md-project__meta {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 2px solid var(--ink);
  padding-top: .7rem;
  margin-top: .8rem;
}
.md-project--large .md-project__meta { border-top: 0; margin-top: 0; padding-top: 0; display: block; }
.md-project__meta h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.7vw, 2.6rem);
  letter-spacing: -.055em;
  text-transform: uppercase;
  line-height: .95;
}
.md-project__meta p { margin-top: .45rem; color: var(--gray); font-family: var(--serif); font-style: italic; font-size: .95rem; }
.md-project__details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  color: var(--gray);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: right;
}
.md-project--large .md-project__details { margin-top: 1.7rem; align-items: flex-start; text-align: left; }
.md-project__details span:last-child { color: var(--ink); margin-top: .7rem; text-decoration: underline; text-underline-offset: 4px; }

/* --- experience --------------------------------------------------------- */
.md-experience__rows { border-bottom: 1px solid var(--ink); }
.md-exp-row {
  display: grid;
  grid-template-columns: .7fr 1.25fr 1fr 1.1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: .7rem;
}
.md-exp-row > span:first-child { color: var(--gray); font-family: var(--serif); font-style: italic; }
.md-exp-row strong { font-family: var(--sans); font-size: .9rem; text-transform: uppercase; letter-spacing: -.02em; }
.md-exp-row small { color: var(--gray); font-size: .6rem; text-align: right; }

/* --- visual workstation ------------------------------------------------- */
.md-filmstrip {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .8rem;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.md-filmstrip__item {
  flex: 0 0 clamp(12rem, 20vw, 19rem);
  aspect-ratio: 1.15 / 1;
  overflow: hidden;
  background: var(--paper-2);
  scroll-snap-align: start;
}
.md-filmstrip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.md-filmstrip__item:hover img { transform: scale(1.05); }
.md-archive-note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  margin-top: 1.4rem;
  padding-top: .8rem;
  border-top: 1px solid var(--ink);
}
.md-archive-note p { max-width: 40ch; font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.md-archive-note a { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; text-decoration: underline; text-underline-offset: 4px; }

/* --- closing statement -------------------------------------------------- */
.md-about-band {
  margin-top: clamp(6rem, 12vw, 11rem);
  background: var(--ink);
  color: var(--paper);
}
.md-about-band__inner {
  min-height: 38vh;
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.md-about-band__no { color: #8d8d89; font-family: var(--serif); font-size: 1.2rem; }
.md-about-band p {
  max-width: 12ch;
  font-size: clamp(2.6rem, 6vw, 6.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.md-about-band p em { font-family: var(--serif); font-weight: 400; text-transform: none; }
.md-about-band a { align-self: end; padding-bottom: 2rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; text-decoration: underline; text-underline-offset: 4px; }

/* --- footer ------------------------------------------------------------- */
.md-foot { margin-top: 0; border-top: 0; background: var(--paper); }
.md-foot__cta { padding-top: clamp(6rem, 12vw, 10rem); padding-bottom: clamp(5rem, 10vw, 8rem); }
.md-foot__eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .18em; }
.md-foot h2 {
  max-width: 12ch;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(3.3rem, 8vw, 8rem);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.md-foot h2 em { font-family: var(--serif); font-weight: 400; text-transform: none; }
.md-foot__mail {
  display: inline-block;
  margin-top: 2.3rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  text-decoration: underline;
  text-underline-offset: 7px;
}
.md-foot__phone { display: block; margin-top: .8rem; color: var(--gray); font-size: .75rem; }
.md-foot__base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ink);
  padding-top: .8rem;
  padding-bottom: 1.5rem;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray);
}

/* --- project/about/archive pages inherit the same monochrome treatment --- */
.page--project .article-head,
.page--about .band--tight,
.page--work .band--tight,
.page--archive .band--tight { max-width: 92rem; }
.page--project .headline,
.page--about .headline,
.page--work .headline,
.page--archive .headline {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.065em;
}
.page--project .deck,
.page--about .deck,
.page--work .deck,
.page--archive .deck { max-width: 38rem; }
.page--project .phero-fig .figure__frame { border: 0; background: #ddd; }
.page--about .figure img { filter: grayscale(1) contrast(1.08); }
.page--project .metaline { border-color: var(--ink); }
.page--project .quote { font-family: var(--sans); font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; }
.page--about .panel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page--about .panel .lede,
.page--about .panel p { color: var(--paper); }
.page--work .stories { gap: clamp(3rem, 7vw, 6rem) 2rem; }
.page--work .story__body { border-top-width: 2px; }
.page--archive .plates { gap: .5rem; }
.page--archive .plate__frame { border: 0; background: #ddd; aspect-ratio: 1 / 1; }
.page--archive .plate__caption { border-bottom: 0; padding: .55rem .1rem 1rem; }

/* --- mobile ------------------------------------------------------------- */
@media (max-width: 54rem) {
  .md-mark__descriptor { display: none; }
  .md-hero__topline { align-items: flex-start; flex-direction: column; gap: .45rem; }
  .md-hero__stage { min-height: 760px; }
  .md-hello { top: 9%; left: 1%; font-size: clamp(4.2rem, 18vw, 8rem); }
  .md-portrait { width: 70vw; height: 92vw; margin-top: 3rem; }
  .md-name { left: 0; bottom: 7%; font-size: clamp(4.2rem, 19vw, 8.5rem); }
  .md-role { right: 0; bottom: 14%; font-size: clamp(1.4rem, 6vw, 2.6rem); }
  .md-intro { right: 0; top: 12%; width: 10rem; font-size: .62rem; }
  .md-hero__bottom { flex-wrap: wrap; }
  .md-service-grid { grid-template-columns: repeat(2, 1fr); }
  .md-service { min-height: 13rem; }
  .md-vision__grid { grid-template-columns: 1fr; }
  .md-bigcopy { max-width: 11ch; }
  .md-projects { grid-template-columns: 1fr; }
  .md-project--large { grid-column: auto; display: block; }
  .md-project__details,
  .md-project--large .md-project__details { align-items: flex-start; text-align: left; margin-top: 1rem; }
  .md-project__meta { display: block; }
  .md-exp-row { grid-template-columns: 1fr 1fr; }
  .md-exp-row small { grid-column: 2; text-align: left; }
  .md-about-band__inner { min-height: 42vh; grid-template-columns: 2rem 1fr; }
  .md-about-band a { grid-column: 2; align-self: start; padding-bottom: 3rem; }
  .md-foot__base { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 36rem) {
  .md-service-grid { grid-template-columns: 1fr; }
  .md-service { min-height: 11rem; }
  .md-hero__stage { min-height: 670px; }
  .md-portrait { width: 76vw; height: 100vw; }
  .md-intro { display: none; }
  .md-name { bottom: 8%; }
  .md-role { bottom: 19%; }
}


/* ==========================================================================
   V4.1 — colour pass, 50% project tiles, professional motion
   All motion is scoped to .js (set inline in <head>) so the site renders
   fully without JavaScript, and prefers-reduced-motion stills everything.
   ========================================================================== */

/* section rules draw in from the left */
.md-section-label::before,
.shead::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; background: var(--ink);
  transform-origin: left;
}
.md-section-label::before { height: 2px; }
.shead::before { height: 3px; }
.js .md-section-label.reveal::before,
.js .shead.reveal::before { transform: scaleX(0); transition: transform 0.8s var(--ease) 0.1s; }
.js .md-section-label.reveal.is-in::before,
.js .shead.reveal.is-in::before { transform: scaleX(1); }

/* recent projects — lead card sits in the same 3-up rhythm as the rest */
.md-project--large { grid-column: auto; display: block; }
.md-project--large .md-project__media { aspect-ratio: 1.25 / 1; }
.md-project--large .md-project__meta {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 2px solid var(--ink);
  padding-top: .7rem; margin-top: .8rem;
}
.md-project--large .md-project__details { align-items: flex-end; text-align: right; margin-top: 0; }
.md-project__meta h2 { font-size: clamp(1.05rem, 1.5vw, 1.45rem); }
.md-project__meta p { font-size: .85rem; }

/* base reveal — hidden only when JS is present */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* paper-curtain image reveals */
.md-filmstrip__item { position: relative; }
.figure__frame, .story__media { position: relative; }
.js .reveal .md-portrait::after,
.js .md-portrait.reveal::after,
.js .reveal .md-vision__image::after,
.js .md-vision__image.reveal::after,
.js .reveal .md-project__media::after,
.js .md-filmstrip__item.reveal::after,
.js .reveal .figure__frame::after,
.js .figure.reveal .figure__frame::after,
.js .reveal .story__media::after,
.js .reveal .plate__frame::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: var(--paper);
  transform-origin: top;
  transition: transform 0.85s var(--ease) 0.08s;
}
.js .reveal.is-in .md-portrait::after,
.js .md-portrait.reveal.is-in::after,
.js .reveal.is-in .md-vision__image::after,
.js .md-vision__image.reveal.is-in::after,
.js .reveal.is-in .md-project__media::after,
.js .md-filmstrip__item.reveal.is-in::after,
.js .reveal.is-in .figure__frame::after,
.js .figure.reveal.is-in .figure__frame::after,
.js .reveal.is-in .story__media::after,
.js .reveal.is-in .plate__frame::after { transform: scaleY(0); }

/* images settle from a slight zoom as the curtain lifts */
.js .md-portrait.reveal img,
.js .md-vision__image.reveal img,
.js .reveal .md-project__media img,
.js .md-filmstrip__item.reveal img,
.js .figure.reveal .figure__frame img,
.js .reveal .story__media img,
.js .reveal .plate__frame img { transform: scale(1.06); transition: transform 1s var(--ease); }
.js .md-portrait.reveal.is-in img,
.js .md-vision__image.reveal.is-in img,
.js .reveal.is-in .md-project__media img,
.js .md-filmstrip__item.reveal.is-in img,
.js .figure.reveal.is-in .figure__frame img,
.js .reveal.is-in .story__media img,
.js .reveal.is-in .plate__frame img { transform: scale(1); }

/* hovers re-engage after settle */
.js .md-project.reveal.is-in:hover .md-project__media img { transform: scale(1.03); }
.js .md-filmstrip__item.reveal.is-in:hover img { transform: scale(1.05); }
.js .md-vision__image.reveal.is-in:hover img { transform: scale(1.035); }
.js .story.reveal.is-in:hover .story__media img { transform: scale(1.02); }

/* hero furniture */
.md-arrow { animation: md-drift 2.6s var(--ease) infinite; }
@keyframes md-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.md-status i { animation: md-pulse 2.4s ease-out infinite; }
@keyframes md-pulse {
  0% { box-shadow: 0 0 0 .18rem #d5d5d2; }
  55% { box-shadow: 0 0 0 .42rem rgba(8, 8, 8, 0.06); }
  100% { box-shadow: 0 0 0 .18rem #d5d5d2; }
}

/* micro-interactions */
.md-service__plus { transition: transform 0.3s var(--ease); }
.md-service:hover .md-service__plus { transform: translate(3px, -3px); }
.btn svg { transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.lightbox__stage img { transform: scale(0.985); transition: transform 0.3s var(--ease); }
.lightbox.is-open .lightbox__stage img { transform: scale(1); }

/* responsive steps for the tighter project grid */
@media (max-width: 68rem) {
  .md-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 54rem) {
  .md-projects { grid-template-columns: 1fr; }
  .md-project--large .md-project__meta { display: flex; }
}

/* stillness for those who ask for it */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .md-arrow, .md-status i { animation: none; }
  .js .reveal .md-portrait::after, .js .md-portrait.reveal::after,
  .js .reveal .md-vision__image::after, .js .md-vision__image.reveal::after,
  .js .reveal .md-project__media::after, .js .md-filmstrip__item.reveal::after,
  .js .reveal .figure__frame::after, .js .figure.reveal .figure__frame::after,
  .js .reveal .story__media::after, .js .reveal .plate__frame::after { display: none; }
}