/* ==========================================================================
   Nanu Cheishvili — portfolio
   Values are taken 1:1 from design/*.dc.html. Mobile (390) is the base,
   the desktop (1440) layout applies from 1024px.

   Units
   --m   one mobile-artboard px, fluid: 1px at 390 wide.
   --mc  --m capped at 1.6px so tablet widths don't balloon.
   --s   one desktop-artboard px: 1px at 1440, shrinking toward 1024 and
         growing to 1.2px (a 1702px-wide composition, name at 192px).
   --gut the desktop side margin: 64px, growing once the composition
         stops at 1.2x so it stays centred on very wide screens.
         Horizontal offsets are "--gut + n * --s", anchored to the nearer
         edge. Project images keep their size and overhang the layout
         edge, so on very wide screens the plum band shows beside them.
   ========================================================================== */

:root {
  --ink: #0E0E10;
  --paper: #F3F1EC;
  --slate: #3C4757;
  --plum: #463F54;
  --grey: #8A8A8F;
  --signal: #F2FF00;
  --line: rgba(14,14,16,0.08);
  --ease: cubic-bezier(0.76, 0, 0.24, 1);

  --muted: #6A6A70;        /* secondary text on paper */
  --focus: var(--ink);     /* focus ring, flipped on dark grounds */
  --gutv: max(64px, calc((100vw - 1702px) / 2 + 64px)); /* nav sits outside .page, so it measures the viewport */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #F3F1EC; color: #0E0E10; font-family: "Inter Tight", "Noto Sans Georgian", "Helvetica Neue", Arial, sans-serif; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }

.mono { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }
.disp { font-family: "Inter Tight", "Noto Sans Georgian", Arial, sans-serif; font-weight: 900; letter-spacing: -0.04em; line-height: 0.9; }
.serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.body { font-family: "Inter Tight", "Noto Sans Georgian", Arial, sans-serif; font-weight: 400; line-height: 1.5; }
.muted { color: var(--muted); }

@media (max-width: 1023.98px) { .d-only { display: none !important; } }
@media (min-width: 1024px)    { .m-only { display: none !important; } }

.page {
  position: relative;
  container-type: inline-size;
}
.page > * {
  --m: calc(100cqw / 390);
  --mc: min(var(--m), 1.6px);
  --gut: max(64px, calc((100cqw - 1702px) / 2 + 64px));
  --u: calc((100cqw - 2 * var(--gut)) / 1312);
  --s: min(var(--u), 1.2px);
}

/* Signal square — always carries a 1px ink outline (it vanishes on paper otherwise) */
.dot { width: 7px; height: 7px; background: #F2FF00; border: 1px solid #0E0E10; display: block; flex-shrink: 0; }

/* ---- focus: visible on paper and on ink / plum / slate ---- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
[data-ground-band] { --focus: #F3F1EC; }

.skip { position: fixed; left: 20px; top: 12px; z-index: 200; background: #0E0E10; color: #F3F1EC; font-size: 11px; padding: 12px 14px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ==========================================================================
   MOTION — keyframes and timings exactly as in the design files.
   Reveals are held paused until their section enters the viewport
   (main.js adds .in); the delays then run from that moment.
   ========================================================================== */
@keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes riseIn { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wipeIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 1024px) {
  @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
}

.gridlines { transform-origin: top; animation: drawY 1.15s cubic-bezier(0.76, 0, 0.24, 1) both; }
.mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mask > span { display: inline-block; animation: riseIn 0.8s cubic-bezier(0.76, 0, 0.24, 1) both; }
/* headings with descenders: extend the clip below the baseline without moving the layout */
.about__title .mask, .proj__title .mask { padding-bottom: 0.2em; margin-bottom: -0.2em; }
/* sized off the word, not the 16px link: the serif "g" needs ~20px below its line box on mobile */
.contact__cta .maskc { padding-bottom: calc(20 * var(--mc)); margin-bottom: calc(-20 * var(--mc)); }
@media (min-width: 1024px) { .contact__cta .maskc { padding-bottom: calc(40 * var(--s)); margin-bottom: calc(-40 * var(--s)); } }
.sect { animation: fadeUp 0.9s cubic-bezier(0.76, 0, 0.24, 1) both; }
.wipe { animation: wipeIn 1s cubic-bezier(0.76, 0, 0.24, 1) both; }
.rule8 { transform-origin: left; animation: drawX 1.1s cubic-bezier(0.76, 0, 0.24, 1) both; animation-delay: 0.5s; }
.dotlive { animation: pulseDot 2s ease-in-out infinite; }
.marquee-track { animation: marquee 22s linear infinite; }
@media (min-width: 1024px) {
  .rule8 { animation-delay: 0.55s; }
  .marquee-track { animation-duration: 26s; }
}

/* Section reveals beyond the hero (from the brief): headings rise from a
   mask, images wipe, rules draw in — same easing, 0.06s stagger.
   .maskc is a mask that clips with clip-path instead of overflow, so words
   of different faces on one line keep sharing a baseline. */
.maskc { display: inline-block; clip-path: inset(-0.4em -0.2em 0 -0.2em); }
.maskc > span { display: inline-block; animation: riseIn 0.8s cubic-bezier(0.76, 0, 0.24, 1) both; }
.rulein { transform-origin: left; animation: drawX 1.1s cubic-bezier(0.76, 0, 0.24, 1) both; }

/* hold until in view */
.js .gridlines:not(.in),
.js [data-reveal]:not(.in).sect,
.js [data-reveal]:not(.in) :is(.sect, .wipe, .rule8, .rulein, .ruleiny, .mask > span, .maskc > span) { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .gridlines, .mask > span, .sect, .wipe, .rule8, .dotlive, .marquee-track { animation: none !important; transform: none !important; clip-path: none !important; opacity: 1 !important; }
  .maskc, .maskc > span, .rulein, .ruleiny { animation: none !important; transform: none !important; clip-path: none !important; }
  .proj-shot, .ul::after { transition: none !important; }
  /* the brief's "simple fades": each block fades in place as it enters */
  .js [data-reveal] { transition: filter 0.6s ease; }
  .js [data-reveal]:not(.in) { filter: opacity(0); }
}

/* ==========================================================================
   GLOBAL COLUMN GRID — 4 cols / 20px margin mobile, 12 cols / 64px desktop
   ========================================================================== */
.gridlines {
  position: absolute; top: 0; bottom: 0; left: 20px; right: 19px;
  pointer-events: none; z-index: 7; /* above the sections, as the design renders: the lines stay visible across the whole page */
  background-image: repeating-linear-gradient(to right, rgba(14,14,16,0.08) 0 1px, rgba(0,0,0,0) 1px calc((100% - 1px) / 4));
}
/* the same lines, in paper, inside the dark bands */
.bandgrid {
  position: absolute; top: 0; bottom: 0; left: 20px; right: 19px;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--bandline) 0 1px, rgba(0,0,0,0) 1px calc((100% - 1px) / 4));
}
@media (min-width: 1024px) {
  .gridlines, .bandgrid { left: var(--gut); right: calc(var(--gut) - 1px); }
  .gridlines { background-image: repeating-linear-gradient(to right, rgba(14,14,16,0.08) 0 1px, rgba(0,0,0,0) 1px calc((100% + 23px) / 12)); }
  .bandgrid { background-image: repeating-linear-gradient(to right, var(--bandline) 0 1px, rgba(0,0,0,0) 1px calc((100% + 23px) / 12)); }
}

