/* ============================================================
   木默 STILLE Brunch & Coffee — styles.css
   北歐木質風：暖白 · 淺木色 · 炭灰 · 鼠尾草綠
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Colours */
  --c-base:     #F8F6F3;
  --c-sand:     #EFEBE4;
  --c-wood:     #C4A27E;
  --c-wood-lt:  #DEC9AC;
  --c-wood-dk:  #8B6B4A;
  --c-sage:     #617B6E;
  --c-sage-lt:  #A5BDB5;
  --c-charcoal: #2B2723;
  --c-dark:     #1A1512;
  --c-mid:      #6B5F55;
  --c-muted:    #9B8F85;
  --c-border:   #E0D9D0;
  --c-line:     #06C755;
  --c-white:    #FFFFFF;

  /* Typography */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-tc:      'Noto Sans TC', sans-serif;

  /* Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm:  0 1px 4px rgba(43,39,35,.06);
  --sh-md:  0 4px 16px rgba(43,39,35,.10);
  --sh-lg:  0 12px 40px rgba(43,39,35,.14);

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  240ms;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--f-body), var(--f-tc);
  background: var(--c-base);
  color: var(--c-charcoal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; }
details { cursor: pointer; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ── Layout Utilities ───────────────────────────────────── */
.container {
  width: min(1200px, 100% - 3rem);
  margin-inline: auto;
}

/* Vertical section rhythm */
section { padding-block: var(--sp-20); }

/* ── Typography Utilities ───────────────────────────────── */
.label-sm {
  font-family: var(--f-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-wood-dk);
  display: block;
  margin-bottom: var(--sp-3);
}
.label-sm--light { color: var(--c-wood-lt); }

.section-h2 {
  font-family: var(--f-body), var(--f-tc);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-charcoal);
  margin-bottom: var(--sp-6);
}

/* ── Reveal Animations ──────────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .7em 1.5em;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .04em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--c-wood); outline-offset: 3px; }
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--c-charcoal);
  color: var(--c-white);
}
.btn--primary:hover { background: var(--c-dark); }

.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border: 1.5px solid rgba(255,255,255,.6);
}
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--c-white); }

.btn--outline {
  background: transparent;
  color: var(--c-charcoal);
  border: 1.5px solid var(--c-charcoal);
}
.btn--outline:hover { background: var(--c-charcoal); color: var(--c-white); }

.btn--line {
  background: var(--c-line);
  color: var(--c-white);
}
.btn--line:hover { filter: brightness(1.08); }

.btn--sm  { font-size: var(--text-xs); padding: .5em 1.1em; }
.btn--lg  { font-size: var(--text-base); padding: .85em 2em; }
.btn--full { width: 100%; }

/* ── Top Announcement Bar ───────────────────────────────── */
.top-bar {
  background: var(--c-charcoal);
  color: rgba(255,255,255,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--text-xs);
  letter-spacing: .03em;
  position: relative;
  z-index: 100;
}
.top-bar p { text-align: center; }
.top-bar a { color: var(--c-wood-lt); text-decoration: underline; text-underline-offset: 2px; }
.top-bar__close {
  position: absolute; right: var(--sp-4);
  color: rgba(255,255,255,.6);
  font-size: 1.1rem;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  transition: color var(--dur);
}
.top-bar__close:hover { color: var(--c-white); }
.top-bar.is-hidden { display: none; }

/* ── Navigation ─────────────────────────────────────────── */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(248,246,243,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.nav-wrap.is-scrolled {
  border-color: var(--c-border);
  box-shadow: 0 2px 12px rgba(43,39,35,.06);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 64px;
}

.nav__logo {
  display: flex;
  align-items: baseline;
  gap: .4em;
  flex-shrink: 0;
}
.nav__logo-zh {
  font-family: var(--f-tc);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--c-charcoal);
  letter-spacing: .06em;
}
.nav__logo-en {
  font-family: var(--f-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-mid);
}

.nav__links {
  display: flex;
  gap: var(--sp-1);
  margin-inline: auto;
}
.nav__link {
  font-size: var(--text-sm);
  color: var(--c-mid);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  transition: color var(--dur), background var(--dur);
}
.nav__link:hover { color: var(--c-charcoal); background: var(--c-sand); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  margin-left: auto;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-charcoal);
  transition: transform var(--dur), opacity var(--dur);
}

