:root {
  --ink: #18352d;
  --green: #24483d;
  --green-deep: #132d26;
  --coral: #dc6f5a;
  --coral-dark: #b34b39;
  --canvas: #f1f4ef;
  --surface: #fffefa;
  --white: #ffffff;
  --muted: #5f706a;
  --line: rgba(24, 53, 45, .2);
  --display: "Arial Narrow", "Aptos Display", "Helvetica Neue", Arial, sans-serif;
  --body: Aptos, "Segoe UI", Arial, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-space: clamp(5.5rem, 10vw, 9rem);
  --header-height: 4.75rem;
  --z-header: 20;
  --z-actions: 30;
  --z-dialog: 40;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  background: var(--canvas);
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body.dialog-open {
  overflow: hidden;
}

img {
  max-width: 100%;
}

figure,
blockquote {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
blockquote {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: calc(var(--z-dialog) + 1);
  padding: .75rem 1rem;
  color: var(--green-deep);
  background: var(--white);
  transform: translateY(-130%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(.5rem);
}

.section-shell {
  width: min(100%, 88rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ratio-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.ratio-portrait > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem var(--gutter);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .24);
  transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(241, 244, 239, .95);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.brand img {
  width: 3rem;
  height: 3rem;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.brand-name {
  display: grid;
  font-family: var(--display);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.brand-name b {
  font-size: .86rem;
}

.brand-name span {
  margin-top: .28rem;
  font-size: .68rem;
  letter-spacing: .22em;
}

.desktop-nav {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.header-socials {
  display: none;
  align-items: center;
  gap: .1rem;
}

.header-socials a {
  width: 2.25rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: inherit;
  transition: transform .14s var(--ease-out), opacity .18s ease;
}

.header-socials svg {
  width: 1.28rem;
  height: 1.28rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.header-socials .fill {
  fill: currentColor;
  stroke: none;
}

.menu-trigger {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 0 .55rem .8rem;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .14s var(--ease-out), opacity .18s ease;
}

.menu-trigger svg,
.icon-button svg,
.hero-scroll svg,
.lightbox-controls svg,
.social-links svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.lucide-icon {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
}

.mobile-menu {
  z-index: var(--z-dialog);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  color: var(--canvas);
  background: var(--green-deep);
  border: 0;
}

.mobile-menu[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  animation: menu-in .28s var(--ease-drawer) both;
}

.mobile-menu.instant-open[open] {
  animation: none;
}

.mobile-menu::backdrop {
  background: rgba(12, 28, 24, .65);
}

.mobile-menu-top,
.mobile-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mobile-menu-foot {
  align-items: flex-end;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  letter-spacing: 0;
  text-transform: none;
}

.mobile-menu nav {
  display: grid;
  align-content: center;
  padding: 1.25rem var(--gutter);
}

.mobile-menu nav a {
  padding: .6rem 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 10.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.js .mobile-menu[open]:not(.instant-open) nav a {
  animation: menu-link-in .26s var(--ease-out) both;
}

.js .mobile-menu[open]:not(.instant-open) nav a:nth-child(2) { animation-delay: 35ms; }
.js .mobile-menu[open]:not(.instant-open) nav a:nth-child(3) { animation-delay: 70ms; }
.js .mobile-menu[open]:not(.instant-open) nav a:nth-child(4) { animation-delay: 105ms; }
.js .mobile-menu[open]:not(.instant-open) nav a:nth-child(5) { animation-delay: 140ms; }
.js .mobile-menu[open]:not(.instant-open) nav a:nth-child(6) { animation-delay: 175ms; }

.icon-button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
  transition: transform .14s var(--ease-out), color .18s ease, background-color .18s ease;
}

.menu-trigger:active,
.icon-button:active,
.lightbox-controls button:active,
.social-links a:active,
.header-socials a:active {
  transform: scale(.96);
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--white);
  background: var(--green-deep);
}

.hero-media,
.hero-media img,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  display: block;
  object-fit: cover;
  transform: scale(1.045);
  animation: hero-breathe 16s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

.hero-shade {
  background: rgba(8, 23, 18, .27);
}

.hero-light {
  position: absolute;
  inset: -35% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 232, 196, .22) 48%, rgba(255, 255, 255, .08) 54%, transparent 68%);
  mix-blend-mode: screen;
  opacity: .7;
  transform: translate3d(-28%, 0, 0);
  animation: morning-light 9s var(--ease-in-out) infinite;
  will-change: transform, opacity;
}

.hero-orbit {
  position: absolute;
  z-index: 2;
  top: clamp(6.5rem, 15vh, 9.5rem);
  right: clamp(1rem, 5vw, 5rem);
  width: clamp(7.75rem, 18vw, 11.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--white);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.hero-orbit-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  animation: orbit-spin 15s linear infinite;
  will-change: transform;
}

.hero-orbit-ring circle {
  fill: rgba(19, 45, 38, .18);
  stroke: rgba(255, 255, 255, .65);
  stroke-width: 1;
}

.hero-orbit-ring text {
  font-family: var(--body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.75px;
}

.hero-orbit-core {
  position: relative;
  width: 48%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  color: var(--green-deep);
  background: var(--coral);
  border-radius: 50%;
  text-align: center;
  font-size: clamp(.48rem, 1.2vw, .66rem);
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.05;
  animation: orbit-core 3.8s var(--ease-in-out) infinite alternate;
}

.hero-orbit-core b {
  display: block;
  margin-top: .16rem;
  font-family: var(--display);
  font-size: 1.65em;
  letter-spacing: -.02em;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100%, 68rem);
  padding: calc(var(--header-height) + 3rem) var(--gutter) clamp(5.4rem, 13vh, 7.25rem);
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero h1,
.story-lead h2,
.menu-heading h2,
.experience-heading h2,
.gallery-heading h2,
.reviews-heading h2,
.visit-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .94;
}

.hero h1 {
  max-width: 12ch;
  font-size: clamp(3.15rem, 13vw, 6rem);
}

.hero-title-mobile {
  display: none;
}

.button-arrow {
  display: none;
}

.hero-copy {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 2.3vw, 1.2rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.55rem;
}

.button {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.2rem;
  gap: .55rem;
  border: 1px solid transparent;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .16s var(--ease-out), color .18s ease, background-color .18s ease, border-color .18s ease;
}

.button-primary {
  color: var(--green-deep);
  background: #f88973;
  border-color: #f88973;
}

.button-ghost,
.button-outline-light {
  color: var(--white);
  background: rgba(8, 23, 18, .12);
  border-color: rgba(255, 255, 255, .8);
}

.button-coral {
  color: var(--white);
  background: var(--coral-dark);
  border-color: var(--coral-dark);
}

.button:active {
  transform: scale(.97);
}

.hero-scroll {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-scroll svg {
  width: 1.15rem;
  height: 1.15rem;
  animation: explore-nudge 1.8s var(--ease-in-out) infinite;
}

.morning-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  color: var(--canvas);
  background: var(--green);
}

.morning-guide > div {
  min-height: 8.25rem;
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 1.25rem var(--gutter);
  border-right: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.morning-guide strong {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.15;
}

.morning-guide span:not(.status-dot) {
  color: rgba(255, 255, 255, .72);
  font-size: .7rem;
  line-height: 1.35;
}

.guide-status {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: .65rem !important;
}

.guide-status strong {
  grid-column: 3;
}

.guide-icon {
  color: #ff9a84;
}

.guide-status .guide-icon {
  width: 1rem;
  height: 1rem;
}

.status-dot {
  position: relative;
  grid-column: 1;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: #ff9a84;
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: -.36rem;
  border: 1px solid #ff9a84;
  border-radius: inherit;
  opacity: 0;
  transform: scale(.55);
  animation: status-pulse 2.2s var(--ease-out) infinite;
}

.brand-ticker {
  overflow: hidden;
  color: var(--green-deep);
  background: var(--coral);
  border-block: 1px solid rgba(19, 45, 38, .38);
}

.brand-ticker-track {
  width: max-content;
  display: flex;
  transform: translate3d(0, 0, 0);
  animation: ticker-run 22s linear infinite;
  will-change: transform;
}

.brand-ticker span {
  flex: none;
  padding: .72rem 0 .68rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1;
  white-space: nowrap;
}

.story-section {
  position: relative;
  padding: var(--section-space) 0;
  overflow: hidden;
  background: var(--canvas);
}

.story-section > .section-shell {
  position: relative;
  z-index: 1;
}

.story-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.story-ring {
  position: absolute;
  top: 5%;
  right: -4rem;
  width: clamp(9rem, 22vw, 18rem);
  aspect-ratio: 1;
  border: clamp(.8rem, 2vw, 1.5rem) solid rgba(220, 111, 90, .18);
  border-right-color: rgba(36, 72, 61, .2);
  border-radius: 50%;
  animation: orbit-spin 18s linear infinite reverse;
}

.story-bean {
  position: absolute;
  display: block;
  width: clamp(3rem, 7vw, 5.5rem);
  aspect-ratio: 1.35 / 1;
  background: rgba(220, 111, 90, .2);
  border-radius: 62% 38% 56% 44% / 48% 62% 38% 52%;
  transform: rotate(-24deg);
  animation: bean-float 6s var(--ease-in-out) infinite alternate;
}

.story-bean::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 48%;
  width: 1px;
  background: rgba(19, 45, 38, .35);
  transform: rotate(11deg);
}

.story-bean-one {
  top: 38%;
  left: -1rem;
}

.story-bean-two {
  right: 3%;
  bottom: 8%;
  width: clamp(2.5rem, 5vw, 4rem);
  animation-delay: -3s;
  animation-direction: alternate-reverse;
}

.story-layout {
  display: grid;
  gap: clamp(3.5rem, 8vw, 6.5rem);
}

.story-lead {
  display: grid;
  align-content: start;
  gap: 0;
}

.story-label {
  margin: 0 0 1.4rem;
  color: var(--coral-dark);
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.story-lead h2 {
  max-width: 12ch;
  font-size: clamp(2.9rem, 8vw, 5.8rem);
}

.story-accent {
  color: var(--coral-dark);
}

.story-copy {
  display: grid;
  gap: 1.2rem;
  max-width: 38rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55;
}

.story-copy p {
  margin: 0;
}

.story-links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.35rem;
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.story-links a {
  position: relative;
  color: var(--coral-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.4;
  transition: color .18s ease, transform .16s var(--ease-out);
}

.story-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.22rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .2s var(--ease-out);
}

.story-cta {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  color: var(--coral-dark);
  font-size: .78rem;
}

.story-composition {
  position: relative;
  display: grid;
  gap: 1.5rem;
  align-content: start;
  padding-top: .65rem;
}

.story-inside {
  position: relative;
  background: var(--green);
}

.story-inside > picture {
  display: block;
}

.story-inside img,
.experience-wide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.experience-wide figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: .65rem .8rem;
  color: var(--white);
  background: var(--green-deep);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.experience-wide {
  position: relative;
  overflow: hidden;
}

.story-inside {
  width: min(100%, 38rem);
  margin-inline: auto 0;
  background: transparent;
  overflow: visible;
}

.story-inside::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -.7rem -.7rem .6rem .7rem;
  border: 1px solid rgba(179, 75, 57, .65);
  pointer-events: none;
  transform: rotate(1.15deg);
}

.story-inside img {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

.story-inside figcaption {
  position: static;
  padding: .8rem 0 0;
  color: var(--muted);
  background: transparent;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.35;
  text-transform: none;
}

.text-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid currentColor;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.text-link span {
  transition: transform .16s var(--ease-out);
}

.menu-section {
  position: relative;
  padding: var(--section-space) 0;
  overflow: hidden;
  color: var(--canvas);
  background: var(--green-deep);
}

.menu-section > .section-shell {
  position: relative;
  z-index: 1;
}

.menu-orbit {
  position: absolute;
  top: clamp(1.5rem, 4vw, 4rem);
  right: clamp(-10rem, -8vw, -4rem);
  width: clamp(15rem, 30vw, 28rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 154, 132, .22);
  border-radius: 50%;
  pointer-events: none;
  animation: orbit-spin 24s linear infinite;
}

.menu-orbit::before,
.menu-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 154, 132, .16);
  border-radius: 50%;
}

.menu-orbit::before { inset: 18%; }
.menu-orbit::after { inset: 36%; }

.menu-orbit span {
  position: absolute;
  width: clamp(.7rem, 1.4vw, 1.15rem);
  aspect-ratio: 1;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 0 .4rem rgba(220, 111, 90, .12);
}

.menu-orbit span:nth-child(1) { top: 10%; left: 18%; }
.menu-orbit span:nth-child(2) { top: 48%; right: -2%; }
.menu-orbit span:nth-child(3) { bottom: 5%; left: 32%; }

.menu-heading {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.menu-heading h2 {
  max-width: 11ch;
  font-size: clamp(3rem, 8.5vw, 6rem);
}

.menu-heading > div {
  align-self: end;
}

.menu-heading p {
  max-width: 30rem;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 1.05rem;
}

.menu-heading span {
  display: block;
  margin-top: .75rem;
  color: #ff9a84;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.menu-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.menu-photo-main {
  grid-column: 1 / -1;
}

.menu-photo {
  isolation: isolate;
  background: var(--green);
}

.menu-photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -25% auto -25% -50%;
  width: 22%;
  pointer-events: none;
  background: rgba(255, 255, 255, .2);
  filter: blur(8px);
  opacity: 0;
  transform: translate3d(-140%, 0, 0) rotate(13deg);
  animation: photo-glint 8.5s linear infinite;
  will-change: transform, opacity;
}

.menu-photo-brunch::after { animation-delay: -5.8s; }
.menu-photo-coffee::after { animation-delay: -2.9s; }

.menu-photo img {
  transition: transform .42s var(--ease-out), filter .22s ease;
}

.menu-photo figcaption {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: grid;
  gap: .12rem;
  padding: 1rem;
  color: var(--white);
  background: rgba(19, 45, 38, .88);
  transition: transform .24s var(--ease-out), background-color .2s ease;
}

.menu-photo figcaption span {
  color: rgba(255, 255, 255, .68);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.menu-photo figcaption strong {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.1;
}

.menu-details {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.menu-items {
  border-top: 1px solid rgba(255, 255, 255, .23);
}

.menu-items article {
  padding: 1.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .23);
}

.menu-items article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.menu-items h3,
.menu-items strong {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem;
}

.menu-items h3 span {
  color: rgba(255, 255, 255, .55);
  font-family: var(--body);
  font-size: .7rem;
  font-weight: 600;
}

.menu-items p {
  max-width: 38rem;
  margin: .4rem 0 0;
  color: rgba(255, 255, 255, .7);
}

.menu-service {
  align-self: start;
  padding: 1.5rem;
  color: var(--green-deep);
  background: var(--coral);
}

.menu-service > strong,
.menu-service-title strong {
  font-family: var(--display);
  font-size: 1.55rem;
}

.menu-service-title {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.menu-service-title .lucide-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.menu-service p {
  max-width: 30rem;
  margin: .55rem 0 1.25rem;
}

.experience-section {
  position: relative;
  padding: var(--section-space) 0 0;
  overflow: hidden;
  color: var(--green-deep);
  background: var(--coral);
}

.experience-section > .section-shell,
.experience-section > .practical-strip {
  position: relative;
  z-index: 1;
}

.steam-mark {
  position: absolute;
  top: 1.5rem;
  right: clamp(.5rem, 4vw, 4rem);
  width: clamp(6rem, 13vw, 10rem);
  height: clamp(7rem, 14vw, 11rem);
  pointer-events: none;
  opacity: .42;
  transform: rotate(9deg);
}

.steam-mark span {
  position: absolute;
  bottom: 0;
  width: 1.15rem;
  height: 72%;
  border-right: 3px solid var(--green-deep);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(0, 18%, 0) scaleY(.72);
  animation: steam-rise 4.4s var(--ease-in-out) infinite;
  will-change: transform, opacity;
}

.steam-mark span:nth-child(1) { left: 10%; }
.steam-mark span:nth-child(2) { left: 43%; animation-delay: -1.45s; }
.steam-mark span:nth-child(3) { right: 10%; animation-delay: -2.9s; }

.experience-heading {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.experience-heading h2 {
  max-width: 10ch;
  font-size: clamp(3.4rem, 9vw, 6rem);
}

.experience-heading p {
  max-width: 31rem;
  margin: 0;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

.experience-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.experience-wide,
.experience-list {
  grid-column: 1 / -1;
}

.experience-wide {
  aspect-ratio: 4 / 3;
  background: var(--green);
}

.experience-wide img {
  transform: scale(1.025);
  animation: image-drift 13s var(--ease-in-out) infinite alternate;
  will-change: transform;
}

.experience-list {
  margin: 1rem 0 1.75rem;
  border-top: 1px solid rgba(19, 45, 38, .34);
}

.experience-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .8rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(19, 45, 38, .34);
}

.experience-icon {
  margin-top: .18rem;
  color: var(--green-deep);
  transition: transform .22s var(--ease-out), color .18s ease;
}

.experience-list h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: -.02em;
}

.experience-list p {
  max-width: 33rem;
  margin: .3rem 0 0;
  color: var(--green-deep);
}

.practical-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--section-space);
  color: var(--canvas);
  background: var(--green-deep);
}

.practical-strip > div {
  position: relative;
  min-height: 10rem;
  display: grid;
  align-content: center;
  gap: .35rem;
  padding: 1.4rem var(--gutter);
  border-right: 1px solid rgba(255, 255, 255, .17);
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.practical-icon {
  width: 1.55rem;
  height: 1.55rem;
  padding: .22rem;
  color: var(--green-deep);
  background: var(--coral);
  border-radius: 50%;
  opacity: .65;
  animation: practical-pulse 3.6s var(--ease-out) infinite;
}

.practical-strip > div:nth-child(2) .practical-icon { animation-delay: -.9s; }
.practical-strip > div:nth-child(3) .practical-icon { animation-delay: -1.8s; }
.practical-strip > div:nth-child(4) .practical-icon { animation-delay: -2.7s; }

.practical-strip strong {
  font-family: var(--display);
  font-size: 1.25rem;
}

.practical-strip span {
  color: rgba(255, 255, 255, .7);
  font-size: .76rem;
  line-height: 1.4;
}

.gallery-section {
  padding: var(--section-space) 0;
  overflow: hidden;
  background: var(--surface);
}

.gallery-heading {
  display: grid;
  gap: .7rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.gallery-kicker {
  margin: 0 0 .2rem;
  color: var(--coral-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.gallery-heading h2 {
  max-width: 10ch;
  font-size: clamp(3.4rem, 9vw, 6rem);
}

.gallery-heading p {
  max-width: 32rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.gallery-meta {
  color: var(--coral-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gallery-rail-wrap {
  width: min(100%, 100rem);
  margin-inline: auto;
}

.gallery-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.1rem .75rem;
  padding: 0 var(--gutter);
  overflow: visible;
}

.gallery-item {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: zoom-in;
  transition: transform .16s var(--ease-out), box-shadow .22s ease;
}

.gallery-image {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--green);
}

.gallery-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .42s var(--ease-out), filter .22s ease;
}

.gallery-open {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  color: var(--coral-dark);
  background: rgba(255, 254, 250, .96);
  border: 1px solid rgba(179, 75, 57, .42);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .16s var(--ease-out), color .18s ease, background-color .18s ease;
}

.gallery-caption {
  display: block;
  padding: .7rem .1rem 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.35;
  text-transform: none;
}

.gallery-item:active {
  transform: scale(.985);
}

.gallery-item:active .gallery-open {
  transform: scale(.94);
}

.lightbox {
  z-index: var(--z-dialog);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  color: var(--white);
  background: #0c1714;
  border: 0;
}

.lightbox[open] {
  display: grid;
  place-items: center;
  animation: lightbox-in .24s var(--ease-out) both;
}

.lightbox.instant-open[open] {
  animation: none;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, .9);
}

.lightbox-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: max(1rem, env(safe-area-inset-top)) var(--gutter) max(1rem, env(safe-area-inset-bottom));
}

.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  letter-spacing: .12em;
}

.icon-button.light {
  color: var(--white);
}

.lightbox figure {
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .75rem;
  padding: 1rem 0;
  touch-action: pan-y;
}

.lightbox figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 11rem);
  max-height: calc(100svh - 11rem);
  display: block;
  object-fit: contain;
  transform-origin: center;
}

.lightbox figcaption {
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lightbox-controls {
  display: flex;
  justify-content: center;
  gap: .75rem;
}

.lightbox-controls button {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: transform .14s var(--ease-out), color .18s ease, background-color .18s ease, border-color .18s ease;
}

.reviews-section {
  position: relative;
  padding: var(--section-space) 0;
  overflow: hidden;
  background: var(--canvas);
}

.reviews-section > .section-shell {
  position: relative;
  z-index: 1;
}

.review-halo {
  position: absolute;
  top: clamp(1.5rem, 7vw, 6rem);
  right: clamp(-5rem, -4vw, -1rem);
  width: clamp(10rem, 23vw, 21rem);
  aspect-ratio: 1;
  border: 1px solid rgba(220, 111, 90, .28);
  border-radius: 50%;
  pointer-events: none;
  animation: orbit-spin 19s linear infinite;
}

.review-halo::before,
.review-halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(36, 72, 61, .18);
}

.review-halo::before { inset: 19%; }
.review-halo::after { inset: 38%; }

.review-halo span {
  position: absolute;
  width: .62rem;
  aspect-ratio: 1;
  background: var(--coral);
  border-radius: 50%;
  box-shadow: 0 0 0 .3rem rgba(220, 111, 90, .12);
}

.review-halo span:nth-child(1) { top: 2%; left: 48%; }
.review-halo span:nth-child(2) { top: 33%; right: -1%; }
.review-halo span:nth-child(3) { bottom: 6%; right: 18%; }
.review-halo span:nth-child(4) { bottom: 8%; left: 16%; }
.review-halo span:nth-child(5) { top: 31%; left: -1%; }

.reviews-layout {
  display: grid;
  gap: 1.25rem;
}

.reviews-heading {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.reviews-heading h2 {
  max-width: 11ch;
  font-size: clamp(3rem, 7.5vw, 5.5rem);
}

.rating-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rating-summary > strong {
  font-family: var(--display);
  font-size: 3.75rem;
  letter-spacing: -.03em;
  line-height: 1;
}

.rating-summary > span {
  display: grid;
  color: var(--muted);
  font-size: .78rem;
}

.rating-summary b,
.review-stars {
  color: var(--coral-dark);
  letter-spacing: .07em;
}

.rating-summary b,
.review-feature .review-stars {
  animation: star-glow 3.2s var(--ease-in-out) infinite alternate;
}

.review-card {
  display: grid;
  align-content: start;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}

.review-feature {
  padding: 1.6rem;
  color: var(--canvas);
  background: var(--green-deep);
  border: 0;
  transform-style: preserve-3d;
  transition: transform .28s var(--ease-out), box-shadow .28s ease;
  will-change: transform;
}

.review-feature > * {
  transform: translateZ(1rem);
}

.review-person {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.review-person img {
  width: 3rem;
  height: 3rem;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.review-person > div {
  display: grid;
}

.review-person strong {
  line-height: 1.2;
}

.review-person span {
  color: var(--muted);
  font-size: .74rem;
}

.review-feature .review-person span,
.review-feature .text-link {
  color: rgba(255, 255, 255, .68);
}

.review-stars {
  margin-top: 1.25rem;
  font-size: .82rem;
}

.review-stars span {
  color: rgba(24, 53, 45, .2);
}

.review-card blockquote {
  margin: .9rem 0 .6rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  letter-spacing: -.015em;
  line-height: 1.38;
}

.review-feature blockquote {
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.28;
}

.review-card .text-link {
  align-self: end;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .65rem;
}

.review-pair {
  display: grid;
  gap: 1.25rem;
}

.visit-section {
  color: var(--canvas);
  background: var(--green);
}

.visit-layout {
  display: grid;
  gap: 3rem;
  padding-block: var(--section-space);
}

.visit-heading {
  display: grid;
  gap: 2rem;
}

.visit-heading h2 {
  max-width: 11ch;
  font-size: clamp(3rem, 8vw, 6rem);
}

.today-panel {
  position: relative;
  align-self: end;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.today-panel::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: clamp(3.5rem, 9vw, 7rem);
  height: 3px;
  background: var(--coral);
  transform-origin: left center;
  animation: hours-flow 4.8s var(--ease-in-out) infinite alternate;
}

.today-panel span,
.today-panel small {
  display: block;
  color: rgba(255, 255, 255, .66);
  font-size: .72rem;
}

.today-panel span {
  letter-spacing: .08em;
  text-transform: uppercase;
}

.today-panel strong {
  display: block;
  margin: .35rem 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  line-height: 1.1;
}

.visit-details address {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  color: rgba(255, 255, 255, .8);
  font-style: normal;
  font-size: 1.05rem;
}

.visit-icon {
  margin-top: .12rem;
  color: var(--coral);
}

.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.contact-links {
  display: grid;
  gap: .7rem;
  margin-top: 2rem;
}

.contact-links a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: transform .16s var(--ease-out), border-color .18s ease;
}

.contact-links span {
  color: rgba(255, 255, 255, .62);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hours {
  align-self: end;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.hours h3 {
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--display);
  font-size: 1.75rem;
}

.hours-icon {
  width: 1.45rem;
  height: 1.45rem;
  color: var(--coral);
}

.hours dl {
  margin: 0;
}

.hours dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
}

.hours dt,
.hours dd {
  margin: 0;
}

.hours dd {
  color: rgba(255, 255, 255, .72);
  text-align: right;
}

.hours > p {
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: .75rem;
}

.map-wrap {
  width: 100%;
  height: min(72vh, 38rem);
  min-height: 26rem;
  background: #d6d8d2;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.mobile-actions {
  position: fixed;
  z-index: var(--z-actions);
  right: .75rem;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  left: .75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  color: var(--canvas);
  background: var(--green-deep);
  border: 1px solid rgba(255, 255, 255, .18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 1.5rem));
  transition: opacity .2s ease, transform .28s var(--ease-drawer);
}

.mobile-actions.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mobile-actions a {
  min-height: 3.4rem;
  display: grid;
  place-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mobile-actions a + a {
  color: var(--green-deep);
  background: var(--coral);
}

.site-footer {
  display: grid;
  gap: 2.5rem;
  padding: 3rem var(--gutter) calc(6rem + env(safe-area-inset-bottom));
  color: var(--green-deep);
  background: var(--coral);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-brand img {
  width: 4.2rem;
  height: 4.2rem;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.footer-brand p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(19, 45, 38, .35);
}

.footer-nav a {
  padding: .7rem 0;
  border-bottom: 1px solid rgba(19, 45, 38, .35);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  gap: .7rem;
}

.social-links a {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-deep);
  transition: transform .14s var(--ease-out), color .18s ease, background-color .18s ease;
}

.social-links svg {
  width: 1.25rem;
  height: 1.25rem;
}

.social-links .fill {
  fill: currentColor;
  stroke: none;
}

.footer-small {
  margin: 0;
  font-size: .7rem;
}

.motion-paused .hero-media img,
.motion-paused .hero-light,
.motion-paused .hero-orbit-ring,
.motion-paused .hero-orbit-core,
.motion-paused .hero-scroll svg,
.motion-paused .status-dot::after,
.motion-paused .brand-ticker-track,
.motion-paused .story-ring,
.motion-paused .story-bean,
.motion-paused .menu-orbit,
.motion-paused .menu-photo::after,
.motion-paused .steam-mark span,
.motion-paused .experience-wide img,
.motion-paused .practical-strip .practical-icon,
.motion-paused .gallery-item span,
.motion-paused .review-halo,
.motion-paused .rating-summary b,
.motion-paused .review-stars,
.motion-paused .today-panel::before {
  animation-play-state: paused;
}

.js [data-reveal] {
  opacity: 0;
  transition: opacity .58s ease, transform .72s var(--ease-out), clip-path .8s var(--ease-out);
}

.js [data-reveal="slide"] {
  transform: translateY(1.5rem);
}

.js [data-reveal="clip"] {
  opacity: .35;
  transform: translateY(1rem);
  clip-path: inset(0 0 18% 0);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}

.js .hero-content > * {
  animation: hero-in .72s var(--ease-out) both;
}

.js .hero-content > :nth-child(2) { animation-delay: .08s; }
.js .hero-content > :nth-child(3) { animation-delay: .16s; }
.js .hero-content > :nth-child(4) { animation-delay: .24s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-2.5%); }
  to { opacity: 1; transform: none; }
}

@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(45%); }
  to { opacity: 1; transform: none; }
}

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-breathe {
  from { transform: scale(1.045) translate3d(0, 0, 0); }
  to { transform: scale(1.095) translate3d(-.7%, -.5%, 0); }
}

@keyframes morning-light {
  0%, 12% { opacity: .16; transform: translate3d(-26%, 0, 0); }
  48% { opacity: .74; }
  88%, 100% { opacity: .2; transform: translate3d(28%, 0, 0); }
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes orbit-core {
  from { transform: translate3d(0, -3%, 0) scale(.97); }
  to { transform: translate3d(0, 4%, 0) scale(1.03); }
}

@keyframes explore-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.32rem); }
}

