@font-face{font-family:BulrushDisplay;src:url('assets/bulrush-display.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:BulrushText;src:url('assets/bulrush-text-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#171b1c;color:#f1eee8}
.teaser{position:relative;isolation:isolate;min-height:100%;height:100svh;height:100dvh;overflow:hidden;text-align:center}
.landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-3}
.shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(14,20,23,.55),transparent 39%,rgba(14,20,23,.08) 60%,rgba(14,20,23,.75));pointer-events:none}
.band{position:absolute;top:calc(env(safe-area-inset-top) + clamp(28px,5.5vh,72px));left:6%;right:6%}
h1{font-family:BulrushDisplay,Impact,sans-serif;font-weight:700;font-size:clamp(66px,16vw,230px);line-height:.9;letter-spacing:.035em;margin:0;text-shadow:0 2px 20px #0002}
.album{position:absolute;left:6%;right:6%;bottom:calc(env(safe-area-inset-bottom) + clamp(30px,7vh,90px))}
p{margin:0}.title{font-family:BulrushDisplay,Impact,sans-serif;font-weight:700;font-size:clamp(30px,4.7vw,68px);letter-spacing:.12em;line-height:1.05}
.announcement{font-family:BulrushText,sans-serif;margin-top:18px;font-size:clamp(10px,1.05vw,14px);letter-spacing:.24em;line-height:1.6;color:#e5e6e2}
@media(max-width:600px){.band{top:calc(env(safe-area-inset-top) + 6svh)}h1{font-size:22vw}.album{bottom:calc(env(safe-area-inset-bottom) + 7svh)}.title{font-size:10vw}.announcement{letter-spacing:.15em;font-size:10px;margin-top:14px}}
@media(max-height:420px){.band{top:18px}h1{font-size:min(19vh,13vw)}.album{bottom:16px}.title{font-size:8vh}.announcement{margin-top:6px;font-size:9px}}
/* Keep all four silhouettes in view on narrow screens. */
@media(max-aspect-ratio:3/4){.landscape{top:50%;bottom:auto;height:auto;aspect-ratio:1672/941;transform:translateY(-50%);object-fit:contain;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}.shade{background:linear-gradient(180deg,#171b1c22,transparent 35%,transparent 65%,#171b1c44)}}
/* Temporary reveal: the photograph remains deliberately faint. */
.shade{background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),linear-gradient(180deg,rgba(0,0,0,.12),transparent 45%,rgba(0,0,0,.2))}
@media(max-aspect-ratio:3/4){.shade{background:rgba(0,0,0,.68)}}
