/* The phone layout is the baseline; larger screens progressively expand it. */
.wedding-action:focus-visible{outline:3px solid #b57858;outline-offset:3px}
.wordmark{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;line-height:1}
.monogram{display:block;width:44px;height:56px;object-fit:contain;filter:invert(1)}
@media(min-width:801px){header .monogram{width:38px;height:48px;filter:none}}
/* Wedding identity: all buttons use square corners. */
button.wedding-action,button.like-button,button.dialog-close{border-radius:0}
body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}html{scroll-padding-bottom:110px}.fixed-actions{position:fixed;z-index:60;bottom:0;left:0;right:0;display:grid;grid-template-columns:1.08fr 1fr;gap:10px;padding:12px max(14px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));background:#f3f1ecf5;border-top:1px solid #d5d2ca;box-shadow:0 -4px 24px #00000008;backdrop-filter:blur(14px)}.wedding-action{min-height:50px;display:flex;align-items:center;justify-content:center;padding:12px 8px;border-radius:7px;font:500 clamp(11px,3.1vw,14px)/1.3 var(--sans);text-align:center;border:1px solid #252522;transition:background .2s,transform .2s}.wedding-action:active{transform:scale(.98)}.wedding-action.primary{background:#252522;color:#fff}.wedding-action.secondary{background:transparent;color:#252522}.action-dialog{width:calc(100% - 36px);max-width:440px;border:1px solid var(--line);border-radius:14px;padding:40px 26px 26px;background:var(--paper);color:var(--ink)}.action-dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}.action-dialog h2{font-size:46px;letter-spacing:-1px;margin:16px 0}.action-dialog>p:not(.eyebrow){font-size:16px;line-height:1.7;margin-bottom:28px}.action-dialog .wedding-action{width:100%;font-size:14px}.dialog-close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:transparent;font-size:27px;color:var(--ink)}
@media(min-width:801px){.fixed-actions{left:50%;right:auto;bottom:20px;transform:translateX(-50%);width:440px;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 5px 28px #0002}.wedding-action{font-size:14px}}
html{overflow-x:clip}body{font-size:16px}header{height:80px;padding-inline:5%;gap:12px}nav{gap:12px}nav a{display:flex;align-items:center;min-height:44px;font-size:11px}nav a:last-child{display:none}.motion-toggle{flex:none;width:44px;height:44px}.hero{height:100svh;min-height:620px}.hero-photo{height:100%;object-position:35% center;will-change:auto}.hero-top{top:108px;font-size:8px;letter-spacing:1.2px}.hero-title{left:7%;top:auto;bottom:145px;right:7%}.hero-title h1{font-size:clamp(64px,17vw,94px)}.hero-title>p:last-child{font-size:14px}.hero-note{display:none}.scroll-cue{min-height:44px;bottom:30px;left:7%;font-size:9px;gap:15px}.prologue{padding:90px 6% 35px;min-height:0}.prologue h2{font-size:clamp(43px,12vw,62px)}.prologue p:not(.eyebrow){font-size:15px}.story{width:100%;max-width:560px;min-height:0;padding:60px 7% 85px;grid-template-columns:minmax(0,1fr);gap:50px}.story.reverse .scene-media{order:0}.story.reverse .story-copy{order:1}.scene-media{min-width:0;margin-inline:12px}.story-copy{max-width:none;min-width:0;padding-inline:5px}.story-copy h2{font-size:clamp(43px,12vw,61px);overflow-wrap:break-word}.story-copy p:not(.eyebrow){font-size:16px;line-height:1.85}.number{margin-bottom:25px}.instagram-card{max-width:100%}.instagram-actions{height:65px;padding:7px 12px}.like-button{min-width:44px;min-height:44px}.polaroid{padding:10px 10px 20px}.polaroid img{aspect-ratio:4/4.4}.polaroid figcaption{font-size:19px}.interlude{padding:85px 6%}.big-quote{font-size:clamp(35px,9vw,55px)}.continuation h2{font-size:clamp(64px,18vw,92px)}.closing{height:680px}.closing blockquote{font-size:clamp(32px,9vw,48px)}footer a{display:flex;align-items:center;min-height:44px}footer{padding:20px 6%;font-size:10px;flex-wrap:wrap}footer>span:nth-child(2){display:none}
@media(min-width:801px){header{height:88px;gap:28px}nav{gap:38px}nav a{font-size:12px}nav a:last-child{display:flex}.hero{height:max(780px,100svh)}.hero-photo{height:115%;object-position:50% 37%;will-change:transform}.hero-title{top:34%;bottom:auto;left:9%;right:auto}.hero-title h1{font-size:clamp(76px,8.2vw,140px)}.hero-top{top:126px;font-size:9px;letter-spacing:2px}.hero-note{display:block}.scroll-cue{bottom:35px;left:9%;gap:25px}.prologue{min-height:550px;padding:140px 24px 60px}.prologue h2{font-size:66px}.story{max-width:1180px;min-height:780px;padding:95px 65px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(55px,9vw,125px)}.story.reverse .scene-media{order:2}.story.reverse .story-copy{order:1}.story-copy{max-width:370px}.story-copy h2{font-size:65px}.scene-media{margin:0}.number{margin-bottom:40px}.instagram-card{max-width:370px}.polaroid{padding:14px 14px 20px}.interlude{padding:140px 20px}.big-quote{font-size:61px}.closing{height:780px}.closing blockquote{font-size:52px}footer>span:nth-child(2){display:block}}
@media(hover:hover) and (pointer:fine){.polaroid:hover{transform:rotate(0)}}
@media(max-width:800px){.wedding-action{font-size:clamp(12px,3.2vw,14px)}.hero-title{bottom:205px}.scroll-cue{bottom:calc(100px + env(safe-area-inset-bottom,0px))}.action-dialog{max-height:calc(100svh - 40px);overflow-y:auto}}
@media(hover:none){.polaroid:hover img{filter:grayscale(1)}.tilt-left:hover{transform:rotate(-5deg)}.tilt-right:hover{transform:rotate(5deg)}}
/* Desktop navigation stays visible; mobile actions remain at the bottom. */
.hero-title>p.wedding-date{font-size:clamp(22px,2.2vw,32px);line-height:1.4}
@media(min-width:801px){
  body{padding-top:0;padding-bottom:0}
  html{scroll-padding-top:84px;scroll-padding-bottom:24px}
  header{position:fixed;height:64px;padding-block:8px;z-index:60;background:transparent;color:#fff;border-bottom:1px solid transparent;box-shadow:none;gap:clamp(16px,2vw,28px);padding-inline:clamp(24px,4vw,72px);transition:background .3s,color .3s,border-color .3s}
  header::before{content:"";position:absolute;inset:0 0 -80px;background:linear-gradient(to bottom,#000b,transparent);z-index:-1;pointer-events:none;transition:opacity .3s}
  header .monogram{filter:invert(1);transform:translateY(4px) scale(2);transform-origin:top left;transition:transform .3s,filter .3s}
  header.is-scrolled{background:#f3f1ecf5;color:var(--ink);border-bottom-color:var(--line);box-shadow:0 4px 24px #00000008}
  header.is-scrolled::before{opacity:0}
  header.is-scrolled .monogram{filter:none;transform:none}
  header:not(.is-scrolled) .wedding-action.secondary{border-color:#fff;color:#fff}
  header:not(.is-scrolled) .wedding-action.primary{border-color:#fff;background:#fff;color:#252522}
  .hero-title{top:24%}
  header .wordmark{flex:none;white-space:nowrap}
  header{padding-right:10px}
  header nav{gap:clamp(16px,2.5vw,38px);white-space:nowrap}
  header .fixed-actions{position:static;transform:none;width:auto;display:flex;flex:none;gap:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
  header .wedding-action{min-height:44px;padding:12px 16px;white-space:nowrap;font-size:13px}
}