:root { --ink:#080809; --night:#101017; --paper:#e7e5e1; --muted:#aaa8a5; --red:#d80c17; --silver:#d9d8d3; --line:rgba(231,229,225,.35); }
* { box-sizing:border-box; scrollbar-color:#b20b15 #17171a; }
*::-webkit-scrollbar { width:9px; height:9px; } *::-webkit-scrollbar-track { background:#17171a; } *::-webkit-scrollbar-thumb { background:#b20b15; border:2px solid #17171a; }
html { background:var(--ink); scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:"Helvetica Neue",Arial,sans-serif; }
a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; max-width:100%; } :focus-visible { outline:3px solid #fa3a43; outline-offset:4px; }
.skip-link { position:fixed; z-index:200; top:8px; left:8px; padding:12px; transform:translateY(-150%); background:var(--paper); color:var(--ink); } .skip-link:focus { transform:none; }
.noise { position:fixed; z-index:100; inset:0; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.site-nav { position:fixed; z-index:90; top:0; width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 30px; color:#fff; mix-blend-mode:difference; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.wordmark { font-weight:800; font-size:17px; letter-spacing:-.05em; }.wordmark span,.section-kicker,.eyebrow,.story-number { color:var(--red); }.site-nav nav { display:flex; gap:28px; }.site-nav a { position:relative; padding-block:5px; }.site-nav nav a::after,.resume-link::after { content:""; position:absolute; bottom:0; left:0; right:100%; height:1px; background:currentColor; transition:right .25s; }.site-nav a:hover::after,.site-nav a:focus-visible::after { right:0; }.resume-link { justify-self:end; }
.hero { position:relative; min-height:100svh; overflow:hidden; background:#060607; isolation:isolate; }.hero-art { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.06); }.hero-vignette { position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(4,4,5,.92),rgba(4,4,5,.2) 57%,rgba(4,4,5,.55)),linear-gradient(0deg,#080809,transparent 38%); }
.hero-copy { position:relative; z-index:3; padding:clamp(210px,43vh,430px) 5vw 7vh; max-width:950px; }.eyebrow,.section-kicker { margin:0 0 16px; text-transform:uppercase; font:11px/1.4 monospace; letter-spacing:.17em; }.hero h1 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-weight:400; font-size:clamp(86px,14.5vw,235px); line-height:.7; letter-spacing:-.06em; }.hero h1 span { color:var(--red); }.hero-statement { width:min(385px,85vw); margin:35px 0 0; font-size:clamp(18px,2vw,28px); line-height:1.12; letter-spacing:-.03em; }.hero-notes { position:absolute; z-index:3; right:4vw; bottom:5vh; text-align:right; font:11px/1.45 monospace; letter-spacing:.04em; color:#e4e1db; }.hero-notes p+ p { color:var(--red); text-transform:uppercase; margin-top:25px; }
.manifesto { position:relative; overflow:hidden; min-height:85svh; padding:16vh 8vw; background:var(--paper); color:var(--ink); }.manifesto h2 { position:relative; z-index:2; max-width:1150px; margin:0; font-size:clamp(44px,7.7vw,126px); font-weight:450; line-height:.86; letter-spacing:-.075em; }.manifesto h2 em { color:var(--red); font-style:normal; }.manifesto>p:not(.section-kicker) { position:relative; z-index:2; max-width:540px; margin:60px 0 0 36%; font-size:clamp(18px,2.1vw,28px); line-height:1.15; letter-spacing:-.03em; }.manifesto-trace { position:absolute; width:135vw; height:24px; right:-22vw; bottom:20%; transform:rotate(-12deg); background:linear-gradient(180deg,#4f0509,#fd4048 40%,#760009 54%,#e10d19 82%,#2a0002); box-shadow:0 18px 19px rgba(0,0,0,.26),inset 0 3px 2px rgba(255,255,255,.4); border-radius:100%; opacity:.94; }
.work { background:#080809; }.work-intro { min-height:78svh; padding:17vh 8vw 8vh; background:radial-gradient(circle at 78% 55%,#241116,transparent 27%),#080809; }.work-intro h2 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(68px,10vw,166px); font-weight:400; line-height:.78; letter-spacing:-.06em; }.work-intro>p:last-child { max-width:430px; margin:55px 0 0 52%; color:var(--muted); font-size:15px; line-height:1.5; }
.story { --p:0; --r:0; --scene-scale:1.12; --scene-x:0px; --scene-y:0px; --scene-rotate:0deg; --gate-y:0px; --evidence-y:0px; --evidence-rotate:0deg; --evidence-scale:1; --pane-opacity:0; position:relative; min-height:240svh; }.story-sticky { position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; background:#060607; }.story-cinema,.scene-back,.scene-shade { position:absolute; inset:0; }.scene-back { width:100%; height:100%; object-fit:cover; object-position:center; transform:translate3d(var(--scene-x),var(--scene-y),0) scale(var(--scene-scale)) rotate(var(--scene-rotate)); transition:transform .05s linear; filter:saturate(.78) contrast(1.08) brightness(.72); }.scene-shade { z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(4,4,5,.82),rgba(4,4,5,.14) 60%,rgba(4,4,5,.72)),linear-gradient(0deg,#050506,transparent 48%,rgba(0,0,0,.28)); }
.story-copy { position:relative; z-index:4; width:min(650px,61vw); padding:clamp(120px,20vh,240px) 7vw 0; transform:translate3d(0,var(--copy-y),0); opacity:var(--copy-opacity); transition:opacity .12s,transform .12s; }.story-copy h3 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(65px,9.6vw,150px); font-weight:400; line-height:.76; letter-spacing:-.055em; text-transform:uppercase; }.story-question { max-width:28ch; margin:28px 0 0; font-size:clamp(18px,2vw,30px); line-height:1.08; letter-spacing:-.035em; }.story-action { max-width:360px; margin-top:28px; color:#bdbab6; font:11px/1.55 monospace; text-transform:uppercase; letter-spacing:.07em; }
.scene-gate { position:absolute; z-index:3; inset:-3% 0 auto; width:100%; height:105%; max-width:none; object-fit:fill; transform:translateY(var(--gate-y)); transition:transform .05s linear; filter:drop-shadow(12px 18px 13px rgba(0,0,0,.86)); }.story-01 .scene-back { filter:brightness(.6) saturate(.5) contrast(1.15); }.story-01 .scene-shade { background:linear-gradient(90deg,rgba(0,0,0,.8),transparent 58%,rgba(0,0,0,.4)),linear-gradient(0deg,#060607,transparent 60%); }
.evidence { position:absolute; z-index:5; right:5vw; bottom:5vh; width:min(33vw,520px); display:grid; gap:10px; transform:translate3d(var(--evidence-x),var(--evidence-y),0) rotate(var(--evidence-rotate)) scale(var(--evidence-scale)); opacity:var(--r); transition:transform .12s,opacity .12s; }.evidence>p { margin:0; font:9px/1.4 monospace; letter-spacing:.12em; text-transform:uppercase; color:#fff; }.evidence>img { width:100%; border:1px solid rgba(255,255,255,.42); box-shadow:0 15px 32px rgba(0,0,0,.38); }.evidence>img+img { display:none; }.evidence-pair { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.evidence figure { margin:0; background:#161417; }.evidence figure img { width:100%; aspect-ratio:1/1; object-fit:cover; }.evidence figcaption { padding:7px; color:#ddd; font:8px/1.35 monospace; text-transform:uppercase; }.case-link { width:max-content; padding:11px 0 7px; border-bottom:1px solid currentColor; color:#fff; font:10px monospace; letter-spacing:.08em; text-transform:uppercase; }.case-link:hover { color:#fa4e57; }
.story-02 .scene-back { object-position:62% center; }.story-03 .scene-back { object-position:64% center; }.story-04 .scene-back { object-position:62% center; filter:saturate(.88) contrast(1.14) brightness(.64); }.story-04 .scene-shade { background:linear-gradient(90deg,rgba(4,4,5,.88),rgba(4,4,5,.16) 60%,rgba(4,4,5,.62)),linear-gradient(0deg,#050506,transparent 54%); }.story-05 .scene-back { object-position:62% center; }.pressure-pane { position:absolute; z-index:1; width:58vw; height:88vh; right:-8vw; top:6vh; opacity:var(--pane-opacity); transform:rotate(-8deg); border:1px solid rgba(255,233,181,.66); border-radius:48% 14% 40% 24%; background:linear-gradient(118deg,rgba(255,248,224,.17),rgba(192,133,41,.02) 29%,rgba(255,231,168,.13) 51%,rgba(49,20,2,.02) 70%); box-shadow:inset 30px 22px 50px rgba(255,232,184,.1),-18px 24px 72px rgba(0,0,0,.34); }
.project-film { min-height:100svh; display:grid; place-items:center; padding:13vh 7vw; color:var(--paper); background:radial-gradient(circle at 70% 45%,rgba(151,91,17,.21),transparent 31%),#070708; }.project-film>div { width:min(1180px,100%); }.project-film .section-kicker { margin-bottom:18px; }.project-film video { display:block; width:100%; max-height:70svh; background:#000; border:1px solid rgba(255,240,201,.35); box-shadow:0 24px 70px rgba(0,0,0,.52); }
.practice { padding:16vh 8vw; background:var(--paper); color:var(--ink); }.practice h2 { margin:0; font-size:clamp(45px,7vw,112px); line-height:.88; letter-spacing:-.07em; font-weight:450; }.method-line { display:flex; align-items:center; gap:12px; margin:90px 0; text-transform:uppercase; font:10px monospace; letter-spacing:.11em; }.method-line i { height:1px; flex:1; background:rgba(0,0,0,.35); }.lab-collage { display:grid; grid-template-columns:repeat(12,1fr); gap:15px; }.lab-collage figure { grid-column:span 6; margin:0; }.lab-collage figure:nth-child(2),.lab-collage figure:nth-child(3) { grid-column:span 3; }.lab-collage figure:nth-child(4) { grid-column:span 6; }.lab-collage img { width:100%; aspect-ratio:1.8/1; object-fit:cover; }.lab-collage figcaption { padding:8px 0 20px; border-top:1px solid rgba(0,0,0,.28); font:10px monospace; letter-spacing:.1em; text-transform:uppercase; }
.other-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:4vw; }.other-intro h2 { font-size:clamp(70px,11vw,170px); }.other-intro h2 span { color:var(--red); }.other-intro > p { max-width:34ch; margin:0 0 .3em; font-size:clamp(18px,2vw,27px); line-height:1.25; letter-spacing:-.035em; }.other-nav { display:flex; flex-wrap:wrap; gap:12px 28px; margin:70px 0 120px; padding:18px 0; border-top:1px solid rgba(0,0,0,.3); border-bottom:1px solid rgba(0,0,0,.3); }.other-nav a { color:inherit; text-decoration:none; font:11px monospace; letter-spacing:.06em; text-transform:uppercase; }.other-nav a span { color:var(--red); }.other-nav a:hover,.other-nav a:focus-visible { text-decoration:underline; text-underline-offset:5px; }.other-group { padding:0 0 120px; scroll-margin-top:100px; }.other-group-head { display:grid; grid-template-columns:1fr 3fr 1.5fr; align-items:end; gap:20px; border-top:1px solid rgba(0,0,0,.4); padding:20px 0 28px; }.other-group-head p,.other-group-head > span { margin:0; font:10px/1.5 monospace; letter-spacing:.09em; text-transform:uppercase; }.other-group-head p { color:var(--red); }.other-group-head > span { text-align:right; }.other-group h3 { margin:0; font-size:clamp(32px,4.5vw,70px); font-weight:450; line-height:.95; letter-spacing:-.055em; }.other-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }.other-card { min-width:0; }.other-placeholder { position:relative; display:flex; align-items:flex-end; justify-content:space-between; min-height:210px; aspect-ratio:1.65; padding:20px; background:linear-gradient(135deg,#d1d5d7,#b4c0c9); color:#353c48; }.other-group:nth-child(even) .other-placeholder { background:linear-gradient(135deg,#d5d2cb,#bec2c3); }.other-placeholder span { font:10px monospace; text-transform:uppercase; letter-spacing:.12em; }.other-placeholder b { font:normal clamp(38px,6vw,86px)/.8 sans-serif; opacity:.22; }.other-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; padding:14px 0 0; border-top:1px solid rgba(0,0,0,.35); }.other-caption h4 { margin:0; font-size:16px; font-weight:450; }.other-caption p { margin:0; color:#555b63; font:10px/1.5 monospace; text-transform:uppercase; }
@media (max-width:820px) { .other-intro { grid-template-columns:1fr; gap:25px; }.other-nav { margin:45px 0 80px; }.other-group { padding-bottom:80px; }.other-group-head { grid-template-columns:1fr; gap:10px; }.other-group-head > span { text-align:left; }.other-grid { grid-template-columns:1fr; gap:32px; } }
.about { min-height:100svh; display:grid; grid-template-columns:1.2fr .8fr; gap:6vw; align-items:center; padding:15vh 8vw 7vh; background:#09090b; }.about-copy h2 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(86px,13vw,200px); line-height:.71; font-weight:400; letter-spacing:-.06em; text-transform:uppercase; }.about-copy>p:not(.section-kicker) { max-width:590px; margin:40px 0; font-size:clamp(19px,2.2vw,31px); line-height:1.13; letter-spacing:-.035em; }.about-meta { margin-bottom:34px; color:#bcb9b5; font-size:13px; line-height:1.6; }.about-meta span { display:block; margin:18px 0 4px; color:var(--red); font:10px monospace; letter-spacing:.11em; text-transform:uppercase; }.about>img { width:100%; max-height:70svh; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.25) brightness(.74); }
.project-dialog { width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; overflow-y:auto; border:0; color:var(--paper); background:#070708; }.project-dialog::backdrop { background:rgba(0,0,0,.85); }.dialog-close { position:fixed; z-index:5; top:22px; right:28px; padding:11px 15px; color:#fff; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.72); cursor:pointer; font:10px monospace; letter-spacing:.12em; text-transform:uppercase; }.dialog-top { min-height:65svh; display:grid; grid-template-columns:90px minmax(300px,1fr) minmax(260px,.65fr); gap:25px; align-items:end; padding:16vh 7vw 8vh; background:#111115; }.dialog-top h2 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(62px,9vw,150px); font-weight:400; line-height:.77; letter-spacing:-.06em; }.dialog-top>p:first-child { color:var(--red); font:11px monospace; }.dialog-top>p:nth-child(3) { font-size:clamp(17px,1.8vw,27px); line-height:1.2; }.dialog-top div { grid-column:2/4; display:flex; flex-wrap:wrap; gap:8px; }.dialog-top span { padding:7px 9px; border:1px solid rgba(255,255,255,.3); font:10px monospace; text-transform:uppercase; }.dialog-images { display:grid; gap:4vw; padding:8vh 5vw 15vh; background:var(--paper); }.dialog-images img { width:100%; border:1px solid rgba(0,0,0,.2); }
@media (max-width:820px) { .site-nav { grid-template-columns:1fr 1fr; padding:18px; }.site-nav nav { display:none; }.hero-art { object-position:64% center; }.hero-copy { padding:45svh 20px 6vh; }.hero h1 { font-size:23vw; }.hero-notes { right:20px; bottom:3vh; font-size:9px; }.manifesto { min-height:72svh; padding:16vh 20px 12vh; }.manifesto>p:not(.section-kicker) { margin:42px 0 0; }.work-intro { min-height:65svh; padding:15vh 20px 8vh; }.work-intro h2 { font-size:17vw; }.work-intro>p:last-child { margin:40px 0 0; }.story { min-height:220svh; }.story-copy { width:100%; padding:17vh 20px 0; }.story-copy h3 { font-size:17vw; }.story-question { font-size:21px; max-width:22ch; }.story-action { font-size:9px; }.scene-back { object-position:66% center; }.evidence { right:20px; bottom:3vh; width:calc(100vw - 40px); }.evidence>img { max-height:23vh; object-fit:cover; object-position:left top; }.evidence-pair { display:none; }.practice { padding:14vh 20px; }.method-line { overflow-x:auto; margin:55px 0; min-width:700px; }.lab-collage { display:block; }.lab-collage figure { margin:0 0 16px; }.about { grid-template-columns:1fr; padding:15vh 20px 7vh; }.about-copy h2 { font-size:23vw; }.about>img { max-height:56svh; }.dialog-top { grid-template-columns:1fr; padding:15vh 20px 8vh; }.dialog-top div { grid-column:1; }.dialog-close { right:18px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.story { min-height:auto; padding:0; }.story-sticky { position:relative; height:auto; min-height:100svh; }.story-cinema { min-height:100svh; }.scene-back,.scene-gate { transform:none!important; transition:none!important; }.story-copy { opacity:1; transform:none; }.evidence { position:relative; right:auto; bottom:auto; width:auto; margin:0 20px; padding:0 0 40px; opacity:1; transform:none; }.story-01 .scene-gate { display:none; }.scene-shade { opacity:.8; }.noise { opacity:.035; } }

.dialog-film { display:grid; gap:12px; padding-top:3vw; color:var(--ink); }.dialog-film p { margin:0; font:10px monospace; letter-spacing:.12em; text-transform:uppercase; }.dialog-film video { width:100%; background:#000; border:1px solid rgba(0,0,0,.25); }
@media (max-width:820px) { .pressure-pane { width:110vw; height:68vh; top:21vh; right:-31vw; }.project-film { min-height:72svh; padding:12vh 20px; }.project-film video { max-height:none; } }
@media (prefers-reduced-motion:reduce) { .pressure-pane { display:none; } }
/* Project 02 — rescue terrain recedes into a tactile study of scales and spine. */
.story-02 { --snake-study-opacity:0; --snake-structure:0; --snake-hero-opacity:1; --snake-reveal-x:50%; --snake-reveal-y:54%; --snake-reveal-size:0px; --snake-parallax-x:0px; --snake-parallax-y:0px; }
.story-02 .snake-rescue-hero { object-position:center; opacity:var(--snake-hero-opacity); filter:saturate(.82) contrast(1.1) brightness(.66); }
.story-02 .scene-shade { background:linear-gradient(90deg,rgba(3,4,5,.87),rgba(3,4,5,.18) 59%,rgba(3,4,5,.68)),linear-gradient(0deg,#030405,transparent 58%),linear-gradient(132deg,rgba(120,8,14,.24),transparent 44%); }
.snake-study { position:absolute; z-index:3; left:50%; top:50%; width:min(46vw,660px); height:min(86svh,840px); opacity:var(--snake-study-opacity); clip-path:inset(0 0 calc((1 - var(--snake-structure)) * 84%) 0); transform:translate3d(calc(-50% + var(--snake-parallax-x)),calc(-50% + var(--snake-parallax-y)),0) rotate(-1deg) scale(calc(.88 + var(--snake-structure) * .16)); transform-origin:center; transition:opacity .09s linear,clip-path .09s linear,transform .12s ease-out; pointer-events:none; }
.snake-study img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.snake-bones { z-index:1; filter:drop-shadow(0 18px 26px rgba(0,0,0,.62)) drop-shadow(0 0 10px rgba(225,18,33,.22)); }
.snake-scales { z-index:2; -webkit-mask-image:radial-gradient(ellipse var(--snake-reveal-size) calc(var(--snake-reveal-size) * .72) at var(--snake-reveal-x) var(--snake-reveal-y),transparent 0 54%,#000 76%); mask-image:radial-gradient(ellipse var(--snake-reveal-size) calc(var(--snake-reveal-size) * .72) at var(--snake-reveal-x) var(--snake-reveal-y),transparent 0 54%,#000 76%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; filter:drop-shadow(0 16px 22px rgba(0,0,0,.5)); }
@media (max-width:820px) { .story-02 .snake-rescue-hero { object-position:58% center; } .snake-study { width:min(86vw,520px); height:72svh; left:58%; top:52%; } .story-02 .story-copy { max-width:82vw; } }
@media (prefers-reduced-motion:reduce) { .snake-study { clip-path:none; transform:translate3d(-50%,-50%,0); } .snake-scales { -webkit-mask-image:none; mask-image:none; opacity:.46; } .story-02 .snake-rescue-hero { opacity:.42; } }
@media (hover:none) { .snake-scales { -webkit-mask-image:none; mask-image:none; opacity:.58; } }

/* Restored portfolio threshold: portrait, disturbed signal, and a horizontal world selector. */
.portrait-hero { display:grid; align-items:end; background:#020307; isolation:isolate; }
.portrait-hero .hero-grid { position:absolute; inset:0; z-index:-1; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:8.333vw 8.333vw; transform:perspective(600px) rotateX(58deg) scale(1.8) translateY(-12%); transform-origin:center bottom; }
#curtainCanvas { position:absolute; inset:0; z-index:5; width:100%; height:100%; pointer-events:none; }
.portrait-wrap { position:absolute; inset:0; z-index:0; display:grid; place-items:center; overflow:hidden; }
.portrait { position:absolute; width:min(58vw,820px); height:100%; object-fit:cover; object-position:50% 38%; filter:grayscale(1) contrast(1.25) brightness(.68); opacity:.86; transition:transform .2s linear; mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 72%,transparent 100%); }
.portrait-ghost { transform:translateX(20px); mix-blend-mode:screen; opacity:.14; filter:grayscale(1) contrast(1.8) blur(1px); }
.portrait-hero::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.75),transparent 28%,transparent 72%,rgba(0,0,0,.72)),linear-gradient(0deg,#03050a 0%,transparent 48%); }
.portrait-hero .hero-copy { z-index:8; max-width:none; padding:0 2vw 2.4vw; }
.portrait-hero h1 { font-family:"Helvetica Neue",Arial,sans-serif; font-size:clamp(86px,13.2vw,220px); font-weight:500; line-height:.72; letter-spacing:-.085em; }
.portrait-hero h1 span { margin-left:23vw; color:transparent; -webkit-text-stroke:1.5px var(--paper); }
.hero-role,.hero-index { position:absolute; z-index:9; top:22%; margin:0; font-size:13px; line-height:1.45; letter-spacing:-.015em; }
.hero-role { right:3vw; text-align:right; }.hero-index { left:3vw; color:var(--muted); }
.hero-prompt { position:absolute; z-index:10; right:3vw; bottom:3vw; display:flex; gap:8px; align-items:center; color:var(--muted); font:10px monospace; letter-spacing:.12em; text-transform:uppercase; }
.hero-prompt span { width:7px; height:7px; border-radius:50%; background:var(--red); animation:hero-pulse 1.4s infinite; } @keyframes hero-pulse { 50% { transform:scale(2); opacity:.35; } }
.cursor { position:fixed; z-index:200; width:28px; height:28px; border:1px solid rgba(255,255,255,.8); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .2s,height .2s,background .2s; }.cursor span { position:absolute; width:3px; height:3px; left:50%; top:50%; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }.cursor.active { width:56px; height:56px; background:rgba(255,255,255,.1); }.click-ripple { position:fixed; z-index:199; width:10px; height:10px; border:1px solid var(--red); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); animation:click-ripple .65s ease-out forwards; } @keyframes click-ripple { to { width:100px; height:100px; opacity:0; } }
.restore-manifesto { min-height:170svh; padding:0; overflow:visible; }.restore-manifesto .manifesto-sticky { position:sticky; top:0; min-height:100svh; padding:110px 4vw 50px; overflow:hidden; }.restore-manifesto .manifesto-lead { position:relative; z-index:3; width:70%; max-width:none; margin:0; font-size:clamp(42px,6.6vw,110px); font-weight:400; line-height:.92; letter-spacing:-.065em; }.restore-manifesto .manifesto-lead em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--ink); }.restore-manifesto .signal-list { position:absolute; z-index:5; right:4vw; bottom:7vh; width:min(48vw,720px); border-top:1px solid rgba(5,7,12,.25); }.signal { width:100%; padding:15px 0; border:0; border-bottom:1px solid rgba(5,7,12,.25); background:transparent; color:var(--ink); text-align:left; cursor:pointer; font-size:clamp(15px,1.4vw,23px); transition:padding .25s,color .25s; }.signal span { display:inline-block; width:50px; color:var(--red); font:10px monospace; }.signal:hover,.signal:focus-visible,.signal.active { padding-left:18px; color:var(--red); }.signal-image { position:absolute; z-index:1; left:8vw; bottom:6vh; width:min(50vw,820px); opacity:.16; mix-blend-mode:multiply; transform:rotate(-4deg); }.signal-image img { width:100%; filter:grayscale(1) contrast(1.5); }.scanner { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(216,12,23,.55) 6px 7px); mix-blend-mode:multiply; animation:scanner 12s linear infinite; } @keyframes scanner { to { transform:translateX(35px); } }
.restore-manifesto { min-height:100svh; }
.restore-manifesto .manifesto-sticky { position:relative; }
.project-selector { position:relative; min-height:112svh; overflow:hidden; background:#04060b; }.selector-head { position:relative; z-index:3; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; padding:110px 4vw 0; }.selector-head h2 { margin:0; font-size:clamp(38px,5vw,78px); font-weight:450; line-height:.94; letter-spacing:-.055em; }.selector-head>p:last-child { justify-self:end; color:var(--muted); font:11px monospace; letter-spacing:.12em; text-transform:uppercase; }.gallery { position:relative; z-index:4; height:74vh; min-height:570px; outline:none; perspective:1400px; }.gallery-stage { position:absolute; inset:0; transform-style:preserve-3d; }.project-selector-slide { position:absolute; top:50%; left:50%; width:min(62vw,980px); aspect-ratio:2.35/1; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.25); background:#0a0d13; color:#fff; cursor:pointer; transform-style:preserve-3d; transition:transform .75s cubic-bezier(.2,.75,.15,1),opacity .5s,filter .5s; }.project-selector-slide img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.72); transition:transform .8s cubic-bezier(.2,.75,.15,1),filter .5s; }.project-selector-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 58%); }.project-selector-slide.active img { filter:saturate(1) brightness(.95); }.project-selector-slide:hover img,.project-selector-slide:focus-visible img { transform:scale(1.025); }.slide-copy { position:absolute; z-index:2; right:26px; bottom:22px; left:26px; display:grid; grid-template-columns:70px 1fr auto; align-items:end; gap:16px; text-align:left; }.slide-copy .number { color:var(--red); font:11px monospace; }.slide-copy strong { font-size:clamp(28px,3.2vw,54px); font-weight:450; line-height:.9; letter-spacing:-.055em; }.slide-copy small { color:#d3d6dc; font:11px monospace; letter-spacing:.1em; text-align:right; text-transform:uppercase; }.gallery-arrow { position:absolute; top:50%; z-index:20; width:54px; height:54px; border:1px solid var(--line); border-radius:50%; background:rgba(5,7,12,.65); color:#fff; cursor:pointer; backdrop-filter:blur(10px); transition:background .2s,color .2s; }.gallery-arrow:hover,.gallery-arrow:focus-visible { background:var(--red); }.gallery-arrow.prev { left:3vw; }.gallery-arrow.next { right:3vw; }.gallery-progress { position:absolute; bottom:24px; left:50%; display:flex; gap:8px; transform:translateX(-50%); }.gallery-progress button { width:32px; height:2px; padding:0; border:0; background:rgba(255,255,255,.25); cursor:pointer; }.gallery-progress button.active { background:var(--red); }
@media (max-width:820px) { .portrait { width:100vw; opacity:.68; }.portrait-hero h1 { font-size:24vw; line-height:.75; }.portrait-hero h1 span { margin-left:0; }.hero-role { top:17%; right:18px; }.hero-index,.hero-prompt { display:none; }.portrait-hero .hero-copy { padding:0 18px 30px; }.restore-manifesto .manifesto-sticky { padding:100px 18px 30px; }.restore-manifesto .manifesto-lead { width:100%; font-size:14vw; }.restore-manifesto .signal-list { right:18px; bottom:7vh; left:18px; width:auto; }.signal-image { bottom:28vh; left:5vw; width:90vw; }.selector-head { grid-template-columns:1fr; gap:12px; padding:90px 18px 0; }.selector-head h2 { font-size:12vw; }.selector-head>p:last-child { justify-self:start; }.project-selector-slide { width:82vw; aspect-ratio:1.1/1; }.slide-copy { grid-template-columns:40px 1fr; }.slide-copy small { display:none; }.gallery-arrow { width:44px; height:44px; }.gallery-arrow.prev { left:10px; }.gallery-arrow.next { right:10px; } }
@media (pointer:coarse),(prefers-reduced-motion:reduce) { .cursor { display:none; }.portrait-hero .hero-grid { transform:none; }.portrait { transform:none!important; }.portrait-ghost { opacity:.09; }.scanner,.hero-prompt span { animation:none; } #curtainCanvas { display:none; }.project-selector-slide { transition:none; } }

/* Home hero — the original weaving illustration remains the only visual subject. */
.weave-sequence { position:relative; isolation:isolate; background:#a9c9df; }
.weave-hero { --weave-blue:#a9c9df; --weave-tilt:-24deg; --weave-glow-x:61%; --weave-glow-y:42%; min-height:112svh; display:grid; align-items:end; overflow:hidden; background:transparent; color:#101017; isolation:isolate; perspective:1400px; z-index:2; }
.weave-scene { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; transform-style:preserve-3d; }
.home-gallery { position:absolute; inset:0; opacity:.94; }
#weaveRainCanvas { position:absolute; z-index:1; inset:0; width:100%; height:100%; opacity:.88; pointer-events:none; }
.weave-art { position:absolute; z-index:2; top:50%; left:55%; width:min(clamp(760px,82vw,1350px),calc(92svh * 1.77683)); aspect-ratio:1672/941; transform:translate3d(-50%,-50%,38px) rotateY(var(--weave-tilt)); transform-style:preserve-3d; will-change:transform; }
.weave-illustration { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; object-position:center; pointer-events:none; }
.weave-base { z-index:1; filter:drop-shadow(8px 30px 28px rgba(39,64,80,.25)); }
.weave-layered-art { z-index:2; filter:drop-shadow(8px 30px 28px rgba(39,64,80,.25)); }
.weave-art.layers-ready .weave-base { visibility:hidden; }
@media (prefers-reduced-motion:reduce) { .weave-art.layers-ready .weave-base { visibility:visible; } .weave-layered-art { display:none; } }
.weave-fabric { z-index:2; opacity:.18; mix-blend-mode:multiply; }
.weave-fabric-upper { clip-path:polygon(27% 18%,43% 12%,51% 31%,49% 42%,31% 43%,25% 34%); animation:weave-fabric-upper 7s ease-in-out infinite; }
.weave-fabric-lower { clip-path:polygon(31% 35%,51% 29%,69% 46%,76% 72%,61% 88%,44% 62%); animation:weave-fabric-lower 7s ease-in-out .7s infinite; }
.weave-hand,.weave-loom,.weave-walker { z-index:2; transform-origin:center; }
.weave-hand-upper { clip-path:polygon(22% 0,53% 0,57% 31%,32% 40%,15% 27%); animation:weave-hand-upper 13.5s ease-in-out infinite; }
.weave-hand-lower { clip-path:polygon(61% 62%,100% 57%,100% 100%,58% 100%); animation:weave-hand-lower 15.5s ease-in-out 2.4s infinite; }
.weave-loom { clip-path:polygon(42% 43%,81% 42%,84% 73%,43% 74%); animation:weave-loom 12s ease-in-out 1.1s infinite; }
.weave-walker { opacity:0; mix-blend-mode:multiply; }
.weave-walker-one { clip-path:ellipse(2% 5% at 36.5% 18%); animation:weave-walk 7s linear .6s infinite; }
.weave-walker-two { clip-path:ellipse(2% 5% at 38.2% 32%); animation:weave-walk 8.4s linear 2.1s infinite; }
.weave-walker-three { clip-path:ellipse(2.2% 5.2% at 53.2% 39%); animation:weave-walk 7.8s linear 3.6s infinite; }
.weave-glow { position:absolute; z-index:5; width:308px; height:308px; left:var(--weave-glow-x); top:var(--weave-glow-y); border-radius:50%; pointer-events:none; transform:translate3d(-50%,-50%,78px); background:radial-gradient(circle,rgba(247,252,255,.36) 0%,rgba(213,238,248,.23) 34%,rgba(205,91,101,.08) 54%,transparent 72%); filter:blur(3px); mix-blend-mode:screen; animation:weave-glow-breathe 7s ease-in-out infinite; }
.weave-hero::after { content:""; position:absolute; z-index:6; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(188,216,234,.28),transparent 29%,transparent 69%,rgba(188,216,234,.22)),linear-gradient(0deg,transparent,rgba(112,158,190,.1) 18%,transparent 38%); -webkit-mask-image:linear-gradient(#000 70%,transparent); mask-image:linear-gradient(#000 70%,transparent); }
.weave-hero .hero-copy { position:relative; z-index:9; max-width:none; padding:0 2.7vw 2.8vw; color:#11151b; text-shadow:0 1px 0 rgba(255,255,255,.38); }
.weave-hero h1 { font-family:"Helvetica Neue",Arial,sans-serif; font-size:clamp(86px,13vw,218px); font-weight:500; line-height:.72; letter-spacing:-.085em; }
.weave-hero h1 span { margin-left:22vw; color:transparent; -webkit-text-stroke:1.4px rgba(18,24,31,.88); }
.weave-hero .eyebrow,.weave-hero .hero-role,.weave-hero .hero-index,.weave-hero .hero-prompt { color:rgba(17,21,27,.78); }
.weave-hero .eyebrow { color:#9b3c47; }
.weave-hero .hero-role,.weave-hero .hero-index { z-index:10; }
.weave-hero .hero-prompt { z-index:10; }
.weave-hero .hero-prompt span { background:#a94552; }
@keyframes weave-hand-upper { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 42% { transform:translate3d(2px,3px,0) rotate(.45deg); } 67% { transform:translate3d(-1px,1px,0) rotate(-.15deg); } }
@keyframes weave-hand-lower { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 38% { transform:translate3d(-3px,2px,0) rotate(-.55deg); } 73% { transform:translate3d(1px,-1px,0) rotate(.14deg); } }
@keyframes weave-loom { 0%,100% { transform:translate3d(0,0,0); } 46% { transform:translate3d(4px,2px,0); } 69% { transform:translate3d(1px,1px,0); } }
@keyframes weave-fabric-base { 0%,100% { transform:translate3d(0,0,0) skewX(0); } 35% { transform:translate3d(2px,5px,0) skewX(.35deg); } 70% { transform:translate3d(-2px,2px,0) skewX(-.25deg); } }
@keyframes weave-fabric-upper { 0%,100% { transform:translate3d(0,0,0); } 45% { transform:translate3d(4px,7px,0) skewX(.6deg); } 70% { transform:translate3d(-2px,4px,0) skewX(-.4deg); } }
@keyframes weave-fabric-lower { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(5px,9px,0) skewX(-.6deg); } 78% { transform:translate3d(-3px,5px,0) skewX(.3deg); } }
@keyframes weave-walk { 0% { opacity:0; transform:translate3d(0,0,0) rotate(0); } 8% { opacity:.85; } 12% { transform:translate3d(10px,6px,0) rotate(-.6deg); } 25% { transform:translate3d(20px,18px,0) rotate(.5deg); } 37% { transform:translate3d(30px,25px,0) rotate(-.6deg); } 50% { transform:translate3d(40px,38px,0) rotate(.5deg); } 62% { transform:translate3d(51px,45px,0) rotate(-.6deg); } 72% { opacity:.85; transform:translate3d(61px,58px,0) rotate(.5deg); } 84% { transform:translate3d(72px,65px,0) rotate(-.6deg); } 95%,100% { opacity:0; transform:translate3d(82px,78px,0) rotate(.5deg); } }
@keyframes weave-glow-breathe { 0%,100% { opacity:.72; scale:.96; } 50% { opacity:1; scale:1.05; } }
@media (max-width:820px) { .weave-hero { min-height:108svh; }.weave-art { left:50%; width:min(150vw,calc(82svh * 1.77683)); height:auto; top:48%; }.weave-hero .hero-copy { padding:0 18px 28px; }.weave-hero h1 { font-size:24vw; line-height:.75; }.weave-hero h1 span { margin-left:0; }.weave-glow { width:270px; height:270px; }.weave-hero .hero-role { top:17%; right:18px; }.weave-hero .hero-index,.weave-hero .hero-prompt { display:none; } }
@media (prefers-reduced-motion:reduce) { .weave-art { transform:translate3d(-50%,-50%,0) rotateY(0); }.weave-base,.weave-fabric,.weave-hand,.weave-loom,.weave-walker,.weave-glow { animation:none; }.weave-fabric,.weave-walker { display:none; }.weave-hand,.weave-loom { transform:none; } #weaveRainCanvas,.weave-glow { display:none; } }

/* Keep the original quiet woven scene; only the red thread color is strengthened. */
#weaveRainCanvas { opacity:1; contain:layout paint; }
.weave-transition { position:relative; z-index:0; min-height:60svh; overflow:hidden; isolation:isolate; background:linear-gradient(180deg,#a9c9df 0%,#b9d0df 30%,#cfdae0 64%,var(--paper) 100%); }
.weave-sequence:not(.is-active) .weave-base,.weave-sequence:not(.is-active) .weave-fabric,.weave-sequence:not(.is-active) .weave-hand,.weave-sequence:not(.is-active) .weave-loom,.weave-sequence:not(.is-active) .weave-walker,.weave-sequence:not(.is-active) .weave-glow { animation-play-state:paused; }
.weave-transition-wash { position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 38% 14% at 20% 91%,rgba(252,254,255,.34),transparent 74%),radial-gradient(ellipse 34% 12% at 78% 88%,rgba(229,101,111,.09),transparent 72%),linear-gradient(0deg,rgba(231,229,225,.36),transparent 35%); pointer-events:none; }
@media (max-width:820px) { .weave-transition { min-height:52svh; } }
@media (prefers-reduced-motion:reduce) { .weave-transition { background:linear-gradient(180deg,#a9c9df,var(--paper)); } }

/* Project 03 — SmileQuest moves from a child-facing care scene into the app system itself. */
.story-03 { --smile-hero-opacity:1; --smile-hero-scale:1; --smile-hero-x:0px; --smile-hero-y:0px; --smile-orbit-opacity:0; --smile-orbit-scale:.74; --smile-orbit-y:80px; }
.story-03 .smilequest-cinema { background:linear-gradient(155deg,#9fd5ed 0%,#c0e4f4 48%,#d7eef8 100%); }
.story-03 .smilequest-hero { object-fit:contain; object-position:center; opacity:var(--smile-hero-opacity); transform:translate3d(var(--smile-hero-x),var(--smile-hero-y),0) scale(var(--smile-hero-scale)); filter:saturate(.86) contrast(1.04) brightness(.88); }
.story-03 .scene-shade { background:linear-gradient(90deg,rgba(208,237,249,.66),rgba(205,234,247,.12) 55%,rgba(191,226,243,.25)),linear-gradient(0deg,rgba(190,224,240,.62),transparent 55%); }
.story-03 .smilequest-cinema::after { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; opacity:calc(var(--smile-orbit-opacity) * .75); background-image:url('./assets/smilequest-confetti.png'),url('./assets/smilequest-stars.png'); background-repeat:no-repeat; background-position:right 3vw top 8vh,left 1vw bottom 3vh; background-size:clamp(140px,17vw,250px) auto,clamp(120px,15vw,215px) auto; }
.smilequest-orbit-stage { position:absolute; z-index:3; top:50%; left:56%; width:min(70vw,1040px); height:min(78svh,780px); display:grid; place-items:center; opacity:var(--smile-orbit-opacity); pointer-events:none; perspective:1800px; transform:translate3d(-50%,calc(-50% + var(--smile-orbit-y)),0) scale(var(--smile-orbit-scale)); transform-style:preserve-3d; transition:opacity .12s linear,transform .12s linear; touch-action:pan-y; user-select:none; }
.story-03.carousel-visible .smilequest-orbit-stage { pointer-events:auto; cursor:grab; }
.smilequest-orbit-stage:active { cursor:grabbing; }
.smilequest-orbit-ring { --orbit-card-width:220px; --orbit-card-height:426px; --orbit-radius:310px; --orbit-depth:-310px; position:relative; width:var(--orbit-card-width); height:var(--orbit-card-height); transform-style:preserve-3d; will-change:transform; }
.smilequest-orbit-card { position:absolute; inset:0; margin:0; overflow:hidden; border:1px solid rgba(214,239,255,.82); border-radius:23px; background:#e8f5ff; box-shadow:0 24px 48px rgba(0,0,0,.38),0 0 24px rgba(39,204,242,.19),inset 0 1px 0 rgba(255,255,255,.8); backface-visibility:hidden; transform:rotateY(var(--orbit-angle)) translateZ(var(--orbit-radius)); }
.smilequest-orbit-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.19),transparent 32%,rgba(9,196,226,.08) 74%); }
.smilequest-orbit-card img { width:100%; height:100%; object-fit:cover; object-position:center; background:#eaf5ff; }
.story-03 .smilequest-orbit-card img { filter:blur(var(--smile-orbit-blur,6px)); }
.smilequest-orbit-hint { position:absolute; bottom:-12px; left:50%; width:min(360px,82vw); margin:0; padding:9px 12px; border:1px solid rgba(188,234,255,.36); border-radius:999px; background:rgba(3,18,49,.56); color:#d8f7ff; font:9px/1.45 monospace; letter-spacing:.06em; text-align:center; text-transform:uppercase; transform:translateX(-50%); backdrop-filter:blur(14px); }
.story-03 .story-copy { color:#102f51; text-shadow:0 2px 14px rgba(238,250,255,.65); }
.story-03 .story-number { color:#165b8d; }
.story-03 .story-action,.story-03 .evidence-03>p,.story-03 .case-link { color:#153d5d; }
.story-03 .evidence-03 { border-left:1px solid rgba(100,223,245,.45); padding-left:13px; }
.story-03 .case-link:hover { color:#6ee7f4; }

.dialog-top { position:relative; isolation:isolate; overflow:hidden; }
.dialog-top > :not(.smilequest-dialog-carousel) { position:relative; z-index:2; }
.dialog-top .smilequest-dialog-carousel { position:absolute; z-index:0; inset:0; display:none; grid-column:auto; place-items:center; overflow:hidden; opacity:0; pointer-events:none; perspective:1600px; filter:blur(4px) saturate(.9); transform:scale(1.08); }
.dialog-top.smilequest-detail-active { background:linear-gradient(118deg,#b2def1,#dbf1fa); color:#102f51; }
.dialog-top.smilequest-detail-active::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.25; background:url('./assets/smilequest-confetti.png') no-repeat right 2vw top 2vh / clamp(160px,22vw,320px) auto, url('./assets/smilequest-stars.png') no-repeat left 1vw bottom 0 / clamp(150px,19vw,280px) auto; }
.dialog-top.smilequest-detail-active::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(218,241,250,.62),rgba(225,244,252,.36) 55%,rgba(218,241,250,.58)); backdrop-filter:blur(2px); }
.dialog-top.smilequest-detail-active #dialogIndex { color:#165b8d; }
.dialog-top.smilequest-detail-active #dialogTags span { border-color:rgba(16,47,81,.4); }
.dialog-top.smilequest-detail-active .smilequest-dialog-carousel { display:grid; opacity:.22; }
.dialog-top .smilequest-dialog-carousel .smilequest-orbit-ring { display:block; grid-column:auto; transform:translateZ(var(--orbit-depth)) rotateY(-8deg); }

@media (max-width:820px) { .smilequest-orbit-stage { left:55%; width:112vw; height:64svh; }.smilequest-orbit-hint { bottom:-2px; font-size:8px; }.story-03 .story-copy { max-width:78vw; }.smilequest-orbit-card { border-radius:17px; } .dialog-top.smilequest-detail-active .smilequest-dialog-carousel { opacity:.18; } }
@media (prefers-reduced-motion:reduce) { .story-03 .smilequest-orbit-stage { opacity:var(--smile-orbit-opacity); transform:translate3d(-50%,-50%,0) scale(.84); }.smilequest-orbit-ring { transform:translateZ(var(--orbit-depth)) rotateY(-8deg)!important; }.smilequest-orbit-hint { display:none; }.dialog-top.smilequest-detail-active .smilequest-dialog-carousel { opacity:.18; } }

/* Project 04 / collective-pressure field */
.story-04 .story-cinema { background:#050504; }
.story-04 .story-sticky { --pulse-origin-x:67%; --pulse-origin-y:50%; }
.story-04 .pulse-cover { z-index:0; opacity:.5; filter:blur(8px) saturate(.72) contrast(1.12) brightness(.42)!important; transition:filter 1.4s cubic-bezier(.2,.7,.2,1),opacity 1.4s ease,transform .05s linear; }
.story-04.pulse-activating .pulse-cover,.story-04.pulse-entered .pulse-cover { opacity:1; filter:blur(0) saturate(.96) contrast(1.08) brightness(.76)!important; }
.story-04 .scene-shade { z-index:3; background:linear-gradient(90deg,rgba(2,2,2,.97),rgba(2,2,2,.88) 35%,rgba(4,3,1,.18) 56%,rgba(1,1,1,.48)),linear-gradient(0deg,#050506,transparent 46%,rgba(0,0,0,.18)); transition:opacity 1.2s ease; }
.story-04.pulse-entered .scene-shade { opacity:.96; }
.pulse-phyllotaxis,.pulse-honey-field,.pulse-particles { position:absolute; inset:0; pointer-events:none; }
.pulse-phyllotaxis { z-index:1; opacity:.055; filter:blur(.3px) saturate(.9); mix-blend-mode:screen; transition:opacity 1s ease,transform 1.8s cubic-bezier(.16,.72,.18,1); }
.pulse-phyllotaxis canvas { pointer-events:none!important; }
.pulse-phyllotaxis-hero { -webkit-mask-image:radial-gradient(ellipse 34% 56% at var(--pulse-origin-x,67%) var(--pulse-origin-y,50%),transparent 18%,rgba(0,0,0,.18) 53%,#000 90%); mask-image:radial-gradient(ellipse 34% 56% at var(--pulse-origin-x,67%) var(--pulse-origin-y,50%),transparent 18%,rgba(0,0,0,.18) 53%,#000 90%); }
.story-04.pulse-activating .pulse-phyllotaxis { opacity:.22; transform:scale(1.08); }
.story-04.pulse-entered .pulse-phyllotaxis { opacity:.065; transform:scale(1); }
.pulse-honey-field { z-index:2; overflow:hidden; opacity:.07; transform:scale(.92); transform-origin:var(--pulse-origin-x,50%) var(--pulse-origin-y,50%); mix-blend-mode:screen; transition:opacity 1s ease; -webkit-mask-image:radial-gradient(ellipse 30% 53% at var(--pulse-origin-x,67%) var(--pulse-origin-y,50%),rgba(0,0,0,.16),rgba(0,0,0,.58) 52%,#000 83%); mask-image:radial-gradient(ellipse 30% 53% at var(--pulse-origin-x,67%) var(--pulse-origin-y,50%),rgba(0,0,0,.16),rgba(0,0,0,.58) 52%,#000 83%); }
.pulse-honey-cell { position:absolute; left:calc(var(--pulse-origin-x,50%) + var(--pulse-x)); top:calc(var(--pulse-origin-y,50%) + var(--pulse-y)); width:var(--pulse-size); aspect-ratio:1; border-radius:25%; opacity:var(--pulse-alpha); transform:translate(-50%,-50%) scale(.9); transition:left .18s cubic-bezier(.2,.65,.3,1),top .18s cubic-bezier(.2,.65,.3,1); background-image:url("./assets/project-04-honeycomb-transparent.png"); background-size:260% auto; background-position:var(--pulse-bg-x) var(--pulse-bg-y); clip-path:polygon(25% 4%,75% 4%,98% 50%,75% 96%,25% 96%,2% 50%); filter:drop-shadow(0 0 5px rgba(255,199,61,.34)); will-change:transform,opacity,left,top; }
.story-04.pulse-activating .pulse-honey-field { animation:pulse-field-burst 1.9s cubic-bezier(.17,.78,.2,1) both; }
.story-04.pulse-activating .pulse-honey-cell { opacity:calc(var(--pulse-alpha) + .28); filter:drop-shadow(0 0 9px rgba(255,214,94,.72)); }
.story-04.pulse-entered .pulse-honey-field { opacity:.24; transform:scale(1); }
.story-04.pulse-entered .pulse-honey-cell,.dialog-top.pulse-detail-active .pulse-honey-cell { animation:pulse-cell-breathe var(--pulse-duration) cubic-bezier(.42,0,.2,1) var(--pulse-delay) infinite alternate; }
@keyframes pulse-field-burst { 0% { opacity:.04; transform:scale(.08); } 52% { opacity:.72; transform:scale(1.12); } 76% { opacity:.34; transform:scale(.72); } 88% { opacity:.3; transform:scale(.83); } 100% { opacity:.24; transform:scale(1); } }
@keyframes pulse-cell-breathe { 0%,18% { transform:translate(-50%,-50%) scale(.86); opacity:calc(var(--pulse-alpha) * .72); } 76% { transform:translate(-50%,-50%) scale(1.07); opacity:var(--pulse-alpha); } 100% { transform:translate(-50%,-50%) scale(1.12); opacity:calc(var(--pulse-alpha) + .07); } }
.pulse-particles { z-index:2; opacity:0; left:var(--pulse-origin-x,50%); top:var(--pulse-origin-y,50%); right:auto; bottom:auto; width:0; height:0; overflow:visible; }
.pulse-particle { position:absolute; left:50%; top:50%; width:clamp(2px,.28vw,5px); aspect-ratio:1; border-radius:50%; background:#ffd46b; box-shadow:0 0 9px rgba(255,207,81,.78); transform:translate(-50%,-50%); }
.story-04.pulse-activating .pulse-particles { opacity:1; }
.story-04.pulse-activating .pulse-particle { animation:pulse-particle-burst 1.55s cubic-bezier(.15,.7,.22,1) var(--particle-delay) both; }
@keyframes pulse-particle-burst { 0% { transform:translate(-50%,-50%) scale(.2); opacity:0; } 18% { opacity:.9; } 82% { opacity:.55; } 100% { transform:translate(calc(-50% + var(--particle-x)),calc(-50% + var(--particle-y))) scale(1.4); opacity:0; } }
.pulse-enter { position:absolute; z-index:7; left:50%; top:50%; width:clamp(122px,12vw,190px); aspect-ratio:1.08; padding:0; border:0; border-radius:24px; background:transparent; transform:translate(-50%,-50%); cursor:pointer; filter:drop-shadow(0 0 20px rgba(235,238,238,.34)); transition:opacity .5s ease,transform .7s cubic-bezier(.2,.78,.2,1),filter .3s ease; }
.pulse-enter img { width:100%; height:100%; object-fit:contain; }
.pulse-enter::before { content:""; position:absolute; inset:-16px -20px; border:2px solid rgba(239,203,111,.86); border-radius:48% 52% 46% 54% / 52% 44% 56% 48%; transform:rotate(-7deg); pointer-events:none; box-shadow:1px 1px 0 rgba(239,203,111,.3); }
.pulse-enter::after { content:"Click me"; position:absolute; left:calc(100% + 19px); top:8%; color:#f0d58e; font:italic 16px/1.1 "Comic Sans MS", cursive; white-space:nowrap; transform:rotate(8deg); text-shadow:0 1px 7px rgba(0,0,0,.8); pointer-events:none; }
.pulse-enter span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pulse-enter:hover,.pulse-enter:focus-visible { transform:translate(-50%,-50%) scale(1.045); filter:drop-shadow(0 0 30px rgba(255,247,219,.58)); }
.story-04.pulse-activating .pulse-enter,.story-04.pulse-entered .pulse-enter { opacity:0; transform:translate(-50%,-50%) scale(.78); pointer-events:none; }

.pulse-detail-bg { position:absolute!important; z-index:0!important; inset:0; display:none!important; grid-column:auto!important; overflow:hidden; pointer-events:none; }
.pulse-detail-bg>img { position:absolute; inset:-4%; width:108%; height:108%; max-width:none; object-fit:cover; object-position:center; opacity:.44; filter:blur(7px) saturate(.72) brightness(.48); transform:scale(1.02); }
.pulse-detail-bg::after { content:""; position:absolute; z-index:3; inset:0; background:linear-gradient(90deg,rgba(7,6,4,.86),rgba(13,9,2,.42) 58%,rgba(5,5,5,.72)),linear-gradient(0deg,rgba(5,5,6,.72),rgba(5,5,5,.2)); backdrop-filter:blur(1px); }
.dialog-top.pulse-detail-active { background:#080704; }
.dialog-top.pulse-detail-active .pulse-detail-bg { display:block!important; }
.pulse-detail-bg .pulse-phyllotaxis { opacity:.055; }
.pulse-detail-bg .pulse-honey-field { opacity:.13; transform:scale(1.04); -webkit-mask-image:none; mask-image:none; }
.dialog-top.pulse-detail-active > :not(.smilequest-dialog-carousel):not(.pulse-detail-bg) { position:relative; z-index:2; }

@media (max-width:820px) {
  .pulse-enter { top:57%; width:112px; }
  .pulse-honey-cell { filter:drop-shadow(0 0 3px rgba(255,199,61,.26)); }
  .story-04 .pulse-cover { object-position:60% center; }
  .pulse-detail-bg>img { object-position:63% center; }
}
@media (prefers-reduced-motion:reduce) {
  .story-04.pulse-activating .pulse-honey-field,.story-04.pulse-entered .pulse-honey-cell,.dialog-top.pulse-detail-active .pulse-honey-cell,.story-04.pulse-activating .pulse-particle { animation:none!important; }
  .story-04.pulse-entered .pulse-honey-field { opacity:.18; transform:scale(1); }
  .story-04.pulse-entered .pulse-cover { transition:none; }
  .pulse-phyllotaxis { display:none; }
}

/* Nameless Bridges: isolation gives way to companion and warmth. */
.story-01 .story-sticky { background:#4e558c; transition:background 1.1s ease; }
.story-01 .story-cinema { background:#4e558c; transition:opacity 1.1s ease; }
.story-01 .scene-back { width:min(100%, 150svh); height:auto; max-height:100%; aspect-ratio:1672 / 941; margin:auto; object-fit:contain; object-position:center; transform:none; filter:none; -webkit-mask-image:linear-gradient(to right, transparent, #000 20%, #000 80%, transparent),linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 20%, #000 80%, transparent),linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-composite:intersect; }
.story-01 .scene-gate { inset:0; height:100%; object-fit:contain; filter:drop-shadow(5px 8px 9px rgba(26,28,53,.25)); }
.story-01 .scene-shade { background:radial-gradient(ellipse at center,transparent 24%,rgba(12,16,38,.48) 100%),linear-gradient(90deg,rgba(45,50,91,.48),rgba(78,85,140,.08) 56%,rgba(45,50,91,.28)); opacity:calc(.95 - var(--nameless-reveal, 0) * .2); }
.nameless-trail { position:absolute; z-index:3; inset:0; opacity:var(--nameless-reveal,0); pointer-events:none; transition:opacity .3s ease; }
.story-01.nameless-trail-ready .nameless-trail { pointer-events:auto; }
.dialog-top .nameless-detail-images { display:none; }
.dialog-top.nameless-detail-active { background:#b9c1d0; color:#292f40; }
.dialog-top.nameless-detail-active .nameless-detail-images { position:absolute; z-index:0; inset:0; display:block; grid-column:auto; overflow:hidden; pointer-events:none; }
.nameless-detail-images img { position:absolute; width:clamp(175px,23.75vw,362px); height:187px; object-fit:contain; opacity:0; animation:nameless-drift 20s linear infinite; filter:blur(1px); }
.nameless-detail-images img:nth-child(odd) { top:5%; }.nameless-detail-images img:nth-child(even) { top:55%; }
.nameless-detail-images img:nth-child(2) { animation-delay:-2.5s; }.nameless-detail-images img:nth-child(3) { animation-delay:-5s; }.nameless-detail-images img:nth-child(4) { animation-delay:-7.5s; }.nameless-detail-images img:nth-child(5) { animation-delay:-10s; }.nameless-detail-images img:nth-child(6) { animation-delay:-12.5s; }.nameless-detail-images img:nth-child(7) { animation-delay:-15s; }.nameless-detail-images img:nth-child(8) { animation-delay:-17.5s; }
@keyframes nameless-drift { 0% { left:-20%; opacity:0; } 18% { opacity:.22; } 80% { opacity:.22; } 100% { left:105%; opacity:0; } }
.dialog-top.nameless-detail-active > :not(.nameless-detail-images):not(.smilequest-dialog-carousel):not(.pulse-detail-bg) { position:relative; z-index:2; }
.dialog-top.nameless-detail-active #dialogIndex { color:#8c4f54; }
.dialog-top.nameless-detail-active #dialogTags span { border-color:rgba(53,51,67,.35); }
@media (prefers-reduced-motion:reduce) { .nameless-detail-images img { animation:none; opacity:.12; left:65%; }.nameless-detail-images img:nth-child(even) { left:10%; }.story-01 .nameless-trail { display:none; } }

/* About: a quiet editorial profile, keeping the original portrait. */
.about { position:relative; isolation:isolate; overflow:hidden; background:#070708; }
.about-rain { position:absolute; z-index:-1; inset:0; overflow:hidden; pointer-events:none; }
.about-rain i { position:absolute; inset:0 auto 0 var(--x); width:1px; }
.about-rain i::before { content:""; position:absolute; left:0; top:-25%; width:1px; height:18%; background:linear-gradient(transparent,rgba(193,70,75,.36) 48%,transparent); animation:about-thread var(--duration) linear var(--delay) infinite; }
.about-rain i::after { content:""; position:absolute; left:0; top:var(--end); width:48px; height:16px; border:1px solid rgba(197,103,108,.37); border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.1); box-shadow:0 0 0 1px rgba(190,195,201,.06); animation:about-ripple var(--duration) ease-out var(--delay) infinite; }
@keyframes about-thread { 0% { top:-25%; opacity:0; } 12% { opacity:1; } 61% { top:calc(var(--end) - 18%); opacity:1; } 64%,100% { top:calc(var(--end) - 18%); opacity:0; } }
@keyframes about-ripple { 0%,62% { opacity:0; transform:translate(-50%,-50%) scale(.1); } 68% { opacity:.7; } 100% { opacity:0; transform:translate(-50%,-50%) scale(2.1); } }
.about-copy h2 { font-size:clamp(84px,10.8vw,160px); line-height:.91; letter-spacing:-.025em; }
.about-copy>p:not(.section-kicker) { max-width:39ch; margin:38px 0 28px; font-size:clamp(19px,1.8vw,25px); line-height:1.35; letter-spacing:-.02em; }
.about-meta { display:grid; gap:9px; margin:0 0 30px; color:#bdc5ce; font:12px/1.55 monospace; }
.about-meta p { margin:0; }
.about-links { display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; }
.about-links a { color:#eee; font:11px/1.5 monospace; text-transform:uppercase; letter-spacing:.07em; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding:0 0 5px; }
.about-links a[href^="mailto:"] { border-bottom-color:rgba(202,75,78,.65); }
.about-links a:hover,.about-links a:focus-visible { color:#f08787; border-color:currentColor; }
.story-04.pulse-entered .pulse-honey-field { animation:pulse-auto-field 7s ease-in-out infinite; }
.story-04.pulse-entered .pulse-honey-cell { animation:pulse-auto-cell 7s ease-in-out var(--pulse-delay) infinite; }
.story-04:not(.pulse-visible) .pulse-honey-field,.story-04:not(.pulse-visible) .pulse-honey-cell,.story-04:not(.pulse-visible) .pulse-waves i { animation-play-state:paused; }
@keyframes pulse-auto-field { 0%,100% { opacity:.18; transform:scale(.78); } 55% { opacity:.48; transform:scale(1.08); } 80% { opacity:.28; transform:scale(.96); } }
@keyframes pulse-auto-cell { 0%,100% { opacity:calc(var(--pulse-alpha) * .45); transform:translate(-50%,-50%) scale(.82); } 40% { opacity:var(--pulse-alpha); transform:translate(-50%,-50%) scale(1.12); } 70% { opacity:calc(var(--pulse-alpha) * .7); transform:translate(-50%,-50%) scale(.98); } }
.pulse-waves { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; opacity:.55; mix-blend-mode:screen; }
.pulse-waves i { position:absolute; left:50%; top:50%; width:24vw; aspect-ratio:1; border:1px solid rgba(246,199,84,.48); border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.1); animation:pulse-ring 6.6s ease-out infinite; }
.pulse-waves i:nth-child(2) { animation-delay:2.2s; }.pulse-waves i:nth-child(3) { animation-delay:4.4s; }
@keyframes pulse-ring { 0% { opacity:0; transform:translate(-50%,-50%) scale(.1); } 20% { opacity:.55; } 100% { opacity:0; transform:translate(-50%,-50%) scale(4); } }
@media (max-width:820px) { .about-copy h2 { font-size:clamp(72px,19vw,135px); line-height:.91; }.about-copy>p:not(.section-kicker) { font-size:19px; }.about-meta { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .story-04.pulse-entered .pulse-honey-field,.story-04.pulse-entered .pulse-honey-cell,.pulse-waves i { animation:none!important; }.pulse-waves { display:none; } }
@media (prefers-reduced-motion:reduce) { .about-rain { display:none; } }

/* Project 02 and 03: restrained accents and the snake detail backdrop. */
.story-02 .story-number { color:#34f4e0; }
.dialog-top.snake-detail-active { background:#070b0d; }
.dialog-top.snake-detail-active::before { content:""; position:absolute; z-index:0; inset:-12px; pointer-events:none; background:url("./assets/snake-detail-user.png") no-repeat right 12% center / auto 115%; filter:blur(5px) brightness(.64); opacity:.67; }
.dialog-top.snake-detail-active::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(4,9,11,.91),rgba(4,9,11,.54) 58%,rgba(4,9,11,.43)); }
.dialog-top.snake-detail-active #dialogIndex { color:#34f4e0; }
.dialog-top.snake-detail-active #dialogTags span { border-color:rgba(52,244,224,.48); }
.story-03 .story-number::before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; background:#ffae00; border-radius:50%; vertical-align:1px; }
.dialog-top.smilequest-detail-active #dialogIndex { text-decoration:underline; text-decoration-color:#ffae00; text-decoration-thickness:3px; text-underline-offset:7px; }
.dialog-top.smilequest-detail-active #dialogTags span:first-child { border-color:#ffae00; }

/* Cream surfaces: preserve section geometry, imagery and interaction. */
.about {
  background:#f7f4ed url("./assets/about-multicolor-lines.png") center / cover no-repeat;
  color:#191919;
}
.about-copy h2 { color:#191919; }
.about-copy>p:not(.section-kicker) { color:#343435; text-shadow:0 0 9px #f7f4ed,0 0 3px #f7f4ed; }
.about-meta { color:#606064; text-shadow:0 0 6px #f7f4ed; }
.about-links a { color:#343435; border-bottom-color:#73716d; }
.about-links a[href^="mailto:"] { border-bottom-color:var(--red); text-transform:none; }
.about-links a:hover,.about-links a:focus-visible { color:var(--red); border-bottom-color:currentColor; }
.about-rain { opacity:.18; }
.project-selector {
  color:#1d1d20;
  background:
    radial-gradient(ellipse at 7% 36%,rgba(110,224,207,.13),transparent 43%),
    radial-gradient(ellipse at 82% 17%,rgba(199,148,238,.10),transparent 42%),
    radial-gradient(ellipse at 68% 82%,rgba(252,181,133,.12),transparent 42%),
    #f7f4ed;
}
.project-selector .selector-head>p:last-child { color:#606064; }
.project-selector .gallery-arrow { color:#29292d; background:rgba(247,244,237,.94); border-color:rgba(51,51,55,.5); }
.project-selector .gallery-arrow:hover,.project-selector .gallery-arrow:focus-visible { color:#fff; background:var(--red); border-color:var(--red); }
.project-selector .gallery-progress button { background:rgba(51,51,55,.5); }
.project-selector .gallery-progress button.active { background:var(--red); }
.other-works { background:#f7f4ed; color:#1d1d20; }
.other-works .other-caption p { color:#606064; }

/* Existing Project 01 emphasis only; pale backing keeps exact blue readable. */
.story-01 .story-number {
  width:max-content;
  max-width:100%;
  color:#4e558c;
  background:#f7f4ed;
  box-shadow:0 0 0 5px #f7f4ed;
}
.dialog-top.nameless-detail-active #dialogIndex {
  width:max-content;
  color:#4e558c;
  background:#f7f4ed;
  box-shadow:0 0 0 4px #f7f4ed;
}

/* Softer loops on the profile and an atmospheric echo in Other Works. */
.about { background:#f7f4ed; }
.about::before {
  content:"";
  position:absolute;
  z-index:-2;
  inset:-4px;
  background:url("./assets/about-multicolor-lines.png") center / cover no-repeat;
  opacity:.72;
  filter:saturate(.58) blur(.65px) drop-shadow(0 0 5px rgba(244,190,211,.23));
  pointer-events:none;
}
.other-works { position:relative; isolation:isolate; overflow:hidden; }
.other-works::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-60px;
  background:
    radial-gradient(ellipse at 18% 10%,rgba(116,213,199,.22),transparent 25%),
    radial-gradient(ellipse at 80% 22%,rgba(221,164,218,.2),transparent 28%),
    radial-gradient(ellipse at 29% 55%,rgba(148,194,232,.17),transparent 27%),
    radial-gradient(ellipse at 79% 83%,rgba(233,186,156,.2),transparent 28%),
    url("./assets/about-multicolor-lines.png") center top / 100% auto repeat-y;
  opacity:.65;
  filter:saturate(.8) blur(48px);
  pointer-events:none;
}
.other-works .other-nav { margin:60px 0 88px; }
.other-works .other-group { padding-bottom:86px; }
.other-works .other-group-head { padding:18px 0 22px; }
.other-works .other-group h3 { font-size:clamp(28px,3.2vw,48px); }
.other-works .other-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.other-works .other-placeholder { min-height:0; padding:16px; }
.other-works .other-placeholder b { font-size:clamp(32px,4vw,60px); }
.other-works .other-caption { gap:7px 14px; padding-top:11px; }
.other-works .other-caption h4 { font-size:14px; }
.other-works .other-caption p { font-size:10px; }
@media (max-width:1000px) {
  .other-works .other-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .other-works .other-nav { margin:45px 0 72px; }
  .other-works .other-group { padding-bottom:72px; }
  .other-works .other-grid { grid-template-columns:1fr; gap:28px; }
}

/* Art & Craft: original drawings and Originkit card stack. */
.artwork-stack-host { height:300px; }
.art-stack-link { display:block; width:100%; height:100%; cursor:pointer; }
.art-stack-stage { display:block; position:relative; width:100%; height:100%; }
.art-stack-stage > div { pointer-events:none; }
.art-stack-stage div[style*="background-image"] { background-size:contain!important; background-color:#f7f4ed!important; box-shadow:0 6px 18px rgba(44,38,31,.16); }
.art-stack-outgoing { position:absolute; top:50%; left:50%; width:205px; height:250px; transform:translate(-50%,-50%); background:#f7f4ed center / contain no-repeat; box-shadow:0 6px 18px rgba(44,38,31,.16); pointer-events:none; animation:art-stack-deal .7s ease-in both; }
@keyframes art-stack-deal { to { transform:translate(24%,-62%) rotate(8deg); opacity:0; } }
.artwork-detail-page { background:#f7f4ed; color:#222226; }
.artwork-detail-nav { position:sticky; z-index:5; top:0; display:flex; justify-content:space-between; align-items:center; padding:22px 5vw; color:#25242a; background:rgba(247,244,237,.92); font:11px monospace; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(10px); }
.artwork-detail-nav a:hover { color:var(--red); }
.artwork-detail-intro { min-height:48svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:end; padding:8vh 7vw; background-color:#e9e5db; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.artwork-detail-intro h1 { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(58px,9vw,130px); font-weight:400; line-height:.86; letter-spacing:-.04em; }
.artwork-detail-intro > p:last-child { color:#62605d; margin:26px 0 0; font-size:15px; }
.artwork-detail-gallery { padding:6vw; }
.artwork-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:50px 20px; align-items:start; }
.artwork-detail-grid figure { margin:0; min-width:0; }
.artwork-detail-grid img { display:block; width:100%; height:auto; }
.artwork-detail-grid figcaption { padding:12px 0 22px; color:#62605d; font:11px/1.5 monospace; }
@media (max-width:900px) { .artwork-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .artwork-detail-grid { grid-template-columns:1fr; gap:32px; }.artwork-detail-gallery { padding:22px; } }
@media (prefers-reduced-motion:reduce) { .art-stack-outgoing { animation:none; } }

/* Sketches from the Northwest: keep the supplied collage behind the introduction. */
.artwork-detail-intro { position:relative; isolation:isolate; overflow:hidden; min-height:68svh; color:#222226; }
.artwork-detail-intro::before { content:""; position:absolute; z-index:-2; inset:0; background:url("./assets/sketches-northwest-collage.png") center / cover no-repeat; filter:saturate(.7); }
.artwork-detail-intro::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(247,244,237,.96) 0%,rgba(247,244,237,.91) 42%,rgba(247,244,237,.5) 100%); }
.artwork-detail-intro h1 { font-size:clamp(42px,6vw,86px); }
.artwork-detail-intro > p:last-child { max-width:58ch; margin-top:28px; color:#62605d; font-family:monospace; font-size:clamp(12px,1vw,13px); line-height:1.4; }
@media (max-width:600px) {
  .artwork-detail-intro { min-height:0; padding:72px 22px 56px; }
  .artwork-detail-intro::before { background-position:60% center; }
  .artwork-detail-intro::after { background:rgba(247,244,237,.88); }
  .artwork-detail-intro > p:last-child { font-size:12px; }
}

/* Project-specific cover fitting and a title drawn from the source portfolio. */
.project-selector-slide[data-index="0"] img { object-fit:cover; object-position:left top; }
.selector-snake-title { position:absolute; z-index:2; top:5%; left:4%; color:#42e8d8; font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif; font-weight:700; font-size:clamp(20px,3.1vw,44px); line-height:1.05; letter-spacing:0; text-align:left; }
/* Project titles use the same quiet sans-serif language as the rest of the site. */
.story:not(.story-05) .story-copy h3 { font-family:"Helvetica Neue",Arial,sans-serif; font-size:clamp(44px,5.4vw,86px); font-weight:500; line-height:1.04; letter-spacing:-.015em; }
@media (max-width:820px) {
  .story:not(.story-05) .story-copy h3 { font-size:clamp(38px,10vw,72px); line-height:1.04; }
  .selector-snake-title { font-size:clamp(19px,5vw,30px); }
}

/* Match the project detail titles to their corresponding project home titles. */
.dialog-top:not(.project05-detail-active) #dialogTitle {
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(44px,5.4vw,86px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.dialog-top.project05-detail-active #dialogTitle svg {
  display:block;
  width:100%;
  height:auto;
}
@media (max-width:820px) {
  .dialog-top:not(.project05-detail-active) #dialogTitle {
    font-size:clamp(38px,10vw,72px);
  }
}

/* Keep the project gallery fixed while aligning the selector heading as one group. */
@media (min-width:821px) {
  .project-selector .selector-head::before {
    content:"";
    grid-column:2;
    grid-row:1;
    height:calc(clamp(38px,5vw,78px) * 1.88);
  }
  .project-selector .selector-head .section-kicker {
    grid-column:2;
    grid-row:1;
    align-self:start;
    margin:0;
  }
  .project-selector .selector-head h2 {
    grid-column:2;
    grid-row:1;
    align-self:end;
    font-size:clamp(28px,3.4vw,56px);
    line-height:1.04;
    letter-spacing:-.035em;
  }
  .project-selector .selector-head > p:last-child {
    grid-column:3;
    grid-row:1;
  }
}
@media (max-width:820px) {
  .project-selector .selector-head::before {
    content:"Choose a world.\A Then enter its story.";
    white-space:pre-line;
    visibility:hidden;
    grid-column:1;
    grid-row:2;
    font-size:12vw;
    font-weight:450;
    line-height:.94;
    letter-spacing:-.055em;
  }
  .project-selector .selector-head .section-kicker { grid-column:1; grid-row:1; }
  .project-selector .selector-head h2 {
    grid-column:1;
    grid-row:2;
    align-self:start;
    font-size:clamp(28px,9vw,58px);
    line-height:1.04;
    letter-spacing:-.035em;
  }
  .project-selector .selector-head > p:last-child { grid-column:1; grid-row:3; }
}

/* Project detail introductions: a single, calm reading column. */
#projectDialog .dialog-top {
  grid-template-columns:minmax(0, 750px) minmax(0, 1fr);
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(24px, 4vw, 64px);
  row-gap:0;
  align-content:center;
  align-items:start;
  box-sizing:border-box;
  padding:clamp(100px, 13vh, 140px) 7vw clamp(60px, 8vh, 90px);
}
#projectDialog .dialog-top > #dialogIndex {
  grid-column:1;
  grid-row:1;
  justify-self:start;
  margin:0 0 20px;
  white-space:nowrap;
}
#projectDialog .dialog-top > #dialogTitle {
  grid-column:1;
  grid-row:2;
  min-width:0;
  max-width:100%;
  margin:0;
}
#projectDialog .dialog-top > #dialogSummary {
  grid-column:1;
  grid-row:3;
  max-width:66ch;
  margin:28px 0 0;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(18px, 1.35vw, 20px);
  line-height:1.55;
}
#projectDialog .dialog-top > #dialogTags {
  grid-column:1;
  grid-row:4;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0 0;
}
#projectDialog .dialog-top > #dialogTags span {
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  min-height:32px;
  padding:7px 10px;
  line-height:1.3;
}
#projectDialog .dialog-top.project05-detail-active #dialogTitle {
  width:min(100%, 620px);
}
@media (max-width:820px) {
  #projectDialog .dialog-top {
    grid-template-columns:minmax(0, 1fr);
    padding:100px 20px 60px;
  }
  #projectDialog .dialog-top > #dialogSummary { font-size:18px; }
}

/* Selected Work: align the heading with the featured project card. */
.project-selector .selector-head {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  width:min(62vw, 980px);
  margin:0 auto;
  padding:clamp(100px, 13vh, 140px) 0 0;
}
.project-selector .selector-head::before { content:none; }
.project-selector .selector-head .section-kicker { align-self:auto; margin:0; }
.project-selector .selector-head h2 {
  align-self:auto;
  font-size:clamp(38px, 4.5vw, 64px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.project-selector .selector-head > p:last-child { display:none; }
.project-selector .gallery {
  height:calc(min(62vw, 980px) / 2.35 + 80px);
  min-height:0;
}
.project-selector .gallery-arrow { transform:translateY(-50%); }
.project-selector .gallery-progress { bottom:16px; }
@media (max-width:820px) {
  .project-selector .selector-head { width:82vw; padding-top:100px; gap:10px; }
  .project-selector .selector-head h2 { font-size:clamp(34px, 8vw, 54px); line-height:1.08; }
  .project-selector .gallery { height:calc(82vw / 1.1 + 80px); }
}

/* Progress and speed controls stay with the two project films. */
.project-film-04 .project-film-controls,.project-film-05 .project-film-controls { display:flex; align-items:center; gap:14px; margin-top:14px; color:#f7f4ed; font:12px/1.4 monospace; }
.project-film-04 .project-film-seek,.project-film-05 .project-film-seek { flex:1; min-width:0; display:flex; align-items:center; }
.project-film-04 .project-film-seek input,.project-film-05 .project-film-seek input { width:100%; margin:0; accent-color:#f7f4ed; cursor:pointer; }
.project-film-04 .project-film-time,.project-film-05 .project-film-time { white-space:nowrap; font-variant-numeric:tabular-nums; }
.project-film-04 .project-film-speed,.project-film-05 .project-film-speed { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.project-film-04 .project-film-speed select,.project-film-05 .project-film-speed select { color:#f7f4ed; border:1px solid rgba(255,255,255,.4); border-radius:2px; background:#17171a; padding:5px; font:inherit; cursor:pointer; }
.project-film-04 .project-film-sr-only,.project-film-05 .project-film-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; }
@media (max-width:480px) { .project-film-04 .project-film-controls,.project-film-05 .project-film-controls { gap:8px; font-size:10px; } }

/* The fifth project's film shares the warm palette of its cover. */
.project-film-05 { background:linear-gradient(120deg,#fff0cf 0%,#fbe8df 46%,#f7c9c9 100%); }
/* One unobtrusive video control surface, scoped to the two homepage films. */
.project-film-04 .project-film-player,.project-film-05 .project-film-player { position:relative; background:#000; }
.project-film-04 .project-film-controls,.project-film-05 .project-film-controls { position:absolute; right:1px; bottom:1px; left:1px; display:flex; flex-direction:column; align-items:stretch; gap:7px; margin:0; padding:28px 16px 10px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.84)); font:12px/1.4 Arial,sans-serif; }
.project-film-04 .project-film-control-row,.project-film-05 .project-film-control-row { display:flex; align-items:center; gap:12px; min-width:0; }
.project-film-04 .project-film-control-row button,.project-film-05 .project-film-control-row button { display:inline-flex; align-items:center; justify-content:center; min-width:26px; min-height:28px; padding:0; border:0; color:#fff; background:transparent; font:16px/1 Arial,sans-serif; cursor:pointer; }
.project-film-04 .project-film-spacer,.project-film-05 .project-film-spacer { flex:1; }
.project-film-04 .project-film-seek,.project-film-05 .project-film-seek { display:block; width:100%; height:4px; margin:0; padding:0; accent-color:#fff; cursor:pointer; }
.project-film-04 .project-film-speed,.project-film-05 .project-film-speed { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.project-film-04 .project-film-speed select,.project-film-05 .project-film-speed select { color:#fff; border:0; background:#262626; padding:4px; font:inherit; cursor:pointer; }
.project-film-04 .project-film-time,.project-film-05 .project-film-time { white-space:nowrap; font-variant-numeric:tabular-nums; }
.project-film-04 .project-film-player:fullscreen,.project-film-05 .project-film-player:fullscreen { display:grid; place-items:center; width:100%; height:100%; }
.project-film-04 .project-film-player:fullscreen video,.project-film-05 .project-film-player:fullscreen video { max-height:100vh; }
@media (max-width:480px) { .project-film-04 .project-film-controls,.project-film-05 .project-film-controls { padding:24px 10px 9px; font-size:11px; }.project-film-04 .project-film-control-row,.project-film-05 .project-film-control-row { gap:6px; } }