/* A tactile paper theatre. The approved girl/manifesto has no overrides here. */
:root { --paper-blue:#b4cbd2; --paper-rose:#e5c1cc; --paper-lilac:#cbb9d3; --paper-green:#a6b393; --paper-ivory:#f0e7d1; --burgundy:#701e38; }
body { background:var(--paper-blue); }
.header { top:5.3dvh; left:14%; right:14%; height:7dvh; padding:0; border:0; border-radius:0; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--burgundy); }
.header>.wordmark { font:italic 400 clamp(32px,4.1vw,68px)/1 var(--serif); letter-spacing:-.055em; }
.header .desktop-nav { grid-template-columns:1fr 1fr 1.9fr 1fr 1fr; font-size:clamp(16px,1.5vw,24px); }
.header.scrolled { top:12px; left:17%; right:17%; height:64px; padding:0 24px; border:1px solid #8f718b80; border-radius:4px; background:#f0e7d1f5; box-shadow:0 6px 20px #40353a15; }
.header.scrolled>.wordmark { font-size:34px; }
.header.scrolled .desktop-nav { font-size:17px; }
.header .mobile-nav { background:#efe5cf; border:1px solid #b69fb3; }
.hero.theatre .stage-shell { background:#b4cbd2 url('/assets/paper-stage.png') center/100% 100% no-repeat; height:100vh; height:100dvh; min-height:580px; }
.stage-frame { position:absolute; z-index:3; inset:0; pointer-events:none; background:url('/assets/paper-stage.png') center/100% 100% no-repeat; clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,16% 23%,16% 87%,84% 87%,84% 23%,16% 23%); }
.cloth-host,.curtain-understudy { inset:14% 12% 9%; width:76%; height:77%; }
.curtain-understudy { background:#8a9b74 url('/assets/sage-curtain.png') center/100% 100% no-repeat; }
.theatre .hero-copy,.theatre:is([data-state="opening"],[data-state="open"]) .hero-copy { top:44%; left:0; width:100%; padding:0; text-align:center; transition:none; color:var(--burgundy); }
.theatre h1,.theatre:is([data-state="opening"],[data-state="open"]) h1 { width:64%; max-width:1100px; margin:0 auto; font:400 clamp(30px,min(3.9vw,5.4dvh),72px)/.98 var(--serif); letter-spacing:-.035em; text-shadow:none; transition:none; }
.theatre h1>span,.theatre h1>span:nth-child(2) { display:block; font:inherit; text-transform:none; letter-spacing:inherit; white-space:nowrap; margin:0; }
.theatre h1 em { display:block; font:italic 400 1.22em/1.04 var(--serif); letter-spacing:-.045em; margin:0; max-width:none; }
.theatre h1::before { display:block; content:''; position:absolute; z-index:-1; inset:-25% -8%; background:radial-gradient(ellipse,#f5ecd3ee 0,#f1e5ccaa 45%,transparent 73%); filter:blur(18px); opacity:1; transition:opacity 2.5s ease; }
.theatre:is([data-state="opening"],[data-state="open"]) h1::before { opacity:0; }
.stage-caption-slot { width:48%; max-width:800px; margin:clamp(12px,2.2dvh,26px) auto 0; }
.stage-caption-lead,.stage-caption-body { display:block; font:400 clamp(16px,min(1.6vw,2.5dvh),27px)/1.25 var(--serif); letter-spacing:0; color:var(--burgundy); text-shadow:none; }
.stage-caption-body { margin:0; max-width:none; }
.stage-cta { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:10px 27px; margin:clamp(13px,2.5dvh,30px) auto 0; min-height:44px; font:400 clamp(18px,1.7vw,26px)/1.15 var(--serif); color:#f5ebd3; background:linear-gradient(110deg,#763b54,#65334d); border:1px solid #c2ad7e; outline:1px solid #73566a; outline-offset:4px; border-radius:18px 6px 18px 6px; box-shadow:inset 0 0 0 3px #e0cda62b,0 5px 10px #48384930; transition:transform .25s,box-shadow .25s; }
.stage-cta:hover { transform:translateY(-3px); box-shadow:inset 0 0 0 3px #e0cda640,0 8px 14px #48384930; }

/* Colour chapters, paper edges and tangible objects instead of UI cards. */
.section { --ink:var(--burgundy); --muted:#6c3c4b; --line:#713c5338; color:var(--burgundy); position:relative; isolation:isolate; padding:100px max(6vw,24px) 115px; border-top:none; }
.section::before { content:''; position:absolute; inset:0; background:url('/assets/opening-grain.svg') repeat; opacity:.09; pointer-events:none; z-index:-1; mix-blend-mode:multiply; }
.section h2 { font:400 clamp(48px,5.6vw,88px)/.98 var(--serif); letter-spacing:-.045em; position:relative; z-index:1; }
.section h2 em { font-size:1.12em; }
.section h3 { font-family:var(--serif); }
.section p { color:inherit; }
.results { background:radial-gradient(ellipse at 85% 20%,#e2c6d488,transparent 55%),#e7e0c9; }
.results-art { border:10px solid #f6eedb; outline:1px solid #b39aaa; box-shadow:7px 12px 24px #58424e25; transform:rotate(-2deg); }
.result-list h3 { font-size:clamp(26px,2.6vw,41px); }
.result-list li { border-color:#956e8160; }
.sasha-case { background:radial-gradient(ellipse at 85% 25%,#f3d3de66,transparent 48%),#b9c8b0; overflow:hidden; }
.sasha-case h2 { max-width:1000px; }
.silk-detail { position:absolute; top:-4%; right:-4%; width:32%; height:72%; object-fit:cover; opacity:.7; transform:rotate(-14deg); mask-image:linear-gradient(90deg,transparent,#000 25%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%); z-index:-1; }
.case-intro { gap:28px; margin-top:42px; }
.case-intro>img { width:110px; border-radius:50% 45% 48% 46%; border:6px solid #eee3c9; outline:1px solid #9d8f70; box-shadow:6px 8px 0 #76608229; }
.case-intro h3 { font-size:40px; }
.case-preview { gap:4%; margin-top:55px; padding:0 1%; }
.case-preview img { padding:12px; background:#f0e7d1; box-shadow:0 12px 24px #3b384225; border:1px solid #ab9f87; }
.case-preview img:first-child { transform:rotate(-2deg); }
.case-preview img:last-child { transform:rotate(2deg); }
.formats { background:#fff; }
.formats>h2 { text-align:center; }
.path-layout { grid-template-columns:1fr 1fr; gap:6%; margin-top:70px; }
.path-visual { position:sticky; top:100px; height:min(620px,calc(100dvh - 130px)); min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.butterfly-halo { position:absolute; inset:9% 5% 14%; border-radius:50%; background:radial-gradient(ellipse,#efdfbbaa 0,#d7b7dc66 42%,transparent 68%); filter:blur(15px); pointer-events:none; }
#butterfly-object { position:relative; width:100%; flex:1; min-height:0; perspective:900px; }
#butterfly-object canvas { display:block; width:100%; height:100%; }
.butterfly-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scaleX(var(--wing-open,1)); transition:transform .2s linear; filter:drop-shadow(0 18px 12px #53355233); }
#butterfly-object[data-ready] .butterfly-fallback { display:none; }
.butterfly-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; z-index:1; padding:16px 0; }
.butterfly-controls button { background:none; color:#71334e; padding:8px 0; min-height:44px; font:400 20px/1.1 var(--serif); border-bottom:1px solid transparent; }
.butterfly-controls button[aria-pressed=true] { border-color:currentColor; }
.butterfly-controls button:hover { color:#71334e; }
.path-step { position:relative; border-top:1px solid #71334e44; padding:35px 0 55px; scroll-margin-top:100px; }
.path-step:before { content:'✧'; position:absolute; right:0; top:-17px; font-size:28px; color:#71334e; background:#fff; width:34px; text-align:center; }
.path-step h3 { font-size:clamp(34px,3.7vw,57px); line-height:1.05; letter-spacing:-.03em; padding-right:20px; }
.format-description { font-size:18px; line-height:1.6; max-width:540px; }
.format-price { margin:24px 0; gap:25px; }
.format-price .price { font-size:44px; }
.format-price>span:last-child { font:italic 24px/1.3 var(--serif); color:#703b4e; }
.service-list { padding:0; margin:0; list-style:none; font-size:17px; line-height:1.6; }
.service-list li { position:relative; padding-left:22px; margin:10px 0; }
.service-list li::before { content:'·'; position:absolute; left:0; top:-2px; font-size:26px; color:#71334e; }
.service-result { font:italic 24px/1.3 var(--serif); border-left:2px solid #9a777b; padding:6px 0 6px 18px; margin-top:28px; }
.path-step .text-link { margin-top:25px; font-size:17px; }
.process { background:linear-gradient(120deg,#d9bbc8,#edd7da 48%,#c9d4b2); }
.process-art { position:sticky; top:110px; }
.process-layout { grid-template-columns:1fr 1fr; gap:10%; }
.glass-fidget { display:block; width:100%; margin:35px 0 0; padding:0; background:transparent; border:none; cursor:pointer; transform-style:preserve-3d; }
.glass-fidget img { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 14px #58344520); transition:transform .7s cubic-bezier(.2,.8,.2,1); transform:perspective(900px) rotateX(var(--glass-x,0deg)) rotateY(var(--glass-y,0deg)); }
.glass-fidget.is-playing img { animation:glass-sway 1.15s ease-in-out; }
.glass-fidget:focus-visible { outline:2px solid var(--burgundy); outline-offset:8px; border-radius:20px; }
.process-list li { display:flex; gap:25px; align-items:center; padding:25px 0; border-color:#7c445949; }
.process-list h3 { font-size:36px; }
.process-list p { font-size:18px; margin-top:5px; }
.process-list .process-gem { grid-row:auto; display:flex; align-items:center; justify-content:center; flex:0 0 58px; height:58px; font:400 31px/1 var(--serif); color:#71334e; border-radius:48% 45% 47% 42%; border:1px solid #fff9; box-shadow:inset 3px 4px 6px #fff9,inset -3px -3px 5px #65537330,3px 6px 8px #5b3e5020; transition:transform .6s; }
.gem-rose { background:radial-gradient(at 35% 25%,#fff8,#c785a1b0); }
.gem-green { background:radial-gradient(at 35% 25%,#fff8,#8cae92bd); }
.gem-lilac { background:radial-gradient(at 35% 25%,#fff8,#a98ac8c2); }
.gem-amber { background:radial-gradient(at 35% 25%,#fff8,#d9b36ec2); }
.gem-blue { background:radial-gradient(at 35% 25%,#fff8,#86b5c6c2); }
.process-list li:hover .process-gem { transform:rotate(25deg) scale(1.08); }
.work { background:#b2c7cf; }
.work>h2 { text-align:center; }
.projects { gap:7%; margin-top:65px; }
.project-visual,.project-extra { border:8px solid #efe6d1; border-radius:3px; outline:1px solid #a392ad; outline-offset:5px; box-shadow:0 14px 28px #483b4c25; }
.project:nth-child(2) { padding-top:80px; }
.project-caption { padding:25px 0 30px; }
.project-caption h3 { font-size:36px; }
.project-hover { background:#f0e7d1ed; border:1px solid #927691; }
.project-extra { margin-top:12px; }
.people { background:radial-gradient(ellipse at 8% 10%,#eac9c5a0,transparent 50%),#bcc5a7; }
.speaker-photo { border:6px solid #e8dec7; outline:2px solid #9e82a2; outline-offset:3px; border-radius:48% 48% 4px 4px; box-shadow:8px 12px 20px #59435a20; }
.speaker h3 { font-size:65px; color:var(--burgundy); }
.speaker-info p { font-size:18px; }
.faq { background:#e5d8e4; }
.faq-list details { border-color:#93728b77; }
.faq-list summary { font-size:27px; }
.contact { background:radial-gradient(ellipse at 5% 50%,#f3d4d68c,transparent 48%),#b8cbd0; padding-bottom:0; }
.contact-copy { position:relative; }
.contact-copy::after { content:''; display:block; width:145px; height:190px; margin:38px 0 0 40%; background:url('/assets/rose-pencil.png') center/cover; transform:rotate(-12deg); box-shadow:5px 8px 14px #4b3b4f20; }
.field input,.field textarea { color:var(--burgundy); border-color:#74536688; }
.contact .button-cream { border:1px solid #b3a77d; border-radius:18px 5px 18px 5px; background:#70354d; box-shadow:inset 0 0 0 3px #e2cda624; }
.contact footer { color:var(--burgundy); border-color:#8e6c7c88; }
#brief-dialog { background:#e9dbe6; border:1px solid #826180; }
#brief-dialog .brief-output { background:#f3e9d7; }
@keyframes glass-sway { 0%,100% { transform:rotate(0) translateY(0); } 25% { transform:rotate(-5deg) translateY(-10px); } 60% { transform:rotate(4deg) translateY(-5px); } 80% { transform:rotate(-1deg); } }
@media (min-width:761px) and (max-height:650px) {
 .header { top:30px; height:42px; }
 .stage-caption-slot { margin-top:10px; }
 .stage-cta { margin-top:12px; padding:6px 23px; }
}
@media (min-width:761px) and (max-width:1000px) {
 .header { left:13%; right:13%; }
 .header .desktop-nav { font-size:16px; grid-template-columns:1fr 1fr 1.6fr 1fr 1fr; }
 .header.scrolled { left:5%; right:5%; }
 .stage-caption-slot { width:54%; }
 .path-layout { gap:4%; }
 .path-step h3 { font-size:36px; }
 .process-layout { gap:5%; }
 .speaker { display:block; }
 .speaker-photo { max-width:220px; }
}
@media (max-width:760px) {
 .header,.header.scrolled { top:12px; left:16px; right:16px; height:58px; padding:0 16px; background:#efe6d5f2; border:1px solid #a58ca6; border-radius:3px; }
 .header>.wordmark,.header.scrolled>.wordmark { font:italic 400 36px/1 var(--serif); }
 .header .menu-toggle { font-size:14px; }
 .hero.theatre .stage-shell { --mobile-scene-height:clamp(340px,90vw,470px); height:auto; min-height:0; background:#b4cbd2; }
 .stage-shell::before { content:''; position:absolute; inset:0 0 auto; height:var(--mobile-scene-height); background:url('/assets/paper-stage.png') center/100% 100% no-repeat; }
 .stage-shell::after { display:none; }
 .stage-frame { height:var(--mobile-scene-height); bottom:auto; background-size:100% 100%; }
 .cloth-host,.curtain-understudy { top:calc(var(--mobile-scene-height)*.14); left:12%; right:12%; bottom:auto; width:76%; height:calc(var(--mobile-scene-height)*.77); }
 .theatre .hero-copy,.theatre:is([data-state="opening"],[data-state="open"]) .hero-copy { display:block; position:relative; top:auto; left:auto; width:100%; padding:calc(var(--mobile-scene-height)*.45) 0 38px; }
 .theatre h1,.theatre:is([data-state="opening"],[data-state="open"]) h1 { width:65%; max-width:400px; height:calc(var(--mobile-scene-height)*.55); margin:0 auto; font-size:clamp(23px,6.3vw,39px); line-height:1.02; }
 .theatre h1 em { font-size:1.15em; }
 .stage-caption-slot { width:88%; max-width:470px; margin:0 auto; padding-top:16px; }
 .stage-caption-lead { font-size:25px; line-height:1.1; text-wrap:balance; }
 .stage-caption-body { font-size:19px; line-height:1.3; margin-top:12px; text-wrap:pretty; }
 .stage-caption-body br { display:none; }
 .stage-cta { font-size:21px; margin-top:25px; padding:12px 24px; }
 .section { padding:62px 24px 72px; }
 .section h2 { font-size:clamp(43px,10.6vw,62px); }
 .silk-detail { width:55%; height:46%; right:-10%; opacity:.4; }
 .case-intro { gap:20px; margin-top:30px; }
 .case-intro>img { width:90px; border-width:4px; }
 .case-intro h3 { font-size:32px; }
 .case-intro p { font-size:16px; }
 .case-preview { gap:28px; margin-top:40px; padding:0; }
 .case-preview img { padding:7px; }
 .path-layout { display:block; margin-top:24px; }
 .formats .path-visual { position:sticky; top:78px; z-index:5; width:100%; height:205px; min-height:0; margin:0 0 25px; border-bottom:1px solid #71334e33; background:#fff; border-radius:45% 45% 8px 8px; }
 #butterfly-object { width:min(310px,90%); height:155px; flex:none; }
 .butterfly-halo { inset:0 10% 15%; }
 .butterfly-controls { padding:0 0 6px; gap:14px; }
 .butterfly-controls button { font-size:17px; }
 .path-step { padding:30px 0 44px; scroll-margin-top:300px; }
 .path-step h3 { font-size:37px; }
 .format-description,.service-list { font-size:16px; line-height:1.55; }
 .format-price .price { font-size:40px; }
 .format-price>span:last-child { font-size:23px; }
 .service-result { font-size:23px; }
 .process-art { position:relative; top:auto; }
 .glass-fidget { width:85%; margin:25px auto 0; }
 .process-list { margin-top:20px; }
 .process-list li { padding:22px 0; gap:20px; }
 .process-list h3 { font-size:31px; }
 .process-list p { font-size:16px; }
 .process-list .process-gem { flex-basis:50px; height:50px; }
 .project:nth-child(2) { padding-top:35px; }
 .project-visual,.project-extra { border-width:5px; outline-offset:3px; }
 .project-caption h3 { font-size:31px; }
 .speaker { display:grid; grid-template-columns:38% 1fr; gap:25px; }
 .speaker h3 { font-size:51px; }
 .speaker-info p { font-size:16px; }
 .speaker-photo { border-width:3px; }
 .faq-list summary { font-size:24px; }
 .contact { padding-bottom:0; }
 .contact-copy::after { width:90px; height:120px; position:absolute; right:0; bottom:-20px; margin:0; opacity:.8; z-index:-1; }
}
@media (prefers-reduced-motion:reduce) {
 .glass-fidget img,.glass-fidget.is-playing img,.process-gem,.stage-cta,.butterfly-fallback { animation:none!important; transition:none!important; }
}