/* ============================================================
   MOSAIC KITCHEN - SECTIONS
   One full-screen colour block per section. Hard colour blocking,
   enormous type. Order: hero / story / food / menu / space /
   gallery / function / reserve / footer.
   ============================================================ */

/* ============================================================
   1 - HERO  #top
   ============================================================ */

.hero {
  background: var(--noir);
  color: var(--cream);
  text-align: center;
  align-items: center;
  overflow: clip;
}

.hero__bull {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  height: 56svh;
  width: auto;
  max-width: none;
  opacity: .16;
  filter: blur(14px);
  pointer-events: none;
  user-select: none;
  z-index: -1;
  will-change: transform;
}

@supports not (height: 56svh) {
  .hero__bull { height: 56vh; }
}

/* Parallax runs on the compositor: a JS scroll handler always trails the
   composited scroll by a frame, which reads as judder. Browsers without
   scroll-driven animations just get the static watermark. Rate matches the
   old JS (0.12 × scroll, fading out of play by ~120vh). */
@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .hero__bull {
      animation: bull-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120vh;
    }
  }
}

@keyframes bull-drift {
  from { transform: translateY(0); }
  to { transform: translateY(14.4vh); }
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.hero .eyebrow { color: var(--copper-light); }

.hero__title {
  margin: 0 0 clamp(1.1rem, 2.6vh, 2rem);
}

.hero__title .line__in {
  color: var(--copper);
  background-image: linear-gradient(115deg, #7D3D09 0%, #C8804F 45%, #FBB47B 70%, #8C4F1F 100%);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__title .line__in {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero__lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--plaster);
  max-width: 46ch;
  margin: 0 auto clamp(1.6rem, 4vh, 2.75rem);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}

.hero__cue {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: clamp(1.1rem, 3.2vh, 2.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--plaster);
  z-index: 2;
}

.hero__cue .i {
  width: 1.25rem;
  height: 1.25rem;
  animation: cue-bounce 2s var(--ease-out) infinite;
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(7px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue .i { animation: none; }
}

/* Keep the cue clear of the CTA row on short/mobile viewports. */
@media (max-width: 640px), (max-height: 620px) {
  .hero__cue { position: static; translate: none; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
  .hero { justify-content: center; }
}

/* ============================================================
   2 - MANIFESTO  #story
   ============================================================ */

.story {
  background: linear-gradient(165deg, #8A4713, #A85E22 55%, #8A4713);
  color: var(--noir);
  padding-inline: 0;
  justify-content: center;
  /* Leave room for the absolutely-positioned marquee strip. */
  padding-bottom: calc(var(--fs-section) * 1.1 + var(--nav-h) + clamp(1rem, 3vh, 2.5rem));
}

.story__inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.story .eyebrow { color: var(--noir); opacity: .65; }

.story__statement {
  color: var(--noir);
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
}

.story__copy {
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(14, 11, 9, .85);
  max-width: 54ch;
  text-wrap: pretty;
}

/* Two paragraphs of client copy: one rhythm gap between them, no top/bottom
   margin so the block keeps sitting flush under the statement. */
.story__copy p { margin: 0; }
.story__copy p + p { margin-top: clamp(.7rem, 1.8vh, 1.1rem); }

.story__marquee {
  position: absolute;
  left: 0;
  right: 0;
  /* Sits clear of the strip that falls below the fold when snapped. */
  bottom: var(--nav-h);
  border-top: 1px solid rgba(14, 11, 9, .22);
  padding-block: clamp(.5rem, 1.6vh, 1rem);
}

/* ============================================================
   3 - FOOD  #food
   ============================================================ */

.food {
  background: var(--cream);
  color: var(--noir);
}

.food .eyebrow { color: var(--copper-deep); }

.food__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}

.food__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--noir);
  padding-block: .08em;
  margin: 0;
}

.food__note {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(14, 11, 9, .55);
  padding-bottom: .35em;
}

/* On wide screens the gallery flexes to fill whatever the section has left,
   so the whole spread lands inside one viewport. */
.food__wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

.food__head { flex: 0 0 auto; }

.food__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(180px, 1.12fr) minmax(160px, 1fr);
  flex: 1 1 0;
  min-height: 0;
}

.food__item:nth-child(1) { grid-column: span 2; }

/* ============================================================
   4 - MENU  #menu
   ============================================================ */

.menu {
  background: var(--teal);
  color: var(--cream);
}

.menu .eyebrow { color: var(--copper-light); }

.menu__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cream);
  padding-block: .08em;
  margin: 0 0 clamp(.7rem, 1.8vh, 1.15rem);
}

