/* ==========================================================================
   GuadalaHARRY's Bar & Grill
   Downtown Conroe, Texas
   ========================================================================== */

:root{
  /* Gulf water, from the deep end to the shallows */
  --gulf-900:#061B1F;
  --gulf-800:#0B2E33;
  --gulf-700:#12454C;
  --gulf-600:#1A5A62;

  /* Sunset behind the hammock */
  --sunset:#F2681C;
  --mango:#FDBE2C;
  --coral:#D33A28;
  /* Deeper coral for small text. Plain --coral reads 4.25:1 on sand,
     just under the 4.5:1 floor for body sized type. */
  --coral-ink:#AE2C1F;
  --palm:#3FA34D;
  --palm-dark:#25703A;

  /* Sand and paper */
  --sand:#FBF1DD;
  --sand-2:#F3E2C1;
  --sand-3:#E6D2AC;
  --ink:#14100C;

  --shadow-hard:0 10px 0 rgba(6,27,31,.18);
  --radius:14px;
  --maxw:1240px;

  --f-display:"Alfa Slab One", Georgia, serif;
  --f-script:"Yellowtail", cursive;
  --f-body:"Barlow", system-ui, -apple-system, sans-serif;
  --f-util:"Barlow Condensed", "Barlow", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  font-size:20px;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.6;
  overflow-x:clip;
}

img{max-width:100%;display:block}

a{color:var(--coral);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--sunset)}

:focus-visible{
  outline:3px solid var(--mango);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
.wrap-narrow{max-width:860px}

.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;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}

h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.12}
h4{font-size:1.1rem;line-height:1.2}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--f-script);
  font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--coral-ink);
  line-height:1;
  margin:0 0 .1em;
  transform:rotate(-2deg);
  transform-origin:left center;
  display:inline-block;
}
.eyebrow-light{color:var(--mango)}

.label{
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:1.05rem;
  line-height:1.2;
}

.lede{
  font-size:1.12rem;
  line-height:1.55;
}

/* Outlined poster lettering, straight off the sign out front */
.poster{
  color:var(--mango);
  -webkit-text-stroke:3px var(--gulf-900);
  paint-order:stroke fill;
  text-shadow:0 6px 0 var(--gulf-900);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.05rem;
  line-height:1;
  padding:.85em 1.5em;
  border:3px solid var(--gulf-900);
  border-radius:999px;
  background:var(--mango);
  color:var(--gulf-900);
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 5px 0 var(--gulf-900);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{
  color:var(--gulf-900);
  background:var(--sunset);
  transform:translateY(-2px);
  box-shadow:0 7px 0 var(--gulf-900);
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gulf-900)}

.btn-ghost{
  background:transparent;
  color:var(--sand);
  border-color:var(--sand);
  box-shadow:0 5px 0 rgba(251,241,221,.25);
}
.btn-ghost:hover{background:var(--sand);color:var(--gulf-900);box-shadow:0 7px 0 rgba(251,241,221,.35)}

.btn-coral{background:var(--coral);color:var(--sand)}
.btn-coral:hover{background:var(--sunset);color:var(--gulf-900)}

.btn-sm{font-size:.92rem;padding:.7em 1.2em;border-width:2px;box-shadow:0 4px 0 var(--gulf-900)}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--gulf-900);
  border-bottom:3px solid var(--mango);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 24px;
  max-width:1420px;
  margin:0 auto;
  min-width:0;
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{height:44px;width:auto}

.nav{display:flex;align-items:center;gap:2px;min-width:0}
.nav a{
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.95rem;
  color:var(--sand);
  text-decoration:none;
  padding:.5em .6em;
  border-radius:8px;
  white-space:nowrap;
}
.nav a:hover{background:var(--gulf-700);color:var(--mango)}
.nav a.is-current{color:var(--mango);box-shadow:inset 0 -3px 0 var(--sunset)}

.nav-toggle{
  display:none;
  min-height:44px;
  background:var(--gulf-700);
  border:2px solid var(--mango);
  border-radius:10px;
  color:var(--mango);
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:.95rem;
  padding:.5em .9em;
  cursor:pointer;
}

.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-phone{
  font-family:var(--f-util);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--mango);
  text-decoration:none;
  font-size:1.05rem;
  white-space:nowrap;
}
.header-phone:hover{color:var(--sunset)}

@media (max-width:1200px){
  .nav{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--gulf-900);
    border-bottom:3px solid var(--mango);
    flex-direction:column;
    align-items:stretch;
    padding:10px 18px 18px;
    gap:2px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.75em .6em;font-size:1.1rem}
  .nav-toggle{display:block;order:3}
  .header-inner{position:relative;flex-wrap:wrap}
  .header-cta .btn{display:none}
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  background:var(--gulf-900);
  overflow:hidden;
  isolation:isolate;
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  /* The poster still paints immediately as a plain CSS background, so the
     hero shows a real frame of the bar before the video decodes, and keeps
     showing it if the video never loads at all. No JavaScript involved,
     so there is no code path that can blank the hero out. */
  background:var(--gulf-900) url("../images/hero-poster.jpg") center center / cover no-repeat;
}
.hero-media video{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0;
}

/* The scrim carries the hero text's legibility. Measured against the
   actual footage, the old ramp (.72 / .28 / .86) let the mango headline
   fall to 1.5:1 at the brightest moment, which is unreadable. These
   stops hold sand above 5:1 and mango above 3:1 across the whole clip. */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg,
      rgba(6,27,31,.84) 0%,
      rgba(6,27,31,.66) 26%,
      rgba(6,27,31,.78) 58%,
      rgba(6,27,31,.92) 100%);
}

.hero-inner{
  position:relative;
  z-index:3;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,10vw,120px) 24px clamp(140px,14vw,170px);
  text-align:center;
}

.hero-mark{
  width:min(420px,74vw);
  margin:0 auto clamp(18px,3vw,30px);
  filter:drop-shadow(0 8px 0 rgba(6,27,31,.55));
}

.hero h1{
  color:var(--sand);
  margin-bottom:.3em;
  text-shadow:0 6px 0 rgba(6,27,31,.6);
}
.hero h1 .hl{color:var(--mango)}

.hero-sub{
  color:var(--sand);
  font-size:clamp(1.05rem,1.8vw,1.28rem);
  max-width:44ch;
  margin:0 auto 1.4em;
  text-shadow:0 2px 8px rgba(6,27,31,.9);
}

.hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--coral);
  color:var(--sand);
  border:3px solid var(--gulf-900);
  border-radius:999px;
  padding:.4em 1.1em;
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.92rem;
  margin-bottom:1.1em;
  box-shadow:0 5px 0 rgba(6,27,31,.5);
}
.hero-badge .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--mango);
  box-shadow:0 0 0 0 rgba(253,190,44,.8);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(253,190,44,.7)}
  70%{box-shadow:0 0 0 12px rgba(253,190,44,0)}
  100%{box-shadow:0 0 0 0 rgba(253,190,44,0)}
}

/* --------------------------------------------------------------------------
   Marquee ticker
   -------------------------------------------------------------------------- */

.ticker{
  position:relative;
  z-index:5;
  background:var(--mango);
  border-top:3px solid var(--gulf-900);
  border-bottom:3px solid var(--gulf-900);
  overflow:hidden;
  padding:.55em 0;
  margin-top:-1px;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:slide 38s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;flex-shrink:0}
.ticker-item{
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1rem;
  color:var(--gulf-900);
  padding:0 1.1em;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:.7em;
}
.ticker-item::after{
  content:"";
  width:9px;height:9px;
  background:var(--coral);
  border-radius:50%;
  flex-shrink:0;
}
@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section{padding:clamp(56px,8vw,104px) 0}
.section-tight{padding:clamp(40px,5vw,64px) 0}

.section-dark{background:var(--gulf-800);color:var(--sand)}
.section-dark h2,.section-dark h3{color:var(--sand)}
/* Plain links take the light on dark treatment. Buttons carry their own
   colours and must be excluded, or the label goes mango on mango and
   disappears until hover. */
.section-dark a:not(.btn){color:var(--mango)}

.section-deep{background:var(--gulf-900);color:var(--sand)}
.section-deep h2,.section-deep h3{color:var(--sand)}

.section-sand2{background:var(--sand-2)}

.section-head{margin-bottom:clamp(28px,4vw,48px);max-width:720px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{font-size:1.08rem}

/* Torn paper edge between sand and gulf */
.edge{
  display:block;
  width:100%;
  height:clamp(28px,4vw,56px);
  fill:currentColor;
}

/* --------------------------------------------------------------------------
   Fable
   -------------------------------------------------------------------------- */

.fable{
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.fable-text{
  font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.62;
}
.fable-text .drop{
  font-family:var(--f-display);
  float:left;
  font-size:3.6em;
  line-height:.78;
  padding:.06em .12em 0 0;
  color:var(--coral);
}
.fable-sign{
  font-family:var(--f-script);
  font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--palm-dark);
  margin-top:.4em;
  display:block;
}
.fable-art img{width:100%;height:auto}

.fable > *{min-width:0}

@media (max-width:900px){
  .fable{grid-template-columns:1fr}
  .fable-art{order:-1;max-width:340px;margin:0 auto}
}

/* --------------------------------------------------------------------------
   SIGNATURE: the two floors
   -------------------------------------------------------------------------- */

.floors{
  border:4px solid var(--gulf-900);
  border-radius:var(--radius);
  background:var(--sand);
  overflow:hidden;
  box-shadow:0 14px 0 rgba(6,27,31,.16);
}

/* A centred segmented control, deliberately NOT two full width halves.
   When the tabs spanned the full width they lined up pixel for pixel with
   the two columns of the panel below, so the inactive tab appeared to be
   labelling the photo column. That misread the whole module. */
.floors-switch{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  background:var(--gulf-900);
  padding:16px;
}
.floor-tab{
  appearance:none;
  flex:0 1 240px;
  border:3px solid var(--gulf-700);
  border-radius:12px;
  background:transparent;
  color:rgba(251,241,221,.66);
  font-family:var(--f-display);
  font-size:clamp(1.05rem,2vw,1.45rem);
  line-height:1.1;
  padding:.6em .9em .55em;
  cursor:pointer;
  text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.floor-tab small{
  display:block;
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.6em;
  color:rgba(251,241,221,.5);
  margin-top:.35em;
}
.floor-tab:hover{color:var(--sand);border-color:var(--mango)}
.floor-tab[aria-selected="true"]{
  background:var(--mango);
  color:var(--gulf-900);
  border-color:var(--gulf-900);
}
.floor-tab[aria-selected="true"] small{color:rgba(20,16,12,.72)}

.floor-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.floor-panel[hidden]{display:none}
/* Grid children must be allowed to shrink, otherwise the photo's
   aspect-ratio box drives an oversized min-content width and crushes
   the copy column. */
.floor-panel > *{min-width:0}

.floor-copy{padding:clamp(26px,3.4vw,46px)}
.floor-copy h3{margin-bottom:.35em}
.floor-copy p{font-size:1.05rem}

.floor-facts{
  list-style:none;
  margin:1.2em 0 1.4em;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.floor-facts li{
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.86rem;
  background:var(--gulf-900);
  color:var(--mango);
  padding:.45em .9em;
  border-radius:999px;
}

.floor-art{
  position:relative;
  min-height:330px;
  background:var(--gulf-700);
  border-left:4px solid var(--gulf-900);
  overflow:hidden;
}
.floor-art .photo{height:100%;border-radius:0;aspect-ratio:auto}

/* Names the floor on the image itself, so the panel is self describing
   even if someone reads the tabs as column headers. */
.floor-badge{
  position:absolute;
  top:16px;
  left:16px;
  z-index:3;
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.82rem;
  background:var(--palm-dark);
  color:#fff;
  border:2px solid var(--gulf-900);
  border-radius:999px;
  padding:.35em 1em;
}
.floor-badge.up{background:var(--coral)}

@media (max-width:860px){
  .floor-panel{grid-template-columns:1fr}
  .floor-art{border-left:0;border-top:4px solid var(--gulf-900);min-height:260px;order:-1}
}

/* --------------------------------------------------------------------------
   Photo slots (real photo drops in, placeholder shows until then)
   -------------------------------------------------------------------------- */

.photo{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  background:var(--gulf-700);
  border-radius:var(--radius);
  overflow:hidden;
}
.photo img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.photo.is-missing img{display:none}
.photo.is-missing::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 78%, var(--mango) 0%, var(--sunset) 26%, transparent 62%),
    linear-gradient(180deg, var(--gulf-700) 0%, var(--gulf-900) 100%);
  opacity:.9;
}
.photo.is-missing::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.82rem;
  line-height:1.5;
  color:var(--sand);
  text-shadow:0 2px 10px rgba(6,27,31,.95);
}

.photo-tall{aspect-ratio:3/4}
.photo-wide{aspect-ratio:16/9}
.photo-square{aspect-ratio:1/1}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.gallery .g-item{position:relative}
.gallery .g-span2{grid-column:span 2}
.gallery .g-item .photo{border:3px solid var(--gulf-900);box-shadow:0 8px 0 rgba(6,27,31,.14)}

/* A tile sharing a row with a taller neighbour: drop the fixed ratio and
   fill the cell, otherwise it leaves a gap under itself. */
.gallery .g-fill .photo{aspect-ratio:auto;height:100%}

@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .g-span2{grid-column:span 2}
}
@media (max-width:520px){
  .gallery{grid-template-columns:1fr}
  .gallery .g-span2{grid-column:span 1}
}

/* --------------------------------------------------------------------------
   Weekly lineup
   -------------------------------------------------------------------------- */

.week{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
}