@keyframes status-pulse {
  0% { opacity: .75; transform: scale(.55); }
  75%, 100% { opacity: 0; transform: scale(1.45); }
}

@keyframes ticker-run {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes bean-float {
  from { transform: translate3d(0, -8%, 0) rotate(-24deg); }
  to { transform: translate3d(18%, 14%, 0) rotate(-10deg); }
}

@keyframes photo-glint {
  0%, 15% { opacity: 0; transform: translate3d(-140%, 0, 0) rotate(13deg); }
  21% { opacity: .52; }
  34%, 100% { opacity: 0; transform: translate3d(760%, 0, 0) rotate(13deg); }
}

@keyframes steam-rise {
  0% { opacity: 0; transform: translate3d(0, 18%, 0) scaleY(.72); }
  30% { opacity: .9; }
  75%, 100% { opacity: 0; transform: translate3d(18%, -22%, 0) scaleY(1.08); }
}

@keyframes image-drift {
  from { transform: scale(1.025) translate3d(0, 0, 0); }
  to { transform: scale(1.075) translate3d(-.8%, -.6%, 0); }
}

@keyframes practical-pulse {
  0%, 15% { opacity: .55; transform: scale(.82); }
  55%, 100% { opacity: 1; transform: scale(1.35); }
}

@keyframes star-glow {
  from { opacity: .62; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-.08rem); }
}

