/* ===================================================================
   BIANCA LOVE — layout fixes + visual polish  ·  added 11 Aug 2026
   Self-contained. Deleting this whole block returns the site to
   exactly how it was before; nothing else depends on it.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=Inter:wght@400;500;600&display=swap');

:root{
  --bl-display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bl-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bl-gold:#c9a84c;
}

/* 1. TYPE — the site was rendering in the browser's default system font */
body,.wp-site-blocks,p,li,figcaption,input,textarea,select{
  font-family:var(--bl-body);
}
h1,h2,h3,h4,h5,h6,
.wp-block-button__link,
header .wp-block-navigation a{
  font-family:var(--bl-display);
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

.entry-content h2{
  font-weight:800;
  letter-spacing:-.02em !important;
  line-height:.94 !important;
}
.entry-content h2 em,.entry-content h2 i{font-weight:800;}
.entry-content p{line-height:1.75;}

/* 2. HEADER — sticky bar was a solid slab; now glass over the artwork */
header.wp-block-template-part{
  background:rgba(8,8,8,.82) !important;
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
header .wp-block-navigation a{
  font-size:clamp(15px,1.45vw,19px) !important;
  font-weight:700;
  letter-spacing:.075em;
  transition:color .18s ease;
}
header .wp-block-navigation a:hover{color:var(--bl-gold) !important;}
header .current-menu-item > a,
header .current_page_item > a{color:var(--bl-gold) !important;}

/* jump links no longer land underneath the sticky bar */
html{scroll-padding-top:110px;scroll-behavior:smooth;}

/* 3. FIX — the fixed photo backdrop on the home page was being clamped
      to the theme's 800px content width. That is what caused the black
      column down the right side and the random photo slivers. */
#bl-bg-slideshow{
  max-width:none !important;
  width:100vw !important;
  left:0 !important;
  right:0 !important;
  margin:0 !important;
}
#bl-bg-slideshow > div{
  background-size:cover !important;
  background-position:center center !important;
}
#bl-bg-slideshow::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.8) 100%);
  pointer-events:none;
}

/* 4. FIX — 32px gaps between full-bleed sections were exposing the
      backdrop as thin strips. Sections now butt together cleanly. */