.day{
  position:relative;
  background:var(--sand);
  border:3px solid var(--gulf-900);
  border-radius:var(--radius);
  padding:20px 18px 22px;
  box-shadow:0 8px 0 rgba(6,27,31,.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.day:hover{transform:translateY(-4px);box-shadow:0 12px 0 rgba(6,27,31,.2)}

.day .dow{
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.86rem;
  color:var(--coral-ink);
  display:block;
  margin-bottom:.3em;
}
.day h3{font-size:1.28rem;margin-bottom:.3em}
.day .time{
  font-family:var(--f-util);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.92rem;
  color:var(--gulf-700);
  display:block;
  margin-bottom:.5em;
}
.day p{font-size:.95rem;line-height:1.5}

.day-upstairs{background:var(--gulf-900);color:var(--sand);border-color:var(--mango)}
.day-upstairs h3{color:var(--mango)}
.day-upstairs .dow{color:var(--mango)}
.day-upstairs .time{color:var(--sand-3)}

/* A light card sitting inside a dark section: the section colour rules
   would otherwise paint the heading and body sand on sand. Re-assert. */
.section-dark .day,
.section-dark .day h3,
.section-dark .day p{color:var(--ink)}
.section-dark .day-upstairs,
.section-dark .day-upstairs p{color:var(--sand)}
.section-dark .day-upstairs h3{color:var(--mango)}

.floor-flag{
  position:absolute;
  top:-13px;right:14px;
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.7rem;
  background:var(--palm-dark);
  color:#fff;
  border:2px solid var(--gulf-900);
  border-radius:999px;
  padding:.25em .8em;
}
.floor-flag.up{background:var(--coral)}

/* Monday has nothing booked. Read it as deliberately quiet, not as a
   card that failed to load: dashed border, no floor flag, muted body.
   It appears on a light section (events) and a dark one (home), so both
   contexts need their own colours or one of them goes invisible. */
.day-open{
  background:transparent;
  border-style:dashed;
  border-color:rgba(20,16,12,.4);
  box-shadow:none;
  color:var(--ink);
}
.day-open:hover{transform:none;box-shadow:none}
.day-open h3{color:var(--gulf-800)}
.day-open .dow{color:var(--gulf-700)}
.day-open .time{color:var(--gulf-700)}

.section-dark .day-open{
  border-color:rgba(251,241,221,.5);
  color:var(--sand);
}
.section-dark .day-open h3,
.section-dark .day-open .dow{color:var(--sand-3)}
.section-dark .day-open .time{color:var(--sand-3)}
.section-dark .day-open p{color:var(--sand)}

/* --------------------------------------------------------------------------
   Comedy panel
   -------------------------------------------------------------------------- */

.comedy{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,60px);
  align-items:center;
}
.comedy-names{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:1.2em 0 1.5em;
  padding:0;
  list-style:none;
}
.comedy-names li{
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.88rem;
  border:2px solid rgba(251,241,221,.35);
  color:var(--sand);
  border-radius:999px;
  padding:.4em .9em;
}
.comedy-rules{
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.86rem;
  color:var(--mango);
  margin-top:1.2em;
}
.comedy > *{min-width:0}
@media (max-width:880px){.comedy{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Menu page
   -------------------------------------------------------------------------- */

.menu-nav{
  position:sticky;
  top:72px;
  z-index:40;
  background:var(--gulf-900);
  border-top:3px solid var(--mango);
  border-bottom:3px solid var(--mango);
}
.menu-nav-inner{
  display:flex;
  gap:4px;
  overflow-x:auto;
  padding:8px 24px;
  max-width:var(--maxw);
  margin:0 auto;
  scrollbar-width:thin;
}
.menu-nav a{
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.92rem;
  color:var(--sand);
  text-decoration:none;
  padding:.45em .85em;
  border-radius:999px;
  white-space:nowrap;
}
.menu-nav a:hover{background:var(--mango);color:var(--gulf-900)}

.menu-section{padding:clamp(44px,6vw,76px) 0;scroll-margin-top:150px}
.menu-section:nth-of-type(even){background:var(--sand-2)}

.menu-section-head{
  text-align:center;
  margin-bottom:clamp(26px,4vw,44px);
}
.menu-section-head h2{margin-bottom:.2em}
.menu-section-head p{
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
  font-size:.98rem;
  color:var(--gulf-700);
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.6vw,34px) clamp(28px,4vw,56px);
}
@media (max-width:820px){.menu-grid{grid-template-columns:1fr}}

.item{
  border-bottom:2px dotted rgba(20,16,12,.28);
  padding-bottom:14px;
}
.item-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:.15em;
}
.item-head h3{
  font-size:1.15rem;
  margin:0;
  flex:1 1 auto;
  line-height:1.2;
}
.item-price{
  font-family:var(--f-util);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.03em;
  color:var(--coral-ink);
  white-space:nowrap;
  flex-shrink:0;
}
.item p{font-size:.95rem;line-height:1.5;margin:0}
.item .note{
  display:block;
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.82rem;
  color:var(--palm-dark);
  margin-top:.4em;
}

.addons{
  background:var(--gulf-900);
  color:var(--sand);
  border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);
  margin-top:clamp(26px,3.4vw,40px);
}
.addons h3{color:var(--mango);font-size:1.2rem;margin-bottom:.6em}
.addons ul{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:6px 24px;
}
.addons li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.95rem;
  padding:.3em 0;
  border-bottom:1px dotted rgba(251,241,221,.22);
}
.addons li b{
  font-family:var(--f-util);
  font-weight:700;
  color:var(--mango);
  white-space:nowrap;
}

.menu-note{
  text-align:center;
  font-size:.9rem;
  line-height:1.5;
  color:rgba(20,16,12,.7);
  max-width:760px;
  margin:clamp(28px,4vw,46px) auto 0;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-card{
  background:var(--sand);
  border:4px solid var(--gulf-900);
  border-radius:var(--radius);
  padding:clamp(24px,3.6vw,44px);
  box-shadow:0 14px 0 rgba(6,27,31,.16);
}

.field{margin-bottom:20px}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:660px){.field-row{grid-template-columns:1fr}}

