/* Phone layout for the same story and link. Loaded after the existing styles.
   Desktop composition, original SVGs, videos and animation clocks are retained. */
@media (max-width:700px) {
  body { -webkit-text-size-adjust:100%; }
  header { margin-left:20px; margin-right:20px; padding-top:env(safe-area-inset-top,0px); min-height:76px; height:auto; }
  .header-controls { gap:8px; min-width:0; }
  .motion-toggle { min-height:44px; padding:10px 4px; line-height:1.35; }
  .language { min-width:58px; min-height:44px; padding:10px 12px; }
  .language span { padding-left:7px; }
  .monogram { flex-shrink:0; font-size:25px; letter-spacing:2px; }
  .monogram span { margin:0 4px; }

  .hero { grid-template-columns:minmax(0,1fr); padding:38px 20px 25px; min-height:0; }
  .hero-copy { width:100%; min-width:0; padding-bottom:0; }
  .hero h1 { font-size:clamp(48px,14vw,65px); line-height:1.08; letter-spacing:-2px; max-width:100%; }
  .hero .eyebrow { font-size:9px; margin-bottom:22px; }
  .intro { max-width:320px; font-size:14px; line-height:1.8; margin-bottom:24px; }
  .journey-link { min-height:44px; align-items:center; font-size:12px; margin-bottom:0; }
  .date-line { width:100%; max-width:290px; margin-top:20px; }
  .art { position:relative; top:auto; right:auto; width:100%; max-width:360px; height:290px; margin:8px auto 0; opacity:1; }
  .flower.marigold-flower { width:100%; height:100%; top:0; left:0; }
  .art .orbit { width:200px; height:250px; left:calc(50% - 100px); top:10px; }
  .art .orbit-two { width:230px; height:225px; left:calc(50% - 115px); top:26px; }
  .art .star-a { right:10%; top:35px; }

  .countdown-section { margin:10px 20px 0; padding:26px 0 30px; }
  .countdown-top { flex-wrap:wrap; gap:10px; }
  .countdown { gap:5px; padding-top:28px; }
  .countdown > div { min-width:0; flex:1 1 0; }
  .countdown .digits { font-size:clamp(40px,12vw,52px); letter-spacing:-1.5px; }
  .countdown .unit { font-size:8px; letter-spacing:.8px; margin-top:10px; }
  .countdown .colon { font-size:18px; padding-top:8px; flex:0 0 auto; }
  .live { font-size:7px; letter-spacing:.7px; }

  .story-timeline { padding-left:20px; padding-right:20px; }
  .story-timeline > h2, .journey-heading h2 { font-size:clamp(32px,8.5vw,39px); line-height:1.16; }
  .story-chapter { min-width:0; padding-left:52px; }
  .story-chapter h3 { font-size:23px; }
  .story-chapter p { font-size:14px; line-height:1.8; }
  .marigold-memory { margin-left:20px; margin-right:20px; }
  .memory-copy { padding:28px 23px 32px; min-width:0; }
  .memory-copy h2 { font-size:clamp(31px,8.5vw,38px); }
  .memory-copy > p:not(.eyebrow) { font-size:14px; line-height:1.8; }
  .marigold-field { max-width:100%; }

  .scene-still.scene-still-flowers { width:calc(100% - 40px); max-width:680px; margin-left:auto; margin-right:auto; }
  .scene-still.scene-still-embrace, .scene-still.scene-still-quiet { width:100%; max-width:680px; }
  .scene-still .scene-video, .scene-still img { width:100%; height:auto; aspect-ratio:16/9; }
  .scene-still figcaption { font-size:14px; line-height:1.65; }

  .journey-section { padding-left:20px; padding-right:20px; }
  .journey-layout { min-width:0; grid-template-columns:minmax(0,1fr); }
  .map-panel, .travel-card.keepsake-ticket { min-width:0; }
  .route-map { width:100%; height:auto; max-height:420px; }
  .map-route-heading { font-size:7px; letter-spacing:.8px; gap:7px; padding-left:10px; padding-right:10px; }
  .map-footer { padding:12px 14px; flex-wrap:wrap; gap:8px 12px; }
  .flight-status { font-size:11px; line-height:1.55; min-height:32px; max-width:none; }
  .flight-controls { margin:0; gap:12px; align-self:auto; }
  .flight-controls button { min-height:44px; padding:9px 5px; font-size:11px; }
  .map-caption { flex-wrap:wrap; gap:5px 12px; }
  .map-caption span:last-child { white-space:normal; }
  .travel-card.keepsake-ticket { gap:0 14px; padding-left:18px; padding-right:18px; }
  .keepsake-ticket .ticket-city h3 { font-size:clamp(20px,5.6vw,26px); letter-spacing:-.6px; }
  .keepsake-ticket .ticket-connection { margin-left:-18px; margin-right:-18px; }
  .keepsake-ticket .ticket-bottom { margin-left:-18px; margin-right:-18px; }
  .keepsake-ticket .ticket-top { font-size:7px; letter-spacing:.8px; }
  .ticket-date-badge { max-width:100%; padding-left:8px; padding-right:8px; }
  .ticket-date-badge > span { font-size:7px; letter-spacing:.8px; }
  .flight-strip { gap:5px; }
  .flight-phase { min-width:0; font-size:6.5px; letter-spacing:.3px; gap:4px; }
  .phase-number { flex-shrink:0; }
  .embrace-link { min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:18px; }

  .embrace-section { padding-left:20px; padding-right:20px; }
  .embrace-section h2 { font-size:clamp(32px,9vw,39px); }
  .embrace-replay { min-height:44px; padding:10px 5px; }
  .heartbeat-moment { padding-left:0; padding-right:0; }
  .heartbeat-moment blockquote { font-size:clamp(25px,7.2vw,30px); overflow-wrap:break-word; }
  .heartbeat-answer { font-size:14px; }
  .letter-section { width:calc(100% - 40px); max-width:680px; margin:0 auto; }
  .letter-content h2 { font-size:clamp(33px,9.5vw,43px); }
  .letter-button { min-height:48px; width:100%; max-width:330px; justify-content:space-between; gap:18px; font-size:13px; text-align:left; }
  .letter { padding:24px 22px; font-size:16px; line-height:1.8; transform:none; box-shadow:4px 5px 0 #492632; }
  .closing p { font-size:clamp(28px,8vw,35px); }
  footer { margin-left:20px; margin-right:20px; flex-wrap:wrap; padding-bottom:calc(118px + env(safe-area-inset-bottom,0px)); row-gap:14px; }

  .music-player { left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); width:auto; max-width:none; padding:7px 12px 10px; grid-template-columns:minmax(0,1fr) 60px; gap:0 12px; }
  .music-player button { min-width:0; min-height:44px; font-size:12px; gap:9px; }
  .music-player input { width:60px; min-width:60px; min-height:44px; height:44px; margin:0; }
  .music-detail { font-size:6px; line-height:1.5; letter-spacing:.6px; }
}
@media (max-width:360px) {
  .monogram { font-size:23px; }
  .header-controls { gap:4px; }
  .motion-toggle { max-width:112px; font-size:8px; }
  .language { min-width:54px; }
  .art { height:260px; }
  .quote-clouds { width:calc(100% - 40px); grid-template-columns:66px minmax(0,1fr); column-gap:12px; }
  .quote-phone { transform:scale(.88) translateX(-4px); transform-origin:left center; }
  .phone-revealed .quote-phone { transform:scale(.88) translateX(-4px); }
  .quote-bubble { padding:14px 14px 12px; }
  .quote-bubble p { font-size:14px; }
  .ticket-people { font-size:7px; letter-spacing:1.1px; }
}