:root {
  --black: #060708;
  --ink: #f2f0ea;
  --muted: #a5a5a0;
  --line: rgba(242,240,234,.2);
  --acid: #c7ff18;
  --shell: #b8b4aa;
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --ai-display: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--black); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 12px 16px; background: var(--ink); color: var(--black); }
.skip-link:focus { top: 16px; }
.site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 18px clamp(22px,4vw,66px); }
.brand { font: 800 20px/.9 var(--display); letter-spacing: -.08em; text-decoration: none; white-space: nowrap; }
.brand-point { color: var(--acid); }
.header-note { color: #aaa9a4; font-size: 11px; letter-spacing: .02em; }
.header-nav { display: flex; align-items: center; gap: clamp(18px,2.5vw,38px); }
.header-nav a { text-decoration: none; font-size: 12px; font-weight: 600; }
.header-nav a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-nav .world-switch { border: 1px solid var(--line); padding: 10px 13px; border-radius: 2px; }
.site-footer { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px clamp(22px,4vw,66px); border-top: 1px solid var(--line); }
.site-footer>a:last-child { color: var(--muted); font-size: 12px; text-decoration: none; }

/* The threshold is a single space: objects separate the worlds, not a divider. */
.entry-page { min-height: 100svh; overflow: hidden; }
.entry-header { position: absolute; inset: 0 0 auto; }
.threshold { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 45% 43%,#242424 0,#101111 44%,#060708 83%); }
.threshold::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .17; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 89px,#fff1 90px 91px),repeating-linear-gradient(0deg,transparent 0 89px,#fff1 90px 91px); mask-image: linear-gradient(transparent 10%,#000 55%,transparent 100%); }
.threshold-ambient { position: absolute; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; top: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle,#d4d1c61b 0,#7976670e 33%,transparent 67%); filter: blur(18px); pointer-events: none; }
.threshold-caption { position: absolute; top: 22%; left: clamp(24px,5vw,80px); z-index: 2; color: #b8b5ac; font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; writing-mode: vertical-rl; transform: rotate(180deg); }
.artifact-link { position: absolute; z-index: 2; display: block; text-decoration: none; }
.threshold-crt { width: clamp(300px,35vw,550px); top: 18%; left: 12%; transform: rotate(-2deg); }
.threshold-ai { width: clamp(320px,39vw,640px); height: min(56vh,550px); right: 7%; top: 16%; }
.artifact-note { display: block; margin-top: 15px; width: max-content; font: 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .04em; color: #c0beb8; }
.threshold-ai .artifact-note { margin-left: auto; color: #c5d59a; }
.world-choices { position: absolute; z-index: 8; inset: auto clamp(24px,5vw,80px) 8%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,70px); }
.world-choice { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: end; padding: 19px 4px 8px; border-top: 1px solid #f2f0ea80; text-decoration: none; transition: border-color .2s; }
.world-choice .choice-title { grid-column: 1; font: 800 clamp(60px,7.5vw,128px)/.83 var(--display); letter-spacing: -.105em; white-space: nowrap; }
.world-choice .choice-desc { grid-column: 1; margin-top: 12px; color: #c3c1b9; font-size: 12px; }
.world-choice .choice-arrow { grid-column: 2; grid-row: 1/3; align-self: center; font-size: 29px; font-weight: 200; }
.world-choice:hover { border-color: #fff; }
.choice-ai:hover { border-color: var(--acid); }
.choice-ai:hover .choice-arrow { color: var(--acid); }
.threshold-crt,.threshold-ai { transition: opacity .4s ease; }
.entry-footer { position: absolute; z-index: 10; bottom: 15px; left: clamp(24px,5vw,80px); right: clamp(24px,5vw,80px); display: flex; justify-content: space-between; color: #858681; font-size: 10px; }

/* A modeled computer built around the actual first-video frame. */
.crt { --crt-width: 100%; position: relative; width: var(--crt-width); aspect-ratio: 1.06 / 1; filter: drop-shadow(25px 36px 34px #000a); }
.crt-shell { position: relative; z-index: 2; width: 100%; height: 83%; padding: 7% 8% 0; border-radius: 23px; background: linear-gradient(125deg,#e5e2d8 0,#c8c6bd 37%,#a5a69f 78%,#8a8b85 100%); box-shadow: inset 4px 4px 3px #fff8,inset -8px -9px 14px #53575050,4px 7px 0 #444744; }
.crt-shell::after { content: ""; position: absolute; z-index: -1; width: 5%; height: 73%; right: -4%; top: 8%; border-radius: 0 12px 12px 0; background: linear-gradient(90deg,#72756e,#343837); }
.crt-bezel { position: relative; height: 77%; padding: 4%; border-radius: 15px 15px 22px 22px; background: linear-gradient(150deg,#5a5e5b,#171b1c 45%,#424744); box-shadow: inset 2px 2px 6px #090b0b,0 0 0 1px #898d86; }
.crt-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 47% / 13%; background: #080909; box-shadow: inset 0 0 25px 12px #000,0 0 22px #fff2; }
.crt-screen video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .94; filter: contrast(1.08) saturate(.92); }
.crt-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 25px 12px #000b; background: radial-gradient(ellipse at 50% 35%,#fff2,transparent 55%); }
.crt-scan { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .28; background: repeating-linear-gradient(0deg,transparent 0 3px,#000b 4px 5px); }
.crt-chin { height: 23%; display: flex; align-items: center; gap: 8%; padding: 0 2%; }
.crt-name { color: #41443f; font: 700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .06em; white-space: nowrap; }
.crt-light { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #a3c961; box-shadow: 0 0 5px #bee36a; }
.crt-neck { position: relative; z-index: 1; width: 40%; height: 11%; margin: -1px auto 0; background: linear-gradient(90deg,#636761,#acaea4 30%,#666b69 92%); clip-path: polygon(5% 0,93% 0,79% 100%,19% 100%); }
.crt-foot { position: relative; z-index: 1; width: 60%; height: 6%; margin: -1px auto; border-radius: 48% 48% 9px 9px; background: linear-gradient(#c7c8bf,#7e837f); box-shadow: 7px 10px 9px #0006; }
/* A single dimensional object gives the AI entrance a quieter identity. */
.ai-device { position: relative; width: 100%; height: 100%; perspective: 1100px; }
.ai-device-shadow { position: absolute; width: 68%; height: 13%; left: 19%; bottom: 0; border-radius: 50%; background: #000; filter: blur(25px); opacity: .75; }
.ai-device-body { position: absolute; width: 73%; height: 84%; left: 13%; top: 4%; transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg); transform-style: preserve-3d; border: 1px solid #aeb5ae55; border-radius: 17px; background: linear-gradient(145deg,#8b938e,#343b3b 13%,#121719 30%,#060809 70%,#313737); box-shadow: inset 2px 2px 2px #fff5,inset -5px -5px 9px #000,16px 12px 0 #262e2e,23px 24px 19px #000a,0 0 42px #b4e86f12; }
.ai-device-body::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -10px; height: 2px; background: linear-gradient(90deg,transparent,#c7ff1870 25%,#c7ff18 50%,#c7ff1870 75%,transparent); box-shadow: 0 0 16px #c7ff1890; }
.ai-device-face { position: absolute; inset: 5%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 6%; border: 1px solid #87918d4d; border-radius: 8px; background: radial-gradient(ellipse 85% 95% at 80% 10%,#26302e 0,#12191b 35%,#050708 85%); box-shadow: inset 0 0 45px #000,0 0 0 1px #000; }
.ai-device-face::before { content: ""; position: absolute; width: 50%; height: 150%; top: -25%; left: -70%; transform: rotate(28deg); background: linear-gradient(90deg,transparent,#dcefe50d,transparent); animation: ai-surface-light 12s ease-in-out infinite; pointer-events: none; }
.ai-device-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(145deg,#fff2,transparent 25%,transparent 70%,#b4e2d109); }
.ai-device-eyebrow,.ai-device-index { position: relative; z-index: 1; color: #98a69e; font: 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .12em; }
.ai-device-index { align-self: flex-end; color: var(--acid); }
.ai-device-mark { position: relative; z-index: 1; font: 800 clamp(70px,8.2vw,142px)/.73 var(--display); letter-spacing: -.11em; color: #f2f5ef; }
.ai-device-mark em { color: var(--acid); font-style: normal; }
@keyframes ai-surface-light { 0%,58%,100% { left: -70%; } 75% { left: 125%; } }

/* JUFU: the first screen becomes the first chapter. */
.personal-page { background: #070807; }
.personal-hero { min-height: calc(100svh - 76px); display: grid; grid-template-columns: minmax(300px,.9fr) minmax(400px,1.1fr); align-items: center; position: relative; isolation: isolate; overflow: hidden; padding: 8vh clamp(24px,6vw,100px) 10vh; background: radial-gradient(ellipse 40% 55% at 76% 45%,#45423b 0,#171917 45%,#070807 100%); }
.personal-hero::before { content: "2013"; position: absolute; z-index: -1; bottom: -.12em; left: -3vw; font: 800 clamp(240px,31vw,620px)/1 var(--display); letter-spacing: -.12em; color: #ffffff09; pointer-events: none; }
.personal-glow { position: absolute; z-index: -1; width: 42vw; height: 42vw; top: 10%; right: 9%; border-radius: 50%; background: #d8be8544; filter: blur(110px); }
.personal-opening { position: relative; z-index: 4; max-width: 570px; }
.archive-index { color: #b9b5a8; font: 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .07em; }
.personal-opening h1 { margin: 30px 0 22px; font: 800 clamp(70px,8.3vw,150px)/.8 var(--display); letter-spacing: -.105em; }
.personal-opening h1 em { font-style: normal; color: #c8bba1; }
.personal-opening>p:not(.archive-index) { max-width: 430px; color: #d3d0c8; font-size: clamp(15px,1.3vw,18px); line-height: 1.48; }
.underlined-link { display: inline-flex; justify-content: space-between; gap: 25px; min-width: 180px; padding: 12px 0 9px; margin-top: 14px; border-bottom: 1px solid #e7e1d5; text-decoration: none; font-size: 13px; font-weight: 600; }
.underlined-link:hover { color: #d3c2a5; border-color: #d3c2a5; }
.personal-machine { position: relative; z-index: 2; justify-self: center; width: min(100%,640px); transform: rotate(3deg); }
.personal-machine .crt { width: 100%; }
.hero-tail { position: absolute; left: clamp(24px,6vw,100px); right: clamp(24px,6vw,100px); bottom: 24px; display: flex; justify-content: space-between; color: #9c9c96; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.selected-work,.music-end { padding: clamp(78px,10vw,160px) clamp(24px,6vw,100px); }
.section-topline { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); color: #a5a49d; font: 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.selected-work h2,.music-end h2 { margin: 50px 0; font: 800 clamp(60px,10vw,160px)/.83 var(--display); letter-spacing: -.1em; }

/* The archive moves like a strip of scenes instead of a row of dates and dots. */
.archive-timeline { position: relative; min-height: 100svh; background: #0c0d0c; }
.timeline-sticky { position: relative; height: 100svh; min-height: 650px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 45% 40%,#242722,#101211 55%,#0a0c0b 100%); }
.timeline-sticky::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .11; background: repeating-linear-gradient(90deg,transparent 0 119px,#fff2 120px 121px); }
.archive-timeline.is-pinned .timeline-sticky { position: sticky; top: 0; }
.timeline-head { position: relative; z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: clamp(25px,4vw,65px) clamp(24px,6vw,100px) clamp(18px,2vw,32px); }
.timeline-head .archive-index { margin: 0 0 17px; }
.timeline-head h2 { margin: 0; font: 800 clamp(52px,6.6vw,114px)/.8 var(--display); letter-spacing: -.095em; }
.timeline-head h2 em { color: #c4b899; font-style: normal; }
.timeline-controls { display: flex; align-items: center; gap: 8px; }
.timeline-count { min-width: 70px; margin-right: 12px; color: #b4b5ae; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; }
.timeline-controls button { width: 43px; height: 43px; border: 1px solid #c2c3ba88; border-radius: 50%; background: #0b0d0c99; color: #f1efe8; cursor: pointer; font-size: 20px; transition: background .2s,border-color .2s; }
.timeline-controls button:hover:not(:disabled) { background: #e8e4d8; border-color: #e8e4d8; color: #111; }
.timeline-controls button:disabled { opacity: .32; cursor: default; }
.timeline-viewport { position: relative; min-height: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.timeline-viewport::-webkit-scrollbar { display: none; }
.archive-timeline.is-pinned .timeline-viewport { overflow: hidden; }
.timeline-track { display: flex; align-items: stretch; gap: clamp(20px,3vw,60px); width: max-content; height: 100%; padding: 0 clamp(24px,6vw,100px); will-change: transform; }
.timeline-panel { position: relative; flex: 0 0 min(76vw,1280px); height: 100%; min-height: 300px; overflow: hidden; border: 1px solid #aeb3a666; background: linear-gradient(115deg,#20241e 0,#121713 60%,#30332a 100%); isolation: isolate; }
.timeline-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: repeating-linear-gradient(0deg,transparent 0 4px,#000 5px 6px); pointer-events: none; }
.timeline-panel-music { background: linear-gradient(125deg,#231c1d,#131015 55%,#403035); }
.timeline-panel-visual { background: linear-gradient(125deg,#182127,#0d1116 58%,#293a3c); }
.timeline-panel-now { background: linear-gradient(125deg,#292a23,#111411 60%,#343c2c); }
.timeline-ghost { position: absolute; z-index: -1; left: -2%; bottom: -.18em; color: #fff1; font: 800 clamp(190px,26vw,520px)/.75 var(--display); letter-spacing: -.12em; white-space: nowrap; transform: translateX(var(--ghost-shift,0px)); pointer-events: none; }
.timeline-copy { position: absolute; z-index: 3; left: 5%; top: 12%; width: 43%; }
.timeline-kicker { color: #d1c5ab; font: 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .1em; }
.timeline-copy h3 { margin: clamp(22px,4vw,75px) 0 18px; font: 800 clamp(58px,6.1vw,112px)/.8 var(--display); letter-spacing: -.095em; }
.timeline-copy p { max-width: 340px; color: #d5d7ce; font-size: clamp(15px,1.3vw,21px); line-height: 1.3; }
.timeline-next-link { display: inline-block; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid #e3e5da; text-decoration: none; font-size: 13px; font-weight: 600; }
.timeline-art { position: absolute; z-index: 2; width: 49%; height: 74%; right: 5%; top: 11%; transform: translateY(var(--art-shift,0px)) rotate(-3deg); filter: drop-shadow(22px 25px 20px #0008); }
.timeline-panel-music .timeline-copy,.timeline-panel-now .timeline-copy { left: auto; right: 5%; width: 39%; }
.timeline-panel-music .timeline-art,.timeline-panel-now .timeline-art { left: 5%; right: auto; width: 47%; }
.timeline-panel-visual .timeline-art { top: 7%; right: 3%; width: 54%; height: 84%; }
.timeline-panel-music .timeline-art { transform: translateY(var(--art-shift,0px)) rotate(3deg); }
.timeline-panel-visual .timeline-art { transform: translateY(var(--art-shift,0px)) rotate(-2deg); }
.timeline-panel-now .timeline-art { transform: translateY(var(--art-shift,0px)) rotate(2deg); }
.timeline-image-slot { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px,3vw,50px); border: 10px solid #e9e6dc; background: radial-gradient(ellipse at 80% 22%,#665e4f,#282a27 50%,#121512); box-shadow: inset 0 0 40px #0009; }
.timeline-panel-music .timeline-image-slot { background: radial-gradient(ellipse at 72% 20%,#6b3a43,#22171d 56%,#0e1112); }
.timeline-panel-visual .timeline-image-slot { background: radial-gradient(ellipse at 70% 20%,#49676d,#19252b 55%,#0d1114); }
.timeline-panel-now .timeline-image-slot { background: radial-gradient(ellipse at 70% 20%,#647251,#272d24 55%,#0d1110); }
.timeline-image-slot::before { content: ""; position: absolute; inset: 0; opacity: .35; background: linear-gradient(135deg,transparent 49.9%,#fff5 50%,transparent 50.1%); }
.timeline-image-slot span,.timeline-image-slot small { z-index: 1; color: #edece2; font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .13em; }
.timeline-image-slot strong { z-index: 1; align-self: center; text-align: center; color: #f5f3e9; font: 700 clamp(28px,3vw,58px)/.92 var(--display); letter-spacing: -.065em; }
.timeline-image-slot small { align-self: flex-end; }
.timeline-art-tag { position: absolute; right: -5%; bottom: -20px; padding: 10px 14px; background: #e9e6dc; color: #20211e; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; transform: rotate(4deg); }
.timeline-foot { position: relative; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 22px clamp(24px,6vw,100px) clamp(24px,3vw,50px); color: #aaa9a1; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .06em; }
.timeline-progress { position: relative; flex: 1; height: 24px; padding: 0; border: 0; background: linear-gradient(#c5c6bc55,#c5c6bc55) center / 100% 1px no-repeat; cursor: pointer; }
.timeline-progress span { position: absolute; left: 0; top: 11px; display: block; width: var(--timeline-progress,0%); height: 2px; background: #eee8d8; box-shadow: 0 0 8px #fff8; pointer-events: none; }
.timeline-progress:focus-visible { outline: 1px solid #e8e2d2; outline-offset: 2px; }
.timeline-instruction { margin-left: 34px; }
.media-placeholder { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; min-height: 220px; padding: clamp(18px,3vw,42px); overflow: hidden; border: 1px solid #a6ada35e; background: radial-gradient(ellipse at 80% 20%,#39413c 0,#161b19 42%,#0b0e0d 100%); color: #e7e9e3; }
.media-placeholder::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none; background: linear-gradient(135deg,transparent 49.92%,#b6c7b34d 50%,transparent 50.08%); }
.media-placeholder span,.media-placeholder small { font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .1em; color: #b7c2b3; }
.media-placeholder strong { max-width: 80%; font: 700 clamp(26px,3vw,48px)/.95 var(--display); letter-spacing: -.055em; }
.media-placeholder small { align-self: flex-end; }
.work-frames figcaption { padding-top: 10px; color: #9e9e97; font: 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.selected-work { background: #e9e5de; color: #161715; }
.selected-work .section-topline { border-color: #16171566; color: #53534e; }
.work-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.work-intro h2 { margin-bottom: 40px; }
.work-intro p { max-width: 240px; margin-bottom: 48px; font-size: 18px; line-height: 1.25; }
.work-frames { display: grid; grid-template-columns: 1.45fr .55fr; gap: 20px; align-items: end; }
.work-frames figure { margin: 0; }
.work-frames figure:first-child .media-placeholder { aspect-ratio: 1.35; }
.work-frames figure:last-child .media-placeholder { aspect-ratio: .8; }
.selected-work .media-placeholder { background: radial-gradient(ellipse at 70% 20%,#444945 0,#202522 50%,#0c100e 100%); }
.selected-work .underlined-link { border-color: #161715; margin-top: 40px; }
.music-end { min-height: 75vh; background: radial-gradient(circle at 75% 55%,#2b2730,#09090a 65%); }
.music-end>p { color: #cac8c1; font-size: 20px; }
.social-links { display: flex; gap: clamp(20px,3vw,60px); margin-top: 90px; }
.social-links a { padding-bottom: 8px; border-bottom: 1px solid #c1c1ba; text-decoration: none; font-size: 14px; }

.personal-about,.personal-film,.personal-credits { padding: clamp(78px,10vw,160px) clamp(24px,6vw,100px); }
.personal-about { background: #151713; color: #f0eee7; }
.about-layout,.film-layout,.credits-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,7vw,140px); }
.about-layout { align-items: start; padding: clamp(62px,9vw,130px) 0 80px; }
.personal-about h2,.personal-film h2,.personal-credits h2 { margin: 16px 0 0; font: 800 clamp(64px,10vw,150px)/.86 var(--display); letter-spacing: -.09em; }
.personal-about h2 em,.personal-film h2 em { font-style: normal; color: #c3b79a; }
.about-story { max-width: 610px; }
.about-portraits { display: flex; align-items: flex-start; gap: clamp(12px,2vw,30px); }
.about-portrait { flex: 0 0 clamp(155px,17vw,260px); min-width: 0; margin: clamp(32px,5vw,72px) 0 0; }
.about-portrait--night { flex-basis: clamp(125px,12vw,190px); margin-top: clamp(70px,9vw,140px); }
.about-portrait-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.about-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 24%; filter: saturate(.8); }
.about-portrait figcaption { margin-top: 10px; color: #a7aaa1; font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; text-transform: uppercase; }
.about-story p { margin: 0 0 27px; font-size: clamp(18px,1.5vw,25px); line-height: 1.4; color: #c9c9c1; }
.about-story strong { color: #f3f0e9; }
.about-story .about-signoff { margin-top: 55px; color: #eee9db; font: 800 clamp(38px,5vw,70px)/1 var(--display); letter-spacing: -.06em; }
.practice-list { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #ffffff3a; padding-top: 22px; }
.practice-list span { padding: 11px 15px; border: 1px solid #ffffff3a; border-radius: 100px; color: #d0d0c8; font-size: 12px; }
.selected-work .work-frames { grid-template-columns: 1.45fr .75fr .75fr; align-items: stretch; gap: 14px; }
.selected-work .work-frames figure { min-width: 0; }
.selected-work .work-frames img { display: block; width: 100%; height: clamp(340px,43vw,670px); object-fit: cover; }
.selected-work .work-frames figure:first-child img { object-position: center; }
.selected-work .work-frames figcaption { color: #444943; }
.personal-film { background: #090b0b; color: #f1eee6; }
.film-layout { align-items: center; padding-top: clamp(58px,8vw,120px); }
.film-layout>div>p:not(.archive-index) { max-width: 420px; margin: 32px 0; color: #babdb8; font-size: 19px; line-height: 1.35; }
.film-poster { position: relative; display: block; height: clamp(360px,44vw,680px); overflow: hidden; background: #232723; }
.film-poster img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: transform .7s cubic-bezier(.2,.8,.2,1),filter .7s; }
.film-poster:hover img,.film-poster:focus-visible img { transform: scale(1.04); filter: brightness(.9); }
.film-poster span { position: absolute; bottom: 25px; left: 25px; padding: 12px 15px; border: 1px solid #ffffffa0; background: #0b0d0ba8; color: #fff; font: 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; }
.personal-credits { background: #e9e5de; color: #151715; }
.personal-credits .section-topline { border-color: #15171566; color: #4b4d47; }
.credits-layout { align-items: start; padding-top: clamp(65px,8vw,120px); }
.credits-layout>div>p { max-width: 420px; margin: 0 0 30px; font-size: 20px; line-height: 1.35; }
.credits-layout ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; margin: 0; padding: 0; list-style: none; }
.credits-layout li { padding: 18px 0; border-top: 1px solid #15171550; font: 700 clamp(20px,2vw,32px)/1 var(--display); letter-spacing: -.04em; }
.credits-layout .credits-footnote { margin: 34px 0 0; color: #55574f; font: 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.credits-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: clamp(56px,7vw,108px) 0 clamp(40px,5vw,75px); }
.credits-intro h2 { margin: 0; }
.credits-intro p { max-width: 330px; margin: 0 0 6px; color: #51534d; font-size: clamp(16px,1.4vw,21px); line-height: 1.32; }
.credits-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid #151715; list-style: none; }
.credits-grid li { display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(170px,19vw,300px); padding: 20px clamp(14px,2vw,36px) 25px 0; border-bottom: 1px solid #151715; overflow: hidden; }
.credits-grid li:not(:nth-child(3n+1)) { padding-left: clamp(14px,2vw,36px); border-left: 1px solid #15171545; }
.credits-grid li span { color: #676a62; font: 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.credits-grid li strong { font: 750 clamp(31px,3.7vw,68px)/.9 var(--display); letter-spacing: -.075em; }

/* JUFU AI: a composed view of several kinds of practice. */
.ai-page { background: #08090a; }
.ai-page .brand-point { color: var(--acid); }
.ai-header { background: #08090a; }
.ai-page .ai-header { position: sticky; top: 12px; z-index: 50; width: calc(100% - 32px); min-height: 64px; margin: 12px auto; padding: 10px clamp(20px,2vw,34px); border: 1px solid rgba(213,229,216,.22); border-radius: 100px; background: rgba(22,27,25,.68); box-shadow: 0 14px 42px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); }
.ai-page .ai-header .world-switch { border-color: rgba(199,255,24,.52); border-radius: 100px; padding: 10px 17px; }
.ai-page .ai-header .world-switch:hover { background: var(--acid); color: #0c1305; text-decoration: none; }
.ai-page section[id] { scroll-margin-top: 95px; }
.ai-hero { position: relative; min-height: calc(100svh - 76px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2vw; overflow: hidden; padding: 7vh clamp(24px,6vw,100px) 9vh; isolation: isolate; background: radial-gradient(ellipse 50% 60% at 75% 44%,#1e2421 0,#0e1112 52%,#08090a 100%); }
.ai-hero-field { position: absolute; inset: 0; z-index: -1; opacity: .28; background: linear-gradient(#cdd0d618 1px,transparent 1px),linear-gradient(90deg,#cdd0d618 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg,transparent 10%,#000 100%); }
.ai-hero-copy { position: relative; z-index: 5; max-width: 650px; }
.ai-identifier { margin: 0 0 34px; color: var(--acid); font: 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .06em; }
.ai-identifier { display: flex; align-items: center; gap: 12px; }
.ai-identifier-mark { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.ai-hero h1 { margin: 0 0 27px; font: 700 clamp(70px,7.4vw,132px)/.88 var(--ai-display); letter-spacing: -.075em; text-transform: uppercase; }
.ai-hero h1 span { color: var(--acid); }
.ai-hero-copy>p:not(.ai-identifier) { max-width: 420px; color: #d0d4d1; font-size: clamp(16px,1.4vw,20px); line-height: 1.36; letter-spacing: -.02em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.action-primary,.action-secondary { display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; min-height: 48px; padding: 13px 16px; text-decoration: none; font-size: 12px; font-weight: 700; }
.action-primary { background: var(--acid); color: #121608; }
.action-primary:hover { background: #ebffac; }
.action-secondary { border: 1px solid #d8ddd477; color: #f2f4ee; }
.action-secondary:hover { border-color: var(--acid); color: var(--acid); }
.ai-hero-visual { position: relative; z-index: 2; width: 100%; }
.ai-hero-person { justify-self: end; align-self: stretch; max-width: 660px; min-height: 600px; margin: 0; display: flex; align-items: end; justify-content: center; background: radial-gradient(ellipse 48% 38% at 50% 48%,#9de63020,transparent 100%); }
.ai-hero-person::before { position: absolute; inset: 10% 5% 8%; content: ""; border: 1px solid #b8d99b1c; border-radius: 50%; box-shadow: 0 0 100px #a8e30b0d; }
.ai-hero-person img { position: relative; display: block; width: min(100%,590px); max-height: min(78svh,790px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 55px #000b); mask-image: linear-gradient(#000 0%,#000 81%,transparent 100%); }
.ai-hero-person figcaption { position: absolute; left: 7%; right: 7%; bottom: 8%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 12px; border-top: 1px solid #b6d3a35c; color: #d5dfcd; font: 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .09em; }
.ai-hero-person figcaption a { color: #eff5e6; text-decoration: none; white-space: nowrap; }
.ai-hero-person figcaption a:hover { color: var(--acid); }
.ai-hero-foot { position: absolute; left: clamp(24px,6vw,100px); right: clamp(24px,6vw,100px); bottom: 20px; display: flex; justify-content: space-between; color: #a0aa9a; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ai-routes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #dce3d544; border-bottom: 1px solid #dce3d544; }
.ai-routes a { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: clamp(30px,5vw,70px) clamp(24px,6vw,100px); text-decoration: none; }
.ai-routes a:first-child { border-right: 1px solid #dce3d544; }
.ai-routes a>span:first-child { grid-column: 1/3; color: #9ba69b; font-size: 12px; }
.ai-routes strong { font: 700 clamp(28px,3.6vw,58px)/1 var(--ai-display); letter-spacing: -.055em; }
.ai-routes a>span:last-child { color: var(--acid); font-size: 25px; }
.ai-routes a:hover { background: #151a17; }
.ai-explore,.ai-for-brands { padding: clamp(78px,9vw,150px) clamp(24px,6vw,100px); }
.ai-explore-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.ai-explore-heading h2,.ai-for-brands h2 { margin: 55px 0 55px; font: 700 clamp(58px,7vw,120px)/.95 var(--ai-display); letter-spacing: -.075em; }
.ai-explore-heading p { max-width: 290px; margin: 0 0 60px; color: #bbc0b9; font-size: 18px; line-height: 1.25; }
.ai-work-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ai-work-card { min-width: 0; background: #15181a; }
.ai-work-media { height: clamp(280px,34vw,540px); overflow: hidden; background: #111; }
.ai-work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.ai-work-card:hover .ai-work-media img { transform: scale(1.045); }
.ai-work-tool .ai-work-media img { object-position: left center; }
.ai-work-meta { padding: 22px 20px 30px; }
.ai-work-meta>span { color: var(--acid); font: 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ai-work-meta h3 { margin: 16px 0 9px; font: 700 clamp(28px,2.9vw,44px)/1 var(--ai-display); letter-spacing: -.055em; }
.ai-work-meta p { margin: 0; max-width: 280px; color: #b7bcb6; font-size: 13px; line-height: 1.4; }
.ai-work-meta a { display: inline-block; margin-top: 18px; border-bottom: 1px solid var(--acid); padding-bottom: 5px; text-decoration: none; font-size: 12px; }
.daily-art { height: clamp(280px,34vw,540px); display: flex; flex-direction: column; justify-content: center; padding: 8%; overflow: hidden; background: radial-gradient(circle at 70% 40%,#303b1b,#111416 58%); color: #f0f1ed; }
.daily-art span { font: 700 clamp(58px,7vw,125px)/.85 var(--ai-display); letter-spacing: -.08em; }
.daily-art em { font: italic 400 clamp(50px,6vw,115px)/.8 Georgia,serif; letter-spacing: -.08em; color: var(--acid); }
.daily-art b { margin-top: 45px; font-size: 13px; }
.ai-for-brands { background: #c7ff18; color: #101507; }
.ai-for-brands .section-topline { border-color: #10150766; color: #27330d; }
.brands-inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: end; }
.brands-inner h2 { margin-bottom: 0; }
.brands-inner>div { max-width: 470px; justify-self: end; }
.brands-inner p { margin: 0 0 26px; font-size: clamp(18px,2vw,27px); line-height: 1.19; letter-spacing: -.03em; }
.ai-for-brands .action-primary { background: #11160b; color: #f0f2ec; }
.ai-for-brands .action-primary:hover { background: #293c0e; }
.brands-secondary { display: block; width: max-content; margin-top: 20px; border-bottom: 1px solid #11160b; padding-bottom: 4px; text-decoration: none; font-size: 12px; }

/* Three intentions are the public entrance to the AI practice. */
.ai-routes { grid-template-columns: repeat(3,minmax(0,1fr)); scroll-margin-top: 20px; }
.ai-routes a { position: relative; align-content: space-between; min-height: clamp(230px,21vw,360px); padding: clamp(28px,4vw,62px) clamp(24px,3vw,56px); transition: background .2s ease; }
.ai-routes a:not(:last-child) { border-right: 1px solid #dce3d544; }
.ai-routes a>span:first-child { font-size: 14px; color: #d1d8cd; }
.ai-routes strong { max-width: 9ch; font-size: clamp(32px,4vw,70px); }
.ai-routes a:nth-child(2) { background: #151c15; }
.ai-routes a:hover { background: #24301b; }
.ai-offer-section,.ai-learn-section { padding: clamp(78px,9vw,150px) clamp(24px,6vw,100px); scroll-margin-top: 20px; }
.ai-path-heading { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(220px,.7fr); align-items: end; gap: 40px; }
.ai-path-heading h2 { margin: 48px 0 65px; font: 700 clamp(58px,7vw,120px)/.94 var(--ai-display); letter-spacing: -.075em; }
.ai-path-heading p { max-width: 390px; margin: 0 0 65px; color: #c8cec5; font-size: clamp(17px,1.5vw,23px); line-height: 1.32; }
.ai-offer-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #dce3d555; }
.ai-offer-list article { display: flex; min-height: 330px; flex-direction: column; align-items: flex-start; padding: 35px clamp(0px,3vw,50px) 30px 0; }
.ai-offer-list article + article { padding-left: clamp(25px,3vw,50px); border-left: 1px solid #dce3d555; }
.ai-offer-kind,.ai-method span { color: var(--acid); font: 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ai-offer-list h3 { margin: 18px 0 15px; font: 700 clamp(46px,5vw,82px)/.9 var(--ai-display); letter-spacing: -.065em; }
.ai-offer-list p { max-width: 490px; margin: 0 0 34px; color: #c1c9bf; font-size: clamp(16px,1.4vw,21px); line-height: 1.35; }
.ai-offer-status { margin-top: auto; padding: 8px 0; border-top: 1px solid #dce3d555; color: #a6afa4; font-size: 12px; }
.ai-offer-link { display: inline-block; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid var(--acid); font-size: 13px; text-decoration: none; }
.ai-learn-section { background: #121713; }
.ai-method { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #dce3d555; }
.ai-method>div { min-height: 285px; padding: 30px 26px 25px 0; }
.ai-method>div + div { padding-left: 26px; border-left: 1px solid #dce3d555; }
.ai-method h3 { max-width: 12ch; margin: 24px 0 13px; font: 600 clamp(26px,2.7vw,44px)/1 var(--ai-display); letter-spacing: -.05em; }
.ai-method p { max-width: 300px; color: #b8c1b7; font-size: 15px; line-height: 1.4; }
.ai-learn-footer { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-top: 24px; border-top: 1px solid #dce3d555; }
.ai-learn-footer p { max-width: 500px; margin: 0; color: #b8c1b7; font-size: 14px; line-height: 1.4; }
.ai-learn-footer a { flex: 0 0 auto; border-bottom: 1px solid var(--acid); padding-bottom: 5px; text-decoration: none; font-size: 13px; }
.ai-service-links { border-top: 1px solid #10150788; }
.ai-service-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 18px 0; border-bottom: 1px solid #10150788; text-decoration: none; }
.ai-service-links a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.ai-service-links strong { font-size: clamp(17px,1.7vw,23px); }
.ai-service-links span { flex: 0 0 auto; font-size: 12px; }
@media (max-width: 760px) {
  .ai-routes { grid-template-columns: 1fr; }
  .ai-routes a { min-height: 170px; padding: 25px 20px; }
  .ai-routes a:not(:last-child) { border-right: 0; border-bottom: 1px solid #dce3d544; }
  .ai-routes strong { font-size: clamp(36px,11vw,62px); }
  .ai-offer-section,.ai-learn-section { padding: 75px 20px; }
  .ai-path-heading { display: block; }
  .ai-path-heading h2 { margin: 38px 0 22px; font-size: clamp(52px,13vw,86px); }
  .ai-path-heading p { margin: 0 0 44px; font-size: 17px; }
  .ai-offer-list,.ai-method { grid-template-columns: 1fr; }
  .ai-offer-list article,.ai-method>div { min-height: 0; padding: 28px 0 35px; }
  .ai-offer-list article + article,.ai-method>div + div { padding: 28px 0 35px; border-left: 0; border-top: 1px solid #dce3d555; }
  .ai-offer-list h3 { font-size: 52px; }
  .ai-method h3 { margin: 18px 0 10px; }
  .ai-learn-footer { display: block; }
  .ai-learn-footer a { display: inline-block; margin-top: 20px; }
  .ai-service-links a { display: block; }
  .ai-service-links span { display: block; margin-top: 6px; }
}

@media (prefers-reduced-motion: no-preference) {
  .personal-page .daylight-intro { animation: personal-intro-enter .85s cubic-bezier(.2,.72,.2,1) both; }
  .personal-page .daylight-portrait { animation: personal-portrait-enter 1s .15s cubic-bezier(.2,.72,.2,1) both; }
  .personal-motion-ready .daylight-place img { transform: scale(1.07); transition: transform 1.3s cubic-bezier(.2,.72,.2,1); }
  .personal-motion-ready .daylight-place.is-visible img { transform: scale(1); }
  .personal-motion-ready .daylight-story-intro,.personal-motion-ready .daylight-chapter { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .75s cubic-bezier(.2,.72,.2,1); }
  .personal-motion-ready .daylight-story-intro.is-visible,.personal-motion-ready .daylight-chapter.is-visible { opacity: 1; transform: translateY(0); }
  @keyframes personal-intro-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes personal-portrait-enter { from { opacity: 0; transform: translateY(34px) rotate(4deg); } to { opacity: 1; transform: translateY(0) rotate(2deg); } }
}

/* Scroll changes the relationship of the objects rather than animating each line of copy. */
.personal-machine { transform: translateY(var(--shift-near,0px)) rotate(3deg); }
.personal-opening { transform: translateY(var(--shift-far,0px)); }
.selected-work .work-frames img,.ai-explore .ai-work-media img { clip-path: inset(0 0 var(--reveal-inset,0%) 0); }
.selected-work .work-frames img { transition: clip-path .08s linear; }
.ai-hero-visual { transform: translateY(var(--shift-near,0px)); }
.ai-explore .ai-work-card:nth-child(2) { transform: translateY(var(--shift-near,0px)); }
.ai-explore .ai-work-card:nth-child(3) { transform: translateY(var(--shift-far,0px)); }

/* Phone art direction: one composition, visible destinations, one tap. */
@media (max-width: 760px) {
  .site-header { min-height: 65px; padding: 16px 20px; }
  .brand { font-size: 18px; }
  .header-note { max-width: 100px; text-align: right; font-size: 10px; }
  .header-nav { gap: 12px; }
  .header-nav a { font-size: 11px; }
  .header-nav a:not(.world-switch) { display: none; }
  .header-nav .world-switch { padding: 8px 10px; }
  .threshold { min-height: 100svh; background: radial-gradient(ellipse 75% 45% at 45% 33%,#252724,#0b0d0d 75%,#060708); }
  .threshold-caption { display: none; }
  .threshold-crt { width: min(62vw,280px); top: 14%; left: 10%; transform: rotate(-3deg); }
  .threshold-ai { width: min(53vw,240px); height: 32svh; min-height: 190px; top: 32%; right: 3%; }
  .threshold-ai .ai-device-mark { font-size: clamp(38px,10vw,52px); }
  .threshold-ai .artifact-note { display: none; }
  .threshold-crt .artifact-note { position: absolute; bottom: -4px; left: -2%; font-size: 8px; }
  .world-choices { left: 20px; right: 20px; bottom: max(55px,env(safe-area-inset-bottom) + 40px); display: block; }
  .world-choice { min-height: 66px; grid-template-columns: 1fr auto; padding: 10px 2px 11px; }
  .world-choice .choice-title { font-size: clamp(47px,12vw,69px); line-height: .8; }
  .world-choice .choice-desc { margin-top: 7px; font-size: 10px; }
  .world-choice .choice-arrow { font-size: 23px; }
  .entry-footer { left: 20px; right: 20px; bottom: max(12px,env(safe-area-inset-bottom) + 5px); font-size: 9px; }
  .personal-hero { min-height: calc(100svh - 65px); display: flex; flex-direction: column; justify-content: flex-start; padding: 45px 20px 65px; background: radial-gradient(ellipse 85% 44% at 63% 63%,#3e3b33,#0a0b09 80%); }
  .personal-hero::before { font-size: 55vw; bottom: 5%; }
  .personal-glow { width: 60vw; height: 60vw; top: 42%; right: 9%; filter: blur(60px); }
  .personal-opening { width: 100%; }
  .archive-index { font-size: 9px; }
  .personal-opening h1 { margin: 16px 0 15px; font-size: clamp(59px,15.5vw,100px); }
  .personal-opening>p:not(.archive-index) { max-width: 335px; font-size: 14px; line-height: 1.4; }
  .personal-opening .underlined-link { margin-top: 5px; font-size: 12px; }
  .personal-machine { width: min(70vw,370px); margin: 12px auto 20px; transform: rotate(3deg); }
  .hero-tail { left: 20px; right: 20px; bottom: 17px; font-size: 9px; }
  .selected-work,.music-end { padding: 75px 20px; }
  .section-topline { font-size: 9px; }
  .selected-work h2,.music-end h2 { margin: 36px 0; font-size: clamp(58px,15vw,100px); }
  .archive-timeline { min-height: 0; }
  .timeline-sticky { height: auto; min-height: 0; display: block; padding: 0 0 24px; }
  .timeline-head { display: block; padding: 52px 20px 22px; }
  .timeline-head .archive-index { font-size: 9px; margin-bottom: 16px; }
  .timeline-head h2 { font-size: clamp(48px,12vw,74px); }
  .timeline-controls { justify-content: flex-end; margin-top: 24px; }
  .timeline-count { margin-right: auto; }
  .timeline-controls button { width: 40px; height: 40px; }
  .timeline-viewport { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; }
  .timeline-track { gap: 14px; height: 520px; padding: 0 20px; transform: none !important; will-change: auto; }
  .timeline-panel { flex-basis: calc(100vw - 50px); min-height: 0; scroll-snap-align: start; }
  .timeline-ghost { bottom: 28%; font-size: 52vw; }
  .timeline-copy { left: 7%; top: 7%; width: 86%; }
  .timeline-panel-music .timeline-copy,.timeline-panel-now .timeline-copy { left: 7%; right: auto; width: 86%; }
  .timeline-kicker { font-size: 9px; }
  .timeline-copy h3 { margin: 18px 0 10px; font-size: clamp(55px,14vw,80px); }
  .timeline-copy p { max-width: 280px; margin: 0; font-size: 14px; line-height: 1.32; }
  .timeline-next-link { margin-top: 12px; font-size: 11px; }
  .timeline-art { width: 71%; height: 39%; right: 7%; top: auto; bottom: 8%; }
  .timeline-panel-music .timeline-art,.timeline-panel-now .timeline-art,.timeline-panel-visual .timeline-art { left: auto; right: 7%; top: auto; bottom: 8%; width: 71%; height: 39%; }
  .timeline-image-slot { border-width: 6px; padding: 16px; }
  .timeline-image-slot span,.timeline-image-slot small,.timeline-art-tag { font-size: 7px; }
  .timeline-image-slot strong { font-size: clamp(27px,8vw,42px); }
  .timeline-art-tag { bottom: -12px; padding: 7px 9px; }
  .timeline-foot { gap: 10px; padding: 24px 20px 8px; font-size: 9px; }
  .timeline-instruction { display: none; }
  .work-intro { display: block; }
  .work-intro h2 { margin-bottom: 20px; }
  .work-intro p { margin: 0 0 30px; font-size: 16px; }
  .work-frames { gap: 8px; grid-template-columns: 1fr 1fr; }
  .work-frames figure:first-child .media-placeholder,.work-frames figure:last-child .media-placeholder { aspect-ratio: .72; }
  .work-frames figcaption { font-size: 8px; }
  .music-end { min-height: 65vh; }
  .music-end>p { font-size: 17px; }
  .social-links { flex-wrap: wrap; gap: 16px; margin-top: 50px; }
  .social-links a { font-size: 12px; }
  .personal-about,.personal-film,.personal-credits { padding: 75px 20px; }
  .about-layout,.film-layout,.credits-layout { grid-template-columns: 1fr; gap: 32px; }
  .about-layout { padding: 54px 0; }
  .personal-about h2,.personal-film h2,.personal-credits h2 { font-size: clamp(62px,15vw,100px); }
  .about-story p { font-size: 17px; }
  .practice-list span { font-size: 11px; }
  .selected-work .work-frames { grid-template-columns: 1fr 1fr; gap: 9px; }
  .selected-work .work-frames figure:first-child { grid-column: 1 / -1; }
  .selected-work .work-frames img { height: 65vw; max-height: 480px; }
  .selected-work .work-frames figure:first-child img { height: 68vw; }
  .film-layout { padding-top: 52px; }
  .film-poster { height: 110vw; max-height: 600px; }
  .credits-layout { padding-top: 56px; }
  .credits-layout>div>p { font-size: 17px; }
  .credits-layout li { font-size: 21px; }
  .about-portrait { flex-basis: min(49vw,210px); margin-top: 34px; }
  .about-portrait--night { flex-basis: min(36vw,155px); margin-top: 76px; }
  .credits-intro { display: block; padding: 54px 0 32px; }
  .credits-intro p { margin: 30px 0 0; font-size: 16px; }
  .credits-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .credits-grid li { min-height: 145px; padding: 13px 10px 18px 0; }
  .credits-grid li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .credits-grid li:nth-child(even) { padding-left: 14px; border-left: 1px solid #15171545; }
  .credits-grid li strong { font-size: clamp(27px,7.8vw,45px); }
  .credits-grid li:nth-child(5) strong { font-size: clamp(24px,6.5vw,37px); }
  .ai-page .ai-header { width: calc(100% - 24px); min-height: 54px; top: 9px; margin: 9px auto; padding: 7px 10px 7px 17px; }
  .ai-page .ai-header .world-switch { padding: 8px 13px; }
  .site-footer { min-height: 75px; padding: 20px; }
  .site-footer>a:last-child { max-width: 150px; text-align: right; }
  .ai-hero { min-height: calc(100svh - 65px); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 34px 20px 65px; }
  .ai-hero-copy { max-width: 100%; }
  .ai-identifier { margin-bottom: 18px; font-size: 9px; }
  .ai-hero h1 { margin-bottom: 17px; font-size: clamp(42px,11.8vw,72px); }
  .ai-hero-copy>p:not(.ai-identifier) { max-width: 320px; margin: 0; font-size: 14px; }
  .hero-actions { gap: 8px; margin-top: 20px; }
  .action-primary,.action-secondary { min-height: 42px; padding: 11px; font-size: 10px; }
  .ai-hero-visual { height: auto; min-height: 0; margin: 32px 0 0; }
  .ai-hero-person { width: 100%; min-height: 360px; max-height: 52svh; margin-top: 18px; align-self: center; }
  .ai-hero-person img { width: min(100%,390px); max-height: 52svh; }
  .ai-hero-person figcaption { bottom: 4%; }
  .ai-hero-foot { left: 20px; right: 20px; bottom: 18px; font-size: 9px; }
  .ai-routes { grid-template-columns: 1fr; }
  .ai-routes a { min-height: 130px; padding: 26px 20px; }
  .ai-routes a:first-child { border-right: 0; border-bottom: 1px solid #dce3d544; }
  .ai-routes strong { font-size: 36px; }
  .ai-explore,.ai-for-brands { padding: 75px 20px; }
  .ai-explore-heading { display: block; }
  .ai-explore-heading h2,.ai-for-brands h2 { margin: 38px 0 22px; font-size: clamp(58px,14vw,100px); }
  .ai-explore-heading p { margin: 0 0 32px; font-size: 16px; }
  .ai-work-grid { grid-template-columns: 1fr; gap: 20px; }
  .ai-work-media,.daily-art { height: min(115vw,450px); }
  .ai-work-meta { padding: 18px 18px 28px; }
  .ai-work-meta h3 { font-size: 35px; }
  .brands-inner { grid-template-columns: 1fr; gap: 35px; }
  .brands-inner>div { justify-self: start; }
  .brands-inner p { font-size: 21px; }
  .personal-opening { transform: none; }
  .ai-explore .ai-work-card:nth-child(2),.ai-explore .ai-work-card:nth-child(3) { transform: none; }
}

@media (max-width: 380px) and (max-height: 740px) {
  .threshold-crt { width: 52vw; top: 13%; }
  .threshold-ai { width: 48vw; top: 28%; }
  .world-choices { bottom: 42px; }
  .world-choice { min-height: 60px; }
  .world-choice .choice-title { font-size: 42px; }
  .personal-opening h1 { font-size: 55px; }
  .ai-hero h1 { font-size: 42px; }
  .personal-machine { width: 58vw; }
  .ai-hero-visual { min-height: 0; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .personal-machine,.personal-opening,.ai-hero-visual,.ai-explore .ai-work-card { transform: none !important; }
  .selected-work .work-frames img,.ai-explore .ai-work-media img { clip-path: none; }
  .timeline-viewport { overflow-x: auto !important; }
  .timeline-track,.timeline-art,.timeline-ghost { transform: none !important; }
}

/* A small route gesture works even where cross-document view transitions do not. */
.is-leaving::after { content: ""; position: fixed; z-index: 80; inset: 0; background: #070809; pointer-events: none; animation: cover-route .46s ease forwards; }
.is-leaving .site-header,.is-leaving .world-choices,.is-leaving .entry-footer,.is-leaving .artifact-link:not([data-world="personal"]):not([data-world="ai"]) { opacity: 0; transition: opacity .2s; }
.entry-page.is-leaving[data-exit="personal"] .threshold-crt { z-index: 30; }
.entry-page.is-leaving[data-exit="personal"] .threshold-ai { opacity: 0; }
.entry-page.is-leaving[data-exit="ai"] .threshold-ai { z-index: 30; }
.entry-page.is-leaving[data-exit="ai"] .threshold-crt { opacity: 0; }
.personal-page.is-arriving .personal-machine,.ai-page.is-arriving .ai-hero-visual { animation: settle-art .65s cubic-bezier(.2,.8,.2,1) both; }
.personal-page.is-arriving .personal-opening,.ai-page.is-arriving .ai-hero-copy { animation: settle-copy .55s ease both; }
@keyframes cover-route { 0%,45% { opacity: 0; } 100% { opacity: 1; } }
@keyframes settle-art { from { opacity: .35; translate: 0 34px; scale: 1.045; } }
@keyframes settle-copy { from { opacity: 0; translate: 0 15px; } }

/* Portrait-led entrance: two expressions of one person, without a hard divider. */
.threshold-portraits { background: radial-gradient(ellipse 56% 54% at 50% 48%,#202522 0,#0b0e0d 62%,#050606 100%); }
.threshold-portraits::before { opacity: .08; }
.identity-heading { position: absolute; z-index: 5; top: 12%; left: 0; right: 0; text-align: center; pointer-events: none; }
.identity-heading>span { color: #bec7bd; font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .17em; }
.identity-heading h1 { margin: 7px 0 0; font: 800 clamp(78px,10vw,194px)/.79 var(--display); letter-spacing: -.11em; white-space: nowrap; text-shadow: 0 8px 36px #0009; }
.identity-heading h1 span { color: #c8ff24; }
.identity-heading p { margin: 15px 0 0; color: #b6beb5; font-size: 12px; }
.threshold-portraits .identity-card { top: 28%; width: min(31vw,510px); height: min(60svh,700px); overflow: hidden; border: 1px solid #d7ded34d; border-radius: 3px; background: #0c0e0d; transform: none; box-shadow: 0 28px 75px #0009; transition: border-color .25s ease,filter .25s ease; }
.threshold-portraits .identity-personal { left: calc(50% - min(31vw,510px) - 2vw); }
.threshold-portraits .identity-ai { right: calc(50% - min(31vw,510px) - 2vw); }
.threshold-portraits .identity-card:hover { border-color: #f3f3e8ad; filter: brightness(1.08); }
.identity-card .identity-portrait { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 30%; }
.identity-personal .identity-portrait { object-position: center 24%; }
.identity-shade { position: absolute; inset: 0; background: linear-gradient(0deg,#030504 1%,#030504ce 12%,transparent 49%),linear-gradient(90deg,#0003,transparent 55%); }
.identity-card-copy { position: absolute; z-index: 4; left: 5%; right: 5%; bottom: 4%; display: flex; flex-direction: column; gap: 5px; }
.identity-card-copy small { color: #d3d9ce; font: 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .12em; }
.identity-card-copy strong { font: 800 clamp(57px,5.6vw,105px)/.82 var(--display); letter-spacing: -.1em; white-space: nowrap; }
.identity-card-copy>span { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #d4d8d1; font-size: 12px; }
.identity-card-copy b { font-size: 22px; font-weight: 300; }
.identity-between { position: absolute; left: 50%; top: 61%; transform: translate(-50%,-50%) rotate(-90deg); color: #9da39d; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .25em; }
.identity-computer { position: absolute; z-index: 3; width: 26%; aspect-ratio: 1.05; right: 4%; bottom: 25%; filter: drop-shadow(8px 12px 10px #000c); transform: rotate(5deg); }
.identity-computer-shell { display: block; width: 100%; height: 82%; padding: 8% 7% 16%; border-radius: 12% 12% 9% 9%; background: linear-gradient(135deg,#e0ded4,#9b9e98 72%,#656b65); box-shadow: inset 2px 2px 3px #fff8,5px 5px 0 #444a45; }
.identity-computer-screen { display: block; height: 100%; padding: 5%; border-radius: 15%; background: #222b29; overflow: hidden; }
.identity-computer-screen video { width: 100%; height: 100%; object-fit: cover; border-radius: 35% / 12%; }
.identity-computer-base { display: block; width: 47%; height: 12%; margin: 5% auto 0; background: linear-gradient(#c5c8bd,#737c74); clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); }
.identity-circuit { position: absolute; right: 4%; bottom: 26%; width: 28%; aspect-ratio: 1; border: 1px solid #d0ff6b88; border-radius: 16%; background: #07100cc7; box-shadow: 0 0 25px #c7ff1859,inset 0 0 22px #baff1822; }
.identity-circuit::before { content: "AI"; position: absolute; inset: 0; display: grid; place-items: center; color: #d5ff53; font: 800 34px/.8 var(--display); }
.identity-circuit i { position: absolute; width: 23%; height: 1px; background: #beff55; box-shadow: 0 0 7px #c7ff18; }
.identity-circuit i:nth-child(1) { top: 28%; left: -23%; }.identity-circuit i:nth-child(2) { top: 72%; right: -23%; }.identity-circuit i:nth-child(3) { left: 27%; top: -12%; transform: rotate(90deg); }.identity-circuit i:nth-child(4) { right: 27%; bottom: -12%; transform: rotate(90deg); }

/* The personal world is a small dark room lit as the visitor arrives. */
.personal-hero { background: #050606; }
.personal-hero::before { z-index: 1; color: #ffffff05; }
.personal-opening { text-shadow: 0 2px 22px #000b; }
.personal-machine { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; filter: none; transform: translateY(var(--shift-near,0px)); pointer-events: none; }
.personal-machine::after { display: none; }
.personal-stage-image { display: block; width: 100%; height: auto; }
.personal-stage-screen { position: absolute; left: 64.8%; top: calc(100vw * .2726); width: 11.6%; aspect-ratio: 317 / 226; overflow: hidden; border-radius: 6% / 8%; box-shadow: inset 0 0 20px #080900,0 0 18px #aaa37144; background: #0b0d0a; }
.personal-stage-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center,transparent 45%,#0009 100%),linear-gradient(#e1ffab16 1px,transparent 1px); background-size: auto,auto 4px; }
.personal-stage-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: sepia(.17) contrast(1.1) brightness(.82); }

/* Small lens windows alternate around a densely graduated camera rail. */
.archive-timeline-yearly { background: #000; }
.archive-timeline-yearly .timeline-sticky { min-height: 600px; background: #000; }
.archive-timeline-yearly .timeline-sticky::before { display: none; }
.archive-timeline-yearly .timeline-head h2 { font-size: clamp(58px,6vw,104px); }
.archive-timeline-yearly .timeline-controls .timeline-sound { width: auto; height: 34px; margin-right: 12px; padding: 0 10px; border-radius: 2px; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .04em; }
.archive-timeline-yearly .timeline-controls .timeline-skip { width: auto; height: 34px; padding: 0 12px; border: 0; border-bottom: 1px solid #aaa79b; border-radius: 0; background: transparent; color: #e9e5d9; font: 12px/1 var(--body); white-space: nowrap; }
.archive-timeline-yearly .timeline-controls .timeline-skip:hover { background: transparent; border-bottom-color: #fff; color: #fff; }
.archive-timeline-yearly .timeline-controls .timeline-sound[aria-pressed="true"] { color: #f2ead8; border-color: #d6cdb8; }
.archive-timeline-yearly .timeline-viewport { background: #000; }
.timeline-edge-next { display: none; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .archive-timeline-yearly.is-pinned .timeline-edge-next { position: absolute; z-index: 12; top: 27%; right: 0; bottom: 12%; width: clamp(64px,6vw,100px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #e8e3d7; background: linear-gradient(90deg,transparent,#12120f99); opacity: .45; transition: opacity .3s,background .3s; }
  .archive-timeline-yearly.is-pinned .timeline-edge-next:hover,.archive-timeline-yearly.is-edge-driving .timeline-edge-next { opacity: 1; background: linear-gradient(90deg,transparent,#211f19cc); }
  .timeline-edge-next span { writing-mode: vertical-rl; font: 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .14em; }
  .timeline-edge-next b { font: 300 28px/1 var(--body); }
}
.archive-timeline-yearly .timeline-viewport::before { display: none; }
.archive-timeline-yearly .timeline-viewport::after { content: ""; position: absolute; z-index: 5; bottom: 0; left: 50%; width: 1px; height: 37px; background: #f0e9dd; box-shadow: 0 0 10px #ffffff77; pointer-events: none; }
.archive-timeline-yearly .timeline-track { gap: 30px; padding-inline: calc(50vw - 170px); }
.archive-timeline-yearly .timeline-panel { flex: 0 0 340px; width: 340px; min-height: 0; border: 0; overflow: visible; background: none; isolation: auto; scroll-snap-align: center; }
.archive-timeline-yearly .timeline-panel { cursor: pointer; }
.archive-timeline-yearly .year-panel-origin { margin-right: 30px; }
.archive-timeline-yearly .year-panel-origin::before { content: "13 YEARS LATER →"; position: absolute; left: calc(100% + 4px); bottom: 19px; width: 35px; color: #c5beb1; font: 6px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: center; }
.archive-timeline-yearly .timeline-panel::after { content: ""; display: block; position: absolute; z-index: 1; inset: auto 0 0; height: 19px; opacity: .6; background: repeating-linear-gradient(90deg,#c7cec589 0 1px,transparent 1px 11px); pointer-events: none; }
.archive-timeline-yearly .timeline-panel::before { content: ""; position: absolute; z-index: 2; bottom: 0; left: calc(50% - 1px); width: 2px; height: 32px; background: #e0dfd6aa; pointer-events: none; transition: height .35s cubic-bezier(.2,.8,.2,1),background .35s; }
.archive-timeline-yearly .timeline-panel.is-active::before { height: 44px; background: #f5f1e6; }
.year-marker { position: absolute; z-index: 2; bottom: 38px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
.year-marker span { padding: 7px 5px; background: #000; color: #a8a8a8; font: 800 23px/.8 var(--display); letter-spacing: -.08em; transition: color .2s,transform .2s; }
.year-panel.is-active .year-marker span { color: #f2f5e9; transform: scale(1.13); }
.year-marker i { display: none; }
.year-panel.is-active .year-marker i { height: 30px; background: #f5f1e6; }
.archive-timeline-yearly .timeline-art { width: 290px; height: min(64%,380px); left: 25px; right: auto; top: 5%; bottom: auto; transform: translateY(var(--art-shift,0px)) scale(var(--lens-scale,.88)); transform-origin: center center; filter: brightness(var(--lens-light,.72)) saturate(var(--lens-saturation,.6)); transition: filter .4s cubic-bezier(.2,.7,.2,1); }
.archive-timeline-yearly .year-panel-down .timeline-art { top: 5%; bottom: auto; }
.year-image-slot { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 15px 9px; overflow: hidden; border-radius: 18%; background: radial-gradient(circle at 50% 34%,#414141,#121212 60%,#000); -webkit-mask-image: radial-gradient(ellipse at center,#000 40%,#000d 58%,transparent 78%); mask-image: radial-gradient(ellipse at center,#000 40%,#000d 58%,transparent 78%); transition: transform .36s cubic-bezier(.2,.7,.2,1),filter .36s; }
.year-image-slot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%,transparent 25%,#0004 52%,#000e 90%); pointer-events: none; }
.archive-timeline-yearly .timeline-panel:hover,.archive-timeline-yearly .timeline-panel:focus-visible { z-index: 6; }
.archive-timeline-yearly .timeline-panel:hover .year-image-slot,.archive-timeline-yearly .timeline-panel:focus-visible .year-image-slot { transform: scale(1.27); filter: brightness(1.18); }
.archive-timeline-yearly .timeline-panel:focus-visible { outline: none; }
.archive-timeline-yearly .timeline-panel:focus-visible .year-image-slot { outline: 1px solid #e8e2d2; outline-offset: 3px; }
/* Let one memory hold the room while the camera rail stays usable. */
@media (hover: hover) and (pointer: fine) {
  .archive-timeline-yearly .timeline-panel { transition: opacity .48s cubic-bezier(.2,.7,.2,1); }
  .archive-timeline-yearly .timeline-head > div:first-child { transition: opacity .48s cubic-bezier(.2,.7,.2,1); }
  .archive-timeline-yearly .timeline-foot { transition: opacity .48s cubic-bezier(.2,.7,.2,1); }
  .archive-timeline-yearly:has(.timeline-panel:hover) .timeline-panel:not(:hover) { opacity: .18; }
  .archive-timeline-yearly:has(.timeline-panel:hover) .timeline-head > div:first-child { opacity: .16; }
  .archive-timeline-yearly:has(.timeline-panel:hover) .timeline-foot { opacity: .35; }
  .archive-timeline-yearly:has(.timeline-panel:hover) .timeline-panel:hover .timeline-art { filter: brightness(1.12) saturate(1); }
  .archive-timeline-yearly:has(.timeline-panel:hover) .timeline-panel:hover .year-copy { opacity: .9; }
}
.archive-timeline-yearly:has(.timeline-panel:focus-visible) .timeline-panel:not(:focus-visible) { opacity: .18; }
.archive-timeline-yearly:has(.timeline-panel:focus-visible) .timeline-head > div:first-child { opacity: .16; }
.archive-timeline-yearly:has(.timeline-panel:focus-visible) .timeline-panel:focus-visible .timeline-art { filter: brightness(1.12) saturate(1); }
.archive-timeline-yearly:has(.timeline-panel:focus-visible) .timeline-panel:focus-visible .year-copy { opacity: .9; }
.year-image-slot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.year-panel-origin .year-image-slot img { transform: scale(1.58); object-position: 56% 50%; }
.year-image-slot span,.year-image-slot small { position: relative; z-index: 1; color: #c5d0c5; font: 6px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .06em; text-align: center; }
.year-image-slot b { position: relative; z-index: 1; color: #c0cbbf; font: 300 32px/1 var(--body); }
.year-copy { position: absolute; bottom: 83px; left: 12px; right: 12px; color: #e6e8df; text-align: center; opacity: var(--copy-opacity,.65); }
.year-panel-down .year-copy { top: auto; bottom: 83px; }
.year-copy h3 { margin: 0 0 5px; font: 700 17px/1.08 var(--display); letter-spacing: -.04em; }
.year-copy p { margin: 0; color: #aab4aa; font-size: 11px; line-height: 1.25; }
.archive-timeline-yearly .timeline-foot { padding-top: 15px; }

/* The route gesture takes its origin from the selected world. */
.entry-page.is-leaving::after { display: none; }
.route-veil { position: fixed; z-index: 100; inset: 0; pointer-events: none; }
.route-veil--personal { overflow: hidden; }
.route-journey-print { position:absolute; background:#fffdf6; box-sizing:border-box; box-shadow:0 18px 60px #0005; }
.route-journey-print img { width:100%;height:100%;object-fit:cover;display:block; }
.route-veil--ai { overflow:hidden; background:#0b0c0d; transform:translateY(100%); animation:led-board-enter .4s cubic-bezier(.22,.7,.22,1) forwards; }
.route-led-board { position:absolute; inset:0; display:grid; place-items:center; background-color:#242628; background-image:linear-gradient(90deg,transparent 3px,#0b0c0d 3px),linear-gradient(transparent 3px,#0b0c0d 3px); background-size:7px 7px; }
.route-led-word { width:min(82vw,960px); overflow:visible; shape-rendering:crispEdges; animation:led-board-push .35s 2.05s cubic-bezier(.4,0,.8,.3) forwards; }
.route-led-off { fill:#1c1e20; }
.route-led-lit { fill:#c7ff18; clip-path:inset(0 100% 0 0); animation:led-diode-on .9s .35s steps(43,end) forwards; }
@keyframes led-board-enter { to { transform:translateY(0); } }
@keyframes led-diode-on { to { clip-path:inset(0 0 0 0); } }
@keyframes led-board-push { to { transform:scale(1.12); } }
@keyframes portal-open { to { clip-path: circle(150vmax at var(--origin-x,50%) var(--origin-y,50%)); } }
@keyframes stage-push { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes screen-appear { to { opacity: 1; } }
@keyframes depth-floor { to { transform: rotateX(65deg) translateY(-28%); opacity: .06; } }
@keyframes circuit-fly { 0% { opacity: 0; transform: translateZ(-900px) rotate(12deg); } 18% { opacity: .75; } 68% { opacity: .85; } 100% { opacity: 0; transform: translateZ(620px) rotate(0); } }
@keyframes core-arrive { 0% { opacity: 0; transform: scale(.65) translateZ(-300px); } 42% { opacity: 1; } 100% { opacity: 1; transform: scale(1.08) translateZ(0); } }
@keyframes circuit-draw { to { stroke-dashoffset: 0; } }
.personal-page.is-arriving::before,.ai-page.is-arriving::before { content: ""; position: fixed; z-index: 90; inset: 0; background: #050807; pointer-events: none; animation: arrival-uncover 1.05s ease forwards; }
.ai-page.is-arriving::before { background:#0b0c0d; background-image:radial-gradient(#242628 1px,transparent 1px); background-size:7px 7px; animation:led-board-uncover .7s cubic-bezier(.22,.7,.22,1) forwards; }
@keyframes led-board-uncover { to { transform:translateY(-100%); } }
@keyframes arrival-uncover { 0%,20% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  .threshold-portraits { min-height: 100svh; }
  .identity-heading { top: 12%; }
  .identity-heading>span { font-size: 7px; }
  .identity-heading h1 { font-size: clamp(56px,15vw,82px); }
  .identity-heading p { margin-top: 12px; font-size: 10px; }
  .threshold-portraits .identity-card { top: 27%; width: calc(50vw - 26px); height: min(50svh,440px); }
  .threshold-portraits .identity-personal { left: 20px; }
  .threshold-portraits .identity-ai { right: 20px; }
  .identity-card-copy { left: 9%; right: 9%; bottom: 5%; }
  .identity-card-copy small { font-size: 6px; line-height: 1.4; }
  .identity-card-copy strong { font-size: clamp(34px,9vw,55px); }
  .identity-card-copy>span { display: block; font-size: 9px; line-height: 1.25; }
  .identity-card-copy b { display: block; margin-top: 4px; font-size: 19px; }
  .identity-between { top: 52%; font-size: 7px; }
  .identity-computer { width: 47%; right: 3%; bottom: 27%; }
  .identity-circuit { width: 40%; right: 6%; bottom: 30%; }
  .identity-circuit::before { font-size: 22px; }
  .personal-hero { min-height: max(970px,110svh); background: #050606; }
  .personal-machine { inset: auto auto 0 calc(50% - 953px); width: 1350px; height: 753px; max-width: none; margin: 0; }
  .personal-stage-screen { top: 368px; }
  .personal-stage-screen { box-shadow: 0 0 14px #c8c07866; }
  .archive-timeline-yearly .timeline-sticky { min-height: 0; padding-bottom: 12px; }
  .archive-timeline-yearly .timeline-head { padding: 28px 20px 8px; }
  .archive-timeline-yearly .timeline-head h2 { font-size: clamp(45px,11vw,70px); }
  .archive-timeline-yearly .timeline-controls { flex-wrap: wrap; margin-top: 16px; }
  .archive-timeline-yearly .timeline-controls .timeline-sound { height: 32px; margin-right: 4px; }
  .archive-timeline-yearly .timeline-controls .timeline-skip { display: none; }
  .archive-timeline-yearly .timeline-viewport { scroll-padding-left: 0; }
  .archive-timeline-yearly .timeline-track { height: min(60svh,580px); min-height: 420px; gap: 12px; padding: 0 22px; }
  .archive-timeline-yearly .timeline-panel { flex-basis: calc(100vw - 44px); width: calc(100vw - 44px); }
  .archive-timeline-yearly .year-panel-origin { margin-right: 0; }
  .archive-timeline-yearly .year-panel-origin::before { display: none; }
  .archive-timeline-yearly .timeline-art { width: min(76vw,340px); height: min(36svh,310px); left: 50%; top: 2%; transform: translate(-50%,var(--art-shift,0px)) scale(var(--lens-scale,.88)); }
  .archive-timeline-yearly .year-panel-down .timeline-art { top: 2%; bottom: auto; }
  .archive-timeline-yearly .year-image-slot { -webkit-mask-image: radial-gradient(ellipse at center,#000 29%,#000e 44%,#0007 55%,transparent 70%); mask-image: radial-gradient(ellipse at center,#000 29%,#000e 44%,#0007 55%,transparent 70%); }
  .archive-timeline-yearly .year-image-slot::after { background: radial-gradient(ellipse at center,transparent 24%,#0005 48%,#000 82%); }
  .archive-timeline-yearly .year-panel-origin .year-image-slot img { transform: scale(2.08); object-position: 56% 53%; }
  .year-marker { bottom: 36px; }
  .year-marker span { font-size: 29px; }
  .year-copy { top: auto; bottom: 88px; left: 10px; right: 10px; }
  .year-panel-down .year-copy { top: auto; bottom: 88px; }
  .year-copy h3 { font-size: 19px; }
  .year-copy p { font-size: 11px; }
  .year-image-slot span,.year-image-slot small { font-size: 8px; }
  .archive-timeline-yearly .timeline-foot { padding: 13px 20px 10px; }
}
@media (max-width: 380px) and (max-height: 740px) {
  .identity-heading { top: 11%; }
  .threshold-portraits .identity-card { top: 26%; height: 47svh; }
}
@media (prefers-reduced-motion: reduce) {
  .room-beam,.room-lamp { animation: none; opacity: .82; }
  .route-veil { display: none; }
  .archive-timeline-yearly .timeline-panel,.archive-timeline-yearly .timeline-head > div:first-child,.archive-timeline-yearly .timeline-foot,.archive-timeline-yearly .timeline-art,.archive-timeline-yearly .year-image-slot { transition: none; }
}

/* One full-screen stage; the two portraits share space instead of living in cards. */
.entrance { position: relative; height: 100svh; min-height: 540px; overflow: clip; isolation: isolate; background: #050606; }
.entrance::after { content: ""; position: absolute; z-index: 5; inset: 52% 0 0; pointer-events: none; background: linear-gradient(transparent 0%,#050606a8 58%,#050606 100%); }
.entrance-world { position: absolute; inset: -10%; z-index: 0; pointer-events: none; transition: opacity .9s ease; }
.entrance-world--personal { background: radial-gradient(ellipse 41% 62% at 31% 53%,#7770524d,transparent 78%),radial-gradient(ellipse 42% 70% at 75% 36%,#1c2420,transparent 72%); }
.entrance-world--ai { opacity: .35; background: radial-gradient(ellipse 46% 60% at 72% 41%,#a4dc2740,transparent 71%),radial-gradient(ellipse 53% 74% at 50% 50%,#17221d,transparent 77%); }
.entry-page[data-preview="ai"] .entrance-world--personal { opacity: .2; }
.entry-page[data-preview="ai"] .entrance-world--ai { opacity: 1; }
.entrance-type { position: absolute; z-index: 7; top: clamp(110px,14svh,190px); left: 4%; right: 4%; margin: 0; color: #f0f0eb; font: 800 clamp(66px,10vw,178px)/.8 var(--display); letter-spacing: -.095em; white-space: nowrap; text-align: center; pointer-events: none; text-shadow: 0 5px 38px #000d; transform: translate3d(var(--type-x,0px),var(--type-y,0px),0); transition: transform .5s ease,color .8s ease; }
.entrance-question { color: #c7ff18; }
.entry-page[data-preview="ai"] .entrance-type { color: #d7e0d3; }
.entrance-portraits { position: absolute; z-index: 3; inset: 0; pointer-events: none; transform: translate3d(var(--scene-x,0px),var(--scene-y,0px),0); transition: transform .5s ease; }
.entrance-figure { position: absolute; bottom: -10svh; left: 50%; height: min(108svh,1360px); aspect-ratio: 1856 / 2304; filter: drop-shadow(25px 18px 34px #000b); transition: transform .85s cubic-bezier(.18,.78,.22,1),opacity .8s ease,filter .8s ease; will-change: transform; }
.entrance-figure img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; animation: entrance-breathe 7.8s ease-in-out infinite alternate; }
.entrance-figure--ai img { animation-delay: -3.8s; animation-duration: 9.2s; }
@keyframes entrance-breathe { from { transform: translate3d(0,4px,0) scale(1); } to { transform: translate3d(0,-9px,0) scale(1.006); } }
.entrance-figure--personal { z-index: 2; transform: translateX(-78%) rotate(-2deg) scale(1.04); }
.entrance-figure--ai { z-index: 1; opacity: .79; filter: saturate(.68) brightness(.75) drop-shadow(22px 18px 34px #000c); transform: translateX(-7%) rotate(2deg) scale(.94); }
.entry-page[data-preview="ai"] .entrance-figure--personal { opacity: .45; filter: saturate(.62) brightness(.65) drop-shadow(25px 18px 34px #000b); transform: translateX(-95%) rotate(-4deg) scale(.94); }
.entry-page[data-preview="ai"] .entrance-figure--ai { opacity: 1; filter: saturate(1) brightness(1.04) drop-shadow(22px 18px 34px #000c); transform: translateX(-18%) rotate(0) scale(1.06); }
.entrance-caption { position: absolute; z-index: 7; top: clamp(84px,10.5svh,155px); left: 24px; right: 24px; margin: 0; color: #e3e6db; font: 600 clamp(12px,1.05vw,16px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .16em; text-transform: uppercase; text-align: center; text-shadow: 0 2px 18px #000; pointer-events: none; }
.entrance-choices { position: absolute; z-index: 8; inset: auto clamp(24px,5vw,80px) 7%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,8vw,160px); }
.entrance-choice { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 0 4px; border-top: 1px solid #f2f0ea94; text-decoration: none; transition: opacity .45s ease,border-color .45s ease,transform .45s ease; }
.entrance-choice-meta { display: flex; width: 100%; justify-content: space-between; color: #d3d8ce; font-size: 13px; font-weight: 600; }
.entrance-choice-meta span { font-size: 20px; line-height: .7; }
.entrance-choice strong { margin: 13px 0 8px; font: 800 clamp(72px,8.4vw,156px)/.76 var(--display); letter-spacing: -.105em; white-space: nowrap; }
.entrance-choice-description { color: #bfc4bb; font-size: 12px; }
.entrance-choice--ai { border-color: #c7ff1896; }
.entrance-ai-accent { transition: color .25s ease,text-shadow .25s ease; }
.entry-page[data-preview="ai"] .entrance-ai-accent,
.entrance-choice--ai:hover .entrance-ai-accent,
.entrance-choice--ai:focus-visible .entrance-ai-accent,
.entrance-choice--ai[aria-current="true"] .entrance-ai-accent { color: #c7ff18; text-shadow: 0 0 8px #c7ff1855,0 0 24px #c7ff1830; }

.entry-page[data-preview="personal"] .entrance-choice--ai { opacity: .76; }
.entry-page[data-preview="ai"] .entrance-choice--personal { opacity: .62; }
.entry-page[data-preview="ai"] .entrance-choice--ai { opacity: 1; border-color: #c7ff18; }
.entrance-choice:focus-visible { opacity: 1 !important; transform: translateY(-5px); }
@media (hover: hover) and (pointer: fine) {
  .entrance-choice:hover { opacity: 1 !important; transform: translateY(-5px); }
}
.entrance-instruction { position: absolute; z-index: 8; right: clamp(24px,5vw,80px); bottom: 2.8%; color: #aeb5aa; font: 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .04em; }
.entrance-instruction-mobile,.entrance-proceed { display: none; }
.entry-page.is-leaving .entrance-choices,.entry-page.is-leaving .entrance-caption,.entry-page.is-leaving .entrance-instruction { opacity: 0; transition: opacity .24s; }

.entrance-cursor { display: none; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.entry-page,.personal-page,.ai-page).has-custom-cursor,
  :is(.entry-page,.personal-page,.ai-page).has-custom-cursor :is(a,button,.timeline-panel,.timeline-edge-next) { cursor: none; }
  .personal-page.has-custom-cursor .computer-archive,
  .personal-page.has-custom-cursor .computer-archive :is(button,.computer-archive-screen,video) { cursor: none; }
  .entrance-cursor { display: block; position: fixed; z-index: 100; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  :is(.entry-page,.personal-page,.ai-page).has-custom-cursor .entrance-cursor { opacity: 1; }
  .entrance-cursor-ring { position: absolute; top: -19px; left: -19px; width: 38px; height: 38px; border: 1px solid #f0f0e7c9; border-radius: 50%; box-shadow: 0 0 18px #d1ff221f, inset 0 0 12px #d1ff2214; transition: width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),left .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease; }
  .entrance-cursor-ring::before,.entrance-cursor-ring::after { content: ""; position: absolute; background: #d0ff2d; }
  .entrance-cursor-ring::before { width: 7px; height: 1px; left: -4px; top: 50%; }
  .entrance-cursor-ring::after { width: 1px; height: 7px; left: 50%; top: -4px; }
  .entrance-cursor-core { position: absolute; top: -2px; left: -2px; width: 4px; height: 4px; border-radius: 50%; background: #d0ff2d; box-shadow: 0 0 9px #d0ff2d; transition: opacity .2s; }
  .entrance-cursor-label { position: absolute; top: -5px; left: -22px; width: 44px; color: #eaffc7; font: 600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .13em; text-align: center; opacity: 0; transform: scale(.7); transition: opacity .2s,transform .28s cubic-bezier(.2,.8,.2,1); }
  .entrance-cursor.is-action .entrance-cursor-ring { width: 68px; height: 68px; top: -34px; left: -34px; border-color: #c7ff18; }
  .entrance-cursor.is-action .entrance-cursor-core { opacity: 0; }
  .entrance-cursor.is-action .entrance-cursor-label { opacity: 1; transform: scale(1); }
  .personal-page .entrance-cursor-ring { top: -18px; left: -18px; width: 36px; height: 36px; border: 0; border-radius: 0; box-shadow: none; }
  .personal-page .entrance-cursor-ring::before,.personal-page .entrance-cursor-ring::after { display: none; }
  .personal-page .entrance-cursor-ring i { position: absolute; width: 10px; height: 10px; border-top: 1.5px solid #f1e6d1; border-left: 1.5px solid #f1e6d1; filter: drop-shadow(0 0 3px #f1e6d199); }
  .personal-page .entrance-cursor-ring i:nth-child(1) { top: 0; left: 0; }
  .personal-page .entrance-cursor-ring i:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); }
  .personal-page .entrance-cursor-ring i:nth-child(3) { right: 0; bottom: 0; transform: rotate(180deg); }
  .personal-page .entrance-cursor-ring i:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); }
  .personal-page .entrance-cursor-core { top: -1px; left: -1px; width: 2px; height: 2px; background: #f1e6d1; box-shadow: 0 0 7px #f1e6d1; }
  .personal-page .entrance-cursor-label { color: #f7ecd8; text-shadow: 0 1px 4px #000; }
  .personal-page .entrance-cursor.is-on-bright .entrance-cursor-ring i { border-color: #18201b; filter: drop-shadow(0 0 1px #f7f1e8); }
  .personal-page .entrance-cursor.is-on-bright .entrance-cursor-core { background: #18201b; box-shadow: 0 0 0 1px #f7f1e8; }
  .personal-page .entrance-cursor.is-on-bright .entrance-cursor-label { color: #18201b; text-shadow: 0 1px 1px #f7f1e8; }
  .personal-page .entrance-cursor.is-action .entrance-cursor-ring { top: -28px; left: -35px; width: 70px; height: 56px; }
  .personal-page .entrance-cursor.is-shutter .entrance-cursor-ring { animation: cursor-shutter .34s cubic-bezier(.2,.8,.2,1); }
  @keyframes cursor-shutter { 50% { scale: .78; filter: brightness(1.8); } }
  .ai-page .entrance-cursor-ring { top: -2px; left: -15px; width: 30px; height: 33px; border: 0; border-radius: 0; box-shadow: none; transform: rotate(var(--cursor-angle,0deg)); transform-origin: 50% 6%; transition: scale .25s cubic-bezier(.2,.8,.2,1); }
  .ai-page .entrance-cursor-ring::before,.ai-page .entrance-cursor-ring::after { display: none; }
  .ai-page .entrance-cursor-ring svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px #061009) drop-shadow(0 0 7px #43ff72) drop-shadow(0 2px 2px #061009); }
  .ai-page .cursor-triangle-keyline { fill: #111916; stroke: #07100b; stroke-width: 7; stroke-linejoin: round; }
  .ai-page .cursor-triangle-face { fill: #18211d; stroke: #8eff9f; stroke-width: 2.5; stroke-linejoin: round; }
  .ai-page .entrance-cursor-core { display: none; }
  .ai-page .entrance-cursor-label { top: 15px; left: 20px; width: auto; padding: 5px 7px; border: 1px solid #81ff96; border-radius: 2px; background: #111916; color: #e5ffe9; text-align: left; white-space: nowrap; box-shadow: 0 0 8px #43ff7259,0 2px 5px #0009; }
  .ai-page .entrance-cursor.is-action .entrance-cursor-ring { top: -2px; left: -15px; width: 30px; height: 33px; scale: 1.1; }
  .ai-page .entrance-cursor.is-on-bright .entrance-cursor-ring svg { filter: drop-shadow(0 0 3px #061009) drop-shadow(0 0 7px #43ff72) drop-shadow(0 2px 4px #061009); }
  .ai-cursor-trail { position: fixed; inset: 0; z-index: 99; pointer-events: none; overflow: hidden; }
  .ai-cursor-trail span { position: absolute; color: #77ff9f; font: 600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .05em; text-shadow: 0 0 8px #47ff7b,0 0 16px #47ff7b88; animation: ai-trail-fade .65s ease-out both; }
  .ai-cursor-trail.is-on-bright span { color: #172618; text-shadow: 0 0 3px #0d190b99; }
  @keyframes ai-trail-fade { from { opacity: .85; transform: translate(-50%,-50%); } to { opacity: 0; transform: translate(-50%,18px); } }
}

@media (max-width: 760px) {
  .entrance { min-height: 0; }
  .entrance::after { inset: 42% 0 0; background: linear-gradient(transparent,#050606b8 48%,#050606 80%); }
  .entrance-type { top: 17%; left: 12px; right: 12px; font-size: clamp(54px,14vw,96px); }
  .entrance-figure { height: 80svh; bottom: 15svh; }
  .entrance-figure--personal { transform: translateX(-64%) rotate(0) scale(1.04); }
  .entry-page[data-preview="personal"] .entrance-figure--personal { filter: brightness(1.18) saturate(1.06) drop-shadow(25px 18px 34px #000b); }
  .entrance-figure--ai { transform: translateX(-35%) rotate(0) scale(.95); }
  .entry-page[data-preview="ai"] .entrance-figure--personal { transform: translateX(-78%) rotate(0) scale(.93); }
  .entry-page[data-preview="ai"] .entrance-figure--ai { transform: translateX(-48%) rotate(0) scale(1.06); }
  .entry-page.has-selection[data-preview="personal"] .entrance-figure--personal { transform: translateX(-50%) rotate(0) scale(1.06); }
  .entry-page.has-selection[data-preview="ai"] .entrance-figure--personal { opacity: 0; transform: translateX(-120%) rotate(0) scale(.9); }
  .entry-page.has-selection[data-preview="personal"] .entrance-figure--ai { opacity: 0; transform: translateX(20%) rotate(0) scale(.9); }
  .entrance-caption { top: 13%; left: 20px; right: 20px; font-size: 10px; letter-spacing: .11em; }
  .entrance-choices { left: 20px; right: 20px; bottom: max(98px,env(safe-area-inset-bottom) + 86px); display: block; }
  .entrance-choice { padding: 12px 0 10px; min-height: 86px; }
  .entrance-choice strong { margin: 7px 0 5px; font-size: clamp(50px,13vw,76px); }
  .entrance-choice-meta { font-size: 11px; }
  .entrance-choice-description { font-size: 10px; }
  .entrance-instruction { display: block; left: 20px; right: 20px; bottom: max(42px,env(safe-area-inset-bottom) + 30px); text-align: center; }
  .entrance-instruction-desktop { display: none; }
  .entrance-instruction-mobile { display: inline; }
}
@media (max-height: 650px) and (max-width: 760px) {
  .entrance-figure { height: 72svh; bottom: 22svh; }
  .entrance-choices { bottom: max(76px,env(safe-area-inset-bottom) + 68px); }
  .entrance-choice { min-height: 70px; padding: 8px 0 7px; }
  .entrance-choice strong { font-size: 42px; }
  .entrance-choice-description { display: none; }
}
@media (max-width: 760px), (hover: none) {
  .entrance-proceed { position: absolute; z-index: 9; left: clamp(20px,5vw,80px); right: clamp(20px,5vw,80px); bottom: max(20px,env(safe-area-inset-bottom) + 12px); min-height: 54px; align-items: center; justify-content: space-between; padding: 0 18px; background: #f0f0eb; color: #080a08; font: 700 14px/1 var(--display); letter-spacing: -.02em; text-decoration: none; visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),visibility .3s; }
  .entry-page.has-selection .entrance-proceed { display: flex; visibility: visible; opacity: 1; transform: translateY(0); }
  .entry-page[data-preview="ai"] .entrance-proceed { background: #c7ff18; }
  .entry-page.has-selection .entrance-choice[aria-current="true"] { opacity: 1; border-color: #f0f0eb; }
  .entry-page.has-selection[data-preview="ai"] .entrance-choice[aria-current="true"] { border-color: #c7ff18; }
  .entry-page.has-selection .entrance-choice[aria-current="false"] { opacity: .58; }
  .entry-page.has-selection .entrance-instruction { opacity: 0; }
  .entry-page.is-leaving .entrance-proceed { opacity: 0; }
}
@media (min-width: 761px) and (hover: none) {
  .entrance-choices { bottom: 15%; }
  .entrance-instruction { display: none; }
  .entry-page.has-selection[data-preview="ai"] .entrance-figure--personal,
  .entry-page.has-selection[data-preview="personal"] .entrance-figure--ai { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance-portraits,.entrance-type { transform: none; }
  .entrance-figure img { animation: none; }
}

/* The room starts at the page edge, with the navigation floating over its ceiling. */
.personal-page .inner-header { position: fixed; inset: 0 0 auto; background: linear-gradient(180deg,#050606f5 0%,#050606d9 46%,#05060600 100%); transition: opacity .35s ease, transform .35s ease; }
.personal-page.is-timeline-travel .inner-header { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.personal-page .inner-header .brand,.personal-page .inner-header .header-nav a { text-shadow: 0 1px 12px #000,0 1px 3px #000; }
.personal-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.personal-about-link { margin-top: 14px; color: #d5d0c3; font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid #d5d0c377; padding: 12px 0 9px; }
.personal-about-link:hover { color: #fff; border-color: #fff; }
.personal-page .personal-hero { min-height: 100svh; padding-top: calc(8vh + 76px); }
@media (min-width: 761px) {
  .personal-page .personal-opening { top: clamp(-140px, -10vh, -80px); }
}
.personal-page .personal-machine { overflow: visible; -webkit-mask-image: linear-gradient(90deg,transparent,#000 34%); mask-image: linear-gradient(90deg,transparent,#000 34%); }
.personal-stage-image--dark { position: relative; }
.personal-stage-image--lit,.personal-stage-computer { position: absolute; inset: 0; width: 100%; height: auto; }
.personal-stage-image--lit { opacity: 0; animation: room-light-on 1.65s .18s linear forwards; }
.personal-stage-computer { z-index: 3; opacity: 0; animation: computer-light-on 1.1s .8s ease-out forwards; }
.personal-stage-screen { z-index: 2; opacity: 0; animation: monitor-power-on .55s 1.35s ease-out forwards; }
@keyframes room-light-on {
  0%,16% { opacity: 0; }
  19% { opacity: .72; }
  22%,31% { opacity: 0; }
  35% { opacity: .34; }
  39% { opacity: .08; }
  47%,100% { opacity: 1; }
}
@keyframes computer-light-on { to { opacity: 1; } }
@keyframes monitor-power-on { from { opacity: 0; filter: brightness(2); } to { opacity: 1; filter: brightness(1); } }
.personal-computer-trigger { position: absolute; z-index: 4; left: 61.8%; top: 43%; width: 20%; height: 47%; border: 0; background: transparent; cursor: zoom-in; pointer-events: auto; }
.personal-computer-trigger:focus-visible { outline: 2px solid #f3f0df; outline-offset: 4px; }
.computer-archive { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: clamp(20px,3vw,50px); border: 0; overflow: auto; background: radial-gradient(ellipse at 48% 55%,#23231c 0,#080908 55%,#030404 100%); color: #f2f0e9; }
.computer-archive::backdrop { background: transparent; }
.computer-archive-close { position: absolute; z-index: 10; top: clamp(20px,3vw,50px); right: clamp(20px,3vw,50px); display: flex; gap: 18px; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid #ebe5d199; background: transparent; color: #ebe5d1; cursor: pointer; font: 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform: uppercase; letter-spacing: .08em; }
.computer-archive-close span { font: 26px/0 var(--body); }
.computer-archive-layout { min-height: calc(100dvh - 100px); max-width: 1450px; margin: auto; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr); align-items: center; gap: clamp(30px,6vw,110px); }
.computer-archive-object { position: relative; width: min(100%,78vh,760px); margin: auto; transform-origin: 50% 50%; }
.computer-archive-object img { position: relative; z-index: 2; width: 100%; height: auto; pointer-events: none; }
.computer-archive-screen { position: absolute; left: 24%; top: 9%; width: 52%; height: 35%; overflow: hidden; border-radius: 13% / 9%; background: #050706; cursor: pointer; }
.computer-archive-screen video { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) contrast(1.08); }
.computer-archive-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px,#0003 3px 4px),radial-gradient(ellipse at center,transparent 48%,#0008 100%); }
.computer-archive-panel { max-width: 440px; }
.computer-archive-panel h2 { margin: 28px 0; font: 800 clamp(60px,7vw,125px)/.8 var(--display); letter-spacing: -.105em; }
.computer-archive-panel h2 span { color: #c9bda1; }
.computer-archive-panel p { max-width: 370px; color: #bdbbb2; font-size: clamp(15px,1.3vw,19px); line-height: 1.5; }
.computer-archive-files { display: grid; gap: 8px; margin-top: 25px; }
.computer-archive-files button { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: center; min-height: 62px; padding: 9px 12px; border: 1px solid #dcd8c744; background: #151612; color: #f1eee3; text-align: left; cursor: pointer; }
.computer-archive-files button.is-selected,.computer-archive-files button:hover { border-color: #ddd5b8; background: #22231d; }
.computer-archive-files button span { grid-row: span 2; color: #a99f86; font: 11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.computer-archive-files button strong { font: 600 15px var(--body); }
.computer-archive-files button small { color: #aaa9a0; font: 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.computer-archive-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.computer-archive-controls button { min-height: 42px; padding: 0 15px; border: 1px solid #dcd8c766; background: #151612; color: #f1eee3; cursor: pointer; font: 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform: uppercase; }
.computer-archive-controls button:hover { background: #d8d1bc; color: #111; }
.computer-archive-story { display: flex; justify-content: space-between; max-width: 370px; padding: 12px 0; border-bottom: 1px solid #dcd8c788; text-decoration: none; font-size: 13px; }
@media (max-width: 760px) {
  .personal-page .personal-hero { min-height: max(970px,110svh); padding-top: 110px; }
  .personal-page .personal-machine { inset: 62px auto auto calc(50% - 953px); -webkit-mask-image: linear-gradient(180deg,transparent,#000 13%); mask-image: linear-gradient(180deg,transparent,#000 13%); }
  .personal-computer-trigger { display: none; }
  .computer-archive-layout { grid-template-columns: 1fr; gap: 0; padding-top: 50px; }
  .computer-archive-object { width: min(74vw,370px); }
  .computer-archive-panel { margin: -8px auto 30px; }
  .computer-archive-panel h2 { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-stage-image--lit,.personal-stage-computer,.personal-stage-screen { animation: none; opacity: 1; transform: none; }
}

/* JUFU DAILY: a quiet editorial index for the article template. */
.daily-page { background: #08090a; }
.daily-page .brand-point { color: var(--acid); }
.daily-index { min-height: calc(100svh - 152px); padding: clamp(60px,8vw,130px) clamp(24px,6vw,100px) 110px; background: radial-gradient(ellipse at 82% 8%,#18211b 0,transparent 38%),#08090a; }
.daily-index-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,390px); align-items: end; gap: 40px; min-height: 43vh; padding-bottom: 75px; }
.daily-index-heading p { margin: 0 0 24px; color: #b5bcb6; font: 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.daily-index h1 { margin: 0; font: 700 clamp(88px,13vw,230px)/.72 var(--ai-display); letter-spacing: -.105em; }
.daily-index h1 span { color: var(--acid); }
.daily-index-intro { max-width: 390px; margin: 0 0 4px; color: #c9ceca; font-size: clamp(17px,1.45vw,23px); line-height: 1.3; letter-spacing: -.025em; }
.daily-index-labels { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #8b938b; padding: 20px 0 6px; color: #aeb6ae; font: 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.daily-issue-list { list-style: none; margin: 0; padding: 0; }
.daily-issue-list li { border-bottom: 1px solid #515851; }
.daily-issue-list a { display: grid; grid-template-columns: minmax(110px,.2fr) minmax(0,1fr) 30px; gap: clamp(18px,4vw,72px); padding: clamp(30px,4vw,64px) 0; text-decoration: none; transition: padding .3s ease,background .3s ease; }
.daily-issue-list a:hover { padding-left: 14px; background: #121715; }
.daily-issue-list time { padding-top: 7px; color: var(--acid); font: 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform: uppercase; }
.daily-issue-list strong { display: block; max-width: 900px; font: 600 clamp(32px,4.8vw,76px)/.96 var(--ai-display); letter-spacing: -.065em; }
.daily-issue-list small { display: block; max-width: 650px; margin-top: 20px; color: #b2b8b3; font-size: clamp(14px,1.2vw,18px); line-height: 1.4; }
.daily-issue-list a>span:last-child { padding-top: 6px; color: var(--acid); font-size: 24px; }
.daily-index-note { margin: 45px 0 0; color: #929b94; font-size: 13px; }
@media (max-width: 760px) {
  .daily-index { padding-top: 78px; padding-bottom: 80px; }
  .daily-index-hero { display: block; min-height: 0; padding-bottom: 65px; }
  .daily-index h1 { font-size: clamp(82px,22vw,150px); }
  .daily-index-intro { margin-top: 46px; }
  .daily-index-labels span:last-child { display: none; }
  .daily-issue-list a { grid-template-columns: 1fr 25px; gap: 12px; }
  .daily-issue-list time { grid-column: 1 / -1; }
  .daily-issue-list small { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .daily-issue-list a { transition: none; }
}

/* The timeline rises over the same Brooklyn shot as the room pulls away. */
.personal-page .archive-timeline-yearly { --scene-reveal: 0; --scene-shift: 44px; }
.personal-page .archive-timeline-yearly .timeline-scene-video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; pointer-events: none; filter: blur(var(--scene-blur,0px)); }
.personal-page .archive-timeline-yearly .timeline-mobile-room { display: none; }
.personal-page .archive-timeline-yearly .room-intro-flicker { position: absolute; z-index: 2; inset: 0; background: #020303; opacity: 0; pointer-events: none; animation: room-intro-flicker 1.4s ease-out both; }
@keyframes room-intro-flicker {
  0%,12% { opacity: .88; }
  15% { opacity: .12; }
  19%,31% { opacity: .82; }
  36% { opacity: .24; }
  41% { opacity: .65; }
  53%,100% { opacity: 0; }
}
.personal-page .archive-timeline-yearly.is-scene-complete .timeline-scene-video { visibility: hidden; }
.personal-page .archive-timeline-yearly .timeline-head,
.personal-page .archive-timeline-yearly .timeline-viewport,
.personal-page .archive-timeline-yearly .timeline-foot { z-index: 3; opacity: var(--scene-reveal); transform: translateY(var(--scene-shift)); }
.personal-page .archive-timeline-yearly:not(.is-scene-ready) .timeline-head,
.personal-page .archive-timeline-yearly:not(.is-scene-ready) .timeline-viewport,
.personal-page .archive-timeline-yearly:not(.is-scene-ready) .timeline-foot { pointer-events: none; }
.personal-page .archive-timeline-yearly.is-scene-pinned .timeline-sticky { position: sticky; top: 0; }

.personal-page .archive-timeline { background: #e7e4d9; }
.personal-page .archive-timeline-yearly .timeline-sticky { isolation: isolate; color: #171a17; background: #e7e4d9; }
.personal-page .archive-timeline-yearly .timeline-sticky::before { display: block; z-index: 0; inset: -24px; opacity: 1; background: url('assets/personal-brooklyn-final.jpg') center / cover no-repeat; filter: blur(14px); transform: scale(1.03); }
.personal-page .archive-timeline-yearly .timeline-sticky::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,#f1eee7b8,#f1eee79f 48%,#f1eee7b8); opacity: var(--scene-reveal); pointer-events: none; }
.personal-page .archive-timeline-yearly .timeline-viewport { background: transparent; }
.personal-page .archive-timeline-yearly .timeline-viewport::after { background: #222521; box-shadow: none; }
.personal-page .archive-timeline-yearly .timeline-head h2 em { color: #896a4f; }
.personal-page .archive-timeline-yearly .timeline-count,
.personal-page .archive-timeline-yearly .timeline-foot { color: #424740; }
.personal-page .archive-timeline-yearly .timeline-controls button { border-color: #272a24; background: #f1eee7ab; color: #171a17; }
.personal-page .archive-timeline-yearly .timeline-controls button:hover:not(:disabled) { background: #171a17; color: #fff; }
.personal-page .archive-timeline-yearly .timeline-controls .timeline-skip { color: #171a17; border-color: #353932; background: transparent; }
.personal-page .archive-timeline-yearly .timeline-progress { background-image: linear-gradient(#3c423777,#3c423777); }
.personal-page .archive-timeline-yearly .timeline-progress span { background: #1b211b; box-shadow: none; }
.personal-page .archive-timeline-yearly .timeline-track { gap: clamp(100px,12vw,240px); padding-inline: calc(50vw - min(39vw,520px)); }
.personal-page .archive-timeline-yearly .timeline-panel { flex-basis: min(78vw,1040px); width: min(78vw,1040px); }
.personal-page .archive-timeline-yearly .year-panel-origin { margin-right: 0; }
.personal-page .archive-timeline-yearly .year-panel-origin::before,
.personal-page .archive-timeline-yearly .timeline-panel::after,
.personal-page .archive-timeline-yearly .timeline-panel::before { display: none; }
.personal-page .archive-timeline-yearly .timeline-art { left: 50%; top: clamp(58px,8vh,95px); width: min(43vw,470px); height: min(55vh,530px); transform: translateX(-50%) translateY(var(--art-shift,0px)) scale(var(--lens-scale,.88)); filter: brightness(1) saturate(1); }
.personal-page .archive-timeline-yearly .year-panel-up .timeline-art { width: min(69vw,830px); height: auto; aspect-ratio: 16 / 9; }
.personal-page .archive-timeline-yearly .year-panel-down .timeline-art { top: clamp(58px,8vh,95px); }
.personal-page .archive-timeline-yearly .year-image-slot { border-radius: 0; background: transparent; -webkit-mask-image: radial-gradient(ellipse closest-side at center,#000 40%,#000e 62%,transparent 100%); mask-image: radial-gradient(ellipse closest-side at center,#000 40%,#000e 62%,transparent 100%); }
.personal-page .archive-timeline-yearly .year-image-slot::after { background: radial-gradient(ellipse closest-side at center,transparent 55%,#0005 100%); }
.personal-page .archive-timeline-yearly .timeline-panel:hover .year-image-slot,
.personal-page .archive-timeline-yearly .timeline-panel:focus-visible .year-image-slot { transform: scale(1.03); filter: none; }
.personal-page .archive-timeline-yearly .year-copy { bottom: 22px; color: #171a17; opacity: 1; }
.personal-page .archive-timeline-yearly .year-panel-down .year-copy { bottom: 22px; }
.personal-page .archive-timeline-yearly .year-copy h3 { font-size: clamp(26px,3vw,46px); }
.personal-page .archive-timeline-yearly .year-copy p { color: #343b32; font-size: clamp(13px,1.2vw,17px); }
.personal-page .archive-timeline-yearly .year-marker { bottom: 107px; }
.personal-page .archive-timeline-yearly .year-marker span { background: transparent; color: #4e544c; font-size: 26px; }
.personal-page .archive-timeline-yearly .year-panel.is-active .year-marker span { color: #171a17; }
.personal-page .archive-timeline-yearly .year-panel-origin .year-image-slot img { transform: scale(1.25); object-position: 56% 52%; }
/* The opening copy and monitor sit over the exact first frame of the scroll film. */
.personal-page .archive-timeline-yearly .personal-hero {
  position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; min-height: 0;
  padding: 8vh clamp(24px,6vw,100px) 10vh; background: none; color: #f2f0e9;
  opacity: var(--hero-opacity,1); transform: translateY(var(--hero-shift,0px));
  pointer-events: none;
}
.personal-page .archive-timeline-yearly .personal-hero::before { z-index: 0; }
.personal-page .archive-timeline-yearly .personal-opening { top: clamp(-140px,-10vh,-80px); pointer-events: auto; }
.personal-page .archive-timeline-yearly.is-hero-past .personal-opening { pointer-events: none; }
.personal-page .archive-timeline-yearly .personal-machine {
  position: absolute; left: 58%; top: 50%; right: auto; bottom: auto;
  width: max(100vw,calc(100svh * 16 / 9)); height: auto; aspect-ratio: 16 / 9;
  transform: translate(-58%,-50%); -webkit-mask-image: none; mask-image: none;
}
.personal-page .archive-timeline-yearly .personal-stage-screen {
  left: 63.8%; top: 46.2%; width: 11.15%; height: 13.9%; aspect-ratio: auto;
  border-radius: 6% / 8%; animation: none; opacity: var(--screen-opacity,1);
}
.personal-page .archive-timeline-yearly .personal-stage-screen video { opacity: 1; }
.personal-page .archive-timeline-yearly .personal-computer-trigger { left: 60.8%; top: 42.5%; width: 18%; height: 39%; }
.personal-page .archive-timeline-yearly.is-hero-past .personal-computer-trigger { pointer-events: none; }
.personal-page .archive-timeline-yearly .hero-tail { z-index: 1; }
.personal-page .archive-timeline-yearly:not(.is-scene-ready) .timeline-edge { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .personal-page .archive-timeline-yearly .timeline-sticky { height: 100svh; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding-bottom: 0; }
  .personal-page .archive-timeline-yearly .timeline-scene-video { display: none; }
  .personal-page .archive-timeline-yearly .timeline-mobile-room { display: block; position: absolute; z-index: 1; inset: 0; background: url('assets/personal-brooklyn-start.jpg') 77% center / cover no-repeat; opacity: var(--mobile-room-opacity,1); pointer-events: none; }
  .personal-page .archive-timeline-yearly.is-hero-past .personal-hero { visibility: hidden; }
  .personal-page .archive-timeline-yearly .personal-hero { padding: 105px 20px 30px; }
  .personal-page .archive-timeline-yearly .personal-opening { top: 0; max-width: 100%; }
  .personal-page .archive-timeline-yearly .personal-opening h1 { margin: 10px 0 12px; font-size: clamp(52px,12.5vw,76px); }
  .personal-page .archive-timeline-yearly .personal-opening>p:not(.archive-index) { max-width: 330px; font-size: 13px; line-height: 1.35; }
  .personal-page .archive-timeline-yearly .personal-hero-links { gap: 0 20px; }
  .personal-page .archive-timeline-yearly .personal-about-link { margin-top: 5px; }
  .personal-page .archive-timeline-yearly .personal-machine { left: 77%; top: 50%; width: max(100vw,calc(100svh * 16 / 9)); transform: translate(-77%,-50%); -webkit-mask-image: none; mask-image: none; }
  .personal-page .archive-timeline-yearly .timeline-track { gap: 18px; padding-inline: 20px; height: min(65svh,630px); min-height: 460px; }
  .personal-page .archive-timeline-yearly .timeline-panel { flex-basis: calc(100vw - 40px); width: calc(100vw - 40px); }
  .personal-page .archive-timeline-yearly .timeline-art,
  .personal-page .archive-timeline-yearly .year-panel-down .timeline-art { left: 50%; top: clamp(32px,5svh,60px); width: min(76vw,380px); height: min(43svh,410px); }
  .personal-page .archive-timeline-yearly .year-panel-up .timeline-art { top: clamp(90px,12svh,130px); width: min(92vw,480px); height: auto; }
  .personal-page .archive-timeline-yearly .year-copy,
  .personal-page .archive-timeline-yearly .year-panel-down .year-copy { bottom: 22px; }
  .personal-page .archive-timeline-yearly .year-marker { bottom: 103px; }
  .personal-page .archive-timeline-yearly .year-panel-origin .year-image-slot img { transform: scale(1.25); object-position: 56% 52%; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-page .archive-timeline-yearly .timeline-scene-video { display: none; }
  .personal-page .archive-timeline-yearly .room-intro-flicker { animation: none; opacity: 0; }
}

/* Daylight Personal direction: the computer belongs to the first-upload chapter. */
.personal-page { background: #f4f1e9; color: #182521; }
.personal-page .inner-header { background: linear-gradient(180deg,#f4f1e9f7,#f4f1e9e8 72%,#f4f1e900); color: #182521; }
.personal-page .inner-header .brand,.personal-page .inner-header .header-nav a { text-shadow: none; }
.personal-page .inner-header .header-nav .world-switch { border-color: #18252160; }
.personal-page .brand-point { color: #ec6b3b; }
.daylight-hero { position: relative; min-height: min(900px,100svh); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.86fr); align-items: center; gap: clamp(36px,6vw,110px); padding: 120px clamp(24px,6vw,100px) 80px; overflow: hidden; background: linear-gradient(140deg,#f8f4e8 0%,#e5f2f1 72%,#d7e8eb 100%); }
.daylight-hero::before { content: ""; position: absolute; width: 34vw; height: 34vw; right: -9vw; top: -11vw; border: 1px solid #1825211c; border-radius: 50%; pointer-events: none; }
.daylight-intro { z-index: 1; align-self: center; max-width: 750px; }
.daylight-intro .archive-index { color: #46615a; }
.daylight-intro h1 { margin: clamp(25px,4vw,60px) 0 22px; font: 800 clamp(86px,11vw,192px)/.86 "Helvetica Neue",Arial,sans-serif; letter-spacing: -.052em; }
.daylight-intro h1 em { color: #df653a; font-style: normal; }
.daylight-intro>p:not(.archive-index) { max-width: 560px; margin: 0; font-size: clamp(17px,1.5vw,23px); line-height: 1.38; }
.daylight-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px,4vw,58px); }
.daylight-actions a { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 150px; padding: 16px 18px; border: 1px solid #182521; color: #182521; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s,color .2s; }
.daylight-actions a:first-child,.daylight-actions a:hover { background: #182521; color: #fff; }
.daylight-actions a:first-child:hover { background: #df653a; border-color: #df653a; }
.daylight-portrait { position: relative; z-index: 1; align-self: center; width: 100%; max-width: 640px; margin: 0; padding: 13px 13px 0; background: #fffaf0; box-shadow: 17px 17px 0 #699a9a55; transform: rotate(2deg); }
.daylight-portrait img { width: 100%; height: min(46vw,600px); object-fit: cover; object-position: center 20%; }
.daylight-portrait figcaption { padding: 12px 4px 14px; color: #495852; font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; text-transform: uppercase; }
.daylight-footnote { position: absolute; left: clamp(24px,6vw,100px); bottom: 22px; margin: 0; color: #60726b; font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .09em; text-transform: uppercase; }
.daylight-story { background: #f8f6f0; color: #182521; scroll-margin-top: 72px; }
.daylight-place { position: relative; height: clamp(270px,36vw,540px); overflow: hidden; background: #b2cbd3; }
.daylight-place img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.daylight-place::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent,#10241ba8); }
.daylight-place span { position: absolute; z-index: 1; left: clamp(24px,6vw,100px); bottom: 32px; color: #fff; font: 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .11em; }
.daylight-story-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8vw; align-items: end; padding: clamp(70px,9vw,140px) clamp(24px,6vw,100px) clamp(45px,6vw,95px); }
.daylight-story-intro .archive-index { grid-column: 1/-1; color: #6e796e; }
.daylight-story-intro h2 { margin: 25px 0 0; font: 800 clamp(70px,9vw,155px)/.88 "Helvetica Neue",Arial,sans-serif; letter-spacing: -.055em; }
.daylight-story-intro h2 span { color: #df653a; }
.daylight-story-intro>p:last-child { max-width: 480px; margin: 0 0 7px; font-size: clamp(18px,1.8vw,26px); line-height: 1.35; }
.daylight-chapters { padding: 0 clamp(24px,6vw,100px); }
.daylight-chapter { display: grid; grid-template-columns: minmax(75px,.25fr) minmax(0,1fr) minmax(230px,.75fr); align-items: center; gap: clamp(25px,5vw,90px); min-height: 560px; padding: clamp(40px,5vw,75px) 0; border-top: 1px solid #18252155; scroll-margin-top: 78px; }
.chapter-year { align-self: start; padding-top: 8px; font: 800 clamp(30px,4vw,64px)/1 var(--display); letter-spacing: -.08em; color: #df653a; }
.chapter-media { min-width: 0; width: 100%; height: clamp(310px,38vw,600px); overflow: hidden; background: #c7d5ce; }
.chapter-media img { width: 100%; height: 100%; object-fit: cover; }
.chapter-media-birth img { object-fit: contain; }
.chapter-media-now img { object-position: center 24%; }
.chapter-media-computer { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px; background: #a9c4bf; }
.chapter-media-type { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(24px,4vw,58px); font-family: "Helvetica Neue",Arial,sans-serif; text-transform: uppercase; }
.chapter-media-type span,.chapter-media-type small { font: 600 clamp(12px,1.4vw,18px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .15em; }
.chapter-media-type strong { max-width: 100%; font-size: clamp(50px,8vw,126px); line-height: .85; letter-spacing: -.065em; overflow-wrap: anywhere; }
.chapter-media-vine { background: #b7d5c6; color: #1b3427; }
.chapter-media-vine span:nth-child(2) { margin-left: clamp(20px,4vw,70px); }
.chapter-media-vine strong { margin-top: 35px; color: #f9f5e9; text-shadow: 3px 3px 0 #1b3427; }
.chapter-media-song { align-items: center; text-align: center; background: radial-gradient(circle at 50% 55%,#ecaa71 0%,#da6f44 46%,#77392f 100%); color: #fff8e9; }
.chapter-media-song strong { font-size: clamp(76px,10vw,160px); transform: rotate(-6deg); }
.chapter-media-song small { margin-top: 32px; }
.chapter-media-fomo { background: linear-gradient(145deg,#1b3433,#547881 60%,#b4d3be); color: #f7f2e8; }
.chapter-media-fomo strong { margin: 55px 0 35px; font-size: clamp(85px,12vw,190px); }
.chapter-media-type strong { transition: transform .45s ease; }
.chapter-media-type:hover strong { transform: translateY(-9px); }
.chapter-media-song:hover strong { transform: translateY(-9px) rotate(-6deg); }
.chapter-computer-object { position: relative; width: min(80%,390px); aspect-ratio: 1400/1424; }
.chapter-computer-object>img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.chapter-computer-screen { position: absolute; left: 24%; top: 9%; width: 52%; height: 35%; overflow: hidden; background: #050706; }
.chapter-computer-screen img { width: 100%; height: 100%; object-fit: cover; }
.personal-page .story-computer .personal-computer-trigger { display: block; position: static; width: auto; height: auto; padding: 12px 0 6px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #182521; font-size: 14px; font-weight: 700; cursor: pointer; }
.personal-page .story-computer .personal-computer-trigger span { margin-left: 28px; }
.chapter-copy h3 { margin: 0 0 14px; font: 800 clamp(36px,4vw,66px)/.98 "Helvetica Neue",Arial,sans-serif; letter-spacing: -.05em; }
.chapter-copy p { max-width: 340px; margin: 0; color: #4b5c53; font-size: clamp(16px,1.5vw,21px); line-height: 1.4; }
.chapter-link { display: inline-flex; align-items: center; gap: 25px; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid currentColor; color: #182521; font-size: 14px; font-weight: 700; text-decoration: none; }
.chapter-link:hover { color: #bd512d; }
.daylight-next { display: flex; justify-content: space-between; align-items: center; margin: 0 clamp(24px,6vw,100px); padding: 26px 0 42px; border-top: 1px solid #18252155; color: #182521; font-weight: 700; text-decoration: none; }
.personal-page .personal-about { background: #e8f0e9; color: #182521; }
.personal-page .personal-about h2 em { color: #d8623b; }
.personal-page .about-story p { color: #31473c; }
.personal-page .about-story strong,.personal-page .about-story .about-signoff { color: #182521; }
.personal-page .about-portrait figcaption { color: #54665b; }
.personal-page .practice-list { border-color: #18252133; }
.personal-page .practice-list span { border-color: #1825214d; color: #31473c; }
.personal-page .personal-film { background: #f5eadd; color: #182521; }
.personal-page .personal-film h2 em { color: #d8623b; }
.personal-page .film-layout>div>p:not(.archive-index) { color: #42574e; }
.personal-page .music-end { background: #dfece8; color: #182521; }
.personal-page .music-end>p { color: #42574e; }
.personal-page .music-end .social-links a { color: #182521; border-color: #182521; }
.personal-contact { padding: clamp(78px,10vw,150px) clamp(24px,6vw,100px); background: #f7f2e8; color: #182521; }
.personal-contact h2 { margin: 45px 0 25px; font: 800 clamp(64px,10vw,148px)/.88 "Helvetica Neue",Arial,sans-serif; letter-spacing: -.055em; }
.personal-contact>p { max-width: 570px; margin: 0 0 50px; color: #42574e; font-size: clamp(18px,2vw,25px); line-height: 1.35; }
.personal-contact-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #18252166; }
.personal-contact-links a { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-content: space-between; min-height: 175px; padding: 22px 0; border-bottom: 1px solid #18252166; color: inherit; text-decoration: none; }
.personal-contact-links a:first-child { margin-right: 35px; }
.personal-contact-links a>span:first-child { grid-column: 1 / -1; color: #596d61; font: 600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; text-transform: uppercase; }
.personal-contact-links strong { min-width: 0; overflow-wrap: anywhere; font-size: clamp(20px,2.7vw,40px); letter-spacing: -.04em; }
.personal-contact-links a:hover strong { color: #bd512d; }
@media (max-width: 700px) { .personal-contact { padding: 80px 22px; } .personal-contact-links { grid-template-columns: 1fr; } .personal-contact-links a:first-child { margin-right: 0; } .personal-contact-links a { min-height: 135px; } }
.personal-page .site-footer { background: #182521; color: #f8f6f0; }
.personal-page .site-footer>a:last-child { color: #e1e6dd; }
@media (max-width: 760px) {
  .personal-page .inner-header { padding: 15px 20px; min-height: 66px; }
  .personal-page .inner-header .header-nav { gap: 8px; }
  .daylight-hero { display: flex; flex-direction: column; align-items: stretch; gap: 26px; min-height: 0; padding: 112px 22px 62px; }
  .daylight-intro h1 { margin: 27px 0 22px; font-size: clamp(75px,18vw,124px); }
  .daylight-intro>p:not(.archive-index) { max-width: 560px; font-size: 17px; line-height: 1.42; }
  .daylight-actions { margin-top: 24px; }
  .daylight-actions a { flex: 1 1 140px; min-width: 0; padding: 15px 13px; }
  .daylight-portrait { width: min(88%,480px); align-self: center; margin: 8px auto 0; }
  .daylight-portrait img { height: min(100vw,440px); }
  .daylight-footnote { position: static; margin: 18px 0 0; }
  .daylight-place { height: 260px; }
  .daylight-place img { object-position: 41% center; }
  .daylight-place span { left: 22px; bottom: 20px; font-size: 9px; }
  .daylight-story-intro { display: block; padding: 70px 22px 45px; }
  .daylight-story-intro h2 { margin: 25px 0 28px; font-size: clamp(70px,17vw,110px); }
  .daylight-story-intro>p:last-child { font-size: 18px; }
  .daylight-chapters { padding: 0 22px; }
  .daylight-chapter { display: grid; grid-template-columns: 1fr; gap: 23px; min-height: 0; padding: 38px 0 52px; }
  .chapter-year { font-size: 38px; }
  .chapter-media { height: auto; aspect-ratio: 1 / 1.08; }
  .chapter-media-birth img { object-position: center; }
  .chapter-media-computer { aspect-ratio: 1 / 1; }
  .chapter-media-type strong { font-size: clamp(54px,14vw,88px); }
  .chapter-media-song strong { font-size: clamp(76px,20vw,120px); }
  .chapter-media-fomo strong { font-size: clamp(80px,23vw,140px); }
  .chapter-computer-object { width: min(83%,390px); }
  .chapter-copy h3 { font-size: 43px; }
  .daylight-next { margin: 0 22px; }
}