.field label{
  display:block;
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.92rem;
  margin-bottom:.4em;
  color:var(--gulf-800);
}
.field .hint{
  display:block;
  font-family:var(--f-body);
  text-transform:none;
  letter-spacing:0;
  font-size:.85rem;
  font-weight:400;
  color:rgba(20,16,12,.62);
  margin-top:.25em;
}
.req{color:var(--coral-ink)}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:3px solid var(--gulf-800);
  border-radius:10px;
  padding:.7em .8em;
  line-height:1.4;
}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gulf-800) 50%),linear-gradient(135deg,var(--gulf-800) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 13px) 55%;background-size:7px 7px,7px 7px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--sunset);
  outline:3px solid var(--mango);
  outline-offset:1px;
}
.field input[type="file"]{padding:.55em .6em;background:#fff}

.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  border:3px solid var(--gulf-800);
  border-radius:999px;
  padding:.5em 1.1em;
  cursor:pointer;
  background:#fff;
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.92rem;
}
.choice input{accent-color:var(--coral);width:1.1em;height:1.1em}
.choice:hover{background:var(--sand-2)}

.form-foot{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:8px;
  padding-top:20px;
  border-top:2px dotted rgba(20,16,12,.28);
}
.form-foot p{font-size:.88rem;color:rgba(20,16,12,.7);margin:0;flex:1 1 220px}

.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* --------------------------------------------------------------------------
   Split feature (used on private events + careers)
   -------------------------------------------------------------------------- */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.split > *{min-width:0}
@media (max-width:940px){.split{grid-template-columns:1fr}}

.checklist{list-style:none;margin:1.2em 0 0;padding:0}
.checklist li{
  position:relative;
  padding-left:1.9em;
  margin-bottom:.7em;
  font-size:1.02rem;
  line-height:1.5;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:.42em;
  width:1.1em;height:1.1em;
  border-radius:50%;
  background:var(--palm);
  border:2px solid var(--gulf-900);
}

/* --------------------------------------------------------------------------
   Visit block
   -------------------------------------------------------------------------- */

.visit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,60px);
  align-items:start;
}
.visit > *{min-width:0}
@media (max-width:900px){.visit{grid-template-columns:1fr}}

.hours{list-style:none;margin:0;padding:0}
.hours li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:.5em 0;
  border-bottom:2px dotted rgba(251,241,221,.28);
  font-family:var(--f-util);
  font-size:1.05rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
}
.hours li b{color:var(--mango);font-weight:700}

.address-block{
  font-size:1.1rem;
  line-height:1.5;
}
.address-block .big{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.1;
  display:block;
  margin-bottom:.25em;
  color:var(--mango);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.band{
  background:#C4331F;
  color:var(--sand);
  text-align:center;
  padding:clamp(46px,6vw,80px) 0;
  border-top:4px solid var(--gulf-900);
  border-bottom:4px solid var(--gulf-900);
}
.band h2{color:var(--sand);margin-bottom:.3em}
.band p{max-width:56ch;margin:0 auto 1.4em;font-size:1.08rem}

/* Two column variant, for when the band carries an image */
.band-split{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,60px);
  align-items:center;
  text-align:left;
}
.band-split > *{min-width:0}
.band-split p{margin-left:0;margin-right:0}
.band-split .photo{
  border:4px solid var(--gulf-900);
  box-shadow:0 10px 0 rgba(6,27,31,.28);
}
@media (max-width:860px){
  .band-split{grid-template-columns:1fr;text-align:center}
  .band-split p{margin-left:auto;margin-right:auto}
  .band-split .photo{max-width:420px;margin:0 auto}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer{
  background:var(--gulf-900);
  color:var(--sand);
  padding:clamp(44px,6vw,72px) 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,48px);
  align-items:start;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

.site-footer h4{
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.92rem;
  color:var(--mango);
  margin-bottom:1em;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5em}
.site-footer a{color:var(--sand);text-decoration:none;font-size:.98rem}
.site-footer a:hover{color:var(--mango);text-decoration:underline}
.site-footer p{font-size:.96rem;color:rgba(251,241,221,.82)}

.footer-brand img{width:210px;margin-bottom:14px}

.footer-bottom{
  margin-top:clamp(32px,4vw,52px);
  padding-top:20px;
  border-top:2px solid rgba(251,241,221,.2);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.82rem;
  color:rgba(251,241,221,.62);
}

.socials{display:flex;gap:10px;margin-top:14px}
.socials a{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:2px solid var(--mango);
  border-radius:50%;
  color:var(--mango);
}
.socials a:hover{background:var(--mango);color:var(--gulf-900)}
.socials svg{width:20px;height:20px;fill:currentColor}

/* --------------------------------------------------------------------------
   Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head{
  background:var(--gulf-900);
  color:var(--sand);
  padding:clamp(48px,7vw,90px) 0 clamp(40px,6vw,74px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-head::after{
  content:"";
  position:absolute;
  left:50%;bottom:-60%;
  width:120%;
  aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(242,104,28,.4) 0%, rgba(242,104,28,0) 62%);
  pointer-events:none;
}

/* Photo backed variant.

   The photo is set by a small per page class rather than a custom property.
   A relative url() inside a var() resolves against the stylesheet that uses
   the variable, not the page that declares it, so an inline
   --head-photo:url('images/x.jpg') silently became /css/images/x.jpg and
   404ed. Plain classes in this file resolve correctly and cannot drift.

   The scrim moved onto ::after so the photo can live in background-image on
   its own. Scrim weights stay as variables, since numbers are safe in var(). */
.page-head-photo{
  --s1:.86; --s2:.72; --s3:.80; --s4:.94;
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  padding-top:clamp(60px,9vw,120px);
  padding-bottom:clamp(52px,8vw,100px);
  border-bottom:4px solid var(--mango);
}
.page-head-photo::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  left:0;
  bottom:0;
  width:100%;
  aspect-ratio:auto;
  transform:none;
  background:linear-gradient(180deg,
    rgba(6,27,31,var(--s1)) 0%,
    rgba(6,27,31,var(--s2)) 42%,
    rgba(6,27,31,var(--s3)) 78%,
    rgba(6,27,31,var(--s4)) 100%);
  pointer-events:none;
  z-index:1;
}

