@charset "UTF-8";
/* ============================================================================
   The Weddings page: the wedding lab's 11, on the real site.

   The estate film at full screen with the words on a parchment band across
   its foot (never over the footage), then Olive Grove's large blocks: the
   line, the three ways to celebrate, the olive claim, the pamphlet. Tokens,
   type and buttons come from olive.css.
   ========================================================================== */

/* ------------------------------------------------------------ the film hero */
.hero:has(> .fh){display:block;border-bottom:0;padding:0;max-width:none}
.fh{position:relative;height:calc(100svh - var(--head,76px));min-height:34rem;display:flex;
  align-items:flex-end;overflow:hidden;background:var(--olive)}
.fh-media{position:absolute;inset:0;margin:0}
.fh-media img,.fh-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-band{position:relative;z-index:2;background:var(--ivory);color:var(--deep);width:min(46rem,100%);
  margin-left:clamp(0rem,4vw,3.5rem);padding:clamp(1.8rem,4vw,3rem) clamp(1.4rem,4vw,3.2rem) clamp(1.6rem,3vw,2.6rem)}
.fh-band .eyebrow{margin-bottom:1.1rem}
.fh-band h1{font-size:clamp(2.8rem,6.2vw,5.6rem)}
.fh-band p{font-size:1.1rem;max-width:32rem;margin:1.3rem 0 1.8rem}
.fh-pause{position:absolute;z-index:3;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  background:var(--ivory);color:var(--deep);border:0;padding:.85rem 1.1rem;min-height:44px}
.fh-pause:hover,.fh-pause:focus-visible{background:var(--deep);color:var(--ivory)}
@media (max-width:760px){
  .fh{height:auto;min-height:0;display:block}
  .fh-media{position:relative;height:62svh}
  .fh-band{margin:0;width:100%}
  .fh-pause{top:calc(62svh - 3.8rem);bottom:auto}
}

/* ------------------------------------------------------------------ the line */
.og-line{font:italic 400 clamp(1.8rem,4.2vw,3.2rem)/1.25 var(--text);max-width:64rem;
  padding:clamp(4rem,10vw,8rem) 0;margin:0}

/* ------------------------------------------------------ three ways, three columns */
.og-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;
  margin-inline:calc(50% - 50vw);border-bottom:0}
.og-way{display:flex;flex-direction:column}
.og-way img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.og-way div{padding:2rem clamp(1.2rem,3vw,2.6rem) 3rem;flex:1}
.og-way:nth-child(2) div{background:var(--olive)}
.og-way:nth-child(2) div,.og-way:nth-child(2) div *{color:var(--ivory)}
.og-way h3{font-size:clamp(1.7rem,2.4vw,2.1rem);margin:.6rem 0 .8rem}
.og-way p{margin:0 0 1.2rem;max-width:none}
.og-way a{font:500 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.35rem;
  transition:background-size .5s cubic-bezier(.16,1,.3,1)}
.og-way:hover a{background-size:0 1px;background-position:100% 100%}

/* ------------------------------------------------------------------ the claim */
.og-claim{background:var(--olive);margin-inline:calc(50% - 50vw);
  padding:clamp(4.5rem,11vw,9rem) max(var(--pad),calc(50vw - 41rem));border-bottom:0}
.og-claim,.og-claim *{color:var(--ivory)}
.og-claim h2{font-size:clamp(2.6rem,6.6vw,5.6rem);max-width:16ch;margin-bottom:1.6rem}
.og-claim p{max-width:36rem;font-size:1.1rem}

/* --------------------------------------------------------------- the pamphlet */
.og-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  margin-inline:calc(50% - 50vw);padding:0;border-bottom:0}
.og-book figure{margin:0;overflow:hidden}
.og-book img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.og-book > div{padding:clamp(2rem,6vw,5.5rem)}
.og-book h2{font-size:clamp(2.2rem,4.6vw,3.8rem);margin-bottom:1.2rem}
.og-book p{margin:0 0 2rem}

/* the marquee the motion adds after the line */
.mq{overflow:hidden;white-space:nowrap;background:var(--olive);margin-inline:calc(50% - 50vw);
  padding:clamp(1.6rem,4vw,3rem) 0}
.mq-track{display:inline-flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);will-change:transform}
.mq span{font:400 clamp(2.2rem,6vw,5.4rem)/1 var(--display);color:var(--ivory)}
.mq i{width:.7rem;height:.7rem;background:var(--ivory);transform:rotate(45deg);flex:none}

@media (max-width:820px){
  .og-ways,.og-book{grid-template-columns:minmax(0,1fr)}
}