@font-face{font-family:WizardHand;src:url('assets/wizard-hand.woff') format('woff');font-display:swap;font-weight:400}
@font-face{font-family:WizardScript;src:url('assets/wizard-script.otf') format('opentype');font-display:swap;font-weight:400}
/* Full-bleed artwork; bias the crop upward to retain the owl's head. */
@media(min-width:761px){
 .backdrop{background-image:linear-gradient(90deg,#080e1415 0%,#080e1440 38%,#080e14d9 76%),url('assets/hogwarts-letter.webp');background-size:100% 100%,cover;background-position:center,left 18%;background-repeat:no-repeat;filter:none}
 .desktop-intro{top:auto;bottom:6%;left:6%;width:43%;padding:75px 15px 10px;background:linear-gradient(transparent,#080e14b8)}
 .desktop-intro h1{font-size:clamp(32px,3vw,48px);margin:13px 0 18px;line-height:1.25}
 .desktop-intro p{font-size:13px;line-height:1.85;margin:0}
 .desktop-intro .side-caption{margin-top:18px}
 .hero-art{display:none}
}
.hero-title,.desktop-intro h1{font-family:WizardHand,"STKaiti","KaiTi",serif;font-weight:400;line-height:1.35}
.hero-panel .lede{font-size:15px;line-height:1.95;color:#ded2b9}
.letter{isolation:isolate;background:#e5d1a6 url('assets/parchment-quill.webp') center center/100% 100% no-repeat;border:none;border-radius:2px;padding:30px 64px 28px 34px;box-shadow:0 18px 70px #000b,inset 0 0 34px #8e5f2c2b;color:#3b2b20;clip-path:polygon(.6% 0,16% .5%,32% .2%,47% .65%,64% 0,81% .4%,99% 0,99.6% 12%,99.2% 25%,100% 41%,99.4% 58%,100% 74%,99.3% 90%,99.7% 99.3%,83% 100%,66% 99.5%,49% 100%,31% 99.4%,13% 100%,.4% 99.5%,0 82%,.7% 64%,.2% 47%,.6% 28%)}
.letter:before{inset:12px;border:1px solid #795b3025;box-shadow:inset 0 0 30px #9d713324}
.letter-heading{text-align:center;margin:0 0 15px;color:#49351f}
.letter-crest{display:block;width:37px;height:44px;margin:0 auto 4px;border:2px double #6a573d;clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);font:29px/40px Georgia,serif;color:#514632}
.school-name{display:block;font:46px/1.1 WizardScript,"Palatino Linotype",Georgia,serif;letter-spacing:.015em}
.school-sub{display:block;margin-top:4px;font:8px/1.4 Georgia,serif;letter-spacing:.09em}
.letter .kicker{text-align:center;font-family:WizardHand,"KaiTi",serif;font-size:13px;line-height:1.7;letter-spacing:.12em;color:#6e5431}
.letter h2{font-family:WizardHand,"STKaiti","KaiTi",serif;font-size:29px;line-height:1.5;font-weight:400;color:#33261b;margin:19px 0 15px;letter-spacing:.06em}
.letter .letter-body{max-width:100%;font-family:WizardHand,"STKaiti","KaiTi",serif;font-size:17px;text-shadow:0 .15px #3b2b2040}
.letter .letter-body p{font:inherit;line-height:1.85;margin:0 0 12px}
.letter .sign{font-family:WizardHand,"STKaiti","KaiTi",serif;font-size:16px;line-height:1.8;color:#4c5a38;margin:20px 0}
.letter .primary{font-family:WizardHand,"STKaiti","KaiTi",serif;min-height:48px;padding:11px 15px;background:linear-gradient(130deg,#354538,#1c3026);border:1px solid #a08850;color:#eee0b8;font-size:20px;font-weight:400;letter-spacing:.18em;box-shadow:0 3px 10px #49371f33}
@media(max-width:760px){
 .backdrop,.hero-open .backdrop{background-image:linear-gradient(#080e1400 30%,#080e1410 48%,#080e14e8 94%),url('assets/hogwarts-letter.webp');background-size:100% 100%,cover;background-position:center,center top;background-repeat:no-repeat;filter:none}
 .hero-panel .lede{font-size:13px}
 .letter{padding:25px 44px 25px 27px}
 .school-name{font-size:43px}
 .letter h2{font-size:27px}
 .letter .letter-body{font-size:16px}
 .letter .sign{font-size:15px;margin-top:18px}
}
@media(max-width:360px){.letter{padding:23px 35px 23px 23px}.letter .letter-body{font-size:15px}.letter h2{font-size:25px}}
/* Cool, light ash parchment on both the letter and browser guide. Only the
   artwork layer is desaturated; text and controls keep clear contrast. */
.letter,.guide{position:relative;isolation:isolate;background:#c6c7be;color:#30332e;border:none;box-shadow:0 16px 60px #0008}
.letter:after,.guide:after{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/parchment-quill.webp') center/100% 100% no-repeat;filter:grayscale(.96) brightness(.98);opacity:.92;pointer-events:none}
.letter h2,.letter .kicker,.letter-heading{color:#353b34}
.letter .letter-body{color:#313731}.letter .sign{color:#465345}
.guide{padding:29px 58px 28px 31px;border-radius:2px;clip-path:polygon(.3% 0,30% .4%,62% 0,99.5% .3%,100% 27%,99.5% 64%,100% 99.5%,65% 100%,33% 99.4%,0 100%,.6% 65%,0 28%)}
.guide .kicker,.guide .retained{color:#525b4e}.guide h2{font-family:WizardHand,"KaiTi",serif;font-weight:400;font-size:29px;color:#30382f;line-height:1.45}.guide p,.guide ol{color:#363e37}.guide ol{font-size:13px;line-height:2.25}.guide .notice{color:#565f55}.guide .primary,.letter .primary{background:linear-gradient(130deg,#444e44,#29382e);border-color:#5d6855;color:#eee8d6}.guide .secondary{border-color:#54614f70;background:#f7f5eb25;color:#35402f;font-size:13px}.guide .copy-url{border-color:#5d685560;background:#faf9f240;color:#29362c}.scene-title,.choice-header h2,.ending h2{font-family:WizardHand,"KaiTi",serif;font-weight:400}
.film.result-film video{animation:arrive .25s ease both}.film.result-film .scene-location{font-size:10px}.branch-label{display:block;font:10px/1.7 system-ui,sans-serif;color:#9cafa8;letter-spacing:.1em;margin-top:9px}
.film.fx-patronus:before,.film.fx-shield:before,.film.fx-smoke:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.film.fx-patronus:before{background:radial-gradient(ellipse at 35% 75%,#e0f6ff78,transparent 68%);box-shadow:inset 0 0 30px #d7efff80}
.film.fx-shield:before{background:radial-gradient(ellipse at center,transparent 30%,#aec5d938 65%,#9bb8c680 80%,transparent 88%)}
.film.fx-smoke:before{background:linear-gradient(20deg,#9fa9aa70,transparent 65%);backdrop-filter:blur(.6px)}
@media(max-width:760px){.guide{padding:26px 42px 25px 25px}.guide h2{font-size:27px}}
.panel-choices{animation:none}
.film-play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);background:#101820e8;color:#e8dfcc;border:1px solid #c5a46a;padding:12px 20px;min-height:44px;font-size:14px}
.brand-title{max-width:230px;line-height:1.4;letter-spacing:.04em}
@media(max-width:460px){.brand-title{max-width:155px;font-size:12px;letter-spacing:0}.brand small{font-size:7px}.top-actions button{white-space:nowrap}}
.panel-choices .scene-title{font-size:23px;margin:13px 0 8px}
.panel-choices .scene-copy{font-size:13px;line-height:1.7;margin:0 0 12px}
.panel-choices .choice-header{margin-top:8px}
.panel-choices .inventory{margin:9px 0 0}
@media(max-width:760px){.panel-choices .film{max-height:22svh;min-height:110px}.panel-choices .scene-title{font-size:22px}.panel-choices .option{padding:11px 12px;min-height:44px}}