@font-face{font-family:'BC Ornament Display';src:url('fonts/bc-display.woff2') format('woff2');font-style:normal;font-weight:400;font-display:block}
@font-face{font-family:'BC Literary Narrative';src:url('fonts/bc-narrative.woff2') format('woff2');font-style:normal;font-weight:400;font-display:block}
body{font-family:'BC Literary Narrative','Noto Serif SC',serif}
.cinema-op{background:#f4eee3}
.op-architecture{inset:9px;background-image:url('assets/art/window-ornate.svg');background-size:100% 100%;opacity:1}
.cinema-op:before{content:'';position:absolute;inset:0;background:url('assets/art/damask.svg') center/340px auto;opacity:.035;pointer-events:none}
.op-envelope:before,.op-envelope:after{content:'';position:absolute;left:7%;width:86%;height:86px;background:url('assets/art/crest.svg') center/contain no-repeat;pointer-events:none;transition:opacity .4s}
.op-envelope:before{top:-120px}.op-envelope:after{top:285px;transform:rotate(180deg);opacity:.75}
.unsealed .op-envelope:before,.unsealed .op-envelope:after{opacity:0}
.envelope-back{background:#f4e7d2 url('assets/art/damask.svg') center/220px auto;border:1px solid #b08b57;box-shadow:inset 0 0 0 6px #f9eedb,inset 0 0 0 7px #bc995e,0 20px 28px #55352224}
.envelope-back:before{content:'';position:absolute;inset:0;background:url('assets/art/envelope-border.svg') center/100% 100%;pointer-events:none}
.envelope-front{background:linear-gradient(148deg,transparent 49.5%,#ae8d5c55 49.8%,transparent 50.4%),linear-gradient(32deg,#ead6b7 49.5%,#b99a6b99 50%,#fcf1dc 50.6%);border-color:#b08b57}
.envelope-front:before{content:'';position:absolute;inset:0;background:url('assets/art/envelope-border.svg') center/100% 100%;pointer-events:none}
.envelope-front:after{content:'BROTHERS CONFLICT';position:absolute;bottom:29px;width:100%;text-align:center;font:12px 'Cormorant Garamond',serif;letter-spacing:.16em;color:#9c7746}
.envelope-flap{background:#f8ecd5 url('assets/art/damask.svg') center/170px auto;border-color:#bb965a}
.wax{width:86px;height:86px;left:calc(50% - 43px);top:66px;filter:drop-shadow(1px 5px 2px #3c172e66)}
.wax svg{width:86px;height:86px}
.seal-hint{color:#8c693d;font-family:'Cormorant Garamond',serif;letter-spacing:.14em}
.op-letter{padding:25px 22px;background:repeating-linear-gradient(4deg,#fff5e4 0 2px,#fbf0de 2px 4px);border-color:#ad8752;box-shadow:0 15px 26px #4e2b2526,inset 0 0 0 4px #fffaed}
.op-letter:before{inset:2px;border:0;background:url('assets/art/letter-border.svg') center/100% 100%;z-index:0}
.op-letter>*{position:relative;z-index:1}
.op-letter>.eyebrow{display:block;text-align:center;font:22px 'Cormorant Garamond',serif;letter-spacing:.22em;color:#80582c;margin:0 0 16px}
.op-letter>.eyebrow:before{content:'';display:block;width:145px;height:43px;margin:-7px auto 8px;background:url('assets/art/crest.svg') center/contain no-repeat}
.op-letter p{font-family:'BC Literary Narrative','Noto Serif SC',serif;font-size:17px;line-height:1.85;letter-spacing:.035em;color:#452934;margin:10px 0}
.op-continue{width:190px;height:48px;min-height:48px;border:0;padding:0;margin:20px auto 0;color:#755027;background:url('assets/art/button.svg') center/100% 100% no-repeat;font:15px 'Cormorant Garamond',serif;letter-spacing:.15em}
.op-continue:active{transform:translateY(1px);background-color:transparent}
.cast-world{background:var(--field);--field:#f0e3ca;--ink:#704d2c;--photo-shade:#a6814c}
.cast-1{--field:#482331;--ink:#f0d3a1;--photo-shade:#e1bf82}
.cast-2{--field:#9faebf;--ink:#f9f5e9;--photo-shade:#f5f4ef}
.cast-3{--field:#3c253e;--ink:#edc0b0;--photo-shade:#bd9388}
.cast-4{--field:#dce8ed;--ink:#536679;--photo-shade:#fff6e5}
.cast-depth-back{background:url('assets/art/damask.svg') center/250px auto;opacity:.075;inset:0;animation:back-pan var(--shot-duration,5.573s) cubic-bezier(.22,.61,.36,1) both}
.cast-tracery{inset:1.7% 2%;background:none;opacity:1;z-index:5;pointer-events:none}
.art-corner{position:absolute;width:42%;height:auto;max-width:240px;opacity:.95;pointer-events:none}
.art-tl{top:0;left:0}.art-tr{top:0;right:0;transform:scaleX(-1)}.art-bl{bottom:0;left:0;transform:scaleY(-1)}.art-br{bottom:0;right:0;transform:scale(-1)}
.art-cast-crest,.art-cast-footer{position:absolute;left:15%;width:70%;height:12%;object-fit:contain;pointer-events:none;z-index:2}
.art-cast-crest{top:2%}.art-cast-footer{bottom:1%;transform:rotate(180deg);opacity:.9}
.cast-rose{background:url('assets/art/garland-0.svg') center/contain no-repeat;left:-7%;right:auto;top:28%;bottom:auto;width:44%;height:50%;opacity:.55;z-index:1}
.cast-1 .cast-rose{background-image:url('assets/art/garland-1.svg');top:22%;left:auto;right:-9%;width:57%;opacity:.4;transform:scaleX(-1)}
.cast-2 .cast-rose{background:none;inset:10% 10% 20%;width:auto;height:auto;border:1px solid #dbe6ed;border-radius:48% 48% 0 0;opacity:.3;transform:rotate(-3deg)}
.cast-3 .cast-rose{background-image:url('assets/art/garland-3.svg');width:58%;height:57%;left:-10%;top:23%;opacity:.5;transform:rotate(-10deg)}
.cast-4 .cast-rose{background-image:url('assets/art/garland-4.svg');width:48%;left:55%;top:25%;opacity:.5;transform:scaleX(-1)}
.cast-halo{background:radial-gradient(ellipse at 50% 25%,#fff3,transparent 65%);mix-blend-mode:soft-light}
.cast-light{opacity:.32}.cast-foreground{opacity:.22}
.cast-path{display:none}
.cast-portrait{z-index:3;top:18%;bottom:24%;left:7%;right:7%;mask-image:linear-gradient(#000 76%,transparent 100%);-webkit-mask-image:linear-gradient(#000 76%,transparent 100%)}
.cast-portrait img{filter:drop-shadow(0 9px 12px #29172222)}
.cast-name{left:13%;right:13%;bottom:13%;padding:0;border:0;z-index:8;max-width:76%;color:var(--ink);text-shadow:0 1px 2px var(--field)}
.cast-name h2{font-family:'BC Ornament Display','Noto Serif SC',serif;font-size:clamp(31px,8.5vw,46px);font-weight:400;line-height:1.35;letter-spacing:.12em;margin:7px 0 9px}
.cast-name span{font:17px/1.5 'Cormorant Garamond',serif;letter-spacing:.13em;white-space:nowrap}
.cast-name small{font:18px/1.3 'Cormorant Garamond',serif;letter-spacing:.13em;display:block}
.cast-name:after{content:'';position:absolute;left:-4%;bottom:-27px;width:108%;height:28px;background:url('assets/art/crest.svg') center/contain no-repeat;opacity:.8}
.cast-1 .cast-name{text-align:right;left:13%;right:13%;bottom:13%;background:linear-gradient(to left,#482331cc,transparent)}
.cast-2 .cast-name{left:14%;right:12%;bottom:14%;border:0;padding:0}
.cast-3 .cast-name{left:13%;right:13%;bottom:12%;transform:rotate(-2deg)}
.cast-4 .cast-name{left:13%;right:13%;bottom:13%;text-align:right}
.cast-1 .cast-gate{background:#482331 url('assets/art/damask.svg') center/240px auto}
.cast-3 .cast-gate{background:#4a2b42 url('assets/art/letter-border.svg') center/75% 90% no-repeat;border-color:#c49585}
.cast-2 .cast-foreground{background:linear-gradient(135deg,#fff2,transparent 45%);border-color:#f0f5f755}
.op-finale{background:#f4eee3 url('assets/art/damask.svg') center/300px auto;background-blend-mode:screen}
.op-finale:before{content:'';position:absolute;inset:9px;background:url('assets/art/window-ornate.svg') center/100% 100% no-repeat;pointer-events:none}
.op-finale>img,.tap-start{position:relative;z-index:1}
.tap-start{color:#77502e;font-size:16px;letter-spacing:.2em;background:url('assets/art/button.svg') center/100% 100% no-repeat;min-width:205px;height:50px}
.firstday-speaker,.relationship-profile h2{font-family:'BC Ornament Display','Noto Serif SC',serif}
.firstday-text{font-family:'BC Literary Narrative','Noto Serif SC',serif}
@media(max-height:700px){.op-letter{padding:17px 16px}.op-letter>.eyebrow{font-size:21px;margin-bottom:12px}.op-letter>.eyebrow:before{height:33px;margin-top:-4px;margin-bottom:6px}.op-letter p{font-size:16px;line-height:1.75;margin:9px 0}.op-continue{margin-top:16px;width:178px;height:46px}.cast-name h2{font-size:30px}.cast-name span{font-size:15px}.cast-name small{font-size:16px}.cast-name{bottom:12%}.cast-2 .cast-name{bottom:12%}.art-cast-footer{height:10%}}
@media(min-width:750px){.cast-tracery{left:20%;right:20%}.art-cast-crest,.art-cast-footer{left:30%;width:40%}.cast-rose{left:15%;width:28%}.cast-1 .cast-rose{right:15%;width:32%}.cast-3 .cast-rose{left:14%;width:32%}.cast-4 .cast-rose{left:60%;width:28%}.cast-name{left:31%!important;right:27%!important;max-width:42%}.op-finale:before{inset:12px 20%}}
.art-lancet{position:absolute;inset:3% 6% 8%;width:88%;height:89%;object-fit:fill;opacity:.7;pointer-events:none}
.art-corner{filter:drop-shadow(0 1px 0 #ffffff44) drop-shadow(0 -1px 0 #30152922)}
.art-bl,.art-br{width:30%;max-width:180px}
.cast-name,.cast-1 .cast-name,.cast-4 .cast-name{bottom:17%}
.cast-2 .cast-name{bottom:18%}.cast-3 .cast-name{bottom:16%}
.cast-2 .cast-tracery{inset:1.7% 2%;border:0;transform:none;animation:arch-depth var(--shot-duration,5.573s) cubic-bezier(.22,.61,.36,1) both}
.cast-2 .cast-rose{border:0;transform:none}
@media(max-height:700px){.cast-name,.cast-1 .cast-name,.cast-2 .cast-name,.cast-3 .cast-name,.cast-4 .cast-name{bottom:18%}.art-bl,.art-br{width:29%}}
/* Ornament timing follows each portrait's own reveal; no background scenery. */
.art-cast-crest{animation:crest-unveil 1.8s .25s cubic-bezier(.22,.61,.36,1) both}
.art-cast-footer{animation:crest-unveil 1.7s 1.25s cubic-bezier(.22,.61,.36,1) both}
.cast-0 .art-lancet{animation:arch-inscribe 2.4s .1s cubic-bezier(.45,0,.25,1) both}
.cast-1 .art-tl,.cast-1 .art-tr{animation:heraldic-light 2s .2s both}
.cast-2 .art-lancet{animation:silver-focus 3.8s cubic-bezier(.22,.61,.36,1) both}
.cast-3 .art-lancet{animation:card-engrave 2.1s .25s cubic-bezier(.22,.61,.36,1) both}
.cast-4 .art-lancet{animation:arch-inscribe 1.9s .1s both}
@keyframes crest-unveil{from{clip-path:inset(0 50%);opacity:.15}to{clip-path:inset(0);opacity:1}}
@keyframes arch-inscribe{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes heraldic-light{from{opacity:.15;filter:brightness(1.5)}to{opacity:1;filter:brightness(1)}}
@keyframes silver-focus{from{opacity:.1;translate:0 10px}to{opacity:.7;translate:0 0}}
@keyframes card-engrave{from{clip-path:polygon(50% 0,50% 0,50% 100%,50% 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@media(prefers-reduced-motion:reduce){.art-cast-crest,.art-cast-footer,.art-lancet,.art-corner{animation-duration:.2s!important;animation-delay:0s!important}}
/* Readable names settle before the sustained portrait composition. */
.cast-name span{animation:name-rule 1.2s .85s cubic-bezier(.22,.61,.36,1) both}