#living-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;pointer-events:none;transition:opacity .3s ease}
#living-hero.awake{opacity:1}
.stage{overflow:clip}
.stage-title>.slate{justify-self:start;padding:5px 10px;margin-left:-10px;background:rgba(6,5,4,.88)}
html.motion .stage .poster{animation-play-state:paused}
html.motion .stage.poster-revealed .poster{animation-play-state:running}
.stage[data-state="playing"] .stage-title,.stage[data-state="paused"] .stage-title{display:none}
.stage[data-state="playing"]>.poster,.stage[data-state="paused"]>.poster{opacity:0}
.fullscreen-caption{display:none}
.stage:fullscreen,.stage.immersive{width:100vw;height:100dvh;max-width:none!important;aspect-ratio:auto!important}
.stage.immersive{position:fixed;inset:0;z-index:100!important}
body.film-immersive{overflow:hidden}
.stage:fullscreen video,.stage.immersive video{height:calc(100% - 110px)}
.stage:fullscreen .controls,.stage.immersive .controls{bottom:110px}
.stage:fullscreen .fullscreen-caption,.stage.immersive .fullscreen-caption{display:grid;place-items:center;position:absolute;inset:auto 5vw 0;min-height:110px;margin:0;color:var(--bone);font:clamp(18px,2.2vw,28px)/1.3 var(--serif);text-align:center;z-index:4}
.film-transcript{margin-top:24px;max-width:70ch;color:var(--bone-dim);font:14px/1.8 var(--sans)}
.film-transcript summary{cursor:pointer;color:var(--bone);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.film-transcript ol{padding-left:1.4em;margin-top:20px}
.film-transcript li{margin:.65em 0}
@media(max-width:820px){
 .stage[data-state="playing"] .controls,.stage[data-state="paused"] .controls{display:grid;grid-template-columns:auto auto 1fr auto;gap:0 14px;padding:4px 14px 6px}
 .controls .c-track{grid-column:1/-1;grid-row:1;height:18px;min-width:0}
 .controls .c-time{grid-column:2;grid-row:2}
 .controls #c-play{grid-column:1;grid-row:2}
 .controls #c-mute{grid-column:3;grid-row:2}
 .controls .c-full{display:block;grid-column:4;grid-row:2;font-size:9px}
 .controls #c-close{position:absolute;right:12px;bottom:calc(100% + 6px);background:#0c0a08d9;border-radius:30px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){#living-hero{display:none}}

/* ---- the ball: rides the timeline thread; falls back to the corner on small screens ---- */
.ball-guide{position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(16px,3vh,34px);z-index:60;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone);opacity:0;transition:opacity .6s ease,top .45s cubic-bezier(.2,.8,.2,1)}
.ball-guide.on-thread{right:auto;bottom:auto;transform:translate(-17px,-50%)}
.ball-guide.in{opacity:1}
.ball-guide .ball{width:34px;height:34px;border-radius:50%;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));transform:rotate(var(--roll,0deg));transition:transform .45s cubic-bezier(.2,.8,.2,1),width .3s,height .3s}
.ball-guide:not(.on-thread) .ball{width:50px;height:50px;animation:ball-float 3.2s ease-in-out infinite}
.ball-guide:hover .ball,.ball-guide:focus-visible .ball{width:44px;height:44px;animation:ball-spin 1.1s linear infinite}
.ball-guide .ball-label{font:11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:rgba(6,5,4,.88);border:1px solid rgba(255,255,255,.12);padding:9px 12px;border-radius:2px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;white-space:nowrap;color:var(--bone)}
.ball-guide .ball-label b{display:block;font:italic 15px/1.2 var(--serif,Georgia,serif);letter-spacing:0;text-transform:none;color:#f0c35a;margin-top:3px}
.ball-guide:not(.on-thread){flex-direction:row-reverse}
.ball-guide:not(.on-thread) .ball-label{transform:translateX(8px)}
.ball-guide:hover .ball-label,.ball-guide:focus-visible .ball-label,.ball-guide.show-label .ball-label{opacity:1;transform:none}
.ball-guide.go .ball{animation:ball-roll .55s cubic-bezier(.4,0,1,1) forwards}
.ball-guide:focus-visible{outline:2px solid #f0c35a;outline-offset:4px;border-radius:40px}
@keyframes ball-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(6deg)}}
@keyframes ball-spin{to{transform:rotate(360deg)}}
@keyframes ball-roll{to{transform:translateX(160px) rotate(420deg);opacity:0}}
@media(max-width:820px){.ball-guide .ball-label{display:none}}
@media(prefers-reduced-motion:reduce){.ball-guide .ball,.ball-guide:hover .ball,.ball-guide:not(.on-thread) .ball{animation:none}.ball-guide{transition:opacity .3s}}

/* ---- the honours: his grandfather in later years, his card, and what the titles mean ---- */
.honours{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(40px,6vw,80px);padding-top:clamp(28px,4vw,48px);border-top:1px solid rgba(236,227,210,.14)}
.honours-pics{display:grid;gap:22px}
.honours-pics .print.card img{background:#f3ead8;padding:clamp(12px,2vw,28px);box-sizing:border-box}
.honours-legend .slate{color:var(--amber);margin-bottom:14px}
.honours-legend dl{margin:22px 0;display:grid;gap:14px 0}
.honours-legend dt{font:italic clamp(17px,1.5vw,21px)/1.25 var(--serif,Georgia,serif);color:var(--bone)}
.honours-legend dd{margin:4px 0 0;font:15px/1.6 var(--sans);color:var(--bone-dim,rgba(236,227,210,.72));max-width:52ch}
@media(max-width:900px){.honours{grid-template-columns:1fr}}

/* ---- kin tags: who this is to Coco, on every family caption ---- */
figcaption .kin{display:inline-block;margin:0 0 6px;padding:3px 8px 2px;border:1px solid rgba(240,195,90,.55);border-radius:2px;color:#f0c35a;font:10px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;font-style:normal;vertical-align:middle}
figcaption .kin.small{margin:0 2px;padding:1px 6px;font-size:9px;letter-spacing:.12em;border-color:rgba(236,227,210,.35);color:var(--bone)}
figcaption b+span,figcaption .kin+b{display:block}