/* One short, stepped colour study. The page underneath keeps its normal layout. */
.site-intro{display:none;position:fixed;inset:0;z-index:1000;overflow:hidden;background:var(--paper);color:var(--ink);isolation:isolate}
html.intro-pending{overflow:hidden}
.intro-pending .site-intro{display:grid;place-items:center}
.intro-paper{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 24px 100px}
.intro-edition{position:absolute;top:max(30px,env(safe-area-inset-top));inset-inline-start:34px;display:flex;gap:22px;font-size:10px;font-weight:600;letter-spacing:.1em}
.intro-crop{position:absolute;width:20px;height:20px;border:solid rgba(17,17,17,.45);border-width:0}
.intro-crop-tl{top:70px;left:34px;border-top-width:1px;border-left-width:1px}.intro-crop-tr{top:70px;right:34px;border-top-width:1px;border-right-width:1px}
.intro-crop-bl{bottom:80px;left:34px;border-bottom-width:1px;border-left-width:1px}.intro-crop-br{bottom:80px;right:34px;border-bottom-width:1px;border-right-width:1px}
.intro-book{--swatch-width:clamp(54px,14vw,90px);--swatch-height:calc(var(--swatch-width)*2.8);position:relative;width:min(84vw,560px);height:calc(var(--swatch-height) + 48px);flex-shrink:0;transform:rotate(-3deg)}
.intro-swatch{position:absolute;bottom:0;left:calc(50% - var(--swatch-width)/2);width:var(--swatch-width);height:var(--swatch-height);background:#fffdf7;border:1px solid #25211c;border-radius:3px;box-shadow:2px 3px 0 rgba(17,17,17,.12);transform-origin:50% calc(100% - 17px);transform:rotate(calc(var(--stack)*.5deg));z-index:var(--stack);overflow:hidden}
.intro-chip-colours{height:67%;display:grid;grid-template-rows:1.3fr 1fr 1fr;gap:1px;background:rgba(17,17,17,.1)}
.intro-chip-colours>span:nth-child(1){background:var(--chip-a)}.intro-chip-colours>span:nth-child(2){background:var(--chip-b)}.intro-chip-colours>span:nth-child(3){background:var(--chip-c)}
.intro-chip-colours::after{content:"";position:absolute;inset:0 0 33%;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.065) 3px 4px);pointer-events:none}
.intro-chip-label{display:flex;flex-direction:column;padding:7px 7px 0;line-height:1.2;font-family:DM,Arial,sans-serif;text-align:left}
.intro-chip-label>b{font-size:clamp(12px,2.4vw,17px);letter-spacing:-.06em}.intro-chip-label>span{font-size:clamp(6px,1.2vw,9px);margin-top:3px;letter-spacing:.03em}.intro-chip-label>small{font-size:clamp(5px,1vw,7px);margin-top:3px;color:#555}
.intro-pin{position:absolute;bottom:12px;left:calc(50% - 5px);width:10px;height:10px;border:1px solid #777;border-radius:50%;background:#eee9df;box-shadow:inset 0 0 0 2px #b8b5ad;z-index:9}
.intro-book-shadow{position:absolute;width:220px;max-width:70%;height:12px;border-radius:50%;background:rgba(17,17,17,.1);bottom:-18px;left:50%;transform:translateX(-50%) scaleX(.5);filter:blur(5px)}
.intro-finding{font-family:Grotesque,Arial,sans-serif;font-size:clamp(16px,2vw,21px);letter-spacing:-.025em;margin-top:40px;text-align:center}
.intro-wash{position:absolute;inset:0;background:var(--orange);clip-path:circle(0 at 50% 42%);z-index:10}
.intro-stamp{position:relative;z-index:11;text-align:center;opacity:0;transform:translateY(8px) rotate(-4deg) scale(1.12);width:min(84vw,650px)}
.intro-wordmark{font-family:Grotesque,Arial,sans-serif;font-weight:500;font-size:clamp(34px,8.7vw,78px);letter-spacing:-.055em;line-height:1.1;white-space:nowrap;display:flex;align-items:flex-start;justify-content:center;gap:.07em}
.intro-wordmark>span{display:inline-flex;padding-top:.08em}.intro-wordmark .brand-mark{width:.34em;height:.34em}
.intro-stamp-rule{display:block;height:4px;background:#fff;max-width:420px;width:80%;margin:18px auto 22px}
.intro-stamp p{font-size:10px;letter-spacing:.15em;font-weight:600}
.intro-skip{position:absolute;z-index:12;bottom:max(22px,env(safe-area-inset-bottom));inset-inline-end:28px;display:flex;align-items:center;gap:14px;background:transparent;min-height:44px;padding:8px 6px;font-size:12px;line-height:1.4;border-bottom:1px solid currentColor}
.intro-skip .icon{width:17px;height:17px}.intro-skip:hover{background:rgba(255,255,255,.2)}
.intro-playing .site-intro{animation:colour-intro-exit 1700ms steps(1,end) both}
.intro-playing .intro-swatch{animation:colour-fan 1700ms steps(1,end) both}
.intro-playing .intro-swatch-orange{animation-name:colour-select}
.intro-playing .intro-book{animation:colour-book 1700ms steps(1,end) both}
.intro-playing .intro-book-shadow{animation:colour-shadow 1700ms steps(1,end) both}
.intro-playing .intro-wash{animation:colour-fill 1700ms steps(1,end) both}
.intro-playing .intro-stamp{animation:colour-stamp 1700ms steps(1,end) both}
@keyframes colour-fan{0%,7%{transform:rotate(calc(var(--stack)*.5deg))}13%{transform:rotate(calc(var(--fan-angle)*.28))}19%{transform:rotate(calc(var(--fan-angle)*.68))}25%,33%{transform:rotate(var(--fan-angle))}39%{transform:rotate(calc(var(--fan-angle) - 5deg))}45%{transform:rotate(calc(var(--fan-angle) + 3deg))}51%,100%{transform:rotate(var(--fan-angle))}}
@keyframes colour-select{0%,7%{transform:rotate(3.5deg)}13%{transform:rotate(19deg)}19%{transform:rotate(46deg)}25%,33%{transform:rotate(68deg)}39%{transform:rotate(54deg)}45%{transform:rotate(30deg)}51%{transform:translateY(-8px) rotate(6deg)}57%,100%{transform:translateY(-20px) rotate(3deg)}}
@keyframes colour-book{0%,19%{transform:rotate(-3deg) translateY(6px)}25%,33%{transform:rotate(-1deg)}39%{transform:rotate(2deg) translateX(2px)}45%{transform:rotate(-2deg)}51%,100%{transform:rotate(-3deg)}}
@keyframes colour-shadow{0%,19%{transform:translateX(-50%) scaleX(.5)}25%,100%{transform:translateX(-50%) scaleX(1)}}
@keyframes colour-fill{0%,58%{clip-path:circle(0 at 50% 42%)}62%{clip-path:circle(9% at 50% 42%)}66%{clip-path:circle(32% at 50% 42%)}70%,100%{clip-path:circle(150% at 50% 42%)}}
@keyframes colour-stamp{0%,70%{opacity:0;transform:translateY(8px) rotate(-4deg) scale(1.12)}74%{opacity:1;transform:translateY(2px) rotate(2deg) scale(.96)}79%,100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes colour-intro-exit{0%,87%{transform:translateY(0);visibility:visible}91%{transform:translateY(-22%)}95%{transform:translateY(-63%)}100%{transform:translateY(-101%);visibility:hidden}}
@keyframes colour-intro-fade{from{opacity:1}to{opacity:0}}
html.intro-minimal .site-intro{animation:colour-intro-fade 180ms linear both!important;animation-play-state:running!important}
.intro-minimal .intro-paper,.intro-minimal .intro-wash,.intro-minimal .intro-skip{display:none}.intro-minimal .intro-stamp{opacity:1;transform:none}.intro-minimal .intro-stamp-rule{background:var(--orange)}
[dir=rtl] .intro-finding,[dir=rtl] .intro-edition,[dir=rtl] .intro-stamp p,[dir=rtl] .intro-skip{font-family:Arabic,Tahoma,sans-serif;letter-spacing:0}
[dir=rtl] .intro-wordmark{font-family:Arabic,Tahoma,sans-serif;letter-spacing:0;direction:rtl}
@media(max-height:600px){.intro-book{--swatch-width:56px}.intro-paper{padding-top:60px;padding-bottom:75px}.intro-finding{margin-top:25px}.intro-crop-tl,.intro-crop-tr{top:55px}}
@media(max-width:380px){.intro-edition{inset-inline-start:20px}.intro-crop-tl,.intro-crop-bl{left:20px}.intro-crop-tr,.intro-crop-br{right:20px}.intro-skip{inset-inline-end:20px}}
@media print{.site-intro{display:none!important}html.intro-pending{overflow:visible}}