/* ── Mobile Drawer ──────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(300px, 80vw);
  background: var(--c-base);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  box-shadow: -8px 0 32px rgba(43,39,35,.12);
}
.mobile-drawer.is-open {
  transform: translateX(0);
}
.mobile-drawer__inner {
  padding: var(--sp-8) var(--sp-6);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.mobile-drawer__close {
  align-self: flex-end;
  font-size: 1.4rem;
  color: var(--c-mid);
  padding: var(--sp-2);
  line-height: 1;
}
.mobile-drawer nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.mobile-drawer nav a {
  display: block;
  padding: var(--sp-3) 0;
  font-size: var(--text-lg);
  color: var(--c-charcoal);
  border-bottom: 1px solid var(--c-border);
  font-weight: 300;
}
.mobile-drawer__btns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: auto;
}

/* Drawer overlay */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43,39,35,.35);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(26,21,18,.05) 0%,
    rgba(26,21,18,.3) 50%,
    rgba(26,21,18,.72) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-bottom: var(--sp-16);
}

/* Glass-morphism text card */
.hero__glass-card {
  background: rgba(248,246,243,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-8);
  max-width: 560px;
  color: var(--c-white);
}

.hero__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-wood-lt);
  margin-bottom: var(--sp-4);
}

.hero__title {
  font-family: var(--f-display), var(--f-tc);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
}
.hero__title em {
  font-style: italic;
  font-family: var(--f-display);
  color: var(--c-wood-lt);
}

.hero__sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.7);
  letter-spacing: .08em;
  margin-bottom: var(--sp-6);
}

.hero__ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.7);
}

/* Today's seat floating card */
.today-card {
  background: rgba(248,246,243,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-6);
  color: var(--c-white);
  min-width: 200px;
  flex-shrink: 0;
}
.today-card__label {
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-wood-lt);
  margin-bottom: var(--sp-3);
}
.today-card__seats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.today-seat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}
.today-seat small {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.55);
  margin-left: .3em;
}
.today-seat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.today-seat__dot--open    { background: #7BC67E; }
.today-seat__dot--limited { background: var(--c-wood-lt); }
.today-card__link {
  font-size: var(--text-xs);
  color: var(--c-wood-lt);
  letter-spacing: .05em;
}
.today-card__link:hover { text-decoration: underline; }

/* Scroll hint */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255,255,255,.45);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: lowercase;
}
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.4);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0%,100% { transform: scaleY(1); opacity: .5; }
  50%      { transform: scaleY(.4); opacity: 1; }
}

/* ── Intro Strip ────────────────────────────────────────── */
.intro-strip {
  background: var(--c-sand);
  padding-block: var(--sp-12);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.intro-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
  justify-content: space-between;
}

.intro-strip__text {
  font-size: var(--text-lg);
  color: var(--c-mid);
  font-weight: 300;
  line-height: 1.7;
}
.intro-strip__em {
  color: var(--c-charcoal);
  font-weight: 500;
}

.intro-strip__stats {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.stat-pill {
  text-align: center;
  min-width: 90px;
}
.stat-pill .counter,
.stat-pill span:first-child {
  font-family: var(--f-body);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--c-charcoal);
  letter-spacing: -.02em;
  display: inline;
}
.stat-pill > span:nth-child(2) {
  font-size: var(--text-xl);
  color: var(--c-wood-dk);
  font-weight: 300;
}
.stat-pill small {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: var(--sp-1);
}

/* ── Features Section ───────────────────────────────────── */
.features {
  background: var(--c-base);
}

.features__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

/* Left: scrollable feature list */
.features__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.features__head {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-4);
}
.features__head .section-h2 { margin-bottom: 0; }

.feature-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--c-border);
  cursor: default;
  transition: background var(--dur);
}
.feature-row:last-child { border-bottom: none; }
.feature-row:hover,
.feature-row.is-active-feat { background: transparent; }

