/*
 * VISUAL CONFIGURATION
 * Change these CSS custom properties to restyle the site without editing app.js.
 * `type-min/fluid/max` control responsive base size. type-17, type-48, etc. are
 * relative steps named for their 16px-base equivalent, NOT fixed pixel sizes.
 * Fonts are local; replace the URLs below to use different licensed font files.
 * Photo/decorative image paths live in wedding-config.js; crop tokens live here.
 * Advanced layout/media-query breakpoints remain editable in styles.css.
 */
@font-face {
  font-family:MeadowScript;
  src:url('assets/fonts/script.woff') format('woff');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:MeadowSerif;
  src:url('assets/fonts/serif.woff') format('woff');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:MeadowSerif;
  src:url('assets/fonts/italic.woff') format('woff');
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:MeadowSans;
  src:url('assets/fonts/sans.woff') format('woff');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:MeadowSans;
  src:url('assets/fonts/sans-500.woff') format('woff');
  font-weight:500;
  font-display:swap;
}

:root {
  --paper: #dedbd0;
  --cream: #f2efdf;
  --olive: #59653d;
  --ink: rgb(70,79,37);
  --brown: #352713;
  --serif: MeadowSerif,Georgia,serif;
  --script: MeadowScript,'Brush Script MT',cursive;
  --sans: MeadowSans,Arial,sans-serif;
  --type-min: 1rem;
  --type-fluid: calc(.875rem + .25vw);
  --type-max: 1.375rem;
  --body-weight: 400;
  --label-weight: 500;
  --body-style: normal;
  --heading-style: italic;
  --font-kerning: normal;
  --body-leading: 1.85;
  --copy-leading: 1.9;
  --story-leading: 1.95;
  --page-width: 72.5rem;
  --reading-width: 36.875rem;
  --story-wide-width: 81.25rem;
  --button-height: 60px;
  --button-width: 202px;
  --header-height: 75px;
  --header-compact-height: 63px;
  --header-mobile-height: 66px;
  --hero-min-height: 760px;
  --hero-max-height: 1000px;
  --hero-mobile-min-height: 690px;
  --album-width: 31.875rem;
  --gallery-width: 1040px;
  --gallery-height: 690px;
  --date-card-width: 24rem;
  --date-card-min-height: 34rem;
  --date-card-padding: 5rem 2.625rem 5rem;
  --envelope-width: 36.875rem;
  --envelope-height: 44rem;
  --envelope-mobile-height: 40rem;
  --welcome-padding: 114px 28px 99px;
  --story-padding: 110px 48px;
  --photographs-padding: 78px 35px 65px;
  --details-padding: 95px 40px 105px;
  --rsvp-padding: 64px 20px 25px;
  --notes-padding: 86px 40px 96px;
  --footer-padding: 80px 28px 52px;
  --welcome-mobile-padding: 78px 30px 76px;
  --story-mobile-padding: 72px 28px 78px;
  --photographs-mobile-padding: 58px 16px 50px;
  --details-mobile-padding: 75px 30px 80px;
  --rsvp-mobile-padding: 55px 12px 25px;
  --notes-mobile-padding: 65px 30px 75px;
  --footer-mobile-padding: 60px 27px 42px;
  --hero-overlay: linear-gradient(180deg,#203f2b22 0%,#25352508 30%,#192b2433 58%,#1d2a1e3d 100%);
  --story-overlay: linear-gradient(#1e2a2155,#24302266);
  --gallery-overlay: linear-gradient(#3027113d,#30271166);
  --rsvp-overlay: linear-gradient(#3947252b,#29391f2b);
  --footer-overlay: linear-gradient(#25342255,#22302088);
  --hero-color: #687659;
  --celebration-overlay: #25342755;
  --header-background: #e5e1d5f5;
  --monogram-ink: #647044;
  --album-monogram-ink: #677344;
  --album-caption-ink: #536039;
  --story-copy-color: #f0edde;
  --rsvp-title-color: #354322;
  --selection-background: #67734d;
  --photo-dialog-background: #17251af5;
  --photo-dialog-backdrop: #17251a;
  --rsvp-dialog-backdrop: #1a251bbf;
  --celebration-filter: grayscale(.5);
  --hero-position: center 52%;
  --hero-video-position: center;
  --reveal-duration: .56s;
  --reveal-distance: 14px;
  --album-photo-left: 32%;
  --album-photo-top: 23%;
  --album-photo-width: 43%;
  --album-photo-height: 52%;
  --oval-photo-left: 16.6%;
  --oval-photo-top: 19%;
  --oval-photo-width: 68%;
  --oval-photo-height: 66%;
  --landscape-photo-left: 6%;
  --landscape-photo-top: 9%;
  --landscape-photo-width: 88%;
  --landscape-photo-height: 80.5%;
  --portrait-photo-left: 15%;
  --portrait-photo-top: 16%;
  --portrait-photo-width: 70%;
  --portrait-photo-height: 73%;
  --heading-size: clamp(2.625rem,calc(1.6rem + 2.9vw),3.875rem);
  --script-heading-size: clamp(4.125rem,calc(2.4rem + 4.6vw),6.25rem);
  --hero-name-size: clamp(5.75rem,calc(3rem + 8vw),11.375rem);
  --translated-heading-size: clamp(3rem,calc(1.8rem + 3.4vw),4.875rem);
  --detail-heading-size: clamp(1.9375rem,calc(1.4rem + .6vw),2.25rem);
  --hero-name-mobile-size: clamp(4rem,calc(1rem + 16vw),7.5rem);
  --type-small: .75rem;
  --type-separator: .7em;
  --type-control: .8125rem;
  --type-caption: .875rem;
  --type-17: 1.0625rem;
  --type-18: 1.125rem;
  --type-20: 1.25rem;
  --type-22: 1.375rem;
  --type-25: 1.5625rem;
  --type-26: 1.625rem;
  --type-27: 1.6875rem;
  --type-28: 1.75rem;
  --type-29: 1.8125rem;
  --type-30: 1.875rem;
  --type-31: 1.9375rem;
  --type-copy: 1em;
  --type-16: 1rem;
  --type-35: 2.1875rem;
  --type-41: 1.7rem;
  --type-43: 2.6875rem;
  --type-44: 2.75rem;
  --type-46: 2.875rem;
  --type-47: 2.9375rem;
  --type-49: 3.0625rem;
  --type-51: 3.1875rem;
  --type-52: 3.25rem;
  --type-55: 3.4375rem;
  --type-58: 3.625rem;
  --type-48: 3rem;
  --type-70: 4.375rem;
  --type-73: 4.5625rem;
  --shade-f2efdfa8: color-mix(in srgb,var(--cream) 66%,transparent);
  --shade-59653d33: color-mix(in srgb,var(--olive) 20%,transparent);
  --shade-25330b55: #25330b55;
  --shade-18261e22: #18261e22;
  --shade-f2efdf66: color-mix(in srgb,var(--cream) 40%,transparent);
  --shade-59653d22: color-mix(in srgb,var(--olive) 13%,transparent);
  --shade-17251a44: #17251a44;
  --shade-17251a22: #17251a22;
  --shade-f2efdf44: color-mix(in srgb,var(--cream) 27%,transparent);
  --shade-f2efdf22: color-mix(in srgb,var(--cream) 13%,transparent);
  --shade-303b2866: #303b2866;
  --shade-f2efdfdc: color-mix(in srgb,var(--cream) 86%,transparent);
  --shade-526040: #526040;
  --shade-9b9d7c: #9b9d7c;
  --shade-d9bdb3: #d9bdb3;
  --shade-e0d7c4: #e0d7c4;
  --shade-0002: #0002;
  --shade-0004: #0004;
  --shade-fff9: #fff9;
  --shade-0007: #0007;
  --shade-0003: #0003;
  --shade-fff: #fff;
}

:root {
  /* Reserve room above the bow when real addresses and action links are added. */
  --date-card-bottom-space: clamp(7rem,calc(6rem + 2vw),10rem);
  --event-grid-width: 56rem;
  --event-grid-min: 22rem;
  --event-grid-gap: clamp(4rem,6vw,6rem);
  --event-heading-gap: clamp(2.5rem,5vw,4rem);
  --event-section-padding: clamp(4rem,6vw,6rem) 1.25rem 6rem;
  --event-city-size: clamp(2.25rem,calc(1.75rem + 1vw),3.1875rem);
}