/* ============================================================
   AURA BROADBEACH — Studio Loock
   Direction: restraint. Deep black, one metallic accent,
   very large thin type, slow motion. No neon.
   ============================================================ */

:root{
  --void:#08080a;
  --ink:#101416;
  --panel:#12171a;
  --smoke:#182023;
  --ink-lift:#131a1c;
  --slate:#192225;   /* one clear step up, so the bands are not all one black */

  /* primary accent: sampled from the venue's own logo glow, hue 180 */
  --teal-lift:#6fd2d0;   /* type, hairlines, icons  — 11.8:1 on void */
  --teal:#0fa39f;        /* solid fills only        —  6.4:1 with void text */
  --teal-glow:#0e7c7b;   /* atmosphere only, never a flat fill */
  --white:#f7fbfb;       /* headlines and logo */

  /* rare accent: booths and bottle service only */
  --gold:#e8dcc4;
  --gold-dim:#b0a488;

  /* legacy aliases, kept so nothing breaks */
  --champagne:var(--gold);
  --champagne-dim:var(--gold-dim);
  --metal-1:var(--white);
  --metal-2:var(--teal-lift);
  --metal-3:var(--teal);

  --text:#e6ecec;
  --muted:#8b9a9a;
  --faint:#5f6d6d;
  --line:rgba(111,210,208,0.16);
  --line-soft:rgba(111,210,208,0.08);

  --display:'Jost',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;

  --pad:clamp(22px,6vw,96px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:80px; -webkit-text-size-adjust:100%;}



body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.65;
  font-weight:300; letter-spacing:0.005em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block;}
a{color:inherit;}

/* ---------- grain ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:200; margin:0; color:var(--white);
  text-transform:uppercase; line-height:1.02; letter-spacing:0.06em;
}
h1{font-size:clamp(50px,11vw,116px); letter-spacing:0.09em;}
h2{font-size:clamp(37px,8.6vw,64px);}
h3{font-size:clamp(24px,5.4vw,28px); letter-spacing:0.13em; font-weight:300;}
h4{font-size:14px; letter-spacing:0.2em; font-weight:400;}
p{margin:0;}

.eyebrow{
  font-family:var(--display); font-size:11px; font-weight:400;
  letter-spacing:0.42em; text-transform:uppercase; color:var(--metal-2);
}
.lead{font-size:clamp(17px,1.5vw,19px); color:var(--muted); line-height:1.75; max-width:62ch;}
.metal{
  background:linear-gradient(166deg,var(--white) 0%,var(--white) 30%,#dcefee 48%,#c7e6e4 58%,var(--white) 78%,var(--white) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rule{height:1px; background:var(--line); border:0; margin:0;}

/* ---------- layout ---------- */
.wrap{max-width:1320px; margin:0 auto; padding-inline:var(--pad);}
section{position:relative;}
.band{padding-block:clamp(72px,11vw,160px);}
.band-tight{padding-block:clamp(52px,7vw,96px);}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--pad); transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(8,8,10,0.94); border-bottom-color:var(--line-soft); padding-block:13px;}
.nav-logo img{width:clamp(86px,10vw,116px);}
.nav-links{display:flex; align-items:center; gap:clamp(18px,2.6vw,40px);}
.nav-links a{
  font-family:var(--display); font-size:11.5px; letter-spacing:0.24em; text-transform:uppercase;
  text-decoration:none; color:var(--text); opacity:.68; transition:opacity .3s var(--ease); white-space:nowrap;
}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current]{opacity:1;}
.nav-links a[aria-current]{color:var(--teal-lift);}
@media (max-width:760px){
  .nav-links .hide-sm{display:none;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--display); font-size:11.5px; font-weight:400;
  letter-spacing:0.26em; text-transform:uppercase; text-decoration:none;
  padding:16px 30px; border:1px solid var(--line); color:var(--text);
  background:transparent; transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  cursor:pointer; white-space:nowrap;
}
.btn:hover,.btn:focus-visible{background:var(--teal); color:var(--void); border-color:var(--teal);}
.btn-solid{background:var(--teal); color:var(--void); border-color:var(--teal);}
.btn-solid:hover,.btn-solid:focus-visible{background:transparent; color:var(--teal-lift); border-color:var(--teal-lift);}
.btn-sm{padding:12px 22px; font-size:10.5px; letter-spacing:0.22em;}
:focus-visible{outline:2px solid var(--teal-lift); outline-offset:3px;}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:120px var(--pad) 64px; overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img,.hero-bg video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-bg img{opacity:.66;}
.hero-video{opacity:0; transition:opacity 1.4s var(--ease);}
.hero-video.ready{opacity:.78;}
.hero-video.ready ~ img,.hero-bg:has(.hero-video.ready) img{opacity:0;}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(116% 84% at 50% 44%, rgba(8,8,10,.06) 0%, rgba(8,8,10,.44) 62%, var(--void) 100%),
    linear-gradient(180deg, rgba(8,8,10,.52) 0%, transparent 22%, transparent 66%, var(--void) 100%);
}
.hero-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:clamp(30px,4.4vw,52px);}
.hero-logo{width:clamp(210px,30vw,430px);}
.hero-sub{
  font-family:var(--display); font-size:clamp(11px,1.3vw,13px); font-weight:300;
  letter-spacing:0.46em; text-transform:uppercase; color:var(--white);
}
.hero-nights{
  font-family:var(--display); font-size:clamp(10.5px,1.15vw,12.5px); font-weight:300;
  letter-spacing:0.42em; text-transform:uppercase; color:var(--metal-2);
  margin-top:calc(-1 * clamp(12px,1.6vw,20px));
}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:1;
  font-family:var(--display); font-size:9.5px; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--faint); text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:9px;
}
.scroll-cue span{display:block; width:1px; height:38px; background:linear-gradient(var(--teal),transparent); animation:drop 2.6s var(--ease) infinite;}
@keyframes drop{0%,100%{opacity:.3; transform:scaleY(.55); transform-origin:top;}50%{opacity:1; transform:scaleY(1);}}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none;}}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);}
.rv.on{opacity:1; transform:none; }

/* ---------- section head ---------- */
.head{display:flex; flex-direction:column; gap:20px; margin-bottom:clamp(38px,5vw,64px); max-width:74ch;}
.head.center{align-items:center; text-align:center; margin-inline:auto;}
.h-tight{max-width:15ch;}
.h-tight-sm{max-width:11ch;}

/* ---------- the room mosaic ---------- */
.mosaic{display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:1fr 1fr; gap:clamp(10px,1.4vw,20px);}
.mosaic figure{margin:0; position:relative; overflow:hidden; background:var(--panel);}
.mosaic img{width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 1.4s var(--ease);}
.mosaic figure:hover img{transform:scale(1.035);}
.m-a{grid-row:span 2; aspect-ratio:4/5;}
.m-b,.m-c{min-height:0;}
.m-b img,.m-c img{height:100%;}
@media (max-width:760px){
  .mosaic{grid-template-columns:1fr;}
  .mosaic{grid-template-rows:auto;}
  /* phones show each photo whole, at its own shape, so no heads are cut off */
  .m-a{grid-row:auto; aspect-ratio:4/5;}
  .m-b{aspect-ratio:3/2;}
  .m-c{aspect-ratio:4/3;}
}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,84px); align-items:center;}
.split.narrow{grid-template-columns:1fr 1.15fr;}
@media (max-width:860px){.split,.split.narrow{grid-template-columns:1fr; gap:34px;}}
.split figure{margin:0; overflow:hidden; background:var(--panel);}
.split figure img{width:100%; aspect-ratio:4/3; object-fit:cover;}