.head-comedy  { background-image:url("../images/comedy-crowd.jpg") }
.head-private { background-image:url("../images/hero-private.jpg") }
.head-menu    { background-image:url("../images/hero-menu.jpg") }
/* The server taking an order is the subject and she sits low left, so
   this one is pulled up rather than centred, keeping her face and the
   order pad both inside the band. */
.head-careers { background-image:url("../images/hero-careers.jpg"); background-position:center 24% }
.head-visit   { background-image:url("../images/hero-visit.jpg") }

/* Scrim weight is tuned per photo rather than one blanket setting. Each is
   the lightest that still holds body text at 5.5:1, a point of headroom over
   the 4.5 requirement. Going heavier than needed only drains the picture,
   and these rooms are the reason anyone is looking. Measured brightness
   behind the text: comedy 44, dinner room 94, careers 74, burger 107,
   storefront 155. Brighter does not simply mean heavier: what matters is
   the brightest 2 percent, not the average. */
.head-comedy  { --s1:.77; --s2:.62; --s3:.71; --s4:.88 }
.head-private { --s1:.86; --s2:.71; --s3:.80; --s4:.93 }
.head-menu    { --s1:.81; --s2:.66; --s3:.75; --s4:.90 }
.head-careers { --s1:.86; --s2:.71; --s3:.80; --s4:.93 }
.head-visit   { --s1:.85; --s2:.70; --s3:.79; --s4:.92 }

.page-head-photo h1{text-shadow:0 4px 18px rgba(6,27,31,.9)}
.page-head-photo p{text-shadow:0 2px 12px rgba(6,27,31,.95)}
.page-head-photo .eyebrow{text-shadow:0 3px 14px rgba(6,27,31,.9)}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{color:var(--sand);margin-bottom:.25em}
.page-head p{
  max-width:58ch;
  margin:0 auto;
  font-size:1.1rem;
  color:rgba(251,241,221,.9);
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .ticker-track{animation:none}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width:640px){
  html{font-size:19px}
  .wrap{padding:0 18px}
  .menu-nav{top:66px}
}

/* --------------------------------------------------------------------------
   Tonight
   The hero button asks "what's happening tonight", so the page has to answer
   it. The weekly schedule is fixed, so the day of the week is enough to work
   out the answer with no maintenance and no CMS. The static markup carries a
   true, general fallback for anyone without JavaScript.
   -------------------------------------------------------------------------- */

.tonight-strip{
  background:var(--gulf-900);
  border-bottom:4px solid var(--mango);
  padding:clamp(28px,4vw,44px) 0;
}

.tonight{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,36px);
  flex-wrap:wrap;
}

.tonight-label{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  flex-shrink:0;
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.9rem;
  color:var(--gulf-900);
  background:var(--mango);
  border:3px solid var(--gulf-900);
  border-radius:999px;
  padding:.45em 1.1em;
  box-shadow:0 5px 0 rgba(6,27,31,.5);
}
.tonight-label .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--coral);
  animation:pulse 2.4s infinite;
}

.tonight-body{flex:1 1 320px;min-width:0}
.tonight-body h2{
  color:var(--mango);
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  margin:0 0 .15em;
}
.tonight-body p{
  color:var(--sand);
  font-size:1.05rem;
  margin:0;
}
.tonight-action{flex:0 0 auto}

