/* ============================================================
   Selah — reset, typography, shared primitives
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A reveal waiting to play sits up to --motion-shift right of its final
     position, which transiently widens the page. `clip` rather than
     `hidden` because clip does not create a scroll container. */
  overflow-x: clip;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

p { text-wrap: pretty; }

::selection { background: var(--sand); color: var(--ink); }

/* ---- Layout primitives ------------------------------------- */

.shell      { width: var(--shell);      margin-inline: auto; }
.shell-wide { width: var(--shell-wide); margin-inline: auto; }

/* Grid and flex children default to min-width:auto, so they refuse to
   shrink below their longest unbreakable content. One long landmark row
   was widening the whole page. Let them shrink. */
.intro__grid > *,
.location__grid > *,
.amenities__grid > *,
.reviews__grid > * { min-width: 0; }

.section { padding-block: var(--space-3xl); }

.section--tint { background: var(--paper-warm); }

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

/* ---- Eyebrow: small, tracked, quiet ------------------------- */

.eyebrow {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--space-m);
}

.section-heading {
  font-size: var(--step-3);
  margin-bottom: var(--space-m);
}

.section-note {
  color: var(--stone);
  font-size: var(--step--1);
}

/* ---- Hairline rule ------------------------------------------ */

.rule {
  height: 1px;
  background: var(--sand);
  border: 0;
}

/* ============================================================
   CTA — the only element on the page styled to look clickable.
   Brass appears nowhere else, so the eye always finds it.
   ============================================================ */

.cta {
  --cta-bg: var(--brass);
  --cta-fg: var(--white);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);

  padding: 1.05em 2.1em;
  min-height: 48px;              /* comfortable touch target */

  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 0;
  border-radius: var(--radius);

  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  box-shadow: var(--shadow-cta);
  transition: background var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease);
}

.cta:hover  { background: var(--brass-deep); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }

.cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cta__arrow {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--dur-ui) var(--ease);
}

.cta:hover .cta__arrow { transform: translateX(3px); }

/* On the hero photo the button sits on a dark scrim, so it gets
   a touch more presence. */
.cta--on-photo { box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22); }

/* ---- Skip link ---------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100%;
  z-index: 200;
  padding: 0.7em 1.2em;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus { top: var(--space-s); }

/* ============================================================
   Scroll reveal — slow fade-up, applied by js/reveal.js
   ============================================================ */

/* No will-change here on purpose. It used to be set, which was affordable
   when eight containers animated; now that every photo, amenity and review
   reveals individually it would mean ~43 compositor layers held for the
   life of the page. Opacity and transform are already cheap to animate
   without the hint. */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-rise), 0);
  transition: opacity var(--dur-reveal) var(--ease-settle),
              transform var(--dur-reveal) var(--ease-settle);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Direction follows layout position, so the motion reinforces the
   composition instead of fighting it. Both land on the shared
   `transform: none` below, so there is no separate end state. */
.reveal--left  { transform: translate3d(calc(var(--motion-shift) * -1), 0, 0); }
.reveal--right { transform: translate3d(var(--motion-shift), 0, 0); }

/* Fade with no travel of its own — for elements whose motion is supplied
   by a mask inside them. Sliding the outer while the inner rises makes a
   single heading appear to move twice. */
.reveal--fade  { transform: none; }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* No JS? Everything is visible. Progressive enhancement only. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---- Masked reveal ------------------------------------------
   Text rising from behind an invisible edge. The padding/negative-margin
   pair is load-bearing: overflow:hidden would otherwise clip descenders
   (the y in "quiet", the g in "right"). */

.mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.mask__i {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-reveal) var(--ease-settle);
  transition-delay: var(--reveal-delay, 0ms);
}

.is-visible .mask__i,
.no-js .mask__i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .mask__i { transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Visually hidden ---------------------------------------- */

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