@keyframes hours-flow {
  from { opacity: .65; transform: scaleX(.45); }
  to { opacity: 1; transform: scaleX(1); }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-2px);
  }

  .button-primary:hover {
    background: #ffa38f;
    border-color: #ffa38f;
  }

  .button-ghost:hover,
  .button-outline-light:hover {
    color: var(--green-deep);
    background: var(--white);
  }

  .button-coral:hover {
    color: var(--green-deep);
    background: var(--white);
    border-color: var(--white);
  }

  .text-link:hover span {
    transform: translate3d(.22rem, -.22rem, 0);
  }

  .story-links a:hover {
    color: var(--green-deep);
    transform: translateY(-.12rem);
  }

  .story-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .menu-photo:hover img {
    transform: scale(1.045);
    filter: saturate(1.08);
  }

  .menu-photo:hover figcaption {
    transform: translateY(-.3rem);
    background: rgba(19, 45, 38, .96);
  }

  .experience-list article:hover .experience-icon {
    transform: rotate(-7deg) scale(1.08);
    color: var(--coral-dark);
  }

  .gallery-item:hover {
    transform: translateY(-.45rem);
    box-shadow: 0 1rem 2rem rgba(19, 45, 38, .16);
  }

  .gallery-item:hover img {
    transform: scale(1.045);
    filter: brightness(.88) saturate(1.08);
  }

  .gallery-item:hover .gallery-open {
    color: var(--green-deep);
    background: var(--coral);
    transform: translate3d(.1rem, -.1rem, 0) rotate(3deg);
  }

  .icon-button:hover,
  .lightbox-controls button:hover {
    color: var(--green-deep);
    background: var(--white);
    border-color: var(--white);
  }

  .contact-links a:hover {
    transform: translateX(.3rem);
    border-bottom-color: rgba(255, 255, 255, .65);
  }

  .social-links a:hover {
    color: var(--coral);
    background: var(--green-deep);
    transform: translateY(-.2rem) rotate(-3deg);
  }
}

