@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:wght@300;400;500&family=Kalam:wght@300;400&display=swap');

:root { --cream:#f1e8d6; --paper:#f7f0e2; --ink:#332a22; --rust:#a94f32; --olive:#66705a; --sage:#9aa489; --pink:#d0a091; --line:rgba(51,42,34,.23); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; font-weight:300; }
body::before { content:""; position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:3; top:0; left:0; right:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:24px 4vw; color:#fffaf0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:linear-gradient(180deg,rgba(31,26,21,.56),rgba(31,26,21,.25)); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-shadow:0 1px 7px rgba(0,0,0,.72); }
.monogram { font-family:"Cormorant Garamond",serif; font-size:25px; letter-spacing:.08em; text-transform:none; }
.monogram i { color:#dfaa87; font-weight:400; }
nav { display:flex; gap:32px; }
nav a, .date-stamp { padding:8px 0; border-bottom:1px solid transparent; }
nav a:hover, .date-stamp:hover { border-color:currentColor; }
.date-stamp { justify-self:end; }
.hero { min-height:100svh; position:relative; display:grid; align-items:end; overflow:hidden; background:#403d31; color:#fff9ed; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(27,23,17,.16),rgba(27,23,17,.04) 45%,rgba(27,23,17,.65)); }
.hero-photo { position:absolute; inset:0; }
.hero-photo img { object-position:center center; }
.hero-copy { position:relative; z-index:1; width:min(1200px,92vw); margin:0 auto 7vh; text-align:center; }
.eyebrow,.kicker { margin:0 0 16px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; }
h1,h2,blockquote { font-family:"Cormorant Garamond",serif; font-weight:400; }
h1 { margin:0; display:flex; align-items:center; justify-content:center; gap:.16em; font-size:clamp(78px,13.5vw,205px); line-height:.7; letter-spacing:-.055em; text-shadow:0 2px 22px rgba(0,0,0,.16); }
h1 em { font-size:.54em; color:#e4b498; font-weight:400; }
.hero-note { margin:32px 0 0; font-family:"Kalam",cursive; font-size:clamp(17px,2vw,24px); transform:rotate(-2deg); }
.scroll-cue { position:absolute; z-index:2; bottom:26px; right:4vw; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.scroll-cue span { display:inline-block; margin-left:10px; font-size:16px; }
.paper-section { background-color:var(--paper); background-image:linear-gradient(rgba(118,86,54,.025) 1px,transparent 1px); background-size:100% 5px; }
.story { min-height:820px; position:relative; padding:110px max(5vw,40px); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr); gap:6vw; align-items:center; overflow:hidden; }
.section-number { position:absolute; top:36px; left:5vw; right:5vw; display:flex; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.story-copy { grid-column:1; max-width:min(630px,54vw); align-self:start; margin-top:70px; }
.kicker { color:var(--rust); }
h2 { font-size:clamp(54px,7vw,104px); line-height:.88; letter-spacing:-.045em; margin:0; }
.story-copy .dropcap { max-width:530px; margin:44px 0 18px; font-family:"Cormorant Garamond",serif; font-size:24px; line-height:1.35; }
.dropcap::first-letter { float:left; color:var(--rust); font-family:"Cormorant Garamond",serif; font-size:84px; line-height:.7; padding:8px 8px 0 0; }
.story-copy > p:last-child { max-width:460px; line-height:1.8; font-size:14px; }
.story-link { display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding-bottom:7px; border-bottom:1px solid var(--rust); color:var(--rust); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.story-link span { font-size:16px; transition:transform .2s ease; }
.story-link:hover span { transform:translateY(3px); }
.print { margin:0; padding:10px 10px 34px; background:#f9f5ea; box-shadow:0 14px 45px rgba(64,43,25,.18); }
.print img { aspect-ratio:4/5; }
.print figcaption { padding-top:10px; text-align:center; font-family:"Kalam",cursive; font-size:13px; }
.print-a { position:absolute; z-index:2; right:5vw; top:130px; width:min(22.5vw,315px); transform:rotate(2.2deg); }
.handnote { font-family:"Kalam",cursive; color:var(--rust); line-height:1.3; }
.long-story { position:relative; display:grid; grid-template-columns:.7fr 1.3fr; gap:9vw; padding:130px max(7vw,40px) 150px; border-top:1px solid var(--line); }
.long-story-heading { align-self:start; position:sticky; top:45px; }
.long-story-heading h2 { font-size:clamp(70px,8vw,118px); }
.long-story-heading h2 i { color:var(--rust); }
.long-story-mark { margin:55px 0 0 5vw; font-family:"Kalam",cursive; color:var(--rust); font-size:18px; line-height:1.45; transform:rotate(-4deg); }
.story-reading { width:100%; max-width:740px; }
.story-excerpt p { margin:0 0 24px; font-family:"Cormorant Garamond",serif; font-size:21px; line-height:1.65; }
.story-excerpt p:first-child::first-letter { float:left; color:var(--rust); font-size:82px; line-height:.72; padding:10px 9px 0 0; }
.story-details { width:100%; padding-top:18px; }
.story-details summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; border-block:1px solid var(--line); color:var(--rust); cursor:pointer; list-style:none; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
.story-details summary::-webkit-details-marker { display:none; }
.story-details summary span { position:relative; width:24px; height:24px; flex:0 0 24px; }
.story-details summary span::before,.story-details summary span::after { content:""; position:absolute; top:11px; left:3px; width:18px; height:1px; background:currentColor; transition:transform .2s ease; }
.story-details summary span::after { transform:rotate(90deg); }
.story-details[open] summary span::after { transform:rotate(0); }
.long-story-body { max-width:740px; padding-top:42px; }
.long-story-body p { margin:0 0 28px; font-family:"Cormorant Garamond",serif; font-size:21px; line-height:1.65; }
.long-story-body .story-emphasis { margin:55px 0; padding:36px 0; border-block:1px solid var(--line); font-size:30px; line-height:1.4; }
.long-story-body .story-signoff { margin:65px 0 0; color:var(--rust); font-size:38px; font-style:italic; text-align:right; }
.life { position:relative; overflow:hidden; padding:105px 5vw 130px; color:#f6ecda; background:#59614e; }
.section-number.light { color:#e9e1d3; border-color:rgba(255,255,255,.25); }
.life-heading { display:grid; grid-template-columns:1.3fr 1fr; gap:6vw; align-items:end; margin:30px 0 65px; }
.life-heading h2 { font-size:clamp(64px,9vw,130px); }
.life-heading i { color:#d5a895; }
.life-heading p { max-width:400px; margin:0 0 10px; font-family:"Cormorant Garamond",serif; font-size:23px; line-height:1.45; }
.life-grid { display:grid; grid-template-columns:1.45fr .7fr .95fr; grid-template-rows:310px 420px; gap:24px; }
.life-grid figure { margin:0; position:relative; overflow:hidden; }
.life-grid figcaption { position:absolute; left:16px; bottom:14px; padding:7px 10px; background:rgba(45,38,31,.72); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.life-main { grid-row:1 / 3; }
.life-main img { object-position:center; }
.life-small.top { grid-column:2; grid-row:1; }
.life-wide { grid-column:2 / 4; grid-row:2; }
.life-small.bottom { grid-column:3; grid-row:1; }
.life-small.bottom img { object-position:34% center; }
.marquee { position:absolute; bottom:27px; left:-1%; width:102%; display:flex; justify-content:center; white-space:nowrap; overflow:hidden; transform:rotate(-1deg); border-block:1px solid rgba(255,255,255,.24); padding:10px; color:#d7cdbc; font-size:10px; letter-spacing:.28em; text-align:center; text-transform:uppercase; }
.interlude { min-height:0; padding:80px 8vw; display:grid; grid-template-columns:1.2fr .8fr; gap:7vw; align-items:center; background:#cf9c89; }
.interlude figure { height:auto; aspect-ratio:16/10; margin:0; padding:13px; background:#eee3d1; box-shadow:0 18px 45px rgba(69,44,31,.2); transform:rotate(-1deg); }
.interlude figure img { object-position:center; }
.interlude blockquote { margin:0; font-size:clamp(45px,5vw,77px); line-height:.98; letter-spacing:-.035em; }
.interlude .handnote { margin:35px 0 0; color:#624434; font-size:18px; transform:rotate(-3deg); }
.engagement { min-height:820px; position:relative; display:grid; place-items:center start; padding:7vw 5vw; overflow:hidden; }
.engagement-image { position:absolute; inset:0; }
.engagement-image::after { content:""; position:absolute; inset:0; background:rgba(44,34,24,.19); }
.engagement-card { position:relative; z-index:1; width:min(370px,32vw); padding:48px 32px; text-align:center; background:rgba(246,238,221,.94); box-shadow:0 22px 70px rgba(34,25,17,.3); }
.engagement-card h2 { font-size:clamp(52px,4.3vw,68px); }
.engagement-card h2 i { color:var(--rust); }
.rule { width:56px; height:1px; margin:30px auto; background:var(--rust); }
.engagement-card > p:not(.eyebrow):not(.wedding-place) { font-family:"Cormorant Garamond",serif; font-size:25px; }
.wedding-place { margin:30px 0 0; font-size:11px; line-height:2; letter-spacing:.22em; text-transform:uppercase; }
.wedding-place a { display:inline-block; min-height:44px; padding:5px 4px; font-size:18px; color:var(--rust); }
.final-photo { padding:70px 7vw 85px; overflow:hidden; }
.final-photo figure { width:56%; height:380px; margin:0 auto; padding:11px 11px 35px; background:#fdf9ef; box-shadow:0 15px 50px rgba(67,44,26,.16); transform:rotate(1deg); }
.final-photo figcaption { padding-top:9px; text-align:center; font-family:"Kalam",cursive; font-size:13px; }
footer { min-height:360px; padding:80px 5vw 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; color:#f4ead9; background:#3c322b; }
.footer-script { margin:0; font-family:"Cormorant Garamond",serif; font-size:clamp(48px,7vw,94px); font-style:italic; }
footer p:not(.footer-script), footer a { font-size:9px; letter-spacing:.22em; text-transform:uppercase; }
footer a { margin-top:30px; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:5px; }

@media (max-width:760px) {
  .site-header { grid-template-columns:1fr 1fr; padding:18px 20px; }
  nav { display:none; }
  .date-stamp { font-size:9px; }
  .hero { min-height:92svh; }
  .hero-photo img { object-position:55% center; }
  .hero-copy { margin-bottom:12vh; }
  h1 { flex-direction:column; gap:0; font-size:clamp(76px,25vw,112px); line-height:.62; }
  h1 em { line-height:.7; }
  .hero-note { margin-top:26px; }
  .scroll-cue { right:auto; left:20px; }
  .story { min-height:1010px; padding:100px 22px 55px; display:block; }
  .section-number { left:22px; right:22px; }
  .story-copy { max-width:none; margin-top:20px; }
  h2 { font-size:55px; }
  .story-copy .dropcap { font-size:21px; }
  .print-a { top:650px; right:20px; width:50vw; }
  .long-story { display:block; padding:85px 22px 95px; }
  .long-story-heading { position:static; margin-bottom:65px; }
  .long-story-heading h2 { font-size:75px; }
  .long-story-mark { margin:35px 0 0 45%; font-size:15px; }
  .story-details { max-width:none; }
  .story-excerpt p { font-size:19px; line-height:1.65; }
  .story-excerpt p:nth-child(2) { display:none; }
  .long-story-body { padding-top:0; }
  .long-story-body p { font-size:19px; line-height:1.65; }
  .long-story-body .story-emphasis { margin:42px 0; font-size:25px; }
  .long-story-body .story-signoff { font-size:32px; }
  .life { padding:95px 22px 100px; }
  .life-heading { display:block; margin-bottom:40px; }
  .life-heading h2 { font-size:65px; }
  .life-heading p { margin-top:25px; font-size:20px; }
  .life-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:380px 240px 220px; gap:12px; }
  .life-main { grid-column:1 / 3; grid-row:1; }
  .life-small.top { grid-column:1; grid-row:2; }
  .life-small.bottom { grid-column:2; grid-row:2; }
  .life-wide { grid-column:1 / 3; grid-row:3; }
  .life-grid figcaption { left:8px; bottom:8px; font-size:7px; }
  .interlude { min-height:0; padding:55px 22px; display:flex; flex-direction:column; gap:40px; }
  .interlude figure { width:100%; height:auto; aspect-ratio:16/10; }
  .interlude blockquote { font-size:47px; }
  .engagement { min-height:0; display:flex; flex-direction:column; padding:0 0 40px; background:var(--cream); overflow:visible; }
  .engagement-image { position:relative; width:100%; height:440px; }
  .engagement-image img { object-position:right center; }
  .engagement-card { width:calc(100% - 40px); margin:-28px auto 0; padding:46px 24px; }
  .engagement-card h2 { font-size:57px; }
  .final-photo { padding:60px 22px 70px; }
  .final-photo figure { width:93%; height:300px; }
  footer { min-height:300px; padding-inline:22px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }