/* ==========================================================================
   Veranda — home page
   ========================================================================== */

/* ==========================================================================
   Hero
   --------------------------------------------------------------------------
   Layers, back to front:
     0  the courtyard photograph
     1  a light wash that travels from afternoon to evening as you scroll
     2  string lights strung across the top
     3  the copy
     4  Mona Lisa, cut out, sitting in the foreground
     5  grain
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /*
     A full viewport, every time. `svh` is the *small* viewport height, which
     is the height with the mobile address bar showing — so the hero never
     jumps as the bar collapses. `vh` is the fallback for older browsers.
     It is a min-height, not a height: if the content ever needs more room
     (a very short landscape phone) the section grows rather than clipping.
  */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* Phones keep the content low — there is barely any slack at this size and
     bottom-aligned is what reads right. Desktop centres it; see below. */
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
  margin-block-start: calc(var(--header-total) * -1);
  background-color: #0d0c08;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  /* The photograph is graded down so the type always wins. */
  filter: saturate(0.82) contrast(1.06) brightness(0.5);
  transform: scale(1.06) translate3d(0, var(--hero-parallax, 0px), 0);
  will-change: transform;
}
.hero__bg .hero__bg-mobile { display: none; }

@media (max-width: 47.9375em) {
  .hero__bg .hero__bg-wide { display: none; }
  .hero__bg .hero__bg-mobile { display: block; object-position: 50% 30%; }
}

/* Afternoon → evening. `--hero-evening` is animated by ScrollTrigger. */
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      92% 68% at 78% 12%,
      rgb(198 129 44 / calc(0.30 + 0.26 * var(--hero-evening, 0))),
      transparent 62%
    ),
    radial-gradient(
      70% 60% at 12% 96%,
      rgb(126 52 39 / calc(0.16 + 0.30 * var(--hero-evening, 0))),
      transparent 68%
    ),
    linear-gradient(
      180deg,
      rgb(13 12 8 / calc(0.72 - 0.10 * var(--hero-evening, 0))) 0%,
      rgb(13 12 8 / 0.28) 34%,
      rgb(13 12 8 / calc(0.62 + 0.22 * var(--hero-evening, 0))) 78%,
      rgb(13 12 8 / 0.96) 100%
    );
}

/* ------------------------------------------------------------ lights ----- */

.hero__lights {
  position: absolute;
  top: calc(var(--header-h) - 0.5rem);
  left: -6%;
  width: 112%;
  /* Height follows the viewBox so the bulbs stay round at every width. */
  height: auto;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.hero__lights .wire {
  fill: none;
  stroke: rgb(243 235 218 / 0.34);
  stroke-width: 1.4;
}
/* Each bulb is a <use> instance. Colour lives on the shapes as attributes;
   only opacity is animated here, on the instance itself. */
.hero__lights use {
  opacity: calc(0.5 + 0.45 * var(--hero-evening, 0));
  animation: bulb-flicker 5.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes bulb-flicker {
  0%, 100% { opacity: calc(0.50 + 0.45 * var(--hero-evening, 0)); }
  46%      { opacity: calc(0.36 + 0.40 * var(--hero-evening, 0)); }
  62%      { opacity: calc(0.62 + 0.38 * var(--hero-evening, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lights use { animation: none; }
}

/* -------------------------------------------------------------- inner ---- */

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  gap: var(--sp-6);
  align-items: end;
  grid-template-columns: 1fr;
}

/*
   From the two-column breakpoint up, the hero is a full viewport tall and
   bottom-aligning left a large dead area above the copy. Centre it there —
   and only there. Phones are untouched.
*/
@media (min-width: 60em) {
  .hero {
    align-items: center;
    padding-block-end: var(--sp-8);
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-7);
    align-items: center;
  }
}

.hero__copy { max-width: 40rem; }

.hero__eyebrow {
  color: var(--c-mint);
  margin-block-end: var(--sp-4);
}

/*
   The headline runs over three lines. The first two are set quieter and the
   last one carries the display size, which keeps the long middle line inside
   the column at every width instead of clipping against the mask.
*/
.hero__title {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--c-cream);
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.55);
}
/* Each line is masked and rises independently. */
.hero__line {
  display: block;
  overflow: hidden;
  font-size: clamp(1.55rem, 3.4vw, 3rem);
  color: rgb(243 235 218 / 0.9);
}
.hero__line--lead {
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--c-cream);
  margin-block-start: 0.08em;
}
.hero__line > span {
  display: block;
}