@media (min-width: 60rem) {
  .story-layout {
    grid-template-columns: minmax(0, .92fr) minmax(26rem, 1.08fr);
    align-items: start;
    gap: clamp(3.5rem, 7vw, 8rem);
  }

  .story-lead {
    padding-top: clamp(.5rem, 1.4vw, 1.15rem);
  }

  .story-lead h2 {
    max-width: 12ch;
    font-size: clamp(3.2rem, 6vw, 5.2rem);
  }

  .story-composition {
    padding-top: clamp(1rem, 2vw, 1.7rem);
  }

  .story-inside {
    width: min(100%, 40rem);
  }

  .story-inside img {
    aspect-ratio: 4 / 5;
  }

}

@media (min-width: 43.75rem) {
  .morning-guide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .morning-guide > div {
    min-height: 9.5rem;
    border-bottom: 0;
  }

  .menu-heading,
  .experience-heading,
  .visit-heading {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    align-items: end;
  }

  .experience-heading > p {
    grid-column: 2;
    grid-row: 2;
  }

  .experience-heading h2 {
    grid-column: 1;
    grid-row: 2;
  }

  .gallery-heading {
    grid-template-columns: minmax(0, 1.25fr) minmax(14rem, .75fr);
    grid-template-areas:
      "kicker meta"
      "title copy";
    align-items: end;
    column-gap: clamp(2rem, 6vw, 7rem);
    row-gap: .7rem;
  }

  .gallery-heading .gallery-kicker {
    grid-area: kicker;
  }

  .gallery-heading h2 {
    grid-area: title;
  }

  .gallery-heading p {
    grid-area: copy;
    align-self: end;
  }

  .gallery-heading .gallery-meta {
    grid-area: meta;
    align-self: start;
    justify-self: start;
  }

  .menu-showcase {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }

  .menu-photo-main {
    grid-column: 1 / 6;
  }

  .menu-photo-brunch {
    grid-column: 6 / 10;
    margin-top: 5rem;
  }

  .menu-photo-coffee {
    grid-column: 10 / 13;
    margin-top: 10rem;
  }

  .menu-details {
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
    gap: clamp(3rem, 7vw, 7rem);
    margin-top: 5rem;
  }

  .experience-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }

  .experience-wide {
    grid-column: 1 / 9;
    grid-row: 1;
  }

  .experience-list {
    grid-column: 9 / 13;
    grid-row: 1;
    margin: 0;
  }

  .practical-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .practical-strip > div {
    min-height: 11rem;
    border-bottom: 0;
  }

  .gallery-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem 1rem;
  }

  .reviews-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 2rem;
  }

  .reviews-heading {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    align-content: start;
    padding-right: 2rem;
  }

  .review-feature {
    grid-column: 6 / 13;
    grid-row: 1;
    padding: 2rem;
  }

  .review-pair {
    grid-column: 6 / 13;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .visit-heading {
    grid-column: 1 / -1;
  }

  .visit-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(21rem, .7fr);
    column-gap: clamp(4rem, 8vw, 8rem);
  }

  .visit-details {
    grid-column: 1;
  }

  .hours {
    grid-column: 2;
    position: relative;
    top: calc(-1.5rem - 100px);
  }

  .visit-heading .today-panel {
    top: calc(-1.5rem - 100px);
  }

  .site-footer {
    grid-template-columns: 1.4fr 1fr auto;
    align-items: start;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }

  .footer-small {
    grid-column: 1 / -1;
  }
}

