/* BAVINGA — final editorial interface layer */
html,body{max-width:100%;overflow-x:clip}
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Let typography, photography and negative space do the work. */
.header{
  padding-block:22px;
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  backdrop-filter:blur(14px);
}
.header-inquiry{
  min-height:auto;
  padding:8px 0;
  gap:0;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  color:var(--ink);
  letter-spacing:.04em;
}
.header-inquiry:hover{background:transparent;color:var(--wine)}

/* The original BAVINGA double-B monogram, kept compact and architectural. */
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-width:max-content;
  font-size:inherit;
  letter-spacing:normal;
}
.brand-mark,
.footer-mark{
  display:block;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url('./bavinga-mark.svg') center/contain no-repeat;
  mask:url('./bavinga-mark.svg') center/contain no-repeat;
}
.brand-mark{width:32px;height:34px}
body .brand>.brand-type{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
  line-height:1;
  letter-spacing:normal;
}
.brand-type strong{
  font-family:var(--sans);
  font-size:21px;
  line-height:.9;
  font-weight:600;
  letter-spacing:.1em;
}
.brand-type small{
  display:block;
  margin:0;
  font-size:5.8px;
  line-height:1;
  font-weight:400;
  letter-spacing:.19em;
}
.brand-home-link{color:inherit;text-decoration:none;transition:opacity .2s}
.brand-home-link:hover,.brand-home-link:focus-visible{opacity:.62}
.lightbox-brand,.exhibition-brand{transition:opacity .2s}
.lightbox-brand:hover,.exhibition-brand:hover{opacity:.66}

/* Remove app-like affordances and superseded controls. */
.image-open,
.favorite,
.shortlist-toggle,
#favorite-image,
.focus-arrows,
.wall-arrows,
.wall-position-control,
.practice-arrow,
.photo-open .view-label,
.editorial-image-open,
.focus-image-button>span,
.focus-open-note,
.footer-top,
.footer-details,
.footer-wordmark,
.footer-bottom{
  display:none!important;
}
[data-exhibition="presence"],
.room-navigation,
.reel-image small,
.wall-artwork small{
  display:none!important;
}
.inquiry-page .header-inquiry,
.inquiry-page .mobile-inquiry{display:none!important}
.poem-tab[aria-pressed=true]::before,
.service-content li::before{content:none!important;margin:0!important}

/* Links remain self-evident through type and a quiet underline. */
.text-link,
.editorial-link,
.reel-wall-link{
  gap:0;
  border-bottom:1px solid currentColor;
  padding-bottom:8px;
}
.text-link span:empty,
.editorial-link span:empty,
.button span:empty,
.project-goals button>span:last-child:empty,
.service summary>span:last-child:empty{
  display:none;
}

/* Flat, architectural controls. */
.button,
.light-button,
.service-choose,
.service-jump a,
.service-chips span,
.filter,
.view-toggle button,
.wall-moods button,
.project-goals button,
.outline-light,
.draft-preview,
.inquiry-form input,
.inquiry-form textarea,
.inquiry-form select{
  border-radius:0!important;
  box-shadow:none!important;
}
.button,
.service-choose{
  justify-content:center;
  gap:0;
}
.project-result,
.draft-preview,
.inquiry-form,
.toast{
  box-shadow:none!important;
}

/* Minimal lightbox navigation: thin glyphs, no floating circles. */
.icon-button{
  width:36px;
  height:36px;
  font-size:18px;
  font-weight:300;
}
.image-arrow{
  top:0!important;
  bottom:0!important;
  width:15%;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:0;
}
.image-arrow span{display:block;width:11px;height:11px;border-top:1px solid currentColor;border-right:1px solid currentColor;position:absolute;top:50%}
.image-arrow.previous span{left:24px;transform:rotate(-135deg)}
.image-arrow.next span{right:24px;transform:rotate(45deg)}
.image-arrow:hover,.image-arrow:focus-visible{opacity:.72;background:transparent!important}
.image-arrow.previous{left:0!important}.image-arrow.next{right:0!important}
.lightbox-caption-actions{display:contents}

