:root {
  --ink: #111;
  --muted: #777;
  --hairline: #e5e5e5;
  --ease: cubic-bezier(.2, .7, .2, 1);
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.5; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
h1, h2, h3 { line-height: 1.2; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible, .marquee:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
img { display: block; object-fit: cover; }
.meta { font-size: 13px; line-height: 1.5; }
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px;
  color: #fff;
}
.header.is-light { color: var(--ink); }
.wordmark { justify-self: start; font-size: 20px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.wordmark span { color: #e23629; }
.header nav { display: flex; gap: 20px; }
.header-email { justify-self: end; }
.hero { position: relative; height: 100vh; background: #000; color: #fff; overflow: hidden; }
.hero-headline { position: absolute; inset: 84px 20px auto; display: flex; justify-content: space-between; gap: 24px; font-size: 32px; }
.hero-headline span:last-child { text-align: right; }
.hero-meta { position: absolute; inset: auto 20px 20px; display: flex; justify-content: space-between; gap: 16px; }
.hero-meta p:last-child, .showcase-meta p:last-child { text-align: right; flex-shrink: 0; }
.deck { position: absolute; top: 50%; left: 50%; width: 190px; height: 384px; transform: translate(-50%, -50%); }
.deck-card { --x: var(--desktop-x); position: absolute; top: 50%; left: 50%; margin: -192px 0 0 -95px; width: 190px; height: 384px; transform: translate(var(--x), var(--y)); }
.deck-card img { width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); transform: rotate(var(--rotation)); transition: transform 300ms var(--ease); }
.deck-card.cover-card { width: 200px; height: 300px; margin: -150px 0 0 -100px; }
.deck-card:hover img { transform: translateY(-8px) rotate(0deg); }
.deck.is-entering .deck-card { animation: deck-rise 900ms var(--ease) calc(var(--i) * 70ms) both; }
@keyframes deck-rise {
  from { opacity: 0; transform: translate(var(--x), calc(var(--y) + 80px)); }
  to { opacity: 1; transform: translate(var(--x), var(--y)); }
}
.statement { padding: 160px 20px 72px; }
.statement p { max-width: 1100px; margin: 0 auto; font-size: 52px; line-height: 1.2; text-indent: 160px; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 46.25s cubic-bezier(.45,.44,.55,.56) infinite; }
.marquee-group { display: flex; align-items: center; gap: 10px; padding-right: 10px; flex-shrink: 0; }
.marquee img { width: 200px; height: 300px; border-radius: 10px; }
.marquee .phone-image { width: 150px; height: 303px; border-radius: 0; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.showcase-meta { display: flex; justify-content: space-between; padding: 24px 20px 0; }
.section { padding: 160px 20px 0; scroll-margin-top: 96px; }
.section h2 { font-size: 32px; margin-bottom: 48px; }
.work h2 { max-width: 700px; }
.work-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding: 28px 0; border-top: 1px solid var(--hairline); }
.work-row:last-child { border-bottom: 1px solid var(--hairline); }
.work-row .years { grid-column: span 2; color: var(--muted); }
.work-row h3 { grid-column: span 4; font-size: 16px; line-height: 1.5; }
.work-row > p:last-child { grid-column: span 6; }
.ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ways-grid article { border-top: 1px solid var(--hairline); padding-top: 28px; padding-right: 12%; }
.ways-grid h3 { font-size: 24px; margin-bottom: 24px; }
.about { padding-bottom: 160px; }
.about-copy { max-width: 60ch; }
.about-copy p + p { margin-top: 24px; }
.education { color: var(--muted); }
.footer { height: 240px; padding: 36px 20px 20px; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.footer-email { font-size: 32px; line-height: 1.2; align-self: flex-start; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; }
.footer-bottom nav { display: flex; gap: 24px; }
@media (max-width: 600px) {
  .header { grid-template-columns: 1fr auto 1fr; font-size: 13px; }
  .wordmark { font-size: 16px; }
  .header nav { gap: 12px; }
  .hero-headline { top: 92px; font-size: 22px; gap: 20px; }
  .hero-headline span { flex: 1; }
  .deck { width: 150px; height: 303px; }
  .deck-card { width: 150px; height: 303px; margin: -151.5px 0 0 -75px; }
  .deck-card.cover-card { width: 150px; height: 225px; margin: -112.5px 0 0 -75px; }
  .deck-card { --x: var(--mobile-x); }
  .hero-meta { gap: 12px; }
  .hero-meta p:first-child { max-width: 240px; }
  .statement { padding-top: 96px; padding-bottom: 48px; }
  .statement p { font-size: 30px; text-indent: 0; }
  .section { padding-top: 96px; scroll-margin-top: 80px; }
  .section h2 { margin-bottom: 32px; }
  .work-row { display: flex; flex-direction: column; gap: 12px; padding: 24px 0; }
  .work-row .years { font-size: 13px; }
  .ways-grid { grid-template-columns: 1fr; gap: 40px; }
  .ways-grid article { padding-right: 0; padding-top: 24px; }
  .ways-grid h3 { margin-bottom: 16px; }
  .about { padding-bottom: 96px; }
  .footer-bottom { flex-direction: column; gap: 20px; }
  .footer-bottom nav { gap: 20px; }
  .footer-bottom > p { text-align: right; }
}
@media (max-width: 359px) {
  .header nav { gap: 8px; }
  .wordmark { font-size: 14px; }
  .header { font-size: 12px; }
  .footer-email { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { overflow-x: auto; }
  .marquee-group[aria-hidden] { display: none; }
}

/* Shared round 2 artwork: transparent phone corners, complete cover silhouettes. */
.hero-headline, .hero-meta { z-index: 2; }
.hero { min-height: 660px; }
.phone-image { object-fit: contain; }
.deck-card .phone-image { border-radius: 0; }

/* B. Field: the clip protects the headline and the 120px bottom metadata band. */
.field-window { position: absolute; inset: 160px 0 120px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.field-window:focus-visible { outline: 1px solid #777; outline-offset: -8px; }
.field-window.is-dragging { cursor: grabbing; }
.field-canvas { position: absolute; left: 0; top: 0; will-change: transform; }
.field-tile { position: absolute; width: 170px; height: 344px; transform: rotate(var(--rotation)); }
.field-tile.cover-card { width: 200px; height: 300px; }
.field-tile img { width: 100%; height: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.6); border-radius: 9px; }
.field-tile .phone-image { border-radius: 0; }
.field-canvas.is-entering .field-tile img { animation: tile-rise 800ms var(--ease) calc(var(--i) * 45ms) both; }
@keyframes tile-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.field-hint { position: absolute; bottom: 84px; left: 0; width: 100%; text-align: center; font-size: 13px; color: var(--muted); }

/* C. Gallery: native sticky pin, all card transforms scrubbed by main.js. */
.hero-gallery { height: 250vh; overflow: visible; }
.gallery-pin { position: sticky; top: 0; height: 100vh; min-height: 660px; overflow: hidden; background: #000; }
.gallery-stage { position: absolute; inset: 150px 0 120px; perspective: 1200px; }
.gallery-card { position: absolute; top: 50%; left: 0; width: 190px; height: 384px; margin-top: -192px; transform-origin: center; will-change: transform, opacity; }
.gallery-card.cover-card { width: 200px; height: 300px; margin-top: -150px; }
.gallery-card img { width: 100%; height: 100%; border-radius: 9px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.gallery-card .phone-image { border-radius: 0; }
.gallery-card:not(:first-child) { opacity: 0; }

/* D. Letters: six hairline-separated rows, with the exact name read once. */
.hero-letters { height: auto; min-height: 100vh; padding-top: 160px; color: var(--ink); background: #fff; }
.letters-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.letters-grid > div { height: clamp(250px, 23vw, 360px); display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); min-width: 0; }
.letters-grid > div:nth-child(5n) { border-right: 0; }
.letter-cell { font-size: 120px; line-height: 1; }
.product-cell { padding: 24px; }
.product-cell img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.letters-grid.is-entering .product-cell img { animation: card-fade 800ms var(--ease) calc(var(--i) * 40ms) both; }
@keyframes card-fade { from { opacity: 0; } to { opacity: 1; } }
.hero-letters .hero-meta { position: static; padding: 28px 20px; }
@media (max-width: 600px) {
  .field-window { top: 174px; }
  .gallery-stage { top: 174px; }
  .hero-letters { padding-top: 174px; }
  .letters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .letters-grid > div { height: 220px; }
  .letters-grid > div:nth-child(5n) { border-right: 1px solid var(--hairline); }
  .letters-grid > .desktop-cell { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .field-canvas, .gallery-card { will-change: auto; }
}

/* Round 2 contact sheet. */
.hero-sheet { padding: 32px 20px; }
.sheet-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 48px; }
.sheet-heading h1 { font-size: 32px; }
.sheet-heading p, .sheet-footer, .sheet-grid figcaption { font-size: 13px; }
.sheet-heading p, .sheet-grid figcaption span, .sheet-grid figcaption p { color: var(--muted); }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
.sheet-grid figure { margin: 0; min-width: 0; }
.shot-link { display: flex; align-items: center; justify-content: center; height: auto; aspect-ratio: 8 / 5; background: #f5f5f5; border: 1px solid var(--hairline); overflow: hidden; }
.shot-link img { width: 100%; height: 100%; object-fit: contain; }
.sheet-mobile img { width: auto; }
.sheet-grid figcaption { padding-top: 14px; }
.sheet-grid figcaption > div { display: flex; justify-content: space-between; gap: 12px; }
.sheet-grid figcaption > div > a { font-size: 20px; }
.sheet-grid figcaption p { margin-top: 6px; }
.sheet-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; border-top: 1px solid var(--hairline); padding-top: 20px; }
@media (max-width: 600px) {
  .sheet-heading, .sheet-footer { flex-direction: column; gap: 12px; }
  .sheet-grid { grid-template-columns: 1fr; }
}