/* ==========================================================================
   Bamboo Bar & Grill, Kuta Bali
   Red / black / white, straight off the logo. Modern and loud.

   The energy comes from hard-cut full-bleed colour blocks, not from gradients
   or animation. A section is black, or red, or white. Never a soft transition
   between them. Display type is huge with negative leading.

   Contrast rules, all measured:
     white on --red-cta #E00000 ....... 5.04:1  pass
     black --ink on --red #FE0000 ..... 4.87:1  pass
     --red-cta as TEXT on white ....... 5.04:1  pass
     --red #FE0000 as TEXT on white ... 4.03:1  FAIL, display sizes only
   ========================================================================== */

/* ---------- fonts, self-hosted ---------- */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ink:     #00051B;   /* the logo's near-black navy */
  --ink-2:   #12172C;
  --red:     #FE0000;   /* logo red. Surfaces, and TEXT on dark only */
  --red-cta: #E00000;   /* text-safe red: under white text, or on white */
  --white:   #FFFFFF;
  --paper:   #F5F3EF;   /* barely-warm white, stops big light blocks glaring */

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  /* set per band, so children never need to know which colour they sit on */
  --fg: var(--white);
  --bg: var(--ink);
  --muted: rgba(255,255,255,.72);
  --hair: rgba(255,255,255,.18);
  --accent: var(--red);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--white);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  overflow-wrap: break-word;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

/* ==========================================================================
   BANDS. The whole layout model.
   ========================================================================== */
.band {
  background: var(--bg); color: var(--fg);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  position: relative;
}
.band--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.band--flush { padding-block: 0; }

.band--black { --bg: var(--ink);  --fg: var(--white); --muted: rgba(255,255,255,.72); --hair: rgba(255,255,255,.18); --accent: var(--red); }
.band--ink2  { --bg: var(--ink-2);--fg: var(--white); --muted: rgba(255,255,255,.72); --hair: rgba(255,255,255,.18); --accent: var(--red); }
.band--red   { --bg: var(--red);  --fg: var(--ink);   --muted: rgba(0,5,27,.90);      --hair: rgba(0,5,27,.30);      --accent: var(--ink); }
.band--white { --bg: var(--white);--fg: var(--ink);   --muted: rgba(0,5,27,.72);      --hair: rgba(0,5,27,.16);      --accent: var(--red-cta); }
.band--paper { --bg: var(--paper);--fg: var(--ink);   --muted: rgba(0,5,27,.72);      --hair: rgba(0,5,27,.16);      --accent: var(--red-cta); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ==========================================================================
   TYPE. Big, condensed, negative leading. This is most of the personality.
   ========================================================================== */
.display-1, .display-2, .display-3 {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .86;              /* leading tighter than the type size */
  letter-spacing: -.005em;
  text-wrap: balance;
}
.display-1 { font-size: clamp(3.2rem, 11vw, 8.5rem); }
.display-2 { font-size: clamp(2.6rem, 7.5vw, 5.5rem); }
.display-3 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: .92; }

.kicker {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 54ch; }
.muted { color: var(--muted); }

/* Answer-first block. The passage an assistant should be able to lift whole,
   so it runs at full contrast and a wider measure than .lede. */
.answer { max-width: 76ch; }
.answer p { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; color: var(--fg); }
.answer p + p { margin-top: .9rem; }
.mono { font-family: var(--mono); }
.hi { color: var(--accent); }

/* red display type is only safe at display sizes on light bands */
.band--white .hi, .band--paper .hi { color: var(--red-cta); }

