/* =========================================================================
   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)}
/* section titles: ONE size + weight everywhere (body.bal beats page-specific overrides) */
body.bal .band .statement,body.bal .band .big,body.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)}
body.bal .band .big.xl{font-size:clamp(1.4rem,2.8vw,2rem)}
/* consistent wrap rhythm on every page · same max width for titles + body */
body.bal .band .statement,body.bal .band .big{max-width:34ch}
body.bal .band .body,body.bal .band .lede,body.bal .band .idea-sub,body.bal .band .looks-sub,body.bal .band .xnl-sub{max-width:46ch}

/* ---- 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)}
/* tighter, consistent gap between a statement and its explanation (esp. mobile) */
body.bal .editorial{gap:clamp(1.4rem,3vh,2rem);align-items:center}
@media (max-width:719px){body.bal .editorial{gap:clamp(1rem,2.4vh,1.4rem)}}
/* editorial statements read as titles: left-aligned, balanced 2-line, vertically centred (align-items above) */
body.bal .editorial .lead-col .big{text-wrap:balance;max-width:16ch}
/* mobile: EVERY section + editorial title uses the full line width → consistent wrap on every page
   (drop the 16ch/34ch caps + the 2-line balance, which broke titles differently per page) */
@media (max-width:719px){
  body.bal .band .statement,body.bal .band .big,body.bal .band .mk,
  body.bal .editorial .lead-col .big{max-width:none;text-wrap:normal}
}

/* ---- 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{position:relative;z-index:1;background:linear-gradient(rgba(249,248,246,.05),rgba(249,248,246,.05)),url(/assets/plaster-gray.webp);background-size:100% auto;background-position:top center;background-repeat:repeat;color:var(--bk)}   /* opaque COVER · the fold's community line rises up from behind its top edge */
@media (max-width:719px){.bal footer{padding-top:clamp(14px,2.2vh,20px)}}   /* mobile: tight top padding · matches home */
.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:flex-start;align-items:center;width:100%;margin:0;padding:1.15em 0;cursor:pointer;user-select:none}
  .bal .foot-col .foot-h::after{content:"+";margin-left:auto;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}
}

/* ---- footer · premium trust layout (4 columns + company info line) ---- */
@media (min-width:720px){.bal .foot-top{display:flex;justify-content:space-between;gap:2rem}}
.bal .foot-company{padding-top:clamp(1.6rem,3.4vh,2.4rem);margin-top:clamp(1.6rem,3.4vh,2.4rem);border-top:1px solid var(--bline);font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bmute);line-height:1.7;max-width:none}
.bal .foot-company a{color:var(--bmute);text-decoration:none;border-bottom:1px solid transparent}
.bal .foot-company a:hover{border-bottom-color:var(--bmute)}
@media (min-width:720px){.bal footer:has(.foot-company) .foot-legal{border-top:0;margin-top:.8rem;padding-top:0}}

/* ---- legal / info pages (Privacy, Terms, Returns, FAQ) ---- */
.bal .legal-band{padding-top:clamp(2.6rem,6vh,4rem)}
.bal .legal-wrap{max-width:760px}
.bal .legal-wrap p.legal-updated{font-family:'Space Mono',monospace;font-size:.62rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--bmute);line-height:1.5;margin:.4rem 0 clamp(2rem,5vh,3rem);max-width:none}
.bal .legal-wrap h2{font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:700;font-stretch:104%;letter-spacing:.04em;text-transform:uppercase;color:var(--bk);margin:clamp(2rem,4.5vh,2.8rem) 0 .7rem}
.bal .legal-wrap p,.bal .legal-wrap li{font-size:1rem;line-height:1.7;color:var(--bk)}
.bal .legal-wrap p{margin-bottom:1rem;max-width:72ch}
.bal .legal-wrap ul{margin:0 0 1.1rem 1.1rem}
.bal .legal-wrap li{margin-bottom:.45rem;max-width:70ch}
.bal .legal-wrap a{color:var(--bk);text-decoration:underline;text-underline-offset:3px}
.bal .legal-lede{font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.6;color:var(--bk);max-width:60ch;margin-bottom:clamp(1.4rem,3vh,2rem)}

