/* Edit these colours and the text in index.html. No build step is needed. */
:root{color-scheme:dark;--background:#050505;--text:#c7c1b5;--heading:#e4d9c2;--gold:#c5a163;--body-width:650px}
*{box-sizing:border-box}
html{background:var(--background);text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(ellipse at 50% 48%,#15130f44,transparent 60%),var(--background);color:var(--text);font-family:Georgia,'Times New Roman',serif;text-align:center;-webkit-font-smoothing:antialiased}
/* Artwork and scenery fill the viewport; only the copy has a reading-width cap.
   Keep the image's intrinsic 16:9 ratio so the crest and lettering never stretch. */
.identity{position:relative;z-index:1;width:100%;margin:0;pointer-events:none}
.studio-art{display:block;width:100%;height:auto;mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
/* Overlap the two floors; crop the generated image's empty black top.
   The shared width aligns their perspective, while the overlay mutes highlights. */
.floor-scene{--floor-overlap:clamp(35px,8vw,200px);display:flow-root;position:relative;isolation:isolate;width:100%;margin:calc(-1 * var(--floor-overlap)) 0 0;padding-top:var(--floor-overlap)}
.floor-scene::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:linear-gradient(to bottom,transparent 85%,#050505 100%),linear-gradient(to right,#050505e8 0%,#050505c9 20%,#050505db 40%,#050505db 60%,#050505c9 80%,#050505e8 100%),url('assets/cracked-floor.png');background-size:100% 100%,100% 100%,100% calc(100% + 160px);background-position:center top,center top,center -160px;background-repeat:no-repeat}
/* Molten veins emerge only at the foot of the page, beneath the text. */
.floor-scene{padding-bottom:90px}
.floor-scene::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:url('assets/molten-floor.png') center -160px / 100% calc(100% + 160px) no-repeat;opacity:.42;mix-blend-mode:screen;mask-image:linear-gradient(to bottom,transparent 72%,#000 94%);-webkit-mask-image:linear-gradient(to bottom,transparent 72%,#000 94%)}
main{position:relative;width:min(var(--body-width),calc(100% - 48px));margin:0 auto}
section{margin:0}
.vertical-rule{display:block;height:38px;width:1px;margin:0 auto 29px;background:linear-gradient(transparent,var(--gold) 18%,var(--gold) 82%,transparent)}
h1,h2{color:var(--heading);font-size:24px;line-height:1.5;font-weight:400;letter-spacing:.22em;text-transform:uppercase;text-wrap:balance;margin:0 -12px;padding-left:.22em}
.gold-rule{display:block;width:54px;height:1px;margin:19px auto 22px;background:var(--gold)}
p{font-size:17px;line-height:1.65;letter-spacing:.045em;margin:0 auto 20px;text-wrap:pretty}
.introduction p:first-of-type{max-width:590px}
.introduction p:last-child{margin-top:25px;margin-bottom:0}
.teaser{margin-top:32px}
.teaser .vertical-rule{height:30px;margin-bottom:26px}
.teaser p{max-width:640px}
.teaser p+p{margin-top:24px}
.consequence{padding-top:3px}
.consequence strong{font-size:19px;font-weight:400;color:#deb675;line-height:1.7}
.closing{margin-top:28px}
.closing .vertical-rule{height:31px;margin-bottom:28px}
.closing p{font-style:italic;font-size:16px;margin-bottom:0}
footer{max-width:610px;width:calc(100% - 72px);margin:48px auto 0;border-top:1px solid #a38d604d;padding:22px 0 32px}
footer p{font-size:9px;letter-spacing:.28em;line-height:1.9;text-transform:uppercase;margin:0;color:#c5baa4}
@media(max-width:700px){.identity{width:100%;margin-top:16px}main{width:calc(100% - 44px);margin:10px auto 0}.vertical-rule{height:28px;margin-bottom:24px}h1,h2{font-size:clamp(18px,4.3vw,24px);letter-spacing:.16em;margin:0;padding-left:.16em}.gold-rule{width:44px;margin:17px auto 21px}p{font-size:16px;line-height:1.75;letter-spacing:.025em}.teaser{margin-top:30px}.teaser p+p{margin-top:22px}.consequence strong{font-size:17px}.closing p{font-size:15px}footer{margin-top:36px;padding-bottom:25px}footer p{font-size:8px;letter-spacing:.19em}}
@media(max-width:360px){main{width:calc(100% - 36px)}h1,h2{font-size:17px}p{font-size:15px}}
@media print{body{background:#fff;color:#222}.identity{max-width:500px}h1,h2{color:#222}.consequence strong,footer p{color:#544025}}