:root{--paper:#eeeae2;--ink:#241022;--lime:#c9e65d;color-scheme:light}*{box-sizing:border-box}html{scroll-snap-type:y mandatory;scroll-behavior:smooth;background:#301d2d}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--paper)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #756086;outline-offset:5px}a:hover:not(.action):not(.preview){text-decoration:underline;text-underline-offset:5px}.skip{position:fixed;z-index:20;top:-100px;padding:16px;background:var(--paper);color:var(--ink)}.skip:focus{top:0}.scene{position:relative;height:100svh;min-height:600px;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}.stage{position:absolute;width:max(100vw,177.778svh);height:max(100svh,56.25vw);left:50%;top:50%;transform:translate(-50%,-50%);container-type:inline-size;color:var(--ink)}.plate{position:absolute;inset:0;z-index:-1;pointer-events:none}.plate img{width:100%;height:100%;object-fit:cover;display:block}.brand{position:absolute;z-index:2;left:4%;top:5.6%;font-family:Manrope,Arial,sans-serif;font-size:4.25vw;line-height:1;font-weight:600;letter-spacing:-.035em}.scene nav{position:absolute;z-index:2;left:4.1%;top:26.8%;display:grid;gap:18px;font-size:1.25vw}.scene nav a{display:flex;align-items:center;gap:22px;min-height:26px}.scene nav a:before{content:'';height:1px;width:20px;background:currentColor}h1,h2,p{margin:0}h1,h2{font-family:'Golos Text','Arial Black',Arial,sans-serif;font-weight:900;letter-spacing:.01em;line-height:1.02}h2{position:absolute;color:var(--paper);font-size:5.25cqw;left:22.5%;top:20.8%}.action{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--lime);color:#101507;border:0;border-radius:0 100px 100px 0;box-shadow:0 5px 5px #24102238;padding:1.2cqw 2cqw;font-size:2.15cqw;font-weight:500;line-height:1.2;cursor:pointer;min-height:44px;transition:box-shadow .18s,background .18s}.action:hover{background:#d4ed76;box-shadow:0 7px 9px #24102248}.action svg{width:2.8cqw;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:3}.stage>a,.stage>p{position:absolute}.hero-white,.hero-ink{position:absolute;left:22.5%;font-size:6.55cqw;white-space:nowrap}.hero-white{top:25%;color:var(--paper)}.hero-ink{top:38.7%}.hero-copy{left:23%;top:58%;font-size:1.75cqw;line-height:1.35}.hero-action{left:22.6%;top:69.8%;width:33.2%;height:9.8%}.hero-secondary{left:58.6%;top:73.4%;font-size:1.8cqw}.s2 h2{left:19.4%;top:21.5%;font-size:5.25cqw}.wash-copy{left:19.7%;top:52%;font-size:1.85cqw;line-height:1.3}.wash-action{left:18.5%;top:69%;width:28.5%;height:8.7%}.preview{display:block;overflow:hidden}.preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.wash-preview{left:51.8%;top:40.2%;width:36.5%;height:39.9%;clip-path:polygon(6% 6%,100% 0,96% 100%,0 96%)}.s3 h2{left:23.7%;top:11.3%;font-size:5.05cqw}.pixel-copy{left:23.8%;top:32.4%;font-size:1.5cqw;line-height:1.3;width:65%}.pixel-main{left:22.7%;top:44.3%;width:32%;height:31.5%;border-radius:10px}.pixel-3d{left:55.8%;top:44.3%;width:32%;height:32.5%;border-radius:10px}.pixel-action-main{left:24.5%;top:77.5%;width:26.2%}.pixel-action-3d{left:57.3%;top:78.5%;width:27%}.s3 .action{font-size:1.45cqw;padding:1cqw 1.5cqw}.s3 .action svg,.s4 .action svg{width:2cqw}.s4 h2{top:16.3%;left:22.7%;font-size:5.7cqw}.zerno-preview{left:20.2%;top:40%;width:33%;height:30.5%;clip-path:polygon(6% 0,100% 3%,97% 100%,0 96%);border-radius:12px}.fable-preview{left:54.8%;top:40.2%;width:34.7%;height:31.7%;border-radius:12px}.zerno-action{left:19.7%;top:72.3%;width:27%}.fable-action{left:54.9%;top:74.3%;width:30%}.s4 .action{font-size:1.35cqw;padding:1cqw 1.5cqw}.extra-work{left:23%;top:85.5%;font-size:1.1cqw;color:var(--paper);text-underline-offset:4px}.s5 h2{left:22.5%;top:19.5%;font-size:6cqw}#brief-form{position:absolute;left:23%;top:44.8%;width:31.5%;font-size:1.1cqw}.field{margin-bottom:.5cqw}.field label{display:block;margin-bottom:.3cqw;font-weight:500}input,textarea{width:100%;border:0;border-bottom:1px solid #897b88;background:#f7f4eb9c;color:var(--ink);padding:.55cqw .65cqw;border-radius:0;resize:none;display:block}input::placeholder,textarea::placeholder{color:#796b77;font-size:.95cqw}.error{display:block;min-height:.3cqw;font-size:.85cqw;color:#9a2525}.error:not(:empty){padding-top:3px}#brief-form .action{font-size:1.65cqw;width:100%;padding:1cqw 1.5cqw;margin-top:.6cqw}.local-note,#brief-status{font-size:.85cqw;line-height:1.25;margin-top:.6cqw}#brief-status{font-weight:600}.contact{position:absolute;color:var(--ink);text-align:left;width:12%;font-size:1.12cqw;line-height:1.4}.channel-name{display:block;font-size:1.7cqw;font-weight:600;margin-bottom:1cqw}.contact p{opacity:.8}.contact a{display:block;text-decoration:underline;margin-top:1cqw}.contact-telegram{left:58.4%;top:38.5%;width:12%}.contact-instagram{left:75.5%;top:45%;width:12%}
@media(min-width:701px) and (max-aspect-ratio: 16/10){.scene nav{left:3%;font-size:16px}.scene nav a{gap:12px}.brand{left:3%}}
@media(max-width:700px){.scene{min-height:700px}.stage{width:max(100vw,46svh);height:max(100svh,217.3913vw)}.brand{left:5.6%;top:3.9%;font-size:8.8vw}.scene nav{left:auto;right:6%;top:3.6%;gap:1px;font-size:3vw}.scene nav a{min-height:20px;gap:10px}.scene nav a:before{width:12px}.s1 nav a:not(:first-child){display:none}.s1 nav a:before{display:none}.s1 nav{top:4.3%;font-size:4.4vw}.s2 nav,.s4 nav{left:6.3%;right:auto;top:11%;font-size:3.5vw;gap:5px}.s2 nav a,.s4 nav a{min-height:22px;gap:15px}.hero-white,.hero-ink{white-space:normal;line-height:.96}.hero-white{left:5.6%;top:25.2%;font-size:13.6cqw;width:70%}.hero-ink{left:9%;top:43%;font-size:14.6cqw;width:85%}.hero-copy{left:9.4%;top:60.6%;width:83%;font-size:4.35cqw;line-height:1.35}.hero-copy br{display:none}.hero-action{left:9%;top:69.5%;width:82.4%;height:6.5%;font-size:5.7cqw;padding:2cqw 5cqw}.action svg{width:6.8cqw}.hero-secondary{left:9.5%;top:79.3%;font-size:5cqw}.s2 h2{left:5.6%;top:27.5%;font-size:10.9cqw;width:87%;line-height:.98}.s2 h2 br{display:none}.wash-copy{left:11.2%;top:46.8%;font-size:4.8cqw;line-height:1.25;width:79%}.wash-copy br{display:none}.wash-preview{left:13%;top:53.2%;width:77.6%;height:22%;clip-path:polygon(4% 2%,100% 0,96% 100%,0 94%)}.wash-action{left:9%;top:80.8%;width:72.5%;height:5.6%;font-size:5cqw;padding:2cqw 4cqw}.s3 h2{left:5.7%;top:13.4%;font-size:8.7cqw;width:75%;line-height:.94}.s3 h2 br{display:none}.pixel-copy{left:11.3%;top:28%;font-size:3.8cqw;line-height:1.3;width:78%}.desktop{display:none}.pixel-main{left:9.2%;top:39.8%;width:82%;height:22%;border-radius:7px}.pixel-3d{left:9%;top:63.3%;width:82%;height:19.6%;border-radius:7px}.s3 .action{left:9.1%;width:69%;height:3.9%;min-height:33px;font-size:3.7cqw;padding:1.2cqw 3.6cqw}.pixel-action-main{top:84%}.pixel-action-3d{top:89%}.s3 .action svg,.s4 .action svg{width:5.3cqw}.s4 h2{left:5.7%;top:24.7%;font-size:11.1cqw;line-height:.98;width:90%}.zerno-preview{left:9.1%;top:39.2%;width:82.5%;height:20.3%;border-radius:8px;clip-path:polygon(2% 2%,100% 0,99% 100%,0 100%)}.fable-preview{left:8.8%;top:66.2%;width:82%;height:18.8%;border-radius:8px}.s4 .action{font-size:3.65cqw;padding:1.5cqw 3cqw;min-height:34px}.zerno-action{left:9%;top:60.6%;width:82.5%;height:4%}.fable-action{left:8.3%;top:85.8%;width:76%;height:3.9%;font-size:3.3cqw!important}.extra-work{left:8.5%;top:90.5%;font-size:2.6cqw;color:var(--ink)}.s5 h2{left:5.8%;top:26.6%;font-size:12cqw;line-height:1;width:76%}.contact{font-size:3.2cqw;line-height:1.3}.channel-name{font-size:4cqw;margin-bottom:2cqw}.contact-telegram{left:17%;top:43%;width:28%}.contact-instagram{left:55%;top:46%;width:25%}#brief-form{left:10%;top:61.7%;width:80%;font-size:3.3cqw}.field{margin-bottom:1.3cqw}.field label{margin-bottom:.5cqw}input,textarea{padding:1.3cqw 1.8cqw;font-size:16px}input::placeholder,textarea::placeholder{font-size:3.1cqw}textarea{height:11cqw}input{height:8.5cqw}.error{font-size:2.7cqw;min-height:.5cqw}#brief-form .action{font-size:4.5cqw;padding:2cqw 4cqw;margin-top:1.5cqw;min-height:43px}.local-note,#brief-status{font-size:2.7cqw;margin-top:1.4cqw;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Optical adjustments after comparison with the supplied scene references. */
.brand{font-weight:400;font-size:4.8vw;letter-spacing:-.025em}.hero-white,.hero-ink{font-size:5.8cqw}.extra-work{left:54.9%;top:83.8%;color:var(--ink)}
@media(max-width:700px){.brand{font-size:10vw}.hero-white{font-size:12.2cqw}.hero-ink{font-size:13.3cqw}.hero-copy{font-size:4cqw;line-height:1.45}.hero-copy br{display:block}.s3 h2{font-size:8.2cqw;width:80%;line-height:.97}.extra-work{left:8.5%;top:90.5%;font-size:2.6cqw}.s5 h2{font-size:12.8cqw}}
/* QA: keep the complete desktop composition inside the viewport. */
@media(min-width:701px){
 .stage{width:100vw;height:100svh}.plate img{object-fit:fill}
 .s2 h2{top:21%;font-size:5.1cqw}
 .s3 h2{top:8%}
 /* Follow the existing perspective frames, rather than stacking rectangles. */
 .pixel-main{left:22.8%;top:44.3%;width:32%;height:31.8%;clip-path:polygon(6% 0,100% 0,97.7% 100%,0 96.5%,3.7% 3.5%,4% 2%,4.7% .7%)}
 .fable-preview{left:54.8%;top:39.9%;width:34.7%;height:31.7%;clip-path:polygon(3% 3%,97% 0,100% 100%,0 97%)}
}
.brand{font-weight:700;font-size:4.7vw;letter-spacing:-.035em}
.hero-action{position:absolute;font-size:1.85cqw}
.hero-contact-note{left:23%;top:81%;width:33%;font-size:1cqw;line-height:1.35}
.hero-secondary{font-size:1.5cqw;left:58.6%;top:71.8%}
.hero-works{left:58.6%;top:78%;font-size:1.35cqw}
.zerno-description,.fable-description{font-size:1.1cqw;line-height:1.25;top:79.5%;left:20%;width:32%}
.fable-description{left:55%;top:81.5%}.extra-work{top:89%}
.contact-graphic{display:block;width:100%;height:7cqw;margin-bottom:.5cqw}
.contact-telegram{top:34.5%}.contact-instagram{top:41%}
.channel-name{font-size:1.2cqw;margin-bottom:.4cqw}.contact{font-size:1cqw}
@media(max-width:700px){
 .brand{font-size:10.5vw;font-weight:700}
 .hero-action{font-size:5.1cqw}
 .hero-contact-note{left:9.5%;top:76.7%;width:81%;font-size:2.8cqw;line-height:1.3}
 .hero-secondary{left:9.5%;top:82.3%;font-size:4.5cqw}
 .hero-works{left:9.5%;top:87.5%;font-size:4cqw}
 .zerno-description,.fable-description{left:10%;top:64.9%;font-size:2.7cqw;line-height:1.15;width:81%}
 .zerno-description br,.fable-description br{display:none}
 .fable-preview{top:68%;height:17%}
 .fable-description{top:90.2%}.extra-work{top:93%}
 .contact-telegram{top:40.8%}.contact-instagram{top:44%}
 .contact-graphic{height:16cqw;margin-bottom:1cqw}
 .channel-name{font-size:3.3cqw;margin-bottom:.6cqw}.contact{font-size:2.7cqw}
}
@media(min-width:701px){
 .fable-action{width:33%;font-size:1.15cqw;white-space:nowrap;height:6%}
 .fable-description{top:81.5%;width:34%}.fable-description br{display:none}
 .extra-work{left:55%;top:85.5%;font-size:1cqw}
}
@media(max-width:700px){.extra-work{top:95%;color:var(--paper)}}
/* M-05 / M-06: fit mobile scenes to the visible viewport, not a 700px
   minimum or the artwork ratio; keep a separate header row above content. */
@media(max-width:700px){
 .scene{height:100svh;min-height:0}
 .stage{width:100%;height:100%;left:0;top:0;transform:none}
 .plate img{object-fit:fill}
 .scene nav{left:6.3%;right:auto;top:11%;display:flex;gap:14px;font-size:3.2vw}
 .scene nav a{min-height:22px;gap:0}
 .scene nav a:before{display:none}
 .s2 h2,.s4 h2,.s5 h2{top:22%}
 .s3 h2{top:16%;font-size:7.4cqw;width:88%;line-height:1.02}
 .pixel-copy{top:28%;font-size:3.3cqw}
 .pixel-action-3d{top:90%}
 .wash-copy{font-size:4.4cqw}
 .wash-preview{top:54%}
 .zerno-description{top:60%}
 .zerno-action{top:64%}
 .fable-preview{top:71%;height:14%}
 .fable-description{top:85.5%}
 .fable-action{top:88.5%}
}

/* M-07: cover the second artwork frame with the complete composition. */
@media(max-width:700px){
 .zerno-preview{height:18%}
 .zerno-description{top:57.5%}
 .zerno-action{top:60.6%}
 .fable-preview{top:66%;height:19.3%}
 .fable-preview img{object-fit:fill}
}

/* M-08: the form owns its paper surface, including validation and status.
   Let that surface and the last scene grow with the form, not clip at 100svh. */
@media(max-width:700px){
 .s5{height:auto;min-height:100svh}
 .s5 .stage{position:relative;height:auto;min-height:100svh;display:flow-root}
 #brief-form{position:relative;top:auto;margin-top:61.7svh;margin-bottom:24px;
  background:var(--paper);padding:10px;border-radius:8px}
}

/* M-09: keep mobile white headings within the dark side of the curl. */
@media(max-width:700px){
 .s3 h2{top:15%;font-size:5.5cqw}
 .s3 h2 br{display:block}
 .s5 h2{font-size:11cqw}
 /* M-10: fit the Instagram icon, name and wrapped notice on its card. */
 .contact-instagram{top:43%}
 .contact-instagram .contact-graphic{height:12cqw}
}

/* N-11: wrap Baltic Wash's mobile title inside the dark left of the curl. */
@media(max-width:700px){
 .s2 h2{top:20%;width:58%;font-size:9cqw}
 /* The story title also crosses the curl at phone widths. */
 .s4 h2{font-size:8.5cqw}
}
/* Live scene: a single fixed canvas, with accessible HTML functional zones. */
html{scroll-snap-type:none;scroll-behavior:auto;overflow:hidden}body{height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:none}
#live-sheet{position:fixed;inset:0;width:100%;height:100%;display:block}
.scene,.s5{position:fixed;inset:0;height:100dvh;min-height:0;visibility:hidden;overflow:visible;pointer-events:none}
.scene.active{visibility:visible;pointer-events:auto}.scene .stage,.s5 .stage{position:absolute;inset:0;left:0;top:0;transform:none;width:100%;height:100%;min-height:0}
.scene.projected [data-projected]{position:absolute!important}
.preview{clip-path:none!important;border-radius:0!important}.preview img{visibility:hidden}.bending .stage{pointer-events:none}
.s4 h2{top:10%;font-size:4.9cqw}.extra-work{top:85%}
@media(max-width:700px){
 .s5 .stage{display:block}.s5 #brief-form{position:absolute;top:60%;margin:0 0 0 0;padding:0;background:none;border-radius:0;width:82%;left:9%}
 .s5 h2{top:19%;font-size:10cqw}
 .contact-telegram{top:39%;left:12%;width:32%}.contact-instagram{top:40%;left:55%;width:32%}
 .contact-graphic{height:10cqw;width:85%}.contact-instagram .contact-graphic{height:10cqw}
 .hero-white{top:24%;font-size:11.6cqw}.hero-ink{font-size:12.4cqw}
 .hero-copy{font-size:3.7cqw}.hero-action{font-size:4.6cqw}
 #brief-form{font-size:3cqw}#brief-form textarea{height:10cqw}#brief-form input{height:8cqw}
 #brief-form .action{font-size:4cqw;min-height:40px;padding:1.8cqw 3cqw}
 .s3 .action{min-height:30px}.s4 .action{min-height:30px}
}
@media(max-width:700px){.s4 h2{top:22%;font-size:8.5cqw;width:90%}}
@media(max-width:700px){.s4 h2{font-size:7.8cqw}.extra-work{left:9%;top:96%;font-size:2.6cqw;color:var(--paper)}}
@media(min-width:701px){.contact-telegram,.contact-instagram{top:48%}}

/* QA-03: reserve dark space before the desktop curl. */
@media(min-width:701px){.s3 h2{font-size:4.4cqw}}
/* QA-04: field focus must not overlap its label or validation message. */
input:focus-visible,textarea:focus-visible{outline-offset:-3px}

/* Same contrast guard on the opening scene at phone widths. */
@media(max-width:700px){.hero-white{font-size:11cqw}}