/* ==========================================================================
   system.css — one typographic system for all pages (v7.6.53)
   Loaded LAST on every page. Uses :not(#_) to out-rank older page rules.
   Red (#9D161C) is the logo colour and is never changed here.
   ========================================================================== */

:root{
  --t-red:#9D161C;
  --t-weight:500;                       /* one place to make all headlines lighter/heavier */
  --t-h1:clamp(46px,6.25vw,104px);
  --t-statement:clamp(30px,2.55vw,52px);  /* chapter / statement H2: ~49px @1920 */
  --t-h2:var(--t-statement);
  --t-contact:var(--t-h3);                /* contact / utility H2: H3 size */
  --t-h3:clamp(22px,2.3vw,36px);
  --t-min:11px;                         /* smallest allowed text, desktop */
}

/* ---- 1. Headline sizes: H1 / H2 / H3 identical on every page ------------- */
h1:not(#_){font-size:var(--t-h1)!important;line-height:.94!important;letter-spacing:-.055em!important}
h2:not(#_){font-size:var(--t-h2)!important;line-height:.98!important;letter-spacing:-.05em!important}
h3:not(#_){font-size:var(--t-h3)!important;line-height:1.03!important;letter-spacing:-.035em!important}
h1:not(#_),h2:not(#_),h3:not(#_){
  font-family:Unbounded,"Arial Black","Helvetica Neue",Arial,sans-serif!important;
  font-weight:var(--t-weight)!important;
  text-transform:uppercase!important;   /* ---- 2. one case everywhere ------ */
}
/* contact / utility headlines: one tier below statements (Headline-Budget) */
section.contact h2:not(#_),.contact h2:not(#_),.partners h2:not(#_){
  font-size:var(--t-contact)!important;line-height:1.03!important;letter-spacing:-.035em!important
}
/* legal sub-headings are small section labels, not display headlines */
body.legal-page h2:not(#_){
  font-size:14px!important;letter-spacing:.08em!important;line-height:1.35!important
}

/* chapter bridge titles: same case as the headline system */
.chapter-bridge__title{text-transform:uppercase!important}

/* ---- 3. Red closing word: works in every heading level ------------------ */
h1 .red,h2 .red,h3 .red{color:var(--t-red)!important}

/* ---- 4. Legibility of red on photo heroes WITHOUT touching the red ------- */
/* A slightly deeper, longer scrim sits under the headline area only.        */
.hero:after,.hero-panel.hero-1:after{
  background:linear-gradient(0deg,rgba(3,3,54,.82) 0%,rgba(3,3,54,.58) 26%,rgba(3,3,54,.22) 52%,rgba(3,3,54,.04) 100%)!important
}

/* ---- 5. Minimum text size + tap targets --------------------------------- */
.nav a,.kicker,.kicker-line,.hero-link,.scroll,.scrollmark,.menu,.hero-count,.hero-count span,
cite,cite strong,.closing-copy .aside,.story-pause .aside,.story-dark-v769 .aside,.story-closing-v769 .aside,div.aside,.assignment-meta,.label,.small,small,.partner-type,
.section-label,.fact,.fact strong,.facts div,.facts strong,.global-footer__quiet,.global-footer__muted,
.global-footer__identity div,.global-footer__legal,.global-footer__legal a,.global-footer__contact a,
.chapter-bridge__label,.contact-links a,.category-label small,.nav a.utility{
  font-size:var(--t-min)!important
}
@media(max-width:620px){
  :root{
    --t-h1:clamp(40px,12vw,56px);
    --t-statement:clamp(27px,7.4vw,34px);
    --t-h3:22px;
    --t-min:12px;
  }
  .nav a,.kicker,.kicker-line,.hero-link,.scroll,.scrollmark,.menu,.hero-count,.hero-count span,
  cite,cite strong,.closing-copy .aside,.story-pause .aside,.story-dark-v769 .aside,.story-closing-v769 .aside,div.aside,.assignment-meta,.label,.small,small,.partner-type,.quote-no,
  .section-label,.fact,.fact strong,.facts div,.facts strong,.global-footer__quiet,.global-footer__muted,
  .global-footer__identity div,.global-footer__legal,.global-footer__legal a,.global-footer__contact a,
  .chapter-bridge__label,.contact-links a,.category-label small{
    font-size:12px!important
  }
}
@media(max-width:620px),(pointer:coarse){
  .menu{min-height:44px;min-width:44px;padding:0 0 0 14px;display:inline-flex;align-items:center;justify-content:flex-end}
  .mobile-nav a{display:flex;align-items:center;min-height:44px}
  .global-footer__legal a,.global-footer__contact a,.global-footer__links a,.contact-links a,.hero-link,.mail,.chapter-bridge a{
    display:inline-flex;align-items:center;min-height:44px
  }
  .global-footer__social a{width:44px;height:44px}
  .brand,.brand-logo{min-height:44px;display:inline-flex;align-items:center}
}

/* tap targets, second pass (events uses .mobile instead of .mobile-nav) */
@media(max-width:620px),(pointer:coarse){
  .mobile a{display:flex!important;align-items:center;min-height:44px}
  .global-footer__social a{width:44px!important;height:44px!important}
  .global-footer__social{gap:4px!important}
  .global-footer__brand{display:inline-flex!important;align-items:center;min-height:44px}
  .chapter-bridge__back,.chapter-bridge__arrow{min-width:44px;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center}
  .scrollmark,.scroll{display:inline-flex!important;align-items:center;min-height:44px}
  body.legal-page main a{display:inline-flex;align-items:center;min-height:44px}
}

@media(max-width:620px),(pointer:coarse){
  .assignment-open{min-height:44px}
}

/* mobile: breathing room under stacked headlines on Stories (was 0px) */
@media(max-width:620px){
  .story-intro-v769 h2:not(#_),.story-statement-v769 h2:not(#_){margin-bottom:22px!important}
  .story-intro-v769>div+div{margin-top:22px}
}

/* ---- 6. Large screens: type tokens (layout scaling lives in 4k-<page>.css) */
@media(min-width:2200px){
  :root{--t-h1:135px;--t-statement:64px;--t-h3:47px;--t-min:14px}
}
@media(min-width:3000px){
  :root{--t-h1:187px;--t-statement:88px;--t-h3:65px;--t-min:18px}
}

/* ==========================================================================
   v7.6.68 — SITEWIDE CONTENT SYSTEM
   Canonical owner for body text, recurring text geometry, section rhythm
   and the non-sticky overlap language on Home / Weddings / Stories.
   ========================================================================== */

:root{
  --t-body:clamp(16px,calc(14px + .25vw),19px);
  --t-body-leading:1.64;
  --text-shell:1680px;
  --text-gap:clamp(34px,4.5vw,88px);
  --text-gutter:clamp(20px,4vw,72px);
  --section-y:clamp(72px,6.5vw,112px);
}

/* Body copy */
.lede,
.emerge-copy,
.body-note,
.word-essay,
.closing-text p,
.prose,
.prose.large,
.copy,
.lead,
.assignment-copy,
.contact p,
.contact-side p,
.home-personal__text,
.partners-copy p,
.contact-copy p,
.wedding-faq__items p,
.s7663-intro .prose,
.s7663-statement .prose,
.s7663-text-spread .prose,
.s7663-final-copy .prose{
  font-size:var(--t-body)!important;
  line-height:var(--t-body-leading)!important;
}

/* Repeating text geometry */
.opening-grid,
.intro,
.final-copy,
.s7663-intro,
.s7663-final-copy,
.contact{
  grid-template-columns:minmax(0,1fr) minmax(280px,.82fr)!important;
  gap:var(--text-gap)!important;
}

.opening-grid{
  width:min(100%,var(--text-shell));
  margin-inline:auto!important;
}

.closing-text{
  grid-template-columns:minmax(0,1fr) minmax(280px,.82fr)!important;
  gap:var(--text-gap)!important;
  padding-left:max(var(--text-gutter),calc((100vw - var(--text-shell))/2))!important;
  padding-right:max(var(--text-gutter),calc((100vw - var(--text-shell))/2))!important;
}

.intro,
.final-copy,
.text-spread,
.s7663-intro,
.s7663-text-spread,
.s7663-final-copy,
.contact,
.personal-intro-grid{
  width:min(100%,var(--text-shell))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.text-spread,
.s7663-text-spread{
  grid-template-columns:minmax(160px,.42fr) minmax(0,1fr)!important;
  gap:var(--text-gap)!important;
}

/* Events: outer section owns vertical spacing, .intro owns only columns */
.event-intro > .intro{
  padding-top:0!important;
  padding-bottom:0!important;
  width:min(100%,var(--text-shell))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,.82fr)!important;
  gap:var(--text-gap)!important;
  align-items:center!important;
}

/* Vertical rhythm */
.opening,
.closing-text,
.w55-intro,
.w55-prose,
.w55-final-copy,
section.contact,
.event-intro,
.s7663-intro,
.s7663-statement,
.s7663-text-spread,
.s7663-final-copy,
.narrative.personal-intro{
  padding-top:var(--section-y)!important;
  padding-bottom:var(--section-y)!important;
}

section > .intro,
section > .final-copy,
section > .text-spread,
section > .contact,
section > .personal-intro-grid{
  margin-top:0!important;
  margin-bottom:0!important;
}

.essay{
  padding-bottom:0!important;
}
.essay > :last-child{
  margin-bottom:0!important;
}

/* One overlap mechanism, no sticky/pinned text */
.h7656-reveal-stage,
.w7655-reveal-stage,
.s7663-reveal-stage{
  position:relative;
  isolation:isolate;
  background:var(--paper);
}

.h7656-opening-stage > .opening,
.h7656-closing-stage > .closing-text,
.w7655-reveal-stage > .w55-intro,
.s7663-reveal-stage > .s7663-intro{
  position:relative!important;
  top:auto!important;
  min-height:0!important;
  z-index:1;
  background:var(--paper)!important;
}

.h7656-opening-stage > .opening{
  align-content:center!important;
}
.h7656-closing-stage > .closing-text{
  align-items:center!important;
}

.h7656-opening-stage > .essay,
.h7656-closing-stage > .categories,
.w7655-reveal-panel,
.s7663-reveal-panel{
  position:relative!important;
  z-index:2!important;
  margin-top:-64px!important;
}

.w7655-reveal-panel,
.s7663-reveal-panel{
  padding-top:0!important;
  background:var(--paper);
}

.flow > section,
.flow > .h7656-reveal-stage,
.flow > .w7655-reveal-stage,
.flow > .s7663-reveal-stage{
  margin-top:0;
  margin-bottom:0;
}

@media(min-width:2200px){
  :root{
    --t-body:19px;
    --text-gap:82px;
    --section-y:96px;
  }

  .h7656-opening-stage > .essay,
  .h7656-closing-stage > .categories,
  .w7655-reveal-panel,
  .s7663-reveal-panel{
    margin-top:-92px!important;
  }
}

@media(min-width:621px) and (max-width:1024px){
  :root{
    --t-body:17px;
    --text-gap:clamp(30px,4vw,48px);
    --section-y:72px;
  }

  .opening-grid,
  .intro,
  .final-copy,
  .s7663-intro,
  .s7663-final-copy,
  .contact{
    grid-template-columns:minmax(0,1fr) minmax(240px,.9fr)!important;
  }

  .text-spread,
  .s7663-text-spread{
    grid-template-columns:minmax(120px,.36fr) minmax(0,1fr)!important;
  }

  .h7656-opening-stage > .essay,
  .h7656-closing-stage > .categories,
  .w7655-reveal-panel,
  .s7663-reveal-panel{
    margin-top:-52px!important;
  }
}

@media(max-width:620px){
  :root{
    --t-body:16px;
    --t-body-leading:1.62;
    --text-gap:24px;
    --text-gutter:20px;
    --section-y:56px;
  }

  .opening-grid,
  .intro,
  .final-copy,
  .text-spread,
  .s7663-intro,
  .s7663-text-spread,
  .s7663-final-copy,
  .contact,
  .event-intro > .intro{
    grid-template-columns:1fr!important;
    gap:var(--text-gap)!important;
  }

  .opening-grid{
    width:100%;
  }

  .closing-text{
    grid-template-columns:1fr!important;
    gap:var(--text-gap)!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .intro,
  .final-copy,
  .text-spread,
  .s7663-intro,
  .s7663-text-spread,
  .s7663-final-copy,
  .contact,
  .personal-intro-grid,
  .event-intro > .intro{
    width:100%!important;
  }

  .h7656-opening-stage > .essay,
  .h7656-closing-stage > .categories,
  .w7655-reveal-panel,
  .s7663-reveal-panel{
    margin-top:-40px!important;
  }
}


/* ==========================================================================
   v7.6.71 — WEDDINGS + STORIES WIDER HORIZONTAL SPREAD
   Same architecture, Stories mirrored. Slightly larger image masses and
   more vertical breathing room, while keeping the two pages geometrically related.
   ========================================================================== */

/* Main 9-image editorial fields */
.ref-canvas,
.stories-ref-canvas{
  width:min(100%,2380px)!important;
  aspect-ratio:1290 / 2100!important;
  margin:clamp(110px,8vw,170px) auto!important;
}

/* Keep image height close to the accepted composition while the taller
   canvas increases the space between successive image rows. */
.ref-canvas .r1,.stories-ref-canvas .r1{height:8.238%!important}
.ref-canvas .r2,.stories-ref-canvas .r2{height:18.190%!important}
.ref-canvas .r3,.stories-ref-canvas .r3{height:14.476%!important}
.ref-canvas .r4,.stories-ref-canvas .r4{height:13.191%!important}
.ref-canvas .r5,.stories-ref-canvas .r5{height:15.667%!important}
.ref-canvas .r6,.stories-ref-canvas .r6{height:11.952%!important}
.ref-canvas .r7,.stories-ref-canvas .r7{height:13.667%!important}
.ref-canvas .r8,.stories-ref-canvas .r8{height:16.953%!important}
.ref-canvas .r9,.stories-ref-canvas .r9{height:12.858%!important}

/* Large breakers and closing images follow the same scale on both pages. */
.photo-breaker figure,
.s7663-photo-breaker figure{
  width:min(100%,2050px)!important;
}
.photo-breaker.narrow figure,
.s7663-photo-breaker.narrow figure{
  width:min(88vw,1870px)!important;
}
.w55-final-image .frame,
.s7663-final-image .frame{
  width:min(92vw,1950px)!important;
}

/* More air around the image chapters, but symmetrical top/bottom. */
.photo-breaker,
.s7663-photo-breaker{
  padding-top:clamp(92px,7vw,150px)!important;
  padding-bottom:clamp(92px,7vw,150px)!important;
}
.w55-final-image,
.s7663-final-image{
  padding-top:clamp(92px,7vw,150px)!important;
  padding-bottom:clamp(110px,9vw,180px)!important;
}

@media(max-width:620px){
  .ref-canvas,
  .stories-ref-canvas{
    width:auto!important;
    aspect-ratio:auto!important;
    margin:72px 20px!important;
    gap:28px!important;
  }

  .ref-canvas figure,
  .stories-ref-canvas figure{
    height:auto!important;
  }

  .photo-breaker,
  .s7663-photo-breaker{
    padding-top:64px!important;
    padding-bottom:64px!important;
  }

  .w55-final-image,
  .s7663-final-image{
    padding-top:64px!important;
    padding-bottom:80px!important;
  }
}


/* ==========================================================================
   v7.6.72 — WEDDINGS + STORIES WIDE EDITORIAL FIELD
   One shared geometry. Weddings: normal -> mirror.
   Stories: mirror -> normal.
   ========================================================================== */

.ref-canvas,
.stories-ref-canvas{
  width:min(96vw,2600px)!important;
}

/* Shared image masses */
.ref-canvas .r1,.stories-ref-canvas .r1{width:45.842%!important}
.ref-canvas .r2,.stories-ref-canvas .r2{width:26.890%!important}
.ref-canvas .r3,.stories-ref-canvas .r3{width:33.140%!important}
.ref-canvas .r4,.stories-ref-canvas .r4{width:45.842%!important}
.ref-canvas .r5,.stories-ref-canvas .r5{width:26.890%!important}
.ref-canvas .r6,.stories-ref-canvas .r6{width:26.790%!important}
.ref-canvas .r7,.stories-ref-canvas .r7{width:45.842%!important}
.ref-canvas .r8,.stories-ref-canvas .r8{width:26.890%!important}
.ref-canvas .r9,.stories-ref-canvas .r9{width:26.890%!important}

/* Normal field: pushed farther toward the outer edges */
.ref-canvas .r1,.stories-ref-canvas .r1{left:8.503%!important}
.ref-canvas .r2,.stories-ref-canvas .r2{left:67.450%!important}
.ref-canvas .r3,.stories-ref-canvas .r3{left:18.982%!important}
.ref-canvas .r4,.stories-ref-canvas .r4{left:45.655%!important}
.ref-canvas .r5,.stories-ref-canvas .r5{left:5.661%!important}
.ref-canvas .r6,.stories-ref-canvas .r6{left:51.052%!important}
.ref-canvas .r7,.stories-ref-canvas .r7{left:8.503%!important}
.ref-canvas .r8,.stories-ref-canvas .r8{left:67.450%!important}
.ref-canvas .r9,.stories-ref-canvas .r9{left:18.044%!important}

/* True horizontal mirror */
.ref-canvas.mirror .r1,.stories-ref-canvas.mirror .r1{left:45.655%!important}
.ref-canvas.mirror .r2,.stories-ref-canvas.mirror .r2{left:5.661%!important}
.ref-canvas.mirror .r3,.stories-ref-canvas.mirror .r3{left:47.878%!important}
.ref-canvas.mirror .r4,.stories-ref-canvas.mirror .r4{left:8.503%!important}
.ref-canvas.mirror .r5,.stories-ref-canvas.mirror .r5{left:67.450%!important}
.ref-canvas.mirror .r6,.stories-ref-canvas.mirror .r6{left:22.158%!important}
.ref-canvas.mirror .r7,.stories-ref-canvas.mirror .r7{left:45.655%!important}
.ref-canvas.mirror .r8,.stories-ref-canvas.mirror .r8{left:5.661%!important}
.ref-canvas.mirror .r9,.stories-ref-canvas.mirror .r9{left:55.066%!important}

@media(max-width:620px){
  .ref-canvas,
  .stories-ref-canvas{
    width:auto!important;
  }
}

/* v7.6.117 curator crop zoom */
[data-curator-zoom="true"]{scale:var(--curator-scale,1);transform-origin:50% 50%;}
@media(max-width:620px){[data-curator-zoom="true"]{scale:var(--curator-scale-mobile,1);}}