@media (min-width: 68.75rem) {
  .header-actions {
    display: none;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.15rem, 2vw, 2.4rem);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .desktop-nav a {
    position: relative;
    padding: .8rem 0;
    transition: color .18s ease, transform .16s var(--ease-out);
  }

  .desktop-nav a:not(.nav-visit)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: .58rem;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .2s var(--ease-out);
  }

  .desktop-nav a[aria-current="true"]::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .desktop-nav .nav-visit {
    padding: .75rem 1rem;
    color: var(--green-deep);
    background: var(--coral);
  }

  .site-header {
    border-bottom-color: rgba(255, 255, 255, .16);
    background: linear-gradient(180deg, rgba(8, 23, 18, .42), rgba(8, 23, 18, 0));
  }

  .hero-media img {
    object-position: center 42%;
  }

  .hero-shade {
    background: linear-gradient(180deg, rgba(8, 23, 18, .16) 0%, rgba(8, 23, 18, .08) 42%, rgba(8, 23, 18, .82) 100%);
  }

  .hero-orbit {
    top: clamp(4rem, 7vh, 6rem);
    right: clamp(2rem, 6vw, 6rem);
    width: clamp(11rem, 15vw, 14rem);
  }

  .hero-content {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(24rem, .75fr);
    grid-template-areas:
      "eyebrow copy"
      "title actions";
    align-items: end;
    column-gap: clamp(3rem, 6vw, 7.5rem);
    row-gap: .9rem;
    padding: calc(var(--header-height) + 2rem) clamp(3rem, 5.8vw, 7rem) max(4.75rem, calc(env(safe-area-inset-bottom) + 3.8rem)) clamp(3rem, 6.7vw, 7rem);
  }

  .hero-content .eyebrow {
    grid-area: eyebrow;
    margin: 0;
    font-size: .7rem;
    letter-spacing: .18em;
  }

  .hero h1 {
    grid-area: title;
    max-width: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.8rem, 7.2vw, 8.2rem);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: .84;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .hero-copy {
    grid-area: copy;
    max-width: 30ch;
    justify-self: end;
    margin: 0;
    font-size: clamp(1.05rem, 1.45vw, 1.32rem);
    line-height: 1.38;
    text-align: right;
  }

  .hero-actions {
    grid-area: actions;
    width: min(100%, 24rem);
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin: .45rem 0 0;
  }

  .hero-actions .button {
    min-height: 3.75rem;
    padding-inline: 1.2rem;
  }

  .hero-actions .button-primary {
    color: var(--green-deep);
    background: var(--canvas);
    border-color: var(--canvas);
  }

  .hero-actions .button-arrow {
    display: inline-block;
    margin-left: auto;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
  }

  .hero-scroll {
    display: none;
  }

  .menu-trigger {
    display: none;
  }

  .mobile-actions {
    display: none;
  }
}