.menu__footnote {
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: rgba(242, 233, 222, .5);
  max-width: 60ch;
  margin: clamp(.85rem, 2vh, 1.3rem) 0 0;
}

.menu__footnote:empty { display: none; }

.menu__foot {
  margin-top: clamp(1rem, 2.5vh, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.menu__updated {
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242, 233, 222, .45);
}

.menu__noscript {
  border: 1px solid rgba(251, 180, 123, .5);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  color: var(--cream);
  font-size: var(--fs-body);
}

.menu__noscript a { color: var(--copper-light); text-decoration: underline; }

/* ============================================================
   5 - THE SPACE  #space
   ============================================================ */

.space {
  background: var(--umber);
  color: var(--cream);
}

.space .eyebrow { color: var(--copper-light); }

.space__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 980px) {
  .space__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

.space__statement {
  color: var(--cream);
  margin: 0 0 clamp(1.1rem, 2.6vh, 1.75rem);
}

.space__copy {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: rgba(242, 233, 222, .75);
  max-width: 50ch;
  text-wrap: pretty;
}

.space__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 233, 222, .78);
}

.space__stats .sep {
  color: var(--copper);
  font-weight: 400;
}

.space__figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 860px;
  justify-self: center;
}

.space__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .8);
}

.space__frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Vignette + umber multiply wash. */
.space__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 30%, transparent 40%, rgba(58, 28, 5, .55) 100%);
  pointer-events: none;
}

/* Film grain. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  z-index: 2;
}

.space__caption {
  margin-top: .85rem;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242, 233, 222, .5);
}

/* ============================================================
   6 - GALLERY  #gallery
   A cream light-break between the umber SPACE block and the noir
   FUNCTION block, so the page doesn't run three dark sections in a
   row. Five columns, two rows: a wide anchor top-left and another
   bottom-right put the weight on a diagonal, everything else near
   square. Head is type-led; the photos stay quiet underneath it.
   ============================================================ */

.gallery {
  background: var(--cream);
  color: var(--noir);
}

.gallery .eyebrow { color: var(--copper-deep); }

/* Same trick as .food__wrap: the wrap eats the leftover height so the
   head and the whole grid land inside one viewport on wide screens. */
.gallery__wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

.gallery__head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.25rem, 3.2vh, 2.25rem);
}

.gallery__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--noir);
  padding-block: .08em;
  margin: 0;
}

.gallery__note {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(14, 11, 9, .55);
  padding-bottom: .35em;
}

.gallery__grid {
  display: grid;
  gap: clamp(.55rem, 1.2vw, 1.1rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(150px, 1fr));
  flex: 1 1 0;
  min-height: 0;
}

/* The two wide frames sit on a diagonal purely through auto-placement:
   first item takes columns 1–2, last item is left with columns 4–5. */
.gallery__shot--wide { grid-column: span 2; }

.gallery__shot {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(14, 11, 9, .07);
  box-shadow: 0 18px 40px -26px rgba(14, 11, 9, .65);
}

/* Absolutely positioned so the intrinsic 900x600 / 760x1351 sizes never
   feed back into the grid's own height - the rows own the geometry. */
.gallery__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* The shopfront's sign sits along the top edge of its source frame, so a
   centred cover crop beheads it - pin that one to the top instead. */
.gallery__shot--top img { object-position: 50% 0%; }

/* Vignette, same recipe as .space__frame and .function__shot - a touch
   lighter here so the frames don't go muddy against the cream. */
.gallery__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 30%, transparent 46%, rgba(14, 11, 9, .46) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   7 - FUNCTION ROOM  #function
   The one image-led block on the page: noir ground, a pinwheel
   collage of event photos, copper numerals.
   ============================================================ */

.function {
  background: var(--noir);
  color: var(--cream);
}

/* Copper bloom so the noir reads lit rather than flat between the umber
   SPACE block and the oxblood RESERVE block. .section sets isolation:isolate,
   so the negative z-index stays inside this section. */
.function::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(76% 60% at 76% 34%, rgba(125, 61, 9, .40), transparent 64%),
    radial-gradient(60% 55% at 6% 90%, rgba(200, 128, 79, .10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.function .eyebrow { color: var(--copper-light); }

/* Like .food__wrap: the wrap eats the leftover height so the collage and the
   stats band both land inside one viewport on wide screens. No min-height:0
   here - the automatic min-content floor is what stops a short viewport from
   squeezing the collage under the stats band and clipping it. */
.function__wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  gap: clamp(1rem, 2.4vh, 1.75rem);
}

.function__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 0;
}

@media (min-width: 980px) {
  .function__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  }
}

.function__text { align-self: center; }

.function__statement {
  color: var(--cream);
  margin: 0 0 clamp(1rem, 2.4vh, 1.5rem);
}