.hero__lede {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-400);
  color: rgb(243 235 218 / 0.84);
  max-width: 34ch;
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.6);
}

.hero__actions {
  margin-block-start: var(--sp-6);
}

.hero__tag {
  display: inline-block;
  margin-block-start: var(--sp-6);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  color: var(--c-gold);
  position: relative;
}
.hero__tag::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.32em;
  height: 6px;
  /* A quick painted swoosh under the phrase. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6C38 2.2 78 1.4 118 2.6c28 .8 52 2.2 80 3.2' stroke='%23b29553' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.85;
}

/* ---------------------------------------------------------------- art ---- */

.hero__art {
  position: relative;
  justify-self: end;
  width: min(100%, 26rem);
  align-self: end;
}
@media (max-width: 59.9375em) {
  /*
     The mascot is also sized against the viewport height, not just its width.
     On a short phone (375x667, 320x568) a width-only rule pushed the buttons
     below the fold; tying it to `svh` keeps the whole hero — heading, lede and
     both CTAs — inside the first screen at every phone size.
  */
  .hero__art {
    justify-self: center;
    width: min(72%, 16.5rem, 30svh);
    margin-block-start: var(--sp-3);
    order: -1;
  }
}

/* Short viewports: tighten the vertical rhythm rather than let the hero grow. */
@media (max-width: 59.9375em) and (max-height: 46em) {
  .hero {
    padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-5);
  }
  .hero__inner { gap: var(--sp-4); }
  .hero__eyebrow { margin-block-end: var(--sp-2); }
  .hero__lede { margin-block-start: var(--sp-3); }
  .hero__actions { margin-block-start: var(--sp-4); }
  .hero__tag { margin-block-start: var(--sp-4); }
}

/* The looping mascot clip fills its frame exactly like the still did. */
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--c-mint);
}

/* The mascot hangs in a painted frame, the way the real mural does. */
.hero__frame {
  position: relative;
  z-index: 2;
  width: 100%;
  rotate: -0.7deg;
  will-change: transform;
}

/* A pool of warm lamplight behind her. */
.hero__glow {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8%;
  width: 130%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(198 129 44 / calc(0.30 + 0.22 * var(--hero-evening, 0))) 0%,
    transparent 62%
  );
  pointer-events: none;
}

/* The mural's fringed lamp, redrawn so it can sway. */
.hero__lamp {
  position: absolute;
  z-index: 3;
  top: -1.5rem;
  left: -3.5rem;
  width: clamp(3.75rem, 8vw, 6rem);
  transform-origin: 50% 0;
  animation: lamp-sway 7s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 59.9375em) {
  .hero__lamp { left: -1.25rem; width: 3.5rem; }
}
@keyframes lamp-sway {
  0%, 100% { transform: rotate(-2.4deg); }
  50%      { transform: rotate(2.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lamp { animation: none; }
}

/* -------------------------------------------------------------- scroll --- */

.hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--sp-4);
  translate: -50% 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgb(243 235 218 / 0.55);
  text-decoration: none;
}
@media (max-width: 59.9375em) { .hero__scroll { display: none; } }
.hero__scroll-line {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(180deg, rgb(243 235 218 / 0.5), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 45%;
  background-color: var(--c-mint);
  animation: scroll-cue 2.4s ease-in-out infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(240%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; }
}

/* ==========================================================================
   Story
   ========================================================================== */

.story__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62em) {
  .story__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }
}