@media (min-width: 68.75rem) and (hover: hover) and (pointer: fine) {
  .desktop-nav a:not(.nav-visit):hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .desktop-nav .nav-visit:hover {
    transform: translateY(-2px);
    background: #f88973;
  }
}

@media (min-width: 60rem) and (max-width: 68.6875rem) {
  .hero-media img {
    object-position: center 42%;
  }

  .hero-shade {
    background: linear-gradient(180deg, rgba(8, 23, 18, .16) 0%, rgba(8, 23, 18, .08) 42%, rgba(8, 23, 18, .82) 100%);
  }

  .hero-orbit {
    top: clamp(4.5rem, 8vh, 5.5rem);
    right: 2rem;
    width: clamp(9.5rem, 15vw, 11rem);
  }

  .hero-content {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .78fr);
    grid-template-areas:
      "eyebrow copy"
      "title actions";
    align-items: end;
    column-gap: 2.5rem;
    row-gap: .7rem;
    padding: calc(var(--header-height) + 1.5rem) 3rem 3.5rem;
  }

  .hero-content .eyebrow {
    grid-area: eyebrow;
    margin: 0;
    font-size: .68rem;
    letter-spacing: .16em;
  }

  .hero h1 {
    grid-area: title;
    max-width: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.6rem, 6.5vw, 5.8rem);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: .86;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .hero-copy {
    grid-area: copy;
    max-width: 25ch;
    justify-self: end;
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    text-align: right;
  }

  .hero-actions {
    grid-area: actions;
    width: min(100%, 22rem);
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: .35rem 0 0;
  }

  .hero-actions .button {
    min-height: 3.5rem;
    padding-inline: .95rem;
  }

  .hero-actions .button-primary {
    color: var(--green-deep);
    background: var(--canvas);
    border-color: var(--canvas);
  }

  .hero-actions .button-arrow {
    display: inline-block;
    margin-left: auto;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
  }

  .hero-scroll {
    display: none;
  }
}

