/* A shallow mineral lintel integrates the animated mark into the room. */
.masthead{top:0;left:0;right:0;min-height:104px;padding:16px 40px;background:linear-gradient(110deg,#aaa99e,#c9c6ba 42%,#b7b5a9 73%,#a5a59a);border-bottom:1px solid #dad7c28a;box-shadow:0 16px 25px #0e100d30,inset 0 -3px 8px #32372d1c;isolation:isolate}
.masthead::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:url("assets/mineral-grain-source.jpg");background-size:650px;background-position:center;mix-blend-mode:multiply;pointer-events:none}
.identity,.identity span:first-child{color:#363b32;font-size:8px;letter-spacing:1.7px}
.logo-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:280px;height:77px;display:grid;place-items:center}
.logo-window img,.logo-window canvas{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.logo-window [hidden]{display:none!important}.logo-window img{mix-blend-mode:multiply}
.brand-source{position:fixed;width:1px;height:1px;left:-10px;top:0;opacity:.001;pointer-events:none}
.masthead .sound-icon,.masthead .volume-control summary svg{stroke:#343a30}.masthead .sound-toggle>span,.masthead .sound-toggle .audio-title{color:#343a30}
.scene-status{top:119px;text-shadow:0 1px 4px #141811}.scene-status.compatibility-note{font-size:8px;letter-spacing:.6px;color:#d3d2c7}
.selection-title-button{color:inherit;font:inherit;letter-spacing:inherit;text-align:left;border:0;padding:0;background:transparent;min-height:27px;cursor:pointer;display:flex;align-items:center;gap:14px}
.selection-title-icon{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1;color:#d0c9b8;transition:transform .2s}
.selection-title-button:hover .selection-title-icon{transform:translate(2px,-2px);color:#f1e8d4}.selection-title-button:focus-visible{outline:1px solid #f1e8d4;outline-offset:5px}
.story-dialog{margin:0 0 0 auto;padding:0;width:min(620px,100%);max-width:100%;height:100dvh;max-height:100dvh;border:0;border-left:1px solid #e0dbcd66;background:#c9c6bc;color:#20261e;box-shadow:-40px 0 100px #0b0f0b50;overflow:auto}
.story-dialog::backdrop{background:#10150e75;backdrop-filter:blur(7px)}
.story-inner{padding:31px 48px 44px;position:relative;min-height:100%;isolation:isolate}
.story-inner::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.05;background:url("assets/mineral-grain-source.jpg") center/650px;mix-blend-mode:multiply}
.story-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:65px}.story-top .eyebrow{color:#62665b;font-size:10px;letter-spacing:1.3px}.story-close{color:#272c24;border:1px solid #777d6d55;background:none;border-radius:50%;height:44px;width:44px;font-size:26px;line-height:1;font-weight:300;display:grid;place-items:center}
.story-inner .story-index{font-size:10px;letter-spacing:1.6px;color:#6a6e62;margin:0 0 35px}.story-inner h2{font-size:48px;letter-spacing:-2.4px;font-weight:400;line-height:1.08;margin:0 0 37px;color:#20261e}
.story-inner p{color:#5a6054;font-size:15px;line-height:1.75;margin:0 0 24px}.story-inner blockquote{font-size:29px;line-height:1.4;letter-spacing:-.8px;border-left:1px solid #aa3b31;padding-left:25px;margin:46px 0 45px;color:#2c3228}
.story-signoff{display:flex;gap:25px;align-items:center;font-size:11px;color:#63685c}.story-signoff img{width:48px;height:54px;object-fit:contain}.story-signoff span{letter-spacing:.35px}.story-signoff img[hidden]{display:none}
@media(min-width:1600px){.masthead{top:0;left:0;right:0;padding:16px 60px}.logo-window{width:300px;height:82px}}
@media(max-width:1000px){.identity{font-size:7px;gap:4px;max-width:150px}.logo-window{width:240px;height:66px}}
@media(max-width:600px){.masthead{left:0;right:0;top:0;padding:max(12px,env(safe-area-inset-top)) 17px 12px 21px;min-height:83px}.logo-window{position:static;transform:none;width:178px;height:49px}.audio-cluster{margin-left:auto}.scene-status{top:96px}.story-inner{padding:24px 27px 44px}.story-top{margin-bottom:48px}.story-inner h2{font-size:40px;letter-spacing:-1.9px}.story-inner p{font-size:14px}.story-inner blockquote{font-size:25px;margin-top:34px;padding-left:19px}.story-inner .story-index{margin-bottom:27px}.selection-title-button{min-height:30px;gap:9px}}
@media(prefers-reduced-motion:reduce){.selection-title-icon{transition:none}}

/* Safe-area offsets share the same header geometry; no fixed status overlap. */
@media(max-width:600px){
 .masthead{min-height:calc(83px + env(safe-area-inset-top,0px));padding:calc(12px + env(safe-area-inset-top,0px)) calc(17px + env(safe-area-inset-right,0px)) 12px calc(21px + env(safe-area-inset-left,0px));gap:10px}
 .logo-window{flex:0 1 178px;min-width:0}
 .audio-cluster{flex-shrink:0}
 .scene-status{top:calc(96px + env(safe-area-inset-top,0px))}
 .story-inner{padding:calc(24px + env(safe-area-inset-top,0px)) calc(27px + env(safe-area-inset-right,0px)) calc(44px + env(safe-area-inset-bottom,0px)) calc(27px + env(safe-area-inset-left,0px))}
 .story-close{flex-shrink:0}
}
@media(max-height:600px) and (min-width:601px) and (max-width:1000px){
 .masthead{min-height:calc(83px + env(safe-area-inset-top,0px));padding:calc(10px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) 10px calc(24px + env(safe-area-inset-left,0px))}
 .logo-window{width:200px;height:55px;top:calc(50% + env(safe-area-inset-top,0px)/2)}
 .scene-status{top:calc(93px + env(safe-area-inset-top,0px))}
 .story-inner{padding-top:calc(24px + env(safe-area-inset-top,0px));padding-right:calc(32px + env(safe-area-inset-right,0px));padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));padding-left:calc(32px + env(safe-area-inset-left,0px))}
}