/* ==========================================================================
   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: .95;              /* a small gap between stacked lines; .86 had them touching */
  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); }

.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,.74) 0%, rgba(0,5,27,.70) 40%, rgba(0,5,27,.88) 70%, 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; }

/* ==========================================================================
   MOBILE PASS
   ========================================================================== */

/* build.py wraps hero <img> in a <picture>. Without a height on the picture,
   `img { height: 100% }` resolves against a content-sized box, so on narrow
   screens the photo stopped partway down the hero and left a hard edge
   against --ink. Give the wrapper the same box as the media layer. */
/* build.py wraps every <img> in a <picture>. A <picture> has no intrinsic
   height, so `img { height: 100% }` inside one resolves against a content-sized
   box and the image stops short of its container. Any container that sets its
   own height or aspect-ratio has to pass that box down to the wrapper.
   This bit the hero (a hard edge against --ink on mobile) and then the cards
   (the band photo is 1.93:1, so it left an 82px white gap in a 4:3 box). */
.hero__media picture,
.card__img picture { display: block; width: 100%; height: 100%; }

/* Buttons are UI, not display type. Anton is a condensed poster face and at
   16px in caps it crowds; it also spends the headline's impact on a button. */
.btn { font-family: var(--body); font-weight: 600; letter-spacing: .06em; }

/* Brand icons on the social buttons. currentColor so they invert on hover
   with the rest of the button. */
.btn__ico { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }

@media (max-width: 700px) {
  /* The sticky bar repeats the hero CTAs and used to sit on top of the meta
     row. Hidden until the hero buttons leave the viewport (site.js). */
  .actionbar { transform: translateY(100%); transition: transform .18s ease-out; }
  .actionbar[data-show] { transform: none; }

  /* Rating and trading history live again in the reviews band below. */
  .hero__meta { display: none; }

  /* The lede was competing with the headline for weight. */
  .hero__sub { font-size: .98rem; line-height: 1.5; margin-bottom: 1.4rem; }
  .sm-hide { display: none; }

  /* Scannable tiles go two-up on a phone. Eight 4:3 cards in one column ran
     3,240px, over a third of the page. NOT applied to plain .g-4, because the
     Address and Opening hours panels on /visit are text you read, not tiles you
     scan, and two columns cramped them. */
  .g-4--tiles { grid-template-columns: 1fr 1fr; }
  .g-4--tiles .card__body { padding: .9rem; }
  .g-4--tiles .card__body h3 { font-size: 1.1rem; }
  .g-4--tiles .card__body p { font-size: .88rem; }


  /* Tap targets. WCAG 2.5.8 wants 24px, Google's mobile guidance wants ~48px.
     The header CTA, the menu jump-nav chips and the Instagram handle link all
     measured 38-39px on a real iPhone. */
  .hdr .btn { min-height: 44px; }
  .menu-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .ig__handle { display: inline-flex; align-items: center; min-height: 44px; }


  /* Inter is wider than Anton, so button rows wrapped at ragged widths.
     Two even columns, and a lone trailing button spans the row rather than
     sitting half-width next to a gap. */
  .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .btn-row .btn { width: 100%; padding-inline: .5rem; }
  .btn-row .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* the hero leads with its primary CTA full width */
  .hero__in .btn-row .btn:first-child { grid-column: 1 / -1; }
  .hero__in .btn-row .btn:last-child:nth-child(odd) { grid-column: auto; }

}
/* At 320px the header flexed the logo down to 24px wide, so the brand mark was
   effectively gone and its tap target was 24x19. Pin the logo and let the
   spacing and the CTA give instead. */
.hdr__logo { flex: none; }
@media (max-width: 360px) {
  .hdr__in { gap: .5rem; }
  .hdr__cta .btn { padding-inline: .8rem; font-size: .9rem; }
}


/* ==========================================================================
   WHAT'S ON. Event posters, dropped in by hand and removed at build time the
   day after the event. Posters arrive at wildly different aspect ratios, so
   they are never cropped: the grid sizes to the widest and each poster keeps
   its own shape.
   ========================================================================== */
/* Posters arrive in whatever shape the designer made them: these four run 0.67 to
   1.50, portrait and landscape mixed. That rules out two things. Cropping them to a
   common aspect ratio cuts printed text off the poster, and a normal grid stretches
   every card to the tallest in its row, leaving a dead band under the short ones.
   Multi-column IS the masonry: cards flow into whichever column is shorter, so mixed
   heights pack with no gaps at all. Two columns inside a 62rem cap puts each poster
   near 460px wide, roughly 40% more than the old 3-up grid, which is what makes the
   small print on a dense poster legible.

   column-WIDTH, not a fixed column count: "at least 26rem per column, fit as many as
   you can". A hard `columns: 2` plus a 760px breakpoint put an iPad at two 339px
   columns, i.e. narrower posters on a tablet than on a phone. This way the count
   falls to one on its own the moment two columns would mean shrinking them. */
.posters { columns: 26rem; column-gap: clamp(1rem, 2vw, 1.6rem); max-width: 62rem; }
.poster { margin: 0 0 clamp(1rem, 2vw, 1.6rem); border: 3px solid var(--fg);
  background: var(--bg); display: block;
  -webkit-column-break-inside: avoid; break-inside: avoid; }
.poster img { width: 100%; height: auto; display: block; }
.poster picture { display: block; }
.poster figcaption { padding: .95rem 1.1rem; border-top: 3px solid var(--fg); }
.poster figcaption strong { display: block; font-family: var(--display);
  text-transform: uppercase; font-size: 1.25rem; line-height: .95; letter-spacing: .01em; }
.poster figcaption span { display: block; margin-top: .4rem; font-family: var(--mono);
  font-size: .8rem; line-height: 1.5; letter-spacing: .05em; color: var(--muted); }

@media (max-width: 760px) { .posters { max-width: none; } }