:root{color-scheme:dark;--ink:#171b17;--paper:#f4ead3;--gold:#ba9e66}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,sans-serif;background-image:radial-gradient(#bda4660a 1px,transparent 1px);background-size:6px 6px}
a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid var(--paper);outline-offset:5px}
button{font:inherit;cursor:pointer}.skip{position:absolute;left:20px;top:-100px;padding:12px;background:var(--paper);color:var(--ink);z-index:10}.skip:focus{top:12px}
.site-header,main,footer{max-width:1320px;margin:auto;padding:25px 4vw}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #ffffff20}
.brand{font:bold 24px Impact,'Arial Narrow',sans-serif;letter-spacing:1px;white-space:nowrap}nav{display:flex;gap:24px;font-size:14px}nav a{padding:8px 0}nav a[aria-current],nav a:hover{color:var(--gold)}
.page-heading{display:flex;align-items:baseline;justify-content:space-between;margin:12px 0 36px;border-bottom:1px solid #ba9e6644;padding-bottom:26px}
h1{font:400 clamp(48px,7vw,90px)/1 Georgia,serif;letter-spacing:-4px;margin:0}h1 span{color:var(--gold)}.cast-label{font-size:12px;text-transform:uppercase;letter-spacing:3px;color:var(--gold)}
.characters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.character{--card:#526045;--accent:#d4d6a4;--type:#f7eedb;position:relative;min-width:0;height:510px;perspective:1400px;scroll-margin-top:24px;transition:transform .3s ease;isolation:isolate}
.featured{grid-column:span 2;--card:#c6ad73;--accent:#ffedb3;--type:#22281d}
.vivienne{--card:#773b3f;--accent:#eeab8e}.kendrick{--card:#554c45;--accent:#c7976c}.beatrice{--card:#344962;--accent:#a9c3d4}
.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.65,.25,1);box-shadow:0 14px 35px #0004;border-radius:12px}
.card-front,.card-back{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:var(--card);color:var(--type);border:1px solid #ffffff30}
.card-front{cursor:pointer;background-image:radial-gradient(ellipse at 65% 25%,#ffffff20,transparent 65%)}
.card-front::before{content:'';position:absolute;width:460px;height:460px;top:32px;left:20%;border:1px solid #ffffff22;border-radius:50%;background:radial-gradient(circle,#0c130a32 1px,transparent 1.5px);background-size:6px 6px;transform:rotate(-12deg);pointer-events:none}
.card-front::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0d130de8,transparent 53%);pointer-events:none}
.portrait{position:absolute;inset:36px -12px 0;overflow:hidden;filter:drop-shadow(0 4px 0 #0b130b55) drop-shadow(0 12px 18px #0004)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transform:scale(1.02);transform-origin:50% 30%;transition:transform .6s cubic-bezier(.2,.65,.25,1)}
.role{position:absolute;left:25px;right:20px;top:22px;z-index:2;font-size:10px;text-transform:uppercase;letter-spacing:1.3px;font-weight:700;line-height:1.4;color:var(--type)}
.identity{position:absolute;left:25px;right:20px;bottom:76px;z-index:2}
h2{font:400 clamp(31px,3.6vw,49px)/.98 Georgia,serif;letter-spacing:-1.4px;margin:0;color:var(--paper);text-shadow:0 2px 12px #0004}
.honorific{display:block;font:700 13px/1.3 Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;color:#e8d6b8}
.open-card{min-height:44px;position:absolute;bottom:24px;left:25px;right:25px;z-index:3;display:flex;justify-content:space-between;align-items:center;border:0;border-top:1px solid #f4ead350;padding:13px 0 0;background:none;color:var(--paper);font-size:13px;text-align:left}
.open-card span{font-size:23px;line-height:1;transition:transform .25s}
.featured .portrait{left:39%;right:-6%;top:35px;bottom:-50px}.featured .portrait img{object-fit:cover;object-position:left top}
.featured .role{font-size:11px;color:#313727}.featured .identity{top:95px;bottom:auto;width:55%}.featured h2{font-size:clamp(65px,8vw,108px);letter-spacing:-4px;line-height:.85;color:#20291b;text-shadow:none}
.featured .card-front::after{background:linear-gradient(0deg,#19201099,transparent 28%)}.featured .card-front::before{left:35%;top:-20px;width:600px;height:600px;border-color:#42452a3d}
.featured .open-card{right:auto;width:38%;color:#fff3d4;border-color:#fff3d480}
.card-back{transform:rotateY(180deg);background-image:radial-gradient(ellipse at top right,#ffffff14,transparent 65%);padding:74px 26px 28px;overflow:auto}
.card-back .role{right:55px}.card-back h3{font:400 36px/1.05 Georgia,serif;letter-spacing:-1px;margin:0 0 28px;text-wrap:balance}
.card-back p{font:400 17px/1.6 Georgia,serif;margin:0 0 18px}.close-card{position:absolute;right:15px;top:12px;min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;font:28px Arial,sans-serif}
.featured .card-back{padding:78px 38px 30px}.featured .card-back h3{font-size:48px}.featured .card-back p{max-width:42ch;font-size:22px}
dl{display:flex;gap:32px;flex-wrap:wrap;margin:34px 0 0;padding-top:24px;border-top:1px solid #27301d55}dt{font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}dd{font:22px Georgia,serif;margin:0}
.character.is-open .card-inner{transform:rotateY(180deg)}
@media(hover:hover){.character:not(.is-open):hover{transform:translateY(-7px) rotate(-.6deg)}.character:not(.is-open):hover .portrait img{transform:scale(1.07)}.character:hover .open-card span{transform:translate(3px,-3px)}}
footer{display:flex;justify-content:space-between;gap:24px;font-size:14px;color:var(--gold);margin-top:35px;margin-bottom:25px;border-top:1px solid #ffffff20}
@media(max-width:1000px){.characters{grid-template-columns:repeat(2,minmax(0,1fr))}.featured{grid-column:span 2}.character{height:500px}.featured h2{font-size:90px}h2{font-size:43px}}
@media(max-width:600px){.site-header{flex-wrap:wrap;gap:14px}.site-header nav{gap:22px}.page-heading{margin:10px 0 25px;padding-bottom:20px}h1{font-size:48px;letter-spacing:-2px}.cast-label{font-size:10px;letter-spacing:2px}.characters{grid-template-columns:1fr;gap:24px}.character,.featured{grid-column:auto;height:490px}.featured{height:500px}.featured .portrait{left:12%;right:-22%;top:175px;bottom:-95px;opacity:1}.featured .identity{top:63px;width:100%}.featured h2{font-size:69px;line-height:.88;letter-spacing:-3px}.featured .portrait img{object-position:center top}.featured .open-card{width:42%}.identity{bottom:78px}h2{font-size:46px}.featured .card-back{padding:72px 26px 25px}.featured .card-back h3{font-size:40px}.featured .card-back p{font-size:19px}dl{gap:20px;margin-top:26px}dd{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.character,.card-inner,.portrait img,.open-card span{transition:none}.character:hover{transform:none}}