/* ---------- Tokens ---------- */
:root {
  --teal-950: #071e1a;
  --teal-900: #0b2b26;
  --teal-800: #123c34;
  --teal-700: #1a5147;
  --teal-600: #256a5c;

  --gold-900: #7d611f;
  --gold-700: #ab8a3c;
  --gold: #c9a24d;
  --gold-light: #e6cd8a;

  --cream: #f6efe0;
  --cream-dim: #d9cbb0;

  --ink: #0a201b;

  --serif: "Bodoni Moda", "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", sans-serif;

  --container: 1180px;
  --header-h: 84px;
  --radius: 18px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-reveal: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--teal-950);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--cream);
}
p { margin: 0 0 1em; }
ul, ol { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }
dl { margin: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: .75em 1.25em;
  z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 1em;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2.2em;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.btn-small { padding: .7em 1.5em; font-size: .72rem; }
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: rgba(201, 162, 77, .5);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(201, 162, 77, .08); transform: translateY(-1px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(7,30,26,.7), transparent);
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(7, 30, 26, .94);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(201, 162, 77, .2);
}
.header-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; }
.brand-logo { height: 64px; width: auto; }

.main-nav { display: none; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid rgba(201,162,77,.4);
  border-radius: 1px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1px;
  margin: 0 9px;
  background: var(--gold-light);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .main-nav {
    display: flex;
    align-items: center;
    gap: 2.75rem;
  }
  .main-nav ul { display: flex; gap: 2.4rem; }
  .main-nav a:not(.btn) {
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), color .25s var(--ease);
  }
  .main-nav a:not(.btn):hover { border-color: var(--gold); color: var(--gold-light); }
}

@media (max-width: 899px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    z-index: 200;
    background: var(--teal-950);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3rem 1.75rem;
    gap: 2.5rem;
    transform: translateX(100%) translateZ(0);
    transition: transform .4s var(--ease);
  }
  .main-nav.is-open { display: flex; transform: translateX(0) translateZ(0); }
  .main-nav ul { display: flex; flex-direction: column; gap: 1.75rem; width: 100%; }
  .main-nav a:not(.btn) { font-family: var(--serif); font-size: 1.6rem; }

  /* The pinned morph panels (position:fixed + filter, on wide+mobile alike
     since the morph effect now runs at every width) can end up compositing
     above the nav overlay on some browsers instead of behind it. Since the
     nav covers the full viewport whenever it's open, simplest reliable fix
     is to stop painting the morph stage entirely while the menu is open. */
  body.nav-open #morphStage { visibility: hidden; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,20,17,.5) 0%, rgba(7,20,17,.48) 45%, rgba(7,20,17,.8) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.hero-content .eyebrow { color: var(--gold-light); text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.hero h1 {
  font-size: clamp(3.2rem, 12vw, 7.5rem);
  letter-spacing: .01em;
  margin-bottom: .35em;
  text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
.hero-tagline {
  max-width: 40ch;
  margin: 0 auto 2.6em;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--cream-dim);
  font-weight: 300;
  text-shadow: 0 1px 16px rgba(0,0,0,.5);
}
.hero-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 1.4em;
}
.hero-link {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  border-bottom: 1px solid rgba(217, 203, 176, .35);
  padding-bottom: 3px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hero-link:hover { color: var(--gold-light); border-color: var(--gold-light); }

.scroll-cue {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 24px; height: 38px;
  border: 1px solid rgba(230, 205, 138, .4);
  border-radius: 20px;
}
.scroll-cue span {
  position: absolute;
  top: 7px; left: 50%;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  background: var(--gold-light);
  border-radius: 50%;
  animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; }
}

/* ---------- Section rhythm ---------- */
section { padding: 6rem 0; }
@media (min-width: 900px) { section { padding: 9.5rem 0; } }

