:root {
  --ink: #0a0a0a;
  --paper: #f1efe9;
  --muted: #8a8985;
  --line-dark: rgba(241, 239, 233, 0.24);
  --line-light: rgba(10, 10, 10, 0.22);
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --header-h: 5rem;
  --hero-progress: 0;
  --font-sans: "Helvetica Neue", "Arial Nova", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-sans); line-height: 1.5; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
em { font-family: var(--font-serif); font-weight: 400; }
::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: .35rem; }

.skip-link { position: fixed; top: 0; left: 0; z-index: 100; padding: .8rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-110%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; min-height: var(--header-h); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 var(--gutter); color: var(--paper); background: linear-gradient(180deg, rgba(10,10,10,.82), rgba(10,10,10,.42) 72%, transparent); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.site-mark { display: block; width: clamp(4.8rem, 6vw, 6.4rem); }
.site-mark img { width: 100%; height: auto; }
.site-nav { display: flex; gap: clamp(1rem, 2.4vw, 2.8rem); }
.site-nav a, .contact-bottom a, .hero-link { position: relative; }
.site-nav a::after, .contact-bottom a::after, .hero-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.25rem; height: 1px; background: currentColor; transition: right .3s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .contact-bottom a:hover::after, .hero-link:hover::after { right: 0; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 1rem 0; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; cursor: pointer; }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.5rem); padding-inline: var(--gutter); }
.theme-dark { background: var(--ink); color: var(--paper); }
.theme-light { background: var(--paper); color: var(--ink); }
.eyebrow, .section-tag, .project-number, .project-note, .media-caption p, .work-meta p, .archive-year, figcaption { text-transform: uppercase; letter-spacing: .11em; font-size: clamp(.75rem, .72vw, .8rem); line-height: 1.4; }
.section-tag { opacity: .68; }