/* Second line takes the copper ramp, same recipe as the hero wordmark. */
.function__statement .line:last-child .line__in {
  color: var(--copper);
  background-image: linear-gradient(115deg, #7D3D09 0%, #C8804F 45%, #FBB47B 70%, #8C4F1F 100%);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .function__statement .line:last-child .line__in {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.function__copy {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: rgba(242, 233, 222, .75);
  max-width: 46ch;
  text-wrap: pretty;
}

.function__list {
  list-style: none;
  margin: clamp(.9rem, 2.2vh, 1.4rem) 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.function__list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: rgba(242, 233, 222, .8);
  max-width: 46ch;
}

.function__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: linear-gradient(115deg, #C8804F, #FBB47B);
}

.function__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1rem, 2.4vh, 1.75rem);
}

.function__aside {
  margin-top: clamp(.75rem, 1.8vh, 1.15rem);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: rgba(242, 233, 222, .5);
  max-width: 62ch;
}

.function__aside a {
  color: rgba(242, 233, 222, .8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.function__aside a:hover,
.function__aside a:focus-visible { color: var(--copper-light); }

/* ---------- Collage: a pinwheel of tall and wide frames ---------- */

.function__collage {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.function__mosaic {
  flex: 1 1 auto;
  display: grid;
  gap: clamp(.5rem, 1.1vw, .9rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  min-height: 260px;
}

.function__shot {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(242, 233, 222, .05);
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, .9);
}

/* Absolutely positioned so the 1080x1920 intrinsic sizes never feed back into
   the grid's own height - the rows are driven by the space the section has. */
.function__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Vignette, same recipe as .space__frame. */
.function__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 30%, transparent 42%, rgba(14, 11, 9, .58) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Tall / wide / tall / wide, rotating around the centre. */
.function__shot--a { grid-area: 1 / 1 / 4 / 2; }
.function__shot--b { grid-area: 1 / 2 / 3 / 3; }
.function__shot--c { grid-area: 3 / 2 / 6 / 3; }
.function__shot--d { grid-area: 4 / 1 / 6 / 2; }

/* Sits over the bottom-left frame - the one type/photo overlap in the block. */
.function__cap {
  position: absolute;
  left: clamp(.55rem, 1.4vw, 1rem);
  bottom: clamp(.55rem, 1.4vw, 1rem);
  z-index: 3;
  max-width: min(calc(100% - clamp(1.1rem, 2.8vw, 2rem)), 20rem);
  background: rgba(14, 11, 9, .84);
  border-left: 2px solid var(--copper);
  padding: .5rem .7rem .45rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(242, 233, 222, .82);
}

/* ---------- Stats band ---------- */

.function__facts {
  flex: 0 0 auto;
  border-top: 1px solid rgba(200, 128, 79, .32);
  padding-top: clamp(.85rem, 2vh, 1.4rem);
}

.function__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: end;
  margin: 0;
}

.function__stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .12rem;
  min-width: 0;
}

.function__stat-kicker {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(242, 233, 222, .42);
}

.function__stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw + .5rem, 4.5rem);
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
  padding-block: .06em;
  color: var(--copper);
  background-image: linear-gradient(115deg, #7D3D09 0%, #C8804F 45%, #FBB47B 72%, #8C4F1F 100%);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .function__stat-num {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.function__stat-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(242, 233, 222, .72);
}

.function__foot {
  margin-top: clamp(.7rem, 1.8vh, 1.15rem);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: rgba(242, 233, 222, .45);
  max-width: 62ch;
}

/* ============================================================
   8 - RESERVE  #reserve
   ============================================================ */

.reserve {
  background: var(--oxblood);
  color: var(--cream);
}

.reserve .eyebrow { color: var(--copper-light); }

.reserve__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  /* Wrap-safe: this title is plain text (no .line clip masks), so tighter
     leading makes any wrapped second line collide with the first. */
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cream);
  padding-block: .08em;
  margin: 0 0 .5rem;
}

.reserve__sub {
  font-size: var(--fs-body);
  color: rgba(242, 233, 222, .7);
  max-width: 52ch;
  margin: 0 0 clamp(1rem, 2.5vh, 1.6rem);
}

