/*
Theme Name:   GeneratePress Child - The Sad Hour EPK
Theme URI:    https://builtbydanny.com
Description:  GeneratePress child theme built for The Sad Hour, a single page electronic press kit. Victorian mourning palette, gold and black, cameo headshot mounts, embedded music and video.
Author:       Built by Danny
Author URI:   https://builtbydanny.com
Template:     generatepress
Version:      1.0.0
*/

/* This stylesheet is loaded as an external file via functions.php, not an
   inline <style> block, so it survives LiteSpeed Cache's HTML minification
   without needing !important overrides. */

  /* ============================================
     TOKENS
     Gold and black only. Victorian mourning still
     the reference (gilt locket frames, black crepe,
     aged ivory stationery) but the palette is pared
     to a single metal against layered darkness, with
     gradients doing the work of depth rather than a
     second or third accent hue.
     ============================================ */
  :root{
    --void:         #0a0908;   /* base black, warm not pure */
    --void-deep:    #030202;   /* deepest recess */
    --panel:        #16110d;   /* raised surface */
    --panel-line:   #3a2f22;   /* gilt-toned hairline, dimmed */
    --gilt:         #b4854a;   /* tarnished brass */
    --gilt-bright:  #e0ac62;   /* polished gold, hover / emphasis */
    --gilt-dim:     #5c4527;   /* recessed gold, for subtle glows */
    --bone:         #e7dcc6;   /* aged ivory stationery */
    --bone-dim:     #a99a80;
    --ash:          #55483a;

    --font-display: 'Cormorant Garamond', serif;
    --font-label:   'Barlow Condensed', sans-serif;
    --font-mono:    'Space Mono', monospace;

    --edge: 1px solid var(--panel-line);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    margin: 0;
    /* deep layered gradient instead of a flat fill, so the void has depth */
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, #171009 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 20% 100%, #120d08 0%, transparent 55%),
      var(--void);
    color: var(--bone);
    font-family: var(--font-display);
    overflow-x: hidden;
  }

  a{ color: inherit; }

  .grain{
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: .06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .vignette{
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.78) 100%);
  }

  /* ============================================
     DIVIDER (signature element)
     A gilt rule fading to black on each end with a
     single lozenge ornament at center. Static, no
     illustration, no motion. Reads as a mourning
     card's printed rule rather than stage dressing.
     ============================================ */
  .divider{
    position: relative; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 0;
  }
  .divider::before, .divider::after{
    content: ""; height: 1px; width: 140px; max-width: 30vw;
    background: linear-gradient(90deg, transparent, var(--gilt-dim));
  }
  .divider::after{ background: linear-gradient(90deg, var(--gilt-dim), transparent); }
  .divider__mark{
    width: 9px; height: 9px; margin: 0 16px;
    background: var(--gilt);
    transform: rotate(45deg);
    box-shadow: 0 0 10px 1px rgba(180,133,74,.45);
  }

  /* ============================================
     HERO
     Full-bleed band photo. The wordmark and drip
     lettering already live in the image itself, so
     the hero does not repeat the band name in type,
     it only adds the EPK label, tagline, and CTAs
     over a scrim at the base of the photo.
     ============================================ */
  .hero{
    position: relative;
    min-height: 92vh;
    display: flex; align-items: flex-end; justify-content: center;
    text-align: center;
    overflow: hidden;
    background: var(--void-deep);
  }
  .hero__photo{
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%;
    /* light sepia duotone pass so the photo sits naturally in the page's palette */
    filter: sepia(.35) contrast(1.08) brightness(.92);
  }
  .hero::before{
    /* scrim: image reads clean up top, darkens toward the CTA band at bottom */
    content: ""; position: absolute; z-index: 1; inset: 0;
    background: linear-gradient(180deg, rgba(10,8,6,.15) 0%, rgba(10,8,6,.35) 55%, rgba(6,4,3,.92) 100%);
  }
  .hero__frame{
    position: relative; z-index: 2;
    max-width: 760px;
    padding: 0 2rem 3.5rem;
  }

  .hero__eyebrow{
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .38em;
    font-size: .74rem;
    color: var(--gilt-bright);
    margin: 0 0 1rem;
  }

  .hero__tagline{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    color: var(--bone-dim);
    margin: 0 auto;
    max-width: 500px;
    line-height: 1.6;
  }

  .hero__cta{
    display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
    margin-top: 1.75rem;
  }
  .btn{
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    font-weight: 600;
    padding: .7rem 1.4rem;
    border: 1px solid var(--gilt);
    background: rgba(255,255,255,.02);
    color: var(--gilt-bright);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
  }
  .btn:hover{ background: rgba(180,133,74,.14); border-color: var(--gilt-bright); }
  .btn--solid{
    background: linear-gradient(160deg, var(--gilt), var(--gilt-dim));
    color: var(--void-deep);
    border-color: var(--gilt);
    font-weight: 700;
  }
  .btn--solid:hover{ background: linear-gradient(160deg, var(--gilt-bright), var(--gilt)); }

  /* ============================================
     BILLING BAR
     ============================================ */
  .billing{
    position: relative; z-index: 5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border-top: var(--edge); border-bottom: var(--edge);
    background: linear-gradient(180deg, var(--void-deep), var(--void));
  }
  .billing__item{
    padding: 1.4rem 1.25rem;
    text-align: center;
    border-left: var(--edge);
  }
  .billing__item:first-child{ border-left: none; }
  .billing__label{
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ash);
    margin: 0 0 .4rem;
  }
  .billing__value{
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .02em;
    color: var(--bone);
    margin: 0;
  }

  /* ============================================
     SECTION SHELL
     ============================================ */
  section{
    position: relative; z-index: 5;
    padding: 5rem 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
  }
  .section__head{ text-align: center; margin-bottom: 3rem; }
  .section__eyebrow{
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    margin: 0 0 .6rem;
  }
  .section__title{
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(2rem, 4.6vw, 3rem);
    letter-spacing: .01em;
    margin: 0;
  }

  /* ============================================
     BIO
     ============================================ */
  .bio{
    display: grid;
    grid-template-columns: .85fr 1.3fr;
    gap: 3rem;
    align-items: center;
  }
  .cameo{
    aspect-ratio: 4 / 5;
    min-width: 0;
    border-radius: 50% / 42%;
    border: 2px solid var(--gilt);
    box-shadow: 0 0 0 8px var(--void-deep), 0 0 0 9px var(--panel-line);
    background:
      radial-gradient(ellipse at 50% 20%, rgba(180,133,74,.16), transparent 65%),
      linear-gradient(170deg, var(--panel) 0%, var(--void-deep) 100%);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
  }
  .cameo p{
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ash);
    line-height: 1.8;
    padding: 1.5rem;
  }
  .cameo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .bio__copy p{
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--bone-dim);
    font-style: italic;
  }
  .bio__copy p:first-of-type{ color: var(--bone); }
  .fans-of{
    text-align: center;
    max-width: 720px;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--panel-line);
  }
  .fans-of__label{
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ash);
    margin: 0 0 .5rem;
  }
  .fans-of__list{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--bone-dim);
  }
  .placeholder-flag{
    display: inline-block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    border: 1px solid var(--gilt-dim);
    padding: .2rem .55rem;
    margin-bottom: 1rem;
  }

  /* ============================================
     PULL QUOTE
     Real quotes from the band's SONIQLOOX interview.
     ============================================ */
  .pull-quote{
    text-align: center;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: var(--bone);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.55;
  }
  .pull-quote cite{
    display: block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    margin-top: 1.25rem;
  }

  /* ============================================
     THE ACT (band members, cabinet-card portraits)
     ============================================ */
  .company{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 2rem;
    max-width: 820px;
    margin: 0 auto;
  }
  .company__card{ text-align: center; min-width: 0; flex: 0 0 27%; }
  .company__cameo{
    aspect-ratio: 3/4;
    border-radius: 50% / 42%;
    border: 2px solid var(--gilt);
    box-shadow: 0 0 0 6px var(--void-deep), 0 0 0 7px var(--panel-line);
    background: linear-gradient(170deg, var(--panel) 0%, var(--void-deep) 100%);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    margin: 0 auto 1.1rem;
    max-width: 240px;
    overflow: hidden;
  }
  .company__cameo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .company__cameo--mystery{
    background: var(--void-deep);
  }
  .company__cameo--mystery span{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 11rem;
    line-height: 1;
    color: var(--gilt);
    opacity: .12;
  }
  .company__cameo p{
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ash); line-height: 1.7;
    padding: .75rem;
  }
  .company__name{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--bone);
    margin: 0 0 .2rem;
  }
  .company__role{
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    margin: 0;
  }

  /* ============================================
     NOW PLAYING (music)
     ============================================ */
  .track{
    background: linear-gradient(155deg, var(--panel), var(--void-deep));
    border: var(--edge);
    padding: 2rem;
    max-width: 640px;
    margin: 0 auto;
  }
  .track__embed{ margin: 1.25rem 0 1.5rem; border-radius: 3px; overflow: hidden; }
  .track__embed iframe{ display: block; }
  .track__label{
    font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--gilt-bright); margin: 0 0 .5rem;
  }
  .track__title{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 2.2rem;
    margin: 0 0 1.25rem;
  }
  .track__links{ display: flex; flex-wrap: wrap; gap: .6rem; }

  /* ============================================
     ON FILM (video)
     ============================================ */
  .film{
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, var(--panel), var(--void-deep));
    border: var(--edge);
    padding: 3rem 2rem;
  }
  .film p.desc{
    color: var(--bone-dim); font-style: italic; font-size: 1.1rem;
    max-width: 460px; margin: 0 auto 2rem;
  }
  .film-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
  }
  .film-grid__item{
    aspect-ratio: 16 / 9;
    min-width: 0;
    border: 1px solid var(--panel-line);
    overflow: hidden;
    background: var(--void-deep);
  }
  .film-grid__item iframe{ width: 100%; height: 100%; display: block; border: 0; }
  .film__more{
    display: inline-block;
    margin-top: 1.75rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--bone-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--panel-line);
  }
  .film__more:hover{ color: var(--gilt-bright); border-color: var(--gilt-dim); }

  /* ============================================
     VIDEO BREAK
     A full-bleed cinematic pause between sections,
     ambient looping YouTube footage behind a golden
     glaze (mix-blend-mode: color) and a dark vignette,
     with gilt marks framing the corners. Decorative
     only, no essential content, so it's marked
     aria-hidden in the markup.
     ============================================ */
  .video-break{
    position: relative;
    height: 52vh;
    min-height: 320px;
    max-height: 560px;
    overflow: hidden;
    border-top: var(--edge);
    border-bottom: var(--edge);
  }
  .video-break__embed{
    position: absolute; top: 50%; left: 50%;
    width: 100vw; height: 56.25vw;      /* 16:9 based on width */
    min-height: 100%; min-width: 177.78vh; /* 16:9 based on height, whichever fills more */
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .video-break__embed iframe{
    width: 100%; height: 100%; display: block; border: 0;
    /* heavy contrast, desaturated toward sepia, so the footage reads
       as ghostly archival rather than a clean modern clip */
    filter: sepia(.55) contrast(1.55) brightness(.6) saturate(1.05);
  }
  .video-break__glaze{
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(155deg, var(--gilt-bright) 0%, var(--gilt-dim) 45%, var(--gilt) 100%);
    mix-blend-mode: color;
    opacity: .8;
    pointer-events: none;
  }
  .video-break::after{
    content: "";
    position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(3,2,2,.75) 100%);
  }
  .video-break__corner{
    position: absolute; z-index: 3;
    width: 9px; height: 9px;
    background: var(--gilt);
    transform: rotate(45deg);
    box-shadow: 0 0 14px 1px rgba(180,133,74,.5);
  }
  .video-break__corner--tl{ top: 22px; left: 22px; }
  .video-break__corner--tr{ top: 22px; right: 22px; }
  .video-break__corner--bl{ bottom: 22px; left: 22px; }
  .video-break__corner--br{ bottom: 22px; right: 22px; }
  @media (max-width: 720px){
    .video-break{ height: 40vh; min-height: 240px; }
    .video-break__corner{ width: 7px; height: 7px; }
    .video-break__corner--tl{ top: 14px; left: 14px; }
    .video-break__corner--tr{ top: 14px; right: 14px; }
    .video-break__corner--bl{ bottom: 14px; left: 14px; }
    .video-break__corner--br{ bottom: 14px; right: 14px; }
  }

  /* ============================================
     PRESS QUOTES
     ============================================ */
  .press-quotes{
    max-width: 720px;
    margin: 0 auto;
  }
  .press-quote{
    border-left: 2px solid var(--gilt);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
  }
  .press-quote:last-child{ margin-bottom: 0; }
  .press-quote p{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--bone);
    margin: 0 0 .6rem;
  }
  .press-quote cite{
    font-family: var(--font-mono);
    font-style: normal;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gilt-bright);
  }
  .press-quote cite a{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--gilt-dim); }
  .press-quote cite a:hover{ border-color: var(--gilt-bright); }

  /* ============================================
     PRESS PHOTOS (cabinet cards)
     ============================================ */
  .gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .gallery__frame{
    aspect-ratio: 3/4;
    min-width: 0;
    border: 1px solid var(--panel-line);
    background: linear-gradient(165deg, var(--panel), var(--void-deep));
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 1rem;
    position: relative;
  }
  .gallery__frame::before{
    content:""; position: absolute; inset: 6px;
    border: 1px solid var(--ash); opacity: .4; pointer-events: none;
  }
  .gallery__frame p{
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ash); line-height: 1.7;
  }
  .gallery__frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo-credit{
    text-align: center;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--ash);
    margin-top: 1.5rem;
  }
  .photo-credit a{ color: var(--bone-dim); text-decoration: none; border-bottom: 1px solid var(--panel-line); }
  .photo-credit a:hover{ color: var(--gilt-bright); border-color: var(--gilt-dim); }

  /* ============================================
     DATES
     ============================================ */
  .dates-intro{
    text-align: center;
    font-style: italic;
    color: var(--bone-dim);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 2rem;
    line-height: 1.6;
  }
  .dates-panel{
    padding: 2.5rem;
    border: var(--edge);
    background: linear-gradient(160deg, var(--panel), var(--void-deep));
  }
  .dates-list{
    list-style: none; margin: 0; padding: 0;
    border-top: var(--edge);
  }
  .dates-list li{
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: 1.1rem .25rem;
    border-bottom: var(--edge);
  }
  .dates-list__date{
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gilt-bright);
    white-space: nowrap;
    min-width: 110px;
  }
  .dates-list__venue{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--bone);
    flex: 1;
    min-width: 200px;
  }
  .dates-list__city{
    font-family: var(--font-label);
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bone-dim);
    white-space: nowrap;
  }
  .dates-list__tag{
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .25rem .6rem;
    border: 1px solid var(--panel-line);
    color: var(--ash);
    text-decoration: none;
  }
  .dates-list__tag--link{
    border-color: var(--gilt);
    color: var(--gilt-bright);
    transition: background .2s ease;
  }
  .dates-list__tag--link:hover{ background: rgba(180,133,74,.14); }
  .dates-empty{
    color: var(--bone-dim);
    font-style: italic;
    font-size: 1.1rem;
    text-align: center;
    margin: 0;
    padding: 1rem 0;
  }

  /* ============================================
     BOOKING / CONTACT
     ============================================ */
  .booking{ text-align: center; }
  .booking__email{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    color: var(--gilt-bright);
    text-decoration: none;
    display: inline-block;
    margin: .5rem 0 .75rem;
    border-bottom: 1px solid var(--gilt-dim);
  }
  .booking__contact{
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--bone-dim);
    margin: 0 0 2rem;
  }
  .booking__contact a{ color: var(--gilt-bright); text-decoration: none; }
  .booking__contact a:hover{ border-bottom: 1px solid var(--gilt-dim); }
  .social-row{
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  }

  /* ============================================
     SCROLL REVEAL
     Sections fade and rise into place as they enter
     view, curtains parting rather than a static page
     dump. JS toggles .is-visible via IntersectionObserver
     (see script at the bottom of page-epk.php). Falls
     back to fully visible, no motion, for reduced-motion
     preference or if JS never runs.
     ============================================ */
  .reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s ease, transform .9s ease;
  }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; transition: none; }
  }

  /* ============================================
     BBD FOOTER ATTRIBUTION
     ============================================ */
  footer.site-foot{
    position: relative; z-index: 5;
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
    border-top: var(--edge);
  }
  .bbd-pill{
    display: inline-flex; align-items: center;
    height: 34px; padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--panel-line);
    background: var(--void-deep);
    font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .06em;
    color: var(--bone-dim);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    max-width: 70px;
    transition: max-width .45s ease, color .3s ease, border-color .3s ease;
  }
  .bbd-pill:hover{
    max-width: 200px;
    color: var(--gilt-bright);
    border-color: var(--gilt);
  }
  .bbd-pill__dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gilt); flex: none; margin-right: 8px;
  }
  .bbd-pill__full{ display: none; }
  .bbd-pill:hover .bbd-pill__short{ display: none; }
  .bbd-pill:hover .bbd-pill__full{ display: inline; }

  /* ============================================
     RESPONSIVE
     ============================================ */
  @media (max-width: 720px){
    .bio{ grid-template-columns: 1fr; }
    .cameo{ max-width: 260px; margin: 0 auto; }
    .track{ grid-template-columns: 1fr; }
    .company{ gap: 2rem 0; }
    .company__card{ flex-basis: 100%; max-width: 260px; margin: 0 auto; }
    .company__cameo{ max-width: 220px; }
    .gallery{ grid-template-columns: repeat(2, 1fr); }
    .billing{ grid-template-columns: repeat(2, 1fr); }
    .billing__item:nth-child(2){ border-left: var(--edge); }
    section{ padding: 3.5rem 1.25rem; }

    /* Hero: on a tall narrow viewport, cover-cropping a wide landscape
       photo hides the edges of the hand-lettered logo. Let the photo run
       full width at its natural height instead, then stack the eyebrow,
       tagline and CTAs below it on a solid panel. Nothing gets cropped. */
    .hero{
      display: block;
      min-height: 0;
    }
    .hero__photo{
      position: relative;
      width: 100%;
      height: auto;
      object-fit: unset;
    }
    .hero::before{ display: none; }
    .hero__frame{
      position: relative;
      max-width: none;
      padding: 2rem 1.5rem 2.5rem;
      background: linear-gradient(180deg, var(--void-deep), var(--void));
    }
  }
  @media (max-width: 480px){
    .film-grid{ grid-template-columns: 1fr; }
  }

  /* prevent long addresses from overflowing narrow viewports */
  .booking__email{ word-break: break-word; overflow-wrap: break-word; }

  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--gilt-bright);
    outline-offset: 2px;
  }

  /* visually hidden but present for screen readers and SEO, since the band
     name now lives inside the hero photo rather than as rendered text */
  .sr-only{
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }