/* ============================================================
   SC WOOD — Base / reset / typography / utilities
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Anchor targets clear the sticky header instead of hiding under it */
[id] { scroll-margin-top: var(--sticky-top); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  /* Maitree is a Thai serif: tall vowel/tone marks need room, and negative
     tracking crowds the script. Give headings air, no tight tracking. */
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-700); font-weight: 700; line-height: 1.14; }
h2 { font-size: var(--fs-600); font-weight: 700; }
h3 { font-size: var(--fs-400); }
h4 { font-size: var(--fs-300); }

p { text-wrap: pretty; }

::selection { background: var(--amber); color: var(--espresso-deep); }

/* Numbers in specs / prices align in tables */
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Focus visibility ---- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Layout helpers ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); }
.section--cream { background: var(--cream); }
.section--espresso {
  background: var(--espresso);
  color: var(--on-dark);
}
.section--espresso h1, .section--espresso h2,
.section--espresso h3, .section--espresso h4 { color: var(--on-dark); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.lead {
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
.section--espresso .lead { color: var(--on-dark-soft); }

.measure { max-width: var(--measure); }

/* Section heading group (NOT a per-section eyebrow scaffold) */
.section-head { max-width: 56ch; margin-bottom: var(--sp-6); }
.section-head p { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-300); }
.section--espresso .section-head p { color: var(--on-dark-soft); }

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

.skip-link {
  position: absolute; left: var(--sp-3); top: -120%;
  background: var(--amber); color: var(--espresso-deep);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  font-weight: 600; z-index: var(--z-tooltip);
  transition: top var(--dur-fast) var(--ease-out-quart);
}
.skip-link:focus { top: var(--sp-3); }

/* ---- Scroll reveal (enhances an already-visible default) ---- */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal-stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}
html.js .reveal-stagger.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---- Hero entrance choreography (first-load, JS + motion-allowed only) ---- */
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heroSettle { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  html.js .hero__media img { animation: heroZoom 1.8s var(--ease-out-expo) both; }
  html.js .hero__content > * { opacity: 0; animation: heroRise 0.85s var(--ease-out-expo) both; }
  html.js .hero__content > *:nth-child(1) { animation-delay: 0.06s; }
  html.js .hero__content > *:nth-child(2) { animation-delay: 0.15s; }
  html.js .hero__content > *:nth-child(3) { animation-delay: 0.25s; }
  html.js .hero__content > *:nth-child(4) { animation-delay: 0.35s; }
  html.js .hero__content > *:nth-child(5) { animation-delay: 0.45s; }
  html.js .hero__aside { animation: heroSettle 0.95s var(--ease-out-expo) 0.5s both; }
}