/* Venue page. Mobile first, tokens only. Light and airy; one pine section (the closing call to action). */

/* ---------- Hero ---------- */
.venue-hero .page-hero__img img { object-position: 62% 50%; }
.venue-hero { min-height: 86svh; }
.venue-hero h1 { max-width: 18ch; font-size: clamp(2rem, 7.4vw, var(--t-h1)); }
.venue-hero__cta { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.venue-hero__cta .btn { width: 100%; }
@media (min-width: 760px) { .venue-hero__cta { display: flex; flex-wrap: wrap; } .venue-hero__cta .btn { width: auto; } }
@media (min-width: 1024px) { .venue-hero .page-hero__img img { object-position: 50% 45%; } .venue-hero h1 { max-width: 20ch; } }

/* Headline lines rise on load; the photo settles in behind them. Opacity and transform only. */
.js .venue-hero h1, .js .venue-hero .lead, .js .venue-hero__cta { opacity: 0; transform: translateY(var(--s-4)); transition: opacity var(--d-edit) var(--ease-fluid), transform var(--d-edit) var(--ease-fluid); }
.js .venue-hero .lead { transition-delay: 120ms; }
.js .venue-hero__cta { transition-delay: 240ms; }
.js .venue-hero.is-loaded h1, .js .venue-hero.is-loaded .lead, .js .venue-hero.is-loaded .venue-hero__cta { opacity: 1; transform: none; }
.js .venue-hero .page-hero__img img { transform: scale(1.06); transition: transform var(--d-edit-long) var(--ease-fluid); }
.js .venue-hero.is-loaded .page-hero__img img { transform: none; }

/* ---------- Highlights ---------- */
.highlights__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); margin: 0; padding: 0; list-style: none; }
.highlights__list li { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--c-rule); font-size: var(--t-small); color: var(--c-ink-soft); }
.highlights__list b { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 400; line-height: var(--lh-heading); color: var(--c-pine); font-variant-numeric: lining-nums; }
@media (min-width: 1024px) { .highlights__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }

/* ---------- The hangar: day to night, then photos ---------- */
.daynight { display: grid; gap: var(--s-3); justify-items: start; }
.daynight__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--c-lichen); }
.daynight__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.daynight__day { object-position: 50% 60%; }
.daynight__night { object-position: 50% 60%; opacity: 0; transition: opacity var(--d-edit-long) var(--ease-in-out); }
.daynight__frame.is-night .daynight__night { opacity: 1; }
.daynight__label { position: absolute; left: var(--s-4); bottom: var(--s-4); margin: 0; display: grid; padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.88); color: var(--c-pine); font-size: var(--t-label); font-weight: 600; }
.daynight__l { grid-area: 1 / 1; transition: opacity var(--d-edit-long) var(--ease-in-out); }
.daynight__l--night { opacity: 0; }
.daynight__frame.is-night .daynight__l--day { opacity: 0; }
.daynight__frame.is-night .daynight__l--night { opacity: 1; }
.daynight__btn { min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--c-slate); border-radius: var(--r-sm); background: transparent; color: var(--c-slate); font-weight: 600; font-size: var(--t-small); cursor: pointer; transition: background-color var(--d-ui) var(--ease-out), transform var(--d-press) var(--ease-out); }
.daynight__btn:active { transform: scale(0.97); }
@media (hover: hover) { .daynight__btn:hover { background: var(--c-mist); } }
@media (min-width: 760px) { .daynight__frame { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .daynight__frame { aspect-ratio: 21 / 10; } }

.hangar__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-7); }
.hangar__fig { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--c-lichen); }
.hangar__fig img { width: 100%; height: 100%; object-fit: cover; }
.hangar__fig { aspect-ratio: 3 / 4; }
.hangar__fig--last { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.hangar__fig--last img { object-position: 50% 30%; }
@media (min-width: 1024px) {
  .hangar__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-9); }
  .hangar__fig--last { grid-column: auto; aspect-ratio: 3 / 4; }
  .hangar__fig--last img { object-position: 50% 50%; }
}
}

/* Staggered curtain reveals and hover zoom, shared by hangar photos, chapters and the seasons pair.
   Base .curtain (base.css) clips the photo inside; --i staggers siblings. */
