/* Portfolio additions: keep the original composition and palette. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--response:#8ed7c0}
.skip-link{position:fixed;top:12px;left:12px;z-index:200;padding:14px 20px;background:var(--paper);color:var(--bg);transform:translateY(-180%)}.skip-link:focus{transform:none}
.portfolio-backdrop{animation-duration:.85s}.hero-copy .pretitle{animation:enter .72s .1s both}.hero-copy h1{animation:enter .78s .2s both}.portrait-shell{animation:portraitIntro .85s .3s both}.hero-copy .hero-actions{animation:enter .72s .4s both}.hero-facts{animation:enter .72s .5s both}
.portrait-window{translate:var(--portrait-x,0px) var(--portrait-y,0px);transition:translate .85s var(--ease-out)}
.button,.copy-button,nav a{transition-duration:.26s}.reveal,.recognition.reveal{transition-duration:.85s}.project .art{transition-duration:.45s}
.marquee-track{animation-duration:32s}.signal-line{animation-duration:5.2s}dialog[open]{animation-duration:.45s}dialog::backdrop{animation-duration:.4s}
.section-description{max-width:580px;font-size:14px;line-height:1.8;color:var(--muted)}
.certificates{padding-top:0}.certificates .heading,.skills .heading{font-size:clamp(45px,6vw,76px)}
.certificate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:34px}
.certificate-card{min-width:0;border:1px solid var(--line);background:#171818;transition:border-color .26s,translate .4s var(--ease-out);overflow:hidden}
.certificate-card:hover,.certificate-card:focus-within{border-color:var(--red);translate:0 -5px}
.certificate-preview{display:flex;align-items:center;justify-content:center;background:#242422;padding:22px;height:280px}
.certificate-preview img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 12px #0004)}
.certificate-info{padding:25px}.certificate-info .mono{font-size:10px;color:var(--red)}.certificate-info h3{font-size:24px;font-weight:500;margin:14px 0}.certificate-info p{color:#b4b5af;font-size:13px;line-height:1.7}.certificate-info time{display:block;color:#b4b5af;font-size:12px;margin-top:10px}
.certificate-actions{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px}.certificate-actions a{font-size:12px;text-decoration:underline;text-underline-offset:5px;padding:8px 0}.certificate-actions a:hover{color:var(--red)}
/* The original grid stays usable if JavaScript is unavailable. */
.certificates{padding-top:25px}.certificate-fan{position:relative;isolation:isolate;height:420px;margin-top:30px;display:none}
.fan-ready .certificate-fan{display:block}:is(.fan-card,.fan-visual-card){position:absolute;left:50%;top:38px;width:clamp(180px,24vw,260px);height:310px;margin-left:clamp(-130px,-12vw,-90px);padding:0;background:transparent;color:#181918;border:0;border-radius:8px;cursor:pointer;transform-origin:50% 110%;transform:translateX(calc(var(--slot)*clamp(85px,11vw,150px))) translateY(calc(var(--distance)*23px)) rotate(calc(var(--slot)*8deg));z-index:calc(10 - var(--distance));transition:transform .85s var(--ease-out),box-shadow .5s,border-color .4s}
:is(.fan-card,.fan-visual-card) img{display:block;width:100%;height:246px;object-fit:contain}:is(.fan-card,.fan-visual-card) .fan-caption{display:block;padding:15px 0;font:10px 'Space Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fan-card[aria-pressed=true] .fan-face{border-color:var(--red);box-shadow:0 0 0 2px var(--red),0 25px 65px #ff55461a}.fan-card:hover .fan-face{box-shadow:0 0 0 2px #ff938b,0 24px 50px #0008}.fan-card:focus-visible{outline:3px solid #fff;outline-offset:6px}
.fan-ready .certificate-grid{display:block;margin-top:20px;border-top:1px solid var(--line)}.fan-ready .certificate-card{border:0;background:transparent;overflow:visible;translate:none}.fan-ready .certificate-card[hidden]{display:none}.fan-ready .certificate-preview{display:none}.fan-ready .certificate-info{max-width:640px;min-height:255px;padding:26px 0 0}.fan-ready .certificate-info h3{font-size:clamp(28px,4vw,40px)}.fan-ready .certificate-info.is-entering{animation:enter .55s var(--ease-out) both}
.fan-controls{display:none;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:20px}.fan-ready .fan-controls{display:flex}.fan-controls button{width:48px;height:48px;background:none;border:1px solid #666;border-radius:50%;color:var(--paper);font-size:22px;cursor:pointer;transition:background .3s,border-color .3s}.fan-controls button:hover{background:#27201e;border-color:var(--red)}.fan-count{font:11px 'Space Mono',monospace;color:var(--muted)}.fan-hint{font-size:12px;color:var(--muted);margin:10px 0 0}.fan-ready .certificate-card:target{scroll-margin-top:120px}
@media(max-width:700px){.fan-ready .certificate-fan{display:flex;height:365px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#666 transparent;padding:30px 9%;gap:20px;margin-inline:-6.8%;touch-action:pan-x pan-y}:is(.fan-card,.fan-visual-card){position:relative;left:auto;top:auto;flex:0 0 100%;width:100%;max-width:320px;height:300px;margin:0;transform:none;scroll-snap-align:center;scroll-snap-stop:always}:is(.fan-card,.fan-visual-card) img{height:235px}.fan-ready .certificate-info{min-height:290px}.fan-hint{font-size:11px}}
.skills{padding-top:0}.skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:32px}.skill-group{border-top:1px solid var(--red);padding-top:22px;min-width:0}.skill-group h3{font-size:22px;font-weight:500}.skill-group p,.skill-group li{font-size:13px;line-height:1.8;color:#b4b5af}.skill-group ul{padding-left:18px}.skill-group a{text-decoration:underline;text-underline-offset:4px}.skill-group .mono{font-size:9px;color:var(--red)}
.lab-evidence{border-left:2px solid var(--red);padding:14px 18px;color:#b4b5af;font-size:13px;line-height:1.8;margin-bottom:30px}.lab-evidence strong{color:var(--paper);font-weight:500}
.network-node{transition:stroke .18s,fill .18s}.network-node.active{stroke:var(--red);fill:#41241f;stroke-width:2}.network-demo.responding .network-node.active{stroke:var(--response);fill:#203c33}.network-demo.responding #traveller{fill:var(--response)}.network-demo.responding .signal-line{stroke:var(--response)}
.marquee-track:focus-within{animation-play-state:paused}.project,.copy-button,dialog .close{min-height:44px}dialog .close{width:44px}.floating-nav a{padding:5px 0}.smallnote{color:#a2a29b!important}
@media(max-width:1000px){header nav{gap:16px}header .navcta{display:none}.floating-nav{gap:18px}.floating-nav .mini-brand{display:none}.skill-grid{gap:18px}}
@media(min-width:701px) and (max-width:1000px){.hero-facts{width:22%}.hero-facts strong{font-size:32px}}
@media(max-width:700px){header{height:auto;min-height:95px;flex-wrap:wrap;gap:10px;padding:15px 0}header nav{width:100%;justify-content:space-between;gap:8px;font-size:11px}header nav a{padding:7px 0}.floating-nav{width:calc(100% - 20px);justify-content:space-between;gap:8px;padding:12px 14px;font-size:10px}.certificate-grid,.skill-grid{grid-template-columns:1fr}.certificate-preview{height:255px}.certificate-info{padding:22px}.certificate-info h3{font-size:22px}.hero-facts{animation-delay:.5s}.portrait-window{translate:none!important}.certificate-card:hover{translate:none}.sectiontop{flex-wrap:wrap}.skill-group{padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.portrait-window{translate:none!important}.certificate-card:hover,.certificate-card:focus-within{translate:none}.certificate-frame:hover,.button:hover,.project:focus-visible .art,.project:hover .art{transform:none}.marquee-track span[aria-hidden=true]{display:none}.marquee-track{white-space:normal;width:100%;flex-wrap:wrap;gap:20px;justify-content:space-around}.marquee-track span{gap:20px}}

/* Artwork is independent of the fixed mouse targets: it cannot block adjacent cards. */
.fan-face{display:block;position:absolute;inset:0;padding:14px 14px 0;background:#e9e7df;border:1px solid #b5b3a9;border-radius:inherit;box-shadow:0 20px 40px #0006;transform-origin:50% 75%;transition:transform .5s var(--ease-out),box-shadow .35s,border-color .25s}
.fan-hit-layer,.fan-visual-layer{position:absolute;inset:0}
.fan-hit-layer{z-index:2}.fan-visual-layer{z-index:1;pointer-events:none}.fan-visual-layer *{pointer-events:none!important}
.fan-visual-card.is-previewed{z-index:30}
.fan-visual-card.is-previewed .fan-face{transform:translateY(-15px) rotate(calc(var(--slot)*-2deg)) scale(1.035)}
@media(max-width:700px){.fan-visual-layer{display:none}.fan-hit-layer{display:contents}}
@media(prefers-reduced-motion:reduce){.fan-visual-card.is-previewed .fan-face{transform:none!important}}