:root {
  --gold: #C9A962;
  --ivory: #F5F0E8;
  --ink: #1A1A1A;
  --stone: #999999;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --pad: clamp(20px, 3.4vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.stage {
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: minmax(420px, 44fr) 56fr;
}

/* ---------- Editorial panel ---------- */
.panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto auto;
  padding: var(--pad);
  gap: clamp(14px, 2.4vh, 28px);
  min-height: 0;
}
.panel::after { /* hairline seam */
  content: ""; position: absolute; top: var(--pad); bottom: var(--pad); right: 0;
  width: 1px; background: linear-gradient(transparent, var(--gold), transparent); opacity: .5;
}

.top, .foot { display: flex; justify-content: space-between; align-items: center; }
.kicker, .foot, .eyebrow, .houses em, .caption {
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
}
.kicker { color: var(--stone); }

.mark { align-self: center; }
.wordmark { display: block; width: min(100%, 460px); height: auto; }
.expansion {
  margin-top: 1.1em; font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.35vw, 20px);
  letter-spacing: .06em; color: #4a4744;
}
.expansion i { color: var(--gold); padding: 0 .7em; font-style: normal; }

.eyebrow { color: var(--gold); margin-bottom: 1.1em; display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 4.6vw, 76px); line-height: .98; letter-spacing: -.01em;
}
.lede {
  margin-top: .9em; max-width: 30em; font-size: clamp(13px, .95vw, 15px); line-height: 1.75; color: #55514c;
}

.houses { list-style: none; border-top: 1px solid rgba(26,26,26,.14); }
.houses li {
  display: grid; grid-template-columns: 3.2em 1fr auto; align-items: baseline;
  padding: clamp(8px, 1.3vh, 13px) 0; border-bottom: 1px solid rgba(26,26,26,.14);
  font-family: var(--serif); font-size: clamp(18px, 1.55vw, 24px); cursor: default;
  transition: padding .5s var(--ease), color .5s var(--ease);
}
.houses li span { font-size: 13px; color: var(--gold); font-style: italic; }
.houses li em { font-family: var(--sans); font-style: normal; color: var(--stone); font-size: 9.5px; }
.houses li:hover { padding-left: 10px; color: #000; }
.houses li:hover em { color: var(--gold); }

.notify { position: relative; display: flex; border-bottom: 1px solid var(--ink); transition: border-color .4s; }
.notify input {
  flex: 1; border: 0; background: transparent; padding: 12px 0; font: inherit;
  font-size: 13px; letter-spacing: .14em; color: var(--ink); outline: none;
}
.notify input::placeholder { color: #8a857e; text-transform: uppercase; font-size: 10.5px; letter-spacing: .3em; }
.notify button { border: 0; background: none; color: var(--ink); width: 44px; cursor: pointer; transition: transform .4s var(--ease), color .3s; }
.notify button svg { width: 34px; }
.notify button:hover { transform: translateX(6px); color: var(--gold); }
.thanks {
  position: absolute; inset: 0; display: flex; align-items: center; background: var(--ivory);
  font-family: var(--serif); font-style: italic; font-size: 18px; opacity: 0; pointer-events: none;
  visibility: hidden; transition: opacity .6s, visibility 0s linear .6s; /* hidden = out of the a11y tree */
}
.notify.sent .thanks, .notify.flash .thanks, .thanks:target { opacity: 1; visibility: visible; transition-delay: 0s; }
.notify.sent .thanks, .thanks:target { pointer-events: auto; }
.notify.flash .thanks { color: #7a4b3a; font-size: 16px; }
.notify.busy button { opacity: .35; animation: breathe 1.1s ease-in-out infinite alternate; }
.notify button:disabled { cursor: default; }
.notify button:disabled:hover { transform: none; color: var(--ink); }
.notify:focus-within { border-bottom-color: var(--gold); }
.notify.sent button, .notify.sent input { visibility: hidden; }
@keyframes breathe { to { opacity: .8; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.foot { color: var(--stone); gap: 6px 16px; flex-wrap: wrap; }
.foot span { white-space: nowrap; }

/* ---------- Gallery ---------- */
.gallery { position: relative; overflow: hidden; background: var(--ink); }
.slide {
  position: absolute; inset: 0; background: var(--img) center / cover no-repeat;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.8s var(--ease), transform 9s linear;
}
.slide.on { opacity: 1; transform: scale(1); }
.veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 55%, rgba(26,26,26,.55)); }
.caption {
  position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad);
  display: flex; align-items: center; gap: 24px; color: var(--ivory);
}
.count b { font-weight: 400; color: var(--gold); }
.rule { flex: 1; height: 1px; background: rgba(245,240,232,.25); overflow: hidden; }
.rule i { display: block; height: 100%; background: var(--gold); transform-origin: left; animation: fill 6.5s linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Entrance (pure CSS — content never depends on JS) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.panel > * { animation: rise 1.2s var(--ease) both; }
.panel > :nth-child(2) { animation-delay: .15s; }
.panel > :nth-child(3) { animation-delay: .35s; }
.panel > :nth-child(4) { animation-delay: .5s; }
.panel > :nth-child(5) { animation-delay: .65s; }
.panel > :nth-child(6) { animation-delay: .8s; }

/* ---------- Short screens ---------- */
@media (max-height: 760px) {
  .lede { display: none; }
  .wordmark { width: min(100%, 360px); }
}

/* ---------- Mobile: image band on top, panel below, still one viewport ---------- */
@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: 42fr 58fr; }
  .gallery { grid-row: 1; }
  .panel { grid-row: 2; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); gap: 12px;
    grid-template-rows: auto 1fr auto auto auto; }
  .panel::after { display: none; }
  .top { display: none; }
  .mark { align-self: start; }
  .wordmark { width: min(62%, 280px); }
  .expansion { font-size: 14px; margin-top: .6em; }
  .copy { align-self: center; }
  .lede { display: none; }
  h1 { font-size: clamp(34px, 10vw, 46px); }
  .houses li { font-size: 17px; padding: 7px 0; }
  .caption { left: 16px; right: 16px; bottom: 14px; }
  .foot { font-size: 9px; letter-spacing: .22em; }
  .notify input { font-size: 16px; } /* iOS zooms into inputs under 16px */
}
@media (max-width: 860px) and (max-height: 700px) {
  .houses { display: none; }
}

@media (max-width: 860px) and (max-height: 520px) and (orientation: portrait) {
  .stage { grid-template-rows: 34fr 66fr; }
  .expansion { display: none; }
}

/* ---------- Landscape phones: side by side, essentials only ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .stage { grid-template-columns: 52fr 48fr; grid-template-rows: 100%; }
  .gallery { grid-row: 1; grid-column: 2; }
  .panel {
    grid-row: 1; grid-column: 1; gap: 10px; grid-template-rows: auto 1fr auto auto;
    padding: 16px 20px max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .panel::after { display: none; }
  .top, .expansion, .eyebrow, .lede, .houses { display: none; }
  .mark { align-self: start; }
  .wordmark { width: 150px; }
  .copy { align-self: center; }
  h1 { font-size: 30px; }
  .notify input { font-size: 16px; padding: 8px 0; }
  .foot { font-size: 9px; letter-spacing: .22em; }
  .caption { left: 16px; right: max(16px, env(safe-area-inset-right)); bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .panel > *, .rule i { animation: none; }
}