.js .hangar__fig.curtain.is-in img, .js .seasons__fig.curtain.is-in img { transition-delay: calc(var(--i, 0) * 140ms); }
@media (hover: hover) {
  .js .curtain.is-in:hover img { transform: scale(1.04); transition-delay: 0s; transition-duration: var(--d-edit-long); }
  .js .curtain:not(.is-in) img { transition-delay: 0s; }
}

/* ---------- Ceremony sites: photo chapters ---------- */
.places { padding-bottom: var(--s-10); }
.places__list { display: grid; gap: var(--s-9); }
.chapter { display: grid; gap: var(--s-5); }
.chapter__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-lichen); }
.chapter__photo img { width: 100%; height: 100%; object-fit: cover; }
.chapter__copy { display: grid; gap: var(--s-3); padding-inline: var(--gutter); }
.chapter__copy p { color: var(--c-ink-soft); }
.chapter__copy h3 { font-weight: 400; font-size: var(--t-h2); }

@media (min-width: 760px) { .chapter__copy { max-width: calc(var(--w-text) + 2 * var(--gutter)); } }
@media (min-width: 1024px) {
  .places__list { gap: var(--s-11); max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
  .chapter { grid-template-columns: 7fr 5fr; gap: var(--s-9); align-items: center; }
  .chapter:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .chapter:nth-child(even) .chapter__photo { order: 2; }
  .chapter__photo { aspect-ratio: 3 / 2; border-radius: var(--r-md); }
  .chapter__copy { padding-inline: 0; max-width: 28rem; }
  .chapter__copy p { font-size: var(--t-lead); line-height: 1.5; }
}

/* Seasons pair */
.seasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-10); align-items: end; }
.seasons__copy { grid-column: 1 / -1; display: grid; gap: var(--s-3); max-width: var(--w-text); margin-bottom: var(--s-3); }
.seasons__copy h3 { font-weight: 400; font-size: var(--t-h2); }
.seasons__copy p { color: var(--c-ink-soft); }
.seasons__fig { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--c-lichen); aspect-ratio: 3 / 4; }
.seasons__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .seasons { grid-template-columns: 5fr 4fr 3fr; gap: var(--s-5); margin-top: var(--s-12); align-items: center; }
  .seasons__copy { grid-column: auto; margin: 0; }
  .seasons__fig { aspect-ratio: 4 / 5; }
}

/* ---------- Things to do ---------- */
.todo__list { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.todo__list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; padding-top: var(--s-5); border-top: 1px solid var(--c-rule); }
.todo__list svg { width: 40px; height: 40px; padding: var(--s-2); border-radius: var(--r-sm); background: var(--c-mist); fill: none; stroke: var(--c-slate); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.todo__list h3 { font-size: var(--t-body); font-family: var(--f-body); font-weight: 600; margin-bottom: var(--s-1); }
.todo__list p { font-size: var(--t-small); color: var(--c-ink-soft); }
@media (min-width: 760px) { .todo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); } }
@media (min-width: 1024px) { .todo__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Getting here ---------- */
.getting__grid { display: grid; gap: var(--s-5); }
.getting__grid .section-head { margin-bottom: 0; }
.getting__card { display: grid; gap: var(--s-6); padding: var(--s-6) var(--s-5); background: var(--c-paper); border-radius: var(--r-md); box-shadow: var(--e-rest); }
.getting__list { display: grid; gap: var(--s-4); margin: 0; }
.getting__list > div { display: grid; gap: var(--s-1); }
.getting__list dt { font-size: var(--t-label); font-weight: 600; color: var(--c-ink-soft); }
.getting__list dd { margin: 0; }
.getting__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 1024px) {
  .getting__grid { grid-template-columns: 6fr 5fr; gap: var(--s-10); align-items: start; }
  .getting__card { padding: var(--s-7); }
}

/* ---------- Closing call to action: the one pine section ---------- */
.closing__inner { display: grid; gap: var(--s-4); justify-items: start; }
.closing__cta { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-3); }
@media (min-width: 760px) { .closing__cta { display: flex; flex-wrap: wrap; width: auto; } }

@media (prefers-reduced-motion: reduce) {
  .js .venue-hero h1, .js .venue-hero .lead, .js .venue-hero__cta, .js .venue-hero .page-hero__img img { opacity: 1; transform: none; transition: none; }
  .daynight__night, .daynight__l { transition: none; }
  .js .curtain.is-in:hover img { transform: none; }
}