/* Keep the existing copyable mint sticker, in the inscription's position. */
.glow-contract{left:32.5%;top:13.1%;width:43%;transform:rotate(-1.3deg)}
.lights-off .monitor-message{opacity:0;visibility:hidden}
/* Wide room artwork fills desktop gutters while keeping the playable CRT large. */
@media(min-width:1441px){
 .play-section{max-width:none;width:100%}
 .room-scene{width:max(100%,2432px);left:50%;transform:translateX(-50%);aspect-ratio:1772/888}
 .room-day{background-image:url('assets/room-wide-day.webp')}
 .room-night{background-image:url('assets/room-wide-night.webp')}
 .scene-screen{left:39.4%;top:27.2%;width:25.25%;height:37.1%;border-radius:7% / 6%}
 .monitor-message{left:35%;top:22.1%;width:33.2%;font-size:clamp(20px,1.7vw,30px);transform:rotate(-.6deg)}
 .glow-contract{left:35%;top:22.1%;width:33.2%;transform:rotate(-.6deg)}
 .lamp-hotspot{left:21%;top:4%;width:12.2%;height:24%}
 .guide-sticker{left:45%;top:66.4%;width:150px}
}
@media(max-width:700px){
 .monitor-message{top:15.5%}
 .glow-contract{top:15.1%;min-height:32px}
 .contract-copy-hint{top:calc(50% + 10px)}
}
@media(max-width:700px){.lamp-hotspot{width:17%}}