.story__title { margin-block: var(--sp-4) var(--sp-5); }

.story__support {
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--rule);
  font-family: var(--ff-display);
  font-size: var(--fs-500);
  font-style: italic;
  line-height: 1.4;
  color: var(--paper-fg);
  max-width: 26ch;
}

.story__art {
  position: relative;
}
.story__main {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin-inline-start: auto;
}
.story__detail {
  position: relative;
  z-index: 2;
  width: clamp(8.5rem, 22%, 12.5rem);
  margin-block-start: -16%;
  margin-inline-start: 0;
}
@media (max-width: 61.9375em) {
  .story__detail { width: clamp(7.5rem, 34%, 11rem); margin-block-start: -12%; }
}

/* ==========================================================================
   Drinks — "Τι θα πιεις;"
   ========================================================================== */

.drinks__head {
  display: grid;
  gap: var(--sp-4);
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 56em) {
  .drinks__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: end;
    gap: var(--sp-7);
  }
}

.drinks__grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* Editorial rather than uniform: every other card drops down the page. */
@media (min-width: 62em) {
  .drink-card:nth-child(even) { margin-block-start: clamp(2rem, 5vw, 4.5rem); }
  .drink-card:nth-child(3) { margin-block-start: clamp(1rem, 2.5vw, 2rem); }
}

.drink-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.drink-card__panel {
  position: relative;
  overflow: hidden;
  background-color: var(--c-mint);
  aspect-ratio: 1;
  transition: transform var(--dur-slow) var(--ease-out);
}
.drink-card__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease);
}
.drink-card:hover .drink-card__panel img,
.drink-card:focus-visible .drink-card__panel img { transform: scale(1.045); }

/* A painted bottle-label number in the corner of each panel. */
.drink-card__num {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: 0.35rem;
  border-radius: var(--r-pill);
  background-color: rgb(22 21 15 / 0.82);
  color: var(--c-cream);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.drink-card__body {
  padding-block-start: var(--sp-4);
}

.drink-card__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-500);
  line-height: 1.15;
  color: var(--c-cream);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.drink-card__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--rule);
}

.drink-card__desc {
  margin-block-start: 0.55rem;
  font-size: var(--fs-200);
  color: var(--fg-muted);
  max-width: 30ch;
}

.drink-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-block-start: var(--sp-4);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-rust);
}
.drink-card__cta svg {
  width: 0.9em;
  height: 0.9em;
  transition: transform var(--dur) var(--ease-out);
}
.drink-card:hover .drink-card__cta svg { transform: translateX(4px); }

/* ==========================================================================
   Food
   ========================================================================== */

.food__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62em) {
  .food__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.food__title { margin-block: var(--sp-4) var(--sp-5); max-width: 16ch; }

/* A fragment of an old typed menu, dot leaders and all. */
.menu-fragment {
  margin-block-start: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  background-color: rgb(255 255 255 / 0.3);
  max-width: 24rem;
}
.menu-fragment__title {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--paper-fg-muted);
  margin-block-end: var(--sp-3);
}
.menu-fragment__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.menu-fragment__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--ff-display);
  font-size: var(--fs-400);
  color: var(--paper-fg);
}
.menu-fragment__name { flex: none; }
/* The dot leader sits *between* the name and the price, the way a printed
   menu sets it — not trailing off the end of the line. */
.menu-fragment__leader {
  flex: 1;
  height: 0;
  min-width: 1.5rem;
  border-block-end: 1px dotted var(--paper-rule);
  translate: 0 -0.25em;
}
.menu-fragment__price {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--paper-fg-muted);
  font-size: var(--fs-200);
  font-family: var(--ff-body);
}

.food__art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.food__photo { grid-column: 1 / -1; }
/* Cut out, so she overlaps the photograph rather than sitting in a box. */
.food__mascot {
  grid-column: 1 / 2;
  margin-block-start: -30%;
  margin-inline-start: -6%;
  width: 118%;
  max-width: none;
  z-index: 2;
  position: relative;
  filter: drop-shadow(0 18px 24px rgb(42 37 25 / 0.28));
}
.food__note {
  grid-column: 2 / 3;
  align-self: end;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-400);
  color: var(--paper-fg-muted);
  padding-block-end: var(--sp-4);
}

