:root {
  color-scheme: dark;
  --bg: #080808;
  --white: #d7d7d7;
  --muted: #8a8a8a;
  --accent-a: #d75844;
  --accent-b: #e16580;
  --font: 'Kode Mono', monospace;
  --text-quote: clamp(2.25rem, 4.25vw, 4.25rem);
  --text-small: .75rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --gutter: clamp(24px, 4.5vw, 68px);
}
* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: none; overscroll-behavior-y: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; color: var(--white); background: var(--bg); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent-b); outline-offset: 6px; border-radius: 3px; }
.skip-link { position: fixed; left: var(--space-6); top: -100px; z-index: 30; padding: var(--space-3); background: var(--bg); }
.skip-link:focus { top: var(--space-6); }
.header { position: fixed; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--space-10) var(--gutter); z-index: 30; pointer-events: none; }
.header a, .header button { pointer-events: auto; }
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { width: clamp(100px, 9vw, 120px); height: auto; }
.logo:hover { opacity: .75; }
.brand-nav { display: flex; align-items: center; gap: var(--space-4); }
.nav-track { width: clamp(50px, 10vw, 134px); height: 2px; background: #292929; position: relative; }
.nav-track::after { content: ''; position: absolute; inset: 0; background: #d7d7d7; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.projects-link { font-size: 18px; font-weight: 500; color: #909090; text-decoration: none; display: grid; align-items: center; min-height: 44px; transition: color .4s; }
.projects-link:hover { color: var(--white); }
.projects-close { width: 32px; height: 44px; margin-left: -16px; opacity: 0; visibility: hidden; display: grid; place-items: center; transition: opacity .3s, visibility .3s; }
[data-view="projects"] .nav-track::after { transform: scaleX(1); }
[data-view="projects"] .projects-link { color: #eee; }
[data-view="projects"] .projects-close { opacity: 1; visibility: visible; }
.socials { display: flex; gap: var(--space-2); align-items: center; }
.social-link { width: 44px; height: 44px; display: grid; place-items: center; transition: opacity .2s; }
.social-link img { display: block; object-fit: contain; }
.social-link:hover { opacity: .7; }
.background-grid { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.render-grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .045; mix-blend-mode: soft-light; }
.home-view { transition: opacity .42s ease, filter .42s ease, visibility .42s; }
.enhanced .home-view { position: fixed; inset: 0; z-index: 2; }
[data-view="projects"] .home-view { opacity: 0; filter: blur(10px); visibility: hidden; pointer-events: none; }
[data-view="projects"] .journey-track { display: none; }
[data-view="projects"] .scroll-cue { opacity: 0; visibility: hidden; pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.enhanced .stage { display: block; }
.ambient { position: absolute; width: 75vw; height: 85vh; left: 20%; top: 2%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-a) 14%, transparent), color-mix(in srgb, var(--accent-b) 5%, transparent) 38%, transparent 70%); opacity: .8; transition: translate 1.2s cubic-bezier(.16,1,.3,1), background .8s; }
.effect-definitions { position: absolute; pointer-events: none; }
.gates .gate::before { content: ''; position: absolute; inset: 20px -35px -8px; background: radial-gradient(ellipse, color-mix(in srgb, var(--gate-light) 27%, transparent), transparent 70%); filter: blur(22px); }
.gates .gate::after { content: ''; position: absolute; left: -100px; top: 310px; width: 330px; height: 180px; background: radial-gradient(ellipse, color-mix(in srgb, var(--gate-light) 18%, transparent), transparent 68%); transform: rotate(28deg); filter: blur(17px); z-index: -1; }
.gate img { position: relative; filter: url(#art-grain); }
.ball-button img { filter: url(#art-grain); }
.ball-float, .ball-button { width: 100%; height: 100%; border-radius: 50%; }
.ball-button { display: block; pointer-events: auto; touch-action: manipulation; }
.ball-button:disabled { cursor: default; }
.ball-button::before { content: ''; position: absolute; inset: -3px; border: 1px solid var(--accent-b); border-radius: 50%; opacity: 0; pointer-events: none; }
.traveller.shaking .ball-button::before { animation: tap-pulse .56s ease-out both; }
@keyframes tap-pulse { 0% { opacity: 0; transform: scale(.94); } 22% { opacity: .55; } 100% { opacity: 0; transform: scale(1.65); } }
.ball-button:focus-visible { outline: 2px solid var(--accent-b); outline-offset: 7px; }
.traveller.idle .ball-float { animation: levitate 4.8s ease-in-out infinite; }
@keyframes levitate { 0%,100% { transform: translateY(2px) scale(1); } 50% { transform: translateY(-7px) scale(1.018); } }
.gate { position: absolute; top: 0; left: 0; width: 174px; height: 400px; transform-origin: 0 0; will-change: transform; }
.gate img { width: 100%; height: 100%; display: block; }
.gates, .gate-fronts { position: absolute; inset: 0; }
.gates { z-index: 1; }
.gate-fronts { z-index: 4; }
.traveller { position: absolute; left: 0; top: 0; width: 92px; height: 92px; transform-origin: 0 0; z-index: 3; will-change: transform, opacity; border-radius: 50%; }
.ball-button::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset -1px 1px 2px color-mix(in srgb, var(--accent-b) 34%, transparent), 0 7px 18px #0002; }
.traveller img { display: block; width: 100%; height: 100%; }
.pagination { display: none; position: fixed; z-index: 20; right: calc(var(--gutter) - 12px); top: 50%; transform: translateY(-50%); }
.enhanced .pagination { display: flex; flex-direction: column; }
.pagination::before { content: ''; position: absolute; top: 22px; bottom: 22px; width: 2px; left: calc(50% - 1px); background: #484848; }
.chapter-dot { position: relative; width: 44px; height: clamp(28px, 5.5vh, 48px); display: grid; place-items: center; text-decoration: none; }
.chapter-dot::before { content: ''; width: 14px; height: 14px; border: 1px solid #8a8a8a; border-radius: 50%; background: var(--bg); transition: width .25s, height .25s, border-color .25s, box-shadow .25s; }
.chapter-dot:hover::before { border-color: var(--white); }
.chapter-dot[aria-current="step"]::before { width: 22px; height: 22px; border: 0; background: linear-gradient(135deg, var(--dot-a), var(--dot-b)); box-shadow: 0 0 18px color-mix(in srgb, var(--dot-a) 15%, transparent); }
.chapter-title { position: absolute; right: 47px; white-space: nowrap; font-size: var(--text-small); font-weight: 400; padding: var(--space-2) var(--space-3); border-radius: 4px; background: #131313; color: #e0e0e0; opacity: 0; pointer-events: none; transition: opacity .15s; }
.chapter-dot:hover .chapter-title, .chapter-dot:focus-visible .chapter-title { opacity: 1; }
.quote { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100svh; padding: var(--space-12) max(8vw, 60px); text-align: center; }
.quote h1, .quote h2 { max-width: min(1260px, 100%); margin: 0; font-size: var(--text-quote); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; }
.quote h1 > span, .quote h2 > span:not(.inline-arrow) { display: block; white-space: nowrap; }
.quote.formula h2 { font-size: clamp(2rem, 3.65vw, 3.75rem); }
.quote.short h2 { font-size: clamp(2.5rem, 4.8vw, 4.75rem); }
.enhanced .journey-track { height: var(--journey-height, 1500vh); }
.enhanced main { height: 100%; outline: none; }
.enhanced .quote { position: fixed; inset: 0; height: 100%; min-height: 0; padding-left: max(7vw, 60px); padding-right: max(9.5vw, 100px); padding-top: 10vh; padding-bottom: 0; z-index: 8; opacity: 0; visibility: hidden; pointer-events: none; }
.enhanced .quote h1, .enhanced .quote h2 { text-shadow: 0 3px 30px #08080880; }
.enhanced .quote.current h1, .enhanced .quote.current h2 { pointer-events: auto; }
.footer { position: fixed; inset: auto 0 0; z-index: 20; pointer-events: none; height: 100px; }
.scroll-cue { display: none; position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); padding: var(--space-3) var(--space-6); pointer-events: auto; min-width: 44px; min-height: 44px; flex-direction: column; align-items: center; gap: var(--space-3); }
.enhanced .scroll-cue { display: flex; }
.arrow { display: block; width: 11px; height: 11px; border-right: 1.5px solid #ccc; border-bottom: 1.5px solid #ccc; transform: rotate(45deg); }
.scroll-cue:not(.replay) .arrow { animation: beckon 2.8s ease-in-out infinite; }
.scroll-cue.replay .arrow { transform: rotate(225deg); }
.cue-label { font-size: var(--text-small); font-weight: 300; letter-spacing: .045em; color: #999; opacity: 1; transition: opacity .3s; }
.scroll-cue.engaged:not(:hover):not(:focus-visible) .cue-label { opacity: 0; }
.signature { position: absolute; right: calc(var(--gutter) - 2px); bottom: var(--space-12); width: 48px; min-height: 44px; opacity: .9; pointer-events: auto; display: grid; place-items: center; }
.signature img { width: 100%; height: auto; }
.signature:hover { opacity: 1; }
.projects-view { position: fixed; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain; padding: 112px var(--gutter) 130px; opacity: 0; filter: blur(10px); visibility: hidden; pointer-events: none; transition: opacity .42s ease, filter .42s ease, visibility .42s; outline: none; background: radial-gradient(ellipse at 32% 78%, #e165800c, transparent 28%), radial-gradient(ellipse at 72% 30%, #80e16507, transparent 32%); }
[data-view="projects"] .projects-view { opacity: 1; filter: blur(0); visibility: visible; pointer-events: auto; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); width: min(100%, 76vw, 1140px); }
.project-slot { min-width: 0; display: flex; flex-direction: column; }
.project-number { font-size: 22px; font-weight: 600; margin-bottom: var(--space-3); }
.project-card { flex: 1; border: 2px solid #282828; background: #020202e8; padding: var(--space-6); display: flex; flex-direction: column; }
.project-cover-link { display: block; }
.project-cover { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: url(#art-grain); }
.project-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-4); }
.project-title-row h2 { font-size: clamp(16px, 1.45vw, 22px); margin: 0; font-weight: 600; letter-spacing: -.03em; }
.project-tags { display: flex; gap: var(--space-2); }
.project-tags span { font-size: 12px; font-weight: 500; line-height: 1.1; border: 1px solid currentColor; border-radius: 12px; padding: 1px 5px; }
.tag-cc0 { color: #b38a22; }
.tag-pfp { color: #87c3b2; }
.project-card p { font-size: clamp(12px, 1.05vw, 16px); line-height: 1.45; color: #acacac; margin: var(--space-4) 0 var(--space-2); }
.project-links { display: flex; justify-content: flex-end; margin-top: auto; gap: 0; }
.project-links a { width: 44px; height: 44px; display: grid; place-items: center; transition: opacity .2s; }
.project-links a:hover { opacity: .65; }
.locked .project-number { color: #777; }
.locked .project-card { background: #111111ed; align-items: center; justify-content: center; min-height: 420px; }
.lock-icon { position: relative; width: 13px; height: 13px; border-radius: 1px; background: #3b3b3b; opacity: .65; }
.lock-icon::before { content: ''; position: absolute; width: 9px; height: 10px; border: 2px solid #3b3b3b; border-bottom: 0; border-radius: 7px 7px 0 0; left: 2px; top: -7px; }
.no-script { position: absolute; top: 130px; width: 100%; text-align: center; color: var(--muted); font-size: var(--text-small); }
@keyframes beckon { 0%, 100% { translate: 0 -3px; opacity: .5; } 50% { translate: 0 3px; opacity: 1; } }
@media (min-width: 1600px) {
  :root { --text-quote: clamp(4.25rem, 4.25vw, 6rem); }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .project-grid { width: 100%; }
  .project-card { padding: var(--space-4); }
  .projects-view { padding-top: 112px; }
}
@media (max-width: 700px) {
  :root { --gutter: 20px; --text-quote: clamp(1.75rem, 8.1vw, 2.75rem); }
  .header { padding: var(--space-5) var(--gutter); }
  .logo img { width: 86px; }
  .brand-nav { gap: 8px; }
  .nav-track { width: clamp(16px, 5vw, 35px); }
  .projects-link { font-size: 13px; }
  .projects-close { margin-left: -8px; width: 28px; }
  .projects-close img { width: 12px; height: 12px; }
  .socials { gap: 0; }
  .social-link img { scale: .85; }
  .pagination { right: 0; }
  .chapter-dot { width: 36px; height: clamp(26px, 4.7svh, 35px); }
  .chapter-dot::before { width: 10px; height: 10px; border-width: 1px; }
  .chapter-dot[aria-current="step"]::before { width: 15px; height: 15px; border-width: 0; }
  .chapter-title { display: none; }
  .pagination::before { top: 17px; bottom: 17px; background: #393939; }
  .enhanced .quote { padding: 3vh var(--space-12) 0 var(--space-5); }
  .quote h1, .quote h2 { width: 100%; line-height: 1.13; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: normal; }
  .quote h1 > span, .quote h2 > span:not(.inline-arrow) { display: inline; white-space: normal; }
  .quote.formula h2 { font-size: clamp(1.75rem, 7.7vw, 2.4rem); }
  .formula .inline-arrow { display: block; line-height: .95; }
  .quote.short h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .quote.dense h2 { font-size: clamp(1.5rem, 7vw, 2.375rem); }
  .signature { right: var(--space-6); bottom: var(--space-8); width: 28px; }
  .scroll-cue { bottom: var(--space-5); }
  .ambient { width: 90vw; height: 90vw; top: 10%; left: 18%; opacity: .4; }
  .projects-view { padding: 102px var(--space-5) 110px; }
  .project-grid { grid-template-columns: 1fr; gap: var(--space-8); width: 100%; max-width: 420px; margin-inline: auto; }
  .project-title-row h2 { font-size: 20px; }
  .project-card p { font-size: 14px; }
  .project-tags span { font-size: 12px; }
  .project-card { padding: var(--space-5); }
  .locked .project-card { min-height: 340px; }
  [data-view="projects"] .header { background: linear-gradient(#080808 70%, #08080800); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .header { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .chapter-dot { height: 23px; }
  .pagination { top: 52%; }
  :root { --text-quote: clamp(1.3rem, 3.6vw, 2.6rem); }
  .quote.short h2 { font-size: 3rem; }
  .quote h1, .quote h2 { line-height: 1.05; }
  .formula .inline-arrow { display: inline; }
  .signature { bottom: var(--space-5); width: 28px; }
  .scroll-cue { bottom: var(--space-2); }
  .cue-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .header, .footer, .stage, .pagination { display: none !important; }
  .enhanced main { height: auto; }
  .enhanced .quote { position: static; visibility: visible !important; opacity: 1 !important; height: auto; min-height: 30vh; color: black; break-inside: avoid; }
  body { background: white; }
  .quote h1, .quote h2 { font-size: 24pt; text-shadow: none !important; }
}