/* Related reading under the story. */
.story-source-links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 28px}
.story-source-links .story-source{max-width:100%;margin-top:0}
/* Raise the contract label and its copy hint together. */
.glow-contract{translate:0 -20px}
@media(max-width:700px){.monitor-message{translate:0 -20px}}
/* Restore the original desktop CRT size and its height below the header. */
@media(min-width:1441px){
 .room-scene{width:max(100%,2407px);aspect-ratio:2407/1224;top:-105px;margin-bottom:-105px}
}
/* Continue the wide room's edges through the story and timeline. */
@media(min-width:1441px){
 .story-section{max-width:none;width:100%;padding-inline:clamp(24px,2.5vw,64px);column-gap:6%;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 .story-copy{width:100%;max-width:78ch;justify-self:end}
 .story-gallery{max-width:clamp(430px,26vw,600px)}
 .story-timeline p{max-width:38ch}
 footer{max-width:none;padding-inline:clamp(24px,2.5vw,64px)}
}


.story-video-dialog{width:min(960px,calc(100vw - 32px),calc((100dvh - 96px)*4/3));max-height:calc(100dvh - 32px);margin:auto;padding:44px 0 0;border:1px solid #5a5852;border-radius:6px;background:#000;overflow:hidden}
.story-video-dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}
.story-video-dialog video{display:block;width:100%;aspect-ratio:4/3;background:#000}
.story-video-close{position:absolute;right:4px;top:0;width:44px;height:44px;background:none;border:0;font:28px Arial;color:#e3dac6}

.story-gallery{grid-template-columns:1fr 1fr}
.story-video-preview{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:1px solid #baa98c60;border-radius:3px;overflow:hidden;background:#141510}
.story-video-preview img{width:100%;height:100%;object-fit:cover;object-position:35% center;transition:filter .2s}
.story-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;padding-left:3px;border-radius:50%;border:1px solid #d8c9a8;background:#090b0bd9;color:#e8dbc0;font:22px Arial;box-shadow:0 3px 20px #0006}
.story-video-preview:hover img{filter:brightness(.8)}
@media(max-width:350px){.story-gallery{grid-template-columns:1fr}.story-gallery .video-figure{max-width:250px}}
/* A quiet archival treatment for the video thumbnail. */
.story-video-preview{padding:9px;background:#151612;border-color:#77705b;border-radius:2px}
.story-video-preview img{filter:grayscale(1) sepia(.35) brightness(.6) contrast(1.08);border-radius:1px}
.story-video-preview:after{content:"Alice";position:absolute;left:10px;right:10px;bottom:10px;padding:12px 4px 7px;background:linear-gradient(transparent,#090b0beb);color:#d2c6aa;font:9px/1.4 var(--mono);letter-spacing:1.8px;text-align:center;pointer-events:none}
.story-video-play{width:46px;height:46px;font-size:18px;background:#10120edb;border-color:#c6b892;color:#e3d5b5;box-shadow:0 2px 16px #0005}
.story-video-preview:hover img{filter:grayscale(1) sepia(.35) brightness(.75) contrast(1.08)}
/* Align the story text with the gallery and bring both toward the centre. */
@media(min-width:1441px){
 .story-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,88px);row-gap:28px;align-items:start}
 .story-object{display:contents}
 .story-heading{grid-column:1;grid-row:1;width:100%;max-width:600px;justify-self:end}
 .story-gallery{grid-column:1;grid-row:2;width:100%;max-width:600px;justify-self:end;margin-top:0}
 .story-copy{grid-column:2;grid-row:2;width:100%;max-width:720px;justify-self:start;padding-top:0}
 .story-timeline{grid-column:1/-1;grid-row:3;margin-top:32px}
}

@media(min-width:701px) and (max-width:1440px){
 .story-object{display:contents}
 .story-heading{grid-column:1;grid-row:1;min-width:0}
 .story-gallery{grid-column:1;grid-row:2;margin-top:0;width:100%}
 .story-copy{grid-column:2;grid-row:2;padding-top:0;min-width:0}
 .story-timeline{grid-column:1/-1;grid-row:3}
 .story-section{row-gap:28px}
}
.story-video-preview{aspect-ratio:481/500}
/* Follow the photographed CRT glass instead of adding a second rectangular rim. */
.scene-screen{left:32.85%;top:18.9%;width:42.55%;height:40.8%;border:0;border-radius:0;box-shadow:none;clip-path:url(#crt-screen-clip)}
@media(min-width:1441px){.scene-screen{left:39.25%;top:26.55%;width:25.3%;height:37.9%;border-radius:0}}
/* Keep Macintosh menus and controls inside the curved glass corners. */
.scene-screen iframe{position:absolute;left:1.8%;top:2.5%;width:96.4%;height:95%}
/* Open-book frame, without page numbers. */
.story-section{position:relative;border-top:0}
.story-book-frame{position:absolute;inset:0;pointer-events:none;color:#a29373;opacity:.52}
.story-book-border{position:absolute;inset:12px 0;width:100%;height:calc(100% - 24px);stroke-width:1}
.story-book-piece{position:absolute;bottom:calc((100% - 24px)*.06 - 25px);width:25px;height:29px;opacity:.85}
.story-book-bishop{left:4.2%}.story-book-rook{right:4.2%}
@media(min-width:701px){.story-section{padding:88px clamp(44px,4.5vw,96px) 114px}}
@media(max-width:700px){
 .story-section{padding-top:48px;padding-bottom:66px}
 .story-book-border{display:none}
 .story-book-frame{inset:16px 10px;border:1px solid #a2937366;border-radius:3px}
 .story-book-piece{bottom:-27px;width:16px;height:19px}
}
/* Give the two book pages a little more breathing room on wide displays. */
@media(min-width:1800px){
 .story-section{--story-page-offset:clamp(48px,calc((100vw - 1800px)*.12 + 48px),128px)}
 .story-heading,.story-gallery{position:relative;left:calc(-1 * var(--story-page-offset))}
 .story-copy{position:relative;left:var(--story-page-offset)}
}
/* Navigation beside Alice; public rewards occupy the centre header track. */
.site-header .header-global-group .brand small{font-size:10px;letter-spacing:.1px;line-height:1.4;max-width:none;white-space:nowrap;text-wrap:nowrap}
@media(min-width:1200px){.site-header:has(.player-summary) .player-summary{width:calc(var(--metrics-width) - 40px);gap:12px}}
@media(min-width:1200px){
 .site-header:has(.player-summary) #public-rewards-header{grid-column:2;grid-row:1;justify-self:center}
 .site-header:has(.player-summary) .header-global-group{gap:clamp(20px,2vw,40px)}
 .site-header:has(.player-summary) .header-global-group nav{flex:none}
 .site-header:has(.player-summary) #public-rewards-header .header-payouts dl>div:first-child{width:var(--metric-total);flex-basis:var(--metric-total)}
 .site-header:has(.player-summary) #public-rewards-header .header-payouts dl>div:nth-child(2){width:var(--metric-ready);flex-basis:var(--metric-ready)}
 .site-header:has(.player-summary) #public-rewards-header .header-payout-actions{width:var(--metric-actions);flex-basis:var(--metric-actions)}
}
@media(min-width:701px) and (max-width:1199px){
 .site-header:has(.player-summary) .header-global-group{display:contents}
 .site-header .header-global-group .brand{grid-column:1;grid-row:1}
 .site-header:has(.player-summary) .header-global-group nav{grid-column:2;grid-row:1;justify-self:end}
 .site-header:has(.player-summary) #public-rewards-header{grid-column:1/-1;grid-row:2;justify-self:center}
 .site-header:has(.player-summary) #rewards-root{grid-column:1/-1;grid-row:3;justify-self:end}
}