/* The focus gallery reads like an exhibition, not a media player. */
.focus-motion{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  padding:7px 0;
  box-shadow:none!important;
  border-bottom:1px solid currentColor!important;
}
.focus-gallery-link{border-bottom:1px solid currentColor;padding-bottom:7px}
.cinematic-secondary,
.cover-play{
  border-radius:0!important;
  box-shadow:none!important;
}
.cinematic-controls button[data-cover-photo]{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
}
.cinematic-controls button[data-cover-photo]::before{
  content:"";
  display:block;
  width:5px;
  height:5px;
  margin:auto;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.62;
}
.cinematic-controls button[data-cover-photo][aria-pressed="true"]::before{background:currentColor;opacity:1}

/* Exact, compact footer requested for every public page. */
.footer{
  margin:0;
  padding:0 var(--pad)!important;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.footer-minimal{
  min-height:96px;
  display:grid;
  grid-template-columns:minmax(130px,1.3fr) repeat(4,max-content);
  align-items:center;
  gap:clamp(18px,3vw,52px);
  font-size:10px;
  line-height:1.3;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer-minimal a{transition:color .2s}
.footer-minimal a:hover{color:var(--wine)}
.footer-minimal .footer-brand{
  margin:0;
  font-family:var(--sans);
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  line-height:1;
  letter-spacing:.11em;
  color:var(--ink);
  font-weight:600;
}
.footer-mark{width:23px;height:24px}

@media(max-width:760px){
  main h1,main h2{max-width:100%;text-wrap:balance}
  .header{padding-block:17px}
  .brand{gap:8px}
  .brand-mark{width:28px;height:29px}
  .brand-type strong{font-size:17px}
  .brand-type small{font-size:4.8px;letter-spacing:.14em}
  .footer-minimal{
    min-height:0;
    padding:28px 0 30px;
    grid-template-columns:1fr 1fr;
    gap:15px 24px;
    font-size:9px;
  }
  .footer-minimal .footer-brand{grid-column:1/-1;font-size:14px;margin-bottom:5px}
  .footer-mark{width:21px;height:22px}
  .image-arrow{width:22%!important;height:100%!important}
  .image-arrow span{display:none}
  .lightbox-caption{min-height:0!important}

  /* Mobile opening: every line remains readable and every control has room. */
  .cinematic-stage{padding:34px 22px 0!important;overflow:visible!important}
  .cinematic-portrait{height:min(86vw,360px)!important}
  .cinematic-copy{padding:25px 0 31px!important;overflow:visible!important}
  .cinematic-copy h1{
    max-width:100%;
    font-size:clamp(48px,14vw,62px)!important;
    line-height:.98!important;
    overflow:visible;
    word-break:normal;
  }
  .cinematic-practice{max-width:33rem;line-height:1.6!important}
  .cinematic-actions{display:flex;align-items:flex-start;gap:12px 24px!important}
  .cinematic-controls{margin-top:0!important;align-items:center}
  .cinematic-credit{margin-top:13px!important;white-space:normal}

  /* Mobile focus mode: title and actions sit inside safe margins. */
  .focus-portfolio{height:calc(100svh - 82px)!important;min-height:560px!important}
  .focus-topline,.focus-controls{padding-inline:18px!important}
  .focus-topline>span{max-width:none!important;font-size:0!important}
  .focus-topline .brand-home-link{font-size:9px!important}
  .focus-stage{margin:8px 18px 10px!important}
  .focus-statement{
    left:18px!important;
    right:18px!important;
    top:20px!important;
    width:auto!important;
    max-width:310px!important;
  }
  .focus-statement h1{font-size:clamp(43px,12.8vw,56px)!important;line-height:.9!important}
  .focus-statement p{font-size:8px!important;line-height:1.4!important}
  .focus-controls{grid-template-columns:1fr 1fr!important;gap:24px!important;min-height:56px!important}
  .focus-motion{justify-self:start;font-size:9px!important;white-space:nowrap;padding-inline:0!important}
  .focus-gallery-link{justify-self:end!important;font-size:9px!important;white-space:nowrap}
}

@media(max-width:390px){
  .cinematic-actions{display:grid;grid-template-columns:1fr}
  .focus-statement{max-width:280px!important}
  .focus-statement h1{font-size:43px!important}
  .focus-controls{gap:16px!important}
}

@media(prefers-reduced-motion:reduce){
  .footer-minimal a,
  .brand-home-link,
  .lightbox-brand,
  .exhibition-brand,
  .header-inquiry{transition:none}
}