.reserve__sub a {
  color: var(--copper-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.reserve__foot {
  margin-top: 1.1rem;
  font-size: var(--fs-micro);
  color: rgba(242, 233, 222, .5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  line-height: 1.6;
}

.reserve__foot a {
  color: rgba(242, 233, 222, .78);
  display: inline-flex;
  align-items: center;
  gap: .35em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reserve__foot a:hover { color: var(--copper-light); }

/* ============================================================
   9 - FOOTER  #contact
   ============================================================ */

.footer {
  background: var(--noir);
  color: var(--cream);
  text-align: left;
}

/* The section is a flex column but the content sits one level down in
   .wrap; the wrap has to grow for the bar's margin-top: auto to reach
   the bottom of the viewport-filling footer. */
.footer > .wrap {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.footer__top {
  text-align: center;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

.footer__mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto clamp(1rem, 2.5vh, 1.75rem);
  opacity: .95;
}

.footer__statement {
  font-size: min(var(--fs-statement), 5rem);
  color: var(--cream);
  margin: 0;
}

.footer__cols {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.footer__col h3 {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 1rem;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
  color: rgba(242, 233, 222, .78);
}

.footer__col li { line-height: 1.5; }

.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  color: rgba(242, 233, 222, .78);
  transition: color 200ms var(--ease-out);
}

.footer__col a:hover,
.footer__col a:focus-visible { color: var(--copper-light); }

.footer__col .i { width: 1.05em; height: 1.05em; color: var(--copper); }

.footer__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1.25rem;
  font-size: var(--fs-body);
  color: rgba(242, 233, 222, .78);
}

.footer__hours dt { color: rgba(242, 233, 222, .55); }
.footer__hours dd { margin: 0; }
.footer__hours .is-closed { color: var(--plaster); }

.footer__bar {
  /* Pins to the bottom of the viewport-filling footer on desktop;
     inert in the mobile block layout (auto resolves to 0). */
  margin-top: auto;
  border-top: 1px solid rgba(242, 233, 222, .12);
  padding-block: 1.25rem clamp(1.25rem, 3vh, 2rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--plaster);
}

/* ============================================================
   Responsive
   ============================================================ */

/* The manifesto strip is absolute so it can hang off the bottom of a
   viewport-locked block. Once the block sizes to its own copy there is no
   bottom left to hang off, so the strip rejoins the flow and becomes the band
   that closes the section - flush to the edge, no padding under it. */
@media (max-width: 900px) {
  .section.story { padding-bottom: 0; }

  .story__marquee {
    position: static;
    margin-top: var(--pad-section);
  }
}

@media (max-width: 900px) {
  .food__wrap { display: block; }
  .food__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: clamp(200px, 42vw, 300px) repeat(2, clamp(210px, 44vw, 320px));
  }
  .food__item:nth-child(1) { grid-column: span 2; }
}

@media (max-width: 420px) {
  .food__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(5, clamp(220px, 62vw, 340px));
  }
  .food__item:nth-child(1) { grid-column: span 1; }
}

/* The gallery stops chasing the viewport height below the two-row
   breakpoint and becomes a two-column strip. Both wide frames keep their
   span, so each takes a full-width row of its own - the diagonal reads as
   a top-and-tail instead. Rows stay tall enough that the portrait frame
   crops to roughly a square rather than a letterbox sliver. */
@media (max-width: 900px) {
  .gallery__wrap { display: block; }
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(170px, 44vw, 280px);
  }
}

@media (max-width: 420px) {
  .gallery__grid { gap: .5rem; }
}

/* Below the two-column breakpoint the collage stops chasing the viewport
   height and takes a fixed ratio under the copy instead. */
@media (max-width: 979px) {
  .function__wrap { display: block; }
  .function__grid { display: block; }
  .function__collage { display: block; }
  .function__mosaic {
    aspect-ratio: 4 / 3.2;
    min-height: 0;
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
  }
  .function__facts { margin-top: clamp(1.5rem, 5vw, 2.5rem); }
}

@media (max-width: 720px) {
  .function__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.1rem, 4vw, 1.75rem) 1.5rem;
  }
}

@media (max-width: 560px) {
  /* Portrait phones: give the pinwheel more height so no frame is a sliver. */
  .function__mosaic { aspect-ratio: 4 / 4; }
  /* Sits just under the statement rather than over it - four copper numerals
     at 43px were the loudest thing on the page after the hero. */
  .function__stat-num { font-size: clamp(2.1rem, 9.5vw, 3.25rem); }
}

/* The caption is meant to overlap one frame. On a phone the collage is only
   as wide as the screen, so the 20rem cap let it run across the gutter and
   over the frame beside it - hold it inside the bottom-left column. */
@media (max-width: 900px) {
  .function__cap { max-width: min(calc(50% - 1.35rem), 20rem); }
}

/* Three inline facts and two copper separators do not fit one phone line, and
   the wrap strands a separator on its own at the right edge. Stacked, they
   read as the spec list they are. */
@media (max-width: 560px) {
  .space__stats {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }

  .space__stats .sep { display: none; }
}

@media (max-width: 768px) {
  .footer__bar { justify-content: flex-start; }
}