/* Page 02: an editorial index, on the cover's vermilion stock. */
.magazine-under{overflow-y:auto;color:#f4edda;font-family:CoverArchivo,Arial,sans-serif}
.contents-page{min-height:100%;padding:3.4dvh 4.45vw 4dvh;display:flex;flex-direction:column;position:relative;max-width:1900px;margin:auto}
.contents-meta{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #f4edda55;padding-bottom:16px;font:300 10px CoverMono,monospace;letter-spacing:.12em;text-transform:uppercase}
.contents-meta strong{font:italic 26px CoverDomaine,serif;letter-spacing:-.04em;text-transform:none}
.contents-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:9vw;flex:1;padding-top:25px}
.contents-main h1{font:italic clamp(90px,12.6vw,195px)/.88 CoverDomaine,serif;letter-spacing:-.06em;margin:0 0 31px -7px;color:#291c18;font-weight:400}
.contents-small{font:300 10px/1.5 CoverMono,monospace;letter-spacing:.11em;text-transform:uppercase}
.contents-nav{margin-top:20px;border-top:1px solid #f4edda66}
.contents-nav a{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:baseline;color:inherit;text-decoration:none;padding:12px 0;border-bottom:1px solid #f4edda44;transition:color .2s}
.contents-nav .nav-index{font:300 10px CoverMono,monospace;color:#f4edda99}
.contents-nav .nav-name{font-size:clamp(24px,2.55vw,40px);line-height:1.02;letter-spacing:-.055em}
.contents-nav .nav-tail{font:300 10px CoverMono,monospace;letter-spacing:0;color:#f4eddaaa}
.contents-nav a:hover{color:#291c18}.contents-nav a:hover .nav-tail{color:#291c18}
.contents-nav .work-note{grid-column:2;grid-row:2;font:300 10px CoverMono,monospace;letter-spacing:.01em;margin-top:-3px;color:#f4eddaaa}
.contents-nav .work-link{padding-bottom:15px}.contents-nav .work-folio{font:italic 35px CoverDomaine,serif;color:#f4edda}
.contents-contact{display:flex;gap:25px;align-items:baseline;margin-top:25px}.contents-contact a{color:inherit;text-decoration:none;font-size:12px;border-bottom:1px solid #f4edda70;padding-bottom:5px}.contents-contact a:first-child{font-size:16px}.contents-contact span{margin-left:20px}
.contents-off{padding-top:25px;display:flex;flex-direction:column;align-items:stretch;max-width:360px;justify-self:end;width:100%}
.contents-off-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}.contents-off-top h2{font:italic 35px CoverDomaine,serif;letter-spacing:-.045em;margin:0}.contents-off-top span{font:300 10px CoverMono,monospace}.contents-strip{display:block;background:#f8f6ef;padding:9px;box-shadow:0 9px 18px #54120825;transform:rotate(1.5deg);transform-origin:50% 50%;transition:transform .35s ease}.contents-strip:hover{transform:rotate(0)}.contents-strip img{display:block;width:100%;height:auto}
.contents-off-links{display:flex;justify-content:space-between;margin-top:21px;font-size:11px}.contents-off-links a{color:inherit;text-decoration:none;border-bottom:1px solid #f4edda70;padding-bottom:5px}.contents-off .contents-small{margin-top:30px;color:#f4edda99}
.contents-bottom{display:grid;grid-template-columns:1fr auto;gap:20px;border-top:1px solid #f4edda55;margin-top:30px;padding-top:15px;font-size:10px}.contents-bottom nav{display:flex;gap:22px;flex-wrap:wrap;padding-right:125px}.contents-bottom a{color:inherit;text-decoration:none}.contents-bottom a:hover{text-decoration:underline}.contents-bottom .folio-02{font:italic 31px/.9 CoverDomaine,serif}.contents-page a:focus-visible{outline:1px solid #f4edda;outline-offset:5px}
.page-return{right:4.45vw;bottom:3.4dvh;border:0;border-radius:0;padding:4px 0;border-bottom:1px solid #f4edda70;font-size:10px;background:#c93219}.contents-bottom .folio-02{margin-right:145px}
@media(min-width:1500px){.contents-off{max-width:410px}.contents-layout{padding-top:35px}.contents-nav a{padding-top:16px;padding-bottom:16px}}
@media(max-height:760px) and (min-width:800px){.contents-page{padding-top:22px}.contents-layout{padding-top:18px}.contents-main h1{font-size:10vw;margin-bottom:20px}.contents-off{padding-top:12px;max-width:290px}.contents-nav a{padding-top:10px;padding-bottom:10px}.contents-nav .nav-name{font-size:29px}.contents-off .contents-small{margin-top:18px}.contents-bottom{margin-top:20px}.contents-contact{margin-top:18px}}
@media(max-width:760px){.contents-layout{grid-template-columns:1fr;gap:40px}.contents-main h1{font-size:115px}.contents-off{justify-self:start;max-width:380px;padding-top:0}.contents-nav .nav-name{font-size:32px}.contents-bottom{margin-bottom:45px}.contents-bottom nav{padding-right:0;gap:15px}.contents-bottom .folio-02{margin-right:0}.page-return{bottom:15px}.contents-meta{font-size:8px}.contents-page{padding-top:20px}.contents-contact{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.contents-strip{transition:none}}

/* Four-column contents: index, title, editorial subtitle, ornamental folio. */
.contents-meta strong{font:500 25px/1 CoverArchivo,sans-serif;letter-spacing:-.055em}
.contents-nav a{grid-template-columns:26px minmax(0,1fr) 115px 45px;gap:18px;align-items:baseline;padding:19px 0}
.contents-nav .nav-name{font-size:clamp(24px,2.35vw,38px)}
.contents-nav .nav-subtitle{font:300 10px/1.5 CoverMono,monospace;color:#f4eddaaa}
.contents-nav .nav-page{font:italic 35px/1 CoverDomaine,serif;text-align:right;color:#f4edda}
.contents-nav a:hover .nav-subtitle,.contents-nav a:hover .nav-page{color:#291c18}
@media(max-height:760px) and (min-width:800px){.contents-nav a{padding:15px 0}}
@media(max-width:760px){.contents-nav a{grid-template-columns:22px minmax(0,1fr) 96px 34px;gap:10px;padding:19px 0}.contents-nav .nav-name{font-size:25px}.contents-nav .nav-page{font-size:30px}.contents-nav .nav-subtitle{font-size:9px}}
/* A single magazine leaf: size the composition to the available screen. */
.magazine-under{overflow:hidden}
.contents-page{height:100%;min-height:0;padding:3.4dvh 4.45vw 3.4dvh}
.contents-meta{flex-shrink:0;padding-bottom:1.7dvh}
.contents-layout{min-height:0;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:9vw;padding-top:2.8dvh}
.contents-main{min-height:0}
.contents-main h1{font-size:min(12.6vw,20dvh);margin-bottom:3.4dvh}
.contents-main>.contents-small{margin:0}
.contents-nav{margin-top:2.2dvh}
.contents-nav a{padding:2.05dvh 0;grid-template-columns:26px minmax(0,1fr) 115px 45px}
.contents-nav .nav-name{font-size:min(2.35vw,4.1dvh)}
.contents-nav .nav-page{font-size:min(35px,4.2dvh)}
.contents-contact{margin-top:calc(2.8dvh + 24px)}
.contents-off{padding-top:2.8dvh;max-width:min(360px,42dvh);justify-self:end;min-height:0}
.contents-off-top{margin-bottom:1.8dvh;flex-shrink:0}
.contents-off-top h2{font-size:min(35px,4.2dvh)}
.contents-strip{min-height:0;padding:1dvh;flex-shrink:1;align-self:center;max-width:100%}
.contents-strip img{max-height:50dvh;width:auto;max-width:100%;object-fit:contain}
.contents-off-links{margin-top:2.3dvh;flex-shrink:0}
.contents-bottom{flex-shrink:0;margin-top:2.3dvh;padding-top:1.7dvh;margin-bottom:0}
@media(max-width:760px){
.contents-page{padding:3dvh 4vw}.contents-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:5vw;padding-top:4dvh}
.contents-main h1{font-size:15vw;margin-left:-3px;margin-bottom:4dvh}
.contents-meta strong{font-size:20px}.contents-meta{font-size:7px}.contents-meta>span:last-child{max-width:130px;text-align:right}
.contents-small{font-size:7px}.contents-nav a{grid-template-columns:15px minmax(0,1fr) 25px;gap:7px;padding:2dvh 0}
.contents-nav .nav-name{font-size:3.5vw}.contents-nav .nav-index{font-size:7px}.contents-nav .nav-page{font-size:4vw;grid-column:3;grid-row:1}
.contents-nav .nav-subtitle{grid-column:2;grid-row:2;font-size:7px}.contents-contact{gap:14px;flex-wrap:wrap}.contents-contact a,.contents-contact a:first-child{font-size:9px}.contents-contact span{margin-left:7px}
.contents-off{padding-top:2dvh}.contents-off-top{gap:5px}.contents-off-top h2{font-size:4.2vw}.contents-off-top span{font-size:7px}.contents-off-links{font-size:8px;gap:10px}
.contents-bottom{font-size:8px}.contents-bottom nav{gap:10px;padding-right:75px}.contents-bottom .folio-02{margin-right:85px;font-size:25px}.page-return{font-size:8px;bottom:3dvh;right:4vw}
}

/* Center the issue independently of the unequal left and right labels. */
.contents-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline}
.contents-meta>strong{justify-self:start}.contents-meta>span:nth-child(2){justify-self:center}.contents-meta>span:last-child{justify-self:end;text-align:right}
.contents-contact{gap:25px}.contents-contact a:first-child{font-size:14px}
@media(max-width:760px){.contents-contact a:first-child{font-size:9px}}
.contents-meta .contents-home{justify-self:start;color:inherit;text-decoration:none}
.contents-nav a{grid-template-columns:minmax(0,1fr) 115px 45px}
.contents-home:hover{opacity:.8}
body.page-open{background:#f4edda}
.contents-turn{position:fixed;right:0;bottom:0;width:68px;height:68px;z-index:7;display:none}
body.page-open .contents-turn{display:block}
.contents-turn:focus-visible{outline:1px solid #f4edda;outline-offset:-10px}
.page-return{right:100px}.contents-bottom .folio-02{margin-right:190px}
.destination-preview{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:1;background:#faf9f6;pointer-events:none}
body.destination-turn .page-return,body.destination-turn .contents-turn,body.destination-turn .page-handle{visibility:hidden;pointer-events:none}
@media(max-width:760px){.contents-nav a{grid-template-columns:minmax(0,1fr) 30px}.contents-nav .nav-subtitle{grid-column:1}.contents-nav .nav-page{grid-column:2}.page-return{right:80px}.contents-bottom .folio-02{margin-right:145px}}

/* Reuse the exact cover artwork, including its detached dot. */
.contents-meta .contents-home{display:flex;align-items:center;gap:3px;width:86px}
.contents-home>img:first-child{display:block;width:76px;height:auto}
.contents-home .contents-home-dot{display:block;width:10px;height:auto;filter:brightness(0) saturate(100%) invert(93%) sepia(13%) saturate(318%) hue-rotate(348deg) brightness(101%) contrast(91%);align-self:center;margin-top:10px}

/* All three labels ease together; explicit child colors must not snap. */
.contents-nav a{transition:none}
.contents-nav .nav-name,.contents-nav .nav-subtitle,.contents-nav .nav-page{transition:color 200ms ease}
.contents-nav .nav-name{color:#f4edda}
.contents-nav a:hover .nav-name{color:#291c18}
/* Keep return and folio in the same footer flow, return first. */
.contents-bottom{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:40px}
.contents-bottom nav{padding-right:0}
.contents-bottom .page-return{position:static;margin:0;background:transparent;justify-self:end}
.contents-bottom .folio-02{margin-right:0}
@media(max-width:760px){.contents-bottom{column-gap:18px}}
@media(prefers-reduced-motion:reduce){.contents-nav .nav-name,.contents-nav .nav-subtitle,.contents-nav .nav-page{transition:none}}
/* Keep italic overhangs inside the repaint area during color transitions. */
.contents-nav .nav-page{padding:.16em .24em;margin:-.16em -.24em;transform:translateZ(0);backface-visibility:hidden}
.contents-bottom .folio-02{font-size:22px}

.contents-home,.contents-home img,.contents-home .contents-home-dot{filter:none;box-shadow:none;text-shadow:none}
/* Treat the complete masthead as one stable link target. */
.contents-meta .contents-home,.contents-meta .contents-home:hover{opacity:1;cursor:pointer}
.contents-home img{pointer-events:none}
/* Keep the contents subtitles readable beneath the larger link names. */
.contents-nav .nav-subtitle{font-size:12px;line-height:1.5}
@media(max-width:760px){.contents-nav .nav-subtitle{font-size:10px}}

.contents-contact a,.contents-contact a:first-child{font-size:14px}
