/* =========================================================
   COLE + BRIDGET · ENGAGEMENT PARTY WEBSITE
   MAIN STYLESHEET

   ORGANIZATION
   ---------------------------------------------------------
   Shared foundations come first, followed by page-specific
   sections. Responsive rules stay with the section they modify
   so each area can be maintained without tracing override history.

   SECTION GUIDE
   ---------------------------------------------------------
   01  RESET
   02  COLOR PALETTE + FONTS
   03  GLOBAL SITE STYLES
   04  HEADER + NAVIGATION
   05  SHARED TYPOGRAPHY
   06  BUTTONS + LINKS
   07  MOTION + MEDIA HELPERS
   08  SHARED INTERIOR PAGE STRUCTURE
   09  HOME PAGE
   10  OUR STORY PAGE
   11  RSVP PARTY DETAILS + MOMENTS
   12  GALLERY PAGE
   13  CONTACT + SHARED FORM CONTROLS
   14  RSVP PAGE
   15  GALLERY LIGHTBOX + TOAST
   16  FOOTER
   17  ACCESSIBILITY + REDUCED MOTION
========================================================= */

/* =========================================================
   COLOR EDITING MAP
   =========================================================

   Shared palette values live in :root. Page-specific color rules
   remain scoped to their section so a local adjustment does not
   unintentionally recolor the full site.

   SHARED — ALL HTML FILES
   ---------------------------------------------------------
   Global canvas/text: html, body
   Header/navigation: .site-header, .mobile-menu, .desktop-nav,
                      .mobile-rsvp, .rsvp-nav
   Buttons/links: .button-primary, .button-on-dark,
                  .button-outline, .text-link::after
   Photo labels: .photo-label
   Footer: #site-footer, .footer-grid a, .footer-script

   index.html
   ---------------------------------------------------------
   Hero: #home-hero, .hero-shade
   Quick links: #home-quick-links, .quick-strip, .quick-item
   Story preview: #home-story
   Party feature: #home-party, .dark-feature
   Gallery preview: #home-gallery, .home-gallery
   Signature CTA: #home-signature, .signature-cta,
                  .signature-paper, .giant-script, .signature-seal

   our-story.html
   ---------------------------------------------------------
   Hero: #story-hero
   Chapter: #story-chapter, .story-chapter, .dropcap::first-letter,
            blockquote
   Proposal band: #story-proposal, .story-band
   Final CTA: #story-final

   rsvp.html — party details + moments
   ---------------------------------------------------------
   Party details: #party-details, .event-card
   Party moments: #party-moments, .event-moments, .triptych figcaption

   gallery.html
   ---------------------------------------------------------
   Intro: #gallery-intro
   Grid: #gallery-grid, .gallery-page-tile
   Lightbox: .lightbox, .lightbox figcaption, .lightbox button

   contact.html
   ---------------------------------------------------------
   Intro: #contact-intro, .contact-hero
   Direct contact: #contact-direct, .contact-card
   Form area: #contact-form-section, .editorial-form

   rsvp.html — hero + form
   ---------------------------------------------------------
   Hero: #rsvp-main, .rsvp-hero
   Form: #rsvp-response, .rsvp-form, .choice span,
         .choice input:checked + span
   Success panel: #rsvp-success, .success-panel

   script.js controls behavior only. site.webmanifest is JSON and
   contains no comments.
========================================================= */

/* =========================================================
   01. RESET
   Provides a consistent browser baseline before site-specific styles.
========================================================= */

/* 1. Use border-box sizing for predictable dimensions. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margins before site spacing is applied. */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword size interpolation when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}


/* 4. Set safe defaults for non-image media. */
picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 5. Keep select controls consistent with site typography. */
select {
  font: inherit;
}

/* 6. Prevent long text from overflowing its container. */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 7. Improve paragraph and heading line wrapping. */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}


/* =========================================================
   02. COLOR PALETTE + FONTS
========================================================= */
:root {

  /* =========================================================
     BLACK + NEAR BLACK
     ========================================================= */

  --black: #000000;
  --near-black: #060502;
  --espresso-black: #0F0B01;
  --brown-black: #171204;
  --charcoal: #252525;


  /* =========================================================
     DEEP OLIVE + EARTH
     ========================================================= */

  --olive-950: #241D09;
  --olive-925: #2B2617;
  --olive-900: #302C24;
  --olive-875: #3B3429;
  --olive-850: #3B310D;
  --olive-825: #433B2A;
  --olive-800: #4B4130;
  --olive-775: #554F42;
  --olive-750: #605642;
  --olive-725: #605A48;
  --olive-700: #6D694B;
  --olive-675: #766F4F;
  --olive-650: #756F4F;


  /* =========================================================
     EARTHY BROWN + TAUPE
     ========================================================= */

  --brown-800: #7C593A;
  --taupe-800: #7B6C5D;
  --taupe-775: #7F7662;
  --taupe-750: #867D69;
  --taupe-700: #998E6C;
  --taupe-650: #9D9482;
  --rose-taupe-650: #A58779;

  --taupe-600: #A29285;
  --taupe-550: #ADA498;
  --taupe-525: #AEA79C;
  --rose-taupe-550: #B0998A;
  --olive-taupe-550: #AFA483;
  --olive-taupe-525: #B0A87C;
  --olive-taupe-500: #B3A774;
  --rose-taupe-500: #BDA79D;


  /* =========================================================
     GOLD + CAMEL
     ========================================================= */

  --camel-600: #B5914A;
  --gold-550: #CFB66D;
  --gold-500: #D7BB68;
  --gold-400: #E3CF8C;
  --gold-300: #E5D9A9;
  --gold-bright: #F0D98C;


  /* =========================================================
     LIGHT TAUPE + STONE
     ========================================================= */

  --stone-400: #C6BFB2;
  --rose-stone-400: #C2A99F;
  --rose-stone-350: #CDBCAF;

  --stone-300: #DBD6CA;
  --stone-275: #DAD5C8;
  --stone-250: #DCCFC1;

  --stone-225: #B8B2AA;
  --stone-200: #BEBAB1;


  /* =========================================================
     CREAM + IVORY + WHITE
     ========================================================= */

  --cream-300: #EFE6D9;
  --ivory-250: #F3F1E3;
  --ivory-200: #F8F4E7;
  --ivory-150: #FAF6EB;
  --soft-white: #FEFDFD;

  --green-ivory-200: #E4E3C4;
  --green-ivory-100: #F1EFE3;


  /* =========================================================
     DEEP BROWN + MERLOT / RUST
     ========================================================= */

  --gray-brown: #605A54;
  --dark-chocolate: #342723;
  --chocolate: #483129;
  --deep-russet: #57302A;
  --brick-brown: #6C342A;


  /* =========================================================
     MUTED OCHRE + OLIVE ACCENTS
     ========================================================= */

  --ochre-brown: #7A5F33;
  --dark-khaki: #706643;
  --muted-olive: #7B7553;

  --gray-olive: #6F6E50;
  --sand-camel: #BEA278;
  --sage-khaki: #B1AD7D;


  /* =========================================================
     OPTIONAL SEMANTIC COLORS
     These point back to the palette above so the actual
     palette stays centralized and easy to change.
     ========================================================= */

  --color-background-dark: var(--near-black);
  --color-background-light: var(--soft-white);

  --color-text-dark: var(--charcoal);
  --color-text-light: var(--ivory-150);

  --color-primary-dark: var(--olive-900);
  --color-primary: var(--olive-700);
  --color-primary-light: var(--olive-taupe-500);

  --color-accent-gold: var(--gold-500);
  --color-accent-merlot: var(--brick-brown);
  --color-accent-taupe: var(--taupe-650);

  --color-border-dark: var(--olive-875);
  --color-border-medium: var(--taupe-550);
  --color-border-light: var(--stone-300);




  /* Shared fonts and site measurements */
  --display:"Bodoni Moda","Times New Roman",serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:74px;

  /* Palette variables are used directly for borders and shadows below. */




} 

/* =========================================================
   03. GLOBAL SITE STYLES
   FILES: ALL HTML FILES
   COLOR: base canvas, default text, selection, skip-link, scroll progress.
   Includes shared page behavior and transitions.
========================================================= */

html{
  scroll-behavior:smooth;
  background:var(--soft-white);
}

body{
  margin:0;
  color:var(--near-black);
  background:var(--soft-white);
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.menu-open{overflow:hidden}

img{display:block;max-width:100%}
button,input,textarea{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent }
a{color:inherit}
button{color:inherit}

::selection{
  background:var(--brick-brown);
  color:var(--soft-white);
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:9999;
  padding:.75rem 1rem;
  background:var(--near-black);
  color:var(--soft-white);
  font-family:var(--sans);
  font-size:.75rem;
  transform:translateY(-150%);
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0)}

.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:2px;
  z-index:1002;
  pointer-events:none;
  background:transparent;
}
.scroll-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--gray-brown),var(--green-ivory-200));
  transition:width .05s linear;
}

/* --------------------------------
   Page transitions between internal pages
-------------------------------- */

body{
  opacity:1;
  transition:opacity .42s ease;
}

body.page-enter{
  animation:pageFadeIn .55s ease both;
}

body.is-leaving{
  opacity:0;
}

@keyframes pageFadeIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@media (prefers-reduced-motion: reduce){
  body{
    transition:none;
  }

  body.page-enter{
    animation:none;
  }
}



/* =========================================================
   04. HEADER + NAVIGATION
   FILES: ALL HTML FILES
   COLOR: header/nav/mobile-menu/active-link/RSVP navigation colors.
   Sticky header, desktop navigation, mobile menu, and RSVP navigation.
========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:900;
  height:var(--header-h);
  border-bottom:1px solid transparent;
  background:var(--soft-white);
  backdrop-filter:blur(15px) saturate(115%);
  -webkit-backdrop-filter:blur(15px) saturate(115%);
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--soft-white) 97%, transparent);
  border-color:color-mix(in srgb, var(--taupe-550) 42%, transparent);
  box-shadow:0 8px 30px color-mix(in srgb, var(--near-black) 6%, transparent);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  max-width:1680px;
  margin:auto;
  padding:0 1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  flex:0 0 auto;
}
.brand img{
  width:34px;height:34px;
  object-fit:contain;
  opacity:.88;
}
.desktop-nav{display:none}
.mobile-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
}
.mobile-rsvp,
.menu-toggle{
  border:1px solid var(--olive-875);
  background:transparent;
  color:var(--olive-900);
  min-height:38px;
}
.mobile-rsvp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .95rem;
  text-decoration:none;
  font-family:var(--sans);
  font-size:.63rem;
  letter-spacing:.16em;
}
.menu-toggle{
  width:42px;
  position:relative;
}
.menu-toggle span:not(.sr-only){
  position:absolute;
  left:10px;
  right:10px;
  height:1px;
  background:currentColor;
  transition:transform .25s ease,top .25s ease;
}
.menu-toggle span:nth-child(2){top:15px}
.menu-toggle span:nth-child(3){top:22px}
.menu-toggle[aria-expanded="true"] span:nth-child(2){top:19px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(3){top:19px;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;
  inset:var(--header-h) 0 0;
  z-index:850;
  background:var(--soft-white);
  color:var(--near-black);
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.mobile-menu.open{
  opacity:1;
  visibility:visible;
  transform:none;
}
.mobile-menu-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:2rem 1.25rem 1.5rem;
}
.mobile-menu .eyebrow{margin:0 0 1.5rem}
.mobile-menu nav{
  display:grid;
  gap:.55rem;
}
.mobile-menu .nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:0 1rem;
  border:1px solid color-mix(in srgb, var(--taupe-550) 32%, transparent);
  text-decoration:none;
  text-transform:uppercase;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.12em;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.mobile-menu .nav-link::after{content:"\2197\FE0E";color:var(--rose-taupe-650)}
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link[aria-current="page"]{
  background:var(--sage-khaki);
  border-color:var(--sage-khaki);
  color:var(--soft-white);
}
.mobile-menu .nav-link:hover::after,
.mobile-menu .nav-link[aria-current="page"]::after{
  color:var(--soft-white);
}
.mobile-menu .rsvp-nav{
  background:var(--near-black);
  color:var(--soft-white);
}
.mobile-menu-foot{
  margin-top:auto;
  padding-top:1.25rem;
  border-top:1px solid color-mix(in srgb, var(--taupe-550) 42%, transparent);
  display:flex;
  justify-content:space-between;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.14em;
  color:var(--taupe-800);
}


/* Mobile-menu kicker styling. */
.mobile-menu-kicker{
  color:var(--rose-taupe-650);
  font-size:.7rem;
}


/* HEADER — tablet. */
@media (min-width:700px){
  :root{--header-h:82px}
  .header-inner{padding:0 1.5rem}
}


/* HEADER — desktop. */
@media (min-width:1120px){
  :root{--header-h:96px}
  .header-inner{
    padding:0 2rem;
  }
  .desktop-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.4rem;
    min-width:0;
  }
  .desktop-nav .nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:.55rem .72rem;
    border:1px solid color-mix(in srgb, var(--olive-875) 32%, transparent);
    border-radius:14px;
    background:color-mix(in srgb, var(--soft-white) 22%, transparent);
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap;
    font-family:var(--sans);
    font-size:.49rem;
    line-height:1;
    letter-spacing:.11em;
    transition:
      color .22s ease,
      background .22s ease,
      border-color .22s ease,
      transform .22s ease;
  }
  .desktop-nav .nav-link:hover,
  .desktop-nav .nav-link[aria-current="page"]{
    background:var(--near-black);
    border-color:var(--near-black);
    opacity: 0.6;
    color:var(--soft-white);
    transform:translateY(-1px);
  }
  .desktop-nav .nav-link[aria-current="page"]{
    box-shadow:inset 0 -2px 0 var(--gold-500);
  }
  .desktop-nav .rsvp-nav{
    background:var(--near-black);
    border-color:var(--near-black);
    color:var(--soft-white);
  }
  .desktop-nav .rsvp-nav:hover{
    background:var(--brick-brown);
    border-color:var(--brick-brown);
    opacity: 1;
  }
  .mobile-actions{display:none}
  .mobile-menu{display:none!important}
  .brand img{width:40px;height:40px}
}

/* HEADER — large desktop. */
@media (min-width:1500px){
  .desktop-nav .nav-link{
    padding:.6rem .9rem;
    font-size:.52rem;
  }
}

/* =========================================================
   05. SHARED TYPOGRAPHY
   Shared headings, script accents, eyebrows, and section typography.
========================================================= */
/* Explicit block margins preserve the intended spacing after the reset. */
p{margin-block:1em}
h1{margin-block:.67em}
h2{margin-block:.83em}
h3{margin-block:1em}

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  line-height:1.35;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
}

h1,h2,h3,p{margin-top:0}
h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:.98;
}
h1{font-size:clamp(3rem,14vw,6.5rem)}
h2{font-size:clamp(2.25rem,10vw,5rem)}
h3{font-size:1.6rem}
em{
  font-family:var(--serif);
  font-weight:400;
}
.script-accent,
.giant-script,
.footer-script{
  font-family:var(--script);
  font-weight:400;
}
.script-accent{
  display:inline-block;
  font-size:1.17em;
  line-height:.8;
}
.lede{
  font-size:1.28rem;
  line-height:1.45;
  max-width:36rem;
}
.number{
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.15em;
}

.section-pad{padding:4.25rem 1rem}
.section-heading{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom:2rem;
}
.section-heading h2{margin-bottom:.2rem}



  


/* SHARED SECTION PADDING — tablet. */
@media (min-width:700px){
  .section-pad{padding:5.5rem 2rem}
}

/* SHARED SECTION PADDING — desktop. */
@media (min-width:1120px){
  .section-pad{padding:7rem clamp(3rem,6vw,7rem)}
}