.feat-num {
  font-family: var(--f-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--c-wood);
  flex-shrink: 0;
  padding-top: .2em;
  width: 28px;
}

.feat-body h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: var(--sp-1);
  font-family: var(--f-body), var(--f-tc);
}
.feat-body p {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.65;
}

/* Right: sticky image panel */
.features__sticky-panel {
  position: sticky;
  top: calc(64px + var(--sp-8));
  align-self: start;
  height: calc(100svh - 64px - var(--sp-16));
  max-height: 620px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-sand);
}

.features__sticky-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.features__sticky-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s var(--ease);
}
.features__sticky-img-wrap img.is-fading {
  opacity: 0;
}

/* ── Menu Section ───────────────────────────────────────── */
.menu {
  background: var(--c-sand);
}

.menu__head {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.menu__head .section-h2 { margin-bottom: 0; }

/* Filter tabs */
.menu-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--sp-10);
}
.mtab {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .06em;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-border);
  color: var(--c-mid);
  background: var(--c-base);
  transition: all var(--dur) var(--ease);
}
.mtab:hover { border-color: var(--c-wood); color: var(--c-charcoal); }
.mtab.active {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
  color: var(--c-white);
}

/* Typographic menu list */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--c-border);
}

.menu-item {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--dur);
}
.menu-item:hover { background: rgba(196,162,126,.06); }
.menu-item.is-hidden { display: none; }

.menu-item__thumb {
  flex-shrink: 0;
  width: 160px;
  height: 120px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-sand);
}
.menu-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.menu-item:hover .menu-item__thumb img { transform: scale(1.04); }

.menu-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  justify-content: center;
}

.menu-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.menu-item__top h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--f-body), var(--f-tc);
  color: var(--c-charcoal);
}
.menu-item__price {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-wood-dk);
  white-space: nowrap;
}

.menu-item__en {
  font-size: var(--text-xs);
  color: var(--c-muted);
  letter-spacing: .05em;
}
.menu-item__desc {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.55;
}
.menu-item__tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* Menu tags */
.mtag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.mtag--hot      { background: #FFF0E6; color: #C4651A; }
.mtag--photo    { background: #E8F5E9; color: #387F3C; }
.mtag--light    { background: #EFF6F4; color: var(--c-sage); }
.mtag--coffee   { background: #F5EDE5; color: var(--c-wood-dk); }
.mtag--seasonal { background: #F0ECF8; color: #6B4FA0; }

/* ── Space / Collage Section ────────────────────────────── */
.space {
  background: var(--c-base);
}

.space__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.space__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.space__text .section-h2 { margin-bottom: 0; }
.space__text p {
  color: var(--c-mid);
  font-size: var(--text-base);
  line-height: 1.7;
}

.space__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-sand);
  border-radius: var(--r-md);
  margin-top: var(--sp-2);
}
.space__list li {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.6;
}

/* Staggered photo collage */
.space__collage {
  position: relative;
  height: 520px;
}

.collage-item {
  position: absolute;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
  transform: rotate(var(--r,0deg)) translate(var(--tx,0), var(--ty,0));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.collage-item:hover {
  transform: rotate(0deg) translate(0,0) scale(1.03);
  box-shadow: var(--sh-lg);
  z-index: 10;
}
.collage-item img { display: block; object-fit: cover; }

/* Position each collage item */
.collage-item:nth-child(1) { width: 260px; height: 200px; top: 0;   left: 0; z-index: 4; }
.collage-item:nth-child(2) { width: 220px; height: 170px; top: 30px; left: 240px; z-index: 3; }
.collage-item:nth-child(3) { width: 280px; height: 210px; top: 190px; left: 20px; z-index: 5; }
.collage-item:nth-child(4) { width: 200px; height: 155px; top: 240px; left: 280px; z-index: 2; }
.collage-item:nth-child(5) { width: 240px; height: 180px; top: 360px; left: 80px; z-index: 4; }

.collage-item img { width: 100%; height: 100%; }

/* ── Coffee & Dessert ───────────────────────────────────── */
.coffee {
  background: var(--c-sand);
}

.coffee__head {
  text-align: center;
  margin-bottom: var(--sp-10);
}
.coffee__head .section-h2 { margin-bottom: 0; }

.coffee__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.coffee-card {
  background: var(--c-base);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.coffee-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.coffee-card__img {
  height: 200px;
  overflow: hidden;
}
.coffee-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.coffee-card:hover .coffee-card__img img { transform: scale(1.05); }

.coffee-card__body {
  padding: var(--sp-5);
}
.coffee-card__body h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: var(--sp-2);
  font-family: var(--f-body), var(--f-tc);
}
.coffee-card__body p {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.coffee-price {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-wood-dk);
  margin-bottom: 0 !important;
}

/* ── Process — Horizontal Timeline ─────────────────────── */
.process {
  background: var(--c-base);
  overflow: hidden;
}

.process__head {
  text-align: center;
  margin-bottom: var(--sp-12);
}
.process__head .section-h2 { margin-bottom: 0; }

.process-timeline {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}
.process-timeline::-webkit-scrollbar { height: 4px; }
.process-timeline::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

.process-step {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Connecting line between dots */
.process-step::after {
  content: '';
  position: absolute;
  top: calc(160px + var(--sp-4) + 8px);  /* img height + gap + half dot */
  left: 50%;
  width: 100%;
  height: 1.5px;
  background: var(--c-border);
  z-index: 0;
}
.process-step:last-child::after { display: none; }

.process-step__img {
  width: 100%;
  height: 160px;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.process-step__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process-step__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-wood);
  border: 3px solid var(--c-base);
  outline: 1.5px solid var(--c-wood);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-bottom: var(--sp-4);
}

.process-step__body {
  text-align: center;
  padding: 0 var(--sp-3);
}
.process-step__num {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-wood);
  display: block;
  margin-bottom: var(--sp-1);
}
.process-step__body h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-charcoal);
  margin-bottom: var(--sp-1);
  font-family: var(--f-body), var(--f-tc);
}
.process-step__body p {
  font-size: var(--text-xs);
  color: var(--c-mid);
  line-height: 1.6;
}

/* ── Reviews — Large Single Quote ──────────────────────── */
.reviews {
  background: var(--c-charcoal);
  padding-block: var(--sp-20);
  color: var(--c-white);
}

.reviews__head {
  text-align: center;
  margin-bottom: var(--sp-12);
}
.reviews__head .label-sm { color: var(--c-wood-lt); }
.reviews__head .section-h2 { color: var(--c-white); margin-bottom: 0; }

/* Stage */
.review-stage {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.review-stage__quotes {
  position: relative;
  min-height: 260px;
}

.review-quote {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: fadeQuote .5s var(--ease);
}
.review-quote.is-active { display: flex; }

@keyframes fadeQuote {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rq-mark {
  font-family: var(--f-display);
  font-size: 9rem;
  font-style: italic;
  line-height: .5;
  color: var(--c-wood);
  opacity: .6;
  margin-bottom: var(--sp-6);
  user-select: none;
}

.review-quote blockquote {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,.88);
  margin-bottom: var(--sp-6);
  font-family: var(--f-body), var(--f-tc);
}

.review-quote footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
}
.review-quote footer cite {
  font-style: normal;
  color: rgba(255,255,255,.75);
  font-weight: 500;
}
.rq-stars { color: var(--c-wood-lt); letter-spacing: .05em; }
.rq-source {
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.2);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

/* Controls */
.review-stage__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.rq-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.rq-btn:hover {
  border-color: var(--c-wood-lt);
  color: var(--c-white);
  background: rgba(196,162,126,.15);
}

.rq-dots {
  display: flex;
  gap: var(--sp-2);
}
.rq-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  border: none;
  transition: background var(--dur), transform var(--dur);
}
.rq-dot.is-active {
  background: var(--c-wood-lt);
  transform: scale(1.3);
}

/* ── Promotions ─────────────────────────────────────────── */
.promo {
  background: var(--c-sand);
  padding-block: var(--sp-16);
}

.promo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-6);
}

.promo-cell {
  background: var(--c-base);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.promo-cell h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--c-charcoal);
  font-family: var(--f-body), var(--f-tc);
  line-height: 1.3;
}
.promo-cell p {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.65;
  flex: 1;
}

