/* index.html only */
/* token overrides for this page */
:root{ --t-h2:clamp(34px,4.3vw,60px); }
.hero h1 mark{color:var(--accent);background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/100% .065em;padding-bottom:.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.anim .hero h1 mark{animation:sweep 1s var(--ease) both;animation-delay:.75s}
/* portrait x-ray: a loupe under the cursor shows the empty image slot behind the photo */
.portrait .xray{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--stone);
  -webkit-mask-image:radial-gradient(circle var(--pr,0px) at var(--px,50%) var(--py,40%),#000 calc(100% - 1.5px),transparent 100%);
  mask-image:radial-gradient(circle var(--pr,0px) at var(--px,50%) var(--py,40%),#000 calc(100% - 1.5px),transparent 100%)}
.portrait .hi{z-index:3}
.xray svg{position:absolute;inset:0;width:100%;height:100%}
.xray .xs{fill:color-mix(in srgb,var(--fg) 11%,var(--stone))}
.xray .xg{position:absolute;inset:0;background-image:radial-gradient(circle at center,color-mix(in srgb,var(--fg) 22%,transparent) .7px,transparent 1px);background-size:12px 12px}
.xray .xc{fill:none;stroke:var(--lens);stroke-width:1.25;vector-effect:non-scaling-stroke}
.xray .xt{position:absolute;left:16px;top:16px;height:16px;padding:0 6px;border-radius:2px;background:var(--lens);color:var(--on-lens);font:500 10px/16px var(--f-mono);letter-spacing:.02em;white-space:nowrap}
.portrait .loupe{position:absolute;z-index:2;left:0;top:0;width:calc(var(--pr,0px) * 2);height:calc(var(--pr,0px) * 2);border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--lens) 60%,transparent);box-shadow:inset 0 0 22px rgba(15,18,24,.10),0 10px 30px -10px rgba(15,18,24,.45);
  transform:translate(calc(var(--px,0px) - 50%),calc(var(--py,0px) - 50%));opacity:var(--po,0)}
@media (max-width:760px){.xray .xt{display:none}}
/* ---------- QA polish: comfortable touch targets, tidy footer and nav at mid widths ---------- */
@media (pointer:coarse){
  .logo{padding-block:10px;margin-block:-10px}
  .ulink{padding-block:10px;margin-block:-10px}
  .crumb a{display:inline-block;padding-block:12px;margin-block:-12px}
  .seg button{height:36px}
  .email a{padding-block:6px;margin-block:-6px}
}
@media (max-width:900px){.nav-right .status{display:none}}
@media (max-width:760px){.foot{flex-direction:column;align-items:flex-start;gap:12px}}
/* ---------- theme transition: the new mode spreads from the toggle like ink in water ---------- */
@property --vr{syntax:'<length>';inherits:true;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-ink::view-transition-new(root){
  -webkit-mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  animation:vt-ink 1100ms cubic-bezier(.4,.15,.2,1) both;
}
@keyframes vt-ink{from{--vr:0px}to{--vr:var(--vR)}}