/* ==========================================================================
   BUTTONS. Square, heavy, no glow.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.05rem 1.9rem; border: 2px solid transparent; border-radius: 0;
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .04em; line-height: 1;
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.btn--primary { background: var(--red-cta); color: var(--white); }
.btn--primary:hover { background: var(--white); color: var(--ink); }
.band--red .btn--primary { background: var(--ink); color: var(--white); }
.band--red .btn--primary:hover { background: var(--white); color: var(--ink); }

.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: var(--red-cta); color: var(--white); }

.btn--ghost { border-color: currentColor; color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }

.btn--wa { background: #0F7A40; color: #fff; }     /* 5.41:1 with white */
.btn--wa:hover { background: #0A5C2F; }

.btn--sm { padding: .65rem 1.1rem; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   MARQUEE. Real information, moving. The cheapest energy on the page.
   ========================================================================== */
.marquee {
  background: var(--red); color: var(--ink);
  border-block: 3px solid var(--ink);
  overflow: hidden; white-space: nowrap;
  padding-block: .7rem;
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
/* exactly two identical groups, so translateX(-50%) lands on a perfect repeat */
.marquee__group { display: flex; flex: none; }
.marquee__group > span {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); letter-spacing: .02em;
  white-space: nowrap;
}
.marquee__group > span::after {
  content: "●"; font-size: .5em; vertical-align: middle;
  margin-inline: 1.25rem; opacity: .75;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: slide 38s linear infinite; }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { white-space: normal; }
  .marquee__track { flex-wrap: wrap; width: auto; animation: none; }
  .marquee__group:last-child { display: none; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink); border-bottom: 3px solid var(--red);
}
.hdr__in { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.hdr__logo img { width: 78px; height: auto; }
@media (min-width: 1041px) { .hdr__logo img { width: 92px; } }
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, 1.5rem); }
.hdr__nav a {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1rem; letter-spacing: .04em; color: var(--white);
  padding: .3rem .1rem; border-bottom: 3px solid transparent; white-space: nowrap;
  transition: border-color .12s linear, color .12s linear;
}
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { border-color: var(--red); }
.hdr__cta { display: flex; gap: .4rem; flex-shrink: 0; }
.hdr__toggle {
  display: none; margin-left: auto; background: none;
  border: 2px solid var(--white); color: var(--white);
  font-family: var(--display); text-transform: uppercase; letter-spacing: .05em;
  padding: .45rem .9rem;
}
@media (max-width: 1040px) {
  .hdr__toggle { display: block; }
  .hdr__nav {
    display: none; position: fixed; inset: 72px 0 auto; margin: 0;
    background: var(--ink); border-bottom: 3px solid var(--red);
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .hdr__nav[data-open="true"] { display: block; }
  .hdr__nav ul { flex-direction: column; align-items: stretch; padding: 0 var(--gut) 1.25rem; gap: 0; }
  .hdr__nav a {
    display: block; padding: 1rem 0; font-size: 1.6rem;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }
  .hdr__cta .btn--ghost { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: min(86svh, 900px); background: var(--ink); }

/* Laptop-height screens: the BUTTON ROW is what has to clear the fold, and at
   full display size it does on every common laptop (measured 1280x800, 1366x768,
   1440x900, 1440x700). Keep the type big; only tighten the vertical rhythm. The
   meta row is the least important element and may sit at the fold edge. */
@media (min-width: 860px) and (max-height: 950px) {
  .hero { min-height: min(90svh, 860px); }
  .hero__in { padding-block: clamp(1.75rem, 3.5vh, 3rem); }
  .hero h1 { margin-bottom: .7rem; }
  .hero__sub { margin-bottom: 1.2rem; font-size: 1.05rem; }
  .hero__meta { margin-top: 1rem; gap: .3rem 1.5rem; }
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(0,5,27,.93) 0%, rgba(0,5,27,.72) 34%, rgba(0,5,27,.15) 70%, rgba(0,5,27,.05) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(0,5,27,.55) 22%, rgba(0,5,27,0) 55%);
}
.hero__in { padding-block: clamp(3rem, 8vw, 5.5rem); position: relative; }
.hero__in > * { max-width: 46rem; }
.hero h1 { margin-bottom: 1.4rem; max-width: 16ch; }
.hero h1 .ln { display: block; }
.hero__sub { margin-bottom: 1.9rem; color: rgba(255,255,255,.86); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: 2rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.75); max-width: 52rem;
}
.hero__meta strong { color: var(--white); font-weight: 600; }
@media (max-width: 700px) {
  .hero { min-height: auto; }
  .hero__in { padding-bottom: 5.5rem; }
  .hero::after {
    background: linear-gradient(to bottom, rgba(0,5,27,.70) 0%, rgba(0,5,27,.58) 28%, rgba(0,5,27,.86) 66%, var(--ink) 100%);
  }
  .hero__media img { object-position: center 30%; }
}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.head .kicker { display: block; margin-bottom: .8rem; }
.head .lede { margin-top: 1.1rem; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid { display: grid; gap: clamp(.9rem, 1.6vw, 1.4rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
  display: flex; flex-direction: column; position: relative;
  background: var(--bg); border: 3px solid var(--fg); color: var(--fg);
  transition: background-color .12s linear, color .12s linear;
}
.card__img { aspect-ratio: 4/3; overflow: hidden; border-bottom: 3px solid var(--fg); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card__body h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.75rem; line-height: .9; }
.card__body p { color: var(--muted); font-size: .97rem; }
.card__go {
  margin-top: auto; padding-top: .7rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
a.card:hover { background: var(--red-cta); color: var(--white); border-color: var(--red-cta); }
a.card:hover .card__body p, a.card:hover .card__go { color: var(--white); }
a.card:hover .card__img { border-bottom-color: var(--red-cta); }

/* plain info panel */
.panel { border: 3px solid var(--fg); padding: 1.4rem; background: var(--bg); }
.panel h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; margin-bottom: .5rem; line-height: .95; }
.panel p { color: var(--muted); font-size: .97rem; }
.panel a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding-block: .2rem; overflow-wrap: anywhere; }

/* ==========================================================================
   STICKER. Angled badge for the promos. Fun without being twee.
   ========================================================================== */
.sticker {
  display: inline-block; transform: rotate(-3deg);
  background: var(--red); color: var(--ink);
  border: 3px solid var(--ink);
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.45rem); line-height: 1;
  padding: .55rem 1rem;
}
.band--red .sticker { background: var(--ink); color: var(--white); border-color: var(--white); }
.sticker--flip { transform: rotate(2deg); }

