@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/chakra-petch-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/chakra-petch-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/chakra-petch-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/chakra-petch-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/chakra-petch-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #2a2519;
  --bg-2: #403720;
  --panel: #51462a;
  --ink: #f4e4a0;
  --ink-soft: #e4cf78;
  --muted: #b5a762;
  --faint: #80764b;
  --deep: #211d14;
  --rule: rgba(244, 228, 160, .16);
  --rule-2: rgba(244, 228, 160, .34);
  --display: 'Anton', 'Chakra Petch', Impact, sans-serif;
  --grotesk: 'Chakra Petch', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --max: 1280px;
  --pad: clamp(1.1rem, 4.5vw, 3.25rem);
  --rail-right: clamp(.85rem, 2vw, 1.8rem);
  --rail-width: 7.3rem;
  --rail-line-offset: .55rem;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { position: relative; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--grotesk); font-size: 1.02rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.dialog-open { overflow: hidden; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--ink); color: var(--deep); }
:focus-visible { outline: 3px solid var(--bg); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); border-radius: 1px; }
@media (forced-colors: active) { :focus-visible { outline: 3px solid CanvasText; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(section, #main) { scroll-margin-top: 4.5rem; }

.filmgrain { display: none; }
.ambient-field { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; min-height: 100vh; overflow: hidden; pointer-events: none; }
.ambient { position: absolute; display: block; opacity: .3; }
.ambient--ring { border: 1px solid rgba(244, 228, 160, .23); border-radius: 50%; }
.ambient--ring-a { width: min(42vw, 620px); aspect-ratio: 1; top: 5%; left: -16vw; }
.ambient--ring-b { width: min(30vw, 430px); aspect-ratio: 1; top: 51%; right: -12vw; border-color: rgba(181, 167, 98, .22); }
.ambient--grid { width: min(31vw, 440px); height: min(31vw, 440px); right: 5vw; top: 25%; opacity: .17; background: linear-gradient(rgba(244, 228, 160, .3) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(244, 228, 160, .3) 1px, transparent 1px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(circle at center, #000, transparent 72%); mask-image: radial-gradient(circle at center, #000, transparent 72%); transform: rotate(14deg); }
.ambient--cross { width: 28px; height: 28px; opacity: .38; }
.ambient--cross::before, .ambient--cross::after { content: ''; position: absolute; background: var(--ink); }
.ambient--cross::before { top: 0; left: 50%; width: 1px; height: 100%; }
.ambient--cross::after { top: 50%; left: 0; width: 100%; height: 1px; }
.ambient--cross-a { top: 38%; left: 13vw; transform: rotate(45deg); }
.ambient--cross-b { top: 73%; right: 22vw; transform: rotate(45deg) scale(.7); opacity: .26; }
header, main { position: relative; z-index: 1; }
header { z-index: 2; }
.scrap { position: absolute; z-index: 0; pointer-events: none; }
.scrap--tape { width: clamp(95px, 12vw, 155px); height: clamp(28px, 3.6vw, 46px); bottom: 7%; right: 9%; opacity: .6; transform: rotate(-19deg); background: rgba(244, 228, 160, .06); background-image: var(--noise); background-size: 90px; background-blend-mode: overlay; box-shadow: inset 0 0 0 1px var(--rule); }
.scrap--dots { width: clamp(120px, 15vw, 210px); aspect-ratio: 1; top: 10%; right: 7%; opacity: .14; transform: rotate(7deg); background: radial-gradient(circle, var(--ink) 1.3px, transparent 1.7px) 0 0 / 9px 9px; -webkit-mask: radial-gradient(circle, #000 28%, transparent 72%); mask: radial-gradient(circle, #000 28%, transparent 72%); }
.scrap--scratch { width: clamp(150px, 20vw, 260px); height: clamp(70px, 9vw, 120px); bottom: 9%; left: 1%; opacity: .5; background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule-2) 28px, transparent 29px); transform: rotate(-11deg); }
.scrap--blob { width: clamp(120px, 16vw, 210px); height: clamp(95px, 12vw, 165px); bottom: 12%; right: 3%; background: var(--noise); background-size: 100px; opacity: .4; mix-blend-mode: overlay; transform: rotate(9deg); border-radius: 46% 54% 63% 37% / 44% 40% 60% 56%; }
.scrap--tear { width: clamp(160px, 22vw, 300px); height: clamp(42px, 5vw, 72px); top: 13%; left: 1.5%; background: var(--noise); background-size: 120px; opacity: .4; mix-blend-mode: overlay; transform: rotate(-4deg); clip-path: polygon(0 32%, 6% 8%, 13% 42%, 21% 12%, 30% 46%, 38% 10%, 47% 42%, 56% 16%, 65% 46%, 74% 12%, 83% 44%, 92% 14%, 100% 40%, 100% 72%, 92% 92%, 83% 60%, 74% 90%, 65% 58%, 56% 88%, 47% 60%, 38% 90%, 30% 58%, 21% 88%, 13% 60%, 6% 90%, 0 68%); }

.loader__word-name-glyph, .loader__word-domain, .blend span, .wordmark-layer__text, .sec__title, .contact__big, .project-card__title, .creator-card__foot strong, .experience-card__head h3 { -webkit-mask-image: var(--grunge); mask-image: var(--grunge); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 260px; mask-size: 260px; }
.loader__word-name-glyph, .loader__word-domain, .blend span, .sec__title, .contact__big, .project-card__title, .creator-card__foot strong, .experience-card__head h3, .dlg__title { padding-block: .06em; }
@media (forced-colors: active) { .loader__word-name-glyph, .loader__word-domain, .blend span, .wordmark-layer__text, .sec__title, .contact__big, .project-card__title, .creator-card__foot strong, .experience-card__head h3 { -webkit-mask-image: none; mask-image: none; } }

@keyframes glA { 0% { clip-path: inset(0 0 85% 0); transform: translate(-4px, -1px); } 30% { clip-path: inset(44% 0 36% 0); transform: translate(4px, 1px); } 60% { clip-path: inset(74% 0 8% 0); transform: translate(-3px, 0); } 100% { clip-path: inset(0 0 95% 0); transform: translate(0); } }
@keyframes glB { 0% { clip-path: inset(70% 0 10% 0); transform: translate(4px, 1px); } 40% { clip-path: inset(18% 0 62% 0); transform: translate(-4px, -1px); } 100% { clip-path: inset(55% 0 30% 0); transform: translate(2px, 0); } }
@keyframes glSkew { 0%, 100% { transform: translate(0); } 25% { transform: translate(-2px, 0); } 75% { transform: translate(2px, 0); } }
@keyframes imgGl2 { 0%, 100% { transform: translate(0); } 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(2px, 1px); } }
.glitch { position: relative; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0; }
  .glitch:hover::before { opacity: .9; color: var(--ink); mix-blend-mode: screen; animation: glA .5s steps(2, end) infinite; }
  .glitch:hover::after { opacity: .7; color: var(--muted); animation: glB .5s steps(2, end) infinite; }
  .glitch:hover { animation: glSkew .32s steps(2, end) infinite; }
  .wordmark-layer__group.is-hovered > .wordmark-layer__text:first-child { animation: glSkew .32s steps(2, end) infinite; }
  .wordmark-layer__group.is-hovered .wordmark-layer__glitch-a { opacity: .9; fill: var(--ink); mix-blend-mode: screen; animation: glA .5s steps(2, end) infinite; }
  .wordmark-layer__group.is-hovered .wordmark-layer__glitch-b { opacity: .7; fill: var(--muted); animation: glB .5s steps(2, end) infinite; }
  .collage .media-pair:hover .media-pair__image { animation: imgGl2 .4s steps(4, end) infinite; filter: contrast(1.05) brightness(1.05); }
}

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 300; transform: translateY(-160%); background: var(--ink); color: var(--deep); font-family: var(--mono); font-size: .78rem; padding: .6rem .9rem; transition: transform .18s var(--ease); }
.skip-link:focus { transform: none; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); width: 100%; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#main:focus { outline: none; }

/* Image pair controls keep the generated view as the default without hiding the source. */
.media-pair { position: relative; overflow: hidden; isolation: isolate; min-width: 0; background: var(--deep); border: 1px solid var(--rule-2); }
.media-pair > picture { display: block; width: 100%; height: 100%; }
.media-pair__image { width: 100%; height: 100%; object-fit: cover; transition: filter .25s var(--ease), opacity .25s var(--ease); }
.media-pair--diagram .media-pair__image { object-fit: contain; padding: .35rem; background: #29251c; }
.media-pair__state, .media-pair__toggle, .media-pair__open { position: absolute; z-index: 2; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.media-pair__state { display: none; left: .65rem; bottom: .55rem; padding: .18rem .35rem; color: var(--ink); background: rgba(33, 29, 20, .78); pointer-events: none; }
.media-pair__dialog { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.media-pair__dialog:focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; box-shadow: none; }
.media-pair__toggle, .media-pair__open { border: 1px solid var(--rule-2); color: var(--ink); background: rgba(33, 29, 20, .88); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); }
.media-pair__toggle { top: .55rem; right: .55rem; display: grid; place-items: center; width: 32px; height: 30px; min-height: 30px; padding: 0; font-size: 0; }
.media-pair__toggle::before { content: '⇄'; font-family: var(--mono); font-size: 1rem; line-height: 1; }
.media-pair__hint { position: absolute; top: .55rem; right: calc(.55rem + 32px + .55rem); z-index: 3; width: max-content; max-width: min(14rem, calc(100% - 4.75rem)); padding: .4rem .55rem; border: 1px solid var(--rule-2); color: var(--ink); background: rgba(33, 29, 20, .94); font-family: var(--mono); font-size: .58rem; letter-spacing: .02em; line-height: 1.35; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear 0s; }
.media-pair__hint::after { content: ''; position: absolute; top: 50%; right: -5px; width: 8px; height: 8px; border-top: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2); background: rgba(33, 29, 20, .94); transform: translateY(-50%) rotate(45deg); }
.media-pair__hint.is-dismissed { visibility: hidden; opacity: 0; transform: translateX(.35rem); }
html:not(.js) .media-pair__hint { display: none; }
.media-pair__open { right: .55rem; bottom: .45rem; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font-size: .95rem; line-height: 1; }
.media-pair__open[data-lightbox-open] { font-size: 0; }
.media-pair__open[data-lightbox-open]::before { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 12px; height: 12px; transform: translate(-50%, -50%); background: linear-gradient(currentColor, currentColor) 0 0 / 4px 1px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1px 4px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 4px 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1px 4px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 4px 1px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 1px 4px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 4px 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 1px 4px no-repeat; }
.media-pair__toggle:hover, .media-pair__open:hover { border-color: var(--ink); background: var(--ink); color: var(--deep); }
.media-pair__toggle:active, .media-pair__open:active { transform: scale(.95); }
.media-pair.is-original .media-pair__state { color: var(--deep); background: var(--ink); }

.loader { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; overflow: visible; isolation: isolate; pointer-events: none; }
.js .loader { display: flex; }
.loader__veil { position: absolute; inset: 0; z-index: 0; background: var(--bg); clip-path: inset(0); transition: clip-path .9s var(--ease) .08s; }
.loader::before { content: ''; position: absolute; inset: clamp(1rem, 3vw, 2.75rem); z-index: 1; border: 1px solid var(--rule); pointer-events: none; opacity: .8; transition: opacity .4s var(--ease), transform .75s var(--ease); }
.loader.is-out .loader__veil { clip-path: inset(0 0 0 100%); }
.loader.is-out::before { opacity: 0; transform: translateX(18px) scaleY(.96); }
.loader__core { position: relative; z-index: 2; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 1.05rem; align-items: center; width: min(430px, 76vw); }
.loader__stamp { grid-column: 2; align-self: end; margin-bottom: .55rem; font-size: .62rem; letter-spacing: .16em; animation: loaderStampIn .5s .05s var(--ease) both; transition: opacity .3s var(--ease), transform .55s var(--ease); }
.loader__mark, .brand__mark { display: block; width: 22px; height: 22px; border: 1px solid var(--ink); transform: rotate(45deg); position: relative; }
.loader__mark::after, .brand__mark::after { content: ''; position: absolute; inset: 5px; background: var(--ink); }
.loader__mark { grid-column: 1; grid-row: 2 / span 3; width: 34px; height: 34px; animation: loaderMarkIn .7s .1s var(--ease) both; transition: opacity .35s var(--ease), transform .65s var(--ease); }
.loader__mark::after { inset: 8px; }
.loader__word { grid-column: 2; position: relative; z-index: 1; display: flex; align-items: baseline; width: max-content; font-family: var(--display); font-size: clamp(2.4rem, 9vw, 5rem); line-height: .78; letter-spacing: .005em; white-space: nowrap; animation: loaderWordIn .75s .16s var(--ease) both; }
.loader__word-name, .loader__word-domain { display: inline-block; position: relative; }
.loader__word-name { transition: opacity .16s linear; }
.loader__word-name-glyph { display: inline-block; }
.loader__word-domain { transition: opacity .3s var(--ease), transform .45s var(--ease); }
.loader__line { grid-column: 2; position: relative; z-index: 1; margin-top: .8rem; text-transform: none; letter-spacing: .12em; animation: loaderLineIn .55s .38s var(--ease) both; transition: opacity .3s var(--ease), transform .55s var(--ease); }
.loader__progress { grid-column: 2; position: relative; z-index: 1; display: block; width: min(280px, 62vw); height: 1px; margin-top: 1rem; overflow: hidden; background: var(--rule); transition: opacity .3s var(--ease), transform .55s var(--ease); }
.loader__progress span { display: block; width: 24%; height: 100%; background: linear-gradient(90deg, transparent, var(--ink)); transform: translateX(-110%); animation: loaderProgress 1.85s var(--ease) forwards; }
.loader__scan { position: absolute; top: -1px; left: 0; right: 0; z-index: 1; height: 1px; pointer-events: none; opacity: .22; background: linear-gradient(90deg, transparent, var(--ink) 30%, var(--ink) 70%, transparent); box-shadow: 0 0 14px rgba(244, 228, 160, .28); animation: loaderScan 1.65s var(--ease) infinite; transition: opacity .35s ease, transform .8s var(--ease); }
.loader.is-out .loader__scan { opacity: 0; animation: none; transform: translateY(-8%); }
.loader.is-out .loader__word { animation: none; }
.loader.is-out .loader__word-name { opacity: 0; transition-duration: .05s; }
.loader.is-out .loader__word-domain { opacity: 0; transform: translateX(8px); }
.loader.is-out .loader__stamp { opacity: 0; transform: translateX(-12px); }
.loader.is-out .loader__mark { opacity: 0; transform: translateX(-12px) rotate(45deg) scale(.9); }
.loader.is-out .loader__line, .loader.is-out .loader__progress { opacity: 0; transform: translateY(-6px); }
.wordmark-morph-backdrop { position: fixed; z-index: 201; display: block; overflow: hidden; isolation: isolate; opacity: 0; pointer-events: none; transform-origin: center; contain: paint; }
.wordmark-morph-layer { position: fixed; inset: 0; z-index: 202; display: block; width: 100%; height: 100%; overflow: visible; visibility: hidden; opacity: 0; pointer-events: none; mix-blend-mode: difference; }
.wordmark-morph-layer__group { transform-origin: 0 0; }
.wordmark-morph-layer__text { fill: var(--ink); line-height: normal; }
@keyframes loaderMarkIn { from { opacity: 0; transform: rotate(45deg) scale(.45); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes loaderStampIn { from { opacity: 0; transform: translateX(-10px); letter-spacing: .28em; } to { opacity: 1; transform: translateX(0); letter-spacing: .16em; } }
@keyframes loaderWordIn { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14px); } to { opacity: 1; clip-path: inset(0); transform: translateX(0); } }
@keyframes loaderLineIn { from { opacity: 0; transform: translateY(8px); letter-spacing: .3em; } to { opacity: 1; transform: translateY(0); letter-spacing: .12em; } }
@keyframes loaderProgress { 0% { transform: translateX(-110%); } 100% { transform: translateX(520%); } }
@keyframes loaderScan { from { transform: translateY(-10vh); } to { transform: translateY(110vh); } }

.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem var(--pad); max-width: var(--max); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: .72rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--ink); }
.brand__mark { width: 16px; height: 16px; }
.brand__mark::after { inset: 4px; }
.section-rail { position: fixed; top: 50%; right: var(--rail-right); z-index: 40; display: flex; flex-direction: column; gap: .45rem; width: var(--rail-width); transform: translateY(-50%); }
.section-rail__line { position: absolute; top: .2rem; bottom: 2.65rem; left: var(--rail-line-offset); width: 1px; background: var(--rule-2); }
.section-rail__link { position: relative; display: grid; grid-template-columns: 1rem 1fr; gap: .55rem; align-items: center; min-height: 1.5rem; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; transition: color .2s var(--ease), transform .2s var(--ease); }
.section-rail__link::before { content: ''; position: absolute; left: .35rem; width: .42rem; height: .42rem; border: 1px solid var(--muted); border-radius: 50%; background: var(--bg); transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.section-rail__link.is-active, .section-rail__link:hover, .section-rail__link:focus-visible { color: var(--ink); transform: translateX(-2px); }
.section-rail__link.is-active::before, .section-rail__link:hover::before, .section-rail__link:focus-visible::before { border-color: var(--ink); background: var(--ink); transform: scale(1.15); }
.section-rail__index { color: var(--faint); font-size: .55rem; text-align: right; }
.section-rail__label { white-space: nowrap; }
.section-rail__cv { align-self: flex-start; min-height: 28px; margin: .45rem 0 0 .05rem; padding: .35rem .45rem; border: 1px solid var(--rule-2); background: transparent; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.section-rail__cv:hover { border-color: var(--ink); background: var(--ink); color: var(--deep); }
html.js .section-rail { opacity: 0; transform: translate(24px, -50%); clip-path: inset(0 0 0 100%); pointer-events: none; }
html.js body.is-ready .section-rail { opacity: 1; transform: translate(0, -50%); clip-path: inset(0); pointer-events: auto; transition: opacity .45s var(--ease) .12s, transform .75s var(--ease) .12s, clip-path .75s var(--ease) .12s; }
html.js .section-rail__line { opacity: 0; transform: scaleY(0); transform-origin: top center; transition: opacity .2s linear .05s, transform .65s var(--ease) .05s; }
html.js .section-rail__link { --rail-delay: .18s; opacity: 0; transform: translateX(10px); transition: color .2s var(--ease), opacity .36s linear var(--rail-delay), transform .55s var(--ease) var(--rail-delay); }
html.js .section-rail__link:nth-of-type(2) { --rail-delay: .27s; }
html.js .section-rail__link:nth-of-type(3) { --rail-delay: .36s; }
html.js .section-rail__link:nth-of-type(4) { --rail-delay: .45s; }
html.js .section-rail__link:nth-of-type(5) { --rail-delay: .54s; }
html.js .section-rail__cv { opacity: 0; transform: translateX(10px); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), opacity .36s linear .63s, transform .55s var(--ease) .63s; }
html.js body.is-ready .section-rail__line { opacity: 1; transform: scaleY(1); }
html.js body.is-ready .section-rail__link, html.js body.is-ready .section-rail__cv { opacity: 1; transform: translateX(0); }

.section-rail__line { overflow: hidden; transition: background .35s var(--ease), opacity .2s linear, transform .65s var(--ease); }
.section-rail__line::after { content: ''; position: absolute; top: -35%; left: -1px; width: 3px; height: 28%; background: linear-gradient(to bottom, transparent, var(--ink), transparent); opacity: 0; transform: translateY(-100%); pointer-events: none; }
.section-rail__link { --rail-link-shift: 0px; --rail-transform-delay: var(--rail-delay, 0s); transform: translateX(var(--rail-link-shift)); transition: color .3s var(--ease), opacity .36s linear var(--rail-delay, 0s), transform .45s var(--ease) var(--rail-transform-delay); }
.section-rail__link.is-active { --rail-link-shift: -2px; --rail-transform-delay: 0s; }
.section-rail__link:hover, .section-rail__link:focus-visible { --rail-link-shift: -5px; --rail-transform-delay: 0s; transform: translateX(var(--rail-link-shift)); }
.section-rail__link::before { transition: border-color .3s var(--ease), background .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.section-rail__link::after { content: ''; position: absolute; top: 50%; left: .08rem; width: .9rem; height: .9rem; border: 1px solid var(--ink); border-radius: 50%; opacity: 0; transform: translateY(-50%) scale(.35); pointer-events: none; }
.section-rail__link.is-active::before { box-shadow: 0 0 0 .2rem rgba(244, 228, 160, .1); }
.section-rail__link.is-active::after { animation: railDotPulse .85s var(--ease) both; }
.section-rail__index, .section-rail__label { transition: color .3s var(--ease), letter-spacing .3s var(--ease), transform .3s var(--ease); }
.section-rail__link.is-active .section-rail__index { color: var(--ink-soft); transform: translateX(-1px); }
.section-rail__link.is-active .section-rail__label { letter-spacing: .12em; }
html.js body.is-ready .section-rail__link { transform: translateX(var(--rail-link-shift)); }
html.js body.is-ready .section-rail:hover .section-rail__link:not(:hover):not(:focus-visible):not(.is-active) { opacity: .72; }

@keyframes railDotPulse {
  0% { opacity: 0; transform: translateY(-50%) scale(.35); }
  28% { opacity: .72; }
  100% { opacity: 0; transform: translateY(-50%) scale(2.1); }
}
@keyframes railLineSweep {
  0% { opacity: 0; transform: translateY(-120%); }
  18% { opacity: .65; }
  100% { opacity: 0; transform: translateY(430%); }
}
@media (hover: hover) and (pointer: fine) {
  .section-rail:hover .section-rail__line { background: var(--ink-soft); }
  .section-rail:hover .section-rail__line::after { animation: railLineSweep .95s var(--ease) both; }
}

.masthead { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.2rem, 3vw, 2.2rem); padding: 6rem var(--pad) 2.5rem; max-width: var(--max); margin-inline: auto; }
.collage { position: relative; isolation: isolate; height: min(52vh, 540px); display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); gap: clamp(.4rem, 1vw, .7rem); }
.collage .media-pair { border-color: var(--rule); }
.collage .media-pair__image { width: 100%; height: 100%; }
.collage .media-pair__state, .collage .media-pair__toggle { opacity: 0; transition: opacity .2s var(--ease); }
.collage .media-pair:hover .media-pair__state, .collage .media-pair:focus-within .media-pair__toggle, .collage .media-pair:hover .media-pair__toggle { opacity: 1; }
.c1 { grid-column: 1 / 5; grid-row: 1 / 7; }
.c2 { grid-column: 5 / 9; grid-row: 1 / 5; }
.c3 { grid-column: 9 / 13; grid-row: 1 / 5; }
.c4 { grid-column: 7 / 13; grid-row: 4 / 9; }
.c5 { grid-column: 1 / 7; grid-row: 6 / 9; }
.blend__backdrop { position: absolute; z-index: 2; display: block; min-width: 1px; min-height: 1px; overflow: hidden; isolation: isolate; opacity: 0; pointer-events: none; contain: paint; }
.wordmark-blur-scene { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 0; height: 0; overflow: visible; pointer-events: none; transform-origin: top left; }
.wordmark-blur-scene__mask-text { line-height: normal; }
html.js .blend__backdrop { opacity: 0; transition: opacity .35s var(--ease); }
html.js body.is-morphing .blend__backdrop--lucas, html.js body.is-ready .blend__backdrop { opacity: 1; }
.wordmark-layer { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; overflow: visible; visibility: hidden; pointer-events: none; mix-blend-mode: difference; }
.wordmark-layer.is-positioned { visibility: visible; }
.wordmark-layer__group { opacity: 0; pointer-events: none; }
.wordmark-layer__text { fill: var(--ink); line-height: normal; transform-box: fill-box; transform-origin: center; }
.wordmark-layer__glitch-a, .wordmark-layer__glitch-b { opacity: 0; pointer-events: none; }
.wordmark-layer__text { pointer-events: none; }
html.js body.is-morphing .wordmark-layer__group--lucas, html.js body.is-ready .wordmark-layer__group { opacity: 1; }
html.js body.is-morphing .wordmark-morph-backdrop { opacity: 1; }
html.js body.is-morphing .wordmark-morph-layer { visibility: visible; opacity: 1; }
html.js body.is-ready .wordmark-morph-backdrop { opacity: 0; }
html.js body.is-ready .wordmark-morph-layer { opacity: 0; transition: opacity .16s linear; }
html.js .blend { visibility: visible; }
.blend { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: difference; display: flex; flex-direction: column; justify-content: center; color: var(--ink); }
.blend span { width: max-content; max-width: 100%; font-family: var(--display); text-transform: uppercase; line-height: .78; font-size: clamp(3rem, 14vw, 11rem); letter-spacing: .005em; display: block; position: relative; pointer-events: auto; }
html.js .blend span { opacity: 0; transition: opacity .35s var(--ease); }
.blend span:nth-child(2) { margin-left: 36%; margin-right: auto; text-align: left; margin-top: -.06em; }
.introbar { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2.6rem); align-items: center; }
.brace { font-family: var(--grotesk); font-weight: 900; font-size: clamp(4.5rem, 13vw, 9.5rem); line-height: 1; color: var(--ink); align-self: center; }
.mh__kicker { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.mh__role { font-family: var(--mono); font-size: clamp(.78rem, 1.3vw, .92rem); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); margin: 0; }
.mh__signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 620px); margin-top: 1rem; border: 1px solid var(--rule-2); }
.mh__signal { display: grid; gap: .15rem; min-width: 0; padding: .7rem .9rem .75rem; }
.mh__signal + .mh__signal { border-left: 1px solid var(--rule-2); }
.mh__signal-label { color: var(--muted); font-size: .58rem; }
.mh__signal strong { color: var(--ink); font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 400; line-height: .95; text-transform: uppercase; }
.mh__signal-note { color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.mh__intro { margin: .7rem 0 0; color: var(--ink-soft); font-size: clamp(.98rem, 1.2vw, 1.1rem); line-height: 1.6; max-width: 54ch; }
.mh__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.mh__side { align-self: center; justify-self: end; display: flex; gap: 1.4rem; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: .66rem; letter-spacing: .32em; text-transform: uppercase; color: var(--faint); pointer-events: none; }
.scroll-cue { display: inline-flex; align-items: center; gap: .7rem; width: max-content; margin-top: 1.7rem; color: var(--muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue__arrow { display: grid; place-items: center; width: 34px; height: 46px; border: 1px solid var(--rule-2); color: var(--ink); font-size: 1.25rem; line-height: 1; animation: scrollCue 1.8s var(--ease) infinite; }
.scroll-cue:hover { color: var(--ink); }
.scroll-cue:hover .scroll-cue__arrow { border-color: var(--ink); }
@keyframes scrollCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.pill { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; padding: .6rem 1.2rem; border: 1px solid var(--rule-2); border-radius: 999px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease); }
.pill__arrow { font-size: 1rem; line-height: 1; transition: transform .2s var(--ease); }
.pill:hover { border-color: var(--ink); background: var(--ink); color: var(--deep); }
.pill:hover .pill__arrow { transform: translate(2px, -2px); }
.pill:active { transform: scale(.97); }
.pill--solid { background: var(--ink); border-color: var(--ink); color: var(--deep); }
.pill--solid:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.pill--cv { appearance: none; background: transparent; color: var(--ink); cursor: pointer; }

.sec { position: relative; padding-block: clamp(5rem, 11vh, 9rem); border-top: 1px solid var(--rule); }
.section-index { position: absolute; top: 2.5rem; right: var(--pad); writing-mode: vertical-rl; color: var(--faint); }
.sec__head { display: block; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .85; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.sec--creators .sec__title { line-height: .9; }
.sec__sub { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: .6rem 0 0; }
.sec__head--split { display: flex; justify-content: space-between; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); flex-wrap: wrap; }
.sec__shape--image { flex: 0 0 auto; width: clamp(140px, 17vw, 190px); aspect-ratio: 1; }
.sec__shape--image .media-pair__image { object-fit: cover; }

.project-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.project-card { min-width: 0; }
.project-card--feature { margin-top: clamp(1rem, 5vw, 5rem); }
.project-card__visual { aspect-ratio: 16 / 9; }
.project-card:not(.project-card--feature) .project-card__visual { aspect-ratio: 3 / 2; }
.project-card__body { padding-top: 1rem; border-top: 1px solid var(--rule-2); }
.project-card__index { display: block; margin-bottom: .6rem; color: var(--muted); }
.project-card__title { position: relative; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 400; line-height: .86; text-transform: uppercase; margin: 0 0 .9rem; }
.project-card p { max-width: 50ch; margin: 0; color: var(--ink-soft); }
.project-card__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.action-link { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 42px; padding: .55rem .85rem; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.action-link:hover { border-color: var(--ink); background: var(--ink); color: var(--deep); }
.action-link:active { transform: scale(.98); }
.action-link--solid { border-color: var(--ink); background: var(--ink); color: var(--deep); }
.action-link--solid:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

.creator-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem) clamp(1rem, 2.4vw, 2rem); align-items: start; }
.creator-card { grid-column: span 5; min-width: 0; }
.creator-card--wide { grid-column: span 7; }
.creator-card:nth-child(2), .creator-card:nth-child(4) { margin-top: clamp(1rem, 5vw, 5rem); }
.creator-card__media { aspect-ratio: 16 / 9; }
.creator-card__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-height: 94px; padding: .85rem 0 .5rem; border-top: 1px solid var(--rule-2); }
.creator-card__foot > div { min-width: 0; }
.creator-card__foot strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.creator-card__language { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; color: var(--ink); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.creator-card__language img { display: block; width: 28px; height: 16px; object-fit: contain; border: 1px solid var(--rule-2); background: var(--deep); }
.creator-card__foot small { display: block; margin-top: .45rem; color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }
.creator-card__indicator { flex: none; color: var(--ink); font-family: var(--mono); font-size: 1.25rem; line-height: 1; transition: transform .2s var(--ease), color .2s var(--ease); }
.creator-card:hover .creator-card__indicator { color: var(--ink-soft); transform: translate(3px, -3px); }

.experience-stack { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.experience-card { position: relative; min-width: 0; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--rule-2); background: rgba(33, 29, 20, .36); }
.experience-card--stage { background: var(--deep); }
.experience-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule-2); }
.experience-card__head h3 { margin: .45rem 0 .1rem; font-family: var(--display); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 400; line-height: .82; text-transform: uppercase; }
.experience-card__head p { margin: 0; color: var(--ink-soft); }
.experience-card__code { flex: none; margin-top: .25rem; }
.experience-card__lead { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-block: clamp(1.5rem, 4vw, 3rem); }
.experience-card__copy > p { max-width: 48ch; margin: 0 0 1.2rem; color: var(--ink-soft); }
.experience-points { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .92rem; }
.experience-points li { display: grid; grid-template-columns: 1rem 1fr; gap: .35rem; }
.experience-points li::before { content: '+'; color: var(--ink); font-family: var(--mono); }
.experience-points strong { color: var(--ink); font-weight: 700; }
.experience-card__feature { aspect-ratio: 16 / 9; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.process-grid__item { aspect-ratio: 16 / 9; }
.process-grid__item--wide { grid-column: span 2; }
.experience-card__boards { display: grid; grid-template-columns: .55fr 1.45fr; gap: 2rem; align-items: start; margin-top: clamp(1.5rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-2); }
.experience-card__boards h4 { margin: .55rem 0 0; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 400; line-height: .9; text-transform: uppercase; }
.board-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.board-pair .media-pair { aspect-ratio: 3 / 2; }
.experience-card--snu { background: rgba(81, 70, 42, .28); }
.snu-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 3rem); padding-block: 1.5rem 2rem; }
.snu-intro p { margin: 0; color: var(--ink-soft); }
.snu-gallery { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .7rem; }
.snu-gallery .media-pair { aspect-ratio: 4 / 3; }
.snu-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