/* ---------- Morph stage (cinematic pinned-scroll mode) ----------
   Default: .morph-stage/.morph-panel are inert wrappers — sections behave
   exactly as normal stacked, scrollable content. This is also the complete
   experience for mobile, reduced-motion, and no-JS visitors.
   Only when script.js confirms GSAP+ScrollTrigger loaded, motion is allowed,
   and the viewport is wide enough does it add `.is-active`, which is what
   switches sections into pinned, scroll-scrubbed panels. */
.morph-stage.is-active {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.morph-stage.is-active .morph-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  padding: 6rem 0 2.5rem;
  will-change: opacity, transform, filter;
}

/* Shared cycling photo backdrop behind every pinned panel except the hero
   (opaque) and the drinks section (keeps its own independent slideshow). */
.morph-bg { display: none; }
.morph-stage.is-active .morph-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.morph-bg-media { position: absolute; inset: 0; }
.morph-bg-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.morph-bg-media img.is-active { opacity: 1; }
.morph-bg-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,20,17,.72) 0%, rgba(7,20,17,.6) 45%, rgba(7,20,17,.88) 100%);
}
.morph-stage.is-active .story,
.morph-stage.is-active .hours,
.morph-stage.is-active .contact { background: transparent; }
.morph-stage.is-active .story-copy p,
.morph-stage.is-active .story-facts dd,
.morph-stage.is-active .fact dt,
.morph-stage.is-active .hours-table th,
.morph-stage.is-active .hours-table td,
.morph-stage.is-active .hours-note,
.morph-stage.is-active .contact-value,
.morph-stage.is-active .contact-label,
.morph-stage.is-active .location-strip-text address {
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.morph-stage.is-active .story-head h2,
.morph-stage.is-active .hours-solo h2 {
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.morph-stage.is-active .contact-card,
.morph-stage.is-active .location-strip { background: rgba(7, 20, 17, .35); }

/* Pinned panels get a compact spacing pass — every panel must fit within
   one viewport with room to spare, since there's no scrolling within it. */
.morph-stage.is-active .story,
.morph-stage.is-active .drinks-cinema { min-height: 0; }
.morph-stage.is-active .story-grid { gap: 2.5rem; }
.morph-stage.is-active .story-head,
.morph-stage.is-active .story-copy p { margin-bottom: .7em; }
.morph-stage.is-active .story-facts { margin-top: 0; }
.morph-stage.is-active .story-media-main { height: 48vh; }
.morph-stage.is-active .story-media-main img { height: 100%; aspect-ratio: auto; }

.morph-stage.is-active .section-heading { margin-bottom: 1rem; }
.morph-stage.is-active .cinema-item { padding: .4rem 0; }
.morph-stage.is-active .drinks-note { margin-top: .75rem; }

.morph-stage.is-active .hours-table th,
.morph-stage.is-active .hours-table td { padding: .55em .3em; }
.morph-stage.is-active .hours-table { margin-top: 1rem; }
.morph-stage.is-active .hours-note { margin-top: 1rem; }

.morph-stage.is-active .contact-grid { margin-top: .75rem; }
.morph-stage.is-active .location-strip { margin-top: 1rem; padding: 1.4rem 1.5rem; }

.section-heading { max-width: 50ch; margin: 0 auto 4rem; text-align: center; }
.section-heading h2 { font-size: clamp(2.1rem, 4vw, 3rem); }

/* ---------- Story (About) ---------- */
.story {
  background: var(--teal-950);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.story-grid {
  display: grid;
  gap: 3.5rem;
  width: 100%;
}
.story-copy-col h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.story-copy p { color: var(--cream-dim); font-size: 1.02rem; }
.story-copy em { color: var(--gold-light); font-style: italic; }

.story-facts { display: flex; flex-direction: column; margin-top: .5rem; }
.fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(201, 162, 77, .2);
}
.fact:last-child { border-bottom: 1px solid rgba(201, 162, 77, .2); }
.fact dt {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.fact dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--gold-light);
  text-align: right;
}

.story-media-main {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.story-media-main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }

@media (min-width: 900px) {
  .story-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
}

@media (max-width: 899px) {
  .story-media-col { display: none; }
}

/* ---------- Drinks (cinematic slideshow) ---------- */
.drinks-cinema {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cinema-media { position: absolute; inset: 0; }
.cinema-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.2s var(--ease);
}
.cinema-media img.is-active { opacity: 1; }
.cinema-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,20,17,.72) 0%, rgba(7,20,17,.6) 45%, rgba(7,20,17,.88) 100%);
}
.cinema-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.drink-num {
  display: block;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--gold-light);
}
.drink-tag {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-left: .9em;
  vertical-align: middle;
}

.cinema-list {
  max-width: 760px;
  margin: 0 auto;
}
.cinema-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  padding: 1.9rem 0;
  border-top: 1px solid rgba(201, 162, 77, .25);
}
.cinema-list li:last-child { border-bottom: 1px solid rgba(201, 162, 77, .25); }
.cinema-item h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0 0 .35em;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.cinema-item p {
  color: var(--cream-dim);
  font-size: .96rem;
  max-width: 46ch;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}

.drinks-note {
  margin: 2.5rem auto 0;
  text-align: center;
  font-style: italic;
  color: var(--cream-dim);
  font-size: .92rem;
}

/* ---------- Hours ---------- */
.hours { background: var(--teal-900); border-top: 1px solid rgba(201, 162, 77, .15); }
.hours-solo { max-width: 640px; margin: 0 auto; text-align: center; }
.hours-solo h2 { font-size: clamp(2.1rem, 4vw, 2.8rem); }
.hours-table { width: 100%; margin-top: 1.75rem; text-align: left; }
.hours-table tr { border-bottom: 1px solid rgba(201, 162, 77, .15); }
.hours-table th, .hours-table td {
  text-align: left;
  padding: .9em .3em;
  font-weight: 400;
}
.hours-table th {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
}
.hours-table td { text-align: right; color: var(--cream-dim); font-variant-numeric: tabular-nums; }
.hours-table td.closed { color: var(--gold-700); font-style: italic; }
.hours-note {
  margin-top: 1.75rem;
  color: var(--cream-dim);
  font-size: .92rem;
  border-left: 1px solid var(--gold);
  padding-left: 1.1rem;
  text-align: left;
}

/* ---------- Contact ---------- */
.contact {
  background: var(--teal-950);
  text-align: center;
}
.contact-inner { max-width: 780px; }
.contact-grid {
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

.location-strip {
  margin-top: 1.5rem;
  padding: 1.8rem 1.5rem;
  border: 1px solid rgba(201, 162, 77, .28);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.location-strip-text address {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cream);
}
@media (min-width: 640px) {
  .location-strip {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .location-strip-text .eyebrow { margin-bottom: .3em; }
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.8rem 1rem;
  border: 1px solid rgba(201, 162, 77, .28);
  border-radius: var(--radius);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.contact-card:hover {
  background: rgba(201, 162, 77, .08);
  border-color: var(--gold);
  transform: translateY(-3px);
}
.contact-label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.contact-value {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(.76rem, 2.6vw, .92rem);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--teal-950);
  border-top: 1px solid rgba(201, 162, 77, .2);
  padding: 3.5rem 0 2.5rem;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.footer-brand { display: flex; align-items: center; }
.footer-brand img { height: 52px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.footer-nav a { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); }
.footer-nav a:hover { color: var(--gold-light); }
.footer-address, .footer-copyright {
  font-size: .82rem;
  color: var(--cream-dim);
  margin: 0;
}
.footer-copyright { opacity: .6; }
.footer-credit {
  font-size: .78rem;
  color: var(--cream-dim);
  opacity: .6;
  margin: 0;
}
.footer-credit a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s var(--ease);
}
.footer-credit a:hover { color: var(--gold); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* image reveal: fade + scale-down-into-place */
.reveal-img {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1s var(--ease-reveal), transform 1.1s var(--ease-reveal);
}
.reveal-img.in-view { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-img { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
  .hero-media img { transform: none !important; }
  .cinema-media img { transition: none; }
  .morph-stage.is-active,
  .morph-stage.is-active .morph-panel {
    position: static;
    height: auto;
    overflow: visible;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}