/* =========================================================
   06. BUTTONS + LINKS
   FILES: ALL HTML FILES
   COLOR: shared button and CTA colors; changes here can affect multiple pages.
   Shared buttons, hover states, focus states, arrows, and text links.
========================================================= */
.button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.85rem 1.25rem;
  border:1px solid transparent;
  text-decoration:none;
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  font-weight:600;
  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button-primary{
  background:var(--gray-brown);
  color:var(--soft-white);
  border-color:var(--gray-brown);
  opacity:.4;
}
.button-primary:hover{
  background:var(--near-black);
  border-color:var(--near-black);
}
.button-on-dark{
  color:var(--soft-white);
  border-color:var(--soft-white);
}
.button-on-dark:hover{
  color:var(--soft-white);
  background:var(--taupe-525);
  border-color:var(--soft-white);
  opacity: 0.8;
}
.button-outline{
  border-color:var(--olive-900);
  background:transparent;
}
.button-outline:hover{
  background:var(--olive-900);
  color:var(--soft-white);
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  width:max-content;
  text-decoration:none;
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:.2rem;
}
.text-link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--brick-brown);
  transform:scaleX(.18);
  transform-origin:left;
  transition:transform .28s var(--ease);
}
.text-link:hover::after{transform:scaleX(1)}
.text-link span{transition:transform .2s ease}
.text-link:hover span{transform:translateX(4px)}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

/* Dark sections use a light focus ring so keyboard focus stays obvious. */
#home-quick-links a:focus-visible,
#home-party a:focus-visible,
#story-proposal a:focus-visible,
#site-footer a:focus-visible,
#rsvp-success button:focus-visible,
.lightbox button:focus-visible{
  outline-color:var(--gold-300);
}


/* =========================================================
   07. MOTION + MEDIA HELPERS
   FILES: ALL HTML FILES
   COLOR: shared photo-label overlay and media visual treatments.
========================================================= */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .72s var(--ease),transform .72s var(--ease);
}
.reveal.in-view{
  opacity:1;
  transform:none;
}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
.reveal:nth-child(5){transition-delay:.24s}

.media-hover{
  overflow:hidden;
  position:relative;
}
.media-hover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease),filter .55s ease;
}
.media-hover:hover img{transform:scale(1.025)}
.photo-label{
  position:absolute;
  right:.85rem;
  bottom:.75rem;
  padding:.35rem .5rem;
  background:color-mix(in srgb, var(--soft-white) 88%, transparent);
  backdrop-filter:blur(5px);
  font-family:var(--sans);
  font-size:.5rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}




/* =========================================================
   08. SHARED INTERIOR PAGE STRUCTURE
   FILE: our-story.html
========================================================= */
.page-hero{
  display:grid;
  gap:1.5rem;
  padding:2.4rem 1rem 4rem;
}
.page-hero-copy{
  align-self:center;
}
.page-hero h1{
  margin:.5rem 0 1rem;
}
.page-hero-image{
  min-height:55svh;
  overflow:hidden;
}
.page-hero-image img{
  width:100%;height:100%;object-fit:cover;
}

/* INTERIOR PAGE STRUCTURE — tablet. */
@media (min-width:700px){
  .page-hero{
    grid-template-columns:.78fr 1.22fr;
    align-items:stretch;
    padding:3.5rem 2rem 5.5rem;
  }

  .page-hero-story{
    grid-template-columns:.7fr 1.3fr;
  }
}

/* INTERIOR PAGE STRUCTURE — desktop. */
@media (min-width:1120px){
  .page-hero{
    padding:6rem clamp(3rem,6vw,7rem) 8rem;
    gap:clamp(4rem,8vw,10rem);
  }
  .page-hero-image{min-height:720px}
}

/* =========================================================
   09. HOME PAGE
   FILE: index.html
   COLOR: Home page sections and responsive color/overlay rules.
   Home-specific color, type, layout, and responsive styles.
========================================================= */

/* HOME HERO — COLOR CONTROLS | FILE: index.html
   Background/fallback, title, script names, ampersand, kicker, meta text, side note. */
#home-hero{
  color:var(--near-black);
  background:var(--green-ivory-200);
}
#home-hero .home-hero-kicker{
  color:var(--brick-brown);
  font-size:.7rem;
}
#home-hero .home-hero-title{
  color:var(--near-black);
}
#home-hero .home-hero-title em{
  color:var(--gray-olive);
}
#home-hero .home-hero-title b{
  color:var(--brick-brown);
}
#home-hero .home-hero-meta{
  color:var(--olive-800);
  font-size:.62rem;
}
#home-hero .home-hero-meta .dot{
  color:var(--near-black);
}
#home-hero .home-hero-note{
  color:var(--soft-white);
}

/* HOME QUICK LINKS — COLOR CONTROLS | FILE: index.html
   Full strip, text, numbers, arrows, supporting copy. */
#home-quick-links{
  background:var(--black);
  opacity:.55;
  color:var(--soft-white);
}
#home-quick-links .quick-item-kicker{
  color:var(--sage-khaki);
  font-size:.85rem;
}
#home-quick-links .quick-item-title{
  color:var(--soft-white);
  font-size:1.75rem;
}
#home-quick-links .quick-item-description{
  color:var(--green-ivory-100);
  font-size:1rem;
}
#home-quick-links .quick-number,
#home-quick-links .quick-arrow{
  color:var(--gold-500);
}

/* HOME STORY PREVIEW — COLOR CONTROLS | FILE: index.html
   Background, kicker, title, script accent, paragraph, link, photo label. */
#home-story{
  background:var(--soft-white);
  color:var(--near-black);
}
#home-story .home-story-kicker{
  color:var(--brick-brown);
  font-size:.7rem;
}
#home-story .home-story-title{
  color:var(--near-black);
}
#home-story .home-story-title .script-accent{
  color:var(--olive-700);
}
#home-story .home-story-lede{
  color:var(--deep-russet);
  font-size:1.28rem;
}
#home-story .home-story-link{
  color:var(--olive-850);
}
#home-story .home-story-photo-label{
  color:var(--olive-800);
}

/* HOME PARTY FEATURE — COLOR CONTROLS | FILE: index.html
   Background block, light text, script accent, description, CTA. */
#home-party{
  background: #88807b;
  color:var(--soft-white);
}


#home-party .home-party-kicker{
  color:var(--green-ivory-100);
  font-size:.7rem;
}
#home-party .home-party-title{
  color:var(--soft-white);
}
#home-party .home-party-title .script-accent{
  color:var(--gold-300);
}
#home-party .home-party-description{
  color:var(--soft-white);
  font-size:1.1rem;
}
#home-party .home-party-link{
  color:var(--soft-white);
}




/* HOME GALLERY PREVIEW — COLOR CONTROLS | FILE: index.html
   Background, kicker, title, link. */
#home-gallery{
  background:var(--soft-white);
  color:var(--near-black);
}
#home-gallery .home-gallery-kicker{
  color:var(--brick-brown);
  font-size:.7rem;
}
#home-gallery .home-gallery-title{
  color:var(--near-black);
}
#home-gallery .home-gallery-link{
  color:var(--olive-850);
}

/* HOME SIGNATURE CARD — COLOR CONTROLS | FILE: index.html
   Text here; card/paper/overlay/seal colors are in the layout rules below. */
#home-signature{
  color:var(--near-black);
}
#home-signature .home-signature-kicker{
  color:var(--brick-brown);
  font-size:.7rem;
}
#home-signature .home-signature-title{
  color:var(--gray-brown);
}
#home-signature .home-signature-description{
  color:var(--charcoal);
  font-size:1rem;
}


/* HOME PAGE — layout and spacing. */
.hero{
  position:relative;
  min-height:calc(88svh - var(--header-h));
  overflow:hidden;
  background:var(--green-ivory-200);
}
.hero-media{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position: 15% center;
  scale:1.03;
  transition:filter .8s ease,scale 1.3s var(--ease);
}
.hero:hover .hero-media{scale:1.055}

.hero-media-bw{
  filter:grayscale(1) contrast(1.02) brightness(1.03);
}
.hero:hover .hero-media-bw{
  filter:grayscale(.42) contrast(1.02) brightness(1.01) saturate(1.2);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,color-mix(in srgb, var(--soft-white) 95%, transparent) 0%,color-mix(in srgb, var(--soft-white) 80%, transparent) 36%,color-mix(in srgb, var(--soft-white) 8%, transparent) 68%,color-mix(in srgb, var(--near-black) 10%, transparent) 100%),
    linear-gradient(0deg,color-mix(in srgb, var(--near-black) 8%, transparent),transparent 40%);
}