/* ---------- list rows ---------- */
.rows{border-top:1px solid var(--line-soft);}
.row{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,44px); align-items:baseline;
  padding:clamp(20px,2.6vw,30px) 0; border-bottom:1px solid var(--line-soft);
}
.row .n{font-family:var(--display); font-size:11px; letter-spacing:0.22em; color:var(--faint);}
.row .t{font-family:var(--display); font-size:clamp(21px,2vw,23px); font-weight:200; letter-spacing:0.1em; text-transform:uppercase;}
.row .d{color:var(--muted); font-size:14.5px; margin-top:6px; max-width:56ch;}
.row .v{font-family:var(--display); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--metal-2); text-align:right;}
@media (max-width:640px){
  .row{grid-template-columns:1fr; gap:6px;}
  .row .v{text-align:left; margin-top:8px;}
}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(14px,1.8vw,22px);}
.card{
  border:1px solid var(--line-soft); background:linear-gradient(180deg,var(--panel),var(--ink));
  padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:14px;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.card:hover{border-color:var(--line); transform:translateY(-3px);}
.card .cap{font-family:var(--display); font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--metal-2);}
.card p{color:var(--muted); font-size:14.5px;}
.card ul{margin:0; padding-left:17px; color:var(--muted); font-size:14.5px;}
.card li{margin-bottom:5px;}
.card .price{font-family:var(--display); font-weight:200; font-size:clamp(30px,3vw,34px); letter-spacing:0.06em;}

/* ---------- feature band ---------- */
.feature{position:relative; min-height:72svh; display:flex; align-items:flex-end; overflow:hidden;}
.feature-bg{position:absolute; inset:0;}
.feature-bg img{width:100%; height:100%; object-fit:cover; opacity:.42;}
.feature-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.8) 0%,transparent 38%,rgba(8,8,10,.92) 100%);}
.feature .wrap{position:relative; z-index:1; padding-block:clamp(48px,7vw,90px);}

/* ---------- booking slot ---------- */
.slot{
  border:1px solid var(--line-soft); background:var(--ink);
  padding:clamp(28px,4vw,52px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.slot .note{font-size:13px; color:var(--faint); max-width:52ch;}
.embed{width:100%; min-height:520px; border:0; background:var(--panel);}

/* ---------- SevenRooms booking panel (app.js, section 5) ---------- */
.sr-modal{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  padding:clamp(0px,3vw,32px); background:rgba(8,8,10,.82);
}
.sr-modal.open{display:flex;}
.sr-panel{
  display:flex; flex-direction:column; width:100%; max-width:560px; height:min(860px,100%);
  border:1px solid var(--line-soft); background:var(--ink);
}
.sr-bar{
  display:flex; align-items:center; justify-content:space-between; flex:none;
  height:52px; padding:0 6px 0 20px; border-bottom:1px solid var(--line-soft);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.sr-close{
  width:44px; height:44px; border:0; background:none; cursor:pointer;
  color:var(--white); font-size:28px; line-height:1;
}
.sr-close:hover,.sr-close:focus-visible{color:var(--teal-lift);}
.sr-body{position:relative; flex:1;}
.sr-wait{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.sr-body iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff; transition:opacity .3s;}
.sr-modal.loading .sr-body iframe{opacity:0;}
html.sr-lock,html.sr-lock body{overflow:hidden;}
@media (max-width:600px){
  .sr-modal{padding:0;}
  .sr-panel{max-width:none; height:100%; border:0;}
}

/* ---------- info grid ---------- */
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(22px,3vw,44px);}
.info .k{font-family:var(--display); font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--metal-2); margin-bottom:10px;}
.info .v{font-size:15px; color:var(--text); line-height:1.7;}
.info .v span{color:var(--muted);}

/* ---------- map ---------- */
.map{width:100%; aspect-ratio:16/9; border:1px solid var(--line-soft); filter:grayscale(1) invert(.9) contrast(.85) brightness(.95); background:var(--panel);}
.map-shell{background:var(--panel); border:1px solid var(--line-soft);}
@media (max-width:640px){.map{aspect-ratio:4/3;}}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-soft); padding-block:clamp(48px,6vw,76px); background:var(--ink);}
.foot{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start;}
@media (max-width:760px){.foot{grid-template-columns:1fr; gap:34px;}}
.foot img{width:132px; margin-bottom:20px;}
.foot h4{color:var(--metal-2); margin-bottom:14px;}
.foot a{color:var(--muted); text-decoration:none; font-size:14.5px; display:block; padding:4px 0; transition:color .3s var(--ease);}
.foot a:hover{color:var(--teal-lift);}
.foot p{color:var(--muted); font-size:14.5px;}
.colophon{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  margin-top:clamp(38px,5vw,60px); padding-top:24px; border-top:1px solid var(--line-soft);
  font-size:11.5px; letter-spacing:0.1em; color:var(--faint);
}
.colophon a{color:var(--faint); text-decoration:none;}
.colophon a:hover{color:var(--muted);}

