/* Persistent photographed handwriting, with one quiet reading layer. */
.home .correspondence-opening{height:92svh;min-height:700px;background:#162820}
.home .correspondence-opening .hero-title{left:5%;bottom:93px;width:49%;top:auto}
.home .correspondence-opening .hero-title h1{font-size:min(18vw,23vh);line-height:.81;letter-spacing:-.07em}
.home .correspondence-opening .hero-title>div{margin-top:23px}
.home .correspondence-opening .hero-photograph{left:auto;right:0;top:0;bottom:0;width:63%;height:100%;mask-image:linear-gradient(90deg,transparent,#000 19%)}
.home .correspondence-opening .hero-photograph img{height:100%;width:100%;object-fit:cover;object-position:50% 37%;opacity:1;animation:none;transform:none}
.home .correspondence-opening .hero-shade{background:linear-gradient(90deg,#162820 1%,#162820d9 29%,transparent 66%),linear-gradient(0deg,#12271d88,transparent 40%)}
.home .correspondence-opening .hero-voice{left:5%;right:auto;top:16%;bottom:auto;width:43%;max-width:640px;color:var(--paper)}
.ink-composition{width:100%;height:clamp(55px,7.5vw,102px);display:flex;align-items:center;transform-origin:left center;filter:drop-shadow(0 2px 4px #07150a44)}
.living-ink{display:block;width:100%;height:100%;overflow:visible}
.ink-reveal{transform:scaleX(1);transform-box:view-box}
.opening-slide.is-active .ink-reveal{animation:ink-arrival .48s var(--ink-delay) cubic-bezier(.2,.55,.3,1) both}
.opening-slide.is-active .ink-composition{animation:ink-settles 1.4s cubic-bezier(.2,.7,.25,1) both}
@keyframes ink-arrival{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ink-settles{from{transform:translateY(7px) rotate(-.45deg)}to{transform:none}}
.home .voice-reading{margin:17px 0 0;padding:0;border:0;font:italic clamp(20px,1.8vw,27px)/1.3 Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
.voice-reading:before,.voice-reading:after{display:none!important}
.voice-reading>span:before{content:'“'}.voice-reading>span:after{content:'”'}
.voice-reading small{display:block;font:10px/1.4 Arial;letter-spacing:.025em;opacity:.7;margin-top:6px}
.letter-entry{display:flex;gap:25px;align-items:center;justify-content:space-between;width:max-content;max-width:100%;margin-top:21px;padding:10px 0;border-bottom:1px solid #eeeee440;font:13px/1.3 Arial}
.letter-entry>span:last-child{font-size:11px;color:var(--slide-accent)}.letter-entry b{font-weight:400;font-size:20px;margin-left:8px;display:inline-block;transition:transform .25s}
.letter-entry:hover b{transform:translate(3px,-3px)}.letter-entry:focus-visible{outline:2px solid var(--slide-accent);outline-offset:6px}
.home .correspondence-opening [data-person=olessia] .hero-photograph{width:82%}
.home .correspondence-opening [data-person=olessia] .hero-photograph img{object-position:65% 52%}
.home .correspondence-opening [data-person=olessia] .hero-voice{left:auto;right:6%;top:17%;width:33%}
.home .correspondence-opening [data-person=olessia] .ink-composition{height:80px;max-width:430px}
.home .correspondence-opening [data-person=olessia] .hero-shade{background:linear-gradient(90deg,#162820 1%,#162820cc 26%,transparent 70%),linear-gradient(0deg,#12271d66,transparent 60%)}
.home .correspondence-opening [data-person=levant] .hero-photograph{width:60%}
.home .correspondence-opening [data-person=levant] .hero-photograph img{object-position:57% 35%}
.home .correspondence-opening [data-person=kahumburuka] .hero-photograph{width:76%}
.home .correspondence-opening [data-person=kahumburuka] .hero-photograph img{object-position:66% 45%}
.home .correspondence-opening [data-person=salim] .hero-photograph img{object-position:50% 27%}
.home .correspondence-opening [data-person=abdulai] .hero-photograph img{object-position:53% 37%}
.home .correspondence-opening [data-person=abdulai] .voice-reading{font-style:normal;font-size:17px;letter-spacing:.07em}
.home .correspondence-opening [data-person=abdulai] .ink-composition{height:65px}
.motion-paused .correspondence-opening .ink-reveal,.motion-still .correspondence-opening .ink-reveal,.motion-paused .correspondence-opening .ink-composition,.motion-still .correspondence-opening .ink-composition{animation:none!important;transform:none!important}
@media(min-width:601px) and (max-width:1000px){.home .correspondence-opening .hero-title h1{font-size:19vw}.home .correspondence-opening .hero-voice{width:44%;top:17%}.letter-entry{align-items:flex-start;flex-direction:column;gap:4px}.home .correspondence-opening [data-person=olessia] .hero-voice{width:35%;right:5%}}
@media(max-width:600px){
 .home .correspondence-opening{height:auto;min-height:835px}
 .home .correspondence-opening .opening-slide .hero-photograph{width:100%;height:415px;right:0;mask-image:linear-gradient(#000 72%,transparent)}
 .home .correspondence-opening .opening-slide .hero-photograph img{object-position:50% 35%}
 .home .correspondence-opening [data-person=kahumburuka] .hero-photograph img{object-position:70% 43%}
 .home .correspondence-opening [data-person=olessia] .hero-photograph img{object-position:67% 50%}
 .home .correspondence-opening .opening-slide .hero-shade{background:linear-gradient(0deg,#162820 51%,transparent 78%),linear-gradient(#13241b44,transparent 22%)}
 .home .correspondence-opening .opening-slide .hero-voice{left:7%;right:7%;width:86%;top:335px;bottom:auto}
 .home .correspondence-opening .opening-slide .ink-composition{height:65px;max-width:none}
 .home .correspondence-opening [data-person=abdulai] .ink-composition{height:43px}
 .home .correspondence-opening .voice-reading{font-size:20px;margin-top:10px}
 .home .correspondence-opening [data-person=abdulai] .voice-reading{font-size:13px}
 .voice-reading small{font-size:9px;margin-top:4px}
 .letter-entry{font-size:12px;margin-top:9px;gap:20px;padding:9px 0}.letter-entry>span:last-child{font-size:10px}
 .home .correspondence-opening .hero-title{left:6%;width:88%;top:535px;bottom:auto}
 .home .correspondence-opening .hero-title h1{font-size:25vw;line-height:.8}
 .home .correspondence-opening .hero-title>div{margin-top:16px}
 .home .correspondence-opening .hero-controls{bottom:9px}
}
@media(prefers-reduced-motion:reduce){.correspondence-opening .ink-reveal,.correspondence-opening .ink-composition{animation:none!important;transform:none!important}}
@media(min-width:601px){
 .home .correspondence-opening .hero-title h1{font-size:min(18vw,21vh)}
 .home .correspondence-opening .hero-voice{top:13%}
 .home .correspondence-opening .ink-composition{height:68px}
 .home .correspondence-opening .voice-reading{margin-top:8px}
 .home .correspondence-opening .letter-entry{margin-top:10px;padding:8px 0}
}
@media(min-width:601px){.home .correspondence-opening .hero-voice{top:11.5%}.home .correspondence-opening .ink-composition{height:75px}.home .correspondence-opening .hero-title h1{font-size:min(18vw,20.5vh)}}
@media(min-width:601px){.home .correspondence-opening [data-person=kahumburuka] .ink-composition{height:85px}}
@media(min-width:601px){.home .correspondence-opening .hero-voice{top:10%}}

/* Photographic colour fields: the image sets the palette, not a universal wash. */
.home .correspondence-opening .opening-slide{background:var(--slide-ground);color:var(--slide-reading,#eeeee4)}
.home .correspondence-opening .opening-slide .hero-shade{display:none}
.home .correspondence-opening .opening-slide .hero-photograph{mask-image:linear-gradient(90deg,transparent,#000 10%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%)}
.home .correspondence-opening .hero-title,.home .correspondence-opening .hero-controls{color:var(--hero-reading,#eeeee4);transition:color .7s}
.home .correspondence-opening .hero-title h1{color:var(--hero-accent)}
.home:not(.scrolled) .topbar{color:var(--opening-reading,#eeeee4)}
.home .producer>span:not(.brand-silhouette){color:var(--opening-reading,#eeeee4)}
.home .correspondence-opening .opening-slide .hero-voice{color:var(--slide-reading,#eeeee4);max-width:none}
.home .correspondence-opening .voice-reading{font:400 clamp(17px,1.1vw,20px)/1.5 Arial,sans-serif;letter-spacing:0;margin-top:6px;text-wrap:balance;max-width:38ch}
.home .correspondence-opening .voice-reading small{font-size:11px;opacity:.85}
.home .correspondence-opening .letter-entry{border-color:currentColor}
.home .correspondence-opening [data-person=salim] .living-ink{filter:brightness(0) opacity(.83)}
.home .correspondence-opening [data-person=salim] .ink-composition{filter:none}
@media(min-width:601px){
 .home .correspondence-opening .hero-voice{width:48%;top:10%}
 .home .correspondence-opening .ink-composition{height:clamp(90px,8vw,125px)}
 .home .correspondence-opening [data-person=kahumburuka] .ink-composition{height:120px}
 .home .correspondence-opening [data-person=olessia] .hero-voice{width:38%;right:4%;top:12%}
 .home .correspondence-opening [data-person=olessia] .ink-composition{height:110px;max-width:none}
 .home .first-row{grid-template-columns:repeat(5,minmax(0,1fr))}
 .home .complete-roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
}
@media(min-width:601px) and (max-width:1000px){.home .complete-roster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
 .home .correspondence-opening .opening-slide .hero-photograph{mask-image:linear-gradient(#000 80%,transparent);-webkit-mask-image:linear-gradient(#000 80%,transparent)}
 .home .correspondence-opening .opening-slide .ink-composition{height:85px}
 .home .correspondence-opening .voice-reading{font-size:15px;line-height:1.4;margin-top:3px}
 .home .correspondence-opening .voice-reading small{font-size:10px}
 .home .correspondence-opening .hero-title{top:550px}
 .home .complete-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
}

@media(min-width:601px){.home .correspondence-opening [data-person=olessia] .hero-voice{top:6%}.home .correspondence-opening [data-person=olessia] .ink-composition{height:100px}}
.home .correspondence-opening .hero-controls>a{color:#eeeee4;text-shadow:0 1px 5px #142b29}
@media(min-width:601px){.home .correspondence-opening .hero-voice{top:7%}.home .correspondence-opening [data-person=olessia] .hero-voice{top:6%}}

.home .topbar nav{background:var(--opening-ground,#1e2e22);color:var(--opening-reading,#eeeee4);padding:9px 13px;transition:background .7s,color .7s}
.home .topbar nav a{font-size:11px}
@media(max-width:600px){.home .topbar nav{padding:6px 8px}.home .topbar nav a{font-size:10px}}
@media(min-width:601px){.home .correspondence-opening [data-person=kahumburuka] .ink-composition{height:100px}}