@media (max-width:700px){
  .tonight{flex-direction:column;align-items:flex-start}
  .tonight-action{width:100%}
  .tonight-action .btn{width:100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   Mobile
   Found by audit rather than by eye: tap targets under the 44px minimum,
   a button label that could not wrap, and category links too tight to hit.
   -------------------------------------------------------------------------- */

/* No label should ever be able to force a button wider than its container,
   whatever wording lands in it later. */
.btn{overflow-wrap:anywhere;max-width:100%}

@media (max-width:760px){

  /* Footer links were 21px tall, half the comfortable minimum for a thumb. */
  .site-footer li{margin-bottom:0}
  .site-footer ul a{
    display:flex;
    align-items:center;
    min-height:44px;
  }

  /* Same for the phone number, which is the single most tapped link
     on a restaurant site viewed from a phone. */
  .header-phone{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  /* Menu category bar: give each chip a full sized hit area. */
  .menu-nav a{
    padding:.7em 1em;
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }

  /* The bar scrolls sideways, so hint that there is more beyond the edge
     instead of letting it look like the list simply ends. The bar is already
     position:sticky, which anchors the fade; do not set position here or the
     sticky behaviour is lost and the bar collides with the first heading. */
  .menu-nav::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0;
    width:44px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(6,27,31,0), var(--gulf-900));
  }
  .menu-nav-inner{scroll-padding-left:18px}

  /* Contact cards hold buttons, so let them use the full width rather than
     squeezing two narrow columns that nothing fits inside. */
  .week{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Photo headers on a phone
   A narrow tall band crops a landscape photo hard, so the subject has to be
   aimed at rather than left to a default centre. Measured per photo:
   the storefront's blade sign sits at x 46 to 72 percent and was landing
   exactly on the right edge of the crop window, so it gets nudged across.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .page-head-photo{
    padding-top:clamp(48px,11vw,72px);
    padding-bottom:clamp(44px,10vw,64px);
  }
  /* Tighter measure on the long fable, which was making the menu header
     taller than the phone screen and squeezing the photo to a sliver. */
  .page-head-photo p{
    font-size:1.02rem;
    line-height:1.5;
  }
  .head-visit  { background-position:54% 45% }
  .head-menu   { background-position:center 52% }
  .head-careers{ background-position:center 28% }

  /* The menu header carries the whole fable, which pushed it to 84% of the
     screen and left the category bar below the fold. Tightened so the first
     screen shows the title, the story and a hint that a menu follows. */
  .head-menu h1{font-size:clamp(2.2rem,10vw,3rem)}
  .head-menu p{font-size:.98rem;line-height:1.46}
}

/* The homepage hero ran past a full screen height, putting its two buttons
   on or below the fold. The generous bottom padding is desktop breathing
   room and is not needed on a phone. */
@media (max-width:760px){
  .hero-inner{
    padding-top:clamp(22px,5vw,44px);
    padding-bottom:clamp(40px,9vw,68px);
  }
  .hero-mark{width:min(215px,52vw);margin-bottom:12px}
  .hero h1{font-size:clamp(2.2rem,11vw,3.1rem)}
  /* The narrative runs long, so it gets a tighter measure on a phone to
     keep both calls to action above the fold. */
  .hero-sub{font-size:.97rem;line-height:1.45;margin-bottom:1.1em}
  .hero-badge{font-size:.82rem;margin-bottom:.9em}
  .hero-actions{gap:10px}
}

/* Short phones. A 390x844 handset has room for the full hero, but plenty of
   devices are 100 to 150px shorter and were pushing the second call to
   action past the fold. Rather than cut the narrative, the hero tightens
   itself when the screen is short. Nothing is lost, it just packs closer. */
@media (max-width:760px) and (max-height:820px){
  .hero-inner{
    padding-top:clamp(14px,3vw,28px);
    padding-bottom:clamp(28px,6vw,48px);
  }
  .hero-mark{width:min(180px,46vw);margin-bottom:10px}
  .hero h1{font-size:clamp(1.95rem,9.5vw,2.6rem);margin-bottom:.22em}
  .hero-sub{font-size:.92rem;line-height:1.42;margin-bottom:.9em}
  .hero-badge{font-size:.76rem;margin-bottom:.7em;padding:.32em .95em}
  .hero-actions .btn{padding:.72em 1.2em}
}

/* Smaller handsets again, roughly 360x740 and below. The narrative wraps to
   more lines at these widths, so the hero needs one more step down. */
@media (max-width:760px) and (max-height:750px){
  .hero-inner{padding-top:10px;padding-bottom:24px}
  .hero-mark{width:min(150px,40vw);margin-bottom:8px}
  .hero h1{font-size:clamp(1.7rem,8.5vw,2.2rem);line-height:1;margin-bottom:.18em}
  .hero-sub{font-size:.87rem;line-height:1.38;margin-bottom:.75em}
  .hero-badge{font-size:.7rem;margin-bottom:.6em}
  .hero-actions .btn{padding:.62em 1.05em;font-size:.95rem}
}

/* --------------------------------------------------------------------------
   Newsletter
   Built native rather than dropping in MailerLite's own embed, so it matches
   the site instead of looking like a bolted on widget. It posts straight to
   MailerLite, so subscribers land in the account the same as any other form.
   -------------------------------------------------------------------------- */

.newsletter{
  background:var(--gulf-800);
  border-top:4px solid var(--mango);
  padding:clamp(40px,6vw,72px) 0;
}

.newsletter-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
.newsletter-inner > *{min-width:0}

.newsletter-copy h2{
  color:var(--sand);
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  margin-bottom:.25em;
}
.newsletter-copy p{
  color:var(--sand);
  font-size:1.02rem;
  margin:0;
  max-width:46ch;
}

/* MailerLite injects its own markup and inline styles into .ml-embedded.
   These overrides pull it back to the site's palette and shapes so it does
   not read as a bolted on widget. They need !important because MailerLite
   ships inline styles on most of these nodes.

   NOTE: their script is blocked in the build sandbox, so unlike everything
   else on this site these rules could not be verified against the real
   rendered markup. Check the newsletter band once on the live deploy. */

.newsletter-embed{min-height:96px}

.newsletter-embed .ml-form-embedContainer,
.newsletter-embed .ml-form-embedWrapper,
.newsletter-embed .ml-form-embedBody,
.newsletter-embed .ml-form-align-center{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* Their heading and blurb duplicate the copy already beside it */
.newsletter .newsletter-embed .ml-form-embedContent,
.newsletter-embed .ml-form-embedContent{display:none !important}

.newsletter-embed .ml-form-formContent,
.newsletter-embed .ml-form-fieldRow{
  margin:0 0 10px !important;
  padding:0 !important;
}

/* Broadened: match any text style input inside the embed regardless of
   which wrapper classes MailerLite happens to render, and raise specificity
   by anchoring on .newsletter as well. */
.newsletter .newsletter-embed input[type="email"],
.newsletter .newsletter-embed input[type="text"],
.newsletter .newsletter-embed form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.newsletter-embed input[type="email"],
.newsletter-embed input[type="text"]{
  width:100% !important;
  font-family:var(--f-body) !important;
  font-size:1rem !important;
  color:var(--ink) !important;
  background:#fff !important;
  border:3px solid var(--gulf-900) !important;
  border-radius:999px !important;
  padding:.72em 1.1em !important;
  line-height:1.3 !important;
  height:auto !important;
  box-shadow:none !important;
}
.newsletter-embed input[type="email"]:focus{
  border-color:var(--sunset) !important;
  outline:3px solid var(--mango) !important;
  outline-offset:1px !important;
}

.newsletter-embed .ml-form-embedSubmit{margin:0 !important}
.newsletter .newsletter-embed button,
.newsletter .newsletter-embed button[type="submit"],
.newsletter .newsletter-embed .primary,
.newsletter .newsletter-embed input[type="submit"],
.newsletter-embed .ml-form-embedSubmit button{
  width:100% !important;
  font-family:var(--f-util) !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.1em !important;
  font-size:1.05rem !important;
  background:var(--mango) !important;
  color:var(--gulf-900) !important;
  border:3px solid var(--gulf-900) !important;
  border-radius:999px !important;
  padding:.8em 1.5em !important;
  height:auto !important;
  box-shadow:0 5px 0 var(--gulf-900) !important;
  cursor:pointer !important;
}
.newsletter .newsletter-embed button:hover,
.newsletter .newsletter-embed .primary:hover,
.newsletter-embed .ml-form-embedSubmit button:hover{
  background:var(--sunset) !important;
  color:var(--gulf-900) !important;
}
/* Their loading button is a second element that swaps in on submit */
.newsletter .newsletter-embed button.loading{
  background:var(--sunset) !important;
  color:var(--gulf-900) !important;
}

/* Their success state, and the small print under the field */
.newsletter-embed .ml-form-successBody{
  background:transparent !important;
  padding:0 !important;
}
.newsletter-embed .ml-form-successContent h4,
.newsletter-embed .ml-form-successContent p{
  color:var(--sand) !important;
  font-family:var(--f-body) !important;
}
.newsletter-embed .ml-form-successContent h4{
  font-family:var(--f-display) !important;
  color:var(--mango) !important;
}
.newsletter-embed .ml-form-embedPermissions,
.newsletter-embed .ml-form-recaptcha{
  margin-top:10px !important;
}
.newsletter-embed .ml-form-embedPermissions p,
.newsletter-embed .ml-form-embedPermissions a{
  color:rgba(251,241,221,.72) !important;
  font-size:.86rem !important;
}

/* Lost its colour rule in a rewrite and inherited dark ink onto the dark
   band, which the contrast audit caught at 1.31:1. */
.newsletter-fine{
  margin:.7em 0 0;
  font-size:.86rem;
  line-height:1.5;
  color:rgba(251,241,221,.78);
}

.newsletter-fallback{
  margin:.4em 0 0;
  font-size:.95rem;
  color:var(--sand);
}
.newsletter-fallback a{color:var(--mango)}

@media (max-width:860px){
  .newsletter-inner{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Legal pages
   Long form reading, so a narrower measure and clearer hierarchy than the
   marketing pages use.
   -------------------------------------------------------------------------- */
.legal{font-size:1.02rem;line-height:1.65}
.legal h2{
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  margin:1.9em 0 .5em;
  padding-top:1.1em;
  border-top:2px dotted rgba(20,16,12,.28);
}
.legal h2:first-of-type{margin-top:1em}
.legal h3{
  font-family:var(--f-util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:1rem;
  color:var(--coral-ink);
  margin:1.5em 0 .35em;
}
.legal ul{margin:0 0 1em;padding-left:1.3em}
.legal li{margin-bottom:.5em}
.legal-updated{
  font-family:var(--f-util);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.88rem;
  color:var(--gulf-700);
}
.legal-note{
  margin-top:2.2em;
  padding:18px 20px;
  background:var(--sand-2);
  border-left:5px solid var(--palm-dark);
  border-radius:8px;
  font-size:.92rem;
  line-height:1.55;
}