/* ---------- placeholder marker ---------- */
.ph{
  display:inline-block; font-family:var(--display); font-size:9.5px; letter-spacing:0.24em;
  text-transform:uppercase; color:#0b0b0d; background:var(--metal-2);
  padding:3px 9px; border-radius:2px; vertical-align:middle;
}

/* ============================================================
   SCROLL CHOREOGRAPHY
   Hero pins and recedes, the page slides up over it,
   the logo hands off from hero to nav.
   ============================================================ */

/* Lenis */
html.lenis,html.lenis body{height:auto;}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}

/* ---- hero pin ---- */
.hero{
  position:sticky; top:0; z-index:0; height:100svh;
}
.hero-inner{
  will-change:transform,opacity;
  transform:translate3d(0,calc(var(--hp,0) * -46px),0) scale(calc(1 - var(--hp,0) * 0.085));
  opacity:calc(1 - var(--hp,0) * 1.25);
}
.hero-bg img,.hero-bg video{
  transform:scale(calc(1 + var(--hp,0) * 0.10));
}
.scroll-cue{opacity:calc(1 - var(--hp,0) * 2.4); pointer-events:none;}

/* ---- the page rides up over the hero ---- */
#main > section:first-of-type,
main > section.band-tight:first-of-type{
  position:relative; z-index:2;
  margin-top:0;
  border-radius:0;
  background:var(--slate);
  box-shadow:inset 0 1px 0 rgba(111,210,208,0.055);
}
main > section:not(.hero) ~ section, footer.site{position:relative; z-index:2;}
main > section:not(.hero){background-color:var(--void);}
#main > section:first-of-type,
main > section.band-tight:first-of-type{background-color:var(--slate);}
main > section.band-slate{background-color:var(--slate); box-shadow:inset 0 1px 0 rgba(111,210,208,0.055);}
main > section.bg-ink-band{background-color:var(--ink);}


/* ---- nav logo hand-off ---- */
.nav-logo{
  display:block;
  /* faintly there at rest, lifts to full metallic as you scroll */
  opacity:calc(0.55 + var(--navlogo,0) * 0.45);
  filter:saturate(calc(0.35 + var(--navlogo,0) * 0.65))
         brightness(calc(0.88 + var(--navlogo,0) * 0.12));
  transform:translate3d(0,calc((1 - var(--navlogo,0)) * 4px),0);
  transition:opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease);
}
.nav-logo:hover{opacity:1; filter:none;}
.nav-logo.always{opacity:1; filter:none; transform:none;}