.hero-scroll { position: relative; min-height: 200svh; background: var(--ink); }
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: calc(var(--hero-progress) * 6vw); overflow: hidden; background: #141414; transition: inset .08s linear; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.06) 55%, rgba(0,0,0,.5)); pointer-events: none; }
.hero-fallback { position: absolute; inset: 0; background: radial-gradient(circle at 64% 35%, #575757 0, #2c2c2c 24%, #0d0d0d 66%), linear-gradient(120deg, #222, #050505); transform: scale(calc(1.08 - var(--hero-progress) * .08)); }
.hero-fallback::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: repeating-linear-gradient(90deg, transparent 0 8vw, rgba(255,255,255,.08) 8vw calc(8vw + 1px)); }
.hero-media video { position: relative; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.hero-media.is-loaded video { opacity: 1; }
.no-js .hero-media video { opacity: 1; }
.hero-copy { position: absolute; z-index: 2; inset: var(--header-h) var(--gutter) clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.hero-copy .eyebrow { margin-bottom: 1.2rem; }
.hero-copy h1 { width: auto; font-size: clamp(.72rem, .8vw, .9rem); line-height: 1.4; font-weight: 400; }
.hero-link { align-self: flex-start; margin-top: 3rem; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; pointer-events: auto; }
.hero-link span { margin-left: .7rem; }
.hero-index { position: absolute; z-index: 2; right: var(--gutter); top: 50%; text-align: right; text-transform: uppercase; font-size: .75rem; line-height: 1.5; letter-spacing: .08em; opacity: .7; }

.signature { position: absolute; z-index: 3; left: var(--gutter); bottom: 8svh; max-width: 70rem; pointer-events: none; }
.signature .section-tag { margin-bottom: 1rem; }
.signature h2 { font-size: clamp(3.5rem, 8.7vw, 9rem); line-height: .82; letter-spacing: -.065em; text-transform: uppercase; }
.signature > p:last-child { margin-top: 1.7rem; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; }

.project, .selected, .services, .about { padding-block: clamp(6rem, 12vw, 12rem); }
.project-intro { align-items: start; padding-bottom: clamp(4rem, 7vw, 7rem); }
.project-number { grid-column: 1 / 3; }
.project-title { grid-column: 3 / 10; }
.project-title .eyebrow { margin-bottom: 1.4rem; opacity: .65; }
.project-title h2 { font-size: clamp(4.2rem, 11vw, 11rem); line-height: .78; letter-spacing: -.07em; text-transform: uppercase; }
.project-title h2 em { text-transform: none; }
.project-note { grid-column: 10 / -1; align-self: end; max-width: 25rem; }

.media { position: relative; overflow: hidden; background: #292929; }
.theme-light .media { background: #d4d1c8; }
.media::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(125deg, #191919, #3c3c3c 48%, #111); transition: opacity .45s ease; }
.theme-light .media::before { background: linear-gradient(125deg, #cbc8bf, #e7e4dc 48%, #b8b5ad); }
.media.is-loaded::before { opacity: 0; pointer-events: none; }
.media picture { display: block; width: 100%; height: 100%; }
.media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.media:hover img { transform: scale(1.018); }
.media--wide { width: calc(100% - var(--gutter) * 2); aspect-ratio: 16 / 8.8; margin-inline: var(--gutter); }
.media--portrait { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1; }
.media--landscape { aspect-ratio: 16 / 10; }
.media--cinema { aspect-ratio: 2.35 / 1; }

.collection-grid { margin-top: clamp(5rem, 10vw, 10rem); align-items: start; }
.collection-card--chasht { grid-column: 1 / 6; }
.collection-card--dokan { grid-column: 9 / 13; margin-top: 14vw; }
.collection-card--plakbab { grid-column: 4 / 11; margin-top: 6vw; }
.media-caption, .work-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .85rem; border-top: 1px solid var(--line-dark); margin-top: .85rem; }
.media-caption h3, .work-meta h3 { text-transform: uppercase; font-size: 1rem; letter-spacing: -.01em; }
.media-caption p, .work-meta p { opacity: .62; text-align: right; }

.project--rolex { min-height: 100vh; }
.rolex-layout { align-items: start; }
.rolex-main { grid-column: 3 / 12; aspect-ratio: 3 / 2; }
.rolex-detail-a { grid-column: 1 / 5; aspect-ratio: 3 / 4; margin-top: 10vw; }
.rolex-detail-b { grid-column: 7 / 11; aspect-ratio: 3 / 4; margin-top: 18vw; }

.project--music { padding-bottom: clamp(7rem, 14vw, 14rem); }
.music-frame { padding-inline: var(--gutter); }
.music-credit { display: flex; justify-content: space-between; padding-top: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }

.section-head { align-items: start; margin-bottom: clamp(5rem, 9vw, 9rem); }
.section-head .section-tag { grid-column: 1 / 4; }
.section-head h2 { grid-column: 4 / 12; font-size: clamp(3.8rem, 8.4vw, 8.5rem); line-height: .86; letter-spacing: -.06em; }
.selected-grid { align-items: start; }
.work-tile--one { grid-column: 1 / 5; }
.work-tile--two { grid-column: 6 / 13; margin-top: 13vw; }
.work-tile--three { grid-column: 2 / 7; margin-top: 8vw; }
.theme-light .work-meta { border-color: var(--line-light); }

.archive { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 100svh; }
.archive-copy { grid-column: 1 / 6; align-self: center; padding: 7rem var(--gutter); }
.archive-copy h2 { margin: 1.5rem 0 2rem; font-size: clamp(3.8rem, 7.5vw, 8rem); line-height: .82; letter-spacing: -.06em; text-transform: uppercase; }
.archive-copy > p:not(.section-tag, .archive-year) { max-width: 24rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.35rem); line-height: 1.45; }
.archive-year { margin-top: 4rem; }
.archive-image { grid-column: 6 / -1; min-height: 100svh; }

.services-list { list-style: none; margin: 0; padding: 0 var(--gutter); }
.services-list li { display: grid; grid-template-columns: 1fr 6fr 4fr; align-items: baseline; gap: 1rem; padding: 2.2rem 0; border-top: 1px solid var(--line-light); }
.services-list li:last-child { border-bottom: 1px solid var(--line-light); }
.services-list span { font-size: .75rem; }
.services-list h3 { font-size: clamp(2rem, 4vw, 4.5rem); letter-spacing: -.045em; }
.services-list p { color: #65645f; text-transform: uppercase; font-size: .75rem; letter-spacing: .09em; line-height: 1.5; }

.about { min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.about-grid { width: 100%; align-items: start; }
.about-grid > .section-tag { grid-column: 1 / 3; }
.about-grid h2 { grid-column: 3 / 12; font-size: clamp(3.6rem, 8.6vw, 9rem); line-height: .87; letter-spacing: -.06em; }
.about-copy { grid-column: 8 / 12; margin-top: 5rem; font-size: clamp(1.1rem, 1.7vw, 1.6rem); line-height: 1.45; }
.about-copy p + p { margin-top: 2rem; color: var(--muted); }
.studio-facts { margin: 3rem 0 0; font-size: .75rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .1em; }
.studio-facts div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: .8rem; border-top: 1px solid var(--line-dark); }
.studio-facts div:last-child { border-bottom: 1px solid var(--line-dark); }
.studio-facts dt { color: var(--muted); }
.studio-facts dd { margin: 0; overflow-wrap: anywhere; }
.studio-facts a { text-decoration: underline; text-underline-offset: .25rem; }
.about-mark { grid-column: 1 / 11; width: 100%; height: auto; margin: 6rem 0 -5vw; opacity: .09; object-fit: contain; }

.behind { padding-block: clamp(6rem, 10vw, 10rem); overflow: hidden; }
.behind-head { padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; margin-bottom: 4rem; }
.behind-head .section-tag { grid-column: 1 / 4; align-self: start; }
.behind-head h2 { grid-column: 4 / 10; font-size: clamp(4rem, 8vw, 8.5rem); line-height: .8; letter-spacing: -.06em; text-transform: uppercase; }
.behind-head > p:last-child { grid-column: 11 / -1; text-align: right; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.gallery-hint--mobile { display: none; }
.behind-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18rem, 34vw); gap: clamp(1rem, 2vw, 2rem); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; padding: 0 var(--gutter) 2rem; cursor: grab; }
.behind-track:active { cursor: grabbing; }
.behind-item { scroll-snap-align: start; }
.behind-item .media { aspect-ratio: 4 / 5; }
.behind-item--wide { width: min(50rem, 46vw); }
.behind-item--wide .media { aspect-ratio: 16 / 11; margin-top: 6vw; }
.behind-item figcaption { padding-top: .8rem; }

.contact { padding: clamp(6rem, 10vw, 10rem) var(--gutter) 2rem; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; }
.contact-top h2 { margin-top: 2rem; font-size: clamp(4.1rem, 10vw, 11rem); line-height: .8; letter-spacing: -.07em; text-transform: uppercase; }
.contact-top h2 em { text-transform: none; }
.contact-email { display: flex; justify-content: space-between; align-items: center; padding-block: 1.5rem; margin-block: 6rem; border-block: 1px solid var(--line-dark); font-size: clamp(1.3rem, 3.5vw, 4rem); letter-spacing: -.04em; }
.contact-email span { font-size: .7em; }
.contact-social { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: -3.75rem; margin-bottom: 5rem; }
.contact-social a { display: inline-flex; align-items: center; gap: .75rem; text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; }
.contact-social svg { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; }
.contact-social .icon-fill, .contact-social path { fill: currentColor; stroke: none; }
.contact-bottom { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 1rem; text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; }
.contact-bottom > *:last-child { text-align: right; }

.js [data-reveal] { opacity: 0; transform: translateY(2.5rem); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.2,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

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

@media (max-width: 760px) {
  :root { --gutter: 1rem; --header-h: 4.25rem; }
  html, body { overflow-x: clip; }
  .site-header { background: rgba(10,10,10,.86); backdrop-filter: blur(12px); }
  .menu-toggle { display: flex; gap: .6rem; }
  .site-nav { position: absolute; top: 100%; right: 0; bottom: auto; left: 0; z-index: 1; width: 100%; height: calc(100svh - var(--header-h)); align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 1rem var(--gutter) 2rem; overflow-y: auto; background: var(--ink); visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .35s ease, visibility 0s linear .35s; }
  .menu-open .site-nav { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
  .site-nav a { padding: .5rem 0; font-size: clamp(3rem, 15vw, 5rem); line-height: .9; letter-spacing: -.06em; }
  .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
  .hero-scroll { min-height: 180svh; }
  .hero-media { inset: calc(var(--hero-progress) * 1rem); }
  .hero-media video {
    left: 50%;
    width: 140%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    transform: translateX(-50%);
  }
  .hero-copy { inset-inline: 1rem; bottom: 2rem; }
  .hero-index { display: none; }
  .signature { bottom: 7svh; }
  .signature h2 { font-size: clamp(3.1rem, 16vw, 5.7rem); }

  .project, .selected, .services, .about { padding-block: 6rem; }
  .project-intro { padding-bottom: 3.5rem; }
  .project-number { grid-column: 1 / 2; }
  .project-title { grid-column: 2 / -1; }
  .project-title h2 { font-size: clamp(4.3rem, 19vw, 7rem); }
  .project--chasht .project-title { grid-column: 1 / -1; margin-top: 1.25rem; }
  .project--chasht .project-title h2 { font-size: clamp(3.8rem, 16vw, 6rem); }
  .project-note { grid-column: 2 / -1; margin-top: 2rem; }
  .media--wide { width: calc(100% - 2rem); aspect-ratio: 16 / 9; margin-inline: 1rem; }
  .collection-grid { margin-top: 4rem; }
  .collection-card--chasht { grid-column: 1 / 6; }
  .collection-card--dokan { grid-column: 3 / -1; margin-top: 4rem; }
  .collection-card--plakbab { grid-column: 1 / -1; margin-top: 4rem; }
  .rolex-main { grid-column: 1 / -1; aspect-ratio: 7 / 5; }
  .rolex-detail-a { grid-column: 1 / 4; margin-top: 4rem; }
  .rolex-detail-b { grid-column: 4 / -1; margin-top: 8rem; }
  .media--cinema { aspect-ratio: 16 / 9; }
  .section-head .section-tag { grid-column: 1 / -1; margin-bottom: 2rem; }
  .section-head h2 { grid-column: 1 / -1; font-size: clamp(3.7rem, 15vw, 6rem); }
  .work-tile--one { grid-column: 1 / 6; }
  .work-tile--two { grid-column: 2 / -1; margin-top: 5rem; }
  .work-tile--three { grid-column: 1 / -2; margin-top: 5rem; }
  .archive { display: flex; flex-direction: column; min-height: auto; }
  .archive-copy { padding: 6rem 1rem 4rem; }
  .archive-image { min-height: 75svh; }
  .services-list li { grid-template-columns: 2rem 1fr; padding-block: 1.5rem; }
  .services-list h3 { font-size: 2.25rem; }
  .services-list p { grid-column: 2; }
  .about { min-height: auto; }
  .about-grid > .section-tag { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .about-grid h2 { grid-column: 1 / -1; }
  .about-copy { grid-column: 2 / -1; margin-top: 3.5rem; }
  .about-mark { grid-column: 1 / -1; margin: 4rem 0 -1rem; }
  .behind-head { grid-template-columns: repeat(6, 1fr); }
  .behind-head .section-tag { grid-column: 1 / -1; margin-bottom: 2rem; }
  .behind-head h2 { grid-column: 1 / -1; }
  .behind-head > p:last-child { grid-column: 1 / -1; margin-top: 1.5rem; text-align: left; }
  .gallery-hint--desktop { display: none; }
  .gallery-hint--mobile { display: inline-flex; align-items: center; gap: .75rem; }
  .swipe-arrow { display: inline-block; font-size: 1.15rem; animation: swipe-hint 1.5s ease-in-out infinite; }
  .behind-track { grid-auto-columns: 78vw; }
  .behind-item--wide { width: 88vw; }
  .contact { padding-top: 6rem; }
  .contact-email { margin-block: 4rem 1.5rem; }
  .contact-social { flex-direction: column; align-items: flex-start; gap: 1rem; margin: 0 0 4rem; }
  .contact-bottom { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .contact-bottom > *:last-child { text-align: left; }

  .no-js .menu-toggle { display: none; }
  .no-js .site-nav { inset: 100% 0 auto; width: 100%; height: auto; align-self: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding: .75rem 1rem; overflow: visible; visibility: visible; pointer-events: auto; transform: none; background: rgba(10,10,10,.92); }
  .no-js .site-nav a { padding: .35rem 0; text-align: center; font-size: .7rem; line-height: 1; letter-spacing: .06em; }
}

@keyframes swipe-hint {
  0%, 100% { transform: translateX(-.2rem); }
  50% { transform: translateX(.35rem); }
}