/* Detail portraits use 80% of the viewport height, constrained by narrow screens. */
body[data-page="detail"] .detail-hero{display:flex;flex-direction:column;align-items:center;gap:32px;max-width:none;min-height:0;padding:28px 5vw 54px;text-align:center;box-sizing:border-box}
body[data-page="detail"] .detail-hero>.monolith{order:-1;flex:none;width:min(53.333vh,90vw);width:min(53.333svh,90vw);height:min(80vh,135vw);height:min(80svh,135vw);max-height:none;max-width:none;aspect-ratio:2/3;margin:0 auto;transform:none;overflow:hidden;box-shadow:0 20px 90px #0009,0 0 80px #d0a15a15;border-radius:12px}
body[data-page="detail"] .detail-hero>.monolith>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
body[data-page="detail"] .detail-hero>div:not(.monolith){width:100%;max-width:900px}
body[data-page="detail"] .detail-hero .actions{justify-content:center!important}
body[data-page="detail"] .detail-hero h1{font-size:clamp(48px,6vw,82px);margin:20px 0}
@media(max-width:600px){body[data-page="detail"] .detail-hero{padding:20px 5vw 36px;gap:24px}body[data-page="detail"] .detail-hero>.monolith{border-radius:8px}body[data-page="detail"] .detail-hero .art-label{font-size:10px;max-width:calc(100% - 24px)}}
body[data-page="detail"] .detail-hero>.monolith{height:min(72svh,135vw);width:min(48svh,90vw);cursor:zoom-in}
body[data-page="detail"] .detail-hero>.monolith:focus-visible{outline:3px solid #e6c682;outline-offset:6px}
.portrait-open-hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:8px 14px;background:#070b12dc;border:1px solid #c8aa6777;border-radius:24px;color:#f4e4c1;font:14px sans-serif;white-space:nowrap;pointer-events:none}
.portrait-viewer{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#05070bf7;color:#f0e6ce;overflow:hidden;box-sizing:border-box}
.portrait-viewer::backdrop{background:#020306}
.portrait-viewer:fullscreen{width:100vw;height:100vh}
.portrait-viewer-bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;background:#0b101bf0;border-bottom:1px solid #c6a46a33;box-sizing:border-box}
.portrait-viewer-bar strong{margin-right:auto;font-size:16px}
.portrait-viewer button{background:#15202b;color:#eee1c4;border:1px solid #a78c5677;border-radius:7px;min-height:42px;padding:8px 14px;font:inherit;cursor:pointer}
.portrait-viewer button:focus-visible{outline:2px solid #f4cf85}
.portrait-viewer button:disabled{opacity:.4;cursor:default}
.portrait-viewer-stage{position:absolute;inset:80px 0 42px;display:grid;place-items:center;overflow:hidden;touch-action:none;user-select:none}
.portrait-viewer-stage img{display:block;max-width:none;max-height:none;object-fit:contain;transform-origin:center;user-select:none;-webkit-user-drag:none;will-change:transform}
.portrait-viewer-help{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:10px;margin:0;color:#a99e89;font-size:12px;background:#0b101b}
@media(max-width:600px){.portrait-viewer-bar{padding:10px;gap:6px}.portrait-viewer-bar strong{width:100%;font-size:14px}.portrait-viewer button{font-size:12px;padding:7px 10px}.portrait-viewer-stage{top:110px}.portrait-viewer-help{font-size:10px}.portrait-open-hint{font-size:12px}}