/* ---- mobile menu · premium drawer (stays dark, like the black header) ---- */
.bal .navdrawer{position:fixed;top:0;left:0;right:0;z-index:49;background:rgba(10,10,9,.99);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-bottom:1px solid var(--line);padding:calc(3.4rem + 1.7rem) var(--gutter) 2.2rem;display:flex;flex-direction:column;gap:0}
.bal .navdrawer[hidden]{display:none}
@media (min-width:900px){.bal .navdrawer{display:none!important}}
.bal .navdrawer > a{font-size:1.05rem;font-weight:540;font-stretch:104%;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.92;padding:.85rem 0;border-bottom:1px solid rgba(234,230,220,.1)}
.bal .navdrawer > a:hover{color:#fff}
.bal .navdrawer-social{display:flex;gap:1.5rem;margin-top:1.7rem;flex-wrap:wrap}
.bal .navdrawer-social a{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.bal .navdrawer-social a:hover{color:var(--ink)}

/* ---- accepted payment methods (footer) · monochrome badges in the UN|WISE layout ---- */
.bal .pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(15px,2.3vw,26px);margin-top:clamp(1.8rem,4vh,2.6rem)}
.bal .pay{height:25px;width:auto;opacity:.72}
/* footer UN|WISE header = compact wordmark (not a wide-tracked label) */
.bal .foot-h.uw{letter-spacing:.05em;font-weight:700;font-stretch:108%}
.bal .foot-h.uw b.bar{margin:0 .1em 0 .05em}
/* mobile: company name on line 1, address on its own line */
@media (max-width:719px){.bal .fc-sep{display:none}.bal .fc-addr{display:block}}

/* geo-conditional payment marks: hidden until the visitor country matches (JS in bal.js) */
.bal .pay[data-geo]{display:none}

/* ---- FAQ accordion ---- */
.bal .faq-cat{margin-top:clamp(2.2rem,4.5vh,3.2rem)}
.bal .faq-cat:first-of-type{margin-top:clamp(1.4rem,3vh,2rem)}
.bal .faq-cat-h{font-family:'Space Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bmute);margin:0;padding-bottom:.8rem;border-bottom:1px solid var(--bline)}
.bal .faq-item{border-bottom:1px solid var(--bline)}
.bal .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;background:none;border:0;cursor:pointer;text-align:left;font:inherit;font-size:clamp(1rem,1.7vw,1.1rem);font-weight:600;color:var(--bk);padding:1.15em 0;line-height:1.3}
.bal .faq-q::after{content:"+";font-weight:400;font-size:1.3em;color:var(--bmute);flex:0 0 auto}
.bal .faq-q[aria-expanded="true"]::after{content:"\2212"}
.bal .faq-a{overflow:hidden;max-height:0;transition:max-height .32s var(--ease)}
.bal .faq-a p{padding:0 0 1.25em;margin:0;max-width:66ch;color:var(--bk);line-height:1.65;font-size:1rem}

/* ---- service page (Shipping & returns): quick-facts + numbered steps + CTA ---- */
.bal .qfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bline);border:1px solid var(--bline);margin:clamp(1.8rem,4vh,2.6rem) 0}
.bal .qfact{background:var(--bw);padding:clamp(1.1rem,2.5vw,1.5rem)}
.bal .qf-k{display:block;font-weight:700;font-stretch:104%;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--bk);line-height:1.05}
.bal .qf-v{display:block;margin-top:.4rem;font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bmute);line-height:1.5}
@media (max-width:600px){.bal .qfacts{grid-template-columns:1fr}}
.bal .steps{list-style:none;margin:clamp(1.4rem,3vh,2rem) 0;padding:0}
.bal .step{display:flex;gap:clamp(1rem,3vw,1.6rem);padding:1.4rem 0;border-top:1px solid var(--bline)}
.bal .step:last-child{border-bottom:1px solid var(--bline)}
.bal .step-n{flex:0 0 auto;font-family:'Space Mono',monospace;font-size:.92rem;font-weight:700;letter-spacing:.1em;color:var(--bmute);padding-top:.2rem}
.bal .legal-wrap .step-b h3{margin:0 0 .4rem;font-size:clamp(1rem,1.7vw,1.15rem);font-weight:700;font-stretch:104%;letter-spacing:.03em;text-transform:uppercase;color:var(--bk)}
.bal .legal-wrap .step-b p{margin:0;max-width:64ch}
.bal .legal-wrap a.rt-cta{display:inline-block;margin:clamp(1.6rem,3.6vh,2.4rem) 0 .3rem;background:var(--bk);color:var(--bw);text-decoration:none;font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:1.05em 2.1em;transition:opacity .2s var(--ease)}
.bal .legal-wrap a.rt-cta:hover{opacity:.86}
.bal .legal-wrap p.rt-foot{font-size:.92rem;color:var(--bmute);margin-top:1.2rem}