body.home .entry-content > .wp-block-group.alignfull,
body.home .entry-content > .wp-block-cover.alignfull{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
body.home .wp-block-cover > .wp-block-cover__background{opacity:.72 !important;}
body.home .wp-block-cover > .wp-block-cover__inner-container{position:relative;z-index:2;}

/* 5. The two narrow home sections read as cards over the backdrop */
body.home .entry-content > .wp-block-group:not(.alignfull):not(.bl-music-notes){
  max-width:1080px !important;
  width:calc(100% - 48px) !important;
  margin:80px auto !important;
  padding:64px clamp(24px,4vw,56px) !important;
  background:rgba(9,9,9,.78) !important;
  border:1px solid rgba(255,255,255,.07);
}

/* the video has no poster frame, so it rendered see-through */
.wp-block-video video{
  background:#000;
  border:1px solid rgba(255,255,255,.08);
}

/* 6. FIX — inner pages had a hero sized at 100vw. 100vw includes the
      scrollbar, so every one of them scrolled sideways by ~15px. */
body:not(.home){overflow-x:clip;}

body:not(.home) .entry-content > .alignfull{position:relative;}
body:not(.home) .entry-content > .alignfull::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
body:not(.home) .entry-content > .alignfull > *{position:relative;z-index:1;}

/* 7. BUTTONS */
.wp-block-button__link{
  font-weight:700 !important;
  font-size:13px !important;
  letter-spacing:.16em !important;
  padding:16px 34px !important;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.wp-block-button__link:hover{transform:translateY(-2px);}

/* 8. CONTACT FORM — inputs were bright white blocks on a black page */
.contact-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.contact-form textarea,
.contact-form select{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius:2px !important;
  padding:14px 16px !important;
  font-family:var(--bl-body) !important;
  font-size:15px !important;
  box-shadow:none !important;
  transition:border-color .18s ease,background-color .18s ease;
}
.contact-form input:not([type=submit]):focus,
.contact-form textarea:focus{
  border-color:var(--bl-gold) !important;
  background:rgba(255,255,255,.08) !important;
  outline:none !important;
}
.contact-form ::placeholder{color:rgba(255,255,255,.35) !important;}
.contact-form label{
  color:rgba(255,255,255,.88) !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.contact-form label span{
  text-transform:none;
  color:rgba(255,255,255,.45) !important;
  font-weight:400 !important;
}

/* 9. FOOTER — was transparent, so the credit line sat on a photo */
footer.wp-block-template-part{
  position:relative;
  z-index:1;
  background:#000 !important;
  border-top:1px solid rgba(255,255,255,.08);
}
footer p:not(.has-text-color){
  color:rgba(255,255,255,.62) !important;
  letter-spacing:.1em;
}
footer .wp-block-social-links{margin-top:8px;}
footer a{text-underline-offset:3px;}

/* 10. MOBILE */
@media (max-width:781px){
  body.home .entry-content > .wp-block-group.alignfull{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }
  body.home .entry-content > .wp-block-group:not(.alignfull):not(.bl-music-notes){
    width:calc(100% - 24px) !important;
    margin:40px auto !important;
    padding:40px 22px !important;
  }
  .entry-content h2{font-size:clamp(30px,8.5vw,42px) !important;}
  header .wp-block-navigation a{font-size:20px !important;}
}

/* 11. FIX — the fixed backdrop (a positioned element with z-index:0) was
      painting ON TOP of the static page content. Nothing showed it more
      clearly than the Life's A Drag video, which was invisible: the
      backdrop photo was drawn straight over it. Lifting the sections
      above the backdrop puts the video, its poster frame and its
      controls back on screen. */
body.home .entry-content > *:not(#bl-bg-slideshow){
  position:relative;
  z-index:1;
}

/* and that heading was set at 24px while its neighbours were 36-46px */
body.home .entry-content h2.has-text-align-center{
  font-size:clamp(32px,4.4vw,46px) !important;
  letter-spacing:-.02em !important;
  font-weight:800 !important;
}

/* 12. FIX — my own regression. The backdrop-filter added to the header
      in section 2 makes the header a containing block for fixed-position
      descendants, which trapped the mobile overlay menu inside the 55px
      header bar: only HOME was visible, the rest scrolled out of sight.
      Blur only where there is no overlay menu, and never while it is open. */
@media (max-width:781px){
  header.wp-block-template-part{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(8,8,8,.94) !important;
  }
}
header.wp-block-template-part:has(.is-menu-open){
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* overlay menu: a bit more breathing room between items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:6px;
}

/* 13. FIX — YouTube embeds came in two flavours: 4 were proper embed
      blocks (full 800px content width) and 7 were pasted as plain oEmbed
      wrappers with an inline max-width:640px, so they sat noticeably
      smaller. All of them now share one width and one 16:9 box. */
.entry-content div:has(> .embed-youtube){
  max-width:var(--wp--style--global--content-size,800px) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.entry-content .embed-youtube{
  display:block;
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.entry-content .embed-youtube > iframe{
  position:static !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  display:block;
  border:0;
}
.entry-content .wp-has-aspect-ratio .wp-block-embed__wrapper::before{display:none !important;}
.entry-content .wp-block-embed__wrapper{position:static !important;}

/* 14. Inner pages were mostly centred with stray left-aligned bits —
      eyebrow labels, video captions, button rows. Brought into line.
      The home page keeps its left-ranged editorial layout. */
body:not(.home) .entry-content > h1,
body:not(.home) .entry-content > h2,
body:not(.home) .entry-content > h3,
body:not(.home) .entry-content > h4,
body:not(.home) .entry-content > h5,
body:not(.home) .entry-content > h6,
body:not(.home) .entry-content > p,
body:not(.home) .entry-content > div:not([class]),
body:not(.home) .entry-content > .wp-block-group,
body:not(.home) .entry-content > figure figcaption{
  text-align:center;
}
body:not(.home) .entry-content .wp-block-buttons,
body:not(.home) .entry-content > .wp-block-group.is-layout-flex{
  justify-content:center !important;
}
/* ...but forms read badly centred, so the contact form stays ranged left */
body:not(.home) .jetpack-contact-form-container,
body:not(.home) .contact-form,
body:not(.home) .contact-form label{
  text-align:left;
}

/* 15. Home page centred too. Section 14 handles the inner pages; this
      brings the home page in line — hero block, section headings,
      eyebrow labels, buttons and captions. */
body.home .wp-block-cover.has-custom-content-position{justify-content:center !important;}
body.home .wp-block-cover__inner-container{text-align:center !important;}
body.home .entry-content > .wp-block-group{text-align:center;}
body.home .entry-content .wp-block-buttons,
body.home .entry-content .is-layout-flex{justify-content:center !important;}
body.home .entry-content .wp-block-image img{margin-left:auto;margin-right:auto;display:block;}

/* 16. The new hero titles on About / Music / Media match the ones
      already on Press, Tour and Contact. The Media page carries a blunt
      page-level rule (.page-id-9 p {font-size:.82rem !important}) that
      was shrinking its title, so this outranks it. */
.entry-content [data-bl-title] p{
  font-size:clamp(1.8rem,4vw,3rem) !important;
  color:#C9A84C !important;
  letter-spacing:0.22em !important;
  line-height:1.2 !important;
  text-shadow:0 1px 8px rgba(0,0,0,0.9) !important;
}

/* 17. HERO — the lines were still ranged right inside a centred box
      (WordPress's own .is-position-center-right rule uses !important and
      outranked section 15), so every line stepped off the right edge and
      the left edges came out ragged. Now all on one centre axis, with an
      even 16px rhythm and the two stray empty paragraphs collapsed. */
body.home .wp-block-cover[class*="is-position-"] .wp-block-cover__inner-container,
body.home .wp-block-cover[class*="is-position-"] .wp-block-cover__inner-container > *,
body.home .wp-block-cover__inner-container,
body.home .wp-block-cover__inner-container > *{
  text-align:center !important;
}
body.home .wp-block-cover__inner-container{
  max-width:760px;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.home .wp-block-cover__inner-container p:empty{display:none !important;}
body.home .wp-block-cover__inner-container h1{
  letter-spacing:.1em !important;
  line-height:.92 !important;
  font-weight:800 !important;
  text-indent:.1em;
  margin-bottom:20px !important;
}
body.home .wp-block-cover__inner-container p{
  letter-spacing:.14em !important;
  text-indent:.14em;
  margin-top:16px !important;
  margin-bottom:0 !important;
}
body.home .wp-block-cover__inner-container .wp-block-buttons{
  margin-top:36px !important;
  margin-bottom:30px !important;
  gap:14px;
}