:root { --region-color:#023e8a; --muted:#414b55; }
body { isolation:isolate; }
.header, main, .footer { position:relative; }
main, .footer { z-index:auto; }
.header, .preview { z-index:3; }
.hero > div, .principles, .section-top, .page-heading, .article, .about-grid, .contact-grid, .filter-bar, .book-card, .catalogue-more, .empty, .section > .intro, .dark-grid, .quote, .quote-credit, .cta, .footer > .wrap, .error-page { position:relative; z-index:3; }
.ink-stage { --ink-scale:1; position:fixed; inset:0; z-index:2; pointer-events:none; background:var(--region-color); mask-image:url('ink-silhouette.png'); mask-repeat:no-repeat; mask-position:center; mask-size:auto calc(92% * var(--ink-scale)); -webkit-mask-image:url('ink-silhouette.png'); -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:auto calc(92% * var(--ink-scale)); opacity:.22; transition:background-color .7s ease; }
/* Zoom the mask inside a viewport-sized layer; oversized transformed layers can be clipped during their first rasterization. */
.ink-stage.is-revealing { z-index:8; }
.ink-intro { height:100svh; min-height:600px; }
.ink-solid { position:fixed; inset:0; z-index:9; background:#023e8a; pointer-events:none; }
.ink-intro-copy { position:fixed; inset:0; z-index:10; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:90px 28px; }
.intro-brand { position:absolute; top:36px; left:48px; font:20px/1.3 var(--sans); letter-spacing:.2em; }
.intro-brand small { display:block; font-size:9px; letter-spacing:.45em; margin-top:3px; }
.intro-skip { position:absolute; top:38px; right:48px; background:none; border:0; border-bottom:1px solid #ffffff70; color:#fff; padding:5px 0; font:11px var(--mono); cursor:pointer; }
.intro-record { font:11px/1.7 var(--mono); letter-spacing:.18em; margin:0 0 30px; color:#cddbeb; }
.intro-title { max-width:960px; font:400 clamp(2.8rem,5.6vw,5rem)/1.09 var(--serif); letter-spacing:-.045em; }
.intro-title em { display:block; font-weight:400; margin-top:8px; }
.intro-cue { position:absolute; bottom:42px; left:24px; right:24px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:15px; }
.intro-enter { display:flex; align-items:center; gap:16px; background:none; color:#fff; border:0; border-bottom:1px solid #ffffff70; padding:10px 0; font:11px/1.5 var(--mono); letter-spacing:.06em; cursor:pointer; }
.intro-enter span { font:22px var(--sans); animation:ink-cue 1.8s ease-in-out infinite; }
.intro-cue small { font:9px/1.5 var(--mono); letter-spacing:.12em; color:#cddbeb; }
.ink-region { position:fixed; right:24px; bottom:18px; z-index:4; pointer-events:none; padding:7px 11px; background:#f4f2eced; border:1px solid #d7d8d3; color:#58616a; font:9px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.ink-region::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--ink); margin-right:8px; }
.book-stage { background:transparent; overflow:visible; }
.book-stage::before { inset:-20px; background:var(--region-color); mask:url('ink-silhouette.png') center / contain no-repeat; -webkit-mask:url('ink-silhouette.png') center / contain no-repeat; opacity:.95; transition:background-color .7s ease; }
.stage-label, .stage-bottom { color:var(--ink); z-index:3; }
.hero-book { z-index:1; }
.stage-label { top:0; }
.stage-bottom { bottom:0; }
.cover-box { background:#f4f2ecb3; isolation:isolate; }
.cover-box::before { content:''; position:absolute; inset:5px; z-index:-1; background:var(--book-color); mask:url('ink-silhouette.png') center / contain no-repeat; -webkit-mask:url('ink-silhouette.png') center / contain no-repeat; opacity:.22; transition:opacity .3s; }
.book-card:hover .cover-box::before, .book-card:focus-within .cover-box::before { opacity:.38; }
@keyframes ink-cue { 50% { transform:translateY(5px); } }
@media(max-width:760px) {
 .ink-intro { min-height:540px; }
 .ink-intro-copy { padding:100px 25px; }
 .intro-brand { top:27px; left:25px; font-size:17px; }
 .intro-skip { top:29px; right:25px; font-size:10px; }
 .intro-record { max-width:240px; font-size:9px; margin-bottom:26px; }
 .intro-title { font-size:clamp(2.75rem,9vw,4.1rem); }
 .intro-cue { bottom:35px; }
 .intro-cue small { max-width:260px; }
 .ink-stage { mask-size:calc(92% * var(--ink-scale)) auto; -webkit-mask-size:calc(92% * var(--ink-scale)) auto; mask-position:center; -webkit-mask-position:center; }
 .book-stage::before { inset:-5px; }
 .ink-region { right:10px; bottom:10px; font-size:8px; padding:6px 8px; }
}
@media(prefers-reduced-motion:reduce) {
 .ink-intro, .ink-intro-copy, .ink-solid { display:none!important; }
 .ink-stage { --ink-scale:1!important; opacity:.22!important; transition:none; }
}