.hero-copy{
  position:relative;
  z-index:2;
  width:min(86%,33rem);
  padding:clamp(4.2rem,14vw,8rem) 1rem 3rem;
}
.hero-copy .eyebrow{max-width:15rem}
.couple-name{
  display:grid;
  margin:1rem 0 1.5rem;
  font-size:clamp(3.1rem,14vw,6.8rem);
  letter-spacing:-.04em;
}
.couple-name span{
  line-height:.88;
  color:var(--near-black);
  opacity: 0.65;
}
.couple-name em{
  font-family:var(--script);
  color:var(--gray-olive);
  font-size:1.15em;
  margin-top:-.08em;
  margin-left:1.1rem;
  line-height:.8;
}
.couple-name b{
  font-family:var(--display);
  font-size:.5em;
  color:var(--deep-russet);
  font-weight:400;
  margin:.12em 0 .22em;
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin:0 0 1.25rem;
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
  .hero-meta .dot{color:var(--deep-russet)}
.hero-side-note{display:none}

.quick-strip{
  display:grid;
  background:var(--olive-950);
  color:var(--soft-white);
}
.quick-item{
  min-height:160px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1rem;
  align-items:center;
  padding:1.35rem 1rem;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--gold-400) 25%, transparent);
  transition:background .25s ease;
}
.quick-item:hover{background:var(--charcoal)}
.quick-item h2{
  font-size:1.75rem;
  margin:.15rem 0 .35rem;
}
.quick-item p:last-child{
  margin:0;
  color:color-mix(in srgb, var(--green-ivory-100) 78%, transparent);
}
.quick-item .number{color:var(--gold-500)}
.quick-item .arrow{
  color:var(--gold-500);
  transition:transform .2s ease;
}
.quick-item:hover .arrow{transform:translate(3px,-3px)}

.editorial-split{
  display:grid;
  gap:2rem;
}
.editorial-photo{
  min-height:520px;
}
.editorial-photo img{filter:grayscale(1)}
.editorial-photo:hover img{filter:grayscale(.55)}
.editorial-copy{
  align-self:center;
}
.editorial-copy h2{
  margin:.5rem 0 1.25rem;
}
.editorial-copy .text-link{margin-top:1rem}

.dark-feature{
  color:var(--soft-white);
  background:var(--muted-olive);
  display:grid;
  gap:2rem;
}
.dark-feature-copy{
  align-self:center;
}
.dark-feature-copy h2{
  margin:.9rem 0 1.25rem;
  color:var(--soft-white);
}
.dark-feature-copy h2 em{color:var(--gold-bright)}
.dark-feature-copy p:not(.eyebrow){
  color:color-mix(in srgb, var(--green-ivory-100) 84%, transparent);
  max-width:34rem;
}
.dark-feature-copy .button{margin-top:1rem}
.dark-feature-photo{
  min-height:430px;
  border:1px solid color-mix(in srgb, var(--gold-300) 25%, transparent);
}

.home-gallery{background:var(--soft-white)}
.editorial-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:220px;
  gap:.65rem;
}
.gallery-tile,
.gallery-page-tile{
  border:0;
  padding:0;
  background:var(--green-ivory-200);
  position:relative;
  overflow:hidden;
  text-align:left;
}
.gallery-tile img,
.gallery-page-tile img{
  width:100%;height:100%;
  object-fit:cover;
}
.gallery-tile.tall{grid-row:span 2}
.gallery-tile.wide{grid-column:span 2}
.gallery-tile.bw img,
.gallery-page-tile.bw img{filter:grayscale(1)}
.gallery-tile.bw:hover img,
.gallery-page-tile.bw:hover img{filter:grayscale(.2)}

.signature-cta{
  min-height:520px;
  display:grid;
  align-content:center;
  justify-items:center;
  position:relative;
  overflow:hidden;
  padding:4rem 1rem;
  background:
    linear-gradient(color-mix(in srgb, var(--gray-brown) 70%, transparent),color-mix(in srgb, var(--gray-brown) 70%, transparent)),
    url("images/IMG_1870.jpeg") center/cover;
    filter:grayscale(0.1) contrast(1.02) brightness(1.3);
}
.signature-paper{
  width:min(100%,680px);
  text-align:center;
  padding:3rem 1.5rem;
  border:1px solid var(--olive-850);
  background:color-mix(in srgb, #ffffff 70%, transparent);
  backdrop-filter:blur(8px);
  position:relative;
}
.signature-paper::before{
  content:"";
  position:absolute;
  inset:7px;
  border:2px solid color-mix(in srgb, var(--deep-russet) 30%, transparent);
  pointer-events:none;
}
.giant-script{
  font-size:clamp(3rem,16vw,7rem);
  line-height:.8;
  color:var(--brick-brown);
  margin:1rem 0 1.5rem;
}
.signature-seal{
  display:flex;
  align-items:center;
  justify-content:center;
  width:82px;
  height:82px;
  margin-top:-18px;
  z-index:1;
  border-radius:50%;

  background:var(--camel-600);
  border:7px double color-mix(in srgb, var(--olive-775) 30%, transparent);

  box-shadow:0 8px 20px color-mix(in srgb, var(--olive-775) 20%, transparent);
  
  color:var(--soft-white);
  text-decoration:none;
  font-family:var(--display);
  font-size:.8rem;
  font-weight: 700;
  letter-spacing:.15em;
  transition:transform .25s ease,filter .25s ease;
}
.signature-seal:hover{
  transform:rotate(-1deg) scale(1.05);
  filter:brightness(1.08);
}


/* HOME PAGE — mobile image framing keeps both Cole and Bridget visible. */
@media (max-width:699px){
  .couple-name{
    font-size:clamp(2rem, 6vw, 2.65rem);
  }

  .couple-name em{
    font-size:1em;
    margin-left:.45rem;
  }

  .hero-home .hero-media {
    object-fit:cover;
    object-position:40% center;
    scale:1;
  }

  .hero-home:hover .hero-media {
    scale:1;
  }

  .hero-home:hover .hero-media {
    scale: 1;
  }

  .hero-home .hero-shade {
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--soft-white) 78%, transparent) 0%,
        color-mix(in srgb, var(--soft-white) 58%, transparent) 35%,
        color-mix(in srgb, var(--soft-white) 12%, transparent) 67%,
        color-mix(in srgb, var(--near-black) 10%, transparent) 100%
      ),
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--near-black) 6%, transparent),
        transparent 40%
      );
  }
}

/* HOME PAGE — tablet image framing keeps both subjects visible. */
@media (min-width:700px) and (max-width:1119px){
  .couple-name {
    font-size: clamp(4rem, 7.5vw, 5.5rem);
  }

  .hero-home .hero-media {
    object-fit: cover;
    object-position: 25% center;
    scale: 1;
  }

  .hero-home:hover .hero-media {
    scale: 1;
  }

  .hero-home .hero-shade {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--soft-white) 82%, transparent) 0%,
      color-mix(in srgb, var(--soft-white) 62%, transparent) 34%,
      color-mix(in srgb, var(--soft-white) 18%, transparent) 64%,
      color-mix(in srgb, var(--near-black) 10%, transparent) 100%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--near-black) 5%, transparent),
      transparent 42%
    );
}
}

/* HOME PAGE — tablet layout. */
@media (min-width:700px){
  .hero-copy{padding-left:2rem}
  .quick-strip{grid-template-columns:repeat(3,1fr)}
  .quick-item{
    border-bottom:0;
    border-right:1px solid color-mix(in srgb, var(--gold-400) 25%, transparent);
  }
  .quick-item:last-child{border-right:0}
  .editorial-split{grid-template-columns:1fr 1fr}
  .editorial-copy{padding:2rem}
  .dark-feature{grid-template-columns:.85fr 1.15fr}
  .dark-feature-copy{padding:2rem 1rem}
  .editorial-grid{
    grid-template-columns:1fr .8fr 1.2fr;
    grid-auto-rows:270px;
  }
  .gallery-tile.tall{grid-row:span 2}
  .gallery-tile.wide{grid-column:span 2}
}