/* ---- staggered reveals ---- */
.rv{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity .75s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.rv.on{opacity:1; transform:none;}

/* children stagger inside a revealed block */
.stagger.on > *{animation:rise 1s var(--ease) both;}
.stagger.on > *:nth-child(1){animation-delay:.04s;}
.stagger.on > *:nth-child(2){animation-delay:.12s;}
.stagger.on > *:nth-child(3){animation-delay:.2s;}
.stagger.on > *:nth-child(4){animation-delay:.28s;}
.stagger.on > *:nth-child(5){animation-delay:.36s;}
.stagger.on > *:nth-child(6){animation-delay:.44s;}
@keyframes rise{from{opacity:0; transform:translate3d(0,26px,0);} to{opacity:1; transform:none;}}

/* headline lines lift in */
.lift{display:block; overflow:hidden;}
.lift > span{
  display:block;
  transform:translate3d(0,105%,0);
  transition:transform 1.05s var(--ease);
  transition-delay:var(--d,0ms);
}
.on .lift > span, .lift.on > span{transform:none;}

@media (prefers-reduced-motion:reduce){
  .hero-video{display:none;}
  .hero{position:relative;}
  .hero-inner,.hero-bg img{transform:none; opacity:1;}
  .rv,.lift > span{opacity:1; transform:none; transition:none;}
  .stagger.on > *{animation:none;}
  .nav-logo{opacity:1; filter:none; transform:none;}
  .scroll-cue{opacity:1;}
}

/* ---------- footer contact icons ---------- */
.foot a.with-ico{display:flex; align-items:center; gap:11px;}
.foot a.with-ico svg{
  width:15px; height:15px; flex:0 0 15px;
  fill:none; stroke:var(--metal-2); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .3s var(--ease), transform .3s var(--ease);
}
.foot a.with-ico:hover svg{stroke:var(--white); transform:translateY(-1px);}
.foot a.with-ico svg .fillbit{fill:var(--metal-2); stroke:none; transition:fill .3s var(--ease);}
.foot a.with-ico:hover svg .fillbit{fill:var(--white);}

/* ---------- header Book Now ---------- */
.nav-cta{
  margin-left:clamp(4px,1.4vw,16px);
  padding:12px 24px;
  font-size:10.5px; letter-spacing:0.22em;
  opacity:1 !important;
  border:1px solid rgba(236,233,227,0.5);
  color:var(--text);
  border-radius:0;
}
.nav-cta:hover,.nav-cta:focus-visible{
  background:var(--teal); color:var(--void); border-color:var(--teal);
}
.nav-links a.nav-cta{opacity:1;}
@media (max-width:560px){
  .nav-cta{padding:10px 13px; font-size:9.5px; letter-spacing:0.1em; margin-left:10px;}
  .nav-links a{letter-spacing:0.18em;}
  .nav{gap:10px; padding-inline:18px;}
  .nav-links{gap:19px;}
  .nav-logo img{width:78px;}
}

/* ---------- mobile: equal-width stacked hero buttons, bigger type ---------- */
@media (max-width:600px){
  .hero-cta{
    flex-direction:column;
    width:min(320px, 82vw);
    gap:12px;
  }
  .hero-cta .btn{width:100%; padding:17px 20px;}
  .eyebrow{font-size:12px;}
  .head{gap:16px;}
  .info .v{font-size:16px;}
  .card p, .card ul, .card li{font-size:15.5px;}
  .row .d{font-size:15.5px;}
  .foot a, .foot p{font-size:15.5px;}
}

/* ---------- mobile: headings bleed to the same edges as body copy ---------- */
@media (max-width:760px){
  h1, h2, h3, .statement,
  .h-tight, .h-tight-sm, .med-heading,
  .hero h1, .head h2, .split .copy h2{
    max-width:100% !important;
    width:100%;
  }
  .head{max-width:100%;}
  .lead, .card p, .row .d{max-width:100%;}
}


/* ============================================================
   GOLD, USED RARELY
   Booths and bottle service only. Gold and teal never touch:
   where both appear in a section, one is a hairline and the
   other is type.
   ============================================================ */
.eyebrow.gold,
.card .cap.gold{color:var(--gold);}

/* ============================================================
   THE GLOW
   The logo in Aura's own artwork sits inside a soft teal bloom.
   Built as light (screen blend), not paint. Twice on a page is
   atmosphere; more is a theme park.
   ============================================================ */
.hero-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 46% 38% at 50% 43%, rgba(14,124,123,0.46), transparent 68%);
  opacity:calc(1 - var(--hp,0) * 0.9);
}
.feature .feature-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 60% 70% at 72% 40%, rgba(14,124,123,0.3), transparent 72%);
}
@media (prefers-reduced-motion:reduce){
  .hero-glow{opacity:1;}
}


/* ============================================================
   BAND DEPTH
   The sections were all within a few points of each other and
   read as one flat black. One step up, used twice, with a hair
   of light on the top edge so the step looks deliberate.
   ============================================================ */
.band-slate{
  background:var(--slate);
  box-shadow:inset 0 1px 0 rgba(111,210,208,0.055);
}
.band-void{background:var(--void);}
footer.site{background:var(--void);}


/* the hero statement breaks after "Late" on phones so "room" never sits alone */
.br-sm{display:none;}
@media (max-width:560px){
  .br-sm{display:block;}
  .hero-sub{text-wrap:initial;}
}

/* two booth tiers: keep the pair centred at a sane width rather than stretching to the gutters */
.cards.two-up{max-width:820px; margin-inline:auto;}