@media (max-width: 43.6875rem) {
  .site-header {
    height: 5.15rem;
    padding: .65rem 1rem;
    border-bottom-color: rgba(255, 255, 255, .16);
    background: linear-gradient(180deg, rgba(10, 27, 21, .5), rgba(10, 27, 21, 0));
  }

  .brand {
    gap: .55rem;
  }

  .brand img {
    width: 3.3rem;
    height: 3.3rem;
    flex: none;
    border: 2px solid rgba(255, 255, 255, .88);
    box-shadow: 0 .35rem 1.1rem rgba(7, 18, 14, .28);
  }

  .brand-name {
    display: flex;
    align-items: baseline;
    gap: .38rem;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .brand-name b {
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .1em;
  }

  .brand-name span {
    margin-top: 0;
    font-family: var(--body);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .18em;
  }

  .header-actions {
    gap: .05rem;
  }

  .header-socials {
    display: flex;
  }

  .header-socials a {
    width: 2.1rem;
    height: 2.75rem;
  }

  .header-socials svg {
    width: 1.22rem;
    height: 1.22rem;
  }

  .menu-trigger {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
  }

  .menu-trigger span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .menu-trigger svg {
    width: 1.65rem;
    height: 1.65rem;
    stroke-width: 1.25;
  }

  .hero-media img {
    object-position: center 38%;
    animation-duration: 20s;
  }

  .hero-shade {
    background: linear-gradient(180deg, rgba(8, 23, 18, .2) 0%, rgba(8, 23, 18, .06) 36%, rgba(8, 23, 18, .82) 100%);
  }

  .hero-light {
    opacity: .42;
  }

  .hero-orbit {
    top: clamp(6.9rem, 17vh, 9rem);
    right: .85rem;
    width: clamp(8.25rem, 30vw, 10rem);
  }

  .hero-orbit-ring circle {
    fill: rgba(19, 45, 38, .12);
    stroke: rgba(255, 255, 255, .76);
  }

  .hero-orbit-core {
    background: rgba(220, 111, 90, .92);
    box-shadow: 0 .6rem 1.5rem rgba(7, 18, 14, .2);
  }

  .hero-content {
    padding: calc(var(--header-height) + 2rem) 1.75rem calc(4.4rem + env(safe-area-inset-bottom));
  }

  .hero-content .eyebrow {
    margin-bottom: .82rem;
    font-size: .66rem;
    letter-spacing: .16em;
  }

  .hero-title-desktop {
    display: none;
  }

  .hero-title-mobile {
    display: inline;
  }

  .hero h1 {
    max-width: 100%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.45rem, 11.6vw, 4.1rem);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: .9;
    text-transform: uppercase;
  }

  .hero-copy {
    max-width: 27ch;
    margin-top: 1rem;
    font-size: clamp(1rem, 4.2vw, 1.14rem);
    line-height: 1.38;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    max-width: 26rem;
    margin-top: 1.45rem;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 3.6rem;
    padding-inline: .7rem;
    font-size: .67rem;
    letter-spacing: .1em;
  }

  .hero-actions .button-primary {
    color: var(--green-deep);
    background: var(--canvas);
    border-color: var(--canvas);
  }

  .hero-actions .button-ghost {
    background: rgba(8, 23, 18, .08);
    border-color: rgba(255, 255, 255, .82);
  }

  .button-arrow {
    display: inline-block;
    margin-left: auto;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-.05em);
  }

  .hero-scroll {
    display: none;
  }
}

