/* ============================================================================
   Wrapping Bell — Base / reset / typography  (Luxury edition)
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x: clip on the ROOT clips the off-canvas (position:fixed) mobile nav so it
   can't create horizontal overflow. body-level clipping can't catch fixed descendants. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  overflow-x: clip;            /* safety net against any horizontal overflow (keeps sticky working) */
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  background-color: var(--bg);
  /* layered warm radial glows + ivory base for editorial depth */
  background-image:
    radial-gradient(80% 50% at 100% 0%, rgba(201,168,106,0.10), transparent 60%),
    radial-gradient(70% 50% at 0% 18%, rgba(115,131,122,0.10), transparent 55%),
    radial-gradient(90% 60% at 50% 100%, rgba(233,216,210,0.18), transparent 65%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* very subtle paper grain over everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tex-grain); background-size: 180px; opacity: 0.04; mix-blend-mode: multiply;
}

h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); line-height: var(--leading-tight); font-weight: 600; overflow-wrap: break-word; }
h1 { font-size: var(--t-2xl); letter-spacing: -0.012em; }
h2 { font-size: var(--t-xl); letter-spacing: -0.008em; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p  { max-width: var(--measure); }

a { color: var(--accent-dark); text-decoration: none; transition: color var(--speed) var(--ease); }
a:hover { color: var(--warm-brown); }

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }

/* Uppercase eyebrow with gilt rule (inline so long labels wrap, no overflow) */
.eyebrow {
  display: block; max-width: 100%;
  font-family: var(--font-sans); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: var(--t-xs);
  font-weight: 600; color: var(--champagne-dk); line-height: 1.5;
  overflow-wrap: break-word;
}
.eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--champagne); vertical-align: middle; margin-right: 0.55rem; }
.eyebrow--center { text-align: center; }
.eyebrow--center::after { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--champagne); vertical-align: middle; margin-left: 0.55rem; }

/* Layout helpers */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--beige { background: linear-gradient(180deg, rgba(231,226,216,0.55), rgba(231,226,216,0.25)); }
.section--cream { background: var(--grad-cream); }
.section--forest { background: var(--grad-forest); color: var(--on-dark); }
.section--forest h1, .section--forest h2, .section--forest h3, .section--forest h4 { color: #fff; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s-3); }
.flow > * + * { margin-top: var(--s-2); }
main { flex: 1 0 auto; }
.lead { font-size: var(--t-md); color: var(--ink-muted); line-height: 1.55; }
.section-head { max-width: 720px; margin-inline: auto; margin-bottom: clamp(2rem,4vw,3.5rem); }

/* Gilt text accent */
.gilt { color: var(--champagne-dk); }
.script-accent { font-family: var(--font-script); font-weight: 400; color: var(--champagne-dk); font-size: 1.4em; line-height: 0.8; }

/* Accessibility: skip link */
.skip-link {
  position: absolute; left: var(--s-2); top: -3rem; z-index: 300;
  background: var(--forest); color: #fff;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-sm);
  transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: var(--s-2); color: #fff; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Custom scrollbar */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--sage-green) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--sage-green); border-radius: var(--r-pill); border: 2px solid var(--ivory); }
}

/* ---- Scroll-reveal base states (toggled by app.js .is-visible) ---- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .parallax { transform: none !important; }
}