.promo-cell--dark {
  background: var(--c-charcoal);
  border-color: var(--c-charcoal);
}
.promo-cell--dark .label-sm { color: var(--c-wood-lt); }
.promo-cell--dark h3 { color: var(--c-white); }
.promo-cell--dark p  { color: rgba(255,255,255,.65); }

.promo-cell__btns {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.promo-cell--dark .btn--primary {
  background: var(--c-wood);
  color: var(--c-white);
}
.promo-cell--dark .btn--primary:hover { background: var(--c-wood-dk); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq {
  background: var(--c-base);
}

.faq__head {
  text-align: center;
  margin-bottom: var(--sp-10);
}
.faq__head .section-h2 { margin-bottom: 0; }

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--c-border);
}

.faq-item {
  border-bottom: 1px solid var(--c-border);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-charcoal);
  font-family: var(--f-body), var(--f-tc);
  user-select: none;
  transition: color var(--dur);
}
.faq-item summary:hover { color: var(--c-wood-dk); }
.faq-item[open] summary { color: var(--c-wood-dk); }

.faq-chevron {
  font-size: 1.2rem;
  color: var(--c-mid);
  font-weight: 300;
  transition: transform var(--dur);
  flex-shrink: 0;
}
.faq-item[open] .faq-chevron {
  transform: rotate(45deg);
  color: var(--c-wood-dk);
}

.faq-item__ans {
  padding-bottom: var(--sp-5);
  padding-right: var(--sp-8);
}
.faq-item__ans p {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.75;
}
.faq-item__ans strong { color: var(--c-charcoal); font-weight: 600; }

/* ── Location ───────────────────────────────────────────── */
.location {
  background: var(--c-sand);
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}

.location__info .section-h2 { margin-bottom: var(--sp-6); }

.loc-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.loc-item {
  display: flex;
  gap: var(--sp-4);
}
.loc-item dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-charcoal);
  flex-shrink: 0;
  width: 88px;
  font-family: var(--f-body), var(--f-tc);
}
.loc-item dd {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.65;
}
.loc-item dd em { color: var(--c-muted); font-style: normal; }
.loc-item dd a { color: var(--c-wood-dk); text-decoration: underline; text-underline-offset: 2px; }

.location__btns {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Map placeholder */
.map-ph {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-base);
  border: 1px solid var(--c-border);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-ph__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.map-ph__inner span { font-size: 2.5rem; }
.map-ph__inner p { font-weight: 600; font-size: var(--text-base); font-family: var(--f-body), var(--f-tc); }
.map-ph__inner small { color: var(--c-muted); font-size: var(--text-xs); }

.location__social {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.location__social a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--c-mid);
  transition: color var(--dur);
}
.location__social a:hover { color: var(--c-charcoal); }

/* ── Booking — Split Dark/Light ─────────────────────────── */
.booking {
  padding-block: 0;
}

.booking__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}

/* Left: dark image panel */
.booking__panel {
  background: var(--c-charcoal);
  position: relative;
  overflow: hidden;
}
.booking__panel-inner {
  position: relative;
  z-index: 2;
  padding: var(--sp-16) var(--sp-12);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: var(--c-white);
}
.booking__panel h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  line-height: 1.25;
  font-family: var(--f-body), var(--f-tc);
  margin-top: var(--sp-2);
}
.booking__panel h2 em {
  font-style: italic;
  font-family: var(--f-display);
  color: var(--c-wood-lt);
}
.booking__panel blockquote {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  border-left: 2px solid var(--c-wood);
  padding-left: var(--sp-4);
  margin-top: var(--sp-2);
  font-style: italic;
  font-family: var(--f-body), var(--f-tc);
}
.booking__panel-note {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  margin-top: var(--sp-2);
}
.booking__panel-note strong { color: var(--c-wood-lt); }

/* Panel background image */
.booking__panel-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.booking__panel-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26,21,18,.88) 0%,
    rgba(43,39,35,.72) 100%
  );
  z-index: 1;
}
.booking__panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
}

/* Right: form panel */
.booking__form-panel {
  background: var(--c-base);
  padding: var(--sp-16) var(--sp-12);
  display: flex;
  align-items: center;
}

