:root {
  --bg: #050505;
  --fg: #ece8e1;
  --dim: rgba(236, 232, 225, .45);
  --accent: #b7a4ff;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --block: "Montserrat", "Futura", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; }
body { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
@media (hover: hover) { body, a { cursor: none; } 
}

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#views { position: fixed; inset: 0; }
.view { position: absolute; inset: 0; }

/* ---------- chrome ---------- */
.nav, .hud {
  position: fixed; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px; pointer-events: none;
  mix-blend-mode: difference;
  text-transform: uppercase;
}
.nav { top: 0; align-items: flex-start; }
.nav a, .hud a { pointer-events: auto; }
.brand { display: block; }
.brand img { display: block; width: clamp(78px, 7.5vw, 124px); height: auto; margin: -8px 0 0 -6px; filter: drop-shadow(0 0 10px rgba(0,0,0,.35)); }
.brand img ~ span { display: none; }
.brand span { font-family: var(--serif); font-size: 26px; text-transform: none; letter-spacing: 0; line-height: 1; }
.nav nav { display: flex; gap: 26px; }
.nav nav a { position: relative; padding: 4px 0; }
.nav nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--out);
}
.nav nav a:hover::after, .nav nav a.on::after { transform: scaleX(1); transform-origin: left; }
.hud { bottom: 0; color: var(--fg); mix-blend-mode: normal; }
.hud > span { mix-blend-mode: difference; }

.grain {
  position: fixed; inset: -50%; z-index: 30; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 9%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); }
}

