body{margin:0;background:#e9e4d8;color:#15140f;font-family:'Instrument Sans',system-ui,sans-serif;--fg-green:#14392b;--fg-clay:#7a5c46;--fg-play:#f0a92b;--fg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
a:hover{color:#14392b;text-decoration:underline;text-underline-offset:.25em}
:focus-visible{outline:3px solid #15140f;outline-offset:3px;box-shadow:0 0 0 6px #f0a92b}
@media (forced-colors:active){:focus-visible{box-shadow:none}}
::selection{background:#14392b;color:#f3efe6}
@keyframes st-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-rise]{animation:st-rise .8s cubic-bezier(.2,.8,.2,1) both}
@supports (animation-timeline:view()){[data-rise]{animation-timeline:view();animation-range:entry 0% entry 55%}}
@media (prefers-reduced-motion:reduce){[data-rise]{animation:none!important}}
@keyframes ul-arrive{from{opacity:0}to{opacity:1}}
/* ═══ OVERTURE 2.0 · the word is a window onto the photograph. One pinned stage (260vh): the scroll
   zooms through the letters until the photograph is the hero; the clean photo and its veils fade
   over, the type turns ink → cream, credit and doors arrive. CSS view-timeline; no libraries. ═══ */
.ov2{timeline-scope:--ov2}
.ov2-stage{position:relative;height:260vh;view-timeline:--ov2 block}
.ov2-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.ov2-a{animation-timeline:--ov2;animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both}
/* the letters are windows: the photograph stays fixed to the frame while they grow, so the zoom
   lands on the hero itself. Exponential curve = constant perceived speed. */
.ov2-word{transform-box:fill-box;transform-origin:50% 50%;animation-name:ov2-zoom;animation-range:contain 0% contain 85%}
.ov2-ink{animation-name:ov2-zoom,ov2-out;animation-range:contain 0% contain 85%,contain 0% contain 26%}
.ov2-white{animation-name:ov2-out;animation-range:contain 0% contain 26%}
.ov2-cue{animation-name:ov2-out;animation-range:contain 0% contain 12%}
@keyframes ov2-out{to{opacity:0}}
@keyframes ov2-zoom{0%{transform:scale(1)}25%{transform:scale(2.3)}50%{transform:scale(5.2)}75%{transform:scale(12)}100%{transform:scale(28)}}
.ov2-clean{opacity:0;animation-name:ov2-in;animation-range:contain 60% contain 78%}
.ov2-fadeout{animation-name:ov2-out;animation-range:contain 0% contain 26%}
.ov2-cream{animation-name:ov2-cream;animation-range:contain 74% contain 90%}
@keyframes ov2-cream{to{color:#f3efe6}}
.ov2-late{opacity:0;animation-name:ov2-in;animation-range:contain 88% contain 100%}
@keyframes ov2-in{to{opacity:1}}

/* Once resolved, the overture does not run backwards: the stage collapses to the hero. */
.ov2-done .ov2-stage{height:100vh}.ov2-done .ov2-pin{position:relative}.ov2-done .ov2-mask-svg,.ov2-done .ov2-cue{display:none!important}
.ov2-done .ov2-clean,.ov2-done .ov2-late{opacity:1!important;animation:none!important}.ov2-done .ov2-cream{color:#f3efe6!important;animation:none!important}.ov2-done .ov2-fadeout{display:none}.ov2-done 
@supports not (animation-timeline:view()){
 .ov2-stage{height:auto}.ov2-pin{position:relative}.ov2-mask-svg{display:none!important}
 .ov2-clean,.ov2-late{opacity:1}.ov2-cream{color:#f3efe6}.ov2-fadeout{display:none}
}
@media (prefers-reduced-motion:reduce){
 .ov2-stage{height:auto}.ov2-pin{position:relative}.ov2-mask-svg{display:none!important}
 .ov2-clean,.ov2-late{opacity:1!important;animation:none!important}.ov2-cream{color:#f3efe6!important;animation:none!important}.ov2-fadeout{display:none}
}
/* ── Overture motion: each element enters from its own side, quickly, with a touch of
   overshoot. The axis states the idea — the programmes arrive from left and right, he rises
   between them. Everything is resolved inside two seconds and reduced-motion drops it all. ── */
@keyframes ov-down{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes ov-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ov-in-left{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes ov-in-right{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.ov .ov-nav > a{animation:ov-down .62s cubic-bezier(.34,1.24,.5,1) both}
.ov .ov-nav > a:nth-child(1){animation-delay:.34s}
.ov .ov-nav > a:nth-child(2){animation-delay:.4s}
.ov .ov-nav > a:nth-child(3){animation-delay:.46s}
.ov .ov-nav > a:nth-child(4){animation-delay:.52s}
.ov .h-nav > a:first-child{animation:ov-in-left .7s cubic-bezier(.2,.9,.2,1) .26s both}
.ov .h-ident{animation:ov-in-left .8s cubic-bezier(.2,.9,.2,1) .62s both}
.ov .h-statement > span{animation:h-linein .85s cubic-bezier(.2,.9,.2,1) .82s both}
.ov .h-doors > a:nth-child(1){animation:ov-up .66s cubic-bezier(.34,1.24,.5,1) 1.06s both}
.ov .h-doors > a:nth-child(2){animation:ov-up .66s cubic-bezier(.34,1.24,.5,1) 1.16s both}
.ov .h-credit{animation:ov-in-left .7s cubic-bezier(.2,.9,.2,1) 1.28s both}
.ov .ov-from-left{animation:ov-in-left .9s cubic-bezier(.2,.9,.2,1) both}
.ov .ov-from-right{animation:ov-in-right .9s cubic-bezier(.2,.9,.2,1) both}
.ov .ov-from-below{animation:ov-up 1s cubic-bezier(.16,1,.3,1) both}
@supports (animation-timeline:view()){
 .ov .ov-from-left,.ov .ov-from-right,.ov .ov-from-below{animation-timeline:view();animation-range:entry 4% entry 62%}
}
@supports not (animation-timeline:view()){
 .ov .ov-from-left{animation-delay:.1s}.ov .ov-from-below{animation-delay:.2s}.ov .ov-from-right{animation-delay:.3s}
}
@media (prefers-reduced-motion:reduce){
 .ov .ov-nav > a,.ov .h-nav > a:first-child,.ov .h-ident,.ov .h-statement > span,
 .ov .h-doors > a,.ov .h-credit,.ov .ov-from-left,.ov .ov-from-right,.ov .ov-from-below{animation:none!important;opacity:1!important;transform:none!important}
}
/* Overture: the photograph opens from its own centre — one slow, uncovered reveal. */
@keyframes ov-open{from{transform:scale(1.045)}to{transform:scale(1)}}
.ov-hero{animation:none}
@media (prefers-reduced-motion:reduce){.ov-hero{animation:none}}
/* ═══ THE OVERTURE SEQUENCE ═══ built one approved action at a time.
   ACTION 01 · THE MARK — approved: it arrives alone on paper. ═══ */
@keyframes ov-pop{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
@keyframes ov-mark-land{0%{opacity:0;transform:scale(.88)}58%{opacity:1;transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}
/* ACTION 02 · THE TREMOR — approved. Four jolts at 45–50ms, then a power3.out settle:
   -3/-1.2° → +3/+1° → -1/-0.35° → 0, total 0.34s. */
@keyframes ov-tremor{
 0%{transform:translate3d(0,0,0) rotate(0)}
 13.2%{transform:translate3d(-3px,0,0) rotate(-1.2deg);animation-timing-function:linear}
 26.5%{transform:translate3d(3px,0,0) rotate(1deg);animation-timing-function:linear}
 41.2%{transform:translate3d(-1px,0,0) rotate(-.35deg);animation-timing-function:cubic-bezier(.16,1,.3,1)}
 100%{transform:translate3d(0,0,0) rotate(0)}
}
#ov-mark .ov-mark-name{animation:ov-mark-land 1.4s cubic-bezier(.22,1.1,.36,1) .3s both!important}
/* The word holds; only the emblem trembles. */
@keyframes ov-rattle-grow{0.00%{transform:translate3d(-0.25px,0.09px,0) rotate(-0.08deg)}2.17%{transform:translate3d(0.25px,-0.09px,0) rotate(0.08deg)}4.35%{transform:translate3d(-0.26px,0.09px,0) rotate(-0.08deg)}6.52%{transform:translate3d(0.27px,-0.09px,0) rotate(0.09deg)}8.70%{transform:translate3d(-0.28px,0.10px,0) rotate(-0.09deg)}10.87%{transform:translate3d(0.30px,-0.10px,0) rotate(0.10deg)}13.04%{transform:translate3d(-0.32px,0.11px,0) rotate(-0.11deg)}15.22%{transform:translate3d(0.35px,-0.12px,0) rotate(0.12deg)}17.39%{transform:translate3d(-0.38px,0.13px,0) rotate(-0.13deg)}19.57%{transform:translate3d(0.41px,-0.14px,0) rotate(0.14deg)}21.74%{transform:translate3d(-0.45px,0.16px,0) rotate(-0.16deg)}23.91%{transform:translate3d(0.49px,-0.17px,0) rotate(0.17deg)}26.09%{transform:translate3d(-0.54px,0.19px,0) rotate(-0.19deg)}28.26%{transform:translate3d(0.59px,-0.20px,0) rotate(0.21deg)}30.43%{transform:translate3d(-0.64px,0.22px,0) rotate(-0.23deg)}32.61%{transform:translate3d(0.70px,-0.24px,0) rotate(0.25deg)}34.78%{transform:translate3d(-0.76px,0.27px,0) rotate(-0.27deg)}36.96%{transform:translate3d(0.82px,-0.29px,0) rotate(0.30deg)}39.13%{transform:translate3d(-0.89px,0.31px,0) rotate(-0.32deg)}41.30%{transform:translate3d(0.97px,-0.34px,0) rotate(0.35deg)}43.48%{transform:translate3d(-1.04px,0.37px,0) rotate(-0.38deg)}45.65%{transform:translate3d(1.13px,-0.39px,0) rotate(0.41deg)}47.83%{transform:translate3d(-1.21px,0.42px,0) rotate(-0.45deg)}50.00%{transform:translate3d(1.30px,-0.45px,0) rotate(0.48deg)}52.17%{transform:translate3d(-1.39px,0.49px,0) rotate(-0.52deg)}54.35%{transform:translate3d(1.49px,-0.52px,0) rotate(0.55deg)}56.52%{transform:translate3d(-1.59px,0.56px,0) rotate(-0.59deg)}58.70%{transform:translate3d(1.70px,-0.59px,0) rotate(0.63deg)}60.87%{transform:translate3d(-1.81px,0.63px,0) rotate(-0.67deg)}63.04%{transform:translate3d(1.92px,-0.67px,0) rotate(0.72deg)}65.22%{transform:translate3d(-2.04px,0.71px,0) rotate(-0.76deg)}67.39%{transform:translate3d(2.16px,-0.76px,0) rotate(0.81deg)}69.57%{transform:translate3d(-2.28px,0.80px,0) rotate(-0.85deg)}71.74%{transform:translate3d(2.41px,-0.84px,0) rotate(0.90deg)}73.91%{transform:translate3d(-2.54px,0.89px,0) rotate(-0.95deg)}76.09%{transform:translate3d(2.68px,-0.94px,0) rotate(1.01deg)}78.26%{transform:translate3d(-2.82px,0.99px,0) rotate(-1.06deg)}80.43%{transform:translate3d(2.97px,-1.04px,0) rotate(1.12deg)}82.61%{transform:translate3d(-3.12px,1.09px,0) rotate(-1.17deg)}84.78%{transform:translate3d(3.27px,-1.14px,0) rotate(1.23deg)}86.96%{transform:translate3d(-3.43px,1.20px,0) rotate(-1.29deg)}89.13%{transform:translate3d(3.59px,-1.26px,0) rotate(1.35deg)}91.30%{transform:translate3d(-3.75px,1.31px,0) rotate(-1.41deg)}93.48%{transform:translate3d(3.92px,-1.37px,0) rotate(1.48deg)}95.65%{transform:translate3d(-4.09px,1.43px,0) rotate(-1.54deg)}97.83%{transform:translate3d(4.27px,-1.49px,0) rotate(1.61deg)}100.00%{transform:translate3d(0px,0px,0) rotate(0deg)}}
#ov-mark .ov-phi{animation:ov-rattle-grow 3.70s linear 1.6s 1 both;transform-origin:50% 52%}
/* ACTION 03 · THE NAV. Each item POPS through the paper — no slide, no fade-up: it is
   not there, then it bursts to full size and snaps back. The next pops before the
   previous has settled, so the row goes off like a line of bubbles. */
@keyframes ov-domino{
 0%{opacity:0;transform:scale(.2)}
 1%{opacity:1;transform:scale(.2)}
 46%{opacity:1;transform:scale(1.24)}
 68%{transform:scale(.94)}
 84%{transform:scale(1.03)}
 100%{opacity:1;transform:scale(1)}
}
#ov-mark .ov-mark-nav > a{animation:ov-domino .5s cubic-bezier(.2,.9,.3,1) both;transform-origin:50% 50%;backface-visibility:hidden}
/* No order and no shared direction: they go off scattered across the row, each bursting
   from a different edge, with a clear beat between each. */
#ov-mark .ov-mark-nav > a:nth-child(3){animation-delay:2.3s;transform-origin:50% 100%}
#ov-mark .ov-mark-nav > a:nth-child(5){animation-delay:2.85s;transform-origin:0% 50%}
#ov-mark .ov-mark-nav > a:nth-child(1){animation-delay:3.3s;transform-origin:100% 0%}
#ov-mark .ov-mark-nav > a:nth-child(4){animation-delay:3.65s;transform-origin:50% 0%}
#ov-mark .ov-mark-nav > a:nth-child(2){animation-delay:3.9s;transform-origin:100% 50%}

/* ACTION 04 · THE IDENTITY. Two slides in from the left: the practice line takes the
   position first, then his name arrives under it and pushes the practice across. */
@keyframes ov-slide-in{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes ov-make-room{from{max-width:0}to{max-width:34em}}
@keyframes ov-name-in{from{transform:translateX(-102%)}to{transform:none}}
#ov-mark .ov-ident-practice{animation:ov-slide-in .6s cubic-bezier(.2,.9,.2,1) 4.25s both}
#ov-mark .ov-ident-name{display:inline-block;overflow:hidden;max-width:0;animation:ov-make-room .62s cubic-bezier(.3,.9,.25,1) 4.75s both}
#ov-mark .ov-ident-name > span{display:inline-block;animation:ov-name-in .62s cubic-bezier(.3,.9,.25,1) 4.75s both}

/* ═══ ACTION 05 · THE RESOLVE ═══
   The tremor returns as a full earthquake, the word bursts into fragments of the
   photograph, the fragments fly out to their true positions, and the statement types on.
   The page has resolved as the line finishes. */
@keyframes ov-quake{
 0%{transform:translate3d(0,0,0)}
 6%{transform:translate3d(-3px,2px,0)} 12%{transform:translate3d(4px,-2px,0)} 21%{transform:translate3d(-2px,1px,0)}
 30%{transform:translate3d(0,0,0);animation-timing-function:linear}
 36%{transform:translate3d(-3px,2px,0)} 42%{transform:translate3d(4px,-2px,0)} 51%{transform:translate3d(-2px,1px,0)}
 60%{transform:translate3d(0,0,0);animation-timing-function:linear}
 66%{transform:translate3d(-2px,1px,0)} 72%{transform:translate3d(3px,-1px,0)} 81%{transform:translate3d(-1px,1px,0)}
 100%{transform:translate3d(0,0,0)}
}
@keyframes ov-quake-punch{0%{transform:scale(1)}12%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes ov-word-burst{
 0%{opacity:1;transform:scale(1)}
 34%{opacity:1;transform:scale(1.09)}
 100%{opacity:0;transform:scale(1.3)}
}
@keyframes ov-fleck{
 0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.04) rotate(var(--rz))}
 6%{opacity:1}
 100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
}
@keyframes ov-settle-img{from{opacity:0}to{opacity:1}}
@keyframes ov-type{from{opacity:0}to{opacity:1}}
@keyframes ov-ink{from{color:#15140f}to{color:#f6f3ec}}

.ov-ground-layer{position:absolute;inset:0;animation:ov-quake 1s cubic-bezier(.16,1,.3,1) 5.3s 1 both}
.ov-ground-layer > .ov-confetti{animation:ov-quake-punch .62s cubic-bezier(.16,1,.3,1) 5.3s both}
#ov-mark .ov-mark-name{animation:ov-mark-land 1.4s cubic-bezier(.22,1.1,.36,1) .3s both,ov-word-burst .42s cubic-bezier(.3,.1,.6,1) 5.3s both!important}

.ov-confetti{position:absolute;inset:0;z-index:0;pointer-events:none}
.ov-confetti > i{position:absolute;display:block;opacity:0;background-image:url(img/optimized/04-dance-2048.webp);background-size:1600% 1000%;background-repeat:no-repeat;will-change:transform;animation:ov-fleck .92s cubic-bezier(.22,.78,.24,1) both}
.ov-resolved{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:38% 48%;opacity:0;animation:ov-settle-img .5s ease-out 6.87s both}

/* the top stack sits above the photograph and turns from ink to cream as it arrives; it
   carries its own downward-ramping ground, so wrapping or re-cropping cannot strand a
   glyph outside the ink */
@keyframes ov-ground-in{from{background-color:transparent;background-image:none}to{background-color:transparent}}
#ov-mark .ov-top{background:linear-gradient(180deg,rgba(8,20,15,0) 0%,rgba(8,20,15,0) 100%);animation:ov-top-ground .45s ease-out 5.50s both}
@keyframes ov-top-ground{from{background:linear-gradient(180deg,rgba(8,20,15,0) 0%,rgba(8,20,15,0) 100%)}to{background:linear-gradient(180deg,rgba(8,20,15,.92) 0%,rgba(8,20,15,.86) 52%,rgba(8,20,15,.66) 80%,rgba(8,20,15,.3) 94%,rgba(8,20,15,0) 100%)}}
#ov-mark .ov-mark-nav > a{animation:ov-domino .38s cubic-bezier(.2,.9,.3,1) both,ov-ink .45s ease-out 5.50s both}
#ov-mark .ov-ident{animation:ov-ink .45s ease-out 5.50s both}
#ov-mark .ov-mark-name{z-index:2;position:relative}

.ov-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;box-sizing:border-box;padding:clamp(34px,5cqw,64px) clamp(22px,4cqw,56px) clamp(16px,2.4vh,26px);color:#f6f3ec;background:linear-gradient(0deg,rgba(8,20,15,.93) 0%,rgba(8,20,15,.88) 42%,rgba(8,20,15,.74) 72%,rgba(8,20,15,.44) 92%,rgba(8,20,15,0) 100%);opacity:0;animation:ov-settle-img .4s ease-out 5.28s both}
.ov-stmt{margin:0 0 clamp(18px,2.6vh,30px);width:min(780px,100%);font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(25px,2.4cqw,36px);line-height:1.12;text-wrap:pretty}
.ov-stmt span{opacity:0;animation:ov-type .01s linear both}
.ov-stmt em{font-style:italic}
.ov-foot-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px}
.ov-credit{margin:0;padding:7px 10px;background:rgba(11,24,18,.8);font-size:10px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;max-width:38em;opacity:0;animation:ov-settle-img .5s ease-out 7.22s both}
.ov-doors{display:flex;flex-wrap:wrap;gap:12px}
.ov-door{padding:12px 20px;border:1px solid rgba(246,243,236,.55);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#f6f3ec;opacity:0;animation:ov-settle-img .5s ease-out 7.32s both}
.ov-door-solid{background:#f6f3ec;color:#14392b;border-color:#f6f3ec;animation-delay:7.44s}
.ov-door:hover{background:rgba(246,243,236,.16)}
.ov-door-solid:hover{background:#fff}
@media (prefers-reduced-motion:reduce){
 #ov-mark .ov-mark-name,#ov-mark .ov-phi,#ov-mark .ov-mark-nav > a,#ov-mark .ov-ident-practice,#ov-mark .ov-ident-name > span{animation:none!important;opacity:1!important;transform:none!important}
 #ov-mark .ov-ident-name{animation:none!important;max-width:none!important}
 .ov-ground-layer,.ov-ground-layer > .ov-confetti{animation:none!important;transform:none!important}
 #ov-mark .ov-mark-name{display:none}
 .ov-confetti{display:none}
 .ov-resolved,.ov-foot,.ov-credit,.ov-door{animation:none!important;opacity:1!important}
 .ov-stmt span{animation:none!important;opacity:1!important}
 #ov-mark .ov-mark-nav > a,#ov-mark .ov-ident{color:#f6f3ec!important}
 #ov-mark .ov-top{animation:none!important;background:linear-gradient(180deg,rgba(8,20,15,.92) 0%,rgba(8,20,15,.86) 52%,rgba(8,20,15,.66) 80%,rgba(8,20,15,.3) 94%,rgba(8,20,15,0) 100%)!important}
}

#st-frame .person-axis > div > figure > img{width:auto!important;max-width:100%;max-height:13cqw;height:auto!important;margin:0 auto}
#st-frame .person-axis > div > figure{display:flex;flex-direction:column;align-items:flex-start}
.about-pair-figure{margin:0!important}
.about-pair-copy p{max-width:46ch!important}
.about-pair-figure img{width:100%}
@container (max-width: 760px){
 #st-frame .about-pair{grid-template-columns:minmax(0,1fr)!important}
}
#st-frame{container-type:inline-size}
/* ── Gloss: the ground is a luminous panel, not a matte sheet; photographs lift off it.
   Applied to the proposal only — the Current baselines keep their grain. ── */
#st-frame main:not([data-screen-label$="current"]) .ground-paper{
  background-image:linear-gradient(176deg,#fdfbf7 0%,rgba(253,251,247,.55) 26%,rgba(243,239,230,0) 62%)!important;
}
#st-frame main:not([data-screen-label$="current"]) .ground-green{
  background-image:linear-gradient(176deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.015) 34%,rgba(255,255,255,0) 68%)!important;
}
#st-frame main:not([data-screen-label$="current"]) figure img{
  box-shadow:0 1px 0 rgba(255,255,255,.55),0 26px 50px -32px rgba(20,57,43,.55);
}
/* ── Headings carry weight: page and section heads are a tight, powered sans.
   Serif is reserved for the hero name, the pull-quotes and proper names. ── */
#st-frame main:not([data-screen-label$="current"]) h1,
#st-frame main:not([data-screen-label$="current"]) h2{
  font-family:'Instrument Sans',system-ui,sans-serif!important;
  font-weight:600!important;
  letter-spacing:-.028em!important;
  line-height:1.06!important;
}
#st-frame main:not([data-screen-label$="current"]) h1 em,
#st-frame main:not([data-screen-label$="current"]) h2 em{font-style:normal;opacity:.55}
/* The identity wordmark and the approved hero statement are exempt from the heading rule,
   wherever they appear — the name is always Instrument Serif at its authored tracking. */
#st-frame main:not([data-screen-label$="current"]) h1.h-name,
#st-frame main:not([data-screen-label$="current"]) h2.h-name,
#st-frame main:not([data-screen-label$="current"]) .h-name,
#st-frame section[data-screen-label="Hero"] h1{font-family:'Instrument Serif',Georgia,serif!important;font-weight:400!important}
#st-frame section[data-screen-label="Hero"] h1{letter-spacing:-.01em!important;line-height:1.12!important}
#st-frame main:not([data-screen-label$="current"]) h1.h-name{letter-spacing:-.04em!important;line-height:.94!important}
#st-frame section[data-screen-label="Hero"] h1 em,#st-frame .h-name em{font-style:italic!important;opacity:1!important}
#st-frame main:not([data-screen-label$="current"]) h1.h-statement,
#st-frame main:not([data-screen-label$="current"]) .h-statement{font-family:'Instrument Serif',Georgia,serif!important;font-weight:400!important;letter-spacing:-.008em!important;line-height:1.26!important}
#st-frame main:not([data-screen-label$="current"]) h1.h-statement em,
#st-frame main:not([data-screen-label$="current"]) .h-statement em{font-style:italic!important;opacity:1!important}
/* Page-opening titles get the LV relationship: weighted title, grey standfirst beneath. */
#st-frame main:not([data-screen-label$="current"]) header > h1{font-size:clamp(30px,3.6cqw,48px)!important}
#st-frame main:not([data-screen-label$="current"]) blockquote,
#st-frame main:not([data-screen-label$="current"]) blockquote h2{font-family:'Instrument Serif',Georgia,serif!important;font-weight:400!important;letter-spacing:-.018em!important}
/* About · the writing encloses the photographs: equal width, equal inset, alternating sides */
.about-prose{display:flow-root}
.about-prose > div:last-child{clear:both}
.about-prose .about-float{width:38%}
.about-prose .about-right{float:right;margin:8px 0 22px clamp(20px,3cqw,44px)!important}
.about-prose .about-left{float:left;margin:8px clamp(20px,3cqw,44px) 22px 0!important}
.about-prose .about-wide{clear:both;width:100%;margin:clamp(20px,3cqw,36px) 0 clamp(24px,3cqw,40px)!important}
.about-prose h2,.about-prose h3{clear:none}
.about-prose > div:last-child{clear:both;padding-top:8px}
@container (max-width: 760px){
 #st-frame .about-prose .about-float{float:none!important;width:100%!important;margin:24px 0!important}
}
/* About · arrangement B: a margin sequence — each photograph indents further, years hang left */
.about-band[data-arr="b"]{grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:clamp(26px,3cqw,48px)!important}
.about-band[data-arr="b"] > figure{grid-column:1 / -1!important;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.about-band[data-arr="b"] > figure:nth-of-type(1){width:64%}
.about-band[data-arr="b"] > figure:nth-of-type(2){width:42%;margin-left:22%}
.about-band[data-arr="b"] > figure:nth-of-type(3){width:100%}
.about-band[data-arr="b"] > figure:nth-of-type(4){width:38%;margin-left:44%}
.about-band[data-arr="b"] > div{grid-column:1 / -1!important;max-width:44ch}
/* About · arrangement C: one lead photograph, three small beneath — the Person-spread rule reused */
.about-band[data-arr="c"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:start!important}
.about-band[data-arr="c"] > figure:nth-of-type(1){grid-column:1 / -1!important}
.about-band[data-arr="c"] > figure:nth-of-type(2){grid-column:1!important}
.about-band[data-arr="c"] > figure:nth-of-type(3){grid-column:2!important}
.about-band[data-arr="c"] > figure:nth-of-type(4){grid-column:3!important}
.about-band[data-arr="c"] > figure:nth-of-type(n+2) img{aspect-ratio:4/3;object-fit:cover}
.about-band[data-arr="c"] > div{grid-column:1 / -1!important;max-width:56ch;padding-top:8px}
@container (max-width: 760px){
 #st-frame main .pair-grid{grid-template-columns:minmax(0,1fr)!important}
 #st-frame main [style*="white-space:nowrap"]{white-space:normal!important}
 #st-frame main figure[style*="position:sticky"]{position:static!important}
}
@container (max-width: 760px){
  #st-frame .person-axis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 12px!important}
 #st-frame .person-axis > figure{grid-column:1 / -1!important;order:-1}
 #st-frame .person-axis > div{display:contents!important}
 #st-frame .person-axis > div > figure{grid-column:span 1}
}
.ul-trace{animation:ul-arrive 1.2s ease-out 1.5s both}
/* ── The approved hero entrance, restored: nav, statement, name, doors, credit.
   Plays once on load. No grid, no annotations, no charging streaks. ── */
@keyframes h-fade{from{opacity:0}to{opacity:1}}
@keyframes h-lift{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes h-doors{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes h-linein{from{transform:translateY(110%)}to{transform:none}}
@keyframes h-glint{0%,100%{opacity:0}25%{opacity:.42}}
/* The photograph opens at full strength. The veil arrives as the page settles, and it is
   what leads the eye down to the name — so every piece of type lands with it, never over it. */
@keyframes h-veil{from{opacity:0}to{opacity:1}}
.h-veil{animation:h-veil 1.5s cubic-bezier(.4,0,.5,1) .55s both}
.h-nav{animation:h-fade .8s cubic-bezier(.2,.8,.2,1) .25s both;text-shadow:0 1px 14px rgba(8,22,16,.55)}
.h-ident{animation:h-fade .9s ease-out 1s both}
.h-statement{overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.h-statement > span{display:block;animation:h-linein 1s cubic-bezier(.2,.8,.2,1) 1.15s both}
.h-name{animation:h-lift 1.3s cubic-bezier(.16,1,.3,1) 1.45s both}
.h-doors > a:nth-child(1){animation:h-doors .7s cubic-bezier(.2,.8,.2,1) 1.95s both}
.h-doors > a:nth-child(2){animation:h-doors .7s cubic-bezier(.2,.8,.2,1) 2.07s both}
.h-credit{animation:h-fade .6s ease-out 2.4s both}
.h-glint{position:absolute;width:140px;height:52px;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(243,239,230,.7),rgba(240,169,43,.3) 18%,rgba(240,169,43,0) 100%);opacity:0}
.h-glint-1{left:33%;top:21.2%;animation:h-glint 1s ease-out 2.1s both}
.h-glint-2{left:67%;top:21.2%;animation:h-glint 1s ease-out 2.35s both}
.h-glint-3{left:50%;top:21.2%;animation:h-glint 1s ease-out 2.6s both}
@media (prefers-reduced-motion:reduce){
 .ul-trace{animation:none}
 .h-nav,.h-ident,.h-statement > span,.h-name,.h-doors > a,.h-credit{animation:none!important}
 .h-veil{animation:none!important;opacity:1!important}
 .h-glint{display:none}
}