.booking-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.fgroup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.fgroup label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-charcoal);
  font-family: var(--f-body), var(--f-tc);
}
.fgroup label span { color: var(--c-wood-dk); }

.fgroup input,
.fgroup select,
.fgroup textarea {
  width: 100%;
  background: var(--c-sand);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: .7em 1em;
  font-size: var(--text-sm);
  color: var(--c-charcoal);
  transition: border-color var(--dur), box-shadow var(--dur);
  outline: none;
}
.fgroup input:focus,
.fgroup select:focus,
.fgroup textarea:focus {
  border-color: var(--c-wood);
  box-shadow: 0 0 0 3px rgba(196,162,126,.15);
}
.fgroup input.is-error,
.fgroup select.is-error,
.fgroup textarea.is-error {
  border-color: #C0392B;
}
.fgroup textarea { resize: vertical; min-height: 88px; }
.fgroup select { appearance: none; cursor: pointer; }

.ferr {
  font-size: var(--text-xs);
  color: #C0392B;
  min-height: 1em;
}

/* Booking success */
.booking-ok {
  text-align: center;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.booking-ok__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-sage);
  color: var(--c-white);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-ok h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--c-charcoal);
  font-family: var(--f-body), var(--f-tc);
}
.booking-ok p {
  font-size: var(--text-sm);
  color: var(--c-mid);
  line-height: 1.7;
}

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--c-dark);
  color: rgba(255,255,255,.6);
  padding-block: var(--sp-16);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: var(--sp-12);
}

.footer__name {
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--c-white);
  letter-spacing: .08em;
  font-family: var(--f-tc);
  margin-bottom: var(--sp-1);
}
.footer__name span {
  font-family: var(--f-body);
  font-size: var(--text-sm);
  letter-spacing: .18em;
  font-weight: 300;
  color: rgba(255,255,255,.45);
  display: inline-block;
  margin-left: .5em;
}
.footer__tagline {
  font-size: var(--text-sm);
  color: var(--c-wood-lt);
  margin-bottom: var(--sp-4);
  font-family: var(--f-tc);
}
.footer__copy {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.35);
  line-height: 1.65;
}

.footer__nav h3,
.footer__contact h3 {
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: var(--sp-4);
}
.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer__nav a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  transition: color var(--dur);
}
.footer__nav a:hover { color: var(--c-white); }

.footer__contact p {
  font-size: var(--text-sm);
  line-height: 1.8;
  margin-bottom: var(--sp-1);
}
.footer__contact a {
  color: var(--c-wood-lt);
  transition: opacity var(--dur);
}
.footer__contact a:hover { opacity: .8; }

.footer__social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.footer__social a {
  font-size: var(--text-xs);
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.15);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  transition: all var(--dur);
}
.footer__social a:hover {
  color: var(--c-white);
  border-color: rgba(255,255,255,.35);
}

/* ── Back to Top ────────────────────────────────────────── */
.back-top {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-6);
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-charcoal);
  color: var(--c-white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh-md);
  transition: opacity var(--dur), transform var(--dur);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.back-top:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-top:hover { background: var(--c-dark); }

/* ── Mobile Sticky CTA ──────────────────────────────────── */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-base);
  border-top: 1px solid var(--c-border);
  gap: var(--sp-2);
  box-shadow: 0 -4px 16px rgba(43,39,35,.08);
}

/* ── Responsive: Tablet ─────────────────────────────────── */
@media (max-width: 1024px) {
  .features__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .features__sticky-panel {
    display: none;
  }

  .coffee__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .space__layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .space__collage {
    height: 380px;
  }
  .collage-item:nth-child(1) { width: 200px; height: 155px; }
  .collage-item:nth-child(2) { width: 175px; height: 135px; top: 20px; left: 185px; }
  .collage-item:nth-child(3) { width: 215px; height: 165px; top: 150px; left: 15px; }
  .collage-item:nth-child(4) { width: 160px; height: 120px; top: 190px; left: 215px; }
  .collage-item:nth-child(5) { width: 190px; height: 140px; top: 280px; left: 65px; }

  .booking__layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .booking__panel { min-height: 280px; }
  .booking__panel-inner { padding: var(--sp-12) var(--sp-8); }
  .booking__form-panel { padding: var(--sp-10) var(--sp-8); }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
  .footer__brand { grid-column: 1 / -1; }

  .location__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .promo__grid {
    grid-template-columns: 1fr 1fr;
  }
  .promo-cell:last-child { grid-column: 1 / -1; }
}

