/* ==========================================================================
   Ahmed Talaohu — portfolio
   Layout: huyml (page stack home, centred case study) · Tiempos titles, Helvetica text
   Tokens are overwritten at runtime from content.json → theme
   ========================================================================== */
:root {
  --bg: #f2f2f2;
  --fg: #0e0e0e;
  --muted: #8b8b8b;
  --line: #c9c9c9;
  --accent: #e2462f;
  --panel: #0e0e0e;
  --panel-fg: #f2f2f2;
  --p-accent: var(--accent); /* per-project accent, set by JS */

  --f-display: 'Sprat', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Tiempos Fine', Georgia, 'Times New Roman', serif;
  --tw: 120; /* Sprat Medium */
  --f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-label: var(--f-sans);

  --gutter: clamp(16px, 1.7vw, 28px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 13px/1.35 var(--f-sans);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-home { overflow: hidden; overscroll-behavior: none; }
body.is-loading .view, body.is-loading .hud { opacity: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
[hidden] { display: none !important; }

.t-label {
  font-family: var(--f-label);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--muted);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-display {
  font-family: var(--f-display);
  font-weight: var(--tw);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

/* --------------------------------------------------------------------------
   HEADER — burger left, logo centred, one link right. Difference blend keeps it
   readable over images and the stack.
   -------------------------------------------------------------------------- */
.hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gutter) 0;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: transform .7s var(--ease-out);
}
.hud.is-away { transform: translateY(-140%); }
.hud > * { pointer-events: auto; }
.hud__burger { justify-self: start; position: relative; width: 28px; height: 20px; margin-left: -2px; }
.hud__burger i {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 1.5px;
  background: currentColor;
  transition: transform .6s var(--ease-out), top .6s var(--ease-out);
}
.hud__burger i:nth-of-type(1) { top: 6px; }
.hud__burger i:nth-of-type(2) { top: 13px; }
.menu-open .hud__burger i:nth-of-type(1) { top: 9.5px; transform: rotate(45deg); }
.menu-open .hud__burger i:nth-of-type(2) { top: 9.5px; transform: rotate(-45deg); }
.hud__logo { justify-self: center; width: clamp(82px, 6.6vw, 108px); }
.hud__logo svg { width: 100%; height: auto; display: block; }
.hud__right { justify-self: end; font-size: 13px; line-height: 1; }
.hud__right > * { display: inline-flex; align-items: center; gap: 8px; }
.hud__close { display: none !important; }
.hud__close i { position: relative; width: 11px; height: 11px; }
.hud__close i::before, .hud__close i::after { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1.2px; background: currentColor; transform: rotate(45deg); }
.hud__close i::after { transform: rotate(-45deg); }
body[data-route="case"] .hud__close { display: inline-flex !important; }
body[data-route="case"] .hud__contact { display: none; }
.menu-open .hud__right { opacity: 0; pointer-events: none; }
.hud__time { font-variant-numeric: tabular-nums; }
.copy { position: relative; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.copy em { position: absolute; left: 0; top: 100%; font-style: normal; opacity: 0; transform: translateY(4px); transition: .3s; color: var(--muted); }
.copy.is-copied em { opacity: 1; transform: none; }

/* Menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(env(safe-area-inset-top, 0px) + 90px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 22px);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  backdrop-filter: blur(28px) saturate(1.1);
}
.menu__links { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; justify-items: center; gap: 0.4vh; }
.menu__links a, .menu__links button { display: inline-flex; align-items: flex-start; gap: 12px; color: var(--fg); }
.menu__no { font: 400 12px/1 var(--f-sans); margin-top: 1.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu__word { display: block; font: 120 clamp(45px, 7.6vw, 120px)/0.92 var(--f-display); text-transform: uppercase; letter-spacing: -0.03em; transition: opacity .3s; }
.menu__links a:hover .menu__word, .menu__links button:hover .menu__word { opacity: .45; }
.menu__links li { overflow: hidden; padding-bottom: .04em; }
.menu__links a.is-current .menu__word { text-decoration: underline; text-decoration-thickness: 0.045em; text-underline-offset: 0.08em; }
.menu__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: end; font-size: 13px; }
.menu__foot > div { display: grid; gap: 6px; justify-items: start; }
.menu__foot > div:nth-child(2) { justify-items: center; text-align: center; }
.menu__foot > div:nth-child(3) { justify-items: end; text-align: right; display: flex; gap: 16px; justify-content: flex-end; }
.menu__social a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   HOME — page stack (huyml): counter top left, title centred under the page
   -------------------------------------------------------------------------- */
.home { position: fixed; inset: 0; overflow: hidden; --sb: 0; }
.home__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.home__gl { position: absolute; inset: 0; z-index: 1; }

/* the big index number, shared by home and case study */
.counter {
  position: absolute;
  left: var(--gutter);
  top: calc(env(safe-area-inset-top, 0px) + 72px);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 0.06em;
  font-size: clamp(76px, 10.4vw, 172px);
  pointer-events: none;
}
.digits { display: flex; font: 500 1em/0.8 var(--f-sans); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
/* the clip window reaches 0.1em past the line top and bottom and 0.08em past each side (pulled back with
   negative margins), so neither the round bottoms nor the right edge squeezed by the tight letter-spacing
   get shaved, while the number sits exactly where it did */
.digit { display: block; height: 1em; margin: -0.1em -0.08em; padding: 0 0.08em; overflow: hidden; }
.digit__col { display: block; will-change: transform; }
.digit__col span { display: block; height: 1em; line-height: 1; }
.counter__total { font: 400 clamp(13px, 1.05vw, 17px)/1 var(--f-sans); margin-top: 0.12em; letter-spacing: 0; }
.home__counter .digits, .home__counter .counter__total { filter: blur(calc(var(--sb) * 1px)); }

.rule { display: block; width: 14px; height: 1px; background: currentColor; }

.home__caption {
  position: absolute;
  left: var(--fx, 50vw);
  top: calc(var(--fy, 62vh) + clamp(18px, 3.2vh, 34px));
  z-index: 3;
  width: min(620px, calc(100vw - var(--gutter) * 2));
  transform: translateX(-50%);
  text-align: center;
}
.home__cap {
  --cb: 0;
  display: grid;
  justify-items: center;
  gap: 11px;
  filter: blur(calc((var(--sb) + var(--cb)) * 1px));
}
.home__title {
  font: 120 clamp(27px, 3.2vw, 53px)/0.9 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.home__desc { margin: 0; max-width: 40ch; font-size: 13px; line-height: 1.42; text-wrap: balance; }

.home__label { position: absolute; left: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); z-index: 4; }
.home__about {
  position: absolute;
  right: var(--gutter);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home__about i { font-style: normal; display: inline-block; transition: transform .5s var(--ease-out); }
.home__about:hover i { transform: translate(3px, -3px); }

/* what he does: a quiet list under the counter, always there */
.home__does {
  position: absolute;
  left: var(--gutter);
  top: calc(env(safe-area-inset-top, 0px) + 72px + clamp(76px, 10.4vw, 172px) * 0.8 + clamp(44px, 4.6vh, 64px));
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2em;
  font: 500 clamp(15px, 1.2vw, 20px)/1.12 'Host Grotesk', var(--f-sans);
  letter-spacing: -0.012em;
  color: var(--fg);
  pointer-events: none;
}
.home__does li { display: flex; align-items: baseline; gap: 0.75em; }
.home__does li i { font: 400 10px/1 'Host Grotesk', var(--f-sans); font-style: normal; letter-spacing: 0.02em; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.5em; }

/* the type on the work page inverts over the pages, like the logo in the header: it blends
   (difference) against the stack, whose canvas carries the page colour */
.home__counter, .home__caption, .home__label, .home__about, .home__does, .home__hint { mix-blend-mode: difference; color: var(--fg-x, #e4e4e4); }
.home__label, .home__cat, .hint__part, .home__does li i { color: var(--muted-x, #676767); }
.hint__ico { color: inherit; }
.hint__rule { background: var(--muted-x, #676767); opacity: 1; }

/* autoplay: a hairline under the counter fills while the stack waits */
.home__timer {
  position: absolute;
  left: 0.03em;
  right: 0;
  top: calc(100% + 14px);
  height: 1px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.home__timer i { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* how to move around: shown once, briefly */
.home__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 17px);
  z-index: 4;
  width: max-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 11px;
  line-height: 1;
  color: var(--fg);
  pointer-events: none;
  white-space: nowrap;
}
.hint__part { color: var(--muted); }
.hint__rule { display: block; width: 18px; height: 1px; background: var(--muted); opacity: .6; }
.hint__ico { display: block; flex: none; color: var(--fg); overflow: visible; }
.hint__wheel, .hint__tip { transform-box: fill-box; transform-origin: 50% 50%; }
.home__hint.is-on .hint__wheel { animation: hint-wheel 1.9s cubic-bezier(.55, 0, .35, 1) infinite; }
.home__hint.is-on .hint__tip { animation: hint-swipe 2s cubic-bezier(.55, 0, .3, 1) infinite; }
.hint__track { opacity: .22; }
.hint__tip { fill: currentColor; fill-opacity: .12; }
@keyframes hint-wheel {
  0% { transform: translateY(-1px); opacity: 0; }
  14% { opacity: 1; }
  58% { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(6px); opacity: 0; }
}
@keyframes hint-swipe {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  14% { transform: translateY(0) scale(1); opacity: 1; }
  62% { transform: translateY(-13px) scale(1); opacity: 1; }
  80%, 100% { transform: translateY(-15px) scale(.8); opacity: 0; }
}

/* --------------------------------------------------------------------------
   INTRO — "Ahmed, unwrapped."
   -------------------------------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  background: var(--intro-bg, #111);
  color: #fff;
  touch-action: none;
}
.intro__media { position: absolute; inset: 0; }
/* the still and the video are one picture in one stage: it sinks back as the film tears, eases away while he holds the pose */
.intro__stage { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.intro__still, .intro__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 30%); }
.intro__video { opacity: 0; }
.intro__video.is-on { opacity: 1; }
.intro.is-contain .intro__still, .intro.is-contain .intro__video { top: 6vh; height: 94vh; object-fit: contain; object-position: 50% 100%; }
/* on the way out the picture's edges melt away (bottom most, where the frame cuts through him) */
.intro__stage.is-melting {
  --edge-x: linear-gradient(to right, transparent, #000 var(--ms, 0%), #000 calc(100% - var(--ms, 0%)), transparent);
  --edge-y: linear-gradient(to bottom, transparent, #000 var(--mt, 0%), #000 calc(100% - var(--mb, 0%)), transparent);
  -webkit-mask-image: var(--edge-x), var(--edge-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--edge-x), var(--edge-y);
  mask-composite: intersect;
}
.intro__frost {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--frost, 26px)) saturate(1.15) brightness(1.06);
  backdrop-filter: blur(var(--frost, 26px)) saturate(1.15) brightness(1.06);
  background:
    radial-gradient(120% 60% at 18% 12%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(90% 70% at 85% 90%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(115deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, rgba(255,255,255,.18));
  will-change: clip-path;
}
.intro__frost::after {
  content: '';
  position: absolute;
  inset: -50%;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.intro__edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.intro__edge polygon { fill: none; stroke-linejoin: round; }
.intro__edge-glow { stroke: rgba(255,255,255,.28); stroke-width: 14; filter: blur(6px); }
.intro__edge-line { stroke: rgba(255,255,255,.9); stroke-width: 1.4; }
.intro { cursor: grab; user-select: none; -webkit-user-select: none; }
.intro img { -webkit-user-drag: none; }
.intro.is-dragging { cursor: grabbing; }
.intro.is-free { cursor: default; }

/* the logo: grows with the peel, then settles into the header */
.intro__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(108px, 10.5vw, 164px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}
.intro__logo-in { color: #fff; transition: color .6s var(--ease-out); will-change: transform; }
.intro__logo-in svg { display: block; width: 100%; height: auto; }

/* "Unwrap me" */
.intro__cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5vh);
  display: grid;
  justify-items: center;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
  color: #fff;
  transition: color .6s var(--ease-out);
}
.intro__how { color: inherit; opacity: .7; }
.intro__unwrap {
  pointer-events: auto;
  cursor: pointer;
  font: 700 clamp(26px, 2vw, 33px)/1 'Host Grotesk', var(--f-sans);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: inherit;
}
.intro.is-light .intro__logo-in, .intro.is-light .intro__cta, .intro.is-light .intro__sound, .intro.is-pale .intro__sound { color: var(--fg); }
/* sound on / off, top right, as quiet as the rest of the copy */
.intro__sound {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  right: var(--gutter);
  z-index: 4;
  padding: 8px 0 8px 12px;
  border: 0;
  background: none;
  color: #fff;
  opacity: .72;
  cursor: pointer;
  transition: color .6s var(--ease-out), opacity .3s;
}
.intro__sound:hover { opacity: 1; }


/* --------------------------------------------------------------------------
   PAGE TRANSITIONS — the outgoing page waits in .leave; .morph carries the image
   -------------------------------------------------------------------------- */
.leave { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.leave.is-opaque { background: var(--bg); }
.leave__inner { position: absolute; left: 0; right: 0; min-height: 100%; }
.morph { position: fixed; left: 0; top: 0; z-index: 44; transform-origin: 0 0; pointer-events: none; will-change: transform; backface-visibility: hidden; }
.morph__clip { position: absolute; overflow: hidden; background: #e6e6e6; }
.morph__clip img, .morph__clip video { position: absolute; left: 0; top: 0; max-width: none; display: block; object-fit: cover; will-change: transform; }
.intro__gl { position: absolute; inset: 0; pointer-events: none; }
.intro.has-gl .intro__frost, .intro.has-gl .intro__edge { display: none; }

/* --------------------------------------------------------------------------
   CASE STUDY — centred, image first, title under it, then the story
   -------------------------------------------------------------------------- */
.is-vblur [data-vblur] { filter: blur(calc(var(--vb, 0) * 1px)); }

.case { position: relative; padding: 0 var(--gutter); }
.case__hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(20px, 3.4vh, 34px);
  padding: clamp(110px, 16vh, 170px) 0 10vh;
  text-align: center;
}
.case__counter { left: 0; }
.case__cover { margin: 0; display: grid; place-items: center; }
.case__cover img, .case__cover video {
  width: auto;
  height: auto;
  max-width: min(60vw, 1000px);
  max-height: 56vh;
  background: #e6e6e6;
}
.case__blank { width: min(46vw, 640px); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 24px; border: 1px dashed var(--line); }
.case__head { display: grid; justify-items: center; gap: 11px; max-width: min(820px, 100%); }
.case__title {
  margin: 0;
  font: 120 clamp(35px, 4.64vw, 83px)/0.88 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.case__title .line { overflow: hidden; padding-bottom: .05em; }
.case__desc { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.45; text-wrap: balance; }

.case__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px var(--gutter);
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.case__facts div { display: grid; gap: 6px; align-content: start; }
.case__facts dt, .case__facts dd { margin: 0; }
.case__facts dd { font-size: 14px; line-height: 1.35; }
.case__facts a { text-decoration: underline; text-underline-offset: 3px; }
.case__headline {
  margin: 16vh auto 0;
  max-width: 24ch;
  text-align: center;
  font: 400 italic clamp(28px, 3.3vw, 54px)/1.06 var(--f-serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.case__flow { display: grid; justify-items: center; padding: 6vh 0 4vh; }
.case__figure { margin: 0; width: min(66vw, 1160px); padding: 9vh 0; }
.case__figure.is-tall { width: min(38vw, 620px); }
.case__figure img, .case__figure video { width: 100%; height: auto; background: #e6e6e6; }
.case__figure figcaption { margin-top: 10px; text-align: center; }
/* an image beside what inspired it: two equal frames, labelled, one caption */
.case__figure--pair { width: min(76vw, 1240px); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 26px); }
.pair__cell { display: grid; gap: 10px; align-content: start; }
.pair__tag { color: var(--muted); }
.pair__cell img, .pair__cell video { aspect-ratio: 4 / 5; object-fit: cover; }

.chapter { width: min(620px, 100%); padding: 10vh 0; display: grid; justify-items: center; gap: 14px; }
.chapter__body { width: 100%; margin-top: 8px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; }
.chapter__body p { margin: 0 0 1em; }
.chapter__body p:last-child { margin-bottom: 0; }
.chapter--credits { width: min(760px, 100%); }

/* Gallery mode: the intro, then every image */
.case__gallery { display: grid; justify-items: center; padding: 2vh 0 6vh; }
.chapter--lead { padding: 8vh 0 9vh; }
/* one column: each image on its own, as large as the screen allows (tall ones are held to the viewport) */
.grid { width: min(78vw, 1240px); display: grid; justify-items: center; gap: clamp(36px, 5vw, 88px); }
.grid__item { margin: 0; width: 100%; display: grid; justify-items: center; }
.grid__item img, .grid__item video { display: block; width: auto; max-width: 100%; height: auto; max-height: 88vh; background: #e6e6e6; }
.grid__item figcaption { margin-top: 12px; text-align: center; }

/* Read / Gallery switch */
.case__modes {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  z-index: 25;
  width: max-content;
  margin: 0 auto;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 9%, transparent), 0 12px 30px -14px rgba(0, 0, 0, .28);
  font: 500 12px/1 'Host Grotesk', var(--f-sans);
  letter-spacing: 0.01em;
}
.case__modes button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px 9px 13px; border-radius: 999px; color: var(--muted); transition: color .45s var(--ease-out); }
.case__modes button:hover { color: var(--fg); }
.case__modes button[aria-selected="true"] { color: var(--bg); }
.case__modes svg { display: block; flex: none; }
.case__modes-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: var(--fg); z-index: 0; }
.credits { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin: 8px 0 0; }
.credits div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.credits dt { margin: 0; }
.credits dd { margin: 0; text-align: right; font-size: 14px; }
.chapter--quote { width: min(900px, 100%); }
.quote { margin: 8px 0 0; text-align: center; font: 400 italic clamp(26px, 2.8vw, 46px)/1.1 var(--f-serif); letter-spacing: -0.01em; text-wrap: balance; }

/* the end of every case: a line and a WhatsApp button */
.cta {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: 18vh var(--gutter) 16vh;
  text-align: center;
  border-top: 1px solid var(--line);
}
.cta__status { display: inline-flex; align-items: center; gap: 9px; }
.cta__status i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #23a55a; }
.cta__status i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #23a55a; opacity: 0; animation: cta-ping 2.6s var(--ease-out) infinite; }
@keyframes cta-ping { 0% { transform: scale(.4); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.cta__title { margin: 0; max-width: 13ch; font: 120 clamp(40px, 6.08vw, 112px)/0.86 var(--f-display); text-transform: uppercase; letter-spacing: -0.03em; text-wrap: balance; }
.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  padding: 6px 6px 6px 28px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font: 500 16px/1 'Host Grotesk', var(--f-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.cta__btn-text, .cta__btn-icon { display: grid; overflow: hidden; }
.cta__btn-text { height: 1.2em; line-height: 1.2; }
.cta__btn-text > span, .cta__btn-icon > span { grid-area: 1 / 1; transition: transform .7s var(--ease-out); }
.cta__btn-text > span + span { transform: translateY(105%); }
.cta__btn-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); color: var(--fg); place-items: center; }
.cta__btn-icon > span { display: grid; place-items: center; }
.cta__btn-icon > span + span { transform: translate(-30px, 30px); }
.cta__btn:hover { transform: scale(1.03); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); }
.cta__btn:hover .cta__btn-text > span:first-child { transform: translateY(-105%); }
.cta__btn:hover .cta__btn-text > span + span { transform: translateY(0); }
.cta__btn:hover .cta__btn-icon > span:first-child { transform: translate(30px, -30px); }
.cta__btn:hover .cta__btn-icon > span + span { transform: translate(0, 0); }
.cta__btn:active { transform: scale(.98); transition-duration: .2s; }
.cta__btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.cta__note { opacity: .75; }

.next {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 14vh 0 16vh;
  text-align: center;
  border-top: 1px solid var(--line);
}
.next__img { width: min(24vw, 360px); height: auto; margin: 10px 0 6px; transition: transform 1s var(--ease-out), filter .6s; }
.next__title { font: 120 clamp(38px, 6.08vw, 112px)/0.86 var(--f-display); text-transform: uppercase; letter-spacing: -0.03em; text-wrap: balance; }
.next:hover .next__img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   ABOUT — huyml about layout + the film
   -------------------------------------------------------------------------- */
.ab { padding: 0 var(--gutter); }
.ab__top { position: relative; height: 100vh; min-height: 680px; }
.ab__facts {
  position: absolute;
  left: 44vw;
  top: 12vh;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--accent);
  font: 120 clamp(18px, 1.75vw, 30px)/1.02 var(--f-display);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  z-index: 3;
}
.ab__facts li { overflow: hidden; }
.ab__year { position: absolute; left: 0; right: 0; top: 24vh; height: 34vh; }
.ab__num {
  position: absolute;
  top: 0;
  overflow: hidden;
  color: #ffffff;
  font: 120 34vh/0.82 var(--f-display);
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
}
.ab__num > span { display: block; }
.ab__num--l { left: -0.5vw; }
.ab__num--r { left: 44vw; }
/* the film floats in the box the disc used to fill; its canvas covers the whole top so it can drift and be pushed around */
.ab__anchor {
  position: absolute;
  left: 18.5vw;
  top: 50%;
  width: min(25vw, 48vh);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  visibility: hidden;
}
.ab__film { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* a plain photo in that box instead of the film (dashboard: about.photo) */
.ab__anchor--photo { visibility: visible; margin: 0; overflow: hidden; z-index: 2; background: var(--line); }
.ab__anchor--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* no numbers (about.year left empty): the photo moves to the gutter, lines up with the facts and grows a little */
.ab__year--bare { top: 12vh; height: auto; }
.ab__year--bare .ab__anchor { left: 0; top: 0; width: min(30vw, 48vh); transform: none; }
.ab__and {
  position: absolute;
  left: 41.6vw;
  top: 46%;
  color: var(--accent);
  font: 120 clamp(14px, 1.2vw, 20px)/1 var(--f-display);
  text-transform: uppercase;
  z-index: 3;
}
.ab__cols { position: absolute; left: 0; top: 64vh; display: grid; grid-template-columns: repeat(3, 11.5vw); gap: 1vw; z-index: 3; }
.ab__col ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12px; line-height: 1.3; }
.ab__col .t-label { display: block; }
.ab__statement {
  position: absolute;
  left: 44vw;
  top: 64vh;
  width: 19vw;
  margin: 0;
  color: var(--accent);
  font: 120 clamp(18px, 1.75vw, 30px)/1.02 var(--f-display);
  text-transform: uppercase;
  text-wrap: balance;
  z-index: 3;
}
.ab__clients { position: absolute; left: 66vw; top: 64vh; width: 14vw; z-index: 3; }

.ab__approach {
  display: grid;
  grid-template-columns: 9.5vw minmax(0, 0.95fr) minmax(0, 1.6fr) minmax(0, 0.95fr);
  gap: var(--gutter);
  padding: 14vh 0 12vh;
  border-top: 1px solid var(--fg);
  align-items: start;
}
.ab__approach > .t-label { grid-column: 1; padding-top: .6em; }
.ab__code { font: 120 clamp(32px, 4vw, 69px)/0.85 var(--f-display); letter-spacing: -0.03em; color: var(--accent); }
.ab__approach .ab__code { grid-column: 2; }
.ab__approach-text { grid-column: 3; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; max-width: 60ch; }
.ab__approach-text p { margin: 0 0 1em; }
.ab__process { padding: 6vh 0 14vh; }
.ab__process-title { margin: 0 0 6vh; font: 120 clamp(45px, 8vw, 144px)/0.85 var(--f-display); text-transform: uppercase; letter-spacing: -0.03em; }
.ab__amp { font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: var(--accent); }
.ab__process ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.ab__process li {
  display: grid;
  grid-template-columns: 9.5vw minmax(0, 0.95fr) minmax(0, 1.6fr) minmax(0, 0.95fr);
  gap: var(--gutter);
  align-items: baseline;
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--line);
}
.ab__process li .ab__code { font-size: clamp(18px, 1.76vw, 29px); }
.ab__process h3 { grid-column: 2; margin: 0; font: 120 clamp(16px, 1.52vw, 26px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -0.015em; }
.ab__process li p { grid-column: 3; margin: 0; font-size: 15px; line-height: 1.5; max-width: 56ch; }
.ab__contact { display: grid; justify-items: center; gap: 18px; padding: 12vh 0 16vh; text-align: center; border-top: 1px solid var(--fg); }
.ab__mail { font: 120 clamp(34px, 6vw, 110px)/0.95 var(--f-display); letter-spacing: -0.005em; word-break: break-word; }
.ab__contact .row { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.ab__contact .row a { text-decoration: underline; text-underline-offset: 3px; }

.home__fallback { position: absolute; inset: 12vh 30vw 12vh 30vw; overflow: auto; display: grid; gap: 16px; }
.home__fallback img, .home__fallback video { width: 100%; height: auto; display: block; }

.foot { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 calc(env(safe-area-inset-bottom, 0px) + 18px); border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   CONTACT SHEET
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   LIGHTBOX — one image at a time, nothing else
   -------------------------------------------------------------------------- */
.case__cover img, .case__cover video, .case__figure img, .case__figure video, .grid__item img, .grid__item video { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 90; touch-action: none; overscroll-behavior: contain; }
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 95%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.1); backdrop-filter: blur(26px) saturate(1.1); }
.lb__zone { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; border: 0; background: none; }
.lb__zone--prev { left: 0; cursor: w-resize; }
.lb__zone--next { right: 0; cursor: e-resize; }
.lb__stage { position: absolute; inset: 0; pointer-events: none; }
.lb__media {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  object-fit: cover;
  background: #e6e6e6;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .4);
  will-change: transform;
}
@media (pointer: fine) {
  .lb__zone, .lb__media { cursor: none; }
}
.lb__bar { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 var(--gutter); pointer-events: none; }
.lb__bar > * { pointer-events: auto; }
.lb__bar--top { top: 0; height: calc(env(safe-area-inset-top, 0px) + 68px); padding-top: env(safe-area-inset-top, 0px); }
.lb__bar--bottom { bottom: 0; min-height: calc(env(safe-area-inset-bottom, 0px) + 80px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.lb__count { display: inline-flex; align-items: baseline; gap: 7px; }
.lb__now { font: 120 26px/1 var(--f-display); letter-spacing: -0.02em; }
.lb__of { font: 400 12px/1 var(--f-label); color: var(--muted); }
.lb__title { position: absolute; left: 50%; transform: translateX(-50%); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.lb__close, .lb__arrow { border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; transition: background .45s var(--ease-out), color .45s var(--ease-out), border-color .45s var(--ease-out); }
.lb__close { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 999px; font: 500 13px/1 'Host Grotesk', var(--f-sans); }
.lb__arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.lb__close:hover, .lb__arrow:hover, .lb__close:focus-visible, .lb__arrow:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); outline: none; }
.lb__cap { flex: 1; margin: 0; text-align: center; color: var(--muted); }
.lb.is-single .lb__zone, .lb.is-single .lb__arrow { visibility: hidden; }
.lb__cursor { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; visibility: hidden; }
.lb__cursor > span { display: block; transform: translate(-50%, -50%); padding: 9px 14px 8px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 500 12px/1 'Host Grotesk', var(--f-sans); white-space: nowrap; }
@media (pointer: coarse) {
  .lb__zone, .lb__cursor { display: none; }
}

.contact { position: fixed; inset: 0; z-index: 70; }
.contact__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; }
.contact__sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(520px, 100vw);
  background: var(--bg);
  padding: calc(env(safe-area-inset-top, 0px) + 22px) var(--gutter) 22px;
  display: grid;
  align-content: start;
  gap: 28px;
  overflow: auto;
}
.contact__close { justify-self: end; text-transform: uppercase; font-size: 13px; }
.contact__title { margin: 0; font: 120 clamp(35px, 4vw, 61px)/0.9 var(--f-display); text-transform: uppercase; letter-spacing: -0.03em; }
.contact__list { margin: 0; border-top: 1px solid var(--fg); }
.contact__list div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.contact__list dd { margin: 0; font-size: 18px; word-break: break-word; }
.contact__list a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body[data-route="home"] .hud__contact { display: none; }
  .intro__logo { width: clamp(104px, 28vw, 140px); }
  .menu__foot { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .menu__foot > div, .menu__foot > div:nth-child(2), .menu__foot > div:nth-child(3) { justify-items: start; text-align: left; justify-content: flex-start; }

  .counter { font-size: clamp(64px, 19vw, 110px); top: calc(env(safe-area-inset-top, 0px) + 64px); }
  .home__title { font-size: clamp(22px, 6.4vw, 35px); }
  .home__desc { font-size: 12.5px; }
  .home__hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 122px); }
  /* on a phone it sits above the bottom row, as one line that wraps */
  .home__does { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 50px); right: var(--gutter); display: flex; flex-wrap: wrap; gap: 0.32em 0; font-size: 14px; line-height: 1.2; max-width: 34ch; }
  .home__does li { gap: 0; }
  .home__does li i { display: none; }
  .home__does li:not(:last-child)::after { content: '/'; margin: 0 0.42em; color: var(--muted-x, #676767); font-weight: 400; }
  .home__timer { top: calc(100% + 10px); }

  .case__hero { padding-top: calc(env(safe-area-inset-top, 0px) + 168px); }
  .case__cover img, .case__cover video { max-width: 100%; max-height: 52vh; }
  .case__blank { width: 100%; }
  .case__figure, .case__figure.is-tall, .case__figure--pair { width: 100%; padding: 6vh 0; }
  .chapter { padding: 8vh 0; }
  .credits { grid-template-columns: minmax(0, 1fr); }
  .grid { width: 100%; gap: 28px; }
  .grid__item img, .grid__item video { max-height: none; width: 100%; }
  .chapter--lead { padding: 6vh 0 7vh; }
  .next__img { width: 56vw; }
  .cta { gap: 22px; padding: 13vh var(--gutter) 12vh; }
  .cta__btn { font-size: 15px; gap: 14px; padding-left: 24px; }
  .cta__btn-icon { width: 42px; height: 42px; }
  .lb__title { display: none; }
  .lb__arrow { width: 42px; height: 42px; }

  .ab__top { height: auto; min-height: 0; padding-top: 22vh; display: grid; gap: 28px; }
  .ab__facts, .ab__statement, .ab__clients, .ab__cols, .ab__and { position: static; width: auto; }
  .ab__year { position: relative; top: 0; height: 72vw; order: -1; }
  .ab__num { font-size: 40vw; }
  .ab__num--l { left: 0; }
  .ab__num--r { left: auto; right: 0; }
  .ab__anchor { left: 50%; width: 62vw; transform: translate(-50%, -50%); }
  /* on a phone the photo would hide both numbers: it sits under them instead */
  .ab__year--photo { height: auto; padding-top: 38vw; }
  .ab__year--photo .ab__anchor--photo { position: relative; left: auto; top: auto; width: 72vw; margin: 0 auto; transform: none; }
  .ab__year--bare { padding-top: 0; }
  .ab__year--bare .ab__anchor--photo { margin: 0; }
  .ab__and { display: none; }
  .ab__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ab__approach, .ab__process li { grid-template-columns: minmax(0, 1fr); }
  .ab__approach > *, .ab__process li > * { grid-column: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .intro__frost::after { animation: none; }
  .home__hint.is-on .hint__wheel, .home__hint.is-on .hint__tip { animation: none; }
}