/* Every room reaches the device edges. Text and physical objects have their
   own reading budgets; they never constrain the scene or its fixed bridge. */
:root {
  --light-world-width: 100%;
  --light-gutter: clamp(1.25rem, 4vw, 3rem);
}
.light-world,
.experience,
.phone-world,
.after-memories,
.phone-world[data-phone-bridge="true"][data-bridge-fixed="true"] .pw-table-scene {
  width: 100%;
  max-width: none;
}
.experience,
.pw-table-scene,
.after-memories { container-type: inline-size; }
.after-memories { container-name: light-chapters; }
.phone-world:not([data-phone-mode="cinematic"]) .pw-table-scene { max-height: none; }
.pw-home-top .pw-eyebrow { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.am-evening-room,
.am-keep-camera { container-type: inline-size; }

/* Keep authored text as text: full names and translated messages can wrap. */
.final-copy > p,
.final-copy em { white-space: normal; overflow: visible; text-overflow: clip; }
.final-copy > p > [data-to] {
  display: inline;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.final-copy > p > br { display: initial; }
.final-copy { max-width: 36rem; margin-inline: auto; }
.memory-book-dedication {
  top: auto;
  bottom: calc(50% + var(--memory-height)/2 + 10px);
  max-height: calc((100% - var(--memory-height))/2 - 14px);
  overflow-y: auto;
}
.memory-book-dedication p { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
.memory-page-heading h2 { font-size: clamp(1rem, 6cqw, 2rem); }
.memory-photo figcaption { font-size: clamp(.875rem, 4.7cqw, 1.125rem); }
.am-ending-signature { display: block; overflow-wrap: anywhere; }
.am-ending-signature svg { display: inline-block; vertical-align: middle; }
.am-heading,
.am-letter-desk,
.am-promise-stage,
.am-plan-entry,
.am-ending-note { min-width: 0; }
.am-fold-address,
.am-promise-cover-copy,
.am-plan-words,
.am-ending-note { overflow-wrap: anywhere; }
.am-fold-address { font-size: clamp(1.5rem, 6cqw, 2.5rem); }
.am-fold-address em { font-size: clamp(1rem, 3cqw, 1.3rem); }
.am-promise-cover-copy { font-size: clamp(1.5rem, 5.8cqw, 2rem); }
.am-heading h2 { font-size: clamp(2rem, 8cqw, 3.5rem); }
.am-evening-room .am-heading h2 {
  font-size: clamp(1.5rem, 7.4cqw, 2.75rem);
  max-width: 48%;
}
.invitation h1 { font-size: clamp(1.9rem, 8cqw, 3.5rem); }
.invitation h1[data-light-long] { font-size: clamp(1.5rem, 5.5cqw, 2.5rem); }
.invitation { max-width: 40rem; margin-inline: auto; }
.am-kept-photo .am-photo-caption { font-size: clamp(.7rem, 3.2cqw, 1rem); }
.kb-lid-lettering { font-size: clamp(1rem, 4.8cqw, 1.6rem); }

/* Art fills the scene proportionally; the live paper remains a reading object. */
.am-writing-backdrop { display: block; background: none; }
.am-writing-backdrop > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.am-heading { max-width: 44rem; margin-inline: auto; }
.am-enhanced .am-keep-camera { width: min(100%, 36rem); max-width: none; }
.am-letter-desk { width: 100%; max-width: 38rem; margin-inline: auto; }
.am-letter-sheet { overflow-wrap: anywhere; }
.am-letter-sheet p { line-height: 1.85; }
.lw-ready .am-letter-sheet .am-salutation { padding-right: 2rem; font-size: clamp(1.5rem, 8cqw, 2rem); }
.am-letter-fold[open] ~ .am-letter-flower { bottom: -8rem; }
.am-letter-fold { container-type: inline-size; }
.lw-ready .am-letter-fold:not([open]) { max-width: clamp(19.375rem, 40cqw, 27.5rem); }
/* Authored names determine folded-paper height. The seal and instruction stay
   below the address instead of occupying fixed coordinates through its text. */
.am-letter-fold:not([open]) .am-folded-paper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  height: auto;
  min-height: var(--lw-fold-height, 240px);
  padding: 1.5rem 1.25rem;
}
.am-letter-fold:not([open]) .am-fold-address {
  position: relative;
  inset: auto;
  font-size: clamp(1.5rem, 8cqw, 2rem);
  line-height: 1.2;
}
.am-letter-fold:not([open]) .am-fold-address em { font-size: clamp(1rem, 5.2cqw, 1.125rem); margin-top: .4rem; }
.am-letter-fold:not([open]) .am-paper-seal { position: relative; inset: auto; align-self: center; flex-shrink: 0; transform: none; margin: 0; }
.am-letter-fold:not([open]) .am-fold-instruction { position: relative; inset: auto; font-size: clamp(1.1rem, 6cqw, 1.3rem); }
.am-promise-stage { width: min(100%, 34rem); margin-inline: auto; padding-inline: 1.5rem; }
.am-promise-bundle { max-width: none; }
.am-plan-entry .am-plan-print > img { width: 100%; height: auto; }
.am-wish-invitation { overflow-wrap: anywhere; }
.am-planner { max-width: 36rem; margin-inline: auto; padding-inline: var(--light-gutter); }
.am-plan-list { display: block; }
.am-ending-note { padding-inline: var(--light-gutter); }
.am-ending-note > :not(.am-ending-thread) { max-width: 38rem; margin-inline: auto; }

/* Each room painting has its own aspect ratio and normalized object anchors.
   The complete art fills the device width without stretching or side panels. */
.am-enhanced .am-evening-scroll { height: auto; min-height: 0; }
.am-enhanced .am-evening-pin { position: relative; height: auto; min-height: 0; display: grid; place-items: center; }
.am-evening-distance { display: none; }
.am-evening-room { width: 100%; aspect-ratio: 2/3; transform: none; }
.am-sofa-picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.am-sofa-picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.am-evening-room > .am-heading { max-width: none; }

/* Independent edge controls retain separate touch areas on the full scene. */
[data-ea-music-control] {
  left: max(16px, env(safe-area-inset-left, 0px)) !important;
  max-width: calc(50vw - 24px) !important;
}
.journey-continue { max-width: calc(50vw - 24px); }

/* Chapters retain their stacked mobile reading order on larger screens.
   Geometry budgets in scene-layout.js still fit the book and phone to both axes. */
html:not(.light-card-preview) .static-journey { container: light-static / inline-size; }
.static-journey { max-width: none; }
html:not(.light-card-preview) .static-journey > header,
html:not(.light-card-preview) .static-journey > footer,
html:not(.light-card-preview) .static-book-page > *,
html:not(.light-card-preview) .static-personal-note > *,
html:not(.light-card-preview) .static-date > * { max-width: 38rem; margin-inline: auto; }

@container light-chapters (min-width: 700px) {
  /* Reserve the whole window and table behind the paper. A short closed
     letter must not let the next chapter cover the lower half of its artwork. */
  .am-letter { --light-desk-height: clamp(36rem, 100svh, 75rem); min-height: var(--light-desk-height); }
  .am-writing-world-pin { height: var(--light-desk-height); }
  .am-letter > .am-heading { min-height: calc(var(--light-desk-height) * .62); }
  .am-letter-desk,
  .am-letter-desk:has([open]) { margin-top: clamp(1.5rem, 3svh, 3rem); }
}

/* Match the picture's art direction. The room itself fills the viewport, so
   viewport and scene aspect queries agree, including after device rotation. */
@media (min-width: 700px) and (min-aspect-ratio: 1/1) {
  .am-evening-room { aspect-ratio: 3/2; }
  .am-lamp-touch { left: 10%; top: 24%; width: 12%; height: 17%; }
  .am-lamp-cue { left: 23%; top: 32%; max-width: 20%; overflow-wrap: anywhere; }
  .am-wall-portrait { left: 37%; top: 16%; width: 9%; }
  .am-sofa-teddy { left: 48%; bottom: 31.5%; width: 9%; }
  .am-evening-room .am-heading { left: 49%; right: auto; top: 9%; width: 24%; padding: 0; text-align: left; }
  .am-evening-room .am-heading .am-kicker { padding: 0; }
  .am-evening-room .am-heading h2 { width: 100%; max-width: none; margin: 18px 0 0; font-size: clamp(1.5rem, 3cqw, 2.75rem); }
  .am-room-warmth { background: radial-gradient(ellipse at 15.5% 31%, #ffe2a1a8, transparent 51%); }
  .am-outside-night { width: 25%; height: 53%; }
  .am-glass-reflection { width: 3.4%; }
  .am-glass-one { left: 33%; top: 70%; }
  .am-glass-two { left: 43.5%; top: 70.5%; }
  .am-settling-throw { display: none; }
}

/* A short viewport still has one centered scene, not side rails sized from
   the outer browser width. Keep the door and its actual hit target aligned. */
@media (orientation: landscape) and (max-height: 500px) {
  .experience { min-height: 320px; }
  .invitation { top: calc(16px + env(safe-area-inset-top)); left: 20px; right: 20px; text-align: center; }
  .invitation h1 { font-size: clamp(1.3rem, 3cqw, 2rem); }
  .eyebrow { margin-bottom: 6px; }
  .fine-rule { margin: 8px auto 0; }
  .prompt { left: 20px; right: 20px; bottom: calc(65px + env(safe-area-inset-bottom)); text-align: center; }
  .breathing-ring { margin: 0 auto 6px; }
  .door-trigger { left: 23%; width: 54%; }
  .final-copy { left: 26px; right: 26px; bottom: calc(66px + env(safe-area-inset-bottom)); max-width: none; font-size: .65rem; text-align: center; }
  .final-copy em { font-size: .8rem; }
  /* Fit the physical phone to this viewport, then reflow its app content at
     readable text sizes. The previous fixed 680px table cropped the device. */
  .phone-world:not([data-phone-mode="cinematic"]) .pw-table-scene { height: 100svh; min-height: 320px; }
  .phone-world { --pw-bezel: 6px; }
  .phone-world:not([data-phone-mode="cinematic"]) .pw-device { border-radius: 26px; }
  .phone-world:not([data-phone-mode="cinematic"]) .pw-screen { border-radius: 20px; }
  .pw-camera { width: 38px; height: 12px; top: 5px; }
  .pw-camera i { width: 4px; height: 4px; top: 4px; right: 7px; }
  .pw-statusbar { height: 22px; padding: 5px 10px; font-size: 9px; }
  .pw-statusbar svg { width: 34px; height: 12px; }
  .pw-home-indicator { height: 10px; }
  .pw-home-indicator::after { width: 60%; height: 3px; bottom: 3px; }
  .phone-world[data-phone-compact="true"] .pw-home { padding: 6px 10px; gap: 6px; }
  .phone-world[data-phone-compact="true"] .pw-home-clock { font-size: 28px; margin-top: 3px !important; }
  .pw-home-date { font-size: 11px; }
  .phone-world[data-phone-compact="true"] .pw-home-message { padding: 0; }
  .phone-world[data-phone-compact="true"] .pw-home-message > span { display: none; }
  .phone-world[data-phone-compact="true"] .pw-home-message p { font-size: 18px; line-height: 1.15; }
  .phone-world[data-phone-compact="true"] .pw-open-guide { font-size: 16px; margin-bottom: 6px !important; }
  .phone-world[data-phone-compact="true"] .pw-app-icon { width: 44px; height: 44px; border-radius: 13px; }
  .phone-world[data-phone-compact="true"] .pw-app-icon svg { width: 32px; height: 32px; }
  .pw-app-launch { gap: 5px; font-size: 12px !important; }
  .pw-scroll-on { display: none; }
  .pw-toolbar { min-height: 44px; gap: 4px; padding: 2px 5px; }
  .pw-toolbar h2 { font-size: 13px; overflow-wrap: anywhere; }
  .pw-home-button { min-height: 44px; padding-inline: 2px; }
  .phone-world[data-phone-compact="true"] .pw-note-page { padding: 14px 12px; }
  .phone-world[data-phone-compact="true"] .pw-note-page h3 { font-size: 24px; }
  .pw-note-overline { margin-bottom: 12px !important; }
  .pw-reader-actions { padding: 5px 7px; }
  .pw-reader-actions button { padding: 8px; }
  .pw-cafe-hero > div { left: 10px; right: 10px; bottom: 10px; }
  .pw-cafe-hero h3 { font-size: 20px; }
  .phone-world[data-phone-compact="true"] .pw-date-inner { padding: 15px 12px; }
  .pw-date-thought { font-size: 20px; }
  .phone-world[data-phone-compact="true"] .pw-food { display: block; }
  .phone-world[data-phone-compact="true"] .pw-food > img { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .am-writing-backdrop { transform: none !important; }
}