/* =========================================================================
   bal.css · UN|WISE light "Balenciaga" skin · SITE-WIDE (applies on body.bal).
   Light blocks (white + neutral grey), monochrome, small uppercase section
   titles (heroes stay big), black header kept, footer accordion on mobile.
   Page-specific tweaks live in each page's own <style> (scoped under .bal).
   Load AFTER site.css. Reversible: remove class="bal" + this link.
   ========================================================================= */
body.bal{--bw:#ffffff;--bg1:#f2f1ef;--bk:#141414;--bmute:#6b6b6b;--bline:rgba(0,0,0,.14);background:#e9e8e6 url(/assets/plaster-gray.webp) center/cover;color:var(--bk)}
/* industrial concrete hero (about/drop/experiences) · lifted to raw grey */
.bal .hero-concrete{filter:brightness(1.45) contrast(.93) grayscale(.85)}

/* ---- bands: flat light, drop the leather/fabric textures + stitched edges ---- */
/* raw industrial concrete/plaster texture · light overlay keeps text readable */
.bal .band.light,.bal .band.light-2{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(/assets/plaster-gray.webp);background-size:cover;background-position:center;color:var(--bk)}
.bal .band.dark,.bal .band.deep{background:linear-gradient(rgba(250,249,247,.06),rgba(250,249,247,.06)),url(/assets/plaster-gray.webp);background-size:cover;background-position:center;color:var(--bk)}
.bal .dark::before,.bal .dark::after,.bal .deep::before,.bal .deep::after{display:none}

/* ---- section titles: dark ink, small uppercase (heroes keep .hero-h size) ---- */
.bal .statement,.bal .big,.bal .mk{color:var(--bk)}
.bal .band .statement,.bal .band .big,.bal .band .mk{
  text-transform:uppercase;font-weight:700;font-stretch:100%;letter-spacing:.03em;line-height:1.12;
  font-size:clamp(1.15rem,2.1vw,1.55rem)}
.bal .band .big.xl{font-size:clamp(1.4rem,2.8vw,2rem)}
/* smaller titles no longer need to wrap so early · give them width (site.css caps at 13ch) */
.bal .band .statement,.bal .band .big{max-width:34ch}

/* ---- uniform vertical rhythm on every page · matches the homepage's tighter spacing.
   body.bal (0,2,1) beats page-specific .band.dark / .access.band overrides (0,2,0) ---- */
body.bal .band{padding-top:clamp(40px,5.5vh,58px);padding-bottom:clamp(40px,5.5vh,58px)}

/* ---- body copy on the now-light bands → dark ---- */
.bal .band.dark .body,.bal .band.deep .body,
.bal .band.dark .lede,.bal .band.deep .lede,
.bal .band.dark .txt,.bal .band.deep .txt,
.bal .band.dark p,.bal .band.deep p{color:var(--bk)}

/* ---- small labels monochrome (kill the oxblood accent) ---- */
.bal .micro.eyebrow,.bal .eyebrow,.bal .foot-h,
.bal .light .micro,.bal .light-2 .micro,.bal .dark .micro,.bal .deep .micro{color:var(--bmute)}

/* ---- footer: light grey, monochrome, no leather seam ---- */
.bal footer{background:linear-gradient(rgba(249,248,246,.05),rgba(249,248,246,.05)),url(/assets/plaster-gray.webp);background-size:cover;background-position:center;color:var(--bk)}
.bal footer::before{display:none}
.bal .foot-h{color:var(--bmute)}
.bal .foot-col a{color:var(--bk)}
.bal .foot-col a:hover{border-bottom-color:var(--bk)}
.bal .foot-legal{color:var(--bmute);border-top-color:var(--bline)}

/* ---- footer accordion (mobile only, Balenciaga-style expandable menu) ---- */
@media (max-width:719px){
  .bal .foot-top{grid-template-columns:1fr;gap:0;padding-bottom:0}
  .bal .foot-col{border-top:1px solid var(--bline);align-items:stretch}
  .bal .foot-col .foot-h{display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:1.15em 0;cursor:pointer;user-select:none}
  .bal .foot-col .foot-h::after{content:"+";font-weight:400;font-size:1.2em;line-height:1}
  .bal .foot-col.open .foot-h::after{content:"\2212"}
  .bal .foot-col > a{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .2s ease,margin .3s ease}
  .bal .foot-col.open > a{max-height:90px;opacity:1;margin-bottom:.9em}
  .bal .foot-legal{border-top:1px solid var(--bline);padding-top:1.4rem}
}