/* Laura Barnard Photography — homepage acts only. */

/* ------------------------------------------------------------ act 1: hero */

.hero__frame {
  position: absolute; inset: 0; overflow: hidden;
}
.hero__photo {
  position: absolute; inset: -6% -6%;
  width: 112%; height: 112%;
  /* scrollcraft.css sets a global img { max-width: 100% }, which clamps this
     plane back to the frame's width while left stays at -6%, leaving a strip
     of bare canvas down the right edge. Oversized planes opt out. */
  max-width: none; max-height: none;
  object-fit: cover;
  object-position: 30% 42%;
  will-change: transform;
}
.hero__grain {
  position: absolute; inset: 0;
  /* Fallback first. If color-mix is unsupported the whole gradient would be
     invalid, leaving the hero name as white type on a bright beach. */
  background: radial-gradient(120% 90% at 50% 32%, transparent 40%, rgba(42, 36, 29, 0.55) 100%);
  background: radial-gradient(120% 90% at 50% 32%, transparent 40%, color-mix(in oklab, var(--sc-ink) 55%, transparent) 100%);
  mix-blend-mode: multiply;
  will-change: transform;
}
.hero__mark {
  position: absolute; inset: 0; z-index: var(--sc-z-copy);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  text-align: center;
  color: #FBF8F2;
  padding-inline: var(--sc-gutter);
}
.hero__mark h1 {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.5rem + 4.4vw, 5.4rem);
  line-height: var(--sc-leading-tight);
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 24px color-mix(in oklab, black 45%, transparent);
}
.hero__tag {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: #EFE7D8;
  margin-top: var(--sc-4);
}

/* --------------------------------------------------------- act 2: range */

.rail { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); height: 100%; padding-inline: var(--sc-gutter); }
.rail__lead {
  flex: 0 0 auto;
  width: clamp(16rem, 26vw, 25rem);
  padding-right: var(--sc-6);
}
.rail__lead h2 { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); margin: 0 0 var(--sc-3); }
.rail__lead p { font-family: var(--sc-font-text); color: var(--sc-ink-soft); margin: 0; max-width: 26ch; }

.rail__card {
  flex: 0 0 auto;
  width: clamp(15rem, 24vw, 23rem);
  display: flex; flex-direction: column; gap: var(--sc-3);
}
.rail__close {
  flex: 0 0 auto;
  width: clamp(11rem, 16vw, 15rem);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sc-3);
  padding-bottom: var(--sc-3);
}
.rail__close a {
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg);
  color: var(--sc-accent); text-decoration: none; border-bottom: 1px solid var(--sc-accent); padding-bottom: 2px; width: fit-content;
}
.rail__card figure { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sc-e2); }
.rail__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail__card span {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}

/* ------------------------------------------------------ act 3: spotlight */

/* svh, not vh: on iOS the URL bar collapses as you scroll, and a 100vh
   block jumps height mid-scroll. vh stays first as the older-Safari value. */
.spotlight { position: relative; height: 100vh; height: 100svh; overflow: hidden; padding: 0; background: var(--sc-ink); }
.spotlight__figure { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.spotlight__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Three faces side by side in this photograph do not survive a full-bleed
   cover crop at a phone's tall aspect ratio (one face fills the frame, the
   other two are cropped away). Show the whole frame intact instead. */
@media (max-width: 700px) {
  .spotlight { height: 82vh; height: 82svh; }
  .spotlight__figure img { object-fit: contain; background: var(--sc-ink); }
}
.spotlight__cap {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2.5rem, 8vh, 5rem);
  z-index: 2; color: #FBF8F2; max-width: 34ch;
}
.spotlight__cap p {
  font-family: var(--sc-font-display); font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1.4vw, 1.9rem); margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  text-shadow: 0 2px 20px color-mix(in oklab, black 50%, transparent);
}

/* ----------------------------------------------------------- act 4: peak */

.peak { overflow: hidden; }
.peak__img {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; will-change: transform;
  max-width: none; max-height: none;
  object-position: 58% 38%;
  transform: scale(calc(1 + var(--sc-p, 0) * 0.05));
}
.peak__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(42, 36, 29, 0.6) 0%, transparent 30%);
  background: linear-gradient(0deg, color-mix(in oklab, var(--sc-ink) 60%, transparent) 0%, transparent 30%);
}

/* ------------------------------------------------------- act 5: doorways */

.doors {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr;
  gap: var(--sc-5);
  align-items: stretch;
}
.door {
  position: relative;
  display: block;
  border-radius: var(--sc-r-lg);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 3 / 4;
  box-shadow: var(--sc-e2);
}
.door--sports { aspect-ratio: 1 / 1; align-self: end; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--sc-d-slow) var(--sc-ease-out); }
/* On touch, an ungated :hover latches after the tap and the card stays
   zoomed for as long as the page is open. */
@media (hover: hover) and (pointer: fine) {
  .door:hover img { transform: scale(1.045); }
}
.door:focus-visible img { transform: scale(1.045); }
.door__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, transparent 46%);
  background: linear-gradient(0deg, color-mix(in oklab, black 62%, transparent) 0%, transparent 46%);
}
.door__label {
  position: absolute; left: var(--sc-5); right: var(--sc-5); bottom: var(--sc-5);
  color: #FBF8F2; font-family: var(--sc-font-display); font-size: clamp(1.1rem, 0.9rem + 1vw, 1.7rem);
}
.door__count { display: block; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: #DCD3C2; margin-top: 0.3rem; }

@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; }
  .door, .door--sports { aspect-ratio: 4 / 3; align-self: auto; }
}

/* ------------------------------------------------------------ act 6: close */

/* The stage is a plain block, so the plate would start at the very top of
   the viewport and put its first line behind the fixed nav. Centre it, and
   reserve the bar's height (plus the notch inset on iOS). */
.close {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-top: calc(var(--lbp-nav-h) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--sc-5) + env(safe-area-inset-bottom, 0px));
}
.close__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sc-4);
  padding-inline: var(--sc-gutter);
}
.close__mark { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.close h2 { font-family: var(--sc-font-display); font-size: clamp(1.8rem, 1.5rem + 1.8vw, 3rem); margin: 0; max-width: 20ch; }
.close__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-3) var(--sc-6); margin-top: var(--sc-3); }
.close__links a {
  position: relative;
  font-family: var(--sc-font-text); font-size: var(--sc-t-lg); color: var(--sc-ink); text-decoration: none;
  border-bottom: 1px solid var(--sc-accent); padding-bottom: 2px;
}
/* These two are the whole point of the page on a phone. Give them a full
   thumb target without pushing the underline off the text. */
.close__links a::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; translate: 0 -50%;
}
@media (hover: hover) and (pointer: fine) {
  .close__links a:hover { color: var(--sc-accent); }
}
.close__loc { font-family: var(--sc-font-text); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

.close__flank {
  position: absolute; bottom: var(--sc-7);
  width: clamp(5rem, 9vw, 8rem); aspect-ratio: 4/5;
  border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e2);
  opacity: 0.9;
}
.close__flank img { width: 100%; height: 100%; object-fit: cover; }
.close__flank--left { left: clamp(1rem, 6vw, 6rem); transform: rotate(-4deg); }
.close__flank--right { right: clamp(1rem, 6vw, 6rem); transform: rotate(3deg); }
@media (max-width: 760px) { .close__flank { display: none; } }

/* -------------------------------------------------- guided-walk spotlight */

[data-guide-waypoint] { transition: filter var(--sc-d-slow) var(--sc-ease-out), transform var(--sc-d-slow) var(--sc-ease-out); }
.is-guide-lit { filter: brightness(1.08) saturate(1.08); }