/* H4 private review: midnight navy, blue photo mats and a bound-paper magazine. */
:root{--photo-mat:#e3edf3}
html[data-theme=navy]{--paper:#06182d;--surface:#0e2944;--panel:#173b5b;--line:#41617d;--ink:#f5f8fc;--muted:#c6d9e9;--accent:#b7dfea;--photo-mat:#7cabc7}
html[data-theme=navy] .hero,html[data-theme=navy] #publicaciones,html[data-theme=navy] .brandline,html[data-theme=navy] .closing{background:var(--paper)}
/* The lighter blue is a visible mat beneath the photographs, not a washed-out page. */
.hero-art{padding-bottom:160px;padding-left:18px}
.hero-photo-frame{width:94%;max-width:550px;border:0;padding:14px 14px 32px;background:var(--photo-mat);box-shadow:none;aspect-ratio:auto}
html[data-theme=navy] .hero-photo-frame{border:0;background:var(--photo-mat);box-shadow:0 24px 40px -28px #0009}
.hero-photo-frame .landscape{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.hero-photo-frame .photo-location{bottom:10px;right:14px;padding:0;background:none;color:#0b2940;font-size:9px;letter-spacing:.1em}
/* A closed, slim magazine: separate paper block, slightly curved cover and a bound edge. */
.hero-art .hero-cover.composed-cover{left:14px;bottom:13px;width:166px;max-width:35%;padding:0;background:#ece9df;border:0;border-radius:1px 3px 5px 1px;transform:perspective(1200px) rotateY(-13deg) rotateZ(-6deg);transform-origin:left bottom;box-shadow:9px 14px 17px -10px #0008,19px 26px 30px -19px #0008;isolation:isolate;overflow:visible;animation:magazine-breathe 9s ease-in-out infinite;transition:transform .25s ease,box-shadow .25s ease}
.hero-art .hero-cover.composed-cover .magazine-paper{position:absolute;display:block;inset:4px -7px -6px 5px;padding:0;background:repeating-linear-gradient(to bottom,#fcfaf4 0,#fcfaf4 1px,#c4c7c6 1px,#eef0eb 2px);border:1px solid #d0d2cd;border-radius:0 3px 7px 0;box-shadow:2px 2px 0 #e1dfd3,3px 3px 0 #aaa99e;transform:skewY(1deg);z-index:-1}
.hero-art .hero-cover.composed-cover::before{inset:0;z-index:2;pointer-events:none;border:0;border-radius:1px 3px 4px 1px;background:linear-gradient(90deg,#00162455 0, #00162422 2%,#ffffff55 3.5%,#ffffff08 5%,transparent 8%,transparent 92%,#ffffff33 98%,#0002 100%)}
.hero-art .hero-cover.composed-cover::after{left:0;top:0;bottom:0;width:3px;z-index:3;background:linear-gradient(90deg,#172b3555,#ffffff50);border-radius:1px 0 0 1px}
.hero-art .hero-cover.composed-cover img{position:relative;z-index:1;display:block;width:100%;height:auto;max-height:none;object-fit:contain;aspect-ratio:auto;border-radius:1px 3px 4px 1px;box-shadow:1px 0 1px #0002}
.hero-art .hero-cover.composed-cover:hover{transform:perspective(1200px) rotateY(-9deg) rotateZ(-4deg) translateY(-3px);outline:none;box-shadow:12px 18px 22px -11px #0009,22px 32px 34px -19px #0008}
.hero-art .hero-cover.composed-cover:focus-visible{outline:3px solid var(--accent);outline-offset:12px}
.hero-art .hero-caption{left:212px;bottom:18px;border-left:0;padding:0;max-width:300px}
.hero-caption>b{font-size:27px}.hero-caption>small{font-size:12px}
.article-photo-link{background:var(--photo-mat);padding:15px;min-height:215px}
.news-card .article-photo{max-width:min(100%,210px);max-height:210px}
#publicaciones .cover{background:var(--photo-mat);color:#0b2940}
#publicaciones .cover span{background:none;color:#0b2940}
.story-main{background:var(--photo-mat);padding:20px 20px 0}
.story-main>div{margin:20px -20px 0}
.story-side{background:var(--panel)}
.story-side>img{background:var(--photo-mat);padding:20px;box-sizing:border-box}
.story-side>.eyebrow,.story-side>h3,.story-side>p,.story-side>span{margin-left:20px;margin-right:20px}
.story-side>span{display:inline-block;margin-bottom:24px}
@media(max-width:1100px) and (min-width:801px){.hero-art{padding-bottom:190px}.hero-art .hero-cover.composed-cover{width:140px;max-width:37%;bottom:18px}.hero-art .hero-caption{left:177px;bottom:20px}.hero-caption>b{font-size:24px}}
@media(max-width:800px){.hero-art{max-width:610px;padding-bottom:160px}.hero-art .hero-cover.composed-cover{width:166px;max-width:33%;animation:none}.hero-art .hero-caption{left:210px;bottom:18px}.hero-photo-frame{width:96%}}
@media(max-width:650px){.hero-art{padding-left:10px;padding-bottom:150px}.hero-photo-frame{width:100%;padding:10px 10px 28px}.hero-photo-frame .photo-location{bottom:9px;right:10px;font-size:8px}.hero-art .hero-cover.composed-cover{left:14px;bottom:16px;width:132px;max-width:34%}.hero-art .hero-caption{left:calc(34% + 31px);bottom:13px;padding:0;max-width:none}.hero-caption>b{font-size:23px}.hero-caption>small{font-size:11px}.article-photo-link{padding:12px;min-height:180px}.story-main{padding:12px 12px 0}.story-main>div{margin:12px -12px 0}.story-side>img{padding:12px}}
@media(max-width:420px){.hero-art{padding-bottom:155px}.hero-art .hero-cover.composed-cover{width:112px;max-width:33%;bottom:20px;left:10px}.hero-art .hero-caption{left:calc(33% + 28px);bottom:12px}.hero-caption>b{font-size:21px}.hero-caption>small{font-size:11px}.hero-edition-link{font-size:11px}.news-card .article-photo-link{padding:8px;min-height:0}.hero-photo-frame .photo-location{font-size:8px}.hero-art .hero-cover.composed-cover .magazine-paper{inset:3px -5px -4px 3px}}
@media(prefers-reduced-motion:reduce){.hero-art .hero-cover.composed-cover,.hero-art .hero-cover.composed-cover:hover{animation:none;transition:none;transform:perspective(1200px) rotateY(-13deg) rotateZ(-6deg);translate:0 0}}
