@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

:root {
  --base-100: #f5e1bf;
  --base-200: #c49241;
  --base-300: #f39e00df;
  --base-400: #8d7501d3;
  --base-500: #17100a;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1,
a,
p {
  color: var(--base-100);
  text-transform: uppercase;
  line-height: 0.85;
}

h1 {
  font-family: "Instrument Sans";
  font-size: clamp(1.35rem, 2.2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.hero-header h1 span {
  display: block;
}

.hero-header h1 span + span {
  margin-top: 0.75rem;
  font-size: 0.8em;
}

a {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-size: 1.5rem;
  text-decoration: none;
}

p {
  font-family: "Instrument Sans";
  font-weight: 500;
}

.preloader {
  position: fixed;
  width: 100%;
  height: 100svh;
  color: var(--base-100);
  overflow: hidden;
  z-index: 20;
}

.preloader-bg {
  position: absolute;
  width: 100%;
  height: 100svh;
  background-color: var(--base-500);
}

.preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(5.5rem, 10vw, 8rem);
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity;
}

.preloader-logo img {
  width: 100%;
  height: auto;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 4;
}

.nav-logo img {
  width: 5rem;
  transform-origin: top left;
}

.nav-toggler {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--base-100);
  cursor: pointer;
  font-family: "Barlow Condensed";
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 0.85;
  text-transform: uppercase;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
  background-color: var(--base-400);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.menu::before {
  position: absolute;
  inset: -20%;
  content: "";
  opacity: 0.16;
  background-image: linear-gradient(
      45deg,
      transparent 46%,
      var(--base-100) 47%,
      var(--base-100) 53%,
      transparent 54%
    ),
    linear-gradient(
      -45deg,
      transparent 46%,
      var(--base-100) 47%,
      var(--base-100) 53%,
      transparent 54%
    );
  background-size: 7rem 7rem;
  transform: rotate(-8deg);
  animation: menu-pattern-slide 24s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}

@keyframes menu-pattern-slide {
  from {
    background-position: 0 0, 3.5rem 3.5rem;
  }
  to {
    background-position: 14rem 14rem, 17.5rem 17.5rem;
  }
}

.menu-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(350px);
  width: 100%;
  height: 100%;
  padding: 10rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  filter: blur(10px);
  will-change: transform, opacity, filter;
  z-index: 1;
}

.menu-links {
  width: min(100%, 78rem);
  min-height: 0;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(0.5rem, 1.5vh, 1.25rem);
}

.menu-links a {
  position: relative;
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-size: clamp(2.75rem, min(7vw, 11vh), 7rem);
  line-height: 0.82;
  text-align: center;
  white-space: nowrap;
}

.menu-links .line {
  display: block;
}

.menu-links .clone {
  position: absolute;
  top: 0;
  left: 0;
}

.menu-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.menu-footer p {
  font-size: 0.75rem;
}

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  background-color: var(--base-500);
  overflow: hidden;
  z-index: 0;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background-image: linear-gradient(
      rgba(23, 16, 10, 0.38),
      rgba(23, 16, 10, 0.38)
    ),
    url("./public/hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: opacity;
}

.page-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  z-index: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transform: scale(1);
  overflow-y: auto;
  will-change: transform, clip-path;
}

.hero-header {
  position: absolute;
  top: 8.5rem;
  left: 2rem;
  width: min(24rem, calc(100% - 4rem));
  text-align: left;
  z-index: 1;
}

.hero-header h1 {
  color: var(--base-100);
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.84;
  text-transform: none;
}

.hero-header h1 span + span {
  margin-top: 0.35rem;
  font-size: 0.95em;
}

.hero-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
}

.hero-footer .footer-contact {
  display: block;
  max-width: 42%;
  font-family: "Instrument Sans";
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-img {
  position: absolute;
  left: 50%;
  bottom: -15%;
  transform: translateX(-50%);
  width: 35%;
  min-width: 250px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.hero-img-bg {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--base-300);
  border-radius: 100%;
  transform-origin: center;
  transform: scale(0);
}

.hero-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  transform-origin: center;
  width: 130%;
}

.footer-line,
.hero-header h1 .char,
.hero-header h1 .word {
  display: inline-block;
  will-change: transform;
}