/* ── Responsive: Mobile ─────────────────────────────────── */
@media (max-width: 768px) {
  section { padding-block: var(--sp-16); }

  /* Nav */
  .nav__links,
  .nav__actions { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero__content {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: var(--sp-20);
    gap: var(--sp-4);
  }
  .hero__glass-card {
    padding: var(--sp-6);
    max-width: 100%;
  }
  .today-card { display: none; }

  .hero__ctas { gap: var(--sp-2); }
  .hero__ctas .btn--lg { padding: .75em 1.5em; }

  /* Intro strip */
  .intro-strip__inner {
    flex-direction: column;
    gap: var(--sp-8);
    text-align: center;
  }
  .intro-strip__stats { justify-content: center; gap: var(--sp-4); }

  /* Features */
  .features__list { gap: 0; }
  .feature-row { gap: var(--sp-4); }

  /* Menu */
  .menu-tabs { gap: var(--sp-1); }
  .mtab { font-size: 10px; padding: var(--sp-1) var(--sp-3); }

  .menu-item { gap: var(--sp-3); }
  .menu-item__thumb { width: 100px; height: 80px; }
  .menu-item__top h3 { font-size: var(--text-base); }

  /* Collage */
  .space__collage { height: 300px; }
  .collage-item:nth-child(1) { width: 150px; height: 115px; }
  .collage-item:nth-child(2) { width: 130px; height: 100px; top: 15px; left: 145px; }
  .collage-item:nth-child(3) { width: 160px; height: 120px; top: 115px; left: 10px; }
  .collage-item:nth-child(4) { width: 125px; height: 95px;  top: 145px; left: 160px; }
  .collage-item:nth-child(5) { width: 145px; height: 110px; top: 210px; left: 50px; }

  /* Coffee grid */
  .coffee__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .coffee-card__img { height: 150px; }

  /* Process timeline horizontal scroll */
  .process-timeline { gap: 0; }
  .process-step { flex: 0 0 180px; }
  .process-step__img { height: 130px; }

  /* Reviews */
  .rq-mark { font-size: 6rem; }
  .review-stage { padding-inline: var(--sp-4); }

  /* Promo */
  .promo__grid { grid-template-columns: 1fr; }
  .promo-cell:last-child { grid-column: auto; }

  /* Booking */
  .form-row-2 { grid-template-columns: 1fr; }
  .booking__form-panel { padding: var(--sp-8) var(--sp-5); }
  .booking__panel-inner { padding: var(--sp-8) var(--sp-5); }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer__brand { grid-column: auto; }

  /* Mobile CTA */
  .mobile-cta {
    display: flex;
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  }
  main { padding-bottom: 72px; }
  .back-top { bottom: calc(var(--sp-8) + 72px); }

  /* Top bar */
  .top-bar { font-size: 11px; padding-inline: var(--sp-8); }
}

@media (max-width: 480px) {
  .container { width: calc(100% - 2rem); }
  .hero__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .coffee__grid { grid-template-columns: 1fr; }
  .menu-item__thumb { width: 80px; height: 66px; }
}

/* ── Wood grain texture helper ──────────────────────────── */
.wood-grain {
  background-image:
    repeating-linear-gradient(
      92deg,
      transparent 0px,
      transparent 6px,
      rgba(196,162,126,.04) 6px,
      rgba(196,162,126,.04) 7px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 30px,
      rgba(196,162,126,.03) 30px,
      rgba(196,162,126,.03) 31px
    );
}

/* Apply subtle wood texture to sand sections */
.intro-strip,
.menu,
.promo,
.location { background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      rgba(196,162,126,.025) 8px,
      rgba(196,162,126,.025) 9px
    );
}