/* Scoped to the animated opening; the existing site styles are preserved. */
#csl-intro[hidden],#csl-intro-after[hidden]{display:none}
#csl-intro-shell{position:relative;isolation:isolate}
#csl-intro-fallback{min-height:780px}
#csl-intro{position:absolute;inset:0;z-index:1;background:#eae6dc}
.csl-intro-film{height:100%;position:relative;isolation:isolate;overflow:hidden;background:#eae6dc}
#csl-intro-scene{width:100%;height:100%;display:block}
#csl-intro-water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.csl-intro-film-grain{position:absolute;inset:0;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h160v160H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.csl-intro-story{position:absolute;left:6%;top:12%;max-width:420px;pointer-events:none}
.csl-intro-story .eyebrow{font:600 10px/1.5 Arial,sans-serif;letter-spacing:.23em;color:var(--red);margin:0 0 30px}
#csl-intro-headline{font:400 clamp(46px,5.2vw,82px)/1.03 Georgia,serif;letter-spacing:-.045em;margin:0;text-wrap:balance}
#csl-intro-headline em{font-weight:400;color:var(--red)}
#csl-intro-caption{max-width:290px;font-size:14px;line-height:1.7;color:var(--muted);margin:24px 0 0}
.csl-intro-cta{pointer-events:auto;display:flex;gap:35px;align-items:center;background:var(--red);color:white;padding:15px 19px;font-size:13px;width:fit-content;margin-top:25px}
.csl-intro-cta[hidden]{display:none}
.csl-intro-scene-label{position:absolute;left:6%;bottom:37px;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.17em}
.csl-intro-red-dot{width:5px;height:5px;background:var(--red);border-radius:50%}
.csl-intro-controls{background:#f7f5f0eb;padding:0 12px;position:absolute;right:5.5%;bottom:27px;display:flex;gap:26px}
.csl-intro-controls button,#csl-intro-replay{background:none;border:0;color:var(--ink);padding:10px 0;font-size:12px}
.csl-intro-controls button span{margin-left:14px}
.csl-intro-controls button[hidden]{display:none}
.csl-intro-timeline{height:2px;background:#d6d0c5;position:absolute;bottom:0;left:0;right:0}
.csl-intro-timeline span{display:block;height:100%;background:var(--red);width:0}
.csl-intro-after{min-height:40px;margin:0 5.5%;display:flex;justify-content:flex-end;align-items:center}
.csl-intro-after p{font-size:10px;color:var(--muted)}
#csl-intro-replay{color:var(--muted)}
@media(max-width:760px){
 #csl-intro-fallback{min-height:680px}
 .csl-intro-story{top:7%;left:7%;max-width:85%}
 .csl-intro-story .eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:22px}
 #csl-intro-headline{font-size:50px;line-height:1.02;max-width:330px}
 #csl-intro-caption{margin-top:15px;font-size:13px;max-width:260px}
 .csl-intro-cta{margin-top:17px;padding:11px 15px;font-size:12px}
 .csl-intro-scene-label{left:7%;bottom:30px;font-size:8px;letter-spacing:.1em}
 .csl-intro-controls{right:6%;bottom:20px;gap:17px}
 .csl-intro-controls button{font-size:11px}
 .csl-intro-controls button span{margin-left:7px}
 .csl-intro-after p{max-width:195px;font-size:9px;line-height:1.8}
 #csl-intro-replay{max-width:120px;text-align:right;font-size:11px}
}

.csl-intro-signature{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:3%;align-items:center;justify-content:center;font-family:Georgia,serif;opacity:0;pointer-events:none;white-space:nowrap}
.csl-intro-signature img{width:14%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;flex-shrink:0}
.csl-intro-signature span{font-size:1em;line-height:1.06;letter-spacing:.025em}
.csl-intro-enter{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);border:2px solid var(--red);border-radius:16px;background:#000;color:#fff;padding:13px 27px;font:400 20px/1.2 Georgia,serif;white-space:nowrap;min-height:48px;cursor:pointer}
.csl-intro-enter:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.csl-intro-enter[hidden]{display:none}
.csl-intro-enter[aria-disabled="true"]{cursor:default}
@media(max-width:760px){
 .csl-intro-film{height:min(100%,max(600px,calc(100svh - 220px)));max-height:680px}
 .csl-intro-signature{top:35px}
 .csl-intro-enter{bottom:60px}
}

/* Keep the added thought on one deliberate line before the final emphasis. */
.csl-created-line{display:block;font-size:.52em;line-height:1.2;letter-spacing:-.025em;margin:.28em 0 .32em}

/* Final picture frame: a substantial red band, a clear gap, then fine black. */
.csl-intro-finish-frame{position:absolute;top:12px;bottom:12px;left:50%;transform:translateX(-50%);box-sizing:border-box;border:8px solid var(--red);outline:1px solid #000;outline-offset:4px;pointer-events:none;z-index:2}
.csl-intro-finish-frame[hidden]{display:none}
@media(max-width:760px){.csl-intro-finish-frame{border-width:5px;outline-offset:3px}}

/* Opening screen: the header and a full-width framed film, with entry below it. */
body:has(#csl-intro:not([hidden])){height:100svh;display:flex;flex-direction:column}
body:has(#csl-intro:not([hidden]))>.preview-bar,body:has(#csl-intro:not([hidden]))>header{flex-shrink:0}
body:has(#csl-intro:not([hidden]))>main{flex:1;display:flex;flex-direction:column;min-height:420px}
#csl-intro-shell:has(#csl-intro:not([hidden])){flex:1;min-height:420px}
#csl-intro-shell:has(#csl-intro:not([hidden]))~*,body:has(#csl-intro:not([hidden]))>footer{display:none}
#csl-intro-shell:has(#csl-intro:not([hidden])) #csl-intro-fallback{display:none}
#csl-intro-shell:has(#csl-intro[data-entering="true"]) #csl-intro-fallback{display:grid;position:absolute;inset:0;overflow:hidden}
#csl-intro,.csl-intro-film{background:var(--paper)}
.csl-intro-film{--csl-frame-border:8px;height:100%;max-height:none}
.csl-intro-story,.csl-intro-scene-label,.csl-intro-timeline,.csl-intro-film-grain{display:none}
.csl-intro-finish-frame{left:0;top:0;bottom:auto;transform:none;border-width:var(--csl-frame-border)}
.csl-intro-enter{left:0;top:50%;bottom:auto;transform:translate(-50%,-50%);box-sizing:border-box;border-width:var(--csl-frame-border);padding:13px 18px;z-index:3}
.csl-intro-controls{right:auto;bottom:auto;transform:translateX(-100%);gap:18px;border-radius:4px;padding:0 10px;z-index:3}
@media(max-width:760px){
 .csl-intro-film{--csl-frame-border:5px;height:100%;max-height:none}
 .csl-intro-enter{font-size:18px;line-height:1.2;white-space:nowrap;padding:10px 18px;min-height:56px;border-radius:16px}
 .csl-intro-enter span{display:inline}
 .csl-intro-controls{gap:12px}
 .csl-intro-controls button{font-size:10px}
}

/* Larger signature within the animation; canonical logo artwork is unchanged. */
.csl-intro-signature{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.3em}
.csl-intro-signature img{width:2.5846153846em}
.csl-intro-signature .csl-brand-left{display:flex;align-items:center;justify-self:end;gap:.3em}
.csl-intro-signature>.csl-brand-word{justify-self:start}
.csl-intro-signature .csl-brand-word{font-size:.85em}
.csl-intro-signature .csl-brand-amp{display:inline-block;font-size:1.7em;line-height:.75;vertical-align:-.06em;letter-spacing:0;margin:0 .025em;color:var(--red);-webkit-text-stroke-width:clamp(1px,.018em,2.4px);-webkit-text-stroke-color:#000;paint-order:stroke fill}

/* A quiet, readable direction before the phone animation begins. */
.csl-intro-rotation{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:36px 22px 88px;background:#24221f;color:#f7f3eb;text-align:center}
.csl-intro-rotation[hidden]{display:none}
.csl-intro-rotation svg{width:140px;height:120px;flex:none}
.csl-intro-rotation p{margin:0;font:400 clamp(25px,6.6vw,34px)/1.35 var(--serif,Georgia,serif);letter-spacing:.005em;-webkit-text-stroke:.45px #000;paint-order:stroke fill;text-wrap:balance}
.csl-intro-rotation p>span{display:block;margin-bottom:.12em}
.csl-intro-rotation strong{font-weight:400;color:#e14657}
#csl-intro[data-awaiting-turn] .csl-intro-controls{z-index:5;left:auto!important;right:24px;top:auto!important;bottom:24px;transform:none}
#csl-intro[data-awaiting-turn] #csl-intro-play{display:none}
@media(max-width:1024px) and (max-height:600px) and (orientation:landscape){
 body:has(#csl-intro:not([hidden]))>main,#csl-intro-shell:has(#csl-intro:not([hidden])){min-height:0}
 body:has(#csl-intro:not([hidden])) header.site-header{min-height:58px;padding-top:7px;padding-bottom:7px}
 body:has(#csl-intro:not([hidden])) header.site-header .brand{font-size:16px;gap:9px}
 body:has(#csl-intro:not([hidden])) header.site-header .brand img{width:40px;height:40px}
 body:has(#csl-intro:not([hidden])) .csl-intro-enter{min-height:44px;padding:6px 14px;font-size:15px}
}