.profile__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; position: relative; z-index: 1; }
.profile__grid p { max-width: 58ch; color: var(--ink-soft); margin: 0 0 1.2rem; }
.profile__grid p b { color: var(--ink); font-weight: 800; }
.manifest { background: var(--bg); border: 1px solid var(--rule-2); padding: 1.2rem; }
.manifest__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .6rem 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.manifest__row + .manifest__row { border-top: 1px dashed var(--rule); }
.manifest__row .k { color: var(--muted); }
.manifest__row .d { height: 1px; background: var(--rule); min-width: 18px; }
.manifest__row .v { color: var(--ink); text-align: right; }

.sec--contact { min-height: 620px; }
.contact__big { position: relative; z-index: 1; font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 13vw, 9rem); line-height: .82; margin: 0 0 2rem; text-transform: uppercase; color: var(--ink); text-shadow: 2px 0 var(--deep), -2px 0 var(--deep); }
.contact__intro { position: relative; z-index: 2; max-width: 49ch; color: var(--ink-soft); margin: 0 0 2rem; font-size: 1.04rem; }
.channels { display: grid; gap: .8rem; max-width: 760px; position: relative; z-index: 2; }
.channel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--rule-2); border-radius: 999px; transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease); }
.channel:hover { border-color: var(--ink); background: rgba(244, 228, 160, .07); }
.channel:active { transform: scale(.99); }
.channel__k { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.channel__v { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1rem, 2.2vw, 1.5rem); overflow-wrap: anywhere; }
.channel__v small { font-family: var(--mono); font-weight: 400; font-size: .6rem; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; margin-left: .5rem; }
.channel__arrow { font-family: var(--mono); color: var(--ink); font-size: 1.1rem; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.site-footer__privacy { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .3em; }
.site-footer__privacy:hover { text-decoration-color: var(--ink); }

[hidden] { display: none !important; }
.consent-banner { position: fixed; left: .7rem; right: .7rem; bottom: .7rem; z-index: 190; display: grid; gap: 1.3rem; align-items: stretch; width: min(1080px, calc(100% - 1.4rem)); margin-inline: auto; padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 3vw, 2.2rem); color: var(--ink); background: rgba(33, 29, 20, .98); border: 1px solid var(--rule-2); border-radius: 1rem; box-shadow: 0 24px 70px rgba(33, 29, 20, .5); animation: consentBannerIn .7s var(--ease) .45s both; }
.consent-banner__eyebrow { display: block; margin-bottom: .35rem; color: var(--ink-soft); }
.consent-banner__title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 400; line-height: .9; text-transform: uppercase; }
.consent-banner__copy { max-width: 78ch; margin: .55rem 0 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
.consent-banner__copy a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.consent-banner__actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.consent-banner__actions-right { display: flex; gap: .65rem; align-items: center; }
.consent-button { min-height: 42px; padding: .55rem .78rem; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); }
.consent-button:hover, .consent-button:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--deep); }
.consent-button:active { transform: scale(.97); }
.consent-banner .consent-button { color: var(--ink); border-color: var(--rule-2); }
.consent-banner .consent-button:hover, .consent-banner .consent-button:focus-visible { color: var(--deep); background: var(--ink); border-color: var(--ink); }
.consent-banner .consent-button--continue { min-height: auto; padding: .55rem 0; border-color: transparent; font-family: var(--grotesk); font-size: .9rem; letter-spacing: 0; text-transform: none; }
.consent-banner .consent-button--continue:hover, .consent-banner .consent-button--continue:focus-visible { color: var(--ink-soft); background: transparent; border-color: transparent; }
.consent-button--continue span { display: inline-block; margin-left: .25rem; font-size: 1.35em; line-height: 0; vertical-align: -.08em; }
.consent-banner .consent-button--accept { min-width: 170px; color: var(--deep); background: var(--ink); border-color: var(--ink); }
.consent-banner .consent-button--accept:hover, .consent-banner .consent-button--accept:focus-visible { color: var(--deep); background: var(--ink-soft); border-color: var(--ink-soft); }
.consent-manage { position: fixed; left: 1rem; bottom: 1rem; z-index: 190; min-height: 34px; padding: .4rem .65rem; border: 1px solid var(--rule-2); background: rgba(33, 29, 20, .94); color: var(--ink); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.consent-manage:hover, .consent-manage:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--deep); }
.consent-dialog { width: min(560px, calc(100% - 2rem)); max-height: 88vh; }
.consent-dialog__body { display: grid; gap: 1rem; }
.consent-dialog__lead { margin: 0; color: var(--ink-soft); }
.consent-dialog__choice { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.consent-dialog__choice strong { display: block; color: var(--ink); font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.consent-dialog__choice span { display: block; margin-top: .3rem; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.consent-dialog__choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--ink); }
.consent-dialog__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@keyframes consentBannerIn { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } }

.privacy-page { min-height: 100vh; background: var(--bg); }
.privacy-shell { width: min(920px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) 0 5rem; }
.privacy-shell__back { display: inline-flex; margin-bottom: 2rem; color: var(--ink); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .3em; }
.privacy-shell h1 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(3.2rem, 10vw, 7rem); font-weight: 400; line-height: .82; text-transform: uppercase; }
.privacy-shell__lead { max-width: 62ch; margin: 1.5rem 0 3rem; color: var(--ink-soft); font-size: 1.05rem; }
.privacy-shell section { padding: 1.5rem 0; border-top: 1px solid var(--rule-2); }
.privacy-shell h2 { margin: 0 0 .6rem; color: var(--ink); font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.privacy-shell p, .privacy-shell li { max-width: 72ch; color: var(--ink-soft); line-height: 1.6; }
.privacy-shell ul { margin: .7rem 0 0; padding-left: 1.2rem; }
.privacy-shell a { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.privacy-shell__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

dialog { max-width: 780px; width: 92vw; max-height: 88vh; overflow: auto; padding: 0; color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule-2); box-shadow: 0 30px 80px rgba(33, 29, 20, .78); }
dialog::backdrop { background: rgba(33, 29, 20, .86); }
.dlg__head { position: sticky; top: 0; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.3rem clamp(1.2rem, 3vw, 2rem); background: var(--bg-2); border-bottom: 1px solid var(--rule); }
.dlg__title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: .85; margin: 0; text-transform: uppercase; outline: none; }
.dlg__sub { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; }
.dlg__close { flex: none; width: 44px; height: 44px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); border-radius: 999px; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: border-color .2s var(--ease), background .2s var(--ease); }
.dlg__close:hover { border-color: var(--ink); background: rgba(244, 228, 160, .08); }
.dlg__body { padding: clamp(1.2rem, 3vw, 2rem); }
.dlg__body h3 { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.8rem 0 .8rem; }
.dlg__body h3:first-child { margin-top: 0; }
.dlg__body p { margin: 0 0 1rem; color: var(--ink-soft); max-width: 62ch; }
.dlg__spec { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.dlg__spec div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .78rem; }
.dlg__spec dt { color: var(--muted); }
.dlg__spec dd { margin: 0; color: var(--ink); text-align: right; }
.dialog__media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.dialog__media-grid--single { grid-template-columns: 1fr; }
.dialog__media-grid .media-pair { aspect-ratio: 3 / 2; }
.dialog__media-grid .media-pair--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.dialog__media-grid .media-pair__state { display: block; top: .55rem; bottom: auto; }
.project-dialog__linkedin { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: .15rem 0 1.7rem; padding: .85rem 1.1rem; border: 1px solid var(--ink); background: var(--ink); color: var(--deep); font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; transition: background .2s var(--ease), transform .12s var(--ease); }
.project-dialog__linkedin > span:first-child { display: flex; flex-direction: column; gap: .25rem; }
.project-dialog__linkedin small { color: rgba(33, 29, 20, .72); font-size: .6rem; letter-spacing: .06em; }
.project-dialog__linkedin > span:last-child { flex: none; font-size: 1.2rem; line-height: 1; transition: transform .2s var(--ease); }
.project-dialog__linkedin:hover { background: var(--ink-soft); }
.project-dialog__linkedin:hover > span:last-child { transform: translate(2px, -2px); }
.project-dialog__linkedin:active { transform: scale(.99); }
.creator-dialog__body { display: flex; flex-direction: column; align-items: flex-start; }
.creator-dialog__lead { max-width: 54ch; font-size: 1.08rem; color: var(--ink) !important; }
.creator-dialog__media { width: 100%; aspect-ratio: 16 / 9; margin: .1rem 0 1.5rem; }
.creator-dialog__spec { width: 100%; margin-bottom: 1.4rem; }
.creator-dialog__video { display: inline-flex; align-items: center; gap: .85rem; min-height: 48px; margin: 0 0 1.25rem; padding: .7rem 1.15rem; background: var(--ink); color: var(--deep); font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; transition: background .2s var(--ease), transform .12s var(--ease); }
.creator-dialog__video:hover { background: var(--ink-soft); }
.creator-dialog__video:active { transform: scale(.98); }

