/* Give italic overhangs room outside each word's painted glyph bounds. */
#about .lyric-text{display:inline-block;padding:.12em .16em;margin:-.12em -.16em;line-height:1.3;overflow:visible}
#about .lyric-word{overflow:visible}#about #bigWords{line-height:1.32}
#cut .mid,#cut .mid canvas{filter:none!important;opacity:1!important;mix-blend-mode:normal}
/* Image-derived colour and fluid motion behind the skill explanations. */
#map .mcard::before{background:linear-gradient(#12221f33,#101e1c55),var(--popup-image) center/cover;filter:blur(18px)}
.popup-world{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;filter:brightness(.9) saturate(1.25)}
#map .mcard.has-popup-world::before{z-index:-1;background:linear-gradient(120deg,#06151355,#09110a20);filter:none;transform:none}
#map .mcard::after{opacity:.12}
.popup-motion{display:block;background:none;border:0;border-bottom:1px solid #ffffff50;color:#ffffffe0;font-size:11px;padding:5px 0;margin-top:20px;cursor:pointer}
/* An interactive timeline made from fine lines, soft metallic colours and light. */
#credits.interactive-career{background:#f7f7f4;padding-top:90px;padding-bottom:90px}
#credits.interactive-career .ds[hidden]{display:none!important}
.career-explorer h2{font:400 clamp(46px,6.7vw,100px)/.95 'Inter Tight',Arial,sans-serif;letter-spacing:-.055em;margin:45px 0 55px}
.career-options{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.career-options button{border:1px solid #172a2250;border-radius:30px;background:none;color:#29362d;padding:11px 19px;cursor:pointer}.career-options button[aria-pressed=true]{background:#1b2923;color:#f4f2e9}
.career-experience{display:grid;grid-template-columns:1.7fr 1fr;gap:65px;align-items:center}
.career-diagram{position:relative;background:radial-gradient(ellipse at 40% 10%,#69716430,transparent 60%),#17251f;color:#d2c9a9;border-radius:3px;overflow:hidden;min-width:0;padding:35px 0 45px;isolation:isolate}
.career-diagram::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.career-diagram svg{display:block;width:100%;overflow:visible}.career-route{fill:none;stroke:#cec3a78c;stroke-width:1}.career-route.trace{stroke:#eee4bf;stroke-width:1.5;stroke-dasharray:12 45;animation:route-travel 18s linear infinite}.career-route.web{opacity:.38}.career-point{cursor:pointer;outline:none}.point-hit{fill:transparent}.point-core{fill:#a5b79b;transition:r .3s,fill .3s}.point-ring{fill:none;stroke:#f0d99a;stroke-width:1;opacity:0}.career-point.selected .point-core{fill:#ffe6a6}.career-point.selected .point-ring,.career-point:hover .point-ring,.career-point:focus-visible .point-ring{opacity:1}.career-point text{fill:#ddd5bf;font:16px 'Inter Tight',Arial,sans-serif;pointer-events:none}.career-layer{fill:#283b3299;stroke:#c7c7a880;stroke-width:1}.career-layer-edge{fill:none;stroke:#b5bc9360}.career-point.selected .career-layer{fill:#8b927c50;stroke:#f2deb6}
.diagram-caption{display:block;text-align:center;font-size:11px;letter-spacing:.035em;color:#d4d7c8a6;margin-top:20px}
.career-position{font-size:12px;color:#677164}.career-year{font:400 80px/1 'Inter Tight',Arial,sans-serif;letter-spacing:-.05em;margin:20px 0}.career-story h3{font:400 29px/1.1 'Inter Tight',Arial,sans-serif;letter-spacing:-.02em;margin-bottom:12px}.career-company{font-size:14px;color:#687162}.career-story p{font-size:17px;line-height:1.5;margin-top:22px;color:#4c554a;max-width:34ch}.career-arrows{display:flex;gap:10px;margin-top:25px}.career-arrows button{border:1px solid #293a3040;border-radius:50%;width:43px;height:43px;background:none;font-size:21px;cursor:pointer}
.career-year-tabs{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #293a3030;margin-top:40px;padding-top:20px;flex-wrap:wrap}.career-year-tabs button{background:none;border:0;border-bottom:1px solid transparent;color:#697369;font-size:13px;padding:8px 0;cursor:pointer}.career-year-tabs button[aria-pressed=true]{color:#17251f;border-bottom-color:#17251f}
#stats{background:white;padding:40px var(--gutter) 80px}#stats .stat-row{background:#202222;border-radius:32px;padding:60px 55px;gap:40px}#stats .stat-row b{color:#fff!important;-webkit-text-fill-color:#fff!important}#stats .stat-row span{color:#d1d3d0}
@keyframes route-travel{to{stroke-dashoffset:-570}}
@media(max-width:820px){.career-experience{grid-template-columns:1fr;gap:30px}.career-options{justify-content:flex-start}.career-options button{padding:10px 13px}.career-explorer h2{margin:35px 0}.career-diagram{padding:20px 0}.career-story{display:grid;grid-template-columns:90px 1fr;gap:10px 20px}.career-position{grid-column:1/-1}.career-year{font-size:44px;grid-column:1;grid-row:2/5;margin:0}.career-story h3{font-size:25px}.career-story h3,.career-company,.career-story p{grid-column:2}.career-story p{font-size:15px;margin:0}.career-arrows{grid-column:2;margin:10px 0}.career-year-tabs{gap:12px 20px}.career-diagram svg{min-height:210px}#stats .stat-row{padding:35px 25px;gap:35px 20px;border-radius:25px}#stats{padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){.career-route.trace{animation:none}.popup-motion{display:none}}