@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');
:root{--ink:#132e26;--paper:#f4f0e5;--gold:#9a733d;--line:#d5cbb6;--soft:#e7e1d4;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'DM Sans',Arial,sans-serif}a{color:inherit;text-underline-offset:5px}a:hover{color:#8c5b25}button,summary,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #c1713b;outline-offset:5px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 4vw;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font:32px Georgia,serif;text-decoration:none}.brand span{font:600 11px/1.5 'DM Sans',Arial;letter-spacing:2px}.brand small{display:block;font-size:8px;letter-spacing:1.6px;font-weight:400}header nav{display:flex;gap:24px;font-size:13px}.page-shell{display:grid;grid-template-columns:190px minmax(0,1fr);max-width:1580px;margin:auto;gap:3vw;padding:42px 4vw}main{min-width:0;max-width:1180px}.elevator{align-self:start;position:sticky;top:24px;border-top:2px solid var(--gold);padding-top:13px;font-size:12px}.elevator summary{font-size:13px;cursor:pointer}.elevator summary span{float:right}.elevator nav{display:grid;gap:5px;padding-top:14px}.elevator a{display:flex;gap:10px;align-items:baseline;text-decoration:none;padding:8px 5px;border-bottom:1px solid var(--line)}.elevator b{font:16px Georgia;width:24px;flex-shrink:0;color:var(--gold)}.elevator [aria-current]{background:#e8dfce}.kicker{text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:600;color:#785c36;margin:0 0 18px}h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.06;margin:0 0 22px}h1{font-size:clamp(44px,5vw,79px);letter-spacing:-2px}h2{font-size:clamp(34px,3.6vw,52px);letter-spacing:-1px}h3{font-size:27px;margin:10px 0}em{font-weight:400}p{max-width:750px}.lead{font-size:19px;line-height:1.5}.fine,figcaption,.credits{font-size:12px;color:#5c665f}.hero{display:grid;grid-template-columns:.78fr 1.22fr;gap:3vw;align-items:center;padding:20px 0 60px}.hero figure{margin:0;min-width:0}.hero img{width:100%;height:auto;display:block;border:8px solid #e1d3b6;box-shadow:0 15px 35px #10251f18}.hero figcaption{padding-top:9px}section{margin-bottom:70px}.actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:28px 0}.button{display:inline-block;background:var(--ink);color:#fff;padding:12px 21px;text-decoration:none;font-size:13px}.button:hover{background:#315543;color:white}.text-link{font-size:13px}.family-tree{margin:30px 0 20px}.root-seat{max-width:180px;margin:auto}.root-seat .portrait{height:185px}.tree-branch{height:36px;width:1px;background:var(--gold);margin:auto}.keeper-grid{border-top:1px solid var(--gold);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 16px;padding-top:26px}.keeper-card{display:block;position:relative;text-decoration:none;min-width:0}.keeper-card:before{content:'';position:absolute;width:1px;height:26px;top:-26px;left:50%;background:var(--line)}.keeper-card strong{display:block;font:20px/1.2 Georgia;margin:9px 0 4px}.keeper-card small{display:block;font-size:10px;line-height:1.5;min-height:30px}.portrait{height:160px;background-image:url('/room-of-selfies/art/anime-after-rain-r2.webp');background-size:600% auto;background-position:var(--px) var(--py);background-repeat:no-repeat;border:4px solid #e1d3b6;box-shadow:0 7px 16px #132e2610}.seat{position:absolute;top:8px;left:8px;background:#10251fe8;color:#f4eddc;font:16px Georgia;padding:1px 7px}.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}.album{display:block;text-decoration:none}.album img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#14241f;display:block;border:6px solid #e1d3b6;margin-bottom:15px}.album .kicker{font-size:9px}.enter{font-size:12px;border-bottom:1px solid var(--gold)}.full-art{margin:30px 0 25px}.art-button{padding:0;border:0;width:100%;display:block;background:transparent;cursor:zoom-in}.full-art img{display:block;width:100%;height:auto;border:8px solid #e1d3b6}.comic-art{max-width:820px;margin-left:auto;margin-right:auto}.full-art figcaption{padding-top:12px;line-height:1.6}.full-art figcaption span{white-space:nowrap}.cast-key{border-top:1px solid var(--gold);border-bottom:1px solid var(--line);padding:22px 0 10px;margin:28px 0}.cast-key ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:9px 20px;margin:0 0 12px}.cast-key a{font-size:12px;text-decoration:none}.cast-key b{font:16px Georgia;color:var(--gold);margin-right:5px}.page-turn{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:30px 0 20px;margin-top:42px;font-size:12px}.keeper-hero{display:grid;grid-template-columns:260px minmax(0,1fr);gap:38px;align-items:start}.portrait-large{height:330px;background-size:550% auto}.keeper-hero h1{font-size:57px;margin:10px 0}.giant-seat{font:26px Georgia;color:var(--gold)}blockquote{font:italic 24px/1.5 Georgia;margin:25px 0;padding-left:22px;border-left:2px solid var(--gold)}.comic-transcript{border-left:2px solid var(--gold);padding-left:22px}.comic-transcript li{margin-bottom:12px}footer{border-top:1px solid var(--line);max-width:1320px;margin:30px auto 0;padding:25px 4vw 40px;font-size:11px;color:#5d665f}footer details{margin-top:22px;max-width:820px}footer summary{cursor:pointer}footer p{max-width:820px}.skip{position:fixed;top:-80px;left:20px;background:white;padding:14px;z-index:50}.skip:focus{top:10px}dialog{border:0;padding:50px 20px 20px;background:#111c18;color:white;max-width:96vw;max-height:96vh}dialog::backdrop{background:#06110de8}dialog img{display:block;max-width:90vw;max-height:82vh;width:auto;height:auto;object-fit:contain}.close-art{position:absolute;right:16px;top:10px;padding:8px 16px;background:#f4f0e5;border:0;cursor:pointer}body:has(dialog[open]){overflow:hidden}
@media(min-width:1700px){.portrait{height:200px}}@media(max-width:1100px){.keeper-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 10px}.portrait{height:130px;background-size:650% auto}.keeper-hero{grid-template-columns:200px minmax(0,1fr)}.portrait-large{height:280px}.hero{grid-template-columns:1fr}.hero h1 br{display:none}}@media(max-width:900px){.page-shell{display:block;padding:20px 5vw}.elevator{position:relative;top:0;margin-bottom:35px}.elevator nav{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:10px}header{padding:18px 5vw;align-items:flex-start}header nav{gap:12px;font-size:11px;flex-wrap:wrap;justify-content:flex-end;max-width:50%}.hero{gap:25px;padding-top:10px;padding-bottom:25px}.hero h1 br{display:block}.portrait{height:165px;background-size:600% auto}.keeper-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.keeper-hero h1{font-size:47px}}@media(max-width:600px){h1{font-size:49px}h2{font-size:36px}.brand{font-size:26px}.brand span{font-size:9px;letter-spacing:1px}.brand small{font-size:7px;letter-spacing:.6px}header nav{max-width:46%;gap:7px 12px}.keeper-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}.root-seat{max-width:165px}.portrait{height:185px;background-size:600% auto}.keeper-card strong{font-size:23px}.keeper-card small{font-size:11px}.keeper-grid .keeper-card:before{display:none}.album-grid{grid-template-columns:1fr;gap:30px}.hero{margin-bottom:40px}.lead{font-size:18px}.keeper-hero{grid-template-columns:1fr;gap:22px}.portrait-large{max-width:240px;height:290px}.keeper-hero h1{font-size:49px}.page-turn{flex-wrap:wrap;gap:20px}.page-turn a{max-width:44%;line-height:1.4}.full-art img{border-width:4px}.cast-key ol{gap:8px 15px}.cast-key a{font-size:11px}section{margin-bottom:50px}.elevator nav{font-size:11px}.art-button{touch-action:manipulation}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.portrait,.portrait-large{background-size:600% auto}

.milestone-69{max-width:920px;margin:40px auto 20px;padding:30px 20px;text-align:center;border-top:1px solid #9a733d;border-bottom:1px solid #9a733d;background:#10291f;color:#f4ead8}.milestone-69__label{font:11px/1.5 Arial,sans-serif;letter-spacing:1.8px;text-transform:uppercase;margin:0}.milestone-69 strong{display:block;font:96px/1.1 Georgia,serif;margin:8px 0}.milestone-69__caption{font:italic 24px/1.35 Georgia,serif;margin:10px auto}.milestone-69__note{font:12px/1.6 Arial,sans-serif;margin:18px auto 8px}.milestone-69 small{font:10px/1.5 Arial,sans-serif;color:#c9b987}footer .milestone-69 p{margin-left:auto;margin-right:auto}