/* ==========================================================================
   SPLIT
   ========================================================================== */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 3px solid var(--fg); }
@media (max-width: 899px) { .split__media img { aspect-ratio: 16/10; } }

/* ==========================================================================
   DISH LIST. Reads like a printed menu: leader dots, big numerals.
   ========================================================================== */
.dishes { border-top: 3px solid var(--fg); }
.dish {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--hair); align-items: baseline;
}
.dish__name { font-weight: 600; font-size: 1.05rem; }
.dish__price { font-family: var(--display); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.dish__desc { grid-column: 1 / -1; color: var(--muted); font-size: .92rem; max-width: 60ch; }
.dish__tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--hair); padding: .08rem .32rem; margin-left: .4rem; color: var(--muted);
}

/* ==========================================================================
   SCHEDULE
   ========================================================================== */
.table-scroll { overflow-x: auto; }
.sched { width: 100%; border-collapse: collapse; text-align: left; }
.sched caption { text-align: left; color: var(--muted); font-size: .9rem; padding-bottom: 1rem; }
.sched th {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; padding: .6rem .75rem .6rem 0; border-bottom: 3px solid var(--fg);
}
.sched td { padding: 1rem .75rem 1rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.sched td:first-child { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; width: 7rem; line-height: 1; }
.sched td:last-child { font-family: var(--mono); font-size: .85rem; white-space: nowrap; text-align: right; }
.sched .act { font-weight: 600; font-size: 1.05rem; }
.sched .blurb { color: var(--muted); font-size: .92rem; margin-top: .15rem; }
.sched tr[data-today="true"] td { background: var(--red); color: var(--ink); }
.sched tr[data-today="true"] .blurb { color: rgba(0,5,27,.9); }
.today-flag {
  visibility: hidden; font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  background: var(--ink); color: #fff; padding: .12rem .4rem; margin-left: .5rem; vertical-align: middle;
}
tr[data-today="true"] .today-flag { visibility: visible; }

/* ==========================================================================
   TONIGHT STRIP
   ========================================================================== */
.tonight { background: var(--red); color: var(--ink); border-block: 3px solid var(--ink); }
.tonight__in { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-block: 1.4rem; }
.tonight__label { font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
.tonight__act { min-height: 1em; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: .9; }
.tonight__time { font-family: var(--mono); font-size: .85rem; }
.tonight .btn { margin-left: auto; background: var(--ink); color: var(--white); }
.tonight .btn:hover { background: var(--white); color: var(--ink); }

/* ==========================================================================
   GALLERY STRIP
   ========================================================================== */
.strip { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.strip figure { margin: 0; overflow: hidden; border: 3px solid var(--fg); }
.strip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* ==========================================================================
   MENU JUMP NAV / LISTS / NOTES
   ========================================================================== */
.menu-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.menu-nav a {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid var(--fg); padding: .5rem .85rem; color: var(--fg);
  transition: background-color .12s linear, color .12s linear;
}
.menu-nav a:hover { background: var(--fg); color: var(--bg); }
[id] { scroll-margin-top: 88px; }

.tick li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; color: var(--muted); font-size: .98rem; }
.tick li::before { content: ""; position: absolute; left: 0; top: .58em; width: .55rem; height: .55rem; background: var(--accent); }
.tick li a { display: inline-block; padding-block: .22rem; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.note {
  border-left: 5px solid var(--accent); padding: .8rem 0 .8rem 1.1rem;
  color: var(--muted); font-size: .94rem; margin-top: 2rem;
}
.note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   RESERVE / MAP
   ========================================================================== */
.reserve-card { border: 3px solid var(--fg); padding: clamp(1.4rem, 3vw, 2.25rem); display: flex; flex-direction: column; }
.reserve-card__tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; }
.reserve-card p { color: var(--muted); }
.reserve-card .btn-row { margin-top: auto; padding-top: 1rem; }
.reserve-card a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding-block: .22rem; overflow-wrap: anywhere; }
.map { border: 3px solid var(--fg); }
.map iframe { width: 100%; height: 440px; border: 0; display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--ink); color: var(--white); border-top: 3px solid var(--red); padding-block: clamp(2.5rem, 5vw, 4rem); }
.ftr__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ftr__h { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: .9rem; font-weight: 400; }
.ftr__logo img { width: 124px; margin-bottom: 1rem; }
.ftr li { margin-bottom: .1rem; }
.ftr li a { display: inline-block; padding-block: .35rem; color: rgba(255,255,255,.78); font-size: .96rem; overflow-wrap: anywhere; }
.ftr li a:hover { color: var(--red); }
.ftr p { color: rgba(255,255,255,.6); }
.ftr__base {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; color: rgba(255,255,255,.6);
}

