/* base.css — reset, page, layout primitives, a11y, reveal */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-size: var(--fs-body); line-height: 1.75;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
h1, h2, h3, h4 { color: var(--brand); line-height: 1.3; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(52px, 7vw, 88px); }
.section-tint { background: var(--brand-soft); }
.section--flush { padding-top: 0; }
.more-link { margin: 1.6rem 0 0; }

/* section title: short gradient underline */
.sec-title { font-size: var(--fs-h2); font-weight: 600; color: var(--accent); margin: 0 0 .5em; }
.sec-title::after { content: ""; display: block; width: 70px; height: 4px; border-radius: 4px; background: var(--brand); margin-top: .55rem; }
.sec-sub { max-width: 42em; color: var(--muted); font-size: 1.08rem; margin: 0 0 2rem; }
.lead { font-size: 1.2rem; font-weight: 500; color: var(--ink); }

/* a11y */
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--brand); color: #fff; padding: 10px 16px; z-index: 200; border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* motion: soft fade + 14px rise once when a block scrolls into view; siblings stagger (--d set in main.js).
   Selector list must match REVEAL_SEL in main.js. Off for reduced motion. */
.js .reveal,
.js :is(.sec-title, .sec-sub, .intro-body, .fact, .svc, .g-item, .vcard, .chamber, .day, .qa, .week, .form, .cond-photo, .alert) {
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease var(--d, 0s), transform .35s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.js .reveal.is-in,
.js :is(.sec-title, .sec-sub, .intro-body, .fact, .svc, .g-item, .vcard, .chamber, .day, .qa, .week, .form, .cond-photo, .alert).is-in { opacity: 1; transform: none; }

/* hero: one gentle entrance on load */
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-scale { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.js .hero-copy > * { animation: rise-in .6s ease both; }
.js .hero-copy > :nth-child(2) { animation-delay: .06s; }
.js .hero-copy > :nth-child(3) { animation-delay: .12s; }
.js .hero-copy > :nth-child(n+4) { animation-delay: .18s; }
.js .hero-photo { animation: fade-scale .7s ease both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js :is(.sec-title, .sec-sub, .intro-body, .fact, .svc, .g-item, .vcard, .chamber, .day, .qa, .week, .form, .cond-photo, .alert) { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: .001ms !important; }
}