/* An intimate portrait, framed by a living resonance field. */
.home-page{background:#080f2c;color:#f1eee4;--line:#444e70;overflow-x:clip}
.home-page .site-header{border-color:#444e70}
.home-page .site-brand span{color:#c1c8df}
.home-page .site-footer{border-color:#444e70;color:#b3bad0}
.home-page .site-footer a:hover{color:#fff}
.home-page :focus-visible{outline-color:#f0dab9}
.home-main{position:relative;overflow:hidden;isolation:isolate}
.overture{max-width:1800px;margin:0 auto;min-height:660px;height:calc(100svh - 180px);max-height:1100px;position:relative;display:flex;align-items:center;padding:65px 8% 90px}
.overture::before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 80% 45%,#244bc496,transparent 53%),radial-gradient(ellipse at 33% 80%,#68255365,transparent 60%)}
.overture-copy{position:relative;z-index:4;max-width:58%;padding-bottom:8px;pointer-events:none}
.overture-copy a{pointer-events:auto}
.overture-kicker{display:flex;align-items:center;gap:16px;font-size:9px;letter-spacing:2.4px;color:#c7cce0}
.overture-kicker::before{content:'';width:32px;height:1px;background:#d2bea0}
.overture h1{font-size:clamp(100px,11.1vw,182px);line-height:1.03;letter-spacing:-4px;margin:24px 0 15px;font-weight:400}
.overture-line{font:clamp(34px,3.5vw,56px)/1.15 var(--serif);letter-spacing:-.8px;color:#f0e8dd}
.overture-line em{color:#e4c9af}
.overture-intro{max-width:335px;font-size:12px;line-height:1.9;letter-spacing:.1px;color:#c5cbe0;margin-top:28px}
.overture-actions{display:flex;align-items:center;gap:30px;margin-top:36px}
.overture-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:49px;padding:15px 20px;font-size:11px;letter-spacing:.3px;border:1px solid #c7baa5;color:#fff4e4;transition:background .25s,color .25s}
.overture-primary:hover{background:#ecdbc3;color:#111b40}
.overture-secondary{display:inline-flex;align-items:center;gap:20px;font-size:11px;color:#d3d7e7;padding:13px 0;border-bottom:1px solid #7881a0}
.overture-secondary:hover{color:white}
.resonance-stage{position:absolute;right:-2%;top:0;bottom:0;width:64%;z-index:1;pointer-events:none}
.portrait-halo{position:absolute;inset:12% 7% 5%;background:radial-gradient(ellipse at 53% 50%,#6f3da442 0,transparent 68%);}
.portrait-frame{position:absolute;inset:0 7% 0 10%;margin:0;transform:none}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 37%;filter:grayscale(100%) sepia(10%) contrast(.94);opacity:.88;mix-blend-mode:luminosity;mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 82%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 26%,#000 83%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%,#000 82%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 26%,#000 83%,transparent 100%);-webkit-mask-composite:source-in}
#resonance-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.75;z-index:3;mask-image:linear-gradient(90deg,transparent,#000 17%,#000 95%)}
.portrait-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080f2c 0%,#080f2c99 8%,transparent 42%),linear-gradient(0deg,#080f2c,transparent 22%,transparent 82%,#080f2c55);pointer-events:none}
.overture-coordinate{position:absolute;right:6%;top:35px;z-index:4;font-size:8px;letter-spacing:2px;color:#b5bdd9;writing-mode:vertical-rl;display:flex;gap:20px}
.overture-coordinate::before{content:'';height:35px;width:1px;background:#929cbe}
.overture-bottom{position:absolute;left:8%;right:6.5%;bottom:31px;display:flex;justify-content:space-between;align-items:center;gap:24px;z-index:5}
.artist-signature{display:flex;align-items:center;gap:20px;color:#b9c2df;font-size:8px;letter-spacing:1.7px}
.artist-signature a{padding:9px 0;border-bottom:1px solid #697393;color:#d1d5e4;font-size:9px;letter-spacing:1px}
.motion-toggle{display:flex;gap:12px;align-items:center;min-height:36px;border:0;color:#c6cee7;background:transparent;font-size:8px;letter-spacing:1px;padding:8px 0 8px 12px}
.motion-indicator{display:flex;gap:3px;align-items:center;height:13px}
.motion-indicator i{display:block;width:1px;height:8px;background:#ead5b6;}
.motion-indicator i:nth-child(2){height:13px;animation-delay:-.7s}.motion-indicator i:nth-child(3){height:6px;animation-delay:-1.3s}
.motion-paused .motion-indicator i{animation-play-state:paused}
@keyframes voice-pulse{0%,100%{transform:scaleY(.6);opacity:.6}50%{transform:scaleY(1);opacity:1}}
@media(min-width:1600px){.overture-copy{padding-left:2%}}
@media(max-width:1000px){.overture{padding-left:7%;min-height:640px}.overture h1{font-size:112px}.overture-copy{max-width:65%}.overture-line{font-size:39px}.resonance-stage{right:-16%;width:80%;opacity:.8}.overture-bottom{left:7%}.overture-intro{max-width:280px}.overture-coordinate{right:4%}}
@media(max-width:720px){.overture{height:auto;min-height:calc(100svh - 82px);padding:52px 7% 95px;display:block}.overture-copy{max-width:100%;padding:0;z-index:4}.overture-kicker{font-size:8px;letter-spacing:1.9px;gap:12px}.overture-kicker::before{width:22px}.overture h1{font-size:clamp(85px,21vw,142px);letter-spacing:-3px;margin:22px 0 12px}.overture-line{font-size:clamp(31px,7.5vw,44px);max-width:330px;line-height:1.16}.overture-intro{margin-top:22px;font-size:11px;max-width:238px;text-shadow:0 1px 20px #080f2c}.overture-actions{margin-top:27px;gap:24px;flex-wrap:wrap}.overture-primary{font-size:10px;gap:23px;padding:14px 16px}.overture-secondary{font-size:10px;gap:13px}.resonance-stage{top:85px;right:-28%;width:112%;height:560px;bottom:auto;opacity:.42}.portrait-frame{inset:0 5% 0 0}.portrait-frame img{object-position:53% 30%}.portrait-frame::after{background:linear-gradient(90deg,#080f2c,transparent 40%),linear-gradient(0deg,#080f2c,transparent 30%,transparent 75%,#080f2c)}#resonance-canvas{opacity:.7}.overture-coordinate{display:none}.overture-bottom{left:7%;right:7%;bottom:27px;gap:15px;align-items:end}.artist-signature{flex-direction:column;align-items:start;gap:8px;font-size:7px;letter-spacing:1.3px}.artist-signature a{font-size:9px;padding-bottom:7px}.motion-toggle{font-size:7px;letter-spacing:.4px;gap:9px;white-space:nowrap}.home-page .site-footer{margin:0 7%;padding:23px 0}.home-page .site-footer .footer-signature{display:none}.home-page .site-footer .copyright{margin-left:auto}}
@media(max-width:370px){.overture{padding-top:40px}.overture-actions{gap:18px}.overture h1{font-size:80px}.overture-line{font-size:30px}.overture-intro{max-width:230px}.overture-primary{font-size:9px;gap:16px}.overture-secondary{font-size:9px;gap:12px}}
@media(prefers-reduced-motion:reduce){.portrait-frame{will-change:auto;transform:none}.motion-indicator i{animation:none}}

/* The Unsaid: a phrase suspended below the portrait, with silence between phrases. */
.home-page{background:#080f2c;--paper:#080f2c;--ink:#f1eee4}
.home-page .navigation-panel{background:#101b40;border-color:#444e70}
.home-page .navigation-panel::backdrop{background:#03091bd9}
.home-page #navigation>a:hover,.home-page #navigation>[aria-current=page]{color:#e4c9af}
.unsaid-resonance{position:absolute;right:5%;bottom:13%;width:65%;height:11%;overflow:hidden;pointer-events:none;opacity:.09;z-index:3}
.unsaid-resonance path{transform-origin:center;animation:unsaid-phrase 22s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused;opacity:0}
.unsaid-resonance path:nth-child(2){animation-delay:1.1s}
.unsaid-resonance path:nth-child(3){animation-delay:2.2s}
.unsaid-resonance path:nth-child(4){animation-delay:3s}
.motion-running .unsaid-resonance path{animation-play-state:running}
@keyframes unsaid-phrase{0%,10%{opacity:0;transform:translateY(8px)}28%{opacity:.9}55%{opacity:1;transform:translateY(-7px)}78%,100%{opacity:0;transform:translateY(-10px)}}
.motion-paused .unsaid-resonance path{animation:none;opacity:.65;transform:none}
.motion-toggle[hidden]{display:none}
.motion-toggle:focus-visible{outline:2px solid #f0dab9;outline-offset:5px}
.motion-indicator i{animation:none!important}
.motion-indicator i:nth-child(2){height:8px}
.motion-indicator i:nth-child(3){display:none}
@media(min-width:721px) and (max-width:1000px){.unsaid-resonance{right:20%;bottom:14%;width:48%;height:9%}.unsaid-resonance path:nth-child(4){display:none}}
@media(max-width:720px){.overture::before{background:radial-gradient(ellipse at 90% 30%,#284acb85,transparent 65%),radial-gradient(ellipse at 70% 65%,#68255360,transparent 65%)}.unsaid-resonance,.motion-toggle{display:none}}
@media(prefers-reduced-motion:reduce){.unsaid-resonance{display:none}.unsaid-resonance path{animation:none!important}}
/* Feather the photograph into the colored atmosphere without a rectangular edge. */
.portrait-frame::after{background:linear-gradient(0deg,#080f2c,transparent 24%,transparent 84%,#080f2c55);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent)}
@media(max-width:720px){.overture{min-height:0;padding-bottom:120px}.resonance-stage{position:relative;top:auto;right:auto;bottom:auto;width:calc(100% + 32px);height:420px;margin:22px -16px -8px;opacity:.9}.portrait-frame{inset:0}.portrait-frame img{object-position:50% 30%}.portrait-frame::after{background:linear-gradient(0deg,#080f2c,transparent 28%,transparent 78%,#080f2c55)}.overture-bottom{bottom:24px}.overture-intro{text-shadow:none}}
@media(max-width:370px){.resonance-stage{height:360px}}
@media(max-width:720px){.portrait-frame{mask-image:linear-gradient(0deg,transparent,#000 20%,#000 80%,transparent)}}

/* Give the resonance a visible presence while keeping it below the face. */
.unsaid-resonance{opacity:.42;height:13%;width:72%}
.unsaid-resonance path{stroke-width:1.2;vector-effect:non-scaling-stroke;animation-duration:14s;animation-delay:-3s}
.unsaid-resonance path:nth-child(2){animation-delay:-2s}
.unsaid-resonance path:nth-child(3){animation-delay:-1s}
.unsaid-resonance path:nth-child(4){animation-delay:0s}
@keyframes unsaid-phrase{0%{opacity:.12;transform:translateY(14px)}25%{opacity:.85}50%{opacity:1;transform:translateY(-10px)}80%{opacity:0;transform:translateY(-20px)}100%{opacity:0;transform:translateY(-20px)}}
@media(min-width:721px) and (max-width:1000px){.unsaid-resonance{right:20%;width:53%;height:11%}}
@media(max-width:720px){.unsaid-resonance{display:block;right:4%;bottom:8%;height:14%;width:75%;opacity:.32}.unsaid-resonance path:nth-child(n+3){display:none}.motion-toggle:not([hidden]){display:flex}}
@media(prefers-reduced-motion:reduce){.unsaid-resonance{display:none}}

/* Preserve the complete portrait at every aspect ratio, including Safari. */
.portrait-frame{inset:20px 5% 0 5%;mask:none;-webkit-mask:none}
.portrait-frame img{object-fit:contain;object-position:center top;mask:none;-webkit-mask:none;mix-blend-mode:normal;filter:grayscale(100%) contrast(.95);opacity:.85}
.portrait-frame{mask-image:linear-gradient(90deg,transparent,#000 20%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 85%,transparent)}
.portrait-frame::after{background:linear-gradient(0deg,#080f2c,transparent 30%,transparent 95%,#080f2c22);mask:none;-webkit-mask:none}
@media(max-width:720px){.portrait-frame{inset:0}.resonance-stage{height:500px}.portrait-frame img{object-position:center top}.overture{padding-bottom:110px}}
@media(max-width:370px){.resonance-stage{height:440px}}
.portrait-frame{inset:auto;top:20px;right:12%;height:calc(100% - 20px);width:auto;aspect-ratio:1066/1600;max-width:100%;mask-image:radial-gradient(ellipse 72% 70% at 50% 40%,#000 58%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 40%,#000 58%,transparent 90%)}
.portrait-frame img{width:100%;height:100%}
@media(max-width:1000px) and (min-width:721px){.portrait-frame{right:16%}}
@media(max-width:720px){.portrait-frame{top:0;right:50%;transform:translateX(50%);height:100%;max-width:100%}}
.portrait-frame{mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.portrait-frame img{mask-image:linear-gradient(0deg,transparent,#000 28%,#000 86%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 28%,#000 86%,transparent)}

/* A fuller portrait: preserve the top of the source and crop only the lower torso. */
@media(min-width:721px){.resonance-stage{right:0;width:62%;opacity:1}.portrait-frame{top:0;right:0;width:min(100%,620px);height:100%;aspect-ratio:auto;max-width:none;overflow:hidden}.portrait-frame img{height:auto;width:100%;max-width:none;object-fit:contain;object-position:center top;mask:none;-webkit-mask:none}.portrait-frame::after{background:linear-gradient(0deg,#080f2c 0%,transparent 26%,transparent 94%,#080f2c55)}}
@media(min-width:721px) and (max-width:1000px){.resonance-stage{right:-6%;width:65%}.portrait-frame{right:0;width:100%}}