/* Personal art portfolio: editorial grid, five restrained scenes, real supplied artwork. */
.chapter-section{overflow:hidden}.act-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0 18px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.14em;color:var(--muted)}.act-heading span:first-child{font-family:Georgia,serif;font-size:22px;color:var(--accent);letter-spacing:.08em}.act-heading span:last-child{font-size:9px}.stage{min-height:calc(100svh - var(--header-height) - 84px);gap:36px;padding-top:24px;padding-bottom:48px}.copy{z-index:3}.chapter{margin-bottom:28px;text-transform:uppercase;letter-spacing:.1em}h1{font-size:clamp(50px,5.3vw,82px);line-height:1.22;letter-spacing:-.055em}.intro{max-width:30em;font-size:16px;margin-top:28px}.visual{background:transparent!important;border-radius:0!important;overflow:visible;padding:48px 8px 20px;height:min(670px,calc(100svh - 210px));min-height:470px;justify-content:center}.visual:before,.visual:after{display:none}.art-name{top:2px;left:-10%;right:-10%;font-size:clamp(70px,9.8vw,150px);letter-spacing:-.07em;font-style:italic;text-align:center;opacity:.2;white-space:nowrap;z-index:0}.visual figure{height:100%;width:90%;margin:0 auto;background:var(--bg)!important;border-radius:45% 45% 4px 4px;overflow:hidden;box-shadow:0 18px 45px #00000004}.visual img{object-position:center bottom}.art-foot{display:none}.stage-decoration{position:absolute;inset:7% -2% 0;border:1px solid var(--line);z-index:0;border-radius:50%;transform:rotate(-15deg);transition:translate .4s ease-out,transform 1s ease,border-color .5s ease,box-shadow .6s ease}.stage-decoration:before,.stage-decoration:after{content:'';position:absolute;inset:6%;border:1px solid var(--line);border-radius:inherit;opacity:.6}.stage-decoration:after{inset:12%;opacity:.35}
[data-theme=claude] .visual figure{background:var(--bg)!important;border-radius:48% 48% 2% 2%}[data-theme=deepseek] .stage-decoration{border-radius:48% 18% 48% 18%;transform:rotate(10deg)}[data-theme=gpt] .stage-decoration{border-radius:2px;transform:rotate(-7deg)}[data-theme=gemini] .stage-decoration{border-radius:50% 2% 50% 2%;transform:rotate(18deg)}[data-theme=grok] .visual figure{background:var(--paper)!important;border-radius:2px 2px 45% 45%}[data-theme=grok] .stage-decoration{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.details-section{padding:48px 0 42px;gap:72px}.section-caption h2{font-size:clamp(26px,3vw,38px)}.detail{padding:16px 0}.easter-egg{padding:18px 0 30px;display:flex;align-items:center;gap:24px;min-height:88px}.scene-switch{appearance:none;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;border:1px solid var(--line);padding:10px 18px;border-radius:30px;display:flex;gap:10px;align-items:center;min-height:44px;transition:background-color .25s,color .25s,transform .25s}.scene-switch:hover{transform:translateY(-2px);border-color:var(--accent)}.scene-switch:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.scene-switch[aria-pressed=true]{background:var(--accent);color:var(--bg)}.scene-switch span{font-size:20px;line-height:1}.scene-note{font-size:12px;color:var(--muted)}.chapter-section[data-lit=true] .stage-decoration{transform:rotate(35deg) scale(1.06);border-color:var(--accent);box-shadow:0 0 50px color-mix(in srgb,var(--accent) 16%,transparent)}.chapter-section[data-lit=true] .art-name{opacity:.36}.chapter-section[data-lit=true] .scene-note{color:var(--ink)}
.chapter-section[data-active=true] .stage-decoration{animation:scene-arrive 1.5s ease-out both}@keyframes scene-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:1050px){h1{font-size:52px}.stage{gap:24px}.visual{min-height:450px}.act-heading{letter-spacing:.05em}}
@media(max-width:700px){.act-heading{padding:24px 0 14px;gap:12px}.act-heading span:first-child{font-size:19px}.act-heading span:last-child{display:none}.act-heading span:nth-child(2){font-size:10px}.stage{min-height:0;gap:26px;padding:28px 0 34px}.chapter{margin-bottom:22px}h1{font-size:46px;line-height:1.2}.intro{font-size:15px;margin-top:24px}.visual{height:510px;min-height:0;padding-top:60px;margin:0 0 10px}.art-name{font-size:78px;top:0}.stage-decoration{inset:10% 1% 0}.visual figure{width:94%}.details-section{gap:28px;padding:32px 0}.easter-egg{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:26px}.scene-switch{font-size:12px}.scene-note{font-size:11px}.draft{font-size:10px}}
@media(prefers-reduced-motion:reduce){.stage-decoration,.scene-switch,.art-name{animation:none!important;transition:none!important}.scene-switch:hover{transform:none}.chapter-section[data-lit=true] .stage-decoration{transform:none}}
/* True alpha artwork; transparent parent plane, ordinary compositing, no halo-producing shadow. */
.chapter-section .visual figure{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible;isolation:auto}
.chapter-section .visual img{mix-blend-mode:normal!important;filter:none!important}
/* Opening layering; layout remains intact and all input stays available. */
.intro-playing #claude{overflow:visible}.intro-playing #claude .visual{z-index:20;opacity:1!important;transform:none!important}.intro-playing #claude .visual figure{overflow:visible}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}
.stage-decoration .brand-watermark{position:absolute;width:28%;height:28%;object-fit:contain;right:6%;bottom:12%;opacity:.85;z-index:0;filter:none;pointer-events:none}
.chapter-section{--px:0;--py:0}.chapter-section .visual figure>img{translate:calc(var(--px)*9px) calc(var(--py)*7px);transition:translate .3s ease-out}.chapter-section .art-name{translate:calc(var(--px)*-14px) calc(var(--py)*-10px);transition:translate .4s ease-out,opacity .5s ease}.chapter-section .stage-decoration{translate:calc(var(--px)*-18px) calc(var(--py)*-14px)}
.advance-section{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);padding:10px 16px;border-radius:4px;min-height:44px;cursor:pointer}.advance-section:hover{border-color:var(--accent)}.advance-section:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.section-end{align-items:center;flex-wrap:wrap}.footnote{line-height:1.8}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.chapter-section .visual figure>img,.chapter-section .art-name,.chapter-section .stage-decoration{translate:none!important;transition:none!important}}
.project-entry{padding:24px 0;border-bottom:1px solid var(--line)}.project-entry:first-child{padding-top:0}.project-entry dt{font-size:20px;line-height:1.5;margin-bottom:12px}.project-entry dd{font-size:14px;color:var(--muted);line-height:1.8}.project-status{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em;margin-bottom:8px}.project-status.is-live{color:var(--accent)}.project-note{font-size:12px;margin-top:10px}.project-play{margin-top:20px}.project-destination{display:block;font-size:10px;margin-top:10px;overflow-wrap:anywhere}@media(max-width:700px){.project-entry dt{font-size:18px}}
/* Give real media enough room while retaining the existing editorial grid. */
#gpt-details{display:block}#gpt-details .section-caption{margin-bottom:36px}#gpt-details .section-caption p{max-width:42em}
.project-entry{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding:40px 0}.project-entry dt{font-family:var(--display);font-size:clamp(24px,2.7vw,36px);line-height:1.45}.project-status{font-family:var(--body);margin-bottom:16px}.project-entry dd{min-width:0;font-size:15px}.project-entry video,.project-cover{display:block;width:100%;aspect-ratio:16/9;background:#141521;margin:22px 0 12px;border-radius:4px}.project-entry video{height:auto;object-fit:contain}.project-cover{position:relative;overflow:hidden}.project-cover img{display:block;width:100%;height:100%;object-fit:cover}.project-cover span{position:absolute;inset:auto 0 0;padding:32px 18px 14px;background:linear-gradient(transparent,#101523e8);color:white;font-size:14px}.project-entry video:focus-visible,.project-cover:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
@media(max-width:700px){.project-entry{grid-template-columns:minmax(0,1fr);gap:12px;padding:30px 0}.project-entry dt{font-size:26px;margin-bottom:0}.project-status{margin-bottom:8px}.project-entry dd{font-size:14px}.project-entry video,.project-cover{margin-top:18px}.project-note{font-size:12px;line-height:1.8}}
@media(max-width:700px){header nav a{min-height:44px;min-width:44px;justify-content:center}}
.project-entry video.portrait-video{aspect-ratio:9/16;max-width:360px;height:auto}
/* The opening scene fills the visible viewport, including when browser chrome resizes. */
#claude .stage{min-height:calc(100vh - var(--header-height));min-height:calc(100dvh - var(--header-height))}
#claude h1 span{white-space:nowrap}
.section-caption h2{margin-top:0}

/* Separate layout space leaves room for the character's 9px pointer movement. */
.visual figure{display:grid;width:100%;grid-template-columns:minmax(0,1fr) minmax(140px,29%);grid-template-rows:minmax(0,1fr);column-gap:28px;align-items:center}
.character-quote{position:static;align-self:start;z-index:3;width:max-content;max-width:100%;margin:64px 0 0;padding:10px 14px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--ink);font-size:14px;line-height:1.75;text-wrap:pretty;overflow-wrap:anywhere}
.intro-playing #claude .character-quote{visibility:hidden}
@media(max-width:1050px){.visual{height:570px}.visual figure{display:flex;flex-direction:column;align-items:center}.visual figure>img{flex:1;min-height:0;height:0}.character-quote{align-self:flex-end;flex:none;margin-top:16px}}
@media(max-width:700px){.character-quote{padding:8px 10px;font-size:13px}}