/* Phone-first invitation composition, art-directed for the actual photograph.
   Desktop remains governed by platinum.css and banquet.css. */
@media (max-width:760px){
  html{scroll-padding-top:20px}
  .shell{width:calc(100% - 36px)}
  .site-header{padding:12px 18px 14px;gap:12px}
  .brand{font-size:19px;gap:9px;letter-spacing:.1em;line-height:1.45}
  .brand .knot-icon{width:30px;height:30px}
  .brand small{display:none}
  .site-header>p{font-size:10px;line-height:1.85;letter-spacing:.02em}
  .site-header>p time span{display:inline-block}

  /* Keep the invitation label and cloud in separate left/right areas above the
     portrait so the ornament never runs through the lettering on narrow screens. */
  .hero{display:block;padding-top:56px;margin-top:0;--photo-offset:56px}
  .hero-photo{margin:0;padding:0;aspect-ratio:auto}
  .hero-photo img{width:100%;height:auto;aspect-ratio:1.025;object-fit:cover;object-position:52% center}
  .hero-photo:before{inset:10px -7px 39px 7px}
  .hero-photo figcaption{position:static;text-align:right;font-size:11px;line-height:1.9;letter-spacing:.055em;margin-top:12px}
  .hero-medallion{width:112px;height:112px;left:-18px;bottom:14px}
  .photo-seal{right:-5px;bottom:54px;font-size:25px;padding:8px 10px;outline-offset:3px}
  .hero-copy{position:absolute;inset:var(--photo-offset) 0 auto;aspect-ratio:1.025;display:block;padding:0;z-index:2;pointer-events:none}
  .hero-copy:before{content:none;display:none}
  .hero .overline{position:absolute;left:0;top:calc(11px - var(--photo-offset));margin:0;font-size:11px;line-height:1.8;letter-spacing:.18em}
  .hero h1{position:absolute;top:19px;right:20px;margin:0;min-height:0;height:auto;font-size:clamp(16px,5vw,21px);line-height:1.65;letter-spacing:.09em;writing-mode:vertical-rl;z-index:1}
  .hero-names{position:absolute;left:18px;top:42%;display:flex;writing-mode:horizontal-tb;align-items:flex-start;justify-content:flex-start;min-height:0;height:auto;gap:5px;margin:0;font-size:clamp(14px,4.05vw,17px);line-height:1.1;letter-spacing:.1em;color:var(--ink);text-shadow:none}
  .hero-names>span{writing-mode:vertical-rl}
  .hero-names>i{margin-top:24px;line-height:1}
  .hero-names i{font-size:10px;color:var(--ink)}
  .hero-date{display:none}
  .hero-cloud{width:165px;height:50px;left:auto;right:0;top:0;z-index:1;opacity:.48}
  .hero-bottom{padding:15px 0 17px;margin-top:6px;gap:10px;font-size:11px;line-height:1.8;letter-spacing:0}
  .hero-bottom a{min-height:44px;gap:10px}
  .hero-bottom b{font-size:24px}
  .welcome-done .hero-copy{animation:hero-copy-reveal .35s ease-out .2s both}

  /* One persistent thumb-reachable navigation is enough on a phone. */
  .chapter-nav{display:none}
  .bottom-nav{width:420px;max-width:calc(100% - 20px);padding:5px;bottom:calc(8px + env(safe-area-inset-bottom))}
  .bottom-nav a{min-width:0;min-height:54px;padding:5px 0;gap:4px;font-size:11px;line-height:1.5;letter-spacing:.02em}
  .bottom-nav .nav-symbol{width:24px;height:24px}

  /* Comfortable reading and face-safe photographs below the opening. */
  .greeting{padding:44px 0 58px;grid-template-columns:22px minmax(0,1fr);gap:15px}
  .greeting h2{font-size:clamp(23px,6.3vw,29px);line-height:1.8;letter-spacing:.04em}
  .greeting-copy>p{font-size:14px;line-height:2.25;margin:20px 0}
  .greeting-photo{grid-column:1/-1;aspect-ratio:3/4;width:calc(100% - 10px);max-width:420px;margin-top:22px;justify-self:center}
  .greeting-photo img{object-position:center 23%}
  .signature{font-size:24px;letter-spacing:.06em}
  .section{padding-block:58px}
  .section-heading h2{font-size:27px;letter-spacing:.06em}
  .section-heading>p:last-child:not(.chapter){font-size:13px;line-height:2.1}
  .seat-panel{padding:24px 18px;gap:24px}
  .search-column label,.seat-hint p,.map-note{font-size:13px}
  .search-box input{font-size:16px;min-height:44px}
  #clear{min-width:44px;min-height:44px}
  .seat-hint{gap:10px}
  .floorplan{padding:22px 14px}
  .album{padding-block:52px 65px}
  .album-inner{gap:30px}
  .album-copy{padding:27px 22px}
  .album-copy h2{font-size:30px}
  .album-copy>p:not(.chapter){font-size:14px;line-height:2.3}
  .album-copy small{font-size:12px;line-height:2}
  .album-photo{aspect-ratio:2/3}
  .album-photo img{object-position:center}
  .album-photo figcaption{font-size:11px;letter-spacing:.03em}
  .profiles{gap:26px}
  .profiles h3{font-size:26px;letter-spacing:.03em}
  .profile-details,.profile-row dd{font-size:13px}
  .profile-row dt{font-size:12px}
  .menu-grid{width:calc(100% - 28px)}
  .menu-title{margin-bottom:28px}
  .menu-title h2{font-size:28px}
  .menu-title>p:last-of-type{font-size:13px}
  .menu-paper{padding:36px 18px 42px}
  .course{padding:25px 0 28px}
  .course h3{font-size:12px}
  .course .dish-name{font-size:16px;letter-spacing:.025em;line-height:1.95}
  .course-comment .speech-bubble{min-width:0}
  .drinks-paper{padding:32px 22px 36px}
  .drink-list h3{font-size:15px}
  .drink-list p{font-size:14px;line-height:2}
  .drink-group h3 small{font-size:11px;margin-left:8px}
  footer{padding-bottom:calc(130px + env(safe-area-inset-bottom))}
  footer>a{font-size:12px;min-height:44px;padding:10px}
}
@media(max-width:360px){
  .site-header{padding-inline:14px;gap:8px}
  .brand{font-size:18px;gap:7px}
  .brand .knot-icon{width:27px;height:27px}
  .site-header>p{font-size:9px}
  .shell{width:calc(100% - 32px)}
  .hero .overline{font-size:10px;letter-spacing:.12em}
  .hero h1{right:20px}
  .hero-names{left:14px;gap:5px}
  .hero-cloud{width:145px}
  .hero-bottom{font-size:10px}
  .hero-photo figcaption{font-size:10px}
  .greeting{gap:11px;grid-template-columns:18px minmax(0,1fr)}
  .greeting h2{font-size:23px}
  .greeting-copy>p{font-size:13px}
  .seat-panel{padding-inline:14px}
  .album-copy{padding-inline:18px}
  .album-copy>p:not(.chapter){font-size:13px}
  .profiles{gap:22px}
  .profiles h3{font-size:24px}
  .menu-paper{padding-inline:14px}
  .course .dish-name{font-size:15px}
  .drinks-paper{padding-inline:18px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .welcome-done .hero-copy{animation:none;opacity:1}
}