/* ==========================================================================
   STICKY MOBILE ACTION BAR
   ========================================================================== */
.actionbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: none; gap: 0; border-top: 3px solid var(--red); background: var(--ink);
}
.actionbar .btn { flex: 1; padding: 1rem .5rem; font-size: .95rem; border-radius: 0; }
@media (max-width: 700px) { .actionbar { display: flex; } body { padding-bottom: 4.4rem; } }

/* ---------- utilities ---------- */
.skip { position: absolute; left: -9999px; background: var(--red-cta); color: #fff; padding: .75rem 1.25rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 2.5rem; }
.center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   REVIEWS. Real Google reviews, hand-placed as static HTML. No third-party
   script, no cookies, no consent banner. Update them by editing the fragment.
   ========================================================================== */
.reviews { display: grid; gap: clamp(.9rem, 1.6vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.review {
  border: 3px solid var(--fg); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.review__stars { color: var(--accent); font-size: 1.05rem; letter-spacing: .12em; line-height: 1; }
.band--red .review__stars { color: var(--ink); }
.review blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.review__who {
  margin-top: auto; font-family: var(--mono);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* the aggregate score, sat next to the quotes */
.score { display: flex; align-items: baseline; gap: .6rem; }
.score__n { font-family: var(--display); font-size: clamp(3.5rem, 9vw, 6rem); line-height: .8; }
.score__of { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   INSTAGRAM GRID. Static images that link out. No Meta script.
   ========================================================================== */
.ig { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(min(50% - .2rem, 9rem), 1fr)); }
.ig a { position: relative; display: block; overflow: hidden; border: 3px solid var(--fg); }
.ig img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ig a::after {
  content: ""; position: absolute; inset: 0;
  background: var(--red); opacity: 0;
  transition: opacity .12s linear;
}
.ig a:hover::after { opacity: .28; }
/* The handle sits inside an h2, so it inherits the display type. It must be
   inline (not inline-flex) or it refuses to wrap and pushes past the column. */
.ig__handle {
  display: inline; font: inherit; text-transform: inherit;
  color: var(--accent); overflow-wrap: anywhere;
  /* underlined by default: at display size it has to read as a link */
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .08em;
}
.ig__handle:hover { color: var(--white); }

/* ==========================================================================
   STEPS. A numbered flow with a connecting arrow, so it reads as a process
   rather than three unrelated boxes.
   ========================================================================== */
.steps { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); counter-reset: step; list-style: none; padding: 0; }
.step { position: relative; border: 3px solid var(--fg); padding: 1.5rem; display: flex; flex-direction: column; }
.step h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: .95; margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .97rem; }
.step__n {
  display: inline-block; font-family: var(--display); font-size: 2.6rem; line-height: .8;
  color: var(--accent); margin-bottom: .6rem;
}
/* arrow between steps on wide screens */
@media (min-width: 900px) {
  .step:not(:last-child)::after {
    content: "\2192";
    position: absolute; top: 50%; right: calc(-1 * clamp(1rem, 2vw, 1.5rem) - 3px);
    width: clamp(1rem, 2vw, 1.5rem); transform: translateY(-50%);
    text-align: center; font-size: 1.4rem; line-height: 1; color: var(--fg);
  }
}

/* ==========================================================================
   REVIEWS v2. Reads as a rating panel, not three grey boxes.
   The aggregate score is the only rating we can verify, so it gets the stars.
   Individual quotes carry no star row (Trustindex renders those client-side
   and the real per-review ratings were never in the markup).
   ========================================================================== */
.rating {
  border: 3px solid var(--fg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--bg);
}
.rating__top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rating__n {
  font-family: var(--display); font-size: clamp(4rem, 10vw, 7rem);
  line-height: .78; letter-spacing: -.02em;
}
.rating__out { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* 5 stars, filled to the exact percentage of the real score */
.stars { position: relative; display: inline-block; line-height: 1; font-size: 1.6rem; letter-spacing: .1em; }
/* the empty track has to be visible enough to read as a 5-star scale.
   var(--hair) was 1.43:1 on paper, effectively invisible. 0.5 alpha = 3.75:1 */
.stars__bg { color: rgba(0,5,27,.5); }
.band--black .stars__bg, .band--ink2 .stars__bg { color: rgba(255,255,255,.42); }
.stars__fill {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
  color: var(--accent); width: var(--pct, 88%);
}
.band--red .stars__fill { color: var(--ink); }

.rating__src { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* quote cards */
.reviews { display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); }
@media (min-width: 700px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review {
  border: 3px solid var(--fg); padding: 1.5rem 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: .9rem;
  background: var(--bg);
}
.review::before {
  content: "\201C";
  font-family: var(--display); font-size: 3.4rem; line-height: .6;
  color: var(--accent); display: block;
}
.review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.review__who {
  margin-top: auto; padding-top: .4rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--hair);
}

/* ==========================================================================
   GALLERY. The merged room + feed images, bigger than the old strip.
   ========================================================================== */
.gallery { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; overflow: hidden; border: 3px solid var(--fg); position: relative; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* two feature tiles get double width so the grid is not a flat waffle */
@media (min-width: 760px) {
  .gallery figure.is-wide { grid-column: span 2; }
  .gallery figure.is-wide img { aspect-ratio: 8/3; }
}

/* ==========================================================================
   READABILITY ON RED. --red #FE0000 under --ink text measures 4.87:1, so it
   passes AA and the contrast checker never flagged it. But a fully saturated
   red ground haloes against near-black: the eye cannot hold focus on both, and
   it gets worse with age. Display type on red is fine and is the whole point
   of the band. Paragraphs, tables and lists are not, so they sit on white
   inside the red band and let the red do the framing.
   ========================================================================== */
.band--red .panel,
.band--red .step,
.surface {
  --bg: var(--white); --fg: var(--ink);
  --muted: rgba(0,5,27,.72); --hair: rgba(0,5,27,.16); --accent: var(--red-cta);
  color: var(--fg);
}
.band--red .panel, .band--red .step { background: var(--bg); border-color: var(--ink); }
.surface {
  background: var(--bg); border: 3px solid var(--ink);
  padding: clamp(1rem, 2.4vw, 1.9rem);
}
.surface > :first-child { margin-top: 0; }

/* ==========================================================================
   FAQ. A plain list you click open. Native <details>, so there is no
   JavaScript and the answers sit in the DOM whether or not they are expanded,
   which is how crawlers and assistants read them either way.
   ========================================================================== */
.faq { border-top: 3px solid var(--fg); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.05;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-family: var(--display); font-size: 1.7rem;
  line-height: .7; color: var(--accent);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq details > p {
  color: var(--muted); font-size: .97rem; line-height: 1.6;
  max-width: 68ch; padding-bottom: 1.2rem;
}

/* Today's row in a schedule. A solid --red fill under 14px type is the exact
   halation problem this pass exists to fix, and it landed on the one row people
   most need to read. A 12% tint plus the red edge marks it just as clearly and
   measures about 17:1 instead of 4.85:1. */
.sched tr[data-today="true"] td { background: rgba(254, 0, 0, .12); color: var(--fg); }
.sched tr[data-today="true"] .blurb { color: var(--muted); }
.sched tr[data-today="true"] td:first-child { box-shadow: inset 4px 0 0 var(--red); }

/* Function package price. Sits under an Anton heading in a white card on the
   red band, so it takes --accent, which resolves to the text-safe red.
   Scoped to .panel because `.panel p` is 0-1-1 and would otherwise win on
   specificity and drag the price back to muted body text. */
.panel .pkg__price { font-family: var(--display); font-size: 2.1rem; line-height: 1; color: var(--accent); margin-bottom: .9rem; }
.panel .pkg__price span { display: block; margin-top: .4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tick li strong { color: var(--fg); font-weight: 600; }

/* ==========================================================================
   Utilities that replace inline style attributes. The Content-Security-Policy
   sets style-src 'self' with no 'unsafe-inline', so a style="" attribute is
   blocked outright. Keeping the CSP strict is worth more than the shorthand.
   ========================================================================== */
.fs-sm { font-size: .9rem; }
.measure-44 { max-width: 44rem; }
.mb-3 { margin-bottom: 1.5rem; }
.block-mt { display: block; margin-top: .4rem; }
.band--hero404 { min-height: 52svh; display: flex; align-items: center; }
.display-404 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
.stars--4-4 { --pct: 88%; }

/* What site.js used to set as inline styles. The CSP sets style-src 'self'
   with no 'unsafe-inline', which blocks cssText and style.foo writes, so these
   live here and the script toggles classes instead. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  opacity: 0; transition: opacity .8s ease;
}
.hero__video.is-on { opacity: 1; }
.dot--shut { background: #8a8f9c; }