/* ---------- cursor ---------- */
.cursor { position: fixed; inset: 0; z-index: 50; pointer-events: none; mix-blend-mode: difference; }
.cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff;
  display: grid; place-items: center;
  transition: width .5s var(--out), height .5s var(--out), margin .5s var(--out), background .4s;
}
.cursor-ring span { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: #000; opacity: 0; transition: opacity .3s; }
.cursor.label .cursor-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: #fff; }
.cursor.label .cursor-ring span { opacity: 1; }
.cursor.label .cursor-dot { opacity: 0; }
@media (hover: none) { .cursor { display: none; } 
}

/* ---------- curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 40; display: flex; pointer-events: none; }
.curtain i {
  flex: 1; background: #0b0b0b; border-right: 1px solid rgba(255,255,255,.04);
  transform: scaleY(0); transform-origin: bottom;
}
.curtain.cover i { transform: scaleY(1); transition: transform .75s var(--ease) calc(var(--i) * 55ms); }
.curtain.reveal i { transform: scaleY(0); transform-origin: top; transition: transform .85s var(--ease) calc(var(--i) * 55ms); }
.curtain-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(48px, 9vw, 150px); letter-spacing: -.02em;
  opacity: 0; transition: opacity .4s;
}
.curtain.cover .curtain-label { opacity: 1; transition-delay: .35s; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 45; background: var(--bg);
  display: grid; place-items: center; transition: opacity 1s var(--ease), visibility 1s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-name { font-family: var(--serif); font-size: clamp(56px, 11vw, 190px); line-height: .9; text-align: center; letter-spacing: -.03em; }
.loader-name span, .loader-name em { display: block; animation: rise 1.4s var(--out) both; }
.loader-name em { animation-delay: .12s; padding-left: .8em; }
.loader-count { position: absolute; right: 28px; bottom: 22px; font-size: 13px; }
.loader-line { position: absolute; left: 28px; right: 120px; bottom: 28px; height: 1px; background: rgba(255,255,255,.12); }
.loader-line i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0); }

@keyframes rise { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* ---------- home ---------- */
.split-view .vlabel {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  writing-mode: vertical-lr; text-orientation: upright;
  font-family: var(--block); font-weight: 700; font-size: 5.3vh; line-height: 1.06; text-transform: uppercase;
  color: #fff; z-index: 2; white-space: nowrap;
}
.split-view .vlabel span { display: inline-block; animation: rise 1.2s var(--out) both; animation-delay: calc(.6s + var(--i) * 45ms); }
.split-view .vlabel.hot span { animation: wave .9s var(--out) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes wave {
  0% { transform: none; }
  35% { transform: translateX(calc((var(--i) - 5) * 1.6px)) scale(1.18); font-style: italic; opacity: .5; }
  100% { transform: none; }
}
.home-meta {
  position: absolute; left: 28px; bottom: 30px; z-index: 2;
  font-family: var(--serif); font-size: clamp(24px, 2.5vw, 40px); line-height: 1; text-transform: none; letter-spacing: -.015em;
  mix-blend-mode: difference;
}
.home-meta span { display: block; overflow: hidden; }
.home-meta span i { display: block; font-style: normal; animation: rise 1.3s var(--out) both; }
.home-meta span:nth-child(2) i { animation-delay: .1s; font-style: italic; padding-left: 1.3em; }
.home-meta span:nth-child(3) i { animation-delay: .2s; padding-left: 2.6em; }
/* staircase: each line steps right, the last one closes with a hairline */
.home-meta span:nth-child(3) i::after { content: ""; display: inline-block; width: 1.6em; height: 1px; margin-left: .35em; vertical-align: .32em; background: currentColor; opacity: .6; }
.home-hint { position: absolute; right: 28px; bottom: 70px; z-index: 2; text-transform: uppercase; mix-blend-mode: difference; animation: blink 2.4s infinite; }

/* ---------- gallery ---------- */
.gallery { user-select: none; touch-action: none; }
.g-title {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; pointer-events: none; z-index: 3;
  font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 10.5vw, 190px); line-height: .88; letter-spacing: -.035em;
  mix-blend-mode: difference; padding: 0 6vw;
}
.g-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .08em; }
.g-title .w:nth-child(even) { font-style: italic; }
.g-title .l { display: inline-block; animation: rise .9s var(--out) both; animation-delay: calc(var(--i) * 22ms); }
.g-side {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%); z-index: 3;
  writing-mode: vertical-lr; text-orientation: upright; font-family: var(--block); font-size: 15px; line-height: 1.1; white-space: nowrap; text-transform: uppercase;
  mix-blend-mode: difference;
}
.g-count { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); z-index: 3; font-size: 13px; mix-blend-mode: difference; text-align: right; }
.g-count b { display: block; font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -.02em; }
.g-date { margin-top: 10px; opacity: .6; }
.g-tabs {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 6px; mix-blend-mode: difference; text-transform: uppercase;
}
.g-tabs a { padding: 7px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; transition: background .3s, color .3s; white-space: nowrap; }
.g-tabs a sup { font-size: 8px; margin-left: 3px; opacity: .6; }
.g-tabs a.on, .g-tabs a:hover { background: #fff; color: #000; }
.g-progress { position: absolute; left: 28px; right: 28px; bottom: 50px; height: 1px; background: rgba(255,255,255,.12); z-index: 3; }
.g-progress i { position: absolute; top: -1px; height: 3px; width: 40px; background: var(--fg); }

/* ---------- project ---------- */
.project { overflow: hidden; }
.p-track {
  position: absolute; left: 0; top: 0; height: 100%;
  display: flex; align-items: center; gap: 4vw; padding: 0 10vw 0 6vw;
  will-change: transform;
}
.p-intro { flex: 0 0 auto; width: min(48vw, 760px); display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.p-cat { text-transform: uppercase; color: var(--accent); }
.p-title { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 7.2vw, 150px); line-height: .86; letter-spacing: -.035em; }
.p-title .w { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-right: .18em; vertical-align: top; }
.p-title .w:nth-child(even) { font-style: italic; }
.p-title .w i { display: inline-block; font-style: inherit; animation: rise 1.2s var(--out) both; animation-delay: calc(.25s + var(--i) * 70ms); }
.p-text { max-width: 440px; font-size: 12px; line-height: 1.7; color: var(--dim); text-transform: none; }
.p-text p + p { margin-top: 2px; }
.p-text p:first-child { color: var(--fg); }
.p-kicker { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 30px); color: var(--accent); text-transform: none; letter-spacing: 0; animation: rise 1.2s var(--out) .6s both; }
.p-info { flex: 0 0 auto; width: min(32vw, 500px); align-self: center; max-height: 76vh; overflow-y: auto; padding: 0 2vw 0 0; font-family: var(--sans); text-transform: none; letter-spacing: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.p-story { font-size: 16px; line-height: 1.7; color: rgba(236, 232, 225, .88); margin-bottom: 1em; }
.p-info > .p-story:first-child { font-size: 19px; line-height: 1.55; color: var(--fg); }
.p-note { font-size: 14px; line-height: 1.6; color: rgba(236, 232, 225, .7); margin-bottom: .5em; }
.p-info > .p-note:first-child { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--fg); margin-bottom: .6em; }
.p-prod { margin-top: 26px; padding: 20px 22px; border: 1px solid rgba(183, 164, 255, .35); border-radius: 4px; background: rgba(183, 164, 255, .05); display: flex; flex-direction: column; gap: 12px; }
.p-prod h4 { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); display: flex; justify-content: space-between; }
.p-prod h4 span { color: var(--dim); }
.p-prod-role { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.p-prod .r-award { margin-top: 0; align-self: flex-start; font-family: var(--mono); font-size: 10px; }
.p-prod .r-tasks { padding: 0; font-size: 13px; }
.p-scroll { text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.p-scroll::after { content: ""; width: 70px; height: 1px; background: currentColor; animation: stretch 2s var(--ease) infinite; transform-origin: left; }
@keyframes stretch { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.p-item { position: relative; flex: 0 0 auto; height: 74vh; overflow: hidden; }
.p-item:nth-of-type(3n+2) { height: 62vh; align-self: flex-start; margin-top: 12vh; }
.p-item:nth-of-type(3n) { height: 66vh; align-self: flex-end; margin-bottom: 10vh; }
.p-item img { display: block; height: 100%; width: auto; opacity: 0; transition: opacity 1.2s; cursor: zoom-in; } /* shown whole: no parallax zoom, nothing cropped */
.p-item img.in { opacity: 1; }
.p-item figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 10px; mix-blend-mode: difference; }
.p-video { aspect-ratio: 16 / 9; height: 62vh !important; align-self: center !important; margin: 0 !important; background: #000; }
.p-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.p-next { flex: 0 0 auto; width: 70vw; height: 80vh; position: relative; display: flex; flex-direction: column; justify-content: center; padding-left: 4vw; }
.p-next span { text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.p-next h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(56px, 8vw, 150px); line-height: .9; letter-spacing: -.03em; position: relative; z-index: 2; mix-blend-mode: difference; transition: transform .8s var(--out); }
.p-next img { position: absolute; right: 6vw; top: 50%; height: 60vh; transform: translateY(-50%) rotate(3deg); filter: grayscale(1) brightness(.6); transition: filter .8s, transform .8s var(--out); }
.p-next:hover img { filter: none; transform: translateY(-50%) rotate(0) scale(1.04); }
.p-next:hover h2 { transform: translateX(3vw); }
.p-back { position: absolute; left: 28px; top: 50%; z-index: 5; text-transform: uppercase; writing-mode: vertical-lr; transform: translateY(-50%) rotate(180deg); mix-blend-mode: difference; }
.p-progress { position: absolute; left: 28px; right: 28px; bottom: 50px; height: 1px; background: rgba(255,255,255,.12); z-index: 3; }
.p-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--fg); transform-origin: left; transform: scaleX(0); }

/* ---------- about ---------- */
.about, .resume { overflow-y: auto; background: #0c0c0c; }
.a-inner { position: relative; padding: 22vh 8vw 18vh; max-width: 1500px; }
.a-kicker { text-transform: uppercase; color: var(--accent); margin-bottom: 30px; }
.a-big { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 112px); line-height: .95; letter-spacing: -.03em; max-width: 60vw; }
.a-big .line { display: block; overflow: hidden; padding-bottom: .06em; }
.a-big .line > span { display: block; animation: rise 1.3s var(--out) both; animation-delay: calc(.2s + var(--i) * 90ms); }
.a-big em { color: var(--accent); }
.a-portrait { position: absolute; top: 14vh; right: 8vw; width: min(26vw, 420px); aspect-ratio: 5 / 7; overflow: hidden; animation: reveal 1.6s var(--out) .3s both; }
.a-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); }
@keyframes reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.a-body { margin-top: 8vh; max-width: 700px; font-family: var(--sans); font-size: 17px; line-height: 1.7; color: rgba(236, 232, 225, .78); text-transform: none; letter-spacing: 0; }
.a-body p { animation: rise 1.4s var(--out) both; animation-delay: .8s; }
.a-body p + p { margin-top: 1.3em; }
.a-body .a-lead { font-size: 21px; line-height: 1.55; color: var(--fg); }
.a-body b { font-weight: 500; color: var(--accent); }
.a-cv { display: inline-flex; gap: 12px; align-items: center; margin-top: 40px; padding: 14px 22px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); transition: background .3s, color .3s; }
.a-cv span { transition: transform .4s var(--out); }
.a-cv:hover { background: var(--fg); color: #000; }
.a-cv:hover span { transform: translateX(5px); }

/* ---------- resume ---------- */
.r-inner { padding: 22vh 8vw 18vh; max-width: 1500px; }
.r-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6vw, 112px); line-height: .95; letter-spacing: -.03em; }
.r-h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.r-h1 .line > span { display: block; animation: rise 1.3s var(--out) both; animation-delay: calc(.2s + var(--i) * 90ms); }
.r-h1 em { color: var(--accent); }
.r-stats { margin-top: 7vh; border-top: 1px solid rgba(255,255,255,.15); }
.r-stats div { padding: 20px 20px 0 0; animation: rise 1.2s var(--out) .6s both; }
.r-stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 40px); letter-spacing: -.02em; text-transform: none; }
.r-stats span { color: var(--dim); text-transform: uppercase; }
.r-clients { margin-top: 6vh; font-family: var(--sans); font-size: 15px; line-height: 2; text-transform: none; letter-spacing: 0; color: var(--fg); }
.r-clients span { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.r-clients b { font-weight: 500; white-space: nowrap; }
.r-clients i { font-style: normal; color: var(--dim); margin: 0 .6em; }
.r-body { margin-top: 14vh; display: grid; grid-template-columns: 24vw minmax(0, 1fr); gap: 3vw; }
.r-side { position: sticky; top: 16vh; align-self: start; }
.r-big { font-family: var(--serif); font-size: clamp(60px, 7vw, 130px); line-height: .9; letter-spacing: -.03em; overflow: hidden; padding-bottom: .05em; }
.r-big span { display: block; animation: rise .8s var(--out) both; }
.r-years { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 6px; }
.r-years li { color: var(--dim); transition: color .3s, transform .4s var(--out); cursor: pointer; width: fit-content; }
.r-years li:hover { color: var(--fg); }
.r-years li.on { color: var(--accent); transform: translateX(10px); }
.r-list { min-width: 0; list-style: none; border-left: 1px solid rgba(255,255,255,.15); }
.r-item { position: relative; padding: 0 0 12vh 4vw; opacity: 0; transform: translateY(40px); transition: opacity 1s var(--out), transform 1.2s var(--out); }
.r-item.in { opacity: 1; transform: none; }
.r-item::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #0c0c0c; border: 1px solid var(--accent); }
.r-item.in::before { background: var(--accent); }
.r-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--dim); text-transform: uppercase; }
.r-meta .r-y { color: var(--accent); }
.r-role { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 60px); line-height: 1; letter-spacing: -.02em; }
.r-title { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 30px); color: var(--accent); text-transform: none; letter-spacing: 0; }
.r-award { margin-top: 12px; display: inline-block; padding: 6px 12px; border-radius: 99px; background: var(--accent); color: #000; text-transform: uppercase; }
.r-desc { margin-top: 18px; max-width: 680px; font-family: var(--sans); font-size: 16px; line-height: 1.7; color: rgba(236, 232, 225, .8); text-transform: none; letter-spacing: 0; }
.r-row { margin-top: 22px; display: grid; grid-template-columns: 90px 1fr; gap: 16px; max-width: 820px; }
.r-row h4 { font-weight: 400; color: var(--dim); text-transform: uppercase; padding-top: 6px; }
.r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r-chips span { padding: 5px 11px; border: 1px solid rgba(183, 164, 255, .45); border-radius: 99px; color: var(--fg); font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0; }
.r-tasks { font-family: var(--sans); font-size: 14px; line-height: 1.8; color: rgba(236, 232, 225, .75); text-transform: none; letter-spacing: 0; padding-top: 2px; }
.r-tasks i { font-style: normal; color: var(--accent); margin: 0 .55em; opacity: .7; }
.r-media { margin-top: 28px; display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.r-m { flex: none; position: relative; }
.r-m img { height: 240px; width: auto; display: block; transition: transform .6s var(--out), filter .4s; }
.r-m img:hover { transform: scale(.97); filter: brightness(1.1); }
.r-m figcaption { margin-top: 8px; max-width: 320px; color: var(--dim); text-transform: none; }
.r-v iframe { width: 427px; height: 240px; border: 0; display: block; background: #000; }
.r-link { display: inline-block; margin-top: 18px; color: var(--accent); text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.r-end { margin-top: 4vh; }
.r-lightbox { position: fixed; inset: 0; z-index: 40; background: rgba(5,5,5,.94); display: flex; align-items: center; justify-content: center; padding: 6vh 6vw; opacity: 0; pointer-events: none; transition: opacity .4s; }
.r-lightbox.on { opacity: 1; pointer-events: auto; }
.r-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

.a-mail { display: inline-block; margin-top: 12vh; font-family: var(--serif); font-style: italic; font-size: clamp(36px, 6vw, 110px); letter-spacing: -.03em; position: relative; }
.a-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: .05em; height: 2px; background: currentColor; transform: scaleX(.15); transform-origin: left; transition: transform .8s var(--out); }
.a-mail:hover::after { transform: scaleX(1); }
.a-foot { margin-top: 40px; display: flex; gap: 28px; text-transform: uppercase; }
.a-foot a:hover { color: var(--accent); }

body[data-view="home"] .nav nav { opacity: .85; }

.hub-back { position: absolute; left: 28px; bottom: 70px; z-index: 2; text-transform: uppercase; mix-blend-mode: difference; }
.hub-back:hover { color: var(--accent); }
.g-tabs a.up { border-color: transparent; opacity: .7; }
.g-tabs a.up:hover { opacity: 1; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  .nav { padding: 16px 18px; }
  .nav nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; max-width: 55vw; font-size: 10px; }
  .hud { padding: 14px 18px; font-size: 9px; }
  .split-view .vlabel { font-size: 3.6vh; }
  .home-meta, .home-hint { display: none; }
  .g-side { display: none; }
  .g-count { top: auto; bottom: 110px; right: 18px; }
  .g-count b { font-size: 38px; }
  .g-tabs { bottom: 58px; left: 18px; right: 18px; transform: none; overflow-x: auto; }
  .project { overflow-y: auto; }
  .p-track { position: relative; flex-direction: column; height: auto; padding: 22vh 18px 18vh; gap: 28px; align-items: stretch; transform: none !important; }
  .p-intro { width: 100%; }
  .p-info { width: 100%; max-height: none; overflow: visible; padding: 0; }
  .p-item, .p-item:nth-of-type(n) { height: auto; margin: 0; align-self: stretch; }
  .p-item img { width: 100%; height: auto; transform: none; }
  .p-video { height: auto !important; width: 100%; }
  .p-next { width: 100%; height: 60vh; padding: 0; }
  .p-next img { height: 40vh; right: 0; }
  .p-back, .p-progress { display: none; }
  .a-cols { grid-template-columns: 1fr; }
  .a-inner, .r-inner { padding: 16vh 18px 16vh; }
  .a-big { max-width: none; }
  .a-portrait { position: relative; top: auto; right: auto; width: 62vw; margin-bottom: 40px; }
  .a-body { font-size: 16px; } .a-body .a-lead { font-size: 18px; }
  .r-body { grid-template-columns: minmax(0, 1fr); margin-top: 8vh; }
  .r-side { display: none; }
  .r-item { padding-left: 22px; }
  .r-row { grid-template-columns: 1fr; gap: 8px; }
  .r-m img { height: 180px; } .r-v iframe { width: 320px; height: 180px; }
}

/* readable chrome over scrolling text pages */
body[data-view="about"] .hud, body[data-view="resume"] .hud { background: linear-gradient(rgba(12,12,12,0), #0c0c0c 70%); }
body[data-view="about"] .nav, body[data-view="resume"] .nav { background: linear-gradient(#0c0c0c 30%, rgba(12,12,12,0)); }

/* plain links for crawlers & screen readers (the galleries are WebGL) */
.seo-links { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lx { position: absolute; inset: 0; z-index: 2; }
.gallery .g-tabs { z-index: 6; }

/* index */
.lx-index { overflow-y: auto; padding: 150px 8vw 200px; }
.lx-index ol { list-style: none; margin: 0; padding: 0; }
.lx-index li { border-top: 1px solid rgba(255,255,255,.12); animation: rise .9s var(--out) both; animation-delay: calc(var(--i) * 35ms); }
.lx-index li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.lx-index a { display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline; gap: 24px; padding: 14px 0 10px; transition: opacity .4s, transform .6s var(--out); }
.lx-index .n { font-size: 12px; opacity: .5; }
.lx-index .t { font-family: var(--serif); font-size: clamp(36px, 5.4vw, 92px); line-height: .95; letter-spacing: -.02em; }
.lx-index .k { font-size: 12px; text-transform: uppercase; opacity: .55; text-align: right; }
.lx-index ol:hover li:not(.hot) a { opacity: .22; }
.lx-index li.hot a { transform: translateX(28px); }
.lx-index li.hot .t { font-style: italic; color: var(--accent); }
.lx-float { position: fixed; left: 0; top: 0; width: min(26vw, 380px); aspect-ratio: 4 / 5; pointer-events: none; z-index: 4; opacity: 0; filter: url(#lx-liquid); }
.lx-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
.lx-float img.on { opacity: 1; }
.lx-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
.lx-head span { font-family: var(--serif); font-size: clamp(48px, 8vw, 140px); line-height: .9; letter-spacing: -.03em; }
.lx-head b { font-weight: 400; font-size: 12px; text-transform: uppercase; opacity: .6; }
.lx-sheet-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 18px; }
.lx-sheet-in a { display: block; transform: translateY(30px); opacity: 0; transition: transform .8s var(--out), opacity .8s; transition-delay: calc(var(--i) * 18ms); }
.lx-sheet-in img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; filter: grayscale(.6); transition: filter .4s; }
.lx-sheet-in a:hover img { filter: none; }
.lx-sheet-in span { display: block; margin-top: 8px; font-size: 12px; }
.lx-sheet-in b { font-weight: 400; opacity: .5; margin-right: 6px; }


@media (max-width: 820px) {
  .lx-index { padding: 110px 18px 180px; }
  .lx-index a { grid-template-columns: 34px 1fr; }
  .lx-index .k { display: none; }
  .lx-float { display: none; }

}
.lx-index .k { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* shared: compact header */
.p-credits { list-style: none; margin: 0; padding: 0; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.55; color: rgba(236,232,225,.72); display: grid; gap: 4px; }
.p-story-fold { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.65; color: rgba(236,232,225,.85); max-width: 520px; }
.p-story-fold summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.p-story-fold summary::-webkit-details-marker { display: none; }
.p-story-fold summary::after { content: " +"; }
.p-story-fold[open] summary::after { content: " −"; }
.p-story-fold p { margin: 12px 0 0; }

/* film strip */
.project .p-intro { width: min(30vw, 470px); gap: 18px; padding-right: 1vw; }
.project .p-title { font-size: clamp(40px, 4.4vw, 84px); }
.project .p-kicker { font-size: clamp(16px, 1.3vw, 22px); }
.project .p-story-fold[open] { max-height: 34vh; overflow-y: auto; scrollbar-width: thin; }

@media (max-width: 820px) {
  .project .p-intro { width: 100%; }

}

/* the role line is for inner pages only; the intro keeps its own tagline */
body[data-view="home"] #role { display: none; }
.hub5 .vlabel { font-size: 4.4vh; }
@media (max-width: 820px) { .hub5 .vlabel { font-size: 3vh; } 
}

/* behind the project, film strip: same dark ground, a hairline marks the new chapter */
.p-bt { flex: 0 0 auto; align-self: center; width: min(78vw, 1180px); height: 74vh; display: flex; flex-direction: column; gap: 4vh; padding: 0 2vw 0 4vw; border-left: 1px solid rgba(255,255,255,.18); font-family: var(--sans); text-transform: none; letter-spacing: 0; white-space: normal; }
.p-bt-head span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.p-bt-head h3 { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(44px, 4.6vw, 84px); line-height: .9; letter-spacing: -.03em; }
.p-bt-head h3 em { font-style: normal; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--dim); vertical-align: top; margin-left: 10px; }
.p-bt-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 4vw; }
.p-bt-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.p-bt-role { font-family: var(--serif); font-size: 30px; line-height: 1.05; }
.p-bt-team { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; font-family: var(--mono); }
.p-bt-info .r-award { align-self: flex-start; margin: 0; font-family: var(--mono); font-size: 10px; }
.p-bt-tasks { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 22px; font-size: 13px; line-height: 1.5; color: rgba(236,232,225,.78); }
.p-bt-tasks li { break-inside: avoid; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.1); }
.p-bt-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 14px; min-height: 0; max-height: 100%; }
.p-bt-doc { all: unset; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.p-bt-doc img { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block; filter: grayscale(.4) brightness(.85); transition: filter .4s, transform .8s var(--out); }
.p-bt-doc:hover img { filter: none; transform: scale(1.03); }
.p-bt-doc i { flex: 1; min-height: 120px; display: grid; place-items: center; font-style: normal; font-size: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: background .3s; }
.p-bt-doc:hover i { background: rgba(255,255,255,.14); }
.p-bt-doc span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
/* vertical reader for decks and making-of videos */
.p-reader { position: fixed; inset: 0; z-index: 45; background: #0c0c0c; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .45s; font-family: var(--sans); text-transform: none; }
.p-reader.open { opacity: 1; pointer-events: auto; }
.p-reader header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 100px 28px 22px 6vw; background: linear-gradient(#0c0c0c 80%, rgba(12,12,12,0)); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.p-reader-x { all: unset; cursor: pointer; }
.p-reader-x:hover { color: var(--accent); }
.p-reader-in { width: min(1100px, 90vw); margin: 2vh auto 18vh; display: flex; flex-direction: column; gap: 7vh; }
.p-reader figure { margin: 0; }
.p-reader img { display: block; width: 100%; height: auto; }
.p-reader-vid { aspect-ratio: 16 / 9; background: #000; }
.p-reader-vid iframe { width: 100%; height: 100%; border: 0; display: block; }
.p-reader figcaption { margin-top: 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
@media (max-width: 820px) {
  .p-bt { width: 100%; height: auto; padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .p-bt-body { grid-template-columns: 1fr; }
  .p-bt-docs { grid-template-columns: 1fr 1fr; }
  .p-bt-doc img { aspect-ratio: 4 / 3; flex: none; }
  .p-reader header { padding: 20px 18px; }

}

/* contact sheet gallery (Fashion) */
.gallery[data-mode="contact"] { touch-action: auto; }
.lx-contact { overflow-y: auto; padding: 130px 4vw 190px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(100% - 190px), transparent calc(100% - 100px)); mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 calc(100% - 190px), transparent calc(100% - 100px)); }
.lx-contact .lx-head { margin-bottom: 4vh; }
.lx-contact .lx-sheet-in { grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 1fr)); gap: 30px 16px; }
.lx-contact .lx-sheet-in a { opacity: 1; transform: none; animation: rise .9s var(--out) both; animation-delay: calc(var(--i) * 25ms); }
@media (max-width: 820px) { .lx-contact { padding: 100px 14px 180px; } .lx-contact .lx-sheet-in { gap: 18px 10px; } 
}
.lx-contact .lx-sheet-in img { filter: none; }
/* mobile: the five photography bands are stacked rows with horizontal labels */
@media (max-width: 820px) {
  .hub5 .vlabel { writing-mode: horizontal-tb; font-size: 7.5vw; letter-spacing: .04em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
  .hub5 .home-hint { display: none; }
}
/* DOM layouts replace the ring's title, counter, side label and progress bar */
.gallery:not([data-mode="carousel"]) :is(.g-title, .g-count, .g-side, .g-progress) { display: none; }
.gallery[data-mode="index"] { touch-action: auto; }
.lx-index { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 130px, #000 calc(100% - 190px), transparent calc(100% - 100px)); mask-image: linear-gradient(to bottom, transparent 0, #000 130px, #000 calc(100% - 190px), transparent calc(100% - 100px)); }
.p-video figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 10px; }
/* Fashion contact sheet: no header, prints start right under the nav; hover = tilt, zoom and a light sweep */
.lx-contact { padding-top: 104px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 190px), transparent calc(100% - 100px)); mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 190px), transparent calc(100% - 100px)); }
.lx-contact .lx-sheet-in a { perspective: 900px; }
.lx-contact .f { position: relative; overflow: hidden; aspect-ratio: 4 / 5; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s var(--out), box-shadow .5s; }
.lx-contact .f img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform 1.1s var(--out), filter .6s, clip-path .9s var(--out); clip-path: inset(0); }
.lx-contact .sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; mix-blend-mode: screen; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), rgba(183,164,255,.12) 28%, transparent 55%); }
.lx-contact a:hover .f { box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.lx-contact a:hover .f img { transform: scale(1.09); clip-path: inset(3% 3% 3% 3% round 2px); }
.lx-contact a:hover .sweep { opacity: 1; }
.lx-contact .lx-sheet-in span { transition: transform .5s var(--out), color .4s; }
.lx-contact a:hover span { transform: translateX(8px); color: var(--accent); }
@media (max-width: 820px) { .lx-contact { padding-top: 92px; } }
/* decks keep their real proportions (landscape PDF pages), never cropped */
.p-bt-docs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: auto; align-content: start; align-items: start; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; padding-right: 6px; }
.p-bt-doc img { flex: none; height: auto; aspect-ratio: auto; object-fit: contain; }
.p-bt-doc i { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
@media (max-width: 820px) { .p-bt-doc img { aspect-ratio: auto; } .p-bt-docs { overflow: visible; } }
.p-bt-docs .p-bt-doc { min-height: auto; overflow: visible; } /* rows size to their content; the list scrolls instead of squeezing */
.toast { position: fixed; left: 50%; bottom: 84px; z-index: 60; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 99px; background: var(--fg); color: #0c0c0c; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: opacity .35s, transform .5s var(--out); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.project .p-intro-low { align-self: stretch; justify-content: flex-end; gap: 14px; padding-bottom: 14vh; }
.p-intro-vid { width: 100%; aspect-ratio: 16 / 9; margin-top: 10px; background: #000; }
.p-intro-vid iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 820px) { .project .p-intro-low { padding-bottom: 0; } }
/* behind the project: heading + notes on the left, every document visible on the right from the top (no inner scroll) */
.p-bt { display: grid; grid-template-columns: minmax(240px, 330px) auto; grid-template-rows: auto 1fr; column-gap: 4vw; row-gap: 4vh; width: auto; }
.p-bt-head { grid-column: 1; grid-row: 1; }
.p-bt-body { display: contents; }
.p-bt-info { grid-column: 1; grid-row: 2; }
.p-bt-docs { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: calc(var(--cols) * clamp(220px, 19vw, 380px) + (var(--cols) - 1) * 14px); grid-template-columns: repeat(var(--cols), 1fr); max-height: none; overflow: visible; padding-right: 0; }
@media (max-width: 820px) {
  .p-bt { display: flex; flex-direction: column; }
  .p-bt-docs { width: 100%; grid-template-columns: 1fr 1fr; }
}

/* full-screen photo viewer on the project strip */
.p-lb { position: fixed; inset: 0; z-index: 46; background: rgba(8,8,8,.97); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .4s; }
.p-lb.open { opacity: 1; pointer-events: auto; }
.p-lb img { max-width: calc(100vw - 180px); max-height: calc(100vh - 210px); object-fit: contain; display: block; transition: opacity .3s; }
.p-lb button { all: unset; cursor: pointer; position: absolute; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.p-lb .lb-x { top: 100px; right: 28px; }
.p-lb .lb-prev, .p-lb .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 18px; }
.p-lb .lb-prev { left: 34px; } .p-lb .lb-next { right: 34px; }
.p-lb .lb-prev:hover, .p-lb .lb-next:hover, .p-lb .lb-x:hover { color: var(--accent); }
.p-lb .lb-n { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); font-size: 11px; opacity: .7; }
@media (max-width: 820px) { .p-lb img { max-width: 100vw; max-height: calc(100vh - 200px); } .p-lb .lb-prev, .p-lb .lb-next { display: none; } }