/* HOME PAGE — desktop layout. */
@media (min-width:1120px){
  .hero{
    min-height:calc(92vh - var(--header-h));
  }
  .hero-shade{
    background:
      linear-gradient(90deg,color-mix(in srgb, var(--soft-white) 96%, transparent) 0%,color-mix(in srgb, var(--soft-white) 76%, transparent) 28%,color-mix(in srgb, var(--soft-white) 8%, transparent) 55%,color-mix(in srgb, var(--near-black) 16%, transparent) 100%),
      linear-gradient(0deg,color-mix(in srgb, var(--near-black) 12%, transparent),transparent 45%);
  }
  .hero-copy{
    width:min(46%,40rem);
    padding:clamp(6rem,10vh,10rem) 0 4rem clamp(3rem,6vw,7rem);
  }
  .couple-name{
    font-size:clamp(4.8rem,6.4vw,8.4rem);
  }
  .hero-side-note{
    display:block;
    position:absolute;
    z-index:2;
    right:1.5rem;
    bottom:1.2rem;
    writing-mode:vertical-rl;
    font-family:var(--sans);
    font-size:.53rem;
    letter-spacing:.2em;
    color:color-mix(in srgb, var(--soft-white) 82%, transparent);
    text-shadow:0 1px 6px color-mix(in srgb, var(--near-black) 55%, transparent);
  }
  .quick-item{padding:1.7rem clamp(1.5rem,3vw,3rem)}
  .editorial-split{
    grid-template-columns:1.1fr .9fr;
    gap:clamp(4rem,9vw,10rem);
  }
  .editorial-photo{min-height:760px}
  .dark-feature{
    grid-template-columns:.75fr 1.25fr;
    gap:clamp(3rem,8vw,8rem);
  }
  .dark-feature-copy{padding-left:0}
  .dark-feature-photo{min-height:720px}
  .editorial-grid{
    grid-template-columns:1fr .7fr 1.2fr .85fr;
    grid-auto-rows:260px;
  }
  .gallery-tile:nth-child(1){grid-column:span 1}
  .gallery-tile:nth-child(2){grid-row:span 2}
  .gallery-tile:nth-child(3){grid-column:span 1}
  .gallery-tile:nth-child(4){grid-column:span 2}
  .signature-cta{min-height:680px}
  .signature-paper{padding:5rem 4rem}
}

/* =========================================================
   10. OUR STORY PAGE
   FILE: our-story.html
   COLOR: hero, chapter, proposal band, final CTA, quote, captions.
   Story-specific color, type, layout, and responsive styles.
========================================================= */

/* OUR STORY HERO — COLOR CONTROLS | FILE: our-story.html
   Background, main title, kicker, script accent. */
#story-hero{
  background:var(--soft-white);
  color:var(--near-black);
}
#story-hero .story-hero-kicker{
  color:var(--gray-olive);
  font-size:.7rem;
}
#story-hero .story-hero-title{
  color:var(--near-black);
}
#story-hero .story-hero-title .script-accent{
  color:var(--brick-brown);
}

/* =========================================================
   OUR STORY HERO IMAGE POSITION
   Keeps the existing layout but centers the crop on us
   ========================================================= */

#story-hero .page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
}

/* OUR STORY CHAPTER — COLOR CONTROLS | FILE: our-story.html
   Background, body text, label, quote, quote border, caption. */
#story-chapter{
  background:var(--soft-white);
  color:var(--near-black);
}
#story-chapter .story-chapter-label{
  color:var(--brick-brown);
}
#story-chapter .story-chapter-opening{
  color:var(--charcoal);
}
#story-chapter .story-chapter-quote{
  color:var(--olive-800);
  border-left-color:var(--brick-brown);
}
#story-chapter .story-photo-caption{
  color:var(--taupe-800);
}

/* OUR STORY PROPOSAL BAND — COLOR CONTROLS | FILE: our-story.html
   Full band background, title, script accent, kicker, paragraph. */
#story-proposal{
  background: var(--gray-brown);
  color:var(--soft-white);
}
#story-proposal .story-proposal-kicker{
  color:var(--green-ivory-100);
  font-size:.7rem;
}
#story-proposal .story-proposal-title{
  color:var(--soft-white);
}
#story-proposal .story-proposal-title .script-accent{
  color:var(--gold-bright);
}
#story-proposal .story-proposal-description{
  color:var(--soft-white);
  font-size:1rem;
}

/* OUR STORY FINAL CTA — COLOR CONTROLS | FILE: our-story.html
   Background, kicker, title, italic accent, description. */
#story-final{
  background:var(--soft-white);
  color:var(--near-black);
}
#story-final .story-final-kicker{
  color:var(--brick-brown);
  font-size:.7rem;
}
#story-final .story-final-title{
  color:var(--olive-950);
}
#story-final .story-final-title .script-accent {
  color:var(--brick-brown);
}
#story-final .story-final-description{
  color:var(--olive-800);
  font-size:1rem;
}


/* OUR STORY — layout and spacing. */
.story-chapter{
  display:grid;
  gap:2rem;
  background:var(--soft-white);
}
.margin-note{
  display:flex;
  justify-content:space-between;
  border-top:1px solid color-mix(in srgb, var(--taupe-550) 42%, transparent);
  padding-top:.75rem;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.14em;
}
.story-copy{
  font-size:1.1rem;
}
.dropcap::first-letter{
  float:left;
  font-family:var(--display);
  font-size:4.4rem;
  line-height:.7;
  padding:.15rem .55rem .2rem 0;
  color:var(--brick-brown);
}
blockquote{
  margin:2.2rem 0 0;
  padding:1.4rem 0 0 1rem;
  border-left:1px solid var(--brick-brown);
  font-family:var(--display);
  font-size:1.7rem;
  line-height:1.15;
}
.story-photo{
  margin:0;
  min-height:520px;
}
.story-photo figcaption{
  padding-top:.55rem;
  font-family:var(--sans);
  font-size:.52rem;
  letter-spacing:.14em;
  color:var(--taupe-800);
}
.story-band{
  display:grid;
  background:var(--olive-700);
  color:var(--soft-white);
}
.story-band-image{min-height:520px}
.story-band-image img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.story-band-copy{
  padding:3.5rem 1rem;
  align-self:center;
}
.story-band-copy h2{margin:.7rem 0 1rem}
.story-band-copy .script-accent{color:var(--gold-bright)}
.story-band-copy p:not(.eyebrow){color:color-mix(in srgb, var(--green-ivory-100) 84%, transparent);max-width:32rem}
.story-final{
  display:grid;
  gap:1rem;
  align-items:end;
}
.story-final h2{margin:.5rem 0 0}
.story-final .button{margin-top:1rem}


/* OUR STORY — tablet. */
@media (min-width:700px){
  .story-final{grid-template-columns:1fr 1fr}
  .story-chapter{
    grid-template-columns:120px 1fr 1fr;
  }
  .story-band{grid-template-columns:1.2fr .8fr}
  .story-band-copy{padding:4rem 2rem}
}

/* OUR STORY — desktop. */
@media (min-width:1120px){
  .story-chapter{grid-template-columns:130px .8fr 1.2fr;gap:clamp(3rem,7vw,8rem)}
  .story-band-image{min-height:720px}
  .story-band-copy{padding:6rem clamp(3rem,6vw,7rem)}
}

/* =========================================================
   11. RSVP PARTY DETAILS + MOMENTS
   FILE: rsvp.html
   COLOR: party details, moments, labels, and captions.
========================================================= */

/* PARTY DETAILS — COLOR CONTROLS */
#party-details{
  background:var(--soft-white);
  color:var(--near-black);
}
#party-details .party-details-kicker{
  color:var(--brick-brown);
  font-size:.7rem;
}
#party-details dt{
  color:var(--gray-olive);
  font-size:.95rem;
  font-weight:900;
}
#party-details dd{
  color:var(--charcoal);
  font-weight:500;
}
#party-details .party-details-note{
  color:var(--gray-brown);
}
#party-details .party-photo-label{
  color:var(--brick-brown);
}
#party-details .champ-cheers{
  object-position:80% center;
}

