/* Avoté: an outlined editorial wordmark; the same anchor travels into the header. */
.avote-wordmark{display:inline-flex;position:relative;width:120px;height:45px;flex:none;line-height:1;letter-spacing:0}
.avote-wordmark img{display:block;width:100%;height:100%;object-fit:contain}
.header #brandJourney{transform-origin:0 0;will-change:transform,opacity;opacity:0;z-index:25;filter:drop-shadow(0 3px 12px #0005)}
.brand-tagline{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;font-family:Outfit,sans-serif;font-size:5px;letter-spacing:.1px;font-weight:400;color:#d2d7e4;pointer-events:none;line-height:1.3}
.opening-sheet{isolation:isolate}.opening-copy{position:relative;z-index:2}
.opening-flap{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.opening-flap path{fill:none;stroke:#c5c5bd;stroke-width:.8;opacity:.55;vector-effect:non-scaling-stroke}
.opening-flap .envelope-bottom-seams{opacity:.25}
/* The lightweight envelope has a full rectangular body with an inset flap too. */
.scene:not(.webgl-ready) .paper{width:180px;height:110px;top:-150px;opacity:1!important;transform-origin:50% 50%}
.scene:not(.webgl-ready) .paper-bottom{top:0;border:0;overflow:hidden}
.scene:not(.webgl-ready) .paper-top{top:0;height:75px;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateX(calc((1 - var(--fold)) * -32.4deg));backface-visibility:visible;background:linear-gradient(150deg,#f5f4ed,#e5e5dc);filter:drop-shadow(0 1px 0 #b6b6aa99)}
.scene:not(.webgl-ready) .paper .envelope-seam{opacity:.5}
.flying-card .portrait-caption strong{font-size:clamp(19px,1.85vw,25px)}
@media(max-width:700px){.avote-wordmark{width:104px;height:39px}.header{padding-left:20px}.footer .avote-wordmark{width:112px;height:42px}.flying-card .portrait-caption strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.header #brandJourney{opacity:1;transform:none!important}.brand-tagline{display:none}.avote-wordmark{will-change:auto}}

/* A scroll-driven veil behind the wordmark, clear again once it reaches the menu. */
.brand-veil{position:fixed;inset:0;z-index:9;pointer-events:none;background:rgba(3,6,12,.62);opacity:var(--brand-dim,0);will-change:opacity}
@media(prefers-reduced-motion:reduce){.brand-veil{display:none}}