.image-lightbox { width: min(94vw, 1500px); max-width: none; max-height: 94vh; padding: 0; background: var(--bg-2); }
.image-lightbox::backdrop { background: rgba(33, 29, 20, .92); }
.lightbox__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
.lightbox__head > div { display: flex; align-items: center; gap: .8rem; }
.lightbox__label { color: var(--ink-soft); font-family: var(--grotesk); font-size: .82rem; }
.lightbox__state { padding: .2rem .4rem; color: var(--deep); background: var(--ink); font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.lightbox__body { display: grid; place-items: center; min-height: 160px; padding: clamp(.75rem, 2vw, 1.5rem); }
.lightbox__body img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(94vh - 150px); object-fit: contain; }
.lightbox__controls { display: flex; gap: .4rem; margin-top: 1rem; }
.lightbox__mode { min-height: 36px; padding: .45rem .7rem; border: 1px solid var(--rule-2); background: transparent; color: var(--muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.lightbox__mode.is-active, .lightbox__mode:hover { border-color: var(--ink); background: var(--ink); color: var(--deep); }
.lightbox__mode:disabled { opacity: .45; cursor: not-allowed; }
.cv-dialog { width: min(92vw, 1000px); max-width: none; height: min(88vh, 900px); max-height: 88vh; }
.cv-dialog__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.3rem clamp(1.2rem, 3vw, 2rem); background: var(--bg-2); border-bottom: 1px solid var(--rule); }
.cv-dialog__body { display: flex; flex-direction: column; gap: .8rem; height: calc(100% - 116px); padding: clamp(.8rem, 2vw, 1.2rem); }
.cv-dialog__body iframe { display: block; width: 100%; flex: 1; min-height: 420px; border: 1px solid var(--rule); background: var(--deep); }
.cv-dialog__fallback { align-self: flex-start; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }

.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

@media (max-width: 1000px) {
  .project-grid { gap: 2rem; }
}
@media (max-width: 900px) {
  :root { --rail-right: .65rem; --rail-width: 1.35rem; --rail-line-offset: .47rem; }
  .nav { align-items: flex-start; padding: .95rem var(--pad); }
  .section-rail { gap: .35rem; }
  .section-rail__line { bottom: 2.45rem; }
  .section-rail__link { display: block; min-height: 1.35rem; }
  .section-rail__index { display: none; }
  .section-rail__label { position: absolute; right: 1.8rem; top: 50%; padding: .25rem .4rem; opacity: 0; pointer-events: none; color: var(--ink); background: var(--deep); transform: translateY(-50%) translateX(4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .section-rail__link:hover .section-rail__label, .section-rail__link:focus-visible .section-rail__label { opacity: 1; transform: translateY(-50%) translateX(0); }
  .section-rail__cv { width: 1.35rem; min-height: 26px; margin-left: 0; padding: .25rem 0; font-size: .5rem; }
  .masthead { min-height: auto; padding: 4.5rem var(--pad) 2.5rem; gap: 1.4rem; }
  .collage { height: 54vh; }
  .collage .media-pair__state, .collage .media-pair__toggle { opacity: 1; }
  .blend span { font-size: clamp(2.6rem, 13vw, 5rem); }
  .introbar { grid-template-columns: 1fr; gap: .7rem; }
  .brace, .mh__side { display: none; }
  .mh__intro { max-width: none; }
  .mh__signals { width: min(100%, 620px); }
  .project-grid { grid-template-columns: 1fr; }
  .project-card--feature { margin-top: 0; }
  .creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
  .creator-card, .creator-card--wide { grid-column: span 1; }
  .profile__grid { grid-template-columns: 1fr; }
  .experience-card__lead { grid-template-columns: 1fr; }
  .experience-card__boards { grid-template-columns: 1fr; }
  .snu-intro { grid-template-columns: 1fr; }
  .dlg__spec { grid-template-columns: 1fr; }
  .scrap { display: none; }
  .ambient-field { opacity: .8; }
}
@media (max-width: 700px) {
  .section-index { display: none; }
  .collage { height: 46vh; }
  .creator-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .creator-card, .creator-card--wide { grid-column: 1; }
  .creator-card:nth-child(2), .creator-card:nth-child(4) { margin-top: 0; }
  .creator-card__foot strong { font-size: clamp(1.65rem, 8vw, 2.35rem); }
  .experience-card__head { flex-direction: column; gap: .6rem; }
  .mh__signals { grid-template-columns: 1fr; }
  .mh__signal + .mh__signal { border-top: 1px solid var(--rule-2); border-left: 0; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid__item--wide { grid-column: span 2; }
  .snu-gallery { grid-template-columns: 1fr; }
  .board-pair { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; gap: .25rem; }
  .consent-banner { gap: 1rem; padding: 1rem; }
  .consent-banner__actions { align-items: stretch; flex-direction: column; }
  .consent-banner__actions-right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consent-banner .consent-button { width: 100%; }
  .consent-banner .consent-button--continue { width: max-content; }
  .channel { border-radius: 14px; }
  .channel__arrow { display: none; }
  .mh__cta .pill { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 540px) {
  .nav { gap: .6rem; }
  .nav__links { max-width: calc(100vw - 3.2rem); }
  .nav__links a { font-size: .58rem; }
  .project-card__actions { align-items: stretch; flex-direction: column; }
  .project-card__actions .action-link { width: 100%; }
  .media-pair__toggle { min-height: 34px; }
  .media-pair__hint { right: calc(.55rem + 34px + .55rem); max-width: min(12rem, calc(100% - 4.95rem)); }
  .dlg__head { padding: 1rem; }
  .dlg__body { padding: 1rem; }
  .dialog__media-grid { grid-template-columns: 1fr; }
  .dialog__media-grid .media-pair--wide { grid-column: auto; }
  .project-dialog__linkedin { align-items: flex-start; }
  .project-dialog__linkedin small { line-height: 1.35; }
  .snu-footer { align-items: flex-start; flex-direction: column; }
  .consent-banner { left: .55rem; right: .55rem; bottom: .55rem; width: calc(100% - 1.1rem); }
  .consent-banner__actions-right { grid-template-columns: 1fr; }
  .consent-manage { left: .55rem; bottom: .55rem; }
  .contact__big { font-size: clamp(2.8rem, 16vw, 5rem); }
  .lightbox__head > div { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .loader { display: none !important; }
  .glitch::before, .glitch::after { display: none !important; }
  .glitch:hover, .media-pair:hover .media-pair__image { animation: none !important; transform: none !important; }
}