/* Interface additions share the brochure palette; film assets stay untouched. */
#chapter-nav { position: fixed; z-index: 10; top: max(16px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); display: flex; gap: 2px; padding: 4px; border-radius: 30px; font: 13px/1.2 Arial, sans-serif; }
#chapter-nav a { min-height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 24px; color: #f4e4af; text-decoration: none; }
#chapter-nav a[aria-current] { background: #f4e4af; color: #192115; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #f4e4af; outline-offset: 4px; }
#explore-hint { position: fixed; z-index: 5; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 8px 16px; min-height: 44px; color: #f4e4af; background: #192115d9; border: 1px solid #f4e4af66; border-radius: 24px; text-decoration: none; font: 13px Arial, sans-serif; white-space: nowrap; }
#explore-hint span { font-size: 22px; }
#retry { z-index: 12; left: 24px; right: auto; bottom: 80px; width: auto; border-radius: 24px; display: flex; gap: 8px; align-items: center; padding: 8px 14px; }
#retry svg { width: 22px; height: 22px; }
.closing-side-note { top: 150px; }
@media (min-width: 741px) and (min-height: 581px) { #explore-hint { left: 60%; } }
@media (min-width: 741px) and (max-width: 1100px) and (min-height: 581px) and (orientation: landscape) { #explore-hint { bottom: 120px; } }
#config-tools button, dialog button, #close-product-info { min-height: 44px; border: 1px solid #f4e4af66; border-radius: 24px; padding: 8px 16px; color: #f4e4af; background: #192115e6; font: 13px Arial, sans-serif; cursor: pointer; }
#config-tools { position: fixed; z-index: 6; top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); display: flex; gap: 6px; }
#config-tools button:disabled { opacity: .5; cursor: wait; }
#load-status { position: fixed; z-index: 11; left: 50%; top: max(80px, calc(env(safe-area-inset-top) + 64px)); transform: translateX(-50%); padding: 12px 20px; font: 13px Arial, sans-serif; pointer-events: none; white-space: nowrap; }
#urn-info { top: 138px; max-height: calc(100dvh - 240px); }
#product-title { position: absolute; transform: none; }
.pricing-note { margin: 8px 0; font: 12px Arial, sans-serif; color: #f4e4af; }
.pricing-terms { font: 12px/1.5 Arial, sans-serif; }
.action-primary, .action-secondary { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid #f4e4af; border-radius: 24px; font: 14px/1.3 Arial, sans-serif; text-align: center; text-decoration: none; }
.action-primary { background: #f4e4af; color: #192115; }
.action-secondary { background: #19211599; color: #f4e4af; }
#urn-info .action-primary { margin-top: 14px; }
#close-product-info { display: none; width: 100%; margin-top: 8px; }
#memorial-assistant { --assistant-size: 80px; position: fixed; z-index: 9; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); width: var(--assistant-size); height: var(--assistant-size); pointer-events: none; }
#assistant-avatar { display: block; width: 100%; height: 100%; padding: 0; border: 1px solid #8fca9c77; border-radius: 50%; overflow: hidden; cursor: pointer; pointer-events: auto; background: radial-gradient(circle, #346b4155, #13231be6 72%); box-shadow: 0 4px 24px #0005, 0 0 20px #79bf8a26; -webkit-tap-highlight-color: transparent; }
#assistant-avatar video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: hue-rotate(275deg) saturate(.75) brightness(1.8); mix-blend-mode: screen; }
#assistant-message { position: absolute; right: calc(100% + 12px); bottom: 10px; width: max-content; max-width: min(248px, calc(100vw - var(--assistant-size) - 48px)); margin: 0; padding: 12px 16px; color: #f4e4af; font: 15px/1.4 'Memorial Editorial', Georgia, serif; border-radius: 18px 18px 4px 18px; opacity: 0; visibility: hidden; transform: translate(8px, 4px) scale(.97); transform-origin: bottom right; transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none; }
#assistant-message::after { content: ''; position: absolute; right: -6px; bottom: 10px; width: 10px; height: 10px; background: #233020; border-top: 1px solid #f4e4af66; border-right: 1px solid #f4e4af66; transform: rotate(45deg); }
#memorial-assistant.message-visible #assistant-message { opacity: 1; visibility: visible; transform: none; }
/* Keep the floating helper clear of the selection controls. */
#tree-selector { bottom: max(120px, calc(env(safe-area-inset-bottom) + 112px)); }
#urn-info { max-height: calc(100dvh - 370px); }
#tree-selector .urn-choice { width: 88px; border-radius: 22px; padding: 8px; display: grid; justify-items: center; gap: 3px; height: 58px; }
#tree-selector .urn-choice svg { width: 22px; height: 22px; }
#tree-selector .urn-choice span { font: 12px Arial, sans-serif; }
.config-scroll-hint { position: absolute; right: 0; bottom: 76px; margin: 0; padding: 6px 10px; border-radius: 12px; background: #192115db; color: #f4e4af; font: 12px/1.4 Arial, sans-serif; }
.editorial-more summary { display: none; }
.editorial-more { pointer-events: auto; }
/* Contrast follows the copy instead of flattening the whole photograph. */
.scene-copy:not(.copy-cover)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000b, #0004 48%, transparent 78%); }
.scene-copy.copy-bench::before, .scene-copy.copy-girl::before { background: linear-gradient(270deg, #000b, #0004 45%, transparent 78%); }
dialog { padding: 24px; color: #f4e4af; background: #192115; border: 1px solid #f4e4af66; border-radius: 24px; max-width: calc(100vw - 24px); font: 15px/1.5 Arial, sans-serif; }
dialog::backdrop { background: #000c; }
body.dialog-open { overflow: hidden; }
#garden-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
#garden-viewer[open] { display: flex; flex-direction: column; gap: 12px; }
.viewer-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.viewer-heading h2 { font: 18px/1.3 Georgia, serif; margin: 0; }
.viewer-heading button { flex-shrink: 0; }
#viewer-pan { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #0e160c; }
#viewer-canvas { display: block; margin: auto; max-width: none; }
.viewer-zoom { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.viewer-zoom input { min-height: 44px; accent-color: #f4e4af; }
.viewer-zoom span { font-size: 12px; }
#share-dialog { width: min(480px, calc(100vw - 24px)); }
#share-dialog h2 { font: 26px Georgia, serif; margin-top: 0; }
#share-url { display: block; width: 100%; min-height: 44px; margin: 8px 0 16px; padding: 10px; border: 1px solid #f4e4af80; border-radius: 8px; background: #0e160c; color: #f4e4af; font-size: 16px; }
#share-dialog form { display: inline-block; margin-left: 8px; }
@media (max-width: 740px), (max-width: 900px) and (orientation: portrait), (max-height: 580px) {
  #chapter-nav { top: max(8px, env(safe-area-inset-top)); right: 12px; left: 12px; justify-content: center; }
  #chapter-nav a { flex: 1; justify-content: center; padding: 0 6px; font-size: 12px; }
  #explore-hint { bottom: 96px; font-size: 12px; }
  #config-tools { top: max(126px, calc(env(safe-area-inset-top) + 118px)); left: 12px; right: 12px; justify-content: center; }
  #config-tools button { font-size: 12px; }
  #urn-info { top: max(70px, calc(env(safe-area-inset-top) + 62px)); left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 298px); z-index: 8; padding: 4px 12px; border-radius: 20px; }
  #urn-info:has(details#urn-info-panel[open]) { box-shadow: 0 24px 80px #000b; }
  #urn-info-title { font-size: 15px; }
  #close-product-info { display: block; }
  #tree-selector { left: 12px; right: 12px; bottom: max(86px, calc(env(safe-area-inset-bottom) + 78px)); transform: none; flex-direction: column; align-items: stretch; max-width: none; gap: 5px; }
  .tree-controls { width: 100%; max-width: none; padding: 0 8px; gap: 0; border-radius: 20px; max-height: 170px; overflow-y: auto; }
  .tree-controls .tree-choices { display: flex; width: 100%; justify-content: space-between; overflow-x: auto; }
  #tree-selector .tree-choice { flex: 0 0 40px; width: 40px; height: 44px; padding: 11px; }
  #tree-selector .urn-choices { justify-content: space-between; padding: 2px; }
  #tree-selector .urn-choice { width: 76px; height: 48px; padding: 4px; }
  #tree-selector #urn-previous, #tree-selector #urn-next { width: 40px; height: 44px; padding: 10px; }
  #tree-selector .urn-choice svg { width: 16px; height: 16px; }
  .config-scroll-hint { position: static; order: -1; align-self: center; font-size: 10px; padding: 3px 7px; }
  #memorial-assistant { --assistant-size: 64px; bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
  #assistant-message { font-size: 14px; bottom: 4px; }
  .copy-cover .cover-content { padding-top: 86px; padding-bottom: 126px; }
  .editorial-more summary { display: block; cursor: pointer; min-height: 44px; padding: 12px 0; font: 13px/1.4 Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; }
  .editorial-more { max-height: 30dvh; overflow-y: auto; overscroll-behavior: contain; }
  .ceremony-values, .ceremony-footer, .overlook-side-note, .overlook-values, .closing-side-note { display: none; }
  .scene-copy:not(.copy-cover) { padding-top: 76px; }
  .girl-message, .bench-message, .ceremony-message, .overlook-message { top: 88px; max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }
  .copy-closing .closing-message { top: 86px; bottom: auto; }
  .copy-closing .closing-message h2 { font-size: clamp(30px, 8vw, 44px); }
  .copy-closing .closing-message .editorial-rule { margin: 10px 0; }
  .copy-closing .closing-message .editorial-body { font-size: 16px; }
  .copy-closing .closing-message .editorial-quote { display: none; }
  #load-status { top: auto; bottom: 52px; font-size: 12px; }
}
@media (max-height: 580px) and (orientation: landscape) {
  #chapter-nav { left: auto; width: 350px; }
  #config-tools { left: 12px; right: auto; top: 8px; }
  #urn-info { left: auto; right: 12px; width: 280px; max-height: calc(100dvh - 236px); }
  #tree-selector { right: auto; width: 350px; bottom: 12px; }
  #assistant-message { right: 0; bottom: calc(100% + 10px); max-width: min(230px, calc(100vw - 388px)); }
  #assistant-message::after { right: 20px; bottom: -6px; transform: rotate(135deg); }
  .copy-cover .cover-content { padding-top: 24px; padding-bottom: 48px; }
}
@media (prefers-reduced-transparency: reduce) { #chapter-nav, #assistant-message, #load-status { background: #192115; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { #assistant-message { transition: none; transform: none; } }

/* Text and controls occupy separate viewport lanes. None of these rules run
   during film playback; short screens scroll their reading panels natively. */
:root {
  --ui-top: max(84px, calc(env(safe-area-inset-top) + 76px));
  --ui-bottom: max(124px, calc(env(safe-area-inset-bottom) + 116px));
}
.girl-message, .bench-message, .ceremony-message, .overlook-message {
  top: max(9vh, var(--ui-top));
  max-height: calc(100vh - max(9vh, var(--ui-top)) - var(--ui-bottom));
  max-height: calc(100dvh - max(9vh, var(--ui-top)) - var(--ui-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: auto;
}
.ceremony-values { top: max(9vh, var(--ui-top)); }
.ceremony-message { max-height: calc(100dvh - max(9vh, var(--ui-top)) - var(--ui-bottom) - 40px); }
.ceremony-footer, .overlook-values { bottom: var(--ui-bottom); }
.closing-message .editorial-quote { bottom: var(--ui-bottom); }
.closing-message { max-height: calc(100dvh - 11vh - var(--ui-bottom)); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }
#config-tools button, #chapter-nav a, .viewer-heading h2, .urn-choices { min-width: 0; }
.cover-logo { width: min(100%, 500px); flex-wrap: wrap; gap: 12px 20px; }
.cover-brand { flex: 0 0 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cover-brand-description { min-width: 0; overflow-wrap: anywhere; }
#config-tools button, #assistant-message, #load-status, .viewer-heading h2 { overflow-wrap: anywhere; }
#load-status { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); left: 24px; right: 124px; transform: none; max-width: 480px; white-space: normal; text-align: center; padding: 8px 12px; }
.copy-cover .cover-content { bottom: var(--ui-bottom); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }
.cover-content > * { flex-shrink: 0; }
/* Loading and retry notices use the helper lane instead of covering a card. */
body:has(#load-status:not([hidden])) #assistant-message { opacity: 0; visibility: hidden; transition: none; }
body:has(#load-status:not([hidden])) #explore-hint { visibility: hidden; }
body:has(#retry:not([hidden])) #journey #retry { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); left: 24px; width: 44px; height: 44px; padding: 10px; }
body:has(#retry:not([hidden])) #retry span { display: none; }
body:has(#retry:not([hidden])) #load-status { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); left: 80px; right: 124px; transform: none; max-width: 480px; padding: 8px 12px; }
body:has(#retry:not([hidden])) .copy-cover .cover-content { bottom: var(--ui-bottom); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }
#map-toggle { top: var(--ui-top); bottom: auto; }
.map-label-leader { stroke: #f4e4af; stroke-width: 1.5; stroke-opacity: .8; vector-effect: non-scaling-stroke; }
#retry { bottom: var(--ui-bottom); }
#journey[data-phase="tree-selector"] #retry { top: 80px; bottom: auto; }
.viewer-heading h2 { overflow-wrap: anywhere; }
#share-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
#share-dialog form { margin: 8px 0 0; }

@media (max-width: 740px), (max-width: 900px) and (orientation: portrait), (max-height: 580px) {
  :root { --ui-bottom: max(100px, calc(env(safe-area-inset-bottom) + 92px)); }
  #chapter-nav { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; }
  #chapter-nav a { overflow-wrap: anywhere; }
  #config-tools { top: max(70px, calc(env(safe-area-inset-top) + 62px)); display: grid; grid-template-columns: 1fr 1fr; }
  #config-tools button { padding: 8px; }
  #urn-info {
    top: max(124px, calc(env(safe-area-inset-top) + 116px));
    max-width: none;
    max-height: calc(100vh - max(124px, calc(env(safe-area-inset-top) + 116px)) - max(86px, calc(env(safe-area-inset-bottom) + 78px)) - min(42vh, 260px) - 12px);
    max-height: calc(100dvh - max(124px, calc(env(safe-area-inset-top) + 116px)) - max(86px, calc(env(safe-area-inset-bottom) + 78px)) - min(42dvh, 260px) - 12px);
    overscroll-behavior: contain;
  }
  #tree-selector {
    max-height: min(42vh, 260px);
    max-height: min(42dvh, 260px);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    scrollbar-width: thin;
  }
  .tree-controls { flex-shrink: 1; min-height: 88px; }
  #tree-selector .urn-choices, .config-scroll-hint { flex-shrink: 0; }
  .config-scroll-hint { max-width: 100%; text-align: center; }
  #tree-selector .tree-choice { flex: 0 0 40px; }
  #tree-selector .urn-choice { width: auto; flex: 1 1 0; min-width: 0; }
  #tree-selector #urn-previous, #tree-selector #urn-next { flex: 0 0 36px; width: 36px; }
  #assistant-message { right: calc(100% + 12px); bottom: 4px; max-width: min(248px, calc(100vw - var(--assistant-size) - 48px)); }
  #assistant-message::after { right: -6px; bottom: 10px; transform: rotate(45deg); }
  #explore-hint { left: 12px; bottom: max(18px, env(safe-area-inset-bottom)); transform: none; max-width: calc(100vw - 100px); white-space: normal; gap: 8px; padding: 8px 12px; }
  /* The initial invitation and the helper share the footer: place its speech
     above the helper, within the space reserved below the cover content. */
  body:has(.copy-cover:not([hidden])) #assistant-message { right: 0; bottom: calc(100% + 8px); max-width: min(248px, calc(100vw - 24px)); }
  body:has(.copy-cover:not([hidden])) #assistant-message::after { right: 20px; bottom: -6px; transform: rotate(135deg); }
  .copy-cover .cover-content {
    left: 6%; right: 6%; width: 88%; top: var(--ui-top); bottom: max(156px, calc(env(safe-area-inset-bottom) + 148px));
    padding: 0; gap: 10px; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
  }
  .cover-content > * { flex-shrink: 0; }
  .copy-cover h1 { font-size: clamp(2rem, min(13vw, 7.4vh), 4rem); }
  .cover-logo { width: min(100%, 360px); }
  .cover-brand { font-size: clamp(1.5rem, 7vw, 2.4rem); }
  .cover-values li { padding: 0 4px; }
  .cover-values li > span:last-child { font-size: .625rem; letter-spacing: 0; }
  .cover-icon { --icon-height: 30px; }
  .cover-description { font-size: clamp(.875rem, 4.3vw, 1.125rem); }
  .girl-message, .bench-message, .ceremony-message, .overlook-message {
    position: absolute; left: 6%; right: 6%; width: 88%; top: var(--ui-top); max-height: calc(100vh - var(--ui-top) - var(--ui-bottom));
    max-height: calc(100dvh - var(--ui-top) - var(--ui-bottom));
  }
  .copy-closing .closing-message { top: var(--ui-top); max-height: calc(100dvh - var(--ui-top) - var(--ui-bottom)); }
  #load-status { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 88px; transform: none; max-width: none; padding: 8px 12px; }
  body:has(#load-status:not([hidden])) #explore-hint { visibility: hidden; }
  body:has(#retry:not([hidden])) #journey #retry { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  body:has(#retry:not([hidden])) #load-status { left: 64px; right: 88px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: none; font-size: 11px; padding: 6px 10px; }
  #journey[data-phase="tree-selector"] #retry { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: 12px; }
}
@media (max-height: 580px) and (orientation: landscape) {
  #config-tools { left: 12px; right: calc(50% + 6px); }
  #urn-info { left: calc(50% + 6px); right: 12px; width: auto; top: max(70px, calc(env(safe-area-inset-top) + 62px)); max-height: calc(100vh - 156px); max-height: calc(100dvh - 156px); }
  #tree-selector { left: 12px; right: calc(50% + 6px); width: auto; top: max(132px, calc(env(safe-area-inset-top) + 124px)); bottom: max(86px, calc(env(safe-area-inset-bottom) + 78px)); max-height: none; }
  .tree-controls { flex-shrink: 0; min-height: 88px; max-height: none; }
  .copy-cover .cover-content { width: 54%; right: auto; bottom: var(--ui-bottom); }
  body:has(.copy-cover:not([hidden])) #assistant-message { right: calc(100% + 12px); bottom: 4px; max-width: min(248px, calc(44vw - 90px)); }
  body:has(.copy-cover:not([hidden])) #assistant-message::after { right: -6px; bottom: 10px; transform: rotate(45deg); }
  .girl-message, .bench-message, .ceremony-message, .overlook-message { left: 6%; right: auto; width: 88%; max-width: 700px; }
}