/* STEAL THE SCENE / 51. Paper: 12° cut, 2px rule, 7px ink offset. */
:root{--scene-rule:2px;--scene-shadow:7px 7px 0 var(--black);--scene-cut:polygon(6% 0,100% 0,94% 100%,0 100%);--scene-snap:cubic-bezier(.14,.88,.23,1)}
/* Explicit text paint prevents native iOS button/link blue from leaking into ink. */
button{color:var(--black);-webkit-text-fill-color:currentColor;font:inherit}#motion{color:var(--black);font-size:9px;font-weight:900;letter-spacing:.5px}.note,.note h3,.project h3{color:var(--black);-webkit-text-fill-color:currentColor}.note:visited,.note h3:visited{color:var(--black)}.note .journal-file-number{color:var(--red)}.note time{font-variant-numeric:tabular-nums}.note h3{font-weight:850}.reader-copy p{color:var(--black);line-height:2;max-width:34em}.reader-paper{overflow-wrap:break-word}
/* Contact decoration is bounded by the heading, never by a % of the whole section. */
.contact-stage:before{content:none}.contact-title-stage{position:relative;isolation:isolate}.contact-title-stage:before{content:'';position:absolute;right:-4%;top:31%;width:39%;height:42%;background:var(--black);clip-path:polygon(23% 0,100% 13%,95% 100%,0 87%);z-index:-1;pointer-events:none}.contact-opening{position:relative;background:var(--paper);width:fit-content;padding:5px 9px 5px 0}.contact-copy{position:relative;background:var(--paper);padding:12px 0;z-index:2}.contact-stage .placeholder-note{position:relative;background:var(--paper)}.contact-hello-word{padding-left:5px!important}.contact-editorial .contact-hello{margin-bottom:0}.contact-conversation{max-width:calc(100% - 16px);box-sizing:border-box}.contact-stage{padding-bottom:90px}
/* The close control lives inside the dialog scrollport with deliberate headroom.
   Parent app chrome cannot be styled here. visualViewport fixes Safari viewport changes. */
#detail.project-file,#detail.reader-file{margin:auto;width:min(860px,calc(100% - 28px));max-height:calc(var(--visible-height,100dvh) - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;scroll-padding-top:76px;padding-top:12px;box-sizing:border-box}#detail #close{position:sticky;top:8px;z-index:40;display:block;min-width:112px;min-height:48px;margin:0 9px 18px auto;padding:14px 19px;color:var(--paper);background:var(--black);border:2px solid var(--paper);box-shadow:4px 4px 0 var(--red);font-size:11px;font-weight:900;letter-spacing:1px}#detail #close:focus-visible{outline:3px solid var(--red);outline-offset:5px}.dossier-shell{margin-top:0}.dossier-media>svg{width:100%;height:100%;object-fit:contain}.project-selected .project-visual{outline:3px solid var(--red);outline-offset:4px}.project-selected .label{background:var(--black);color:var(--paper)}
/* Compact edge HUD: collision-observed, never floats over a reader or modal. */
#chapter-hud{width:70px;right:9px}.hud-current b{font-size:25px}.hud-current>span{font-size:7px;letter-spacing:.4px}.hud-label{font-size:5px;letter-spacing:.35px}#chapter-toggle{box-shadow:2px 2px 0 var(--black);padding:9px 8px}.hud-interacting,.hud-obscured,.scene-routing #chapter-hud,body:has(dialog[open]) #chapter-hud,body:has(#secret-burst:not([hidden])) #chapter-hud,body:has(.secret-room) #chapter-hud{visibility:hidden!important;pointer-events:none!important}
/* LIVE COMPOSITION: front controls + an opaque masked-number art stage. */
#drawer{overflow-x:hidden;min-height:0}.live-poster{inset:0 0 0 43%;overflow:hidden;background:var(--red);opacity:1;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}#drawer .menu-signature,.poster-number,.poster-shape{display:none}.poster-device{position:absolute;inset:0}.composition-live,.composition-out{position:absolute;inset:0}.composition-digit{position:absolute;width:110%;height:72%;top:6%;left:-2%;overflow:visible;transform:rotate(-9deg);transition:transform 280ms var(--scene-snap)}.digit-offset{transform:translate(12px,14px)}.digit-upper,.digit-lower{transition:transform 300ms var(--scene-snap);transform-origin:50% 50%}.composition-anchor{position:absolute;width:70%;height:60%;top:17%;right:-16%;transform:rotate(14deg);transition:transform 320ms var(--scene-snap),top 320ms var(--scene-snap),right 320ms var(--scene-snap)}.cut-device{width:100%;height:100%;display:block;overflow:visible}.composition-paper{position:absolute;background:var(--paper);border:2px solid var(--black);box-shadow:var(--scene-shadow);clip-path:polygon(4% 0,100% 4%,93% 100%,0 91%);width:72%;height:63%;top:12%;left:16%;opacity:0;transform:rotate(-9deg)}.composition-paper-two{left:7%;top:19%;transform:rotate(7deg)}.composition-archive{position:absolute;inset:18% 14% 33%;border:3px solid var(--paper);transform:rotate(11deg);opacity:0;background:var(--black);padding:11% 9%;clip-path:polygon(4% 0,100% 0,94% 100%,0 100%)}.composition-archive i{display:block;height:14%;margin:7% 0;background:var(--paper);transform:skewX(-12deg)}.composition-archive i:nth-child(2){width:62%;background:var(--red)}.composition-archive span{font:900 9px monospace;line-height:1.8;color:var(--paper)}.composition-cross{position:absolute;top:8%;right:6%;font:900 12px monospace;line-height:2;color:var(--black)}.poster-heading{z-index:4;left:13%;right:6%;width:auto;bottom:9%;color:var(--black);opacity:1;font-size:clamp(40px,5.5vw,84px);line-height:.95;text-align:left;transform:rotate(-7deg);letter-spacing:-.06em}.poster-heading>span:nth-child(even){color:var(--paper);margin-top:7px}.poster-caption{color:var(--black);right:auto;left:13%;bottom:4%;font-size:9px;letter-spacing:1px}
/* Five scene grammars; same silhouette, distinct structural relationships. */
[data-poster="home"] .composition-anchor{top:9%;right:-7%;width:83%;transform:rotate(-25deg)}
[data-poster="about"] .digit-upper{transform:translate(-23px,-18px) rotate(-4deg)}[data-poster="about"] .digit-lower{transform:translate(25px,15px) rotate(6deg)}[data-poster="about"] .composition-anchor{width:50%;height:44%;top:42%;right:-1%;transform:rotate(42deg)}[data-poster="about"] .poster-heading{font-size:clamp(33px,4.5vw,68px)}
[data-poster="projects"] .composition-digit{transform:rotate(9deg);top:-3%;left:0}[data-poster="projects"] .composition-archive{opacity:1}[data-poster="projects"] .digit-upper{transform:translate(-40px,-19px)}[data-poster="projects"] .digit-lower{transform:translate(32px,30px)}[data-poster="projects"] .composition-anchor{width:49%;height:41%;top:45%;right:-6%;transform:rotate(-32deg)}
[data-poster="journal"] .composition-paper{opacity:1}[data-poster="journal"] .composition-digit{transform:rotate(-3deg);top:13%;height:54%;left:-1%}[data-poster="journal"] .digit-upper{transform:translate(10px,-10px)}[data-poster="journal"] .digit-lower{transform:translate(-9px,8px)}[data-poster="journal"] .composition-anchor{top:0%;right:0;width:38%;height:36%;transform:rotate(8deg)}[data-poster="journal"] .poster-heading{background:var(--paper);padding:12px 15px;box-shadow:var(--scene-shadow);color:var(--black)}[data-poster="journal"] .poster-heading>span:nth-child(even){color:var(--black)}
[data-poster="contact"] .composition-digit{height:62%;top:0%;left:4%;transform:rotate(-18deg)}[data-poster="contact"] .composition-anchor{width:74%;height:60%;top:26%;right:-23%;transform:rotate(51deg)}[data-poster="contact"] .poster-heading{font-size:clamp(53px,7vw,110px);bottom:12%;line-height:.91}[data-poster="contact"] .poster-heading>span:last-child{background:var(--black);padding:6px 11px}
#drawer a{width:43%;max-width:43%;font-size:clamp(28px,3.5vw,53px);padding:12px 15px;gap:14px;margin:14px 0;white-space:nowrap}#drawer a:nth-of-type(even){margin-left:0;rotate:1deg}#drawer a small{font-size:.75em}#drawer a .menu-word{position:relative;z-index:2}#drawer a .fr-arrow{width:24px;height:24px;margin-left:auto;flex-shrink:0}#drawer a:before{clip-path:var(--scene-cut);box-shadow:none;inset:0}#drawer a.poster-selected,#drawer a.active{color:var(--black)}#drawer a.poster-selected:before,#drawer a.active:before{transform:scaleX(1);background:var(--paper)}#drawer a:hover{scale:1.025}.drawer-top{max-width:38%;position:relative;z-index:2;color:var(--paper);margin-bottom:24px;line-height:1.7}
.composition-live{animation:composition-build 330ms var(--scene-snap) both}.composition-out{animation:composition-tear 260ms var(--scene-snap) both;pointer-events:none}.poster-snap .composition-anchor .device-heart{animation:device-lock 280ms 50ms var(--scene-snap) both}.poster-snap .composition-live .digit-upper{animation:digit-snap 280ms var(--scene-snap) both}.poster-snap .composition-live .digit-lower{animation:digit-snap-back 310ms 25ms var(--scene-snap) both}@keyframes composition-build{from{translate:65px -32px;clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}to{translate:0 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes composition-tear{to{translate:-65px 20px;opacity:0;clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes digit-snap{from{translate:-32px 18px}to{translate:0 0}}@keyframes digit-snap-back{from{translate:28px -14px}to{translate:0 0}}@keyframes device-lock{from{scale:.82;rotate:12deg}to{scale:1;rotate:0deg}}
/* Hero: art woven between the paper line and the foreground ink lines. */
.v2-hero .hero-copy{position:relative;isolation:isolate;width:72%;z-index:3}.v2-hero-title{isolation:auto;z-index:auto}.v2-title-make,.v2-title-own{z-index:4}.v2-title-your{z-index:1}.v2-hero .hero-copy .v2-hero-art{z-index:2;top:50px;bottom:auto;right:-41%;width:79%;height:560px;opacity:1;transform:translate(var(--device-star-x,0px),var(--device-star-y,0px))!important}.v2-hero .v2-hero-art .art-tag{display:none}.v2-hero-description,.v2-cta{position:relative;z-index:5}.v2-hero .hero-copy p{background:var(--red);padding:8px 12px 8px 0;max-width:420px}.v2-title-your{padding-right:55px;box-shadow:8px 8px 0 var(--black)}.v2-title-own{margin-left:22%;box-shadow:7px 7px 0 var(--paper);border-bottom:3px solid var(--paper)}.v2-cta{transform:rotate(-5deg) translate(var(--magnet-x,0px),var(--magnet-y,0px))}.v2-hero .secret-star .device-red{transform-origin:320px 330px;transform:translate(calc(var(--device-text-x,0px)*-.4),-12px) rotate(-9deg)}.v2-hero .secret-star .device-fragments{transform:translateX(calc(var(--device-paper-x,0px)*.3))}.star-tap .device-heart{animation:device-lock 180ms var(--scene-snap) both}.star-tap .device-paper{animation:device-response 180ms var(--scene-snap) both}@keyframes device-response{45%{rotate:var(--tap-angle,4deg);scale:.95}100%{rotate:0deg;scale:1}}
.loading-signature{width:72px;height:78px;padding:0;clip-path:none;background:none;right:-21px;bottom:-18px}.intro-complete .loading-signature .device-heart{animation:device-lock 180ms var(--scene-snap) both}.portal-star .cut-device{width:100%;height:100%}.portal-star .device-red{animation:secret-red-deploy 500ms var(--scene-snap) both}.portal-star .device-fragments{animation:secret-fragments 500ms var(--scene-snap) both}.secret-monogram{width:230px;height:230px;margin:5px auto 10px;background:none;transform:none}.secret-monogram .cut-device{width:100%;height:100%}@keyframes secret-red-deploy{from{translate:-30px 20px;rotate:-25deg}to{translate:0 0;rotate:0deg}}@keyframes secret-fragments{from{scale:.65}to{scale:1}}
/* A single direction: old subjects depart, next layout draws behind the cut,
   then the titles arrive at the same angle after the coverage interval. */
.route-departing #main{animation:scene-depart 240ms var(--scene-snap) both;pointer-events:none}.route-arriving #main.enter{animation:scene-arrive 280ms 60ms var(--scene-snap) both;pointer-events:none}.route-arriving #main.enter .chapter-title h1,.route-arriving #main.enter .contact-editorial{animation:scene-title-arrive 260ms 100ms var(--scene-snap) both}.route-arriving #main.enter .chapter-title p,.route-arriving #main.enter .contact-copy{animation:scene-title-arrive 220ms 140ms var(--scene-snap) both}.route-arriving #main.enter .hero-copy,.route-arriving #main.enter .art{animation:none}.scene-routing #main{pointer-events:none}@keyframes scene-depart{to{translate:-45px 14px;rotate:-1deg}}@keyframes scene-arrive{from{translate:48px -14px}to{translate:0 0}}@keyframes scene-title-arrive{from{translate:28px -8px;opacity:.35}to{translate:0 0;opacity:1}}
@media(max-width:1000px){#chapter-hud{width:48px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto}.hud-current>span,.hud-current>i{display:none}.hud-current{justify-content:center}.hud-current b{font-size:19px}.hud-meter{margin-top:4px}#chapter-toggle{min-height:44px;padding:7px 5px}.v2-hero .hero-copy{width:82%}.v2-hero .hero-copy .v2-hero-art{right:-27%;width:72%}}
@media(max-width:600px){#drawer{padding:22px 5% calc(25px + env(safe-area-inset-bottom));height:calc(100dvh - 80px - env(safe-area-inset-top));box-sizing:border-box;overflow-y:auto}.live-poster{position:absolute;inset:0 0 0 49%;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}#drawer a{width:51%;max-width:51%;font-size:clamp(18px,5.8vw,26px);gap:6px;padding:14px 7px 15px 4px;min-height:58px;margin:13px 0;transform:rotate(-3deg)}#drawer a:nth-of-type(even){margin-left:0}#drawer a small{font-size:18px;letter-spacing:-1px}#drawer a .fr-arrow{width:13px;height:16px}.drawer-top{font-size:7px;letter-spacing:.7px;max-width:44%;min-height:36px;margin:0 0 14px}.poster-heading{left:12%;right:7%;width:auto;bottom:17%;font-size:clamp(23px,7vw,32px);line-height:1.03;opacity:1;letter-spacing:-.06em}.poster-caption{font-size:6px;letter-spacing:.4px;left:13%;right:4%;bottom:8%;line-height:1.8}.composition-digit{width:133%;left:-16%;height:59%;top:9%}.composition-anchor{width:100%;height:43%;right:-21%;top:20%}.composition-cross{font-size:8px}.composition-archive{inset:22% 8% 43%;padding:15px 10px}.composition-archive span{font-size:6px}.composition-paper{width:88%;left:9%;height:48%;top:14%}.composition-paper-two{top:18%;left:0}.composition-live .cut-device text{display:none}[data-poster="home"] .composition-anchor{width:115%;height:53%;top:16%;right:-29%}[data-poster="about"] .poster-heading{font-size:clamp(20px,5.8vw,25px)}[data-poster="about"] .composition-anchor{top:38%;right:-18%;width:80%}[data-poster="projects"] .composition-digit{top:7%;left:-12%}[data-poster="projects"] .composition-anchor{width:73%;top:40%;right:-18%}[data-poster="journal"] .composition-digit{height:47%;top:14%;left:-9%}[data-poster="journal"] .composition-anchor{width:64%;height:36%;right:-15%}[data-poster="journal"] .poster-heading{padding:8px 8px;font-size:24px}[data-poster="contact"] .composition-digit{top:6%;height:50%;left:-8%}[data-poster="contact"] .poster-heading{font-size:clamp(27px,8vw,36px);bottom:21%}[data-poster="contact"] .composition-anchor{width:110%;height:53%;right:-51%;top:28%}.v2-hero.hero{min-height:845px}.v2-hero .hero-copy{width:100%}.v2-hero .hero-copy .v2-hero-art{top:59px;right:-14%;height:340px;width:77%}.v2-hero-title{font-size:clamp(60px,17.5vw,80px);padding-right:8px;margin-bottom:38px}.v2-title-your{font-size:1.04em;margin-left:3%;padding-right:38px}.v2-title-own{font-size:1.15em;margin-left:17%;margin-top:26px}.v2-hero-description{margin-top:41px}.v2-hero .hero-copy p{font-size:15px;line-height:1.9;max-width:100%;padding:10px 0}.v2-hero .hero-bottom{bottom:35px}.v2-cta{min-width:245px}.v2-cta-face{gap:16px}.contact-title-stage:before{top:36%;right:-3%;width:36%;height:39%}.contact-editorial{margin-bottom:16px}.contact-stage{padding-bottom:70px}.contact-copy{margin-top:20px}#detail.reader-file{padding:12px 16px 24px}.reader-paper{padding:4px 4px 0}.reader-copy p{font-size:16px;line-height:1.95}.reader-heading h2{font-size:27px;line-height:1.45;letter-spacing:-.5px}.note h3{font-size:17px;line-height:1.55}.project-visual{height:auto;aspect-ratio:2/1}.loading-signature{width:57px;height:64px;right:-13px}.secret-monogram{width:190px;height:200px}}
@media(max-width:360px){#drawer a{font-size:18px;gap:4px}#drawer a small{font-size:16px}#drawer a .fr-arrow{width:11px}.v2-hero-title{font-size:56px}.v2-hero .hero-copy .v2-hero-art{height:285px;top:56px;right:-12%;width:74%}.v2-hero.hero{min-height:805px}.v2-cta{min-width:230px}.contact-title-stage:before{width:31%;right:-2%}.contact-editorial .contact-hello{font-size:57px}.contact-stage .contact-conversation{font-size:19px;padding-right:11px}}
@media(max-height:650px) and (max-width:600px){#drawer a{min-height:48px;margin:7px 0;padding-top:10px;padding-bottom:10px}.drawer-top{margin-bottom:5px}.poster-heading{bottom:10%}.poster-caption{bottom:3%}}
.reduced .composition-live,.reduced .composition-out,.reduced .composition-digit,.reduced .composition-anchor,.reduced .device-heart,.reduced .device-paper,.reduced .device-fragments,.reduced .device-red{animation:none!important;transition:none!important}.reduced .composition-out{display:none}.reduced #main{translate:0 0;rotate:0deg;animation:none!important}.reduced .v2-hero .secret-star .device-red{transform:translate(-19px,-12px) rotate(-9deg)}
@media(prefers-reduced-motion:reduce){.composition-live,.composition-out,.composition-digit,.composition-anchor,.device-heart,.device-paper,.device-fragments,.device-red{animation:none!important;transition:none!important}.composition-out{display:none}#main{translate:0 0;rotate:0deg;animation:none!important}.v2-hero .secret-star .device-red{transform:translate(-19px,-12px) rotate(-9deg)}}
#drawer:has(a.poster-selected) a.active:not(.poster-selected){color:var(--paper)}#drawer:has(a.poster-selected) a.active:not(.poster-selected):before{transform:scaleX(0)}

#drawer a.active{background:none;box-shadow:none}#drawer a.poster-selected small{color:var(--red)}
.slash-device{position:absolute;right:-3%;top:8%;width:45%;height:82%;z-index:1;pointer-events:none}.slash-running .slash-device{animation:slash-anchor-pass 650ms var(--scene-snap) both}.slash-poster{z-index:2}@keyframes slash-anchor-pass{0%{translate:-60px 30px;rotate:-12deg}40%,65%{translate:0 0;rotate:0deg}100%{translate:55px -15px;rotate:8deg}}.route-arriving #main.enter .hero-copy .art{animation:none!important}@media(max-width:600px){.slash-device{width:83%;height:65%;right:-29%;top:14%;opacity:.7}}

/* The shared stage owns the exit mask; keeping h1 unmasked lets the art sit
   between YOUR (paper layer 1) and MAKE / OWN (ink layer 4). */
.hero-type-stage{position:relative;display:flow-root;isolation:isolate;clip-path:polygon(-12% -12%,112% -12%,112% var(--device-cut-right,112%),-12% var(--device-cut-left,112%))}.hero-type-stage .v2-hero-title{clip-path:none;isolation:auto}.reduced .hero-type-stage{clip-path:none}@media(prefers-reduced-motion:reduce){.hero-type-stage{clip-path:none}}
/* Touch chooses once: the selected composition carries into the route cut,
   so its response remains visible while the next layout is prepared. */
.slash-composition{position:absolute;inset:0 0 0 39%;z-index:1;pointer-events:none;overflow:hidden}.slash-composition .composition-anchor{opacity:.8}.slash-running .slash-composition{animation:slash-anchor-pass 650ms var(--scene-snap) both}.slash-composition+.slash-device{display:none}@media(max-width:600px){.slash-composition{inset:0 -10% 0 25%;opacity:.8}.slash-composition .composition-digit{height:65%;top:5%}}