@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(ibm-plex-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*{box-sizing:border-box}
html,body{margin:0;background:#111210;color:#eee8da;font-family:'DM Sans',sans-serif}
body{min-height:100svh}
.stage{position:relative;min-height:100svh;overflow:hidden;background:#111210 url('bal-monolith.webp') center center/cover no-repeat}
header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:0 5%;height:110px;border-bottom:1px solid #eee8da24}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:28px;font-weight:600;letter-spacing:-1.6px}
.brand span{color:#bc6651}
a{color:inherit;text-decoration:none}
nav{display:flex;gap:32px;font-size:12px}
nav a{display:inline-flex;align-items:center;min-height:44px}
nav a:hover{color:#d38d75}
.chapter{font:9px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#aaa79e}
.hero{position:relative;z-index:1;min-height:calc(100svh - 196px);display:flex;align-items:center;padding:50px 7%}
.copy{max-width:760px}
.eyebrow{display:none;font:10px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#aba79e;margin:0 0 36px}
h1{font-size:clamp(64px,6.9vw,112px);line-height:.98;letter-spacing:-.07em;font-weight:500;margin:0 0 30px}
.sub{font-size:16px;line-height:1.7;color:#c6c2b6;margin:0 0 38px}
.cta{min-height:44px;display:inline-flex;gap:50px;align-items:center;font-size:12px;border-bottom:1px solid #d3c8b2;padding:0 0 13px}
.cta span{font-size:20px;transition:transform .2s}
.cta:hover span{transform:translate(3px,-3px)}
footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:0 5%;min-height:86px;border-top:1px solid #eee8da24;font:9px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#aaa79e}
footer a{font:12px 'DM Sans',sans-serif;letter-spacing:0;color:#eee8da}
a:focus-visible{outline:2px solid #bd6853;outline-offset:8px}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Responsive scene: stable minimum viewport; document flow handles short screens. */
@media(max-width:900px){
html,body{background:#111210}
.stage{display:flex;flex-direction:column;min-height:max(100lvh,143vw);background-image:url('bal-mobile-v5.webp');background-image:image-set(url('bal-mobile-v5.avif') type('image/avif'),url('bal-mobile-v5.webp') type('image/webp'));background-position:68% center;background-size:cover}
header{height:auto;min-height:72px;margin:0 max(22px,env(safe-area-inset-left));flex-shrink:0}
.brand{font-size:24px;letter-spacing:-1.4px}
.chapter{display:none}
nav{gap:4px;font-size:12px;padding:0 7px;border-radius:12px;background:#111210d9;border:1px solid #eee8da20}
nav a{min-width:44px;min-height:44px;justify-content:center}
.hero{flex:1;min-height:0;align-items:flex-start;padding:clamp(24px,4svh,40px) max(22px,env(safe-area-inset-left)) max(220px,33svh)}
.eyebrow{display:block;font-size:9px;letter-spacing:2px;margin:0 0 clamp(18px,3svh,26px)}
h1{font-size:clamp(29px,8.7vw,52px);line-height:1.06;letter-spacing:-.065em;margin-bottom:clamp(20px,3svh,30px)}
.cta{font-size:13px;min-height:44px;gap:38px;padding:0 0 10px}
footer{min-height:48px;margin:0 max(22px,env(safe-area-inset-left));padding:14px 0;font-size:7px;flex-shrink:0}
}
@media(max-width:360px){header,footer{margin-left:18px;margin-right:18px}.hero{padding-left:18px;padding-right:18px}.brand{font-size:22px}nav{gap:2px;font-size:11px}}
@media(max-width:900px) and (orientation:landscape){.stage{min-height:100svh;background-image:url('bal-monolith.webp');background-position:center}.hero{padding-bottom:70px;max-width:75%}h1{font-size:36px}}
@media(max-width:900px) and (display-mode:standalone){.stage{min-height:max(100lvh,143vw)}header{padding-top:env(safe-area-inset-top);min-height:calc(72px + env(safe-area-inset-top))}footer{padding-bottom:max(14px,env(safe-area-inset-bottom))}}

/* Reference-led alternative: status area and navigation read as one header. */
@media(max-width:900px){
header{margin:0;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));background:#111210;border-bottom:1px solid #eee8da18}
nav{background:transparent;border-color:transparent}
footer{margin:0;padding-left:22px;padding-right:22px;padding-bottom:max(22px,env(safe-area-inset-bottom));min-height:76px;background:#111210;border-top:1px solid #eee8da18}
}