/* A shorter page, with enough leading for the display font's ascenders/descenders. */
.line-mask{overflow:visible;padding:0;margin:0}
.statement,.day-statement{line-height:1.1}
.hero-names{line-height:1.03;font-size:clamp(120px,18vw,300px);gap:1.8vw}
.hero-topline{gap:20px;align-items:flex-start}
.greeting{max-width:65%;text-wrap:balance}
.marquee{padding:.12em 0}
.marquee-track span{line-height:1.2;font-size:clamp(100px,15vw,230px)}
.chapter-heading,.story .chapter-heading{padding:64px 0 24px}
.chapter-meta{margin-bottom:12px}
.story-layout{padding:0 0 80px}
.story-copy{padding-top:36px}
.story-copy .statement{font-size:clamp(52px,6vw,96px)}
.story-aside{font-size:36px;padding-top:24px}
.story-detail{margin-top:16px;grid-column:6/8}
.story-primary{grid-column:1/6}
.story-primary .editorial-mask{aspect-ratio:4/5}
.story-photo figcaption:empty,.day-photo figcaption:empty,.shared-photo figcaption:empty,.path-photo figcaption:empty{display:none}
.day{padding:90px 0 70px}
.section-meta{margin-bottom:44px}
.section-meta a{text-decoration:none}
.day-details{grid-column:8/13}
.day-statement{margin:24px 0;font-size:clamp(34px,3.4vw,54px)}
.day-date{font-size:clamp(80px,10vw,160px)}
.date-digits{overflow:visible;padding-bottom:.14em}
.favorites{padding:65px 0 35px}
.favorites-heading{margin:0 var(--gutter) 32px}
.favorites-heading .statement{font-size:64px;margin-top:12px}
.gallery-rail{columns:auto;display:flex;align-items:center;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);padding:0 var(--gutter) 14px;overscroll-behavior-x:contain;scrollbar-width:none}
.gallery-rail::-webkit-scrollbar{display:none}
.gallery-item{flex:0 0 28vw;width:28vw;margin:0;scroll-snap-align:center}
.gallery-photo{height:440px}
.gallery-photo img{height:100%;object-fit:cover}
.gallery-controls{display:flex;justify-content:space-between;align-items:center;margin:12px var(--gutter) 0;border-top:1px solid #30261f40;font:10px var(--mono)}
.gallery-controls button{min-width:72px}
.gallery-controls button:last-child{text-align:right}
.site-footer{padding:22px 0}
.response{margin-top:28px}
.response-button{background:var(--brown);border:1px solid var(--brown);color:var(--bark);padding:17px 24px;min-height:52px;font-size:13px;line-height:1.5;text-align:center;transition:background .2s}
.response-button:hover{background:#4b3d30}
.response-button:disabled{cursor:default;opacity:.72}
.response-help,.response-status{max-width:34ch;font-size:11px;line-height:1.6;margin-top:12px}
.response-status:empty{display:none}
#personal-note{font-size:14px;line-height:1.7;margin-bottom:24px;white-space:pre-line}
#add-calendar{margin-top:8px}
.calendar-status:empty{display:none}
.chapter-index a{padding-inline:4px}
@media(min-width:701px){.gallery-item:nth-child(6){flex-basis:44vw}.no-motion .diptych{display:none!important}body.no-motion .joined-scene{min-height:650px}.story-aside{grid-column:2/5}.story-copy{grid-column:7/13}.body-copy{max-width:35ch}}
@media(max-width:700px){
  .hero{min-height:660px}.hero-names{font-size:28vw;inset:15% var(--gutter) auto;gap:0 16px;line-height:.98}.name-amp{margin-bottom:10px}.greeting{font-size:12px}.hero-topline{gap:14px}.hero-label{font-size:8px;white-space:nowrap}
  .chapter-heading,.story .chapter-heading{padding:42px 0 16px}.marquee-track span{font-size:27vw}.chapter-meta{margin-bottom:14px}
  .story-layout{padding-bottom:52px}.story-copy{padding:0 0 24px}.story-copy .statement{font-size:16vw;margin:18px 0}.story-primary{grid-column:1/6;grid-row:2}.story-primary .editorial-mask{aspect-ratio:4/5}.story-detail{grid-column:4/7;grid-row:3;margin-top:-52px}.story-aside{grid-column:1/4;grid-row:3;font-size:25px;padding:26px 0 0}
  .day{padding:52px 0 44px}.section-meta{margin-bottom:30px}.day-date{font-size:23vw;margin-bottom:24px}.day-details{grid-column:1/-1}.day-statement{font-size:10.6vw;margin:18px 0}.day-details .body-copy{max-width:32ch}.date-digits{padding-bottom:.12em}
  .favorites{padding:40px 0 24px}.favorites-heading .statement{font-size:18vw}.gallery-rail{gap:16px}.gallery-item{flex-basis:78vw;width:78vw}.gallery-photo{height:100vw;max-height:480px}.gallery-item:nth-child(6) .gallery-photo{height:60vw}
  .chapter-index{left:auto;right:16px;gap:18px}.chapter-index .index-track{display:none}.response-button{width:100%}.response-help,.response-status{max-width:100%}
  .no-motion .diptych{display:none!important}.no-motion .joined-scene{padding-top:0!important}
}
@media(max-width:360px){:root{--gutter:20px}.hero-details dd{font-size:10px}.hero-label{font-size:7px}.gate-title{font-size:20vw}}

/* Let each section say its piece once; photos carry the rest. */
.story-one{padding-top:80px}
.together{padding-top:0}
@media(max-width:700px){.story-one{padding-top:48px}.together{padding-top:28px}.chapter-index a{gap:0}.chapter-index a[aria-current] span{text-decoration:underline;text-underline-offset:5px}}

/* Motion stays inside the date's reserved geometry. */
.date-day{line-height:1;align-items:center}
.date-digits{display:block;overflow:hidden;line-height:1.06;padding:0 .06em .06em 0;margin:0;letter-spacing:-.025em}
.date-digits>span{display:block}
.date-year{margin-top:0;flex:none}
.name-paul,.name-amp{justify-self:start;width:max-content}
@media(max-width:700px){.date-digits{padding-bottom:.06em}.date-year{margin-top:0}}

/* Portrait crop keeps both faces below the desktop name line. */
@media(min-width:701px){.hero-image{object-position:50% 40%;transform-origin:50% 40%}}

/* A brief monogram and drawing rule, followed by the photo and names. */
.opening-veil{position:absolute;inset:0;z-index:3;background:var(--brown);color:var(--bark);pointer-events:none;display:grid;place-items:center}
.opening-veil[hidden]{display:none}
.opening-mark{display:grid;justify-items:center;gap:24px;animation:opening-mark-in .35s var(--reveal-ease) backwards}
.opening-monogram{font:clamp(54px,8vw,90px)/1.2 var(--serif);letter-spacing:-.03em}
.opening-monogram>span{font-size:.55em;color:var(--grass)}
.opening-rule{height:1px;width:80px;background:var(--grass);transform-origin:left;animation:opening-rule-in .8s var(--reveal-ease) both}
@keyframes opening-mark-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes opening-rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.opening-veil{display:none}}