/* Independent portrait art direction, shared narrative and references. */
.mobile-text{display:none}
.visual picture{display:block;width:100%;height:100%}
.detail-body{font-size:18px;line-height:1.85;color:#e2ddd2}
.detail-sources{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:28px 0 6px;font-size:15px;line-height:1.6}
#detail-content>.source-kind{font-size:12px;letter-spacing:.08em;color:var(--gold);line-height:1.7}
.read-relato{padding:0;min-height:44px;color:var(--gold);font-size:14px;text-align:left;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#d4b57870}

@media(max-width:900px) and (orientation:portrait){
  .desktop-text{display:none!important}
  .mobile-text{display:block}
  .masthead{height:calc(76px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6vw 0;background:linear-gradient(#080a09cc,transparent)}
  .wordmark{font-size:12px;gap:10px}
  .wordmark-sub{font-size:12px;letter-spacing:.24em;margin-top:3px}
  .cross{font-size:26px}
  .masthead nav{gap:18px;font-size:14px}
  .masthead nav .prayer-link{display:none}
  .masthead nav button{min-height:44px}
  .stage .visual{inset:0;height:100svh}
  .visual img,.visual video{object-fit:contain;object-position:center top;transform-origin:50% 35%}
  .stage-shade,.stage.bottom-copy .stage-shade{background:linear-gradient(0deg,#080b0b 0%,#080b0bf7 17%,#080b0bbd 31%,#080b0b2a 43%,transparent 57%)}
  .stage .vignette{background:linear-gradient(180deg,#080a0938,transparent 19%),linear-gradient(0deg,#080b0b,transparent 45%)}
  .chapter,.chapter.hero{height:190svh}
  .chapter.prayer{height:205svh}
  .copy-viewport,.bottom .copy-viewport{height:100svh;align-items:flex-end;justify-content:center;padding:90px 7vw calc(80px + env(safe-area-inset-bottom));overflow:visible}
  .chapter-copy,.bottom .chapter-copy,.prayer .chapter-copy{display:block;width:100%;max-width:530px;max-height:calc(100svh - 172px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:2px 0;overflow-y:auto}
  .kicker,.bottom .kicker{font-size:12px;line-height:1.35;letter-spacing:.1em;margin:0 0 12px}
  .chapter h1{font-size:clamp(2.9rem,13vw,4.2rem);line-height:.97;margin:0 0 16px;letter-spacing:-.04em}
  .chapter h2,.bottom h2{font-size:clamp(1.8rem,8.4vw,2.7rem);line-height:1.04;margin:0 0 13px;letter-spacing:-.035em}
  .chapter .body,.hero .body,.bottom .body{font-size:16px;line-height:1.5;margin:0;max-width:440px;color:#e8e1d3;text-wrap:pretty}
  .prayer .body{font-family:var(--serif);font-size:22px;line-height:1.5}
  .chapter-ref,.bottom .chapter-ref{margin:12px 0 0;gap:10px;font-size:12px;line-height:1.5}
  .chapter-ref .source-separator,.chapter-ref a:not(:first-of-type){display:none}
  .chapter-ref .source-type{border-right:1px solid var(--line);padding-right:10px}
  .chapter-ref a{font-size:14px;min-height:30px;display:inline-flex;align-items:flex-start}
  .read-relato{display:inline-flex;align-items:center;margin-top:0;min-height:44px;font-size:14px}
  .scroll-cue{margin-top:20px;font-size:12px;letter-spacing:.07em;min-height:28px}
  .scroll-cue i{height:28px}
  .prayer-action{font-size:14px;min-height:44px;margin-top:10px}
  .chapter-rail{display:none}
  .journey-meta{left:6vw;bottom:calc(23px + env(safe-area-inset-bottom));gap:5px;font-size:12px}
  .journey-meta:after{content:'/ 09';font-size:12px;color:#b9b0a1}
  .journey-meta #current-number{font-size:22px}
  .journey-meta #current-label,.journey-meta .meta-rule{display:none}
  .motion-button{right:4vw;bottom:calc(11px + env(safe-area-inset-bottom));min-width:44px;min-height:44px;justify-content:center}
  .motion-button #motion-label{display:none}
  .motion-button>span:first-child{font-size:27px}
  .contemplate-button{left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap;min-height:44px;font-size:14px;letter-spacing:0;border-bottom:0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
  .colophon{padding:75px 7vw 0}
  .colophon .eyebrow{font-size:12px;letter-spacing:.1em}
  .colophon h2{font-size:clamp(32px,7vw,44px)}
  .editorial-note{grid-template-columns:1fr;gap:4px;font-size:16px;line-height:1.8;max-width:530px}
  .colophon-actions{flex-direction:column;gap:15px;margin:30px 0 55px}
  footer{font-size:12px;letter-spacing:.03em;gap:18px;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  dialog{width:min(94vw,700px);max-height:calc(94svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:24px}
  .dialog-head{top:-24px;gap:14px}
  .dialog-head h2{font-size:30px;line-height:1.15}
  .close-dialog{flex:0 0 44px}
  .detail-body{font-size:17px;line-height:1.85}
  #image-dialog{width:min(96vw,700px);padding:16px}
  #image-dialog .dialog-head{top:-16px;padding-bottom:12px}
  #image-dialog h2{font-size:23px}
  #contemplation-image{height:auto;max-height:73svh;object-fit:contain}
  #image-dialog .source-footnote{font-size:12px;margin-top:12px}
}

@media(max-width:900px) and (orientation:portrait) and (max-height:700px){
  .copy-viewport,.bottom .copy-viewport{padding-bottom:72px}
  .chapter h1{font-size:43px}
  .chapter h2,.bottom h2{font-size:29px;margin-bottom:10px}
  .hero .scroll-cue{display:none}
  .kicker,.bottom .kicker{margin-bottom:9px}
  .chapter .body{font-size:16px;line-height:1.4}
  .chapter-ref,.bottom .chapter-ref{margin-top:8px}
  .masthead{height:68px}
}

@media(orientation:landscape) and (max-height:520px){
  .masthead{height:62px}
  .copy-viewport,.bottom .copy-viewport{padding:74px 7vw 65px}
  .chapter h1{font-size:clamp(38px,7vw,64px)}
  .chapter h2,.bottom h2{font-size:32px}
  .chapter-copy{max-height:calc(100svh - 137px)}
  .contemplate-button{bottom:17px;right:15vw;min-height:40px}
  .motion-button{bottom:15px;right:5vw}
  .motion-button #motion-label{display:none}
}

@media print{.mobile-text{display:none!important}.desktop-text{display:block!important}.chapter-copy{max-height:none}}