@charset "UTF-8";
/* ============================================================================
   The home page.

   The rest of the site is deliberately plain because the visual direction has
   not been chosen. This page is the exception: it has to carry the pitch, so it
   gets the one signature idea and everything around it stays quiet.

   The signature is the hero: a short film of the estate, the meadow set for a
   ceremony, the house, the glass roof, the valley, and a little of a couple
   in it. It loops without a seam and is never dimmed; the words sit on a
   cream panel over its corner instead of on a scrim.

   The shared motion vocabulary is in motion.css, which every page loads. This
   sheet holds only what is unique to this page: the clock itself, the weekend,
   and the closing band.
   ========================================================================== */

/* ---------------------------------------------------------------- the hero
   The film runs the width of the page. The copy decides nothing about its
   height: on a wide screen the panel is laid over the bottom-left corner of
   the film, and on anything narrower it drops into normal flow underneath,
   because a panel over a 4:3 phone frame would hide most of the picture.

   Nothing darkens the footage. White type would need a scrim; the words sit
   on solid cream and stay at full contrast whatever frame is behind them. */
.hero{position:relative;display:grid;background:var(--ivory)}
.hero-stage{
  position:relative;width:100%;aspect-ratio:2/1;max-height:88vh;overflow:hidden;
  background:var(--cream);
  view-transition-name:hero-frame;
}
@media (max-width:760px){.hero-stage{aspect-ratio:4/3}}

.hero-poster,.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* The video is invisible until it is actually playing, so there is never a
   black box or a half-decoded first frame: the poster is underneath, showing
   the same meadow the film opens on. */
.hero-video{opacity:0;transition:opacity .8s ease}
.hero-video.is-on{opacity:1}

.hero-pause{
  position:absolute;right:clamp(.8rem,2vw,1.4rem);bottom:clamp(.8rem,2vw,1.4rem);z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font:600 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--deep);background:var(--cream);border:1px solid var(--deep);
  padding:.55rem .8rem;border-radius:999px;transition:background .25s;
}
.hero-pause:hover{background:var(--paper)}
.hero-pause:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.hero-pause svg{width:.8rem;height:.8rem}
.hero-pause .i-play{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:inline}
.hero-pause[aria-pressed="true"] .i-pause{display:none}

.hero-body{
  position:relative;z-index:3;width:100%;max-width:82rem;
  padding-top:clamp(2rem,5vh,3.25rem);
  padding-bottom:clamp(2.5rem,7vh,4rem);
}
.hero-body > *{max-width:44rem}
.hero-body .eyebrow{color:var(--deep)}

/* Wide screens: the panel over the film's lower-left corner. */
@media (min-width:1100px){
  .hero-stage,.hero-body{grid-area:1/1}
  .hero-stage{aspect-ratio:auto;height:min(50vw,88vh);min-height:40rem;max-height:none}
  .hero-body{
    align-self:end;justify-self:start;width:auto;max-width:40rem;
    margin:0 0 clamp(1.5rem,4vh,3rem) clamp(1.5rem,4vw,3.5rem);
    padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1.6rem,2.8vw,2.6rem);
    background:var(--cream);box-shadow:0 18px 44px rgba(52,55,47,.16);
  }
  .hero-body > *{max-width:none}
  .hero-body h1{font-size:clamp(2.3rem,3.4vw,3.4rem)}
}

/* ------------------------------------------------- the load, once, in order */
@media (prefers-reduced-motion:no-preference){
  .js .hero-body > *{transform:translateY(10px);
    animation:rise .7s cubic-bezier(.16,.8,.24,1) forwards}
  .js .hero-body > *:nth-child(1){animation-delay:.15s}
  .js .hero-body > *:nth-child(2){animation-delay:.28s}
  .js .hero-body > *:nth-child(3){animation-delay:.42s}
  .js .hero-body > *:nth-child(4){animation-delay:.56s}
}
@keyframes rise{to{transform:none}}

/* ------------------------------------------------------------- the weekend */
.weekend{
  list-style:none;margin:2.4rem 0 0;padding:0;
  display:grid;gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  counter-reset:none;
}
.wk{display:flex;flex-direction:column;gap:.7rem}
.wk figure{margin:0;overflow:hidden}
/* height:auto is not optional here. The img carries width and height
   attributes so the page reserves space and nothing shifts as it loads — but
   those attributes also set a presentational height, and a presentational
   height silently defeats aspect-ratio. Without this the frames render 900px
   tall in a 280px column. */
.wk img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--paper);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.wk:hover img{transform:scale(1.04)}
.wk-when{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--label);
  border-top:1px solid var(--line);padding-top:.8rem;margin-top:.3rem;
}
.wk b{font-family:var(--display);font-weight:400;font-size:1.28rem;line-height:1.2}
.wk p{font-size:.93rem;color:var(--ink-soft)}

/* ============================================================================
   Staggers for the two sequences this page owns.

   The vocabulary itself lives in motion.css -- reveal-in, wipe-in and the
   ranges that drive them. What is left here is the ordering, because only this
   page has four denials under one claim and four movements of one weekend, and
   in both cases they should arrive in the order they are read.
   ========================================================================== */
/* The order of the four denials and the four movements now lives with the
   rest of the arrivals in motion.css. */