/* ==========================================================================
   Live music
   ========================================================================== */

.live {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.live__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.live__bg .media { height: 100%; aspect-ratio: auto; }
.live__bg img { filter: brightness(0.36) saturate(0.75); }
.live::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 60% at 22% 30%, rgb(198 129 44 / 0.22), transparent 62%),
    linear-gradient(180deg, rgb(10 9 6 / 0.9), rgb(10 9 6 / 0.68) 45%, rgb(10 9 6 / 0.95));
}

.live__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62em) {
  .live__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.live__title { margin-block: var(--sp-4) var(--sp-5); max-width: 15ch; }

.live__wave {
  width: min(100%, 26rem);
  height: 2.75rem;
  margin-block-start: var(--sp-6);
  overflow: visible;
}
.live__wave path {
  fill: none;
  stroke: var(--c-rust);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.85;
}

.live__art {
  position: relative;
  width: min(100%, 24rem);
  justify-self: end;
}
.live__mascot {
  width: 100%;
  filter: drop-shadow(0 24px 32px rgb(0 0 0 / 0.6));
}

/* ==========================================================================
   Mona Lisa feature
   ========================================================================== */

/*
   A painted backdrop sits behind this section. A sage wash is laid over it so
   the lamp, ivy and table stay visible but never fight the copy for contrast.
*/
.mona {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mona__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* <picture> needs an explicit height, otherwise the image inside resolves
   `height: 100%` against `auto` and stops short of the section. */
.mona__bg picture {
  display: block;
  height: 100%;
}
.mona__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.mona::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgb(157 177 133 / 0.86) 0%,
      rgb(157 177 133 / 0.62) 34%,
      rgb(157 177 133 / 0.3) 58%,
      rgb(157 177 133 / 0.5) 100%
    );
}
@media (max-width: 61.9375em) {
  /* Portrait crops to the middle of the backdrop, which is deliberately
     empty — pull it left so the lamp and table stay in shot. */
  .mona__bg img { object-position: 20% 50%; }
  .mona::after {
    background: linear-gradient(180deg, rgb(157 177 133 / 0.72), rgb(157 177 133 / 0.5));
  }
}

.mona__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62em) {
  .mona__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.mona__title { margin-block: var(--sp-4) var(--sp-4); }
.mona__quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-500);
  line-height: 1.3;
  color: #1d2116;
  max-width: 24ch;
}
.mona__body { margin-block-start: var(--sp-4); color: #3f4a32; max-width: 42ch; }

.mona__art {
  position: relative;
  width: min(100%, 27rem);
  justify-self: center;
}

/* The easter egg: hover or focus the mural and she says the quiet part. */
.mona__bubble {
  position: absolute;
  z-index: 4;
  top: 4%;
  right: -1.5rem;
  padding: 0.7rem 1.05rem;
  background-color: var(--c-cream);
  color: var(--c-ink);
  border-radius: 14px 14px 14px 3px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-300);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate3d(0, 8px, 0) rotate(2deg) scale(0.94);
  transform-origin: bottom left;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.mona__art:hover .mona__bubble,
.mona__art:focus-within .mona__bubble,
.mona__art.is-poked .mona__bubble {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
}
@media (max-width: 47.9375em) {
  .mona__bubble { right: 0; font-size: var(--fs-200); }
}

/* A thin curl of smoke that drifts while she is being looked at. */
.mona__smoke {
  position: absolute;
  z-index: 3;
  top: 22%;
  left: 26%;
  width: clamp(2rem, 8%, 3.25rem);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.mona__smoke path {
  fill: none;
  stroke: rgb(243 235 218 / 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.mona__art:hover .mona__smoke,
.mona__art:focus-within .mona__smoke,
.mona__art.is-poked .mona__smoke { opacity: 0.9; }
.mona__art:hover .mona__smoke path,
.mona__art:focus-within .mona__smoke path,
.mona__art.is-poked .mona__smoke path {
  animation: smoke-rise 3.4s linear infinite;
}
@keyframes smoke-rise {
  from { stroke-dashoffset: 90; }
  to   { stroke-dashoffset: -90; }
}
@media (prefers-reduced-motion: reduce) {
  .mona__smoke path { animation: none !important; stroke-dashoffset: 0; }
}

.mona__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-block-start: var(--sp-5);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5539;
}
@media (hover: none) {
  .mona__hint { display: none; }
}

/* ==========================================================================
   Gallery teaser
   ========================================================================== */

.teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-block-end: clamp(2rem, 4vw, 3.25rem);
}

/*
   Mobile keeps it simple: two columns of identical 4:5 tiles, so nothing can
   leave a gap. From 48em the grid becomes a fixed 4 x 2 composition where one
   tile runs the full height and one runs double width — the tiles fill their
   cell rather than carrying their own aspect ratio, which is what stops the
   ragged holes.
*/
.teaser__grid {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
}

.teaser__item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  border-radius: 2px;
}
.teaser__item .media { aspect-ratio: 4 / 5; }
.teaser__item img { transition: transform 900ms var(--ease-out); }
.teaser__item:hover img { transform: scale(1.05); }

@media (min-width: 48em) {
  .teaser__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 2 / 1;
  }
  .teaser__item { height: 100%; }
  .teaser__item .media { height: 100%; aspect-ratio: auto; }
  .teaser__item--tall { grid-row: span 2; }
  .teaser__item--wide { grid-column: span 2; }
}

.teaser__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, transparent, rgb(10 9 6 / 0.85));
  color: var(--c-cream);
  font-size: var(--fs-100);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.teaser__item:hover .teaser__caption,
.teaser__item:focus-visible .teaser__caption { opacity: 1; transform: none; }

/* ==========================================================================
   Atmosphere
   ========================================================================== */

.atmos__statement {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-700);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 20ch;
  color: var(--paper-fg);
}

.atmos__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 56em) {
  .atmos__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--sp-8); }
}

.atmos__tags { align-self: end; }

/* ==========================================================================
   Visit
   ========================================================================== */

.visit__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 62em) {
  .visit__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.visit__title { margin-block: var(--sp-4) var(--sp-4); }

.visit__details {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}
.visit__detail {
  display: grid;
  gap: 0.2rem;
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--rule);
}
.visit__detail dt {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-mint);
}
.visit__detail dd {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--fg);
}
.visit__detail dd a { text-decoration: none; }
.visit__detail dd a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.visit__actions { margin-block-start: var(--sp-6); }

/* ------------------------------------------------------------- hours ----- */

.visit__card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule);
  background-color: rgb(243 235 218 / 0.035);
  border-radius: var(--r-md);
}
.visit__card + .visit__card { margin-block-start: var(--sp-5); }

.visit__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.visit__card-title {
  font-family: var(--ff-display);
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--fg);
}
.visit__note {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-100);
  color: var(--fg-faint);
}

/* --------------------------------------------------------------- map ----- */

.map {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background-color: #17190f;
  /* A stylised street grid stands in until the real map is requested. */
  background-image:
    linear-gradient(rgb(157 177 133 / 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(157 177 133 / 0.10) 1px, transparent 1px),
    linear-gradient(38deg, transparent 47%, rgb(198 129 44 / 0.18) 47% 53%, transparent 53%),
    linear-gradient(-24deg, transparent 46%, rgb(198 129 44 / 0.12) 46% 54%, transparent 54%);
  background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%;
}
.map__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Google's embed is a light map; nudge it towards the site's warmth so it
   does not glare out of a dark section. */
.map__iframe {
  filter: saturate(0.88) contrast(0.96) brightness(0.94);
}