/* ---- legal document with sticky section index (Privacy, Terms) ---- */
.bal .legal-doc{max-width:1000px}
.bal .legal-layout{display:grid;grid-template-columns:1fr;gap:0}
.bal .legal-index{display:none}
.bal .legal-sec{scroll-margin-top:calc(3.4rem + 1.4rem)}
.bal .legal-body .legal-sec:first-child h2{margin-top:0}
.bal .legal-sec h2 .sec-n{font-family:'Space Mono',monospace;font-size:.8em;color:var(--bmute);margin-right:.5em}
.bal .proc-list li{margin-bottom:.6rem}
.bal .legal-sec em{font-style:normal;font-family:'Space Mono',monospace;font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:var(--bmute)}
.bal .legal-close{margin-top:1.5rem;color:var(--bmute);font-size:.92rem}
@media (min-width:900px){
  .bal .legal-layout{grid-template-columns:186px 1fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:start;margin-top:clamp(1.8rem,4vh,2.6rem)}
  .bal .legal-index{display:block;position:sticky;top:calc(3.4rem + 1.8rem);align-self:start}
  .bal .legal-index .li-h{display:block;font-family:'Space Mono',monospace;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bmute);margin-bottom:1rem}
  .bal .legal-index a{display:block;text-decoration:none;color:var(--bmute);font-size:.85rem;line-height:1.3;padding:.55rem 0;border-top:1px solid var(--bline);transition:color .15s ease}
  .bal .legal-index a:first-of-type{border-top:0}
  .bal .legal-index a:hover,.bal .legal-index a.active{color:var(--bk)}
  .bal .legal-index .li-n{font-family:'Space Mono',monospace;font-size:.7rem;margin-right:.5em;color:var(--bmute)}
  .bal .legal-index a.active .li-n{color:var(--bk)}
}

/* ---- "No games" rules grid (shop → drop) · light skin ---- */
.bal .rules-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vh,2.8rem)}
@media (min-width:820px){.bal .rules-grid{grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px)}}
.bal .rule-item .n{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--bmute);margin-bottom:1rem}
.bal .rule-item h3{margin:0;font-weight:700;font-stretch:100%;letter-spacing:.03em;text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.1;color:var(--bk)}
.bal .rule-item p{margin:.85rem 0 0;color:var(--bk);font-size:1rem;line-height:1.65;max-width:34ch}

/* ================= UNIFIED HERO · identical on every page (height + font + size + position) =================
   Kills per-page hero overrides (home pull-up/lift + drop/experiences font & size) so the hero title
   sits in the same place, in the same typeface, at the same size, on every page. */
.bal .hero{--hero-h:calc(100svh - 240px);align-items:stretch}         /* hero-inner fills the height so its grid can anchor the title */
.bal .hero--tall{--hero-h:calc(100svh - 240px);margin-top:0}          /* home parity: no pull-up behind the nav */
.bal .hero--tall .hero-inner{transform:none}           /* home parity: no optical lift */
.bal .hero--home{--hero-h:calc(100svh - 240px)}
@media (max-width:719px){.bal .hero,.bal .hero--home,.bal .hero--tall{--hero-h:calc(100svh - 240px)}}
/* TITLE anchored just above centre on EVERY page · kicker above, sub/fine flow below, so the title Y
   is identical regardless of any sub/fine underneath it (the thing that made pages sit differently) */
.bal .hero-inner{display:grid;grid-template-rows:0.74fr auto 1.26fr;height:100%;justify-items:center}
.bal .hero-kicker{grid-row:1;align-self:end}
.bal .hero-h{grid-row:2}
.bal .hero-sub{grid-row:3;align-self:start}
.bal .hero-fine{align-self:start}
/* title · ONE typeface + size everywhere (0,3,0 beats the pages' inline .drop-hero/.xhero overrides) */
.bal .hero-h,.bal .drop-hero .hero-h,.bal .xhero .hero-h{
  font-size:clamp(2.9rem,9vw,6rem);line-height:.94;font-weight:660;font-stretch:122%;letter-spacing:-.02em;max-width:none}
/* kicker · ONE typeface + size everywhere, matched to home (~0.86rem); no Space Mono on drop/experiences */
.bal .hero-kicker,.bal .drop-hero .hero-kicker,.bal .xhero .hero-kicker{
  font-family:'Archivo VF','Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(.78rem,1.4vw,.86rem);font-weight:540;font-stretch:106%;letter-spacing:.18em;text-transform:uppercase;opacity:.82}

/* ---- newsletter/signup sub-text · ONE size on every page (drop/experiences were bigger) ---- */
.bal .warn-sub,.bal .xnl-sub,.bal .access .body,.bal .access .da-copy .body{
  font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.55}


/* legal/service pages that go straight from the h1 into the lede (withdraw, returns) · give the lede breathing room under the title */
body.bal .legal-wrap h1 + .legal-lede{margin-top:clamp(1rem,2.6vh,1.7rem)}

/* mobile: all payment marks on ONE row (Apple/Google Pay added) · smaller + no wrap */
@media (max-width:719px){
  .bal .pay-row{flex-wrap:nowrap;gap:clamp(4px,1.5vw,8px);justify-content:space-between}
  .bal .pay{height:clamp(14px,4.2vw,19px)}
}

/* footer payment strip is a link to /payment/ */
.bal a.pay-row{cursor:pointer;text-decoration:none}