.story-section {
  position: relative;
  width: 100%;
  height: 175svh;
  overflow: hidden;
  background: var(--base-500);
  color: var(--base-100);
}

.story-image {
  position: absolute;
  inset: 0;
  background: var(--base-500);
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.8) contrast(1.05);
}

.story-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

.story-intro,
.story-copy {
  position: absolute;
  left: 50%;
  width: min(75%, 62rem);
  transform: translateX(-50%);
  text-align: center;
}

.story-intro {
  top: 24%;
}

.story-intro h2,
.story-copy h3 {
  font-family: "Barlow Condensed";
  font-weight: 600;
  line-height: 0.9;
  text-transform: uppercase;
}

.story-intro h2 {
  font-size: clamp(3.5rem, 8vw, 9rem);
}

.story-intro p {
  max-width: 30rem;
  margin: 1rem auto 0;
  line-height: 1.3;
  text-transform: none;
}

.story-copy {
  bottom: 17%;
  opacity: 0;
}

.story-copy h3 {
  color: var(--base-500);
  font-size: clamp(2rem, 4.5vw, 5rem);
}

.story-learn-more {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--base-500);
  color: var(--base-500);
  font-family: "Instrument Sans";
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease;
}

.story-learn-more:hover,
.story-learn-more:focus-visible {
  background-color: var(--base-500);
  color: var(--base-100);
}

.butterfly-container {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.butterfly,
.butterfly-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 125px;
  height: 125px;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.butterfly-shadow {
  width: 115px;
  height: 115px;
  filter: brightness(0) blur(2px);
  opacity: 0.5;
}

@media (max-width: 1000px) {
  nav {
    padding: 1.5rem;
  }

  .hero-header {
    top: 7rem;
    left: 1.5rem;
    width: calc(100% - 3rem);
  }

  .hero-img {
    width: 80%;
    bottom: -5%;
  }

  .menu-content {
    padding: 8rem 1.5rem 1.5rem;
    transform: translate(-50%, -50%) translateZ(0);
  }

  .menu-links {
    width: 100%;
    gap: clamp(0.75rem, 2vh, 1.25rem);
  }

  .menu-links a {
    font-size: clamp(2.5rem, 11vw, 6rem);
  }

  .menu-footer {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .story-intro,
  .story-copy {
    width: calc(100% - 3rem);
  }

  .story-intro {
    top: 20%;
  }

  .story-intro p {
    font-size: 0.95rem;
  }

  .butterfly,
  .butterfly-shadow {
    width: 90px;
    height: 90px;
  }

  .butterfly-shadow {
    width: 82px;
    height: 82px;
  }
}


/* =====================================================================
   ADDED — introductory scroll section
   Appended to the end of styles.css. Nothing above this was modified.
   Uses ONLY the existing palette variables. No new colours.
   ===================================================================== */

.menu-scroll {
  position: relative;
  width: 100%;
  background: var(--base-500);
  padding: 6rem 0 8rem;
}

/* left-edge progress rule */
.menu-scroll-rail {
  position: absolute;
  top: 0;
  left: clamp(1rem, 3vw, 2.5rem);
  width: 2px;
  height: 100%;
  background: rgba(245, 225, 191, 0.13);
  z-index: 3;
  pointer-events: none;
}

.menu-scroll-rail-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--base-200);
}

.menu-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 100svh;
  padding: 0 clamp(2rem, 7vw, 8rem) 0 clamp(3rem, 9vw, 9rem);
}

.menu-panel-media {
  position: relative;
  z-index: 1;
  order: 1;
  height: clamp(340px, 64svh, 660px);
  overflow: hidden;
}

.menu-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* one consistent warm grade so the four photos read as a set */
  filter: saturate(0.92) contrast(1.05);
}

.menu-panel-copy {
  position: relative;
  z-index: 2;
  order: 2;
  margin-left: -3.5rem;
  max-width: 34rem;
  padding: clamp(2.25rem, 4.5vw, 4.5rem);
  background: var(--base-300);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.menu-panel--flip .menu-panel-copy {
  order: 1;
  margin-left: 0;
  margin-right: -3.5rem;
}

.menu-panel--flip .menu-panel-media {
  order: 2;
}

.mp-index {
  font-family: "Barlow Condensed";
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--base-400);
}

.mp-eyebrow {
  font-family: "Instrument Sans";
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--base-500);
  opacity: 0.72;
}

.mp-title {
  font-family: "Barlow Condensed";
  font-size: clamp(3rem, 6.5vw, 6.5rem);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--base-500);
}

.mp-rule {
  display: block;
  width: 4.5rem;
  height: 3px;
  background: var(--base-400);
}

.mp-body {
  font-family: "Instrument Sans";
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 400;
  line-height: 1.55;
  text-transform: none;
  color: var(--base-500);
}

.mp-contact {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mp-contact a {
  font-family: "Instrument Sans";
  font-size: inherit;
  font-weight: 500;
  text-transform: none;
  color: var(--base-500);
  border-bottom: 1px solid var(--base-400);
}

.mp-hours {
  line-height: 1.5;
  opacity: 0.82;
}

.mp-script {
  align-self: flex-start;
  font-family: "Caveat", "Instrument Sans", cursive;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  color: var(--base-400);
  border-bottom: 2px solid transparent;
  transition: border-color 180ms ease;
}

.mp-script:hover,
.mp-script:focus-visible {
  border-bottom-color: var(--base-400);
}

/* ---- reveal (class is only added by JS, so content is never lost ---- */
.menu-scroll.js-reveal .menu-panel-copy {
  opacity: 0;
  transform: translateX(-3%);
  clip-path: inset(0 0 100% 0);
  transition: opacity 900ms ease, transform 900ms ease, clip-path 1000ms ease;
}

.menu-scroll.js-reveal .menu-panel--flip .menu-panel-copy {
  transform: translateX(3%);
}

.menu-scroll.js-reveal .menu-panel-media img {
  transform: scale(1.07);
  transition: transform 1200ms ease;
}

.menu-scroll.js-reveal .menu-panel.is-visible .menu-panel-copy {
  opacity: 1;
  transform: translateX(0);
  clip-path: inset(0 0 0 0);
}

.menu-scroll.js-reveal .menu-panel.is-visible .menu-panel-media img {
  transform: scale(1);
}

@media (max-width: 1000px) {
  .menu-scroll {
    padding: 4rem 0 5rem;
  }

  .menu-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0 1.5rem;
    gap: 0;
    margin-bottom: 4rem;
  }

  .menu-panel-copy,
  .menu-panel--flip .menu-panel-copy {
    order: 1;
    margin: -2rem 1rem 0;
    max-width: none;
  }

  .menu-panel-media,
  .menu-panel--flip .menu-panel-media {
    order: 2;
  }

  .menu-panel-media {
    height: 52svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-scroll.js-reveal .menu-panel-copy,
  .menu-scroll.js-reveal .menu-panel-media img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* ======================================================================
   MOBILE PERFORMANCE LAYER  (appended — nothing above changed)
   ====================================================================== */

/* ---- FIX 2: the menu pattern only animates while the menu is open ----
   It animates background-position across a 140%-viewport element, which
   repaints every frame and cannot be composited. It was running forever,
   even with the menu closed. */
.menu[aria-hidden="false"]::before {
  animation-play-state: running;
}

/* ---- phones: drop the tonal filter on the big menu photographs ----
   saturate/contrast on a full-width image is a per-frame paint cost for a
   difference you cannot see. */
@media (max-width: 1000px) {
  .menu-panel-media img {
    filter: none;
  }
}

/* ---- respect the OS setting everywhere ---- */
@media (prefers-reduced-motion: reduce) {
  .menu::before { animation: none !important; }
  .menu-scroll.js-reveal .menu-panel-copy,
  .menu-scroll.js-reveal .menu-panel-media img {
    transition: none !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ======================================================================
   FIX — the open menu could not be clicked.

   The overlay sits at z-index 0 and .page-container at z-index 1, so the
   container is painted ON TOP of the menu. In the original, the clip-path
   collapse shrinks the container's hit area to nothing, which is what let
   clicks reach the links behind it.

   If that clip is ever bypassed, interrupted, or changed, the container
   keeps covering the middle of the screen and none of the links respond.
   This removes the possibility entirely: while the menu is open the page
   container cannot receive pointer events.

   Nothing else about the transition is touched.
   ====================================================================== */
.menu[aria-hidden="false"] ~ .page-container {
  pointer-events: none;
}