/* ==========================================================================
   NAV + SCROLL PROGRESS
   ========================================================================== */
.nav {
  position: fixed; left: 0; top: 0; right: 0; height: 56px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
  --nav-fg: #0E0E10; --nav-dim: #6A6A70;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav[data-over="plum"], .nav[data-over="slate"] { --nav-fg: #F3F1EC; --nav-dim: #B9B7BD; --focus: #F3F1EC; }
.nav[data-over="ink"] { --nav-fg: #F3F1EC; --nav-dim: #8A8A8F; --focus: #F3F1EC; }
.nav__brand { font-size: 12px; color: var(--nav-fg); font-weight: 700; transition: color 0.35s cubic-bezier(0.76, 0, 0.24, 1); }
.nav__m { display: flex; align-items: center; gap: 10px; }
.nav__menu { font-size: 11px; color: var(--nav-fg); min-height: 44px; display: flex; align-items: center; transition: color 0.35s cubic-bezier(0.76, 0, 0.24, 1); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.navlink { font-size: 11px; color: var(--nav-dim); display: flex; align-items: center; gap: 7px; transition: opacity 0.3s ease, color 0.35s cubic-bezier(0.76, 0, 0.24, 1); }
.navlink:hover { opacity: 0.45; }
.navlink .dot { display: none; }
.navlink.is-active { color: var(--nav-fg); }
.navlink.is-active .dot { display: block; }
@media (min-width: 1024px) {
  .nav { height: 76px; padding: 0 var(--gutv); }
}

.progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; background: #0E0E10; z-index: 61; pointer-events: none; }
.progress__bar { height: 3px; background: #F2FF00; transform-origin: left; transform: scaleX(0); will-change: transform; }

/* ==========================================================================
   01 HERO
   ========================================================================== */
.hero { position: relative; z-index: 2; padding: 68px 0 46px; }

.hero__ink { position: relative; z-index: 3; height: 52px; background: #0E0E10; display: flex; align-items: center; padding: 0 20px; }
.hero__ink span { color: #F3F1EC; font-size: 12px; letter-spacing: 0.3em; }

/* collage height: 288 at 390, fluid, capped for tablets */
.hero { --ch: calc(288 * var(--mc)); }
.hero__rule { position: absolute; left: 0; right: 0; top: calc(160px + var(--ch) * 0.375); height: 8px; background: #0E0E10; z-index: 4; }
.hero__media { position: relative; margin-top: 40px; height: var(--ch); }
.hero__frame { position: absolute; left: calc(12 * var(--m)); right: calc(12 * var(--m) - 2px); top: -12px; height: calc(var(--ch) + 2px); border: 1px solid #0E0E10; z-index: 4; }
.hero__collage { position: absolute; inset: 0; z-index: 5; background: #0E0E10; display: flex; align-items: center; justify-content: center; overflow: hidden; animation-delay: 0.65s; }
.hero__collage img { width: var(--ch); height: var(--ch); object-fit: cover; }

.hero__name { position: relative; z-index: 6; margin-top: 42px; padding: 0 20px; font-size: calc(66 * var(--mc)); color: #0E0E10; }
.hero__name .d1 { animation-delay: 0.8s; }
.hero__name .d2 { animation-delay: 0.9s; }
.hero__name .d3 { animation-delay: 1.1s; }
.period { color: #F2FF00; -webkit-text-stroke: 1px #0E0E10; }

.hero__tag { position: relative; z-index: 6; margin: 31px 20px 0; width: calc(320 * var(--mc)); max-width: calc(100% - 40px); font-size: 17px; color: #0E0E10; animation-delay: 1.15s; }
.hero__meta-m { position: relative; z-index: 6; margin: 39px 20px 0; font-size: 10px; animation-delay: 1.25s; }

.hero__avail { position: relative; z-index: 6; margin: 41px 20px 0; display: flex; align-items: center; gap: 9px; animation-delay: 1.3s; }
.hero__avail .mono { font-size: 11px; color: #0E0E10; }
.hero__scroll { position: absolute; z-index: 6; right: 20px; bottom: 45px; font-size: 11px; color: #0E0E10; animation-delay: 1.3s; }

@media (min-width: 1024px) {
  .hero { height: calc(900 * var(--s)); min-height: 600px; padding: 0; }
  .hero > * { position: absolute; margin: 0; }

  .hero__ink { left: var(--gut); top: 0; bottom: 0; width: calc(96 * var(--s)); height: auto; padding: 0; justify-content: center; }
  .hero__ink span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.34em; }

  .hero__rule { top: calc(280 * var(--s)); }
  .hero__media { right: calc(var(--gut) + 16 * var(--s)); top: calc(88 * var(--s)); width: calc(500 * var(--s)); height: calc(400 * var(--s)); }
  .hero__frame { left: calc(-24 * var(--s)); right: auto; top: calc(-24 * var(--s)); width: calc(100% + 2px); height: calc(100% + 2px); }
  .hero__collage { animation-delay: 0.7s; }
  .hero__collage img { width: calc(400 * var(--s)); height: calc(400 * var(--s)); }

  .hero__meta { left: calc(var(--gut) + 136 * var(--s)); top: calc(112 * var(--s)); z-index: 6; display: flex; flex-direction: column; gap: 10px; }
  .hero__meta .mono { font-size: 11px; }

  .hero__name { right: var(--gut); top: calc(528 * var(--s)); padding: 0; font-size: calc(160 * var(--s)); text-align: right; }
  .hero__name .d1 { animation-delay: 0.85s; }
  .hero__name .d2 { animation-delay: 0.95s; }
  .hero__name .d3 { animation-delay: 1.15s; }
  .period { -webkit-text-stroke-width: 2px; }

  .hero__tag { left: calc(var(--gut) + 136 * var(--s)); top: calc(600 * var(--s)); width: calc(400 * var(--s)); max-width: none; animation-delay: 1.2s; }
  .hero__avail { left: calc(var(--gut) + 136 * var(--s)); top: calc(844 * var(--s)); }
  .hero__scroll { right: var(--gut); bottom: auto; top: calc(844 * var(--s)); }
}

/* ==========================================================================
   SHARED — links, chips
   ========================================================================== */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* mobile: underline always shown */
.ul { position: relative; display: inline-block; }
.ul::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: currentColor; }
.sigul::after { background: #F2FF00; height: 3px; bottom: -10px; }
@media (min-width: 1024px) {
  /* desktop: rule draws in on hover */
  .ul::after { bottom: -6px; transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
  .proj:hover .ul::after, .proj:focus-within .ul::after, .ul:hover::after, .ul:focus-visible::after { transform: scaleX(1); }
  .sigul::after { height: 4px; bottom: -14px; }
}

/* ==========================================================================
   02 SELECTED WORK
   ========================================================================== */
.work { position: relative; z-index: 2; }

/* heading on paper */
.work__head { position: relative; z-index: 6; padding: 40px 20px 35px; }
.work__label, .work__years { display: block; font-size: 10px; }
.work__title { margin-top: 19px; font-size: 24px; line-height: normal; }
.work__title .disp { font-size: calc(56 * var(--mc)); color: #0E0E10; }
.work__title .serif { font-size: calc(58 * var(--mc)); color: #0E0E10; line-height: 0.95; }
.work__title .w2 > span { animation-delay: 0.06s; }
.work__years { margin-top: 33px; }

/* plum band */
.work__band { position: relative; z-index: 2; background: #463F54; overflow: clip; padding: 20px 0; --bandline: rgba(243,241,236,0.09); }
.work__band .bandgrid { z-index: 0; }

/* project rows — mobile */
.proj { position: relative; z-index: 5; }
.proj + .proj { margin-top: 20px; }
.proj__media { position: relative; margin-left: -20px; width: 100%; aspect-ratio: 390 / 240; overflow: hidden; }
.proj--r .proj__media { margin-left: 20px; }
.proj-shot { width: 100%; height: 100%; background: #E7E4DD; border: 1px solid #0E0E10; overflow: hidden; display: flex; flex-direction: column; filter: grayscale(1) contrast(1.06); transition: filter 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
.proj:active .proj-shot { filter: grayscale(0); }
.proj-shot img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.proj-shot--browser img { height: auto; flex-grow: 1; object-position: 50% 0%; }
/* left-bleeding shot whose content starts at its left edge (Home4you): the frame still bleeds,
   but the screenshot starts where the screen does, and any trim falls on the right */
.proj-shot--pin { --bleed: 20px; }
.proj-shot--pin img { margin-left: var(--bleed); width: calc(100% - var(--bleed)); object-position: 12% 0; }
.browserbar { height: 24px; flex-shrink: 0; border-bottom: 1px solid #0E0E10; display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.browserbar__dots { display: flex; gap: 4px; }
.browserbar__dots span { width: 5px; height: 5px; background: #0E0E10; display: block; }
.browserbar .mono { font-size: 9px; color: #3C3C42; }

.proj__text { position: relative; margin: 20px 20px 0; width: min(calc(330 * var(--m)), 480px); max-width: calc(100% - 40px); }
.proj--r .proj__text { margin-left: calc(20px + 20 * var(--m)); }
.proj__idx-m { display: block; padding-top: 5px; font-size: 11px; color: #B9B7BD; animation-delay: 0.06s; }
.proj__title { margin-top: 10px; font-size: calc(34 * var(--mc)); color: #F3F1EC; }
.proj__title .mask > span { animation-delay: 0.12s; }
.proj__rest { animation-delay: 0.18s; }
.proj__desc { margin-top: 10px; font-size: 15px; color: #D6D3DA; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-size: 9px; color: #E4E2E8; border: 1px solid rgba(243,241,236,0.34); padding: 5px 8px; }
.proj__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 12px; color: #F3F1EC; }
/* 44px tap targets (mobile): keep the rule 5px under the text, not under the box */
@media (max-width: 1023.98px) { .proj__link.ul::after, .ul.tap::after { bottom: calc(50% - 0.6em - 6px); } }

@media (min-width: 1024px) {
  .work__head { height: calc(380 * var(--s)); padding: 0; }
  .work__head > * { position: absolute; margin: 0; }
  .work__label, .work__years, .work__hint { font-size: 11px; }
  .work__label { right: var(--gut); top: calc(56 * var(--s)); }
  .work__title { left: var(--gut); top: calc(120 * var(--s)); white-space: nowrap; font-size: calc(112 * var(--s)); line-height: 0.9; }
  .work__title .disp { font-size: calc(112 * var(--s)); }
  .work__title .serif { font-size: calc(116 * var(--s)); line-height: inherit; }
  .work__years { left: var(--gut); top: calc(268 * var(--s)); }
  .work__hint { right: var(--gut); top: calc(268 * var(--s)); }

  .work__band { padding: calc(40 * var(--s)) 0; }

  .proj { min-height: calc(600 * var(--s)); padding: calc(92 * var(--s)) 0 calc(40 * var(--s)); }
  .proj + .proj { margin-top: 0; }
  .proj__hit { position: absolute; inset: 0; z-index: 3; }
  .proj__hit:focus-visible { outline-offset: -8px; }
  .proj__media { position: absolute; top: calc(40 * var(--s)); left: calc(var(--gut) - 124 * var(--s)); width: calc(880 * var(--s)); height: calc(480 * var(--s)); margin: 0; aspect-ratio: auto; }
  .proj--r .proj__media { left: auto; right: calc(var(--gut) - 124 * var(--s)); margin: 0; }
  .proj-shot { transition: filter 0.7s cubic-bezier(0.76, 0, 0.24, 1), transform 0.7s cubic-bezier(0.76, 0, 0.24, 1); }
  .proj:hover .proj-shot, .proj:focus-within .proj-shot { filter: grayscale(0) contrast(1); transform: scale(1.025); }
  .browserbar { height: 34px; gap: 22px; padding: 0 12px; }
  .proj-shot--pin { --bleed: max(0px, calc(124 * var(--s) - var(--gut))); }
  .proj-shot--pin img { object-position: 30% 0; }
  .browserbar__dots { gap: 5px; }
  .browserbar__dots span { width: 6px; height: 6px; }
  .browserbar .mono { font-size: 10px; }

  .proj__text { margin: 0 0 0 calc(var(--gut) + 816 * var(--s)); width: calc(440 * var(--s)); max-width: none; }
  .proj--r .proj__text { margin-left: var(--gut); }
  .proj-idx { font-size: calc(28 * var(--s)); color: #B9B7BD; letter-spacing: 0.04em; transition: color 0.35s cubic-bezier(0.76, 0, 0.24, 1); animation-delay: 0.06s; }
  .proj:hover .proj-idx, .proj:focus-within .proj-idx { color: #F2FF00; }
  .proj__title { margin-top: 18px; font-size: calc(44 * var(--s)); }
  .proj__desc { margin-top: 16px; font-size: 17px; max-width: 52ch; }
  .proj__meta { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .proj__role { font-size: 11px; color: #B9B7BD; }
  .proj__meta .chips { gap: 8px; margin-top: 0; }
  .chip { font-size: 10px; padding: 6px 10px; }
  .proj__foot { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 18px; }
  .proj__foot .rulein { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(243,241,236,0.24); animation-delay: 0.24s; }
  .proj__live { font-size: 11px; color: #B9B7BD; }
  .proj__view { font-size: 12px; color: #F3F1EC; }
}

/* ==========================================================================
   03 APPROACH — native horizontal scroll + snap at every size
   ========================================================================== */
.approach { position: relative; z-index: 2; padding: 40px 0 51px; min-height: 700px; }
.approach__band { position: absolute; left: 0; right: 0; top: 0; bottom: 180px; background: #3C4757; overflow: hidden; --bandline: rgba(243,241,236,0.09); }

.approach > :not(.approach__band) { position: relative; z-index: 3; }
.approach__label { display: block; margin: 0 20px; font-size: 10px; color: #B9B7BD; }
.approach__lede { margin: 23px 20px 0; width: calc(320 * var(--mc)); max-width: calc(100% - 40px); font-size: 20px; line-height: 1.3; color: #F3F1EC; animation-delay: 0.06s; }
.approach__hint { display: block; margin: 50px 20px 0; font-size: 10px; color: #B9B7BD; animation-delay: 0.12s; }

.hscroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.is-dragging { scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.snap { scroll-snap-align: start; }

.approach__rail { z-index: 4; margin: 29px 0 0 20px; }
/* ring that reads on both the slate band and the paper below it */
.approach__rail:focus-visible { outline: 2px solid #0E0E10; outline-offset: 2px; box-shadow: 0 0 0 2px #F3F1EC; }
.approach__track { display: flex; gap: 16px; width: max-content; padding: 0 20px 0 0; margin: 0; list-style: none; }

.step { width: 260px; min-height: 380px; background: #F3F1EC; border: 1px solid #0E0E10; padding: 22px; display: flex; flex-direction: column; }
.step:nth-child(1) { animation-delay: 0.18s; }
.step:nth-child(2) { animation-delay: 0.24s; }
.step:nth-child(3) { animation-delay: 0.30s; }
.step:nth-child(4) { animation-delay: 0.36s; }
.step__n { font-size: 76px; line-height: 1; color: rgba(0,0,0,0); -webkit-text-stroke: 1px #0E0E10; }
.step__title { margin-top: 18px; font-size: 28px; color: #0E0E10; }
.step__text { margin-top: 10px; font-size: 15px; color: #2A2A2E; }
.step__chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 16px; }
.step .chip { color: #4A4A50; border-color: rgba(14,14,16,0.3); }

.approach__progress { position: relative; margin: 49px 20px 0; width: 200px; height: 1px; }
.approach__track-line { position: absolute; inset: 0; background: rgba(14,14,16,0.16); animation-delay: 0.42s; }
.approach__thumb { position: relative; width: 30%; height: 3px; margin-top: -1px; background: #0E0E10; will-change: transform; }

@media (min-width: 1024px) {
  .approach { padding: 0 0 24px; min-height: calc(880 * var(--s)); }
  .approach__band { bottom: calc(160 * var(--s)); }

  .approach__vlabel { position: absolute !important; left: var(--gut); top: calc(64 * var(--s)); font-size: 12px; color: #B9B7BD; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.34em; }
  .approach__label { position: absolute !important; right: var(--gut); top: calc(56 * var(--s)); margin: 0; font-size: 11px; }

  .approach__lede { margin: 0 0 0 calc(var(--gut) + 96 * var(--s)); padding-top: calc(96 * var(--s)); width: calc(620 * var(--s)); max-width: none; font-size: 22px; line-height: 1.35; }
  .approach__hint { margin: calc(74 * var(--s)) 0 0 calc(var(--gut) + 96 * var(--s)); font-size: 11px; }

  .approach__rail { margin: calc(57 * var(--s)) 0 0 calc(var(--gut) + 96 * var(--s)); }
  .approach__track { gap: 24px; padding-right: var(--gut); }
  .step { width: 360px; min-height: 560px; padding: 32px; }
  .step__n { font-size: 110px; }
  .step__title { margin-top: 28px; font-size: 36px; }
  .step__text { margin-top: 16px; font-size: 17px; }
  .step__chips { gap: 8px; }

  .approach__progress { margin: 24px 0 0 calc(var(--gut) + 96 * var(--s)); width: 400px; }
}

/* ==========================================================================
   04 ABOUT
   ========================================================================== */
.ruleiny { transform-origin: top; animation: drawY 1.1s cubic-bezier(0.76, 0, 0.24, 1) both; }

.about { position: relative; z-index: 2; padding: 48px 20px 133px; min-height: 1340px; }
.about__label { display: block; font-size: 10px; }
.about__title { margin-top: 23px; width: calc(330 * var(--mc)); max-width: 100%; font-size: calc(50 * var(--mc)); line-height: 0.94; color: #0E0E10; }
.about__title .mask { vertical-align: top; }
.about__text { margin-top: 58px; width: calc(330 * var(--m)); max-width: min(100%, 60ch); font-size: 17px; color: #2A2A2E; animation-delay: 0.06s; }

.about__timeline { position: relative; margin-top: 47px; width: calc(330 * var(--m)); max-width: min(100%, 60ch); padding-left: 21px; animation-delay: 0.12s; }
.about__timeline-rule { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(14,14,16,0.2); animation-delay: 0.18s; }
.about__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.about__list li { display: flex; flex-direction: column; gap: 2px; }
.about__list .mono { font-size: 10px; }
.about__when { white-space: nowrap; }
.about__list li > span:last-child { font-size: 16px; color: #0E0E10; font-weight: 500; }

.about__facts { position: relative; margin-top: 23px; width: calc(350 * var(--m)); max-width: 100%; display: flex; flex-direction: column; gap: 20px; padding-top: 23px; }
.about__facts-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(14,14,16,0.2); }
.about__facts > div { display: flex; flex-direction: column; gap: 8px; }
.about__facts > div:nth-of-type(1) { animation-delay: 0.06s; }
.about__facts > div:nth-of-type(2) { animation-delay: 0.12s; }
.about__facts > div:nth-of-type(3) { animation-delay: 0.18s; }
.about__facts h3 { font-size: 10px; }
.about__fact { font-size: 12px; color: #0E0E10; line-height: 1.8; text-transform: none; letter-spacing: 0.05em; }

@media (min-width: 1024px) {
  .about { padding: 0 var(--gut) calc(148 * var(--s)); min-height: calc(1000 * var(--s)); }
  .about__label { position: absolute; right: var(--gut); top: calc(56 * var(--s)); font-size: 11px; }

  /* heading left, text + timeline right; the facts row sits at 720 unless content pushes it down */
  .about__top { display: flex; align-items: flex-start; gap: calc(76 * var(--s)); padding: calc(120 * var(--s)) 0 48px; min-height: calc(720 * var(--s)); }
  .about__title { flex: none; margin: 0; width: calc(620 * var(--s)); font-size: calc(88 * var(--s)); line-height: 0.92; }
  .about__col { flex: none; width: calc(560 * var(--s)); margin-top: calc(4 * var(--s)); }
  .about__text { margin: 0; width: auto; max-width: 58ch; }
  .about__timeline { margin-top: 56px; width: auto; max-width: none; padding-left: 29px; }
  .about__list { gap: 22px; }
  .about__list li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .about__list .mono { font-size: 11px; }
  .about__list li > span:last-child { font-size: 17px; }

  .about__facts { margin: 0; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 33px; }
  .about__facts > div { gap: 12px; }
  .about__facts h3 { font-size: 11px; }
  .about__fact { line-height: 2; letter-spacing: 0.06em; }
}

/* narrow desktop: the tagged date sits above its entry instead of beside it */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .about__list li { display: flex; flex-direction: column; gap: 2px; }
}

/* ==========================================================================
   05 OFF-SCREEN — ink band. Rotations use the `rotate` property so the
   reveal's transform animation never cancels the tilt.
   ========================================================================== */
.off { position: relative; z-index: 2; background: #0E0E10; overflow: hidden; padding: 40px 20px 45px; min-height: 1280px; display: flex; flex-direction: column; align-items: flex-start; --bandline: rgba(243,241,236,0.12); }
.off > .bandgrid { z-index: 3; }
.off__label { order: 0; position: relative; z-index: 5; font-size: 10px; color: #8A8A8F; }
.off__main { display: contents; }

.off__title { order: 1; position: relative; z-index: 5; margin-top: 23px; width: calc(340 * var(--mc)); max-width: 100%; font-size: calc(34 * var(--mc)); line-height: 0.95; color: #F3F1EC; }
.off__title .mask { vertical-align: top; }

.off__stage { order: 2; position: relative; padding-top: calc(221 * var(--mc)); }
.off__tag { position: absolute; z-index: 5; left: calc(53 * var(--m)); top: calc(95 * var(--mc)); width: calc(245 * var(--mc)); height: calc(38 * var(--mc)); rotate: -40deg; animation-delay: 0.12s; }
.off__tag span { font-size: calc(32 * var(--mc)); white-space: nowrap; line-height: 0.95; display: inline-block; color: rgba(0,0,0,0); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1px rgba(243,241,236,0.55); background-color: #6E6E76; background-image: radial-gradient(#F3F1EC 0.9px, rgba(0,0,0,0) 0.9px); background-size: 4px 4px; }
.off__figure { position: relative; z-index: 2; width: calc(350 * var(--m)); aspect-ratio: 350 / 278; animation-delay: 0.06s; }
.off__figure img { width: 100%; height: 100%; }
.off__hlines { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: repeating-linear-gradient(to bottom, rgba(243,241,236,0.12) 0 1px, rgba(0,0,0,0) 1px calc(100% / 5)); }
.off__rule { display: block; position: relative; z-index: 4; width: calc(350 * var(--m)); height: 1px; background: rgba(243,241,236,0.24); animation-delay: 0.18s; }

.off__items { order: 3; position: relative; z-index: 5; margin-top: 49px; display: flex; flex-direction: column; align-items: flex-start; }
.off-item { rotate: var(--rm); max-width: 100%; }
.off-item--art    { width: calc(322 * var(--m)); animation-delay: 0.12s; }
.off-item--music  { width: calc(302 * var(--m)); margin: 44px 0 0 calc(22 * var(--m)); /* drawn 20px; +24 for the two tilts converging at the left edge */ animation-delay: 0.18s; }
.off-item--dance  { width: calc(314 * var(--m)); margin: 37px 0 0 calc(4 * var(--m)); animation-delay: 0.24s; }
.off-item--nature { width: calc(300 * var(--m)); margin: 23px 0 0 calc(26 * var(--m)); animation-delay: 0.30s; }
.off-item p { margin-top: 18px; font-size: 15px; color: #B9B7BD; }
.off-word { position: relative; display: inline-block; transform-origin: left center; font-size: calc(32 * var(--mc)); color: #8A8A8F; transition: color 0.45s cubic-bezier(0.76, 0, 0.24, 1); }
.off-word::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: #F3F1EC; transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1); }
.off-item:hover .off-word { color: #F3F1EC; }
.off-item:hover .off-word::after { transform: scaleX(1); }

.off__caption { order: 4; position: relative; z-index: 5; margin-top: 57px; font-size: 10px; color: #8A8A8F; animation-delay: 0.36s; }

@media (min-width: 1024px) {
  .off { display: block; min-height: calc(860 * var(--s)); padding: 0 0 45px; }
  .off__label { position: absolute; right: var(--gut); top: calc(56 * var(--s)); font-size: 11px; }

  .off__main { display: block; position: relative; z-index: 5; margin-left: calc(var(--gut) + 636 * var(--s)); padding-top: calc(130 * var(--s)); width: calc(676 * var(--s)); }
  .off__title { margin: 0; width: calc(660 * var(--s)); font-size: calc(56 * var(--s)); }

  .off__items { display: grid; grid-template-columns: calc(354 * var(--s)) minmax(0, 1fr); row-gap: calc(30 * var(--s)); align-items: start; margin-top: calc(60 * var(--s)); }
  .off-item { rotate: var(--r); margin: 0; }
  .off-item--art    { width: calc(316 * var(--s)); }
  .off-item--music  { width: calc(296 * var(--s)); margin-top: calc(54 * var(--s)); }
  .off-item--dance  { width: calc(300 * var(--s)); }
  .off-item--nature { width: calc(300 * var(--s)); margin: calc(38 * var(--s)) 0 0 calc(-4 * var(--s)); }
  .off-item p { margin-top: 24px; font-size: 17px; }
  .off-word { font-size: calc(44 * var(--s)); }
  .off-word::after { bottom: -10px; }
  .off__caption { margin-top: calc(127 * var(--s)); font-size: 11px; }

  /* the dancer, its tag and the base rule sit on the section's bottom-left */
  .off__stage { position: absolute; inset: 0; padding: 0; pointer-events: none; }
  .off__tag { left: calc(var(--gut) + 51 * var(--s)); top: calc(168 * var(--s)); width: calc(430 * var(--s)); height: calc(64 * var(--s)); }
  .off__tag span { font-size: calc(56 * var(--s)); }
  .off__figure { position: absolute; left: var(--gut); bottom: 24px; width: calc(576 * var(--s)); height: calc(457 * var(--s)); aspect-ratio: auto; }
  .off__hlines { background-image: repeating-linear-gradient(to bottom, rgba(243,241,236,0.12) 0 1px, rgba(0,0,0,0) 1px calc(100% / 8)); }
  .off__rule { position: absolute; left: var(--gut); right: var(--gut); bottom: 23px; width: auto; }
}

/* ==========================================================================
   06 CONTACT — ink band
   ========================================================================== */
.contact { position: relative; z-index: 2; background: #0E0E10; overflow: hidden; min-height: 720px; padding: 0 20px 11px; --bandline: rgba(243,241,236,0.07); }
.contact > :not(.bandgrid) { position: relative; z-index: 3; }

/* marquee — same speed as drawn (22s per 586px mobile, 26s per 1287px
   desktop); halves are longer so the loop never runs out of text */
.marquee { margin: 0 -20px; height: 57px; border-bottom: 1px solid rgba(243,241,236,0.24); overflow: hidden; display: flex; align-items: center; }
.marquee-track { display: flex; width: max-content; animation-duration: 44s; }
.marquee-track .mono { font-size: 11px; color: #B9B7BD; white-space: nowrap; }

.contact__labels { margin-top: 39px; display: flex; justify-content: space-between; }
.contact__labels .mono { font-size: 10px; color: #8A8A8F; }

.contact__cta { display: block; margin-top: 41px; width: calc(350 * var(--m)); max-width: 100%; color: #F3F1EC; }
.contact__cta .disp { font-size: calc(62 * var(--mc)); }
.contact__cta .serif { font-size: calc(64 * var(--mc)); line-height: 0.95; }
.contact__cta .c2 > span { animation-delay: 0.06s; }
.contact__cta .c3 > span { animation-delay: 0.12s; }
/* the serif "g" hangs below the tight mobile line box: drop the signal rule clear of it */
@media (max-width: 1023.98px) { .contact__cta.sigul::after { bottom: calc(-24 * var(--mc)); } }

.contact__info { margin-top: 98px; width: calc(350 * var(--m)); max-width: 100%; padding-top: 15px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.contact__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(243,241,236,0.24); }
.contact__rule--foot { background: rgba(243,241,236,0.16); }
.contact__email { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #F3F1EC; letter-spacing: 0.02em; text-transform: none; animation-delay: 0.06s; }
.contact__notes { display: flex; flex-direction: column; gap: 10px; animation-delay: 0.12s; }
.contact__notes .mono { font-size: 10px; color: #8A8A8F; }
.contact__social { display: flex; flex-wrap: wrap; gap: 0 24px; animation-delay: 0.09s; }
.contact__social a { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; color: #F3F1EC; }

.contact__foot { margin-top: 75px; width: calc(350 * var(--m)); max-width: 100%; padding-top: 19px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.contact__foot .mono { font-size: 10px; color: #8A8A8F; }
.contact__foot > :nth-child(3) { animation-delay: 0.06s; }
.contact__foot > :nth-child(4) { animation-delay: 0.12s; }
.contact__top { display: inline-flex; align-items: center; min-height: 44px; }
.contact__foot .contact__top { color: #F3F1EC; }

@media (min-width: 1024px) {
  .contact { min-height: calc(880 * var(--s)); padding: 0 var(--gut) calc(48 * var(--s)); }
  .marquee { margin: 0 calc(-1 * var(--gut)); height: 73px; }
  .marquee-track { animation-duration: 52s; }
  .marquee-track .mono { font-size: 12px; }

  .contact__labels { margin-top: calc(55 * var(--s)); }
  .contact__labels .mono { font-size: 11px; }

  .contact__cta { margin-top: calc(157 * var(--s)); width: auto; }
  .contact__cta .disp { font-size: calc(128 * var(--s)); }
  .contact__cta .serif { font-size: calc(132 * var(--s)); line-height: inherit; }

  .contact__info { margin-top: calc(89 * var(--s)); width: auto; padding-top: 29px; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 48px; }
  .contact__email { display: inline-block; min-height: 0; font-size: 20px; letter-spacing: 0.04em; }
  .contact__notes { flex-direction: row; gap: 40px; }
  .contact__notes .mono { font-size: 11px; }
  .contact__social { gap: 32px; }
  .contact__social a { display: inline-block; min-height: 0; font-size: 11px; }

  .contact__foot { margin-top: calc(176 * var(--s)); width: auto; padding-top: 25px; flex-direction: row; justify-content: space-between; align-items: center; gap: 0; }
  .contact__foot .mono { font-size: 11px; }
  .contact__top { display: inline-block; min-height: 0; }
}

/* ==========================================================================
   FILM GRAIN
   ========================================================================== */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.05; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,0.9) 0.6px, rgba(0,0,0,0) 0.6px), radial-gradient(rgba(0,0,0,0.9) 0.6px, rgba(0,0,0,0) 0.6px);
  background-size: 3px 3px, 3px 3px; background-position: 0 0, 1.5px 1.5px;
}
/* desktop: a regular dot grid shimmers against content scrolling under it, so use
   random grain instead (same 5% overlay). Phones keep the dot grid as drawn. */
@media (min-width: 1024px) {
  .grain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px; background-position: 0 0;
  }
}

/* ==========================================================================
   CUSTOM CURSOR — fine pointers only (main.js adds .has-cursor)
   ========================================================================== */
.has-cursor, .has-cursor * { cursor: none !important; }
.cur { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 120; opacity: 0; mix-blend-mode: difference; transition: opacity 0.25s ease; display: none; }
.has-cursor .cur { display: block; }
.cur-in { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; }
.cur-dot-in { width: 6px; height: 6px; background: #F3F1EC; }
#cur-ring-in { width: 40px; height: 40px; border: 1px solid #F3F1EC; transition: width 0.35s cubic-bezier(0.76, 0, 0.24, 1), height 0.35s cubic-bezier(0.76, 0, 0.24, 1); display: flex; align-items: center; justify-content: center; }
body:has(a:hover) #cur-ring-in { width: 76px; height: 76px; }
#cur-label { opacity: 0; color: #F3F1EC; font-size: 11px; transition: opacity 0.3s ease; }
body:has(.proj:hover) #cur-label { opacity: 1; }