/* ==========================================================================
   Mariah Carter — portfolio
   Desktop values come from the 1512px-wide Figma frames and scale with the
   window width (font sizes and the column grid use vw).
   Mobile layout: anything narrower than 1024px, plus phones held sideways.
   ========================================================================== */

@font-face {
  font-family: "Gianna";
  src: url("/assets/fonts/Gianna.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Neue Haas Unica Pro";
  src: url("/assets/fonts/NeueHaasUnicaPro-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica Pro";
  src: url("/assets/fonts/NeueHaasUnicaPro-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --font: "Neue Haas Unica Pro", "neue-haas-unica", "Neue Haas Unica Pro", "Neue Haas Unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #000;
  --mute: #c5c5c5;
  --bg: #fff;

  /* 32px at 1512px wide, never smaller than 22px */
  --fs-lg: clamp(22px, 2.1164vw, 32px);
  /* index / footer text: 16px at 1512px */
  --fs-sm: clamp(12px, 1.0582vw, 16px);

  --pad-x: 30px;
  --nav-top: 21px;

  /* Header fade behind the nav (from Figma). Increase --nav-blur for a stronger blur. */
  /* Figma: white 82% → 0. Eased with many stops so it melts away with no visible edge, even over black */
  --nav-fade: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.82) 34%,
    rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.70) 50%,
    rgba(255, 255, 255, 0.59) 58%, rgba(255, 255, 255, 0.46) 66%,
    rgba(255, 255, 255, 0.33) 73%, rgba(255, 255, 255, 0.21) 80%,
    rgba(255, 255, 255, 0.115) 86%, rgba(255, 255, 255, 0.05) 92%,
    rgba(255, 255, 255, 0.013) 97%, rgba(255, 255, 255, 0) 100%);
  --nav-h: 127px;

  /* ---- Motion: spring curves (SwiftUI-style response / bounce) ----
     Fallbacks for older browsers; real springs are defined just below. */
  --spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-snappy: cubic-bezier(0.2, 0.9, 0.25, 1.02);
  --spring-bouncy: cubic-bezier(0.25, 1.3, 0.4, 1);
  --spring-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-smooth: 770ms;
  --dur-snappy: 590ms;
  --dur-bouncy: 625ms;
  --dur-gentle: 1260ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring-slide: var(--spring-smooth);
  --dur-slide: 900ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
  --spring-smooth: linear(0, 0.0209, 0.0724, 0.1416, 0.2197, 0.3003, 0.3795, 0.4546, 0.5242, 0.5876, 0.6445, 0.695, 0.7394, 0.7781, 0.8117, 0.8407, 0.8656, 0.8868, 0.9049, 0.9203, 0.9333, 0.9443, 0.9535, 0.9613, 0.9678, 0.9732, 0.9778, 0.9816, 0.9847, 0.9874, 0.9896, 0.9914, 0.9929, 0.9941, 0.9952, 0.996, 0.9967, 0.9973, 0.9978, 0.9982, 1);
  --dur-smooth: 769ms;
  --spring-snappy: linear(0, 0.0186, 0.0659, 0.1316, 0.2078, 0.2888, 0.3702, 0.449, 0.5233, 0.5918, 0.6539, 0.7093, 0.7582, 0.8008, 0.8374, 0.8687, 0.8951, 0.9172, 0.9355, 0.9506, 0.9628, 0.9726, 0.9804, 0.9866, 0.9913, 0.9949, 0.9977, 0.9996, 1.001, 1.0019, 1.0025, 1.0028, 1.003, 1.0029, 1.0028, 1.0026, 1.0024, 1.0022, 1.0019, 1.0017, 1);
  --dur-snappy: 586ms;
  --spring-bouncy: linear(0, 0.0175, 0.0632, 0.1284, 0.206, 0.2903, 0.3766, 0.4617, 0.543, 0.6188, 0.6879, 0.7498, 0.8042, 0.8513, 0.8913, 0.9247, 0.9521, 0.9741, 0.9913, 1.0045, 1.0141, 1.0208, 1.0251, 1.0275, 1.0284, 1.028, 1.0269, 1.0251, 1.023, 1.0206, 1.0182, 1.0157, 1.0134, 1.0112, 1.0092, 1.0074, 1.0058, 1.0045, 1.0033, 1.0023, 1);
  --dur-bouncy: 625ms;
  --spring-gentle: linear(0, 0.0209, 0.0724, 0.1418, 0.2198, 0.3005, 0.3797, 0.4549, 0.5245, 0.5879, 0.6448, 0.6953, 0.7396, 0.7784, 0.812, 0.8409, 0.8658, 0.887, 0.9051, 0.9204, 0.9334, 0.9444, 0.9536, 0.9614, 0.9678, 0.9733, 0.9778, 0.9816, 0.9848, 0.9874, 0.9896, 0.9914, 0.9929, 0.9941, 0.9952, 0.996, 0.9967, 0.9973, 0.9978, 0.9982, 1);
  --dur-gentle: 1259ms;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
main:focus { outline: none; }
img, video { display: block; max-width: 100%; }

/* ---------- Link states (Figma: Link State Styles) ---------- */
.u-link {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
@media (hover: hover) {
  .u-link:hover { color: var(--mute); font-style: italic; }
}
.u-link:active { color: var(--mute); font-style: italic; text-decoration: none; }

/* ---------- Nav (Mariah Carter / Work) ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--nav-top) var(--pad-x) 0 calc(var(--pad-x) - 1px);
  font-size: var(--fs-lg);
  line-height: 1.25;
  pointer-events: none;
  transition: transform var(--dur-snappy) var(--spring-snappy);
}
.nav-link { pointer-events: auto; white-space: nowrap; }

/* Press feedback: a quick squeeze that springs back */
.nav-link, .plain-link, .index-row, .card, .project-foot-mobile a {
  transition: color 0.25s var(--ease-out), transform var(--dur-bouncy) var(--spring-bouncy);
}
.nav-link, .plain-link, .project-foot-mobile a { display: inline-block; transform-origin: 30% 60%; }
.nav-link:active, .plain-link:active, .project-foot-mobile a:active { transform: scale(0.96); transition-duration: 0.12s; }
.index-row:active { transform: scale(0.985); transition-duration: 0.12s; transform-origin: 0 50%; }
.card:active { transform: scale(0.98); transition-duration: 0.15s; }
.u-link { transition: color 0.25s var(--ease-out); }
@media (hover: hover) {
  .nav-link:hover, .plain-link:hover {
    font-style: italic;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
  }
}
.nav-link:active, .plain-link:active { color: var(--mute); font-style: italic; text-decoration: none; }

/* The box under the nav (Figma "Rectangle 1"): white gradient fill plus a
   PROGRESSIVE background blur, 4.4px at the top fading to 0 just past the bottom.
   Built from four stacked blur bands, each masked to its own slice. */
.nav-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: -1;
  pointer-events: none;
}
.nav-bg::after { content: ""; position: absolute; inset: 0; background: var(--nav-fade); }
.nav-bg i { position: absolute; inset: 0; }
.nav-bg i:nth-child(1) {
  -webkit-backdrop-filter: blur(4.4px); backdrop-filter: blur(4.4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 36%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 36%);
}
.nav-bg i:nth-child(2) {
  -webkit-backdrop-filter: blur(3.2px); backdrop-filter: blur(3.2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 45%, transparent 62%);
  mask-image: linear-gradient(to bottom, transparent 10%, #000 30%, #000 45%, transparent 62%);
}
.nav-bg i:nth-child(3) {
  -webkit-backdrop-filter: blur(2.2px); backdrop-filter: blur(2.2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, #000 56%, #000 70%, transparent 86%);
  mask-image: linear-gradient(to bottom, transparent 38%, #000 56%, #000 70%, transparent 86%);
}
.nav-bg i:nth-child(4) {
  -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 62%, #000 76%, rgba(0,0,0,.45) 88%, transparent 98%);
  mask-image: linear-gradient(to bottom, transparent 62%, #000 76%, rgba(0,0,0,.45) 88%, transparent 98%);
}
body[data-page="loading"] .nav { opacity: 0; }
.nav { animation: nav-in var(--dur-smooth) var(--ease-out) both; }
@keyframes nav-in { from { opacity: 0; } }

/* ---------- Home ---------- */
.home-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  /* text sits 141px above the bottom on a 982px-tall screen */
  padding: 0 var(--pad-x) 14.36vh calc(var(--pad-x) - 1px);
  padding-bottom: 14.36svh;
}
.intro {
  width: min(864px, 57.15vw);
  font-size: var(--fs-lg);
  line-height: 1.281;
}
.intro p + p { margin-top: 1.156em; }

.home-lists {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
  width: min(808px, 53.45vw);
  margin: 0 0 0 calc(var(--pad-x) - 1px);
  padding-top: 118px;
  font-size: var(--fs-lg);
  line-height: 1.281;
}
.list-heading { margin-bottom: 0.6875em; }
.list-items li + li { margin-top: 0.125em; }

.foot-email {
  display: flex;
  justify-content: flex-end;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.home .foot-email { padding: 104px calc(var(--pad-x) - 1px) 20px; }

/* ---------- Project page (desktop) ---------- */
body[data-page="project"] .nav-bg,
body[data-page="project"] .nav-work { display: none; }
body[data-page="project"] .nav { padding-left: 31px; }

.project {
  padding: var(--nav-top) var(--pad-x) 0 calc(40% + 14.2px);
}
.project-head {
  display: grid;
  grid-template-columns: calc(20vw - 20.4px) 1fr;
  font-size: var(--fs-lg);
  line-height: 1.25;
}
.project-title { padding-right: 1em; }
.project-desc { max-width: none; }
.project-desc p + p { margin-top: 1.25em; }
/* Long descriptions: body-size text (16px at 1512px wide), running to the right edge */
.project-desc.is-long {
  max-width: none;
  padding-top: 0.45em;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.project-desc.is-long p + p { margin-top: 1.5em; }
.project-credits { margin-top: 1em; font-size: var(--fs-sm); line-height: 1.4; }
.project-label { display: none; }

.gallery { margin-top: 35px; }

/* Figma "Desktop/Project Page/Updated Index": 16px text at the font's natural line height,
   1px between rows, 30px between columns, block sits 37px above the bottom.
   Scales down only when the window is too narrow for 16px to fit. */
:root { --index-fs: clamp(12px, calc(1.4vw - 1.65px), 16px); --index-bottom: 37px; }
.project-side {
  position: fixed;
  left: 31px;
  bottom: var(--index-bottom);
  width: calc(40% - 31px - 16px);
  z-index: 40;
  font-size: var(--index-fs);
  line-height: normal;
}
/* one shared grid so columns line up and grow if a name is long */
.project-side {
  display: grid;
  grid-template-columns: minmax(10em, max-content) minmax(11.375em, max-content) auto;
  column-gap: 1.875em;
}
.index-group, .index-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
}
.index-group { row-gap: 1px; }
.index-group + .index-group { margin-top: 1.74em; }
.index-row > span { white-space: nowrap; }
.index-row[aria-current="page"] {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
@media (hover: hover) {
  .index-row:hover { color: var(--mute); font-style: italic; text-decoration: underline; text-underline-position: from-font; }
  .index-row[aria-current="page"]:hover { color: var(--ink); }
}
.index-row:active { color: var(--mute); font-style: italic; text-decoration: none; }

/* email sits on the same line as the last index row */
.project-foot-desktop { padding: 28px 0 var(--index-bottom); font-size: var(--index-fs); line-height: normal; }
.project-foot-mobile { display: none; }

/* ---------- Type tester (typeface projects) ---------- */
.tester { margin-top: 35px; padding-bottom: 8px; }
.tester-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 36px;
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.tester-control { display: flex; align-items: center; gap: 12px; cursor: default; }
.tester-label { white-space: nowrap; }
.tester-value { min-width: 3.4em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tester-range {
  --pct: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: clamp(120px, 12vw, 220px);
  height: 14px;
  margin: 0;
  background:
    linear-gradient(#000, #000) 0 50% / var(--pct) 1px no-repeat,
    linear-gradient(var(--mute), var(--mute)) 0 50% / 100% 1px no-repeat;
  cursor: pointer;
  touch-action: none;
}
.tester-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1px solid #000; border-radius: 50%;
  background: #fff;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background-color 0.2s;
}
.tester-range::-moz-range-thumb {
  width: 14px; height: 14px; box-sizing: border-box;
  border: 1px solid #000; border-radius: 50%;
  background: #fff;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background-color 0.2s;
}
.tester-range:hover::-webkit-slider-thumb { background: var(--mute); }
.tester-range:hover::-moz-range-thumb { background: var(--mute); }
.tester-range:active::-webkit-slider-thumb { transform: scale(1.35); background: var(--mute); transition-duration: 0.2s; }
.tester-range:active::-moz-range-thumb { transform: scale(1.35); background: var(--mute); }
.tester-range:focus-visible { outline: none; }
.tester-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); }

.tester-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  transition: transform var(--dur-bouncy) var(--spring-bouncy);
}
.tester-toggle:active { transform: scale(0.95); transition-duration: 0.12s; }
.tester-dot {
  width: 14px; height: 14px; flex: none;
  border: 1px solid #000; border-radius: 50%;
  background: #fff;
  transition: background-color 0.25s var(--ease-out), transform var(--dur-bouncy) var(--spring-bouncy);
}
.tester-toggle:hover .tester-dot { transform: scale(1.12); }
.tester-toggle[aria-pressed="true"] .tester-dot { background: #000; }
.tester-reset:active .tester-dot { background: var(--mute); }

.tester-output {
  margin-top: 28px;
  min-height: 1em;
  font-family: var(--tester-font), var(--font);
  font-weight: 400;
  color: #000;
  overflow-wrap: anywhere;
  outline: none;
  cursor: text;
  caret-color: #000;
}
.tester-output:empty::before { content: attr(data-placeholder); color: var(--mute); }
.tester-output.is-caps { text-transform: uppercase; }
.tester-output.is-morph { animation: tester-morph var(--dur-smooth) var(--spring-smooth); }
@keyframes tester-morph { from { opacity: 0.25; filter: blur(6px); } }

.tester-glyphs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(44px, 4.2vw, 64px), 1fr));
  margin-top: 40px;
  border-top: 1px solid #000;
}
.tester-glyph {
  position: relative;
  aspect-ratio: 1;
  padding: 0; border: 0;
  border-bottom: 1px solid #ececec;
  background: none;
  font-family: var(--tester-font), var(--font);
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
  color: #000;
  cursor: pointer;
}
.tester-glyph span { display: inline-block; transition: transform var(--dur-bouncy) var(--spring-bouncy); }
@media (hover: hover) {
  .tester-glyph:hover span { transform: scale(1.45); }
}
.tester-glyph:active span { transform: scale(1.2); transition-duration: 0.12s; }
.tester-note { margin-top: 14px; font-size: 12px; line-height: 1.4; color: #8a8a8a; }

/* ---------- Gallery rows & image slots ---------- */
.row { display: flex; gap: 9px; }
.row + .row { margin-top: 9px; }
.slot {
  position: relative;
  flex: var(--r, 1.5) 1 0;
  min-width: 0;
  aspect-ratio: var(--r, 1.5);
  overflow: hidden;
}
.slot.is-zoomable { cursor: zoom-in; }
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* slides wait off to the right and glide in on a spring, like iOS paging */
  transform: translate3d(100%, 0, 0);
  transition: transform var(--dur-slide) var(--spring-slide);
  backface-visibility: hidden;
}
.slide.is-active { transform: none; }
.slide.is-dragging { transition: none !important; }
.slot > .slide:only-of-type { transform: none; }
/* Slideshows share one frame (average shape of their images) */
.slot.is-fill .slide { object-fit: cover; }
.slot.is-contain .slide { object-fit: contain; }

/* Text inside the image flow: beside an image, or alone as a centered callout */
.text-block p + p { margin-top: 1.25em; }
.text-block.is-large { font-size: var(--fs-lg); line-height: 1.25; }
.text-block.is-small { font-size: var(--fs-sm); line-height: 1.5; }
.row.has-text { align-items: center; }
.row.has-text .text-block {
  flex: 0 0 calc(var(--w) * 100% - 9px);
  padding: 0 0 0 clamp(16px, 2vw, 36px);
}
.row.has-text .text-block:first-child { padding: 0 clamp(16px, 2vw, 36px) 0 0; }
.row.is-callout-row { justify-content: center; }
.text-block.is-callout {
  max-width: min(75%, 36em);
  margin: 0 auto;
  padding: clamp(60px, 7vw, 120px) 0;
  text-align: center;
}
.slot.has-slides { touch-action: pan-y; }
.slot > .slide:only-of-type { object-fit: cover; }
.lottie > svg { width: 100% !important; height: 100% !important; }

/* Hover caption (desktop) — Figma: Desktop/Project Page/Caption Example */
.caption {
  position: absolute;
  left: 50%;
  bottom: 14.8%;
  z-index: 2;
  width: max-content;
  max-width: min(244px, 90%);
  padding: 21px 31px;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  opacity: 0;
  filter: blur(5px);
  translate: 0 8px;
  scale: 0.96;
  transition: opacity 0.3s var(--ease-out), filter 0.4s var(--ease-out), translate var(--dur-snappy) var(--spring-snappy), scale var(--dur-snappy) var(--spring-snappy);
  pointer-events: none;
}
.caption::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  opacity: 0.9;
  filter: blur(7px);
  border-radius: 200px;
}
@media (hover: hover) and (min-width: 1024px) {
  .slot:hover .caption.has-text { opacity: 1; filter: none; translate: 0 0; scale: 1; }
}
/* phones: tap an image to show its caption, tap again to hide */
.slot.show-caption .caption.has-text { opacity: 1; filter: none; translate: 0 0; scale: 1; }

/* ---------- Lightbox (desktop) — Figma: Desktop/Project Page/ Image Clicked ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; }
.lightbox.is-closing { transition-duration: 0.35s; }
.lightbox-media {
  position: absolute;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
  transition: transform var(--dur-snappy) var(--spring-snappy), opacity 0.45s var(--ease-out);
  cursor: default;
}
.lightbox.is-closing .lightbox-media { transition: transform var(--dur-smooth) var(--spring-smooth); }
.lightbox-media.is-entering { opacity: 0; transform: translate3d(8vw, 0, 0); }
.lightbox-media.is-leaving { opacity: 0; transform: translate3d(-8vw, 0, 0); pointer-events: none; }
.lightbox-media.is-entering.from-left { transform: translate3d(-8vw, 0, 0); }
.lightbox-media.is-leaving.to-right { transform: translate3d(8vw, 0, 0); }
.lightbox-media.is-multi { cursor: e-resize; }

/* ---------- Work grid (mobile) ---------- */
.work { padding: 96px 19px 0; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.card { display: block; }
.card-media { position: relative; aspect-ratio: 354 / 300; overflow: hidden; background: #f3f3f3; }
.card-media .slide { object-fit: cover; }
.card-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.card-label span { overflow: hidden; text-overflow: ellipsis; }
.card-label em { font-style: italic; flex-shrink: 0; }
.work .foot-email { padding: 128px 0 11px; font-size: 14px; }

/* Arrows drawn to match Diatype Rounded (Back to All / Next Project) */
.arrow { display: inline-block; width: 0.95em; height: 0.7em; vertical-align: -0.02em; overflow: visible; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- Not found ---------- */
.notfound { padding: 140px var(--pad-x); font-size: var(--fs-lg); line-height: 1.25; }

/* ---------- Image protection ---------- */
.slot img, .card-media img, .lightbox img, .slot video, .lightbox video {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   Mobile & tablet (< 1024px) and phones in landscape
   ========================================================================== */
@media (max-width: 1023px) {
  :root {
    --fs-lg: 24px;
    --pad-x: 20px;
    --nav-top: 15px;
    --nav-h: 87px;
  }
  .nav { padding: var(--nav-top) 20px 0 19px; line-height: 30px; }
  body[data-page="project"] .nav { padding-left: 19px; }
  body[data-page="project"] .nav-bg,
  body[data-page="project"] .nav-work { display: block; }
  body[data-page="work"] .nav-work { visibility: hidden; }

  /* Home */
  .home-hero { padding: 0 26px 31px; }
  .intro { width: min(80vw, 560px); line-height: 30px; }
  .intro p + p { margin-top: 35px; }
  .home-lists { width: auto; margin: 0 26px; padding-top: 138px; gap: 80px; line-height: 30px; }
  .list-heading { margin-bottom: 22px; }
  .list-items li { line-height: 29px; }
  .list-items li + li { margin-top: 8px; }
  .home .foot-email { padding: 140px 23px 11px; font-size: 14px; }

  /* Project */
  .project { padding: 92px 19px 0; }
  .project-side, .project-head > .project-title, .project-foot-desktop { display: none; }
  .project-head { display: block; font-size: 14px; line-height: 1.2; }
  .project-label { display: block; margin-bottom: 37px; }
  .project-label em { display: block; font-style: italic; }
  .project-desc, .project-desc.is-long { max-width: 640px; font-size: 14px; line-height: 1.2; padding-top: 0; }
  .project-desc p + p, .project-desc.is-long p + p { margin-top: 1.2em; }
  .tester { margin-top: 28px; }
  .tester-controls { gap: 12px 24px; font-size: 14px; }
  .tester-control { width: 100%; }
  .tester-range { flex: 1; width: auto; }
  .tester-label { min-width: 6.2em; }
  .tester-output { margin-top: 22px; }
  .tester-glyphs { margin-top: 28px; }
  .project-credits { font-size: 14px; }
  .gallery { margin-top: 18px; }
  .row { display: block; }
  .row + .row, .slot + .slot { margin-top: 20px; }
  .slot { width: 100%; }
  .row.has-text .text-block, .row.has-text .text-block:first-child { padding: 0; margin-top: 20px; }
  .row.has-text .text-block:first-child { margin: 0 0 20px; }
  .text-block.is-large { font-size: 20px; line-height: 1.25; }
  .text-block.is-small { font-size: 14px; line-height: 1.35; }
  .text-block.is-callout { max-width: none; padding: 48px 4%; }
  .slot.has-captions { cursor: pointer; }
  .project-foot-mobile {
    display: flex;
    justify-content: space-between;
    padding: 38px 0 11px;
    font-size: 14px;
    line-height: 1.2;
  }
}

/* Phone held sideways: nav slides away on scroll down, back on scroll up */
@media (orientation: landscape) and (max-height: 500px) {
  .nav.is-hidden { transform: translateY(calc(-1 * var(--nav-h) - 10px)); }
  .project { padding-left: 26px; padding-right: 26px; }
}

/* ---------- Scroll reveal: content rises into place as it comes into view ---------- */
.motion .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
.motion .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out) var(--delay, 0ms), transform var(--dur-gentle) var(--spring-gentle) var(--delay, 0ms);
}
.motion .reveal.is-instant { transition: none !important; }

/* ---------- Page transitions (View Transitions API, where supported) ---------- */
.nav { view-transition-name: nav; }
.project-side { view-transition-name: index; }
::view-transition-group(nav), ::view-transition-group(index) { animation-duration: 0s; }
::view-transition-old(root) { animation: vt-out 0.28s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in var(--dur-smooth) var(--spring-smooth) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(8px); transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px); transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .slide { transform: none; }
}