@media (max-width: 22rem) {
  .brand-name {
    display: grid;
    gap: .08rem;
    align-items: start;
    line-height: .95;
  }

  .brand-name b {
    font-size: .8rem;
  }

  .brand-name span {
    font-size: .5rem;
    letter-spacing: .14em;
  }

  .header-socials a {
    width: 1.9rem;
  }

  .header-socials svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

@media (max-width: 25rem) and (max-height: 44rem) {
  .hero-orbit {
    display: none;
  }

  .hero-content {
    padding-top: calc(var(--header-height) + 1.25rem);
    padding-bottom: 3rem;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 14vw, 3.15rem);
    line-height: .91;
  }

  .eyebrow {
    margin-bottom: .65rem;
    font-size: .64rem;
  }

  .hero-copy {
    margin-top: .85rem;
    font-size: .92rem;
  }

  .hero-actions {
    margin-top: 1rem;
  }

  .hero-actions .button {
    min-height: 2.85rem;
    padding-block: .7rem;
  }

  .hero-scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .js .hero-content > *,
  .mobile-menu[open],
  .mobile-menu[open] nav a,
  .lightbox[open],
  .hero-media img,
  .hero-light,
  .hero-orbit-ring,
  .hero-orbit-core,
  .hero-scroll svg,
  .status-dot::after,
  .brand-ticker-track,
  .story-ring,
  .story-bean,
  .menu-orbit,
  .menu-photo::after,
  .steam-mark span,
  .experience-wide img,
  .practical-strip .practical-icon,
  .review-halo,
  .rating-summary b,
  .review-stars,
  .today-panel::before {
    animation: none !important;
  }

  .hero-media img,
  .hero-light,
  .hero-orbit,
  .hero-orbit-core,
  .story-ring,
  .story-bean,
  .menu-orbit,
  .experience-wide img,
  .review-halo,
  .review-feature {
    transform: none !important;
  }

  .hero-light {
    opacity: .28;
  }

  .steam-mark span {
    opacity: .32;
    transform: none;
  }

  .mobile-actions {
    transform: none;
    transition: opacity .15s ease;
  }

  .button,
  .menu-trigger,
  .icon-button,
  .gallery-item,
  .gallery-item img,
  .menu-photo img,
  .menu-photo figcaption,
  .review-feature,
  .lightbox-controls button,
  .social-links a,
  .contact-links a,
  .text-link span {
    transition-property: color, background-color, border-color, opacity, filter;
    transition-duration: .15s;
  }

  .button:active,
  .menu-trigger:active,
  .icon-button:active,
  .gallery-item:active,
  .lightbox-controls button:active,
  .social-links a:active {
    transform: none;
  }

  .button:hover,
  .text-link:hover span,
  .menu-photo:hover img,
  .menu-photo:hover figcaption,
  .experience-list article:hover .experience-icon,
  .gallery-item:hover,
  .gallery-item:hover img,
  .contact-links a:hover,
  .social-links a:hover,
  .desktop-nav .nav-visit:hover {
    transform: none;
  }
}