/* Approved artwork, readable mobile layout. */
@media (max-width:700px) {
 :root { --gutter:clamp(20px,6.15vw,28px); }
 .site-head { top:20px; align-items:flex-start; }
 .brand { padding:10px 12px; }
 .brand img { width:120px; }
 .site-head nav { flex-direction:column; gap:4px; }
 .site-head nav a { font-size:13px; min-height:44px; padding:0 4px; }
 .site-head button { font-size:11px; min-height:44px; padding:8px 10px; }
 .eyebrow { font-size:10px; letter-spacing:.08em; }
 h1 { font-size:clamp(35px,9.5vw,54px); line-height:1.08; }
 .lead { font-size:16px; line-height:1.65; }
 .event-facts { margin-top:28px; gap:18px 16px; }
 .event-facts dt { font-size:11px; }
 .event-facts dd { font-size:14px; line-height:1.5; }
 .event-facts small { font-size:12px; }
 .facts-caption dd { font-size:12px; }
 .opening-copy .event-facts::before { inset:-12px -10px -14px; }
 .invitation-scene { width:min(340px,calc(100vw - 56px)); height:500px; }
 .invitation-paper { padding:24px 22px 20px; }
 .invitation-paper > * { flex-shrink:0; }
 .letter-logo { width:140px; }
 .letter-rule { margin:15px 0 12px; }
 .letter-label { font-size:11px; letter-spacing:.12em; }
 .invitation-paper h2 { font-size:clamp(32px,8.8vw,37px); line-height:1.08; margin-top:12px; }
 .letter-format { font-size:12px; line-height:1.5; margin-top:14px; }
 .letter-date { font-size:14px; line-height:1.5; margin-top:16px; }
 .letter-date span { font-size:12px; }
 .letter-cta { min-height:48px; font-size:14px; padding:12px 14px; margin-top:20px; }
 .letter-note { font-size:11px; line-height:1.5; margin-top:12px; color:#58664b; }
 .coffee-copy h2,.details-intro h2,.meeting-copy h2 { font-size:clamp(40px,11.2vw,54px); }
 .coffee-copy>p.small-copy,.coffee-photo figcaption,.photo-caption { font-size:12px; }
 .coffee-photo { min-height:0; height:clamp(420px,130vw,580px); }
 .detail-list summary span,.details-date dt { font-size:12px; }
 .details-date dd { font-size:15px; }
 .footer { gap:20px; }
 .footer p,.footer a { font-size:12px; }
 .footer a { min-height:44px; }
}
@media (max-width:1100px),(max-height:600px) {
 .invitation-scene.is-following { width:min(340px,calc(100vw - 56px)); height:min(500px,calc(100svh - 96px)); }
 .invitation-scene.is-following .invitation-paper { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a88c4b #f7f2e7; }
 .invitation-scene.is-following .invitation-paper>* { flex-shrink:0; }
 .invitation-follow-toggle { font-size:13px; min-height:44px; }
}
@media (min-width:701px) and (max-width:1100px) {
 .invitation-scene { width:340px; height:500px; }
 .invitation-paper { padding:24px 22px 20px; }
 .letter-label,.letter-note { font-size:11px; }
 .letter-format,.letter-date span { font-size:12px; }
 .letter-date,.letter-cta { font-size:14px; }
 .letter-cta { min-height:48px; }
 .letter-note { color:#58664b; }
}
@media (max-width:700px) and (max-height:700px) {
 .invitation-scene:not(.is-following) { top:calc(100% - 300px); }
}
@media (max-height:600px) and (min-width:701px) {
 .invitation-scene { width:340px; }
 .invitation-paper h2 { font-size:34px; }
 .letter-label,.letter-note { font-size:11px; }
 .letter-note { color:#58664b; }
 .letter-format,.letter-date span { font-size:12px; }
 .letter-date,.letter-cta { font-size:14px; }
 .letter-cta { min-height:48px; }
}
@media (max-height:500px) and (min-width:500px) {
 .invitation-scene.is-following { width:min(620px,calc(100vw - 40px)); }
 .invitation-scene.is-following .invitation-paper {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6px 20px; align-items:center; align-content:center; padding:16px 20px;
 }
 .is-following .letter-logo { grid-column:1; grid-row:1; width:120px; justify-self:center; }
 .is-following .letter-rule { display:none; }
 .is-following .letter-label { grid-column:2; grid-row:1; font-size:11px; }
 .is-following .invitation-paper h2 { grid-column:1; grid-row:2/5; font-size:clamp(28px,3.8vw,32px); line-height:1.08; margin:0; }
 .is-following .letter-format { grid-column:2; grid-row:2; margin:0; font-size:11px; line-height:1.4; }
 .is-following .letter-date { grid-column:2; grid-row:3; margin:0; font-size:13px; line-height:1.5; }
 .is-following .letter-date span { font-size:11px; }
 .is-following .letter-cta { grid-column:2; grid-row:4; margin:0; font-size:13px; min-height:48px; }
 .is-following .letter-note { grid-column:1/-1; grid-row:5; font-size:11px; line-height:1.5; margin:4px 0 0; color:#58664b; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
}