/* PARTY MOMENTS — COLOR CONTROLS */
#party-moments{
  background:var(--soft-white);
  color:var(--soft-white);
}
#party-moments .party-moments-kicker{
  color:var(--taupe-800);
  font-size:.7rem;
}
#party-moments .party-moments-title{
  color:var(--charcoal);
}
#party-moments .party-moments-title em{
  color:var(--gold-550);
}
#party-moments .party-moment-caption{
  color:var(--green-ivory-100);
}
#party-moments .script-accent{
  color:var(--deep-russet);
}

/* PARTY DETAILS + MOMENTS — layout and spacing. */
#party-details{
  padding-top:2.25rem;
  padding-bottom:2.75rem;
}
#party-moments{
  padding-top:2.75rem;
}
.event-card{
  display:grid;
  gap:2rem;
}
.event-details dl{
  display:grid;
  margin:1.5rem 0;
  border-top:1px solid color-mix(in srgb, var(--taupe-550) 42%, transparent);
}
.event-details dl div{
  padding:1rem 0;
  border-bottom:1px solid color-mix(in srgb, var(--taupe-550) 42%, transparent);
}
.event-details dt{
  font-family:var(--sans);
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--olive-800);
}
.event-details dd{
  margin:.25rem 0 0;
  font-family:var(--display);
  font-size:1.35rem;
}
.event-photo{min-height:520px}
.triptych{
  display:grid;
  gap:.8rem;
}
.triptych figure{
  margin:0;
  min-height:440px;
}
.triptych img{width:100%;height:100%;object-fit:cover}
.triptych figcaption{
  position:absolute;
  bottom:.8rem;
  left:.8rem;
  padding:.35rem .5rem;
  background:color-mix(in srgb, var(--soft-white) 88%, transparent);
  font-family:var(--sans);
  font-size:.52rem;
  letter-spacing:.13em;
}
.event-note{
  max-width:36rem;
  margin:1.25rem 0 1.75rem;
  font-size:1.02rem;
  color:var(--olive-800);
}

/* PARTY DETAILS + MOMENTS — tablet. */
@media (min-width:700px){
  #party-details{
    padding-top:2.75rem;
    padding-bottom:3rem;
  }
  #party-moments{
    padding-top:3rem;
  }
  .event-card{grid-template-columns:.8fr 1.2fr}
  .triptych{grid-template-columns:repeat(3,1fr)}
}

/* PARTY DETAILS + MOMENTS — desktop. */
@media (min-width:1120px){
  #party-details{
    width:100%;
    max-width:none;
    margin:0;
    padding-top:2rem;
    padding-bottom:2.25rem;
    padding-left:clamp(3rem,6vw,7rem);
    padding-right:clamp(3rem,6vw,7rem);
  }
  #party-moments{
    padding-top:2.5rem;
  }
  .event-card{
    display:grid;
    grid-template-columns:minmax(340px,.7fr) minmax(0,1.3fr);
    align-items:center;
    gap:clamp(5rem,8vw,9rem);
  }
  .event-details{
    width:100%;
    max-width:none;
    margin:0;
  }
  .event-detail{
    grid-template-columns:36px 110px minmax(0,1fr);
    min-height:76px;
    padding:1.15rem 0;
  }
  .event-detail dd{
    font-size:clamp(1.15rem,1.5vw,1.5rem);
  }
  .event-note{
    max-width:34rem;
  }
  .event-photo{
    width:100%;
    max-width:none;
    min-height:0;
    margin:0;
  }
  #party-details .event-photo .champ-cheers{
    width:100%;
    height:700px;
    display:block;
    object-fit:cover;
    object-position:44% center;
  }
  .triptych figure{min-height:640px}
}

/* =========================================================
   12. GALLERY PAGE
   FILE: gallery.html
   COLOR: gallery intro and grid; lightbox colors are in Section 15.
   Gallery-specific color, layout, and responsive styles.
========================================================= */

/* GALLERY — COLOR CONTROLS | FILE: gallery.html
   Intro background/text + grid background. Preview overlay is Section 15. */
#gallery-intro{
  background:var(--soft-white);
  color:var(--near-black);
}
#gallery-intro .gallery-intro-kicker{
  color:var(--brick-brown);
  font-size:.7rem;
}
#gallery-intro .gallery-intro-title{
  color:var(--near-black);
}
#gallery-intro .gallery-intro-title .script-accent{
  color:var(--gray-olive);
}
#gallery-intro .gallery-intro-description{
  color:var(--deep-russet);
  font-size:1.2rem;
}
#gallery-grid{
  background:var(--soft-white);
}


/* GALLERY — layout preserves each photograph's natural aspect ratio. */
.gallery-head{
  display:grid;
  gap:1.5rem;
  align-items:end;
}
.gallery-head h1{margin:.5rem 0 0}
.gallery-head>p{max-width:30rem}

.gallery-page-grid{
  padding:0 1rem 4rem;
  columns:2;
  column-gap:.7rem;
}

.gallery-page-tile{
  display:inline-block;
  width:100%;
  min-height:0;
  margin:0 0 .7rem;
  break-inside:avoid;
  vertical-align:top;
  background:transparent;
}

.gallery-page-tile img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  aspect-ratio:auto;
}


/* GALLERY — tablet. */
@media (min-width:700px){
  .gallery-head{grid-template-columns:1fr 1fr}
  .gallery-page-grid{
    columns:3;
    column-gap:.8rem;
    padding:0 2rem 5rem;
  }
  .gallery-page-tile{
    margin-bottom:.8rem;
  }
}

/* GALLERY — desktop. */
@media (min-width:1120px){
  .gallery-page-grid{
    columns:4;
    column-gap:.9rem;
    padding:0 clamp(3rem,6vw,7rem) 8rem;
  }
  .gallery-page-tile{
    margin-bottom:.9rem;
  }
}

/* =========================================================
   13. CONTACT + SHARED FORM CONTROLS
   FILES: contact.html + rsvp.html
   Both pages use the soft-white site canvas. These rules are
   intentionally page-scoped so the completed pages stay untouched.
========================================================= */

.page-contact,
.page-rsvp{
  background:var(--soft-white);
}

.page-contact main,
.page-rsvp main{
  background:var(--soft-white);
}

/* CONTACT — HERO */
#contact-intro{
  background:var(--soft-white);
  color:var(--near-black);
}
.contact-hero{
  display:grid;
  gap:2.25rem;
  padding:3.25rem 1rem 2.5rem;
  align-items:end;
}
.contact-hero-copy{
  max-width:42rem;
  padding-top:1.5rem;
}
.contact-intro-kicker,
#contact-direct .eyebrow,
#contact-form-section .eyebrow{
  color:var(--brick-brown);
  font-size:.7rem;
}
.contact-intro-title{
  margin:.55rem 0 1.1rem;
  color:var(--near-black);
}
.contact-intro-title .script-accent,
#contact-direct .script-accent,
#contact-form-section .script-accent{
  color:var(--olive-700);
}
.contact-intro-description{
  max-width:34rem;
  color:var(--gray-brown);
  font-size:1.08rem;
}
.contact-hero-photo{
  margin:0;
  height:clamp(420px,62vw,690px);
  overflow:hidden;
}
.contact-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 43%;
}

/* CONTACT — DIRECT LINKS */
.contact-direct{
  display:grid;
  gap:2.5rem;
  padding:3.75rem 1rem 4rem;
  background:var(--soft-white);
}
.contact-direct-heading h2,
.contact-message-copy h2{
  margin:.55rem 0 0;
}
.contact-direct-grid{
  display:grid;
}
.contact-card + .contact-card{
  border-top:1px solid color-mix(in srgb, var(--taupe-550) 34%, transparent);
}
.contact-card{
  display:grid;
  grid-template-columns:minmax(72px,100px) minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
  padding:1.3rem 0;
  color:var(--near-black);
  text-decoration:none;
  transition:padding .25s ease,background .25s ease;
}
.contact-card:hover{
  padding-left:.75rem;
  padding-right:.75rem;
  background:var(--green-ivory-200);
}
.contact-card span{
  font-family:var(--sans);
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--olive-800);
}
.contact-card strong{
  min-width:0;
  overflow-wrap:anywhere;
  font-family:var(--sans);
  font-size:clamp(1.05rem,2.3vw,1.35rem);
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.015em;
  font-variant-numeric:lining-nums tabular-nums;
}
.contact-card b{
  color:var(--brick-brown);
  font-weight:400;
}

/* CONTACT — MESSAGE AREA */
#contact-form-section{
  background:var(--soft-white);
}
.contact-message{
  display:grid;
  gap:2.5rem;
  padding:4rem 1rem 5rem;
}
.contact-message-copy>p:not(.eyebrow){
  max-width:31rem;
  margin-top:1rem;
  color:var(--gray-brown);
}
.contact-message-photo{
  display:none;
  margin:2rem 0 0;
  overflow:hidden;
}
.contact-message-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* CONTACT + RSVP — OUTLINED FORM CONTROLS */
.editorial-form,
.rsvp-form{
  display:grid;
  gap:1.25rem;
}
.form-row{
  display:grid;
  gap:1rem;
}
.editorial-form label,
.rsvp-form label:not(.choice){
  display:grid;
  gap:.55rem;
  color:var(--olive-775);
  font-family:var(--sans);
  font-size:.67rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.editorial-form input,
.editorial-form textarea,
.rsvp-form input:not([type="radio"]),
.rsvp-form textarea{
  width:100%;
  padding:1rem 1.05rem;
  border:0px solid color-mix(in srgb, var(--taupe-550) 48%, transparent);
  border-radius:0;
  background:var(--soft-white);
  color:var(--near-black);
  font-family:var(--sans);
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  text-transform:none;
  letter-spacing:0;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.editorial-form textarea,
.rsvp-form textarea{
  resize:vertical;
  min-height:120px;
}
.editorial-form input:focus,
.editorial-form textarea:focus,
.rsvp-form input:not([type="radio"]):focus,
.rsvp-form textarea:focus{
  border-color:var(--olive-900);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--olive-700) 18%, transparent);
  background:var(--soft-white);
}
.editorial-form input::placeholder,
.editorial-form textarea::placeholder,
.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder{
  color:var(--taupe-650);
  opacity:.90;
  font-size: 0.7rem;
}
.contact-form,
.rsvp-form{
  border:0;
  padding:1.35rem;
  background:color-mix(in srgb, var(--stone-225) 42%, var(--soft-white));
  box-shadow:0 16px 40px color-mix(in srgb, var(--near-black) 6%, transparent);
}
.contact-submit,
.rsvp-submit{
  justify-self:start;
  margin-top:.25rem;
}

/* CONTACT — tablet */
@media (min-width:700px){
  .form-row{grid-template-columns:1fr 1fr}
  .contact-hero{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:4rem;
    padding:5rem 2rem 3.5rem;
  }
  .contact-hero-copy{padding-bottom:2rem}
  .contact-hero-photo{height:650px}
  .contact-direct{
    grid-template-columns:.7fr 1.3fr;
    gap:4rem;
    padding:4.5rem 2rem 5rem;
  }
  .contact-message{
    grid-template-columns:.75fr 1.25fr;
    gap:4rem;
    padding:5rem 2rem 6rem;
    align-items:start;
  }
  .contact-message-photo{
    display:block;
    height:360px;
  }
  .contact-form{padding:2rem}
}

/* CONTACT — desktop */
@media (min-width:1120px){
  .contact-hero,
  .contact-direct,
  .contact-message{
    padding-left:clamp(3rem,6vw,7rem);
    padding-right:clamp(3rem,6vw,7rem);
  }
  .contact-hero{
    min-height:760px;
    grid-template-columns:minmax(340px,.72fr) minmax(0,1.28fr);
    gap:clamp(5rem,8vw,9rem);
    padding-top:6rem;
    padding-bottom:4rem;
  }
  .contact-hero-photo{height:700px}
  .contact-direct{
    grid-template-columns:.68fr 1.32fr;
    gap:clamp(5rem,9vw,10rem);
    padding-top:5.5rem;
    padding-bottom:6rem;
  }
  .contact-message{
    grid-template-columns:.72fr 1.28fr;
    gap:clamp(5rem,9vw,10rem);
    padding-top:6rem;
    padding-bottom:8rem;
  }
  .contact-message-photo{height:460px}
  .contact-form{padding:2.5rem}
}

/* =========================================================
   14. RSVP PAGE
   FILE: rsvp.html
========================================================= */


/* RSVP — in-page navigation offsets destinations below the sticky header. */
#party-details,
#rsvp-response,
#party-moments{
  scroll-margin-top:calc(var(--header-h) + 1rem);
}

/* RSVP — HERO */
#rsvp-main{
  background:var(--soft-white);
  color:var(--near-black);
}
.rsvp-hero{
  display:grid;
  gap:2.25rem;
  padding:3.25rem 1rem 2.5rem;
  align-items:center;
}
.rsvp-hero-copy{
  max-width:41rem;
  padding-top:1.5rem;
}
.rsvp-intro-kicker,
#rsvp-response .eyebrow{
  color:var(--brick-brown);
  font-size:.7rem;
}
.rsvp-intro-title{
  margin:.55rem 0 1.1rem;
  color:var(--near-black);
}
.rsvp-intro-title .script-accent,
#rsvp-response .script-accent{
  color:var(--olive-700);
}
.rsvp-intro-title .script-accent{
  margin-left:.3em;
}
.rsvp-intro-description{
  max-width:32rem;
  color:var(--gray-brown);
  font-size:1.08rem;
}
.rsvp-party-link{
  display:inline-flex;
  margin-top:1.4rem;
  color:var(--olive-850);
}
.rsvp-hero-photo{
  margin:0;
  overflow:hidden;
}
.rsvp-hero-photo img{
  width:100%;
  height:clamp(430px,68vw,700px);
  object-fit:cover;
  object-position:center;
}
.rsvp-hero-photo figcaption{
  padding-top:.65rem;
  font-family:var(--sans);
  font-size:.55rem;
  letter-spacing:.14em;
  color:var(--taupe-800);
}

.rsvp-response-aside h2{
  margin:.55rem 0 0;
}

/* RSVP — RESPONSE + FORM */
.rsvp-response{
  display:grid;
  gap:2.75rem;
  padding:4rem 1rem 5rem;
  background:var(--soft-white);
}
.rsvp-response-aside>p:not(.eyebrow){
  max-width:31rem;
  margin-top:1rem;
  color:var(--gray-brown);
}
.rsvp-response-photo{
  display:none;
  margin:3em 0 0;
  overflow:hidden;
}
.rsvp-response-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rsvp-form{
  gap:1.25rem;
  max-width:850px;
  padding:1.35rem;
  font-family:var(--sans);
}
.rsvp-form fieldset{
  display:grid;
  gap:1rem;
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.rsvp-form fieldset+fieldset{
  margin-top:.15rem;
  padding-top:0;
}
.rsvp-form legend{
  width:100%;
  margin:0 0 .7rem;
  padding:0;
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--olive-700);
}
.rsvp-form input:not([type="radio"]){
  padding:1rem 1.05rem;
}
.rsvp-form textarea{
  min-height:110px;
  padding:1rem 1.05rem;
}
.rsvp-field-attendees textarea{min-height:100px}
.choice-grid{
  display:grid;
  gap:.65rem;
}
.choice{
  position:relative;
  display:block;
  cursor:pointer;
}
.choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.choice span{
  min-height:76px;
  padding:.9rem 1rem;
  border:0px solid color-mix(in srgb, var(--taupe-550) 48%, transparent);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25rem;
  background:var(--soft-white);
  color:var(--gray-olive);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.choice:hover span{
  border-color:var(--olive-700);
  transform:translateY(-1px);
}
.choice b{
  font-family:var(--display);
  font-size:1rem;
  font-weight:500;
  line-height:1.4;
}
.choice small{
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
}
.choice input:checked + span{
  background:var(--gray-brown);
  border-color:var(--gray-brown);
  color:var(--soft-white);
}
.choice input:focus-visible + span{
  outline:2px solid var(--brick-brown);
  outline-offset:3px;
}

/* RSVP — SUCCESS PANEL */
#rsvp-success{
  background:color-mix(in srgb, var(--olive-950) 97%, transparent);
  color:var(--soft-white);
}
#rsvp-success .success-kicker{color:var(--gold-300)}
#rsvp-success .success-title{color:var(--soft-white)}
#rsvp-success .success-title .script-accent{color:var(--gold-bright)}
#rsvp-success>p:last-child{color:var(--green-ivory-100)}
.success-panel{
  position:fixed;
  inset:0;
  z-index:1050;
  display:grid;
  place-items:center;
  align-content:center;
  padding:2rem;
  text-align:center;
}
.success-panel[hidden]{display:none}
.success-panel>button{
  position:absolute;
  top:1rem;
  right:1rem;
  width:44px;
  height:44px;
  border:1px solid color-mix(in srgb, var(--soft-white) 32%, transparent);
  background:transparent;
  color:var(--soft-white);
  font-size:1.5rem;
}
.success-panel>img{
  width:74px;
  filter:brightness(0) invert(1);
  opacity:.85;
}
.success-panel h2{margin:.8rem 0 1rem}
.success-panel p:last-child{max-width:36rem}

/* RSVP — tablet */
@media (min-width:700px){
  .rsvp-hero{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:4rem;
    padding:5rem 2rem 3.5rem;
  }

  /* Keeps the RSVP title inside its text column at tablet widths. */
  .rsvp-intro-title{
    font-size:clamp(4.1rem,8.2vw,5.8rem);
  }

  .rsvp-hero-photo img{height:650px}
  .rsvp-response{
    grid-template-columns:.72fr 1.28fr;
    gap:4rem;
    padding:5rem 2rem 6rem;
    align-items:start;
  }
  .rsvp-response-photo{
    display:block;
    height:430px;
  }
  .rsvp-form{padding:1.35rem}
  .choice-grid{grid-template-columns:1fr 1fr}
}

/* RSVP — desktop */
@media (min-width:1120px){
  .rsvp-intro-title{
    font-size:clamp(3rem,14vw,6.5rem);
  }
  .rsvp-hero,
  .rsvp-response{
    padding-left:clamp(3rem,6vw,7rem);
    padding-right:clamp(3rem,6vw,7rem);
  }
  .rsvp-hero{
    min-height:760px;
    grid-template-columns:minmax(340px,.7fr) minmax(0,1.3fr);
    gap:clamp(5rem,8vw,9rem);
    padding-top:6rem;
    padding-bottom:4rem;
  }
  .rsvp-hero-photo img{height:700px}
  .rsvp-response{
    grid-template-columns:.72fr 1.28fr;
    gap:clamp(5rem,9vw,10rem);
    padding-top:6rem;
    padding-bottom:8rem;
  }
  .rsvp-response-photo{height:520px}
  .rsvp-form{padding:1.5rem}
}

/* =========================================================
   15. GALLERY LIGHTBOX + TOAST
   FILE: gallery.html for preview; toast is shared where present.
   COLOR: preview overlay, controls, captions, toast.
========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:1200;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  background:color-mix(in srgb, var(--near-black) 96%, transparent);
  color:var(--soft-white);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  padding:3.5rem .5rem 1rem;
}
.lightbox[hidden]{display:none}
.lightbox figure{
  margin:0;
  width:100%;
  height:calc(100dvh - 4.5rem);
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  gap:0;
  justify-items:center;
  align-items:center;
  overflow:hidden;
}
.lightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 6.5rem);
  object-fit:contain;
}
.lightbox button{
  border:0;
  background:transparent;
  color:var(--soft-white);
  font-size:1.2rem;
}
.lightbox-close{
  position:absolute;
  right:1rem;top:1rem;
  width:44px;height:44px;
  border:1px solid color-mix(in srgb, var(--soft-white) 32%, transparent)!important;
}
.toast{
  position:fixed;
  left:50%;
  bottom:1.25rem;
  z-index:1300;
  padding:.8rem 1rem;
  background:var(--olive-900);
  color:var(--soft-white);
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.1em;
  transform:translate(-50%,150%);
  opacity:0;
  transition:transform .25s ease,opacity .25s ease;
}
.toast.show{transform:translate(-50%,0);opacity:1}


/* =========================================================
   16. FOOTER
   FILES: ALL HTML FILES
   COLOR: footer background, links, names, credits, borders.
   Footer color, type, spacing, links, and responsive styles.
========================================================= */

/* FOOTER — COLOR CONTROLS | FILES: ALL HTML FILES
   Background/text/names/credits. Check BOTH #site-footer and .site-footer. */
#site-footer{
  /* COLOR: footer background here. This ID selector can override .site-footer below. */
  background:var(--olive-725);
  color:var(--soft-white);
}
#site-footer .footer-kicker{
  color:var(--gold-300);
  font-size:.7rem;
}
#site-footer .footer-names{
  color:var(--soft-white);
}
#site-footer .footer-credit{
  color:var(--soft-white);
}
#site-footer .footer-copyright{
  color:var(--soft-white);
}

/* FOOTER — layout and spacing. */
.site-footer{
  padding:3.5rem 1rem 1rem;
  position:relative;
  overflow:hidden;
}

.footer-monogram img{
  width:52px;
  filter:brightness(0) invert(1);
  opacity:.8;
}
.footer-grid{
  display:grid;
  gap:2rem;
  padding:1.5rem 0 2.5rem;
}
.footer-grid>div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
}
.footer-grid a{
  color:var(--soft-white);
  text-decoration:none;
}
.footer-grid a:hover{color:var(--rose-stone-350)}
.footer-script{
  color:var(--soft-white);
  font-size:2.5rem;
  line-height:.85;
  margin:.35rem 0;
}
.footer-bottom{
  border-top:1px solid color-mix(in srgb, var(--gold-400) 24%, transparent);
  padding-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-family:var(--sans);
  font-size:.52rem;
  letter-spacing:.14em;
}



/* FOOTER — tablet. */
@media (min-width:700px){
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
  .footer-bottom{flex-direction:row;justify-content:space-between}
}

/* FOOTER — desktop. */
@media (min-width:1120px){
  .site-footer{padding:4.5rem clamp(3rem,6vw,7rem) 1.25rem}
}

/* =========================================================
   17. ACCESSIBILITY + REDUCED MOTION
   Reduced-motion overrides for a more comfortable browsing experience.
========================================================= */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   18. MOBILE SAFARI STABILITY
   Keeps overlays aligned to the dynamic iPhone viewport, prevents
   emoji substitution for decorative arrows, and removes excessive
   end-of-page rubber-band space without changing desktop layout.
========================================================= */

/* Force decorative arrows to render as normal text glyphs on iOS. */
.quick-arrow,
.contact-card b,
.button > span,
.mobile-menu .nav-link::after{
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  font-variant-ligatures:none;
}

@media (max-width:699px){
  html,
  body{
    min-height:100%;
    overscroll-behavior-y:none;
  }

  body{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
  }

  main{
    width:100%;
    flex:1 0 auto;
  }

  /* iOS Safari can expose the page underneath fixed elements when its
     bottom toolbar expands/collapses. Size overlays to the dynamic viewport. */
  .mobile-menu{
    top:var(--header-h);
    right:0;
    bottom:auto;
    left:0;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    min-height:calc(100svh - var(--header-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-menu-inner{
    height:auto;
    min-height:100%;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  }

  .success-panel{
    top:0;
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:100svh;
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:
      calc(2rem + env(safe-area-inset-top))
      2rem
      calc(2rem + env(safe-area-inset-bottom));
  }

  /* Keep the final footer content clear of the iPhone home/browser area
     and ensure the document visually ends with the footer. */
  .site-footer{
    flex:0 0 auto;
    margin:0;
    padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));
  }

  .footer-bottom{
    margin-bottom:0;
  }
}


/* =========================================================
   19. TOUCH VIEWPORT + FOOTER END-OF-PAGE FIX
   Prevents iOS/iPadOS browser rubber-band scrolling from exposing
   a large white area below the footer and keeps the footer stable
   while mobile browser chrome expands/collapses.
========================================================= */
@media (hover:none) and (pointer:coarse){
  html,
  body{
    overscroll-behavior-y:none;
  }

  body{
    min-height:100vh;
    min-height:100svh;
  }

  .site-footer{
    margin-bottom:0;
    padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));
  }

  .footer-bottom{
    margin-bottom:0;
    padding-bottom:0;
  }
}