/* Reading surface and the page turn for the encyclopedia. */
body.ency-open{overflow-x:hidden;overflow-y:auto}
.encyclopedia{height:auto;min-height:100svh;overflow:visible;background:var(--paper);--paper:#d9e5e8;--paper-ink:#163047;--paper-line:#6587a0}
.ency-cover{position:relative;min-height:100svh;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 56% 70% at 78% 55%,color-mix(in srgb,var(--paper-line) 24%,transparent),transparent 75%),var(--paper);color:var(--paper-ink);transition:background-color .45s,color .45s}
.cover-texture{position:absolute;inset:0;pointer-events:none;opacity:.16;background:radial-gradient(ellipse at 83% 26%,#ffffffaa 0 1px,transparent 2px),radial-gradient(ellipse at 65% 78%,#ffffff77 0 1px,transparent 2px),linear-gradient(145deg,transparent 38%,#ffffff22 38.1%,transparent 38.3%);background-size:43px 47px,59px 71px,100% 100%;mask-image:linear-gradient(90deg,transparent 25%,#000 100%)}
.cover-art[hidden]{display:none}.cover-art{position:absolute;inset:0 0 0 38%;overflow:hidden;pointer-events:none}.cover-water{position:absolute;width:min(66vw,900px);right:-7%;bottom:-4%;opacity:.62}.cover-vorl{position:absolute;height:min(85vh,780px);width:auto;max-width:70%;object-fit:contain;right:6%;bottom:-10%;filter:drop-shadow(0 20px 35px #17334a22)}
.ency-cover .banner-zone{position:fixed;z-index:39}
.ency-intro{top:37%;z-index:2;color:var(--paper-ink)}.ency-intro h1{font:normal clamp(48px,6.5vw,90px)/1.02 Georgia,serif;letter-spacing:-.04em}.ency-intro .eyebrow{display:none;color:var(--paper-line)}.ency-intro p:not(.eyebrow){color:color-mix(in srgb,var(--paper-ink) 78%,transparent)}.ency-bottom{color:color-mix(in srgb,var(--paper-ink) 62%,transparent)}
.race-article{position:relative;min-height:100vh;color:var(--paper-ink);background:radial-gradient(ellipse 70% 28% at 95% 7%,#fff4,transparent 85%),radial-gradient(ellipse 60% 35% at 0% 65%,#41657a12,transparent 75%),var(--paper);transition:background-color .4s,color .4s}
.race-article:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(112deg,transparent 0 75px,#ffffff22 76px 77px,transparent 78px 160px)}
.article-inner{position:relative;width:min(1240px,calc(100% - 112px));margin:auto;padding:110px 0 170px}
.article-header{margin:0 0 66px;padding:0 0 28px;border-bottom:1px solid color-mix(in srgb,var(--paper-ink) 17%,transparent)}.article-header h2{font:normal clamp(44px,5vw,76px)/1.04 Georgia,serif;letter-spacing:-.035em;margin:0}.article-subtitle{font:normal clamp(23px,2.5vw,34px)/1.25 Georgia,serif;color:var(--paper-line);margin:12px 0 0}
.article-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,7vw,110px);align-items:center;margin:0 0 125px}
.article-row.reverse .article-image{grid-column:1;grid-row:1}.article-row.reverse .article-copy{grid-column:2;grid-row:1}
.article-copy{max-width:560px}.article-copy h3{font:normal clamp(29px,3vw,42px)/1.13 Georgia,serif;margin:0 0 23px}.article-copy p{font:17px/1.85 Arial,sans-serif;margin:0 0 19px}.article-copy strong{font-weight:700}
.article-image{position:relative;margin:0;display:grid;place-items:center;min-height:300px}.article-image img{display:block;width:100%;height:min(44vw,460px);object-fit:contain;border:0;background:transparent;filter:drop-shadow(0 18px 28px color-mix(in srgb,var(--paper-ink) 16%,transparent))}.article-image figcaption{font:12px/1.4 Arial,sans-serif;letter-spacing:.08em;color:var(--paper-line);margin-top:5px;text-align:center}
.page-corner{position:fixed;right:0;bottom:0;z-index:42;width:105px;height:105px;background:none;border:0;color:var(--next-ink,var(--paper-ink));cursor:pointer;padding:0;filter:drop-shadow(-4px -3px 8px color-mix(in srgb,var(--paper-ink) 25%,transparent))}.page-corner .fold{position:absolute;right:0;bottom:0;width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--next-paper,var(--paper)) 72%,white),var(--next-line,var(--paper-line)));clip-path:polygon(100% 0,0 100%,100% 100%);transition:filter .25s}.page-corner:hover .fold,.page-corner:focus-visible .fold{filter:brightness(1.12)}.page-corner .corner-name{position:absolute;z-index:2;right:8px;bottom:18px;transform:rotate(-45deg);font:700 11px Arial,sans-serif;white-space:nowrap;color:var(--next-ink,var(--paper-ink))}.page-corner:focus-visible{outline:3px solid #f3d894;outline-offset:-5px}
.turn-sheet{position:fixed;inset:0;z-index:38;pointer-events:none;visibility:hidden;transform-origin:100% 100%;background:linear-gradient(110deg,color-mix(in srgb,var(--paper) 88%,white) 0%,color-mix(in srgb,var(--paper) 97%,white) 43%,color-mix(in srgb,var(--paper-line) 40%,white) 50%,color-mix(in srgb,var(--paper) 90%,white) 57%,color-mix(in srgb,var(--paper) 88%,white) 100%);box-shadow:-45px -24px 70px #071b2840;backface-visibility:hidden;will-change:transform}
.turn-sheet:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,#ffffff90 48%,#ffffff22 53%,transparent 67%);opacity:.9}
.encyclopedia.turning .turn-sheet{visibility:visible;animation:page-turn 1450ms cubic-bezier(.4,0,.2,1) forwards}
@keyframes page-turn{0%{transform:perspective(1800px) scaleX(.015) rotateY(0)}12%{transform:perspective(1800px) scaleX(.18) rotateY(-2deg)}50%{transform:perspective(1800px) scaleX(1) rotateY(-5deg)}78%{transform:perspective(1800px) translateX(-8%) rotateY(-150deg)}100%{transform:perspective(1800px) translateX(-108%) rotateY(-180deg)}}
.race-article:has(.article-placeholder){min-height:42vh}.article-placeholder{font:17px/1.7 Arial,sans-serif;color:var(--paper-ink);margin-top:40px}
@media(max-width:800px){.cover-art{left:22%;opacity:.76}.cover-vorl{right:-5%;height:min(70vh,680px);max-width:83%}.cover-water{width:100vw;right:-25%;bottom:-3%}.ency-intro{max-width:75%;top:35%}.article-inner{width:min(100% - 48px,650px);padding:75px 0 110px}.article-row{grid-template-columns:1fr;gap:23px;margin-bottom:90px}.article-row.reverse .article-image,.article-row.reverse .article-copy{grid-column:1;grid-row:auto}.article-row.reverse .article-copy{grid-row:1}.article-row.reverse .article-image{grid-row:2}.article-image img{height:min(85vw,460px)}.article-copy p{font-size:16px;line-height:1.7}.article-header{margin-bottom:55px}.page-corner{width:82px;height:82px}.page-corner .corner-name{font-size:9px;right:5px;bottom:15px}}
@media(prefers-reduced-motion:reduce){.encyclopedia.turning .turn-sheet{animation:none;visibility:hidden}.page-corner .fold{transition:none}}
