:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background-color: #FBF7F1;
  color: #2A1A12;
}

::selection {
  background: #C75E3D;
  color: #FBF7F1;
}

:focus-visible {
  outline: 2px solid #C75E3D;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Scroll reveal (fail-safe) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- Typography helpers ---------- */
.display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 80;
}

.eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------- Marquee ---------- */
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Steam animation ---------- */
@keyframes steam {
  0%   { transform: translateY(0) scaleX(1); opacity: 0; }
  25%  { opacity: 0.55; }
  100% { transform: translateY(-46px) scaleX(1.4); opacity: 0; }
}
.steam line {
  animation: steam 4.5s ease-in-out infinite;
  transform-origin: center bottom;
}
.steam line:nth-child(2) { animation-delay: 1.1s; }
.steam line:nth-child(3) { animation-delay: 2.2s; }

/* ---------- Menu ---------- */
.menu-row {
  border-bottom: 1px dashed rgba(42, 26, 18, 0.18);
  transition: background-color 0.25s ease, padding 0.25s ease;
}
.menu-row:hover {
  background-color: rgba(233, 216, 193, 0.45);
}

.tab-btn {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.tab-btn[aria-selected="true"] {
  background-color: #2A1A12;
  color: #FBF7F1;
  border-color: #2A1A12;
}

/* ---------- Custom underline link ---------- */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Newsletter/hero subtle radial ---------- */
.halo {
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(199, 94, 61, 0.16), transparent 70%),
    radial-gradient(50% 50% at 20% 80%, rgba(117, 128, 79, 0.18), transparent 70%);
}

/* ---------- Accordion ---------- */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-panel > div { overflow: hidden; }
.faq-item[data-open="true"] .faq-panel { grid-template-rows: 1fr; }
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s ease; }

/* ---------- Utility ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }