/* Adapted cinematic/audience and portfolio-series components. */
.series-opening,.audience-selector{position:fixed;inset:0;z-index:10000;background:#03060b;color:var(--text,#edf4ff)}
.series-opening{display:grid;place-items:center;overflow:hidden;opacity:1;transition:opacity .85s ease,visibility .85s ease}
.series-opening.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.series-skip{position:absolute;right:clamp(14px,3vw,36px);bottom:clamp(58px,9vh,96px);z-index:6;display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1rem;border:1px solid rgba(183,199,224,.4);border-radius:999px;background:rgba(6,12,24,.55);color:#dbe7fb;font:600 .62rem/1 var(--font-mono,monospace);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;opacity:0;animation:series-copy-in .7s 1.1s ease forwards;transition:border-color .25s ease,color .25s ease,background .25s ease}
.series-skip:hover,.series-skip:focus-visible{border-color:#7fb2ff;color:#fff;background:rgba(24,44,84,.78);outline:none}
@media(prefers-reduced-motion:reduce){.series-skip{opacity:1;animation:none}}
.series-opening-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,rgba(45,128,255,.22),transparent 58%),linear-gradient(180deg,#03060b 10%,transparent 45%,#03060b 100%);animation:series-glow 3.7s ease both}
.series-opening-portrait{position:absolute;bottom:-5vh;left:50%;height:min(76vh,760px);width:auto;max-width:95vw;object-fit:contain;object-position:center bottom;opacity:0;transform:translate(-50%,3vh) scale(1.08);filter:brightness(.9) contrast(1.25) drop-shadow(0 0 50px rgba(57,137,255,.22));mix-blend-mode:screen;mask-image:linear-gradient(#000 58%,transparent 100%);animation:series-portrait 2.5s 1.15s cubic-bezier(.2,.8,.2,1) forwards}
.series-letterbox{position:absolute;left:0;right:0;z-index:3;height:7vh;background:#03060b;animation:series-bars 1.1s 3.15s cubic-bezier(.2,.8,.2,1) forwards}
.series-letterbox-top{top:0}.series-letterbox-bottom{bottom:0}
.series-opening-copy{position:relative;z-index:2;width:min(100%,1100px);padding:8vh 24px;text-align:center;text-shadow:0 4px 32px #000}
.series-studio,.series-tagline{font:600 .68rem/1.6 var(--font-mono,monospace);letter-spacing:.3em;color:#b7c7e0;opacity:0;animation:series-copy-in .7s .15s ease forwards}
.series-opening-copy h1{margin:.2em 0 0;font:700 clamp(3.4rem,14vw,10rem)/.86 var(--font-display,monospace);letter-spacing:.05em;color:#fff;opacity:0;animation:series-name-in 1.05s .6s cubic-bezier(.2,.8,.2,1) forwards}
.series-title{margin:1rem 0 0;font:600 clamp(.75rem,2vw,1.15rem)/1.4 var(--font-mono,monospace);letter-spacing:.45em;color:#73b5ff;opacity:0;animation:series-copy-in .8s 1.15s ease forwards}
.series-tagline{margin:1.2rem 0 0;opacity:0;animation:series-copy-in .7s 1.7s ease forwards}
.audience-selector{z-index:10001;display:grid;place-items:center;padding:24px;opacity:1;visibility:hidden;transition:visibility .16s ease}
.audience-selector.is-open{visibility:visible}
.audience-selector .audience-panel{opacity:0;transform:translateY(8px);transition:opacity .14s ease,transform .14s ease}
.audience-selector.is-open .audience-panel{animation:chooser-panel-in .48s cubic-bezier(.2,.8,.2,1) both}
@keyframes chooser-panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.audience-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(41,114,225,.2),transparent 56%),rgba(3,6,11,.98)}
.audience-panel{position:relative;width:min(100%,1000px);text-align:center}
.audience-panel h2{margin:.35rem 0 .75rem;font:600 clamp(2rem,5vw,3.8rem)/1 var(--font-display,monospace);letter-spacing:-.04em;color:#fff}
.audience-intro{max-width:620px;margin:0 auto;color:#aab8cd;font-size:.95rem;line-height:1.7}
.audience-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:36px auto 0;text-align:left}
.audience-option{position:relative;display:flex;min-height:190px;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid rgba(126,170,231,.22);border-radius:18px;background:linear-gradient(145deg,rgba(20,43,75,.78),rgba(8,16,29,.92));color:#eef5ff;text-align:left;transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;cursor:pointer}
.audience-option:hover,.audience-option:focus-visible{transform:translateY(-6px);border-color:#5ea5ff;box-shadow:0 20px 50px rgba(30,105,210,.2);outline:none}
.audience-index{font:600 .68rem var(--font-mono,monospace);letter-spacing:.18em;color:#69adff}
.audience-option-title{margin:23px 0 8px;font:600 1.05rem var(--font-display,monospace)}
.audience-option-copy{color:#aab8cd;font-size:.82rem;line-height:1.55}
.audience-avatar{display:grid;width:100%;height:104px;place-items:center;margin-bottom:15px;border:1px solid rgba(113,170,243,.25);border-radius:12px;background:radial-gradient(circle at 50% 110%,rgba(55,135,236,.26),transparent 68%),linear-gradient(145deg,#122743,#09111d);color:#dcebff;font:700 1.7rem var(--font-display,monospace);letter-spacing:.08em;text-shadow:0 0 28px rgba(80,160,255,.5)}
.audience-avatar-tech{color:#8cf1ce}.audience-avatar-lead{font-size:1.05rem;color:#f1d68c}
.audience-footnote{margin:25px 0 0;color:#75869e;font: .68rem var(--font-mono,monospace);letter-spacing:.08em}
.audience-switch{padding:8px 11px;border:1px solid rgba(116,165,228,.28);border-radius:999px;background:rgba(15,31,53,.7);color:#aebdd2;font:600 .58rem var(--font-mono,monospace);letter-spacing:.08em;white-space:nowrap}
.audience-switch span{color:#77b7ff}
.cert-picks{display:flex;gap:14px;overflow-x:auto;padding:10px 2px 28px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#3577bd transparent}
.cert-pick{position:relative;display:flex;min-width:235px;min-height:310px;flex:0 0 235px;flex-direction:column;justify-content:space-between;overflow:hidden;padding:21px;border:1px solid rgba(109,161,226,.25);border-radius:14px;background:radial-gradient(circle at 70% 25%,rgba(51,137,255,.24),transparent 48%),linear-gradient(145deg,#101f34,#09111d);color:#eef5ff;text-decoration:none;scroll-snap-align:start;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
.cert-pick::before{position:absolute;right:-15px;bottom:8px;content:attr(data-rank);font:800 9rem/.8 var(--font-display,monospace);letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(117,175,243,.27);transition:transform .4s ease,-webkit-text-stroke-color .3s ease}
.cert-pick:hover::before{transform:translateY(-8px);-webkit-text-stroke-color:rgba(117,175,243,.7)}
.cert-pick>*{position:relative;z-index:1}
.cert-pick:hover,.cert-pick:focus-visible{transform:translateY(-5px);border-color:#5ea5ff;box-shadow:0 18px 40px rgba(28,103,199,.2);outline:none}
.cert-pick-index{font:600 .68rem var(--font-mono,monospace);letter-spacing:.18em;color:#78b8ff}
.cert-pick-title{font:600 1rem/1.35 var(--font-display,monospace)}
.cert-pick-issuer{margin-top:7px;color:#9aacc3;font:.68rem var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase}
.resume-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.resume-sheet-wrap{overflow:hidden;border:1px solid rgba(89,139,200,.3);border-radius:18px;background:#0b1421;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.resume-sheet-heading{display:flex;justify-content:space-between;gap:16px;padding:21px 26px;border-bottom:1px solid rgba(89,139,200,.2);color:#adc0da;font:600 .65rem var(--font-mono,monospace);letter-spacing:.14em}
.resume-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:34px;align-items:start}
.resume-sheet{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(210px,.8fr);gap:0;background:linear-gradient(180deg,#111d2d,#0b1421);padding:28px 30px 34px}
.resume-sheet-main{padding-right:27px}
.resume-sheet-side{padding-left:26px;border-left:1px solid rgba(108,153,210,.18)}
.resume-block{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid rgba(108,153,210,.16)}
.resume-block:last-child{margin-bottom:0;border:0}
.resume-block h3{margin:0 0 12px;color:#75b5ff;font:700 .66rem var(--font-mono,monospace);letter-spacing:.21em;text-transform:uppercase}
.resume-block p,.resume-block li{margin:0 0 7px;color:#b5c3d8;font-size:.75rem;line-height:1.65}
.resume-block p b{display:inline-block;min-width:88px;color:#e7eef9;font-size:.68rem}
.resume-block ul{margin:9px 0 0;padding-left:16px}
.resume-entry{display:flex;justify-content:space-between;gap:16px;color:#e8eff9;font-size:.78rem;line-height:1.5}
.resume-entry span{display:block;margin-top:3px;color:#94a6bf;font-size:.7rem}
.resume-entry time{flex:none;color:#91a7c3;font:600 .62rem var(--font-mono,monospace)}
.resume-project{display:flex;justify-content:space-between;gap:18px;padding:7px 0;color:#dce7f5;font-size:.72rem}
.resume-project span{max-width:64%;color:#9dafc7;text-align:right;font-size:.68rem;line-height:1.5}
.resume-cert-list{padding-left:16px!important}
.resume-block a{color:#8cc1ff;text-decoration:none}.resume-block a:hover{text-decoration:underline}
.resume-aside{position:sticky;top:105px;padding:4px 0}
.resume-aside-kicker{color:#75b5ff!important;font:700 .65rem var(--font-mono,monospace)!important;letter-spacing:.18em!important}
.resume-aside h3{margin:13px 0;font:600 1.85rem/1.15 var(--font-display,monospace);color:#edf4ff}
.resume-aside>p:not(.resume-aside-kicker){color:#9dafc7;font-size:.86rem;line-height:1.7}
.resume-actions{display:grid;gap:10px;margin-top:23px}
.resume-action-primary,.resume-action-secondary{display:flex;min-height:48px;align-items:center;justify-content:space-between;padding:0 16px;border-radius:8px;font-size:.8rem;font-weight:700;text-decoration:none;transition:transform .25s ease,background .25s ease}
.resume-action-primary{background:#e8f2ff;color:#081321}.resume-action-primary:hover{background:#fff;transform:translateY(-2px)}
.resume-action-secondary{border:1px solid rgba(142,180,228,.28);color:#d9e8fa}.resume-action-secondary:hover{background:rgba(70,140,220,.12);transform:translateY(-2px)}
.resume-stats{display:grid;grid-template-columns:1fr;gap:1px;margin-top:22px;overflow:hidden;border:1px solid rgba(109,161,226,.16);border-radius:10px;background:rgba(109,161,226,.16)}
.resume-stats div{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#0c1725}.resume-stats strong{color:#eaf3ff;font:700 1.35rem var(--font-display,monospace)}.resume-stats span{color:#9dafc7;font-size:.68rem}
.series-skills{display:grid;grid-template-columns:250px minmax(0,1fr);gap:42px;align-items:start}
.series-skill-tabs{display:flex;flex-direction:column;gap:5px}
.series-skill-tab{position:relative;display:block;width:100%;padding:13px 16px;border:0;border-radius:9px;background:transparent;color:#8ea2bd;text-align:left;cursor:pointer;transition:background .3s,color .3s}
.series-skill-tab:hover,.series-skill-tab.is-active{background:rgba(101,160,228,.1);color:#f0f6ff}
.series-skill-tab.is-active::before{position:absolute;top:13px;bottom:13px;left:0;width:3px;border-radius:3px;background:var(--skill-hue,#68adff);content:"";box-shadow:0 0 14px var(--skill-hue,#68adff)}
.series-skill-tab strong{display:block;font:600 1.45rem var(--font-display,monospace)}
.series-skill-tab span{display:block;margin-top:5px;color:#8397b2;font-size:.68rem;line-height:1.45}
.series-skill-stage{min-height:350px}
.series-skill-stage.is-changing .series-skill-card{animation:skill-card-in .45s both}
.series-skill-caption{margin:2px 0 18px;color:#a9bad0;font-size:.85rem}
.series-skill-caption strong{color:#f1f6ff}
.series-skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.series-skill-card{position:relative;display:flex;min-height:155px;flex-direction:column;align-items:flex-start;overflow:hidden;padding:17px;border:1px solid rgba(118,160,213,.18);border-radius:12px;background:linear-gradient(145deg,rgba(17,31,50,.98),rgba(9,18,30,.98));color:#eef5ff;text-align:left;cursor:pointer;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;animation-delay:var(--card-delay,0ms)}
.series-skill-card:hover,.series-skill-card.is-open{transform:translateY(-5px);border-color:color-mix(in srgb,var(--skill-hue) 65%,#fff 5%);box-shadow:0 14px 32px color-mix(in srgb,var(--skill-hue) 18%,transparent)}
.series-skill-card::after{position:absolute;top:-45px;right:-32px;width:105px;height:105px;border-radius:50%;background:var(--skill-hue);content:"";opacity:0;filter:blur(40px);transition:opacity .3s}
.series-skill-card:hover::after,.series-skill-card.is-open::after{opacity:.34}
.series-skill-mono{position:relative;z-index:1;display:grid;width:42px;height:42px;place-items:center;border:1px solid color-mix(in srgb,var(--skill-hue) 50%,transparent);border-radius:9px;background:color-mix(in srgb,var(--skill-hue) 13%,#091321);color:var(--skill-hue);font:700 .9rem var(--font-mono,monospace)}
.series-skill-name{position:relative;z-index:1;margin-top:14px;font-size:.88rem;font-weight:700}
.series-skill-note{position:relative;z-index:1;max-height:0;overflow:hidden;color:#aabbd0;font-size:.68rem;line-height:1.5;opacity:0;transition:max-height .28s ease,opacity .25s ease,margin .25s ease}
.series-skill-card.is-open .series-skill-note{max-height:64px;margin-top:8px;opacity:1}
.series-originals{position:relative;padding:12px 0 65px}
.series-originals-rail{display:flex;gap:20px;overflow-x:auto;padding:0 max(24px,calc((100vw - 1200px)/2)) 26px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#3577bd transparent}
.series-original-card{position:relative;display:flex;min-width:min(42vw,470px);height:min(68vh,620px);min-height:440px;flex:0 0 min(42vw,470px);align-items:flex-end;overflow:hidden;border:1px solid rgba(136,173,222,.2);border-radius:18px;background:#0a1421;scroll-snap-align:start;cursor:pointer;isolation:isolate;transition:transform .4s ease,border-color .35s,box-shadow .35s}
.series-original-card:hover{transform:translateY(-7px);border-color:rgba(135,190,255,.62);box-shadow:0 32px 70px rgba(0,0,0,.4)}
.series-original-art{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--project-hue) 34%,transparent),transparent 47%),linear-gradient(145deg,#14263d,#07101c)}
.series-original-art img{width:100%;height:100%;object-fit:cover;opacity:.64;mix-blend-mode:screen;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .4s}
.series-original-card:hover .series-original-art img{transform:scale(1.07);opacity:.8}
.series-original-card::after{position:absolute;inset:15% 0 0;z-index:-1;background:linear-gradient(180deg,transparent 0%,rgba(4,9,16,.18) 22%,rgba(4,9,16,.95) 100%);content:""}
.series-original-count{position:absolute;top:19px;left:22px;color:#d9e8fa;font:700 .65rem var(--font-mono,monospace);letter-spacing:.22em}
.series-original-label{position:absolute;top:19px;right:20px;color:#d9e8fa;font:600 .61rem var(--font-mono,monospace);letter-spacing:.13em}
.series-original-content{width:100%;padding:24px}
.series-original-genre{color:#9ecaff;font:700 .63rem var(--font-mono,monospace);letter-spacing:.17em;text-transform:uppercase}
.series-original-title{margin:10px 0 9px;color:#f3f7fc;font:700 clamp(1.8rem,4vw,3.1rem)/.95 var(--font-display,monospace);letter-spacing:-.035em}
.series-original-logline{max-width:40ch;color:#c0cede;font-size:.85rem;line-height:1.6}
.series-original-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.series-original-tags span{padding:5px 9px;border:1px solid rgba(205,223,247,.2);border-radius:999px;background:rgba(3,8,14,.5);color:#d4deeb;font-size:.63rem}
.series-original-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.series-original-open{display:inline-flex;min-height:42px;align-items:center;gap:9px;padding:0 15px;border:0;border-radius:7px;background:#e8f2ff;color:#071321;font-size:.76rem;font-weight:800;cursor:pointer;transition:background .2s,transform .2s}
.series-original-open:hover{transform:translateY(-2px);background:white}
.series-original-github{display:inline-flex;min-height:42px;align-items:center;padding:0 14px;border:1px solid rgba(219,234,253,.32);border-radius:7px;background:rgba(0,0,0,.28);color:#eef5ff;font-size:.73rem;font-weight:700;text-decoration:none}
.series-original-github:hover{border-color:#d8eaff}
.series-originals-source{display:none!important}
.series-originals-progress{display:flex;align-items:center;gap:14px;padding:12px max(24px,calc((100vw - 1200px)/2)) 0;color:#91a8c5;font:600 .61rem var(--font-mono,monospace);letter-spacing:.18em}
.series-originals-controls{display:flex;gap:7px}
.series-originals-controls button{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(143,181,226,.25);border-radius:50%;background:#0d1b2c;color:#d8e9fc;font-size:1rem;cursor:pointer;transition:background .2s,border-color .2s}
.series-originals-controls button:hover{border-color:#74b7ff;background:#173457}
.series-originals-progress-line{height:2px;flex:1;overflow:hidden;border-radius:2px;background:rgba(171,197,228,.2)}
.series-originals-progress-line span{display:block;width:0;height:100%;background:linear-gradient(90deg,#367dc8,#85c2ff);transition:width .2s}
.series-original-outro{display:flex;min-width:min(28vw,300px);height:min(68vh,620px);min-height:440px;flex:0 0 min(28vw,300px);flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:26px;border:1px dashed rgba(136,173,222,.32);border-radius:18px;background:radial-gradient(circle at 50% 42%,rgba(50,122,208,.16),transparent 58%),#091321;color:#eff6ff;text-align:center;text-decoration:none;scroll-snap-align:start;transition:border-color .3s,background .3s}
.series-original-outro:hover{border-color:#73baff;background-color:#10223a}
.series-original-outro-icon{display:grid;width:60px;height:60px;place-items:center;border:1px solid rgba(204,226,252,.35);border-radius:50%;font-size:1.5rem;transition:transform .3s,color .3s}
.series-original-outro:hover .series-original-outro-icon{transform:scale(1.08);color:#82bfff}
.series-original-outro strong{font:600 1.4rem var(--font-display,monospace)}
.series-original-outro>span:not(.series-original-outro-icon){color:#a8bad1;font-size:.76rem}
.series-original-outro small{color:#78b7ff;font:.63rem var(--font-mono,monospace)}
@keyframes skill-card-in{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.audience-summary{max-width:680px;margin:0 auto 2rem;color:var(--muted);font-size:1rem;line-height:1.75}
.audience-section-lead{max-width:720px;margin:-12px 0 28px;color:#aebdd2;font-size:.9rem;line-height:1.7}
body.audience-open{overflow:hidden}
body.audience-ready #loader{display:none!important}
body.audience-ready #hero-name,body.audience-ready #hero-eyebrow,body.audience-ready #hero-role,body.audience-ready #hero-bio,body.audience-ready #hero-ctas,body.audience-ready #hero-terminal{opacity:1!important}
.magnetic-series{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@keyframes series-glow{0%{opacity:0}30%{opacity:1}100%{opacity:.8}}
@keyframes series-portrait{to{opacity:.72;transform:translate(-50%,0) scale(1)}}
@keyframes series-copy-in{to{opacity:1}}
@keyframes series-name-in{to{opacity:1;letter-spacing:.015em;transform:scale(1)}}
@keyframes series-bars{to{transform:translateY(-110%)}}
@media(max-width:900px){.resume-layout{grid-template-columns:1fr}.resume-aside{position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.resume-aside-kicker{grid-column:1/-1}.resume-aside h3,.resume-aside>p:not(.resume-aside-kicker){grid-column:1/-1}.resume-actions{grid-column:1}.resume-stats{grid-column:2;grid-row:4}.series-skills{grid-template-columns:1fr;gap:20px}.series-skill-tabs{flex-direction:row;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.series-skill-tab{min-width:175px;scroll-snap-align:start}.series-skill-tab.is-active::before{top:auto;right:13px;bottom:0;left:13px;width:auto;height:3px}.series-original-card{min-width:min(68vw,440px);flex-basis:min(68vw,440px)}}
@media(max-width:700px){.audience-selector{padding:20px;overflow:auto}.audience-panel{margin:auto}.audience-options{grid-template-columns:1fr;gap:10px;margin-top:24px}.audience-option{min-height:0;padding:13px;display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;column-gap:14px}.audience-avatar{grid-column:1;grid-row:1/3;width:60px;height:60px;margin:0;font-size:.9rem}.audience-avatar-lead{font-size:.56rem}.audience-option-title{grid-column:2;margin:5px 0 4px}.audience-option-copy{grid-column:2}.audience-index{position:absolute;right:12px;top:9px;font-size:.55rem}.audience-footnote{margin-top:16px}.audience-switch{font-size:.5rem;padding:7px 8px}.series-opening-portrait{height:65vh;opacity:.55}.series-opening-copy{padding-top:0}.series-studio,.series-tagline{font-size:.55rem;letter-spacing:.18em}.series-title{letter-spacing:.25em}.resume-heading{align-items:flex-start;flex-direction:column}.resume-sheet-heading{flex-direction:column;gap:6px;padding:16px}.resume-sheet{grid-template-columns:1fr;padding:22px 18px}.resume-sheet-main{padding-right:0}.resume-sheet-side{padding:21px 0 0;border-top:1px solid rgba(108,153,210,.18);border-left:0}.resume-aside{display:block}.resume-stats{grid-template-columns:1fr;grid-row:auto}.resume-project{display:block}.resume-project span{display:block;max-width:none;margin-top:4px;text-align:left}.cert-pick{min-width:205px;min-height:265px;flex-basis:205px}.series-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.series-skill-card{min-height:142px;padding:13px}.series-skill-stage{min-height:420px}.series-originals-rail{gap:13px;padding-right:18px;padding-left:18px}.series-original-card{min-width:84vw;height:540px;min-height:440px;flex-basis:84vw}.series-original-outro{min-width:78vw;height:540px;min-height:440px;flex-basis:78vw}.series-original-content{padding:18px}.series-original-title{font-size:2rem}.series-originals-progress{padding-right:18px;padding-left:18px}.series-originals-controls{display:none}}
@media(max-width:700px) and (max-height:700px){.audience-selector{place-items:start center}.audience-panel{margin:12px auto}}
@media(min-width:701px) and (max-height:620px){.audience-selector{place-items:start center;overflow:auto}.audience-panel{margin:20px auto}.audience-options{margin-top:18px}.audience-option{min-height:160px}}
@media(max-width:768px){
  #m-page .m-project-list[aria-hidden="true"]{display:none!important}
  #m-page .series-mobile-lead{margin:0 0 20px;color:var(--copy,#c5d0e4);font-size:var(--fs-body,.94rem);line-height:1.65}
  #m-page .series-originals{margin:0 -20px;padding:5px 0 28px}
  #m-page .series-originals-rail{padding-right:20px;padding-left:20px}
  #m-page .series-original-card{height:clamp(390px,115vw,490px);min-height:390px}
  #m-page .series-original-outro{height:clamp(390px,115vw,490px);min-height:390px}
  #m-page .series-originals-progress{padding-right:20px;padding-left:20px}
  #m-page .cert-picks{margin:0 -20px 24px;padding:8px 20px 22px}
  #m-page .cert-pick{min-width:190px;min-height:245px;flex-basis:190px}
  #m-page #resume-showcase{display:block!important;padding:40px 20px;border-top:1px solid rgba(108,153,210,.18)}
  #m-page #resume-showcase>.max-w-6xl{width:100%;max-width:none}
  #m-page #resume-showcase .resume-heading{margin-bottom:18px}
  #m-page #resume-showcase .resume-sheet-heading{font-size:.58rem;letter-spacing:.1em}
  #m-page #resume-showcase .resume-block p,#m-page #resume-showcase .resume-block li{font-size:.72rem}
  #m-page #series-skills{margin-top:25px}
  #m-page .series-skills{gap:14px}
  #m-page .series-skill-tabs{max-width:100%}
}

/* Final presentation corrections from the viewport review. */
.series-opening-copy{width:min(100%,1240px);padding:4vh 24px;transform:translateY(-2vh)}
.series-opening-copy h1{font-size:clamp(3rem,10.5vw,9rem);line-height:.84;letter-spacing:.025em}
.series-opening-copy h1 span{display:block}
.series-opening-copy h1 .series-surname{margin-top:.12em;font-size:.42em;line-height:1;letter-spacing:.34em;color:#d8e7ff}
.series-title{margin-top:.85rem}
.series-tagline{margin-top:.65rem}
.series-opening-portrait{height:min(80vh,800px);bottom:-7vh}
.series-handoff{position:fixed;inset:0;z-index:10002;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#04070d;color:#f4f7fd;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}
.series-handoff.is-active{opacity:1;visibility:visible}
.series-handoff-rule{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(100deg,transparent 0%,rgba(38,112,218,.12) 50%,transparent 100%);transform:translateX(-110%)}
.series-handoff.is-active .series-handoff-rule{animation:handoff-sweep 1.35s cubic-bezier(.7,0,.2,1) both}
.series-handoff-kicker{position:relative;color:var(--series-accent);font:700 .68rem var(--font-mono,monospace);letter-spacing:.26em;animation:handoff-copy-in .55s .08s both}
.series-handoff h2{position:relative;margin:20px 18px 10px;font:700 clamp(1.7rem,5.5vw,4.3rem)/1 var(--font-display,monospace);letter-spacing:.06em}
.series-handoff>p:not(.series-handoff-kicker){position:relative;color:var(--series-copy);font-size:.92rem;animation:handoff-copy-in .55s .16s both}
.series-handoff-progress{position:relative;width:min(280px,62vw);height:2px;margin-top:32px;overflow:hidden;background:rgba(145,177,220,.2)}
.series-handoff-progress span{display:block;width:100%;height:100%;background:var(--series-accent);transform:scaleX(0);transform-origin:left}
.series-handoff.is-active .series-handoff-progress span{animation:handoff-progress 1.25s cubic-bezier(.55,.05,.2,1) both}
@keyframes handoff-sweep{to{transform:translateX(110%)}}
@keyframes handoff-progress{to{transform:scaleX(1)}}
@keyframes handoff-copy-in{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
#mission{position:relative;z-index:1;isolation:isolate;background-color:#05070d;background-image:radial-gradient(ellipse at 50% 54%,rgba(28,72,132,.2),transparent 58%)}
#mission-bg{z-index:-1}
#credentials [hidden]{display:none!important}
.resume-heading-note{color:var(--series-dim);font:.65rem var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase}
.series-skills{grid-template-columns:minmax(205px,285px) minmax(0,1fr);gap:clamp(20px,3.2vw,42px)}
.series-skill-tabs{display:grid;grid-template-columns:1fr;gap:3px}
.series-skill-tab{padding:9px 12px}
.series-skill-tab strong{font-size:1.08rem;line-height:1.2}
.series-skill-tab span{margin-top:3px;font-size:.61rem;line-height:1.35}
.series-skill-tab.is-active::before{top:9px;bottom:9px}
.series-skill-stage{min-height:300px}
.series-skill-grid{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
.series-skill-card{min-height:132px;padding:14px}
.series-skill-name{margin-top:10px;font-size:.82rem}
.series-skill-caption{margin-bottom:13px;font-size:.78rem}
.series-skill-stage.is-changing .series-skill-card{animation:skill-card-in .48s both cubic-bezier(.2,.8,.2,1)}
.audience-section-lead{display:none!important}
#resume-showcase{scroll-margin-top:102px}
section[id]{scroll-margin-top:102px}

/* Project opens use the reference's large art-led case-file presentation. */
#case-modal.open{z-index:10020;display:grid;place-items:center;padding:clamp(12px,3vw,42px);background:rgba(2,5,10,.86);backdrop-filter:blur(12px)}
#cm-box{display:flex;width:min(1120px,100%);height:min(92vh,900px);flex-direction:column;overflow:hidden;border:1px solid var(--series-line);border-radius:18px;background:#09111e;box-shadow:0 32px 110px rgba(0,0,0,.65)}
#cm-box>div:first-child{position:relative;z-index:2;flex:none;padding:0;border:0;background:transparent}
.cm-hero{position:relative;display:flex;min-height:250px;height:36vh;max-height:350px;flex:none;align-items:flex-end;overflow:hidden;background:radial-gradient(circle at 55% 30%,rgba(53,130,246,.25),transparent 58%),#0c1b2d}
.cm-hero>img{position:absolute;top:9%;right:3%;width:57%;height:82%;object-fit:contain;object-position:center;opacity:.96;mix-blend-mode:normal;filter:drop-shadow(0 18px 30px rgba(0,0,0,.38))}
.cm-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a1422 0%,rgba(8,16,29,.94) 31%,rgba(8,16,29,.18) 78%),linear-gradient(0deg,rgba(4,9,17,.86),transparent 75%)}
.cm-hero-caption{position:relative;display:flex;width:52%;flex-direction:column;gap:10px;padding:26px clamp(22px,4vw,46px)}
.cm-hero-caption span{color:var(--series-accent);font:700 .62rem/1.5 var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase}
.cm-hero-caption strong{max-width:16ch;color:#f1f6ff;font:700 clamp(1.7rem,3.2vw,2.6rem)/1.05 var(--font-display,monospace)}
.cm-hero-caption small{color:#b7c7dc;font:600 .58rem var(--font-mono,monospace);letter-spacing:.13em}
.cm-close{position:absolute;top:16px;right:16px;z-index:3;display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(219,234,253,.28);border-radius:50%;background:rgba(2,6,12,.72);color:#eaf2fd;cursor:pointer;backdrop-filter:blur(8px);transition:transform .25s,border-color .25s,background .25s}
.cm-close:hover{transform:rotate(90deg);border-color:var(--series-accent);background:#101d30}
#cm-body{flex:1;min-height:0;padding:30px clamp(22px,5vw,54px);overflow-y:auto;overscroll-behavior:contain}
#cm-body h4{margin-top:26px;color:var(--series-accent);font-size:.65rem;letter-spacing:.2em}
#cm-body h4:first-child{margin-top:0}
#cm-body p{max-width:82ch;color:#c4d0e1;font-size:.9rem;line-height:1.75}
#cm-body .chip{border-color:var(--series-line);background:#0d1828;color:#d5e1f1}
#cm-body>a{padding:12px 17px;border-radius:7px;background:var(--series-accent);color:#071321;font-weight:700}
@media(max-width:900px){.series-skills{grid-template-columns:minmax(185px,245px) minmax(0,1fr);gap:20px}.series-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.series-opening-copy{padding:0 15px;transform:translateY(-2vh)}.series-opening-copy h1{font-size:clamp(2.6rem,13vw,4.5rem);letter-spacing:.015em}.series-opening-copy h1 .series-surname{font-size:.38em;letter-spacing:.3em}.series-opening-portrait{height:67vh;bottom:-5vh}.series-studio,.series-tagline{font-size:.52rem;letter-spacing:.15em}.series-title{font-size:.68rem;letter-spacing:.28em}.series-handoff-kicker{font-size:.58rem}#mission{background-color:#05070d}.series-skills{grid-template-columns:1fr;gap:12px}.series-skill-tabs{display:flex;flex-direction:row;overflow-x:auto;padding:2px 0 10px}.series-skill-tab{min-width:154px;padding:10px 12px}.series-skill-tab strong{font-size:.94rem}.series-skill-tab span{font-size:.57rem}.series-skill-stage{min-height:300px}.series-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.series-skill-card{min-height:125px}#case-modal.open{padding:0;align-items:end}#case-modal.bottom-sheet #cm-box{width:100%;max-width:none;max-height:94dvh;height:94dvh;border-radius:18px 18px 0 0}.cm-hero{height:31vh;min-height:210px}.cm-hero>img{right:3%;width:55%}.cm-hero-caption{width:55%;padding:18px 16px}.cm-hero-caption strong{font-size:1.6rem}#cm-body{padding:22px 20px}}
@media(prefers-reduced-motion:reduce){.series-handoff *{animation:none!important}.series-handoff.is-active{transition:none}.series-handoff .series-handoff-progress span{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.series-opening,.series-opening *,.audience-selector,.audience-option,.cert-pick,.magnetic-series{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.series-opening-portrait{opacity:.6;transform:translate(-50%,0) scale(1)}.series-opening-copy h1,.series-studio,.series-title,.series-tagline{opacity:1}}
@media(prefers-reduced-motion:reduce){.series-skill-card,.series-original-card,.series-original-art img,.series-originals-progress-line span,.series-original-open,.series-original-outro,.resume-action-primary,.resume-action-secondary{animation:none!important;transition:none!important;scroll-behavior:auto!important;transform:none!important}.series-skill-stage.is-changing .series-skill-card{animation:none!important}}

/* Portfolio-series finishing pass: use the existing blue/ink design tokens. */
:root{--series-accent:var(--accent,#3b82f6);--series-deep:color-mix(in srgb,var(--bg,#05070d) 86%,var(--surface,#0d1526));--series-panel:color-mix(in srgb,var(--surface,#0d1526) 88%,var(--bg,#05070d));--series-line:color-mix(in srgb,var(--stroke,#1b2740) 78%,#93bdf5 22%);--series-copy:#b9c7dc;--series-dim:#8596af}
.audience-selector{background:var(--bg,#05070d)}
.audience-backdrop{background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--series-accent) 20%,transparent),transparent 58%),color-mix(in srgb,var(--bg,#05070d) 96%,transparent)}
.audience-panel{max-width:1060px}
.audience-panel>.eyebrow,.audience-index,.audience-step-kicker,.series-original-genre,.series-original-count,.series-original-label,.cert-pick-index{color:var(--series-accent)}
.audience-panel h2,.audience-option-title,.series-original-title{font-family:var(--font-body,Inter,sans-serif);letter-spacing:-.035em}
.audience-intro,.audience-option-copy{color:var(--series-copy)}
.audience-options{gap:18px;margin-top:32px}
.audience-option{min-height:220px;padding:25px;border-color:var(--series-line);background:linear-gradient(155deg,color-mix(in srgb,var(--surface,#0d1526) 94%,var(--series-accent)),var(--series-deep));border-radius:16px;box-shadow:0 16px 45px rgba(0,0,0,.16)}
.audience-option:hover,.audience-option:focus-visible{border-color:var(--series-accent);box-shadow:0 24px 60px color-mix(in srgb,var(--series-accent) 18%,transparent)}
.audience-option:focus-visible{outline:2px solid var(--series-accent);outline-offset:3px}
.audience-avatar{height:96px;border-color:color-mix(in srgb,var(--series-accent) 38%,var(--series-line));background:radial-gradient(circle at 50% 110%,color-mix(in srgb,var(--series-accent) 22%,transparent),transparent 68%),linear-gradient(145deg,var(--surface,#0d1526),var(--bg,#05070d));color:#e9effc;text-shadow:0 0 28px color-mix(in srgb,var(--series-accent) 55%,transparent)}
.audience-avatar-tech{color:#a7d0ff}.audience-avatar-lead{color:#d9e5fa}
.audience-switch{border-color:var(--series-line);background:var(--series-panel);color:var(--series-copy)}
.audience-switch span{color:var(--series-accent)}
.audience-option,.cert-pick,.series-original-card,.series-original-outro,.series-skill-card{will-change:transform}
.audience-option{animation:audience-card-in .72s both cubic-bezier(.2,.8,.2,1)}
.audience-option:nth-child(2){animation-delay:.12s}.audience-option:nth-child(3){animation-delay:.24s}
@keyframes audience-card-in{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.series-letterbox-top{animation-name:series-bars-up}.series-letterbox-bottom{animation-name:series-bars-down}
@keyframes series-bars-up{to{transform:translateY(-110%)}}
@keyframes series-bars-down{to{transform:translateY(110%)}}
.audience-briefing{position:relative;z-index:1;padding:clamp(52px,7vw,92px) 24px;border-top:1px solid color-mix(in srgb,var(--stroke) 72%,transparent);border-bottom:1px solid color-mix(in srgb,var(--stroke) 72%,transparent);background:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--series-accent) 9%,transparent),transparent 52%),linear-gradient(180deg,var(--bg,#05070d),var(--series-deep))}
.audience-briefing-inner{width:min(100%,1152px);margin:auto}
.audience-briefing-heading{display:grid;grid-template-columns:minmax(0,.85fr) minmax(280px,1fr);column-gap:clamp(28px,6vw,84px);align-items:end}
.audience-briefing-heading .eyebrow{grid-column:1/-1;margin-bottom:15px;color:var(--series-accent)}
.audience-briefing-heading h2{max-width:14ch;color:var(--text,#fff);font:600 clamp(2rem,4vw,3.35rem)/1.04 var(--font-body,Inter,sans-serif);letter-spacing:-.055em}
.audience-briefing-lead{max-width:54ch;color:var(--series-copy);font-size:.94rem;line-height:1.75}
.audience-briefing-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:32px 0 0;counter-reset:review-step}
.audience-briefing-steps li{min-width:0;animation:briefing-step-in .65s both cubic-bezier(.2,.8,.2,1)}
.audience-briefing-steps li:nth-child(2){animation-delay:.1s}.audience-briefing-steps li:nth-child(3){animation-delay:.2s}
@keyframes briefing-step-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.audience-briefing-steps a{position:relative;display:flex;height:100%;min-height:205px;flex-direction:column;align-items:flex-start;padding:22px;border:1px solid var(--series-line);border-radius:13px;background:color-mix(in srgb,var(--series-panel) 86%,transparent);color:var(--text,#fff);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .3s}
.audience-briefing-steps a:hover,.audience-briefing-steps a:focus-visible{transform:translateY(-4px);border-color:var(--series-accent);background:color-mix(in srgb,var(--series-panel) 76%,var(--series-accent));box-shadow:0 18px 44px color-mix(in srgb,var(--series-accent) 12%,transparent);outline:none}
.audience-step-kicker{font:700 .62rem/1.4 var(--font-mono,monospace);letter-spacing:.13em;text-transform:uppercase}
.audience-briefing-steps strong{margin:16px 0 9px;font-size:1.02rem;line-height:1.35;letter-spacing:-.015em}
.audience-step-copy{color:var(--series-copy);font-size:.78rem;line-height:1.65}
.audience-step-link{margin-top:auto;padding-top:16px;color:var(--series-accent);font:600 .65rem var(--font-mono,monospace);letter-spacing:.04em}
.audience-section-lead{max-width:740px;margin:0 0 28px;padding:14px 17px;border-left:2px solid var(--series-accent);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--surface,#0d1526) 74%,transparent);color:var(--series-copy);font-size:.9rem;line-height:1.72}
.audience-summary{margin:12px 0 26px;color:var(--series-copy);font-size:.94rem;line-height:1.75}


/* Case files: a paced, image-led story with technical depth below the overview. */
#case-modal{opacity:0;transition:opacity .28s ease,backdrop-filter .28s ease}
#case-modal.open{opacity:1}
.case-reader-summary{margin:0 0 22px;padding:18px 21px;border:1px solid var(--series-line);border-left:2px solid var(--series-accent);border-radius:0 11px 11px 0;background:linear-gradient(100deg,color-mix(in srgb,var(--series-accent) 10%,#08111e),#0a1422 76%)}
.case-reader-summary small,.case-story small,.case-gallery header small,.case-recommendations>small{color:var(--series-accent);font:700 .61rem/1.5 var(--font-mono,monospace);letter-spacing:.18em;text-transform:uppercase}
.case-reader-summary p{max-width:70ch!important;margin:7px 0 0;color:#e0eafa!important;font-size:.93rem!important;line-height:1.7!important}
.case-story{display:grid;gap:22px;margin-bottom:27px}
.case-story-intro{padding:7px 0 18px;border-bottom:1px solid rgba(136,173,222,.18)}
.case-story-intro p{max-width:65ch!important;margin:9px 0 0;color:#edf4ff!important;font-size:clamp(1.08rem,2vw,1.42rem)!important;line-height:1.5!important;letter-spacing:-.025em}
.case-impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.case-impact-card{display:flex;min-height:102px;flex-direction:column;justify-content:center;padding:16px;border:1px solid var(--series-line);border-radius:11px;background:radial-gradient(ellipse at 85% 5%,color-mix(in srgb,var(--series-accent) 11%,transparent),transparent 62%),#0a1421}
.case-impact-card strong{color:#f3f7ff;font:700 clamp(1.15rem,2vw,1.65rem)/1.1 var(--font-display,monospace);letter-spacing:-.025em}
.case-impact-card span{margin-top:7px;color:#aebed2;font-size:.7rem;line-height:1.45}
.case-story-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,44px);padding:20px 0;border-top:1px solid rgba(136,173,222,.18);border-bottom:1px solid rgba(136,173,222,.18)}
.case-story-columns p{margin:10px 0 0;color:#c7d4e5!important;font-size:.84rem!important;line-height:1.72!important}
.case-features ul{display:grid;gap:10px;margin:10px 0 0;padding:0;list-style:none}
.case-features li{display:flex;gap:11px;color:#cfdaea;font-size:.79rem;line-height:1.5}
.case-features li span{color:var(--series-accent);font:700 .61rem var(--font-mono,monospace)}
.case-stack>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.case-stack>div span{padding:6px 10px;border:1px solid var(--series-line);border-radius:999px;background:#0b1625;color:#d2dfef;font:600 .68rem var(--font-mono,monospace)}
.case-technical-details{margin:26px 0;border:1px solid var(--series-line);border-radius:12px;background:linear-gradient(145deg,#0c1726,#080f1a)}
.case-technical-details>summary{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;color:#e8f0fc;font-size:.85rem;font-weight:700;cursor:pointer;list-style:none}
.case-technical-details>summary::-webkit-details-marker{display:none}
.case-technical-details>summary::after{content:'+';color:var(--series-accent);font:500 1.35rem var(--font-mono,monospace);transition:transform .25s}
.case-technical-details[open]>summary::after{transform:rotate(45deg)}
.case-technical-details>summary span{margin-left:auto;color:#8294ad;font-size:.68rem;font-weight:500}
.case-technical-content{padding:0 19px 20px;border-top:1px solid rgba(136,173,222,.14);animation:case-notes-in .35s ease both}
@keyframes case-notes-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.case-technical-content h4{margin-top:21px!important}
.case-technical-content p{font-size:.82rem!important}
.case-repo-link{display:inline-flex;min-height:44px;align-items:center;gap:10px;margin:0 0 36px;padding:0 17px!important;border:1px solid color-mix(in srgb,var(--series-accent) 40%,transparent);border-radius:7px!important;background:var(--series-accent)!important;color:#071321!important;font-size:.77rem;font-weight:800;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.case-repo-link:hover{transform:translateY(-2px);box-shadow:0 10px 28px color-mix(in srgb,var(--series-accent) 22%,transparent)}
.case-gallery,.case-recommendations{margin:24px 0 38px;padding-top:24px;border-top:1px solid rgba(136,173,222,.2)}
.case-gallery header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px}
.case-gallery header h3,.case-recommendations h3{margin:7px 0 0;color:#f0f5ff;font:650 clamp(1.35rem,2.5vw,1.9rem)/1.2 var(--font-body,Inter,sans-serif);letter-spacing:-.04em}
.case-gallery header>span{color:#9aabc2;font:600 .62rem var(--font-mono,monospace);letter-spacing:.1em}
.case-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.case-gallery-item{min-width:0;margin:0;overflow:hidden;border:1px solid var(--series-line);border-radius:9px;background:#070e18;transition:transform .3s,border-color .3s,box-shadow .3s}
.case-gallery-item:hover{transform:translateY(-3px);border-color:var(--series-accent);box-shadow:0 14px 32px rgba(0,0,0,.28)}
.case-gallery-item img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#0b1522}
.case-gallery-item figcaption{display:flex;align-items:center;gap:8px;padding:9px 10px;color:#aebdd1;font-size:.64rem;line-height:1.35}
.case-gallery-item figcaption span{color:var(--series-accent);font:700 .58rem var(--font-mono,monospace)}
.case-recommendations h3{margin-bottom:15px}
.case-recommendation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.case-recommendation{display:grid;min-height:105px;grid-template-columns:110px minmax(0,1fr);overflow:hidden;padding:0;border:1px solid var(--series-line);border-radius:10px;background:#0a1421;color:#ecf3fd;text-align:left;cursor:pointer;transition:transform .3s,border-color .3s,background .3s}
.case-recommendation:hover{transform:translateY(-3px);border-color:var(--series-accent);background:#101e31}
.case-recommendation>img{width:100%;height:100%;min-height:105px;object-fit:cover;background:#101c2c}
.case-recommendation>span{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:11px 13px}
.case-recommendation small{color:var(--series-accent);font:700 .53rem var(--font-mono,monospace);letter-spacing:.12em}
.case-recommendation strong{margin-top:6px;font-size:.8rem;line-height:1.35}
.case-recommendation em{margin-top:9px;color:#91a8c5;font-size:.63rem;font-style:normal}
@media(max-width:700px){.case-impact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}.case-impact-card{min-height:88px;padding:11px}.case-impact-card strong{font-size:1rem}.case-impact-card span{font-size:.61rem}.case-story-columns{grid-template-columns:1fr;gap:20px}.case-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.case-recommendation-grid{grid-template-columns:1fr}.case-recommendation{grid-template-columns:95px 1fr}.case-technical-details>summary{align-items:flex-start;flex-direction:column;gap:5px}.case-technical-details>summary span{margin:0}.cm-hero>img{width:56%}}
@media(prefers-reduced-motion:reduce){#case-modal,#cm-box,.cm-hero>img,.cm-hero-caption>*,.case-technical-content,.case-gallery-item,.case-recommendation{animation:none!important;transition:none!important;transform:none!important;filter:none!important}}

/* Animate category selection as one continuous panel transition. */
@property --skill-hue{syntax:"<color>";inherits:true;initial-value:#68adff}
.series-skill-tab::before{position:absolute;top:13px;bottom:13px;left:0;width:3px;border-radius:3px;background:var(--skill-hue,#68adff);box-shadow:0 0 14px var(--skill-hue,#68adff);content:"";opacity:0;transform:scaleY(.45);transform-origin:center;transition:opacity .28s ease,transform .42s cubic-bezier(.2,.8,.2,1),background-color .42s ease,box-shadow .42s ease}
.series-skill-tab.is-active::before{opacity:1;transform:scaleY(1)}
.series-skill-stage{position:relative;isolation:isolate;border-radius:14px;transition:opacity .42s ease,transform .44s cubic-bezier(.2,.8,.2,1),filter .42s ease,--skill-hue .48s ease}
.series-skill-stage::before{position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--skill-hue,#68adff) 9%,transparent),transparent 72%);content:"";opacity:.85;pointer-events:none;transition:opacity .42s ease,background .48s ease}
.series-skill-stage.is-exiting::before{opacity:.12}
.series-skill-stage.is-changing .series-skill-caption,.series-skill-stage.is-changing .series-skill-card{will-change:transform,opacity,filter}
@media(max-width:900px){.series-skill-tab::before{top:auto;right:13px;bottom:0;left:13px;width:auto;height:3px;transform:scaleX(.45);transform-origin:left center}.series-skill-tab.is-active::before{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.series-skill-tab::before,.series-skill-stage,.series-skill-stage::before{transition:none!important}.series-skill-stage.is-exiting{opacity:1;transform:none;filter:none}}

/* Cinematic opening: portrait, name, and role line now enter on one paced timeline. */
.series-opening{background:radial-gradient(ellipse at 50% 68%,#09162a 0%,#040810 45%,#020408 78%)}
.series-opening-glow{background:radial-gradient(ellipse at 50% 72%,rgba(49,125,235,.24),transparent 58%),radial-gradient(ellipse at 50% 50%,rgba(129,172,232,.07),transparent 42%),linear-gradient(180deg,#03060b 5%,transparent 44%,#03060b 100%);animation:series-glow 4.9s ease both}
.series-opening-portrait{bottom:-7vh;height:min(82vh,820px);opacity:0;clip-path:inset(100% 0 0 0);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);filter:brightness(.92) contrast(1.16) saturate(.78) drop-shadow(0 0 58px rgba(59,137,255,.25));animation:series-portrait-cinematic 3s 1.05s cubic-bezier(.2,.78,.18,1) both}
.series-opening-copy{transform:translateY(-6vh);text-shadow:0 5px 38px rgba(0,0,0,.88)}
.series-studio{opacity:0;animation:series-copy-rise .72s .22s both cubic-bezier(.2,.8,.2,1)}
.series-opening-copy h1{opacity:1;animation:none}
.series-opening-copy h1 span{display:block;width:max-content;max-width:100%;margin-right:auto;margin-left:auto;opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(30px);animation:series-title-line 1.02s .58s both cubic-bezier(.2,.8,.2,1)}
.series-opening-copy h1 .series-surname{animation-delay:.8s}
.series-opening-copy h1 span:first-child{background:linear-gradient(105deg,#fff 22%,#c8ddff 48%,#fff 66%);background-size:220% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;color:transparent;animation:series-title-line 1.02s .58s both cubic-bezier(.2,.8,.2,1),series-title-sheen 1.45s 1.62s both ease-in-out}
.series-title{opacity:0;animation:series-copy-rise .82s 1.7s both cubic-bezier(.2,.8,.2,1)}
.series-tagline{opacity:0;animation:series-copy-rise .78s 2.02s both cubic-bezier(.2,.8,.2,1)}
.series-letterbox{height:6vh;animation:series-bars 1.05s 4.02s cubic-bezier(.72,0,.2,1) both}
@keyframes series-portrait-cinematic{0%{opacity:0;clip-path:inset(100% 0 0 0);transform:translate(-50%,4vh) scale(1.075);filter:brightness(.72) contrast(1.16) saturate(.72) drop-shadow(0 0 0 rgba(59,137,255,0))}55%{opacity:.68;clip-path:inset(0 0 0 0);filter:brightness(.88) contrast(1.16) saturate(.76) drop-shadow(0 0 48px rgba(59,137,255,.2))}100%{opacity:.8;clip-path:inset(0 0 0 0);transform:translate(-50%,0) scale(1);filter:brightness(.92) contrast(1.16) saturate(.78) drop-shadow(0 0 58px rgba(59,137,255,.25))}}
@keyframes series-copy-rise{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes series-title-line{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(30px);filter:blur(8px)}70%{opacity:1}100%{opacity:1;clip-path:inset(0 0 -8% 0);transform:translateY(0);filter:blur(0)}}
@keyframes series-title-sheen{0%{background-position:100% 0}100%{background-position:0 0}}
@media(max-width:700px){.series-opening-copy{transform:translateY(-4vh)}.series-opening-copy h1 span{width:auto}.series-opening-portrait{height:min(72vh,680px);bottom:-3vh}.series-studio,.series-tagline{font-size:.5rem}.series-title{font-size:.64rem}.series-letterbox{height:4vh}}
@media(prefers-reduced-motion:reduce){.series-opening-glow,.series-opening-portrait,.series-studio,.series-opening-copy h1 span,.series-title,.series-tagline,.series-letterbox{animation:none!important}.series-opening-portrait{opacity:.76;clip-path:none;transform:translate(-50%,0) scale(1);filter:brightness(.9) contrast(1.15) saturate(.8)}.series-opening-copy h1 span,.series-studio,.series-title,.series-tagline{opacity:1;clip-path:none;transform:none;filter:none}.series-letterbox{transform:translateY(-110%)}}

/* Follow the reference composition: lift the title to uncover the portrait,
   then let the role line settle into its own lower position. */
.series-opening-copy{animation:series-opening-lift .92s 3.05s both cubic-bezier(.2,.78,.18,1)}
.series-tagline{animation:series-copy-rise .78s 2.02s both cubic-bezier(.2,.8,.2,1),series-tagline-settle .9s 3.25s both cubic-bezier(.2,.78,.18,1)}
@keyframes series-opening-lift{from{transform:translateY(-6vh)}to{transform:translateY(-19vh)}}
@keyframes series-tagline-settle{from{transform:translateY(0)}to{transform:translateY(22vh)}}
@media(max-width:700px){.series-opening-copy{animation:series-opening-lift-mobile .92s 3.05s both cubic-bezier(.2,.78,.18,1)}.series-tagline{animation:series-copy-rise .78s 2.02s both cubic-bezier(.2,.8,.2,1),series-tagline-settle-mobile .9s 3.25s both cubic-bezier(.2,.78,.18,1)}}
@keyframes series-opening-lift-mobile{from{transform:translateY(-4vh)}to{transform:translateY(-15vh)}}
@keyframes series-tagline-settle-mobile{from{transform:translateY(0)}to{transform:translateY(17vh)}}
@media(prefers-reduced-motion:reduce){.series-opening-copy,.series-tagline{animation:none!important}.series-opening-copy{transform:translateY(-6vh)}.series-tagline{transform:none}}

/* Reference-paced opening beats: studio, name, series, portrait, role, reveal. */
.series-opening{background:radial-gradient(ellipse at 50% 58%,#09101b 0%,#03060b 54%,#010204 100%)}
.series-opening-glow{z-index:0;opacity:.48;animation:none;background:radial-gradient(ellipse at 50% 66%,rgba(49,123,225,.2),transparent 56%),linear-gradient(180deg,rgba(2,5,9,.35),transparent 35%,rgba(2,5,9,.65))}
.series-opening-portrait{z-index:1;bottom:-16vh;height:min(86vh,860px);width:auto;max-width:96vw;opacity:0;clip-path:none;mask-image:none;mix-blend-mode:normal;transform:translate(-50%,5vh) scale(1.12);filter:blur(16px) brightness(.52) contrast(1.12) saturate(.78);transition:opacity 1.25s ease,transform 1.55s cubic-bezier(.16,.76,.2,1),filter 1.35s ease;animation:none}
.series-opening.beat-portrait .series-opening-portrait{opacity:.88;transform:translate(-50%,0) scale(1);filter:blur(0) brightness(.9) contrast(1.1) saturate(.82) drop-shadow(0 0 48px rgba(54,128,233,.16))}
.series-opening-copy{width:min(100%,1240px);padding:4vh 24px;transform:translateY(0);animation:none;transition:transform 1.12s cubic-bezier(.18,.76,.2,1)}
.series-opening.beat-portrait .series-opening-copy{transform:translateY(-28vh)}
.series-studio{position:absolute;top:50%;right:0;left:0;margin:0;opacity:0;transform:translateY(14px);animation:none;transition:opacity .65s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.series-opening.beat-studio .series-studio{opacity:1;transform:translateY(0)}
.series-opening.beat-name .series-studio{opacity:0;transform:translateY(-12px)}
.series-opening-copy h1{opacity:1;animation:none}
.series-opening-copy h1 span{display:block;width:max-content;max-width:100%;margin-right:auto;margin-left:auto;opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(26px);animation:none;filter:blur(7px);transition:none}
.series-opening.beat-name .series-opening-copy h1 span{opacity:1;clip-path:inset(0 0 -8% 0);transform:translateY(0);filter:blur(0);transition:opacity .85s ease,clip-path .9s cubic-bezier(.16,.76,.2,1),transform .95s cubic-bezier(.16,.76,.2,1),filter .85s ease}
.series-opening.beat-name .series-opening-copy h1 .series-surname{transition-delay:.12s}
.series-opening-copy h1 span:first-child{background:none;color:#fff;-webkit-text-fill-color:#fff}
.series-opening.beat-series .series-opening-copy h1 span:first-child{background:linear-gradient(105deg,#fff 12%,#d4e5ff 48%,#fff 70%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:opening-name-sheen 1.2s .12s both ease-in-out}
.series-title{opacity:0;transform:translateY(13px);animation:none;transition:opacity .68s ease,transform .78s cubic-bezier(.2,.8,.2,1)}
.series-opening.beat-series .series-title{opacity:1;transform:translateY(0)}
.series-tagline{opacity:0;transform:translateY(-8px);animation:none;transition:opacity .72s ease,transform .92s cubic-bezier(.18,.76,.2,1)}
.series-opening.beat-role .series-tagline{opacity:1;transform:translateY(50vh)}
.series-letterbox{height:6vh;transform:translateY(0);animation:none;transition:transform 1.05s cubic-bezier(.72,0,.2,1)}
.series-opening.beat-release .series-letterbox-top{transform:translateY(-110%)}
.series-opening.beat-release .series-letterbox-bottom{transform:translateY(110%)}
@keyframes opening-name-sheen{from{background-position:100% 0}to{background-position:0 0}}
@media(max-width:700px){.series-opening-copy{padding:4vh 15px}.series-opening.beat-portrait .series-opening-copy{transform:translateY(-22vh)}.series-opening-portrait{width:auto;height:min(75vh,700px);bottom:-9vh;max-width:none}.series-title{font-size:.64rem;letter-spacing:.27em}.series-tagline{font-size:.48rem;letter-spacing:.13em}.series-opening.beat-role .series-tagline{transform:translateY(52vh)}.series-letterbox{height:4vh}}
@media(prefers-reduced-motion:reduce){.series-opening .series-opening-glow,.series-opening .series-opening-portrait,.series-opening .series-studio,.series-opening .series-opening-copy,.series-opening .series-opening-copy h1 span,.series-opening .series-title,.series-opening .series-tagline,.series-opening .series-letterbox{animation:none!important;transition:none!important}.series-opening .series-opening-portrait{opacity:.78;clip-path:none;transform:translate(-50%,0) scale(1);filter:brightness(.9) contrast(1.1)}.series-opening .series-opening-copy{transform:none}.series-opening .series-studio,.series-opening .series-opening-copy h1 span,.series-opening .series-title,.series-opening .series-tagline{opacity:1;clip-path:none;transform:none;filter:none}.series-opening .series-letterbox{transform:translateY(-110%)}}
.cert-picks{scrollbar-color:var(--series-accent) transparent;overscroll-behavior-inline:contain}
.cert-pick{border-color:var(--series-line);background:radial-gradient(circle at 78% 17%,color-mix(in srgb,var(--series-accent) 22%,transparent),transparent 52%),linear-gradient(145deg,var(--surface,#0d1526),var(--bg,#05070d));}
.cert-pick:hover,.cert-pick:focus-visible{border-color:var(--series-accent);box-shadow:0 18px 40px color-mix(in srgb,var(--series-accent) 16%,transparent)}
.resume-heading{align-items:center}
.resume-sheet-wrap{border-color:var(--series-line);background:var(--series-panel);box-shadow:0 24px 70px rgba(0,0,0,.24)}
.resume-sheet-heading{align-items:center;border-color:var(--series-line);color:var(--series-copy);line-height:1.5}
.resume-sheet{background:linear-gradient(180deg,color-mix(in srgb,var(--surface,#0d1526) 96%,white 4%),var(--series-panel))}
.resume-sheet-main{min-width:0}
.resume-sheet-side{min-width:0;border-color:var(--series-line)}
.resume-block{border-color:color-mix(in srgb,var(--series-line) 64%,transparent)}
.resume-block h3,.resume-aside-kicker{color:var(--series-accent)!important}
.resume-block p,.resume-block li{color:var(--series-copy)}
.resume-entry{align-items:flex-start;flex-wrap:wrap}
.resume-entry>div{min-width:0;flex:1 1 230px}
.resume-entry time{padding-top:2px}
.resume-block a{color:color-mix(in srgb,var(--series-accent) 65%,white)}
.resume-aside h3{letter-spacing:-.04em}
.resume-stats div{background:var(--series-panel)}
.resume-action-primary{background:var(--series-accent);color:#061321}
.resume-action-primary:hover{background:color-mix(in srgb,var(--series-accent) 78%,white)}
.resume-action-secondary{border-color:var(--series-line);color:var(--text,#fff)}
.resume-action-secondary:hover{background:color-mix(in srgb,var(--surface,#0d1526) 80%,var(--series-accent))}
.series-skill-tab{border:1px solid transparent}
.series-skill-tab:hover,.series-skill-tab.is-active{border-color:var(--series-line);background:color-mix(in srgb,var(--surface,#0d1526) 86%,var(--series-accent) 14%)}
.series-skill-card{background:linear-gradient(145deg,color-mix(in srgb,var(--surface,#0d1526) 94%,var(--skill-hue) 6%),var(--series-deep));border-color:var(--series-line)}
.series-skill-card:focus-visible,.series-original-open:focus-visible,.series-original-github:focus-visible,.series-originals-controls button:focus-visible,.cert-pick:focus-visible{outline:2px solid var(--series-accent);outline-offset:3px}
.magnetic-series{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
body.resume-reveal-ready .resume-block{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .75s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .75s ease}
body.resume-reveal-ready .resume-block.is-revealed{opacity:1;transform:translateY(0);filter:blur(0)}
body.resume-reveal-ready .resume-block h3,body.resume-reveal-ready .resume-block>p,body.resume-reveal-ready .resume-block>ul,body.resume-reveal-ready .resume-block>.resume-entry,body.resume-reveal-ready .resume-block>.resume-project{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
body.resume-reveal-ready .resume-block.is-revealed h3,body.resume-reveal-ready .resume-block.is-revealed>p,body.resume-reveal-ready .resume-block.is-revealed>ul,body.resume-reveal-ready .resume-block.is-revealed>.resume-entry,body.resume-reveal-ready .resume-block.is-revealed>.resume-project{opacity:1;transform:translateY(0)}
body.resume-reveal-ready .resume-block.is-revealed>*:nth-child(2){transition-delay:.1s}body.resume-reveal-ready .resume-block.is-revealed>*:nth-child(3){transition-delay:.18s}body.resume-reveal-ready .resume-block.is-revealed>*:nth-child(4){transition-delay:.26s}body.resume-reveal-ready .resume-block.is-revealed>*:nth-child(5){transition-delay:.34s}
@media(max-width:900px){.audience-briefing-heading{grid-template-columns:1fr;gap:14px}.audience-briefing-heading h2{max-width:22ch}.audience-briefing-lead{max-width:66ch}.resume-layout{gap:24px}.resume-sheet{grid-template-columns:minmax(0,1.2fr) minmax(190px,.8fr);padding:25px 22px}.resume-sheet-main{padding-right:19px}.resume-sheet-side{padding-left:19px}}
@media(max-width:700px){.audience-briefing{padding:44px 20px}.audience-briefing-steps{grid-template-columns:1fr;gap:10px;margin-top:22px}.audience-briefing-steps a{min-height:0;padding:17px}.audience-briefing-steps strong{margin:10px 0 6px}.audience-step-link{padding-top:10px}.audience-section-lead{margin:0 0 21px;padding:12px 14px;font-size:.82rem}.resume-heading{gap:16px}.resume-heading>a{width:100%;justify-content:center}.resume-sheet{grid-template-columns:minmax(0,1fr);gap:0;padding:22px 18px}.resume-sheet-main{padding-right:0}.resume-sheet-side{padding:20px 0 0;border-top:1px solid var(--series-line);border-left:0}.resume-block{padding-bottom:16px;margin-bottom:16px}.resume-entry{gap:7px}.resume-entry>div{flex-basis:100%}.resume-entry time{margin-top:0}.resume-project{display:grid;grid-template-columns:1fr;gap:3px}.resume-project span{max-width:none;text-align:left}.resume-stats{grid-template-columns:1fr 1fr 1fr}.resume-stats div{min-width:0;align-items:flex-start;flex-direction:column;gap:5px;padding:10px}.resume-stats strong{font-size:1.05rem}.resume-stats span{font-size:.58rem}.audience-option{min-height:0}.audience-avatar{height:62px}}
@media(max-width:768px){html{overflow-y:auto;scrollbar-gutter:auto}}
@media(prefers-reduced-motion:reduce){.audience-option,.audience-briefing-steps li{animation:none!important}.audience-briefing-steps a,.resume-block,body.resume-reveal-ready .resume-block,body.resume-reveal-ready .resume-block>*{transition:none!important;filter:none!important;transform:none!important;opacity:1!important}}

/* Keep anchored chapter headings clear of the fixed navigation. */
html{scroll-padding-top:92px}
main section[id],#m-page>section[id],#audience-briefing,#contact{scroll-margin-top:92px}

/* The portfolio uses a blue security-operations palette throughout. */
.xgrid{--c-soc:#3b82f6;--c-intel:#68a7ff;--c-cd:#8bbcff;--c-kcu:#4d8ef0;--c-res:#9abfff}
.xcard{border-color:var(--series-line);background:linear-gradient(145deg,var(--series-panel),var(--bg,#05070d))}
#m-page .m-stat{--a:var(--series-accent,#3b82f6)}

/* Finishing pass: clearer portrait placement, soft role handoff, and darker
   skill/credential surfaces with their key information visible at rest. */
.series-opening-copy{transform:translateY(-7vh)}
.series-handoff{transition:opacity .82s cubic-bezier(.22,.7,.2,1),visibility 0s linear .82s}
.series-handoff.is-active{transition-delay:0s}
.series-handoff-rule{animation-duration:1s}
.series-handoff.is-active .series-handoff-rule{animation-duration:1s}
.series-handoff-progress span{transition:transform 1s cubic-bezier(.55,.05,.2,1)}
.series-handoff.is-active .series-handoff-progress span{animation-duration:1s}
@keyframes portfolio-hero-rise{from{opacity:0;transform:translate3d(0,24px,0);filter:blur(7px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
body.portfolio-entering #hero-name{animation:portfolio-hero-rise .95s .02s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #hero-eyebrow,body.portfolio-entering #hero-role{animation:portfolio-hero-rise .78s .12s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #hero-bio{animation:portfolio-hero-rise .82s .2s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #hero-ctas{animation:portfolio-hero-rise .82s .3s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #hero-terminal{animation:portfolio-hero-rise .9s .22s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #m-home .m-eyebrow{animation:portfolio-hero-rise .68s .04s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #m-home .m-name{animation:portfolio-hero-rise .9s .1s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #m-home .m-role{animation:portfolio-hero-rise .72s .2s both cubic-bezier(.2,.8,.2,1)}
body.portfolio-entering #m-home .m-lede{animation:portfolio-hero-rise .82s .28s both cubic-bezier(.2,.8,.2,1)}
#stats-chapter{margin-top:1.5rem!important}
.xgrid{--c-kcu:#69a9ff;--c-soc:#44cbbd;--c-intel:#aa8fff;--c-cd:#68d39a;--c-res:#e4b66d;perspective:1200px}
.xcard{backface-visibility:hidden}
.cert-pick{min-width:260px;min-height:330px;flex-basis:260px;padding:22px;background:radial-gradient(circle at 82% 15%,color-mix(in srgb,var(--series-accent) 13%,transparent),transparent 45%),linear-gradient(150deg,#080d16,#060a11 76%)}
.cert-pick-index{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#8bbcff;font:700 .61rem var(--font-mono,monospace);letter-spacing:.18em}
.cert-pick-rank{display:grid;width:28px;height:28px;place-items:center;border:1px solid color-mix(in srgb,var(--series-accent) 45%,#26364c);border-radius:50%;color:#d8e8ff;font-size:.58rem;letter-spacing:0}
.cert-pick-title{max-width:18ch;margin-top:auto;color:#f1f6ff;font:700 1.15rem/1.28 var(--font-display,monospace)}
.cert-pick-meta{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding-top:13px;border-top:1px solid rgba(124,161,208,.2)}
.cert-pick-issuer{margin:0;color:#c1cee0;font:600 .68rem/1.45 var(--font-body,Inter,sans-serif);letter-spacing:.04em;text-transform:none}
.cert-pick-date{color:#788ba5;font:600 .57rem var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.cert-pick-verify{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--series-accent) 38%,#1b2738);border-radius:7px;background:rgba(11,20,33,.9);color:#d9e9ff;font:700 .62rem var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;transition:background .25s,border-color .25s,color .25s}
.cert-pick-verify span{color:#80b8ff;font-size:.9rem}
.cert-pick:hover .cert-pick-verify,.cert-pick:focus-visible .cert-pick-verify{border-color:var(--series-accent);background:color-mix(in srgb,#080d16 78%,var(--series-accent));color:#fff}
.cert-pick::before{right:-8px;bottom:38px;font-size:7.6rem;opacity:.55}
.series-skills{gap:clamp(18px,2.8vw,34px)}
.series-skill-tabs{gap:6px}
.series-skill-tab{border:1px solid #111a29;border-radius:9px;background:#070b12;color:#91a1b8;transition:background .35s,border-color .35s,color .35s,transform .35s}
.series-skill-tab:hover{transform:translateX(3px);border-color:#25344a;background:#0a111c;color:#e2ecfa}
.series-skill-tab.is-active{border-color:color-mix(in srgb,var(--skill-hue) 48%,#1c2b40);background:linear-gradient(100deg,color-mix(in srgb,#0b111b 82%,var(--skill-hue) 18%),#080c13);color:#f3f7fd;box-shadow:inset 0 0 24px color-mix(in srgb,var(--skill-hue) 6%,transparent)}
.series-skill-tab strong{font-size:1.03rem}
.series-skill-tab span{color:#a5b3c7}
.series-skill-stage{min-height:300px;perspective:1000px;transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1),filter .28s ease}
.series-skill-stage.is-exiting{opacity:0;transform:translateY(10px);filter:blur(5px)}
.series-skill-caption{color:#aebdd0}
.series-skill-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
.series-skill-card{min-height:158px;padding:16px;border-color:#182233;border-left:2px solid color-mix(in srgb,var(--skill-hue) 68%,#26364c);border-radius:11px;background:linear-gradient(145deg,#090e17,#060a10 80%);box-shadow:inset 0 1px rgba(255,255,255,.018);cursor:default;transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.series-skill-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--skill-hue) 56%,#26364c);box-shadow:0 16px 32px rgba(0,0,0,.3),0 0 25px color-mix(in srgb,var(--skill-hue) 9%,transparent)}
.series-skill-card::after{opacity:.09;filter:blur(34px);transition:opacity .4s}
.series-skill-card:hover::after{opacity:.22}
.series-skill-mono{width:38px;height:38px;border-radius:8px;background:color-mix(in srgb,#080d15 82%,var(--skill-hue) 18%);font-size:.77rem}
.series-skill-name{margin-top:12px;color:#f0f5fc;font-size:.84rem}
.series-skill-note{max-height:none;margin-top:7px;overflow:visible;color:#aab8ca;font-size:.69rem;line-height:1.55;opacity:1}
.series-skill-stage.is-changing .series-skill-card{animation:skill-card-in .72s both cubic-bezier(.2,.8,.2,1)}
.resume-cert-list{display:grid;gap:9px;margin-top:10px!important;padding:0!important;list-style:none}
.resume-cert-list li{display:flex;flex-direction:column;gap:3px;padding:8px 0;border-bottom:1px solid rgba(113,143,180,.14)}
.resume-cert-list li:last-child{border-bottom:0}
.resume-cert-list li a{color:#edf4ff!important;font-size:.68rem;font-weight:700;line-height:1.4;text-decoration:none}
.resume-cert-list li span{color:#a8b8cd;font-size:.62rem}
.resume-cert-list li a small{display:inline-flex;margin-left:5px;color:#83b9ff;font:700 .54rem var(--font-mono,monospace);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:700px){.series-opening-copy{transform:translateY(-5vh)}#stats-chapter{margin-top:1.25rem!important}.cert-pick{min-width:220px;min-height:290px;flex-basis:220px}.series-skill-stage{min-height:0}.series-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.series-skill-card{min-height:150px;padding:12px}.series-skill-note{font-size:.64rem}}
@media(prefers-reduced-motion:reduce){body.portfolio-entering #hero-name,body.portfolio-entering #hero-eyebrow,body.portfolio-entering #hero-role,body.portfolio-entering #hero-bio,body.portfolio-entering #hero-ctas,body.portfolio-entering #hero-terminal,body.portfolio-entering #m-home .m-eyebrow,body.portfolio-entering #m-home .m-name,body.portfolio-entering #m-home .m-role,body.portfolio-entering #m-home .m-lede{animation:none;opacity:1;filter:none;transform:none}.series-skill-stage,.series-skill-tab,.series-skill-card{transition:none!important}.series-skill-stage.is-changing .series-skill-card{animation:none!important}}

/* Match the source sequence's horizontal project rail; case-file depth lives
   inside View Project, where the reader can continue vertically. */
.resume-heading h2,.audience-briefing-heading h2,.series-section-heading h2{color:#f5f8ff;text-shadow:0 8px 34px rgba(90,154,255,.13)}
.resume-sheet{border-color:#26364e;background:linear-gradient(145deg,#0d1420 0%,#080d15 76%);box-shadow:0 28px 80px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.025)}
.resume-sheet-heading{color:#dce8fa}
.resume-block h3{color:#77b3ff}
.resume-block p,.resume-block li,.resume-entry span,.resume-project span{color:#c1cee0;line-height:1.68}
.resume-entry strong,.resume-project strong{color:#f2f6fc}
.resume-project strong a{color:inherit;text-decoration:none}
.resume-project strong a:hover{color:#80b7ff}
.resume-project{display:block;padding:11px 0;border-bottom:1px solid rgba(113,143,180,.14);color:#cbd7e7;font-size:.74rem}
.resume-project:last-child{border-bottom:0}
.resume-project span{display:block;max-width:none;margin-top:5px;color:#b8c6d8;text-align:left;font-size:.7rem;line-height:1.65}
.display-h{color:#f5f8ff}
body.audience-leadership #m-stats .m-stat:nth-child(4),body.audience-leadership #m-stats .m-stat:nth-child(5){display:none}
.resume-cert-list li{padding:11px 0}
.resume-cert-list li a{color:#f2f6fc!important;font-size:.75rem}
.resume-cert-list li span{color:#aabbd1;font-size:.68rem}
.resume-cert-list li a small{margin-left:8px;padding:3px 6px;border:1px solid rgba(92,155,235,.3);border-radius:4px;background:rgba(30,75,130,.14)}
.resume-aside h3{color:#f4f7fd;line-height:1.1}
.resume-aside>p:not(.resume-aside-kicker){color:#b7c5d8;line-height:1.75}
.resume-stats strong{color:#f2f6fc}
.series-skill-tabs{gap:8px}
.series-skill-tab{padding:14px 16px;border-color:#19263a;background:linear-gradient(135deg,#0a111c,#070b12)}
.series-skill-tab.is-active{border-color:color-mix(in srgb,var(--skill-hue) 58%,#243247);background:linear-gradient(105deg,color-mix(in srgb,#101827 88%,var(--skill-hue) 12%),#080d15);box-shadow:inset 3px 0 var(--skill-hue),0 8px 22px rgba(0,0,0,.2)}
.series-skill-tab strong{color:#f1f6ff;font-size:1.08rem}
.series-skill-tab span{margin-top:6px;color:#b3c2d6;font-size:.7rem}
.series-skill-stage{transition:opacity .38s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .38s ease}
.series-skill-stage.is-exiting{opacity:0;transform:translate3d(0,18px,0) scale(.985);filter:blur(8px)}
.series-skill-stage.is-changing .series-skill-caption{animation:skill-caption-enter .56s both cubic-bezier(.2,.8,.2,1)}
.series-skill-stage.is-changing .series-skill-card{animation:skill-card-in .7s both cubic-bezier(.2,.8,.2,1);animation-delay:calc(var(--card-delay,0ms) + 70ms)}
.series-skill-mono{box-shadow:0 0 22px color-mix(in srgb,var(--skill-hue) 14%,transparent)}
.series-skill-name{font-size:.9rem}
.series-skill-note{max-width:38ch;color:#bdcadb;font-size:.72rem;line-height:1.65}
@keyframes skill-caption-enter{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.case-repo-link{display:inline-flex;margin-top:22px;padding:11px 15px;border:1px solid rgba(94,160,245,.34);border-radius:7px;background:#0b1523;color:#b9d6ff;font:700 .68rem var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.case-repo-link:hover{border-color:#5fa4ff;background:#10243b;color:#fff}
.case-reader-summary{margin:2px 0 24px;padding:16px 18px;border:1px solid rgba(90,153,231,.24);border-left:3px solid #539bfa;border-radius:8px;background:linear-gradient(110deg,rgba(18,38,63,.72),rgba(8,14,23,.9))}
.case-reader-summary small{color:#79b4ff;font:700 .59rem var(--font-mono,monospace);letter-spacing:.17em;text-transform:uppercase}
.case-reader-summary p{margin:8px 0 0;color:#e2ebf7;font-size:.91rem;line-height:1.7}
.case-gallery,.case-recommendations{margin-top:42px;padding-top:26px;border-top:1px solid #1c2a3d}
.case-gallery>header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.case-gallery>header small,.case-recommendations>small{color:#70adff;font:700 .59rem var(--font-mono,monospace);letter-spacing:.2em}
.case-gallery>header h3,.case-recommendations h3{margin:6px 0 0;color:#f2f6fd;font-size:1.4rem;font-weight:700}
.case-gallery>header>span{color:#9eafc5;font:600 .62rem var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.case-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.case-gallery-item{min-width:0;margin:0;overflow:hidden;border:1px solid #1a293c;border-radius:10px;background:#080e17}
.case-gallery-item img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#060a10;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.case-gallery-item:hover img{transform:scale(1.035)}
.case-gallery-item figcaption{display:flex;align-items:baseline;gap:10px;padding:9px 11px;color:#b9c7d9;font-size:.7rem}
.case-gallery-item figcaption span{color:#70adff;font:700 .57rem var(--font-mono,monospace)}
.case-recommendation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:16px}
.case-recommendation{display:flex;min-width:0;align-items:center;gap:12px;overflow:hidden;padding:9px;border:1px solid #1a293c;border-radius:9px;background:#080e17;color:#f0f5fc;text-align:left;cursor:pointer;transition:transform .25s,border-color .25s,background .25s}
.case-recommendation:hover{transform:translateY(-3px);border-color:#396ba7;background:#0b1523}
.case-recommendation>img{width:78px;height:60px;flex:none;border-radius:5px;object-fit:cover;background:#05080e}
.case-recommendation>span{display:flex;min-width:0;flex-direction:column;gap:4px}
.case-recommendation small,.case-recommendation em{color:#8fa4bf;font:600 .53rem var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.case-recommendation strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.case-recommendation em{color:#7bb4ff;font-size:.52rem}
@media(max-width:700px){.case-gallery-grid,.case-recommendation-grid{grid-template-columns:1fr}.case-gallery-item img{aspect-ratio:16/9}.case-recommendation>img{width:88px;height:64px}.resume-sheet{padding:23px 19px}.resume-heading h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.series-skill-stage.is-changing .series-skill-caption,.series-skill-stage.is-changing .series-skill-card{animation:none!important}.series-original-card,.case-gallery-item img,.case-recommendation{transition:none!important}}

/* ---------- Skills: horizontal category rail + switch motion ---------- */
.series-skills{display:block}
.series-skill-tabs{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}
.series-skill-tab{flex:0 0 auto;min-width:178px;padding:12px 16px;scroll-snap-align:start;transform:none}
.series-skill-tab:hover{transform:none}
.series-skill-tab strong{display:block;font-size:1.06rem;line-height:1.25}
.series-skill-tab span{display:block;margin-top:5px;font-size:.63rem;line-height:1.4}
.series-skill-tab::before,.series-skill-tab.is-active::before{top:auto;right:16px;bottom:0;left:16px;width:auto;height:3px;transform-origin:center;transform:scaleX(.4)}
.series-skill-tab.is-active::before{transform:scaleX(1)}
.series-skill-stage{min-height:0;margin-top:6px;perspective:none}
.series-skill-stage.is-exiting{opacity:0;transform:translate3d(0,8px,0);filter:none}
.series-skill-grid{grid-template-columns:repeat(auto-fit,minmax(184px,1fr))}
@media(min-width:1240px){.series-skill-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.series-skill-tab{min-width:158px;padding:10px 13px}.series-skill-tab strong{font-size:.98rem}.series-skill-tab::before,.series-skill-tab.is-active::before{right:13px;left:13px}}

/* Opening v2 — review note applied: the full name lands as one unit first,
   the brand line follows, and the role line is moved out of the portrait and
   made plainly readable instead of fading across the image. */
.series-opening-copy{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.8vh,22px);z-index:2;padding:7vh 24px;animation:none;transform:translateY(3vh);transition:transform 1.12s cubic-bezier(.18,.76,.2,1)}
.series-opening-copy h1{display:flex;flex-direction:column;align-items:center;gap:.02em;margin:0}
.series-opening-copy h1 span{display:block;width:auto;max-width:100%;margin:0;opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(26px);filter:blur(7px);animation:none;transition:none}
.series-opening.beat-name .series-opening-copy h1 span{opacity:1;clip-path:inset(0 0 -8% 0);transform:translateY(0);filter:blur(0);transition:opacity .8s ease,clip-path .88s cubic-bezier(.16,.76,.2,1),transform .92s cubic-bezier(.16,.76,.2,1),filter .8s ease}
.series-opening-copy h1 .series-surname{transition-delay:0s;font-size:inherit;letter-spacing:inherit}
.series-opening.beat-name .series-opening-copy h1 span:first-child{background:linear-gradient(105deg,#fff 12%,#d4e5ff 48%,#fff 70%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:opening-name-sheen 1.15s .1s both ease-in-out}
.series-studio{position:static;top:auto;right:auto;left:auto;margin:0;opacity:0;transform:translateY(12px);animation:none;transition:opacity .6s ease,transform .68s cubic-bezier(.2,.8,.2,1)}
.series-opening.beat-studio .series-studio{opacity:1;transform:translateY(0)}
.series-title{margin:0;opacity:0;transform:translateY(12px);animation:none;transition:opacity .66s ease,transform .74s cubic-bezier(.2,.8,.2,1)}
.series-opening.beat-series .series-title{opacity:1;transform:translateY(0)}
.series-opening-copy .series-tagline{display:inline-flex;align-items:center;gap:9px;margin:0;padding:9px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:linear-gradient(100deg,#4f95ff,#2563eb);color:#04101f!important;font:800 .62rem/1 var(--font-mono,monospace);letter-spacing:.16em;text-shadow:none;box-shadow:0 12px 34px rgba(37,99,235,.34),inset 0 1px rgba(255,255,255,.4);opacity:0;transform:translateY(10px);animation:none;transition:opacity .6s ease,transform .7s cubic-bezier(.18,.76,.2,1)}
.series-opening.beat-role .series-tagline{opacity:1;transform:translateY(0)}
.series-opening.beat-portrait .series-opening-copy{transform:translateY(-16vh)}
.series-opening.is-finishing .series-opening-portrait,.series-opening.is-finishing .series-opening-copy,.series-opening.is-finishing .series-opening-copy h1 span,.series-opening.is-finishing .series-studio,.series-opening.is-finishing .series-title,.series-opening.is-finishing .series-tagline,.series-opening.is-finishing .series-letterbox{transition-duration:.36s!important}
@media(max-width:700px){.series-opening-copy{padding:6vh 15px;gap:clamp(10px,1.5vh,16px)}.series-opening.beat-portrait .series-opening-copy{transform:translateY(-10vh)}.series-opening-copy .series-tagline{font-size:.54rem;letter-spacing:.13em;padding:8px 14px}}
@media(prefers-reduced-motion:reduce){.series-opening-copy .series-tagline{opacity:1;transform:none}}

/* Review note: the sideways rail keeps its arrows and progress line, but the
   browser scrollbar itself is hidden so the section reads as one composition. */
.series-originals-rail{scrollbar-width:none;-ms-overflow-style:none}
.series-originals-rail::-webkit-scrollbar{display:none;width:0;height:0}

/* Review note: the toolkit keeps the same box size but wraps into multiple
   rows instead of scrolling sideways, and one indicator glides between the
   active categories like a marker that travels and stops. */
.series-skill-tabs{position:relative;display:flex;flex-wrap:wrap;gap:10px;overflow:visible;padding:2px 0 12px;scroll-snap-type:none;scrollbar-width:none}
.series-skill-tabs::-webkit-scrollbar{display:none;width:0;height:0}
.series-skill-tab{position:relative;z-index:2;flex:0 0 auto;min-width:178px;max-width:280px;transform:none;border-color:transparent!important;background:transparent!important;box-shadow:none!important}
.series-skill-tab:hover,.series-skill-tab:focus-visible{transform:none;background:rgba(16,28,46,.55)!important;border-color:#24354d!important}
.series-skill-tab.is-active{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.series-skill-tab.is-active strong{color:#f7faff}
.series-skill-tab::before{content:none!important;display:none!important}
.series-skill-indicator{position:absolute;top:0;left:0;z-index:1;border:1px solid color-mix(in srgb,var(--skill-hue,#68adff) 62%,#243247);border-radius:9px;background:linear-gradient(105deg,color-mix(in srgb,#101827 84%,var(--skill-hue,#68adff) 16%),#080d15);box-shadow:inset 0 0 26px color-mix(in srgb,var(--skill-hue,#68adff) 9%,transparent),0 10px 26px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:transform .46s cubic-bezier(.22,.8,.2,1),width .46s cubic-bezier(.22,.8,.2,1),height .46s cubic-bezier(.22,.8,.2,1),background .46s ease,border-color .46s ease,box-shadow .46s ease,opacity .3s ease}
@media(prefers-reduced-motion:reduce){.series-skill-indicator{transition:none!important}}

/* ---------- Review round 2: cascade repairs + role banner placement ----------
   The surname delay rule earlier in this file (higher specificity) was still
   staggering the two name lines, the role line sat on the portrait's face
   because the copy column is vertically centred, and the toolkit tabs could
   not pair up on narrow screens. */
.series-opening.beat-name .series-opening-copy h1 .series-surname{transition-delay:0s}
.series-opening > .series-tagline{position:absolute;left:0;right:0;bottom:13vh;width:max-content;max-width:calc(100% - 48px);margin-inline:auto;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:linear-gradient(100deg,#4f95ff,#2563eb);color:#04101f!important;font:800 .62rem/1 var(--font-mono,monospace);letter-spacing:.16em;text-shadow:none;box-shadow:0 12px 34px rgba(37,99,235,.34),inset 0 1px rgba(255,255,255,.4);opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.18,.76,.2,1)}
.series-opening.beat-role > .series-tagline{opacity:1;transform:translateY(0)}
.series-skill-tab:focus-visible{outline:2px solid #5fa4ff;outline-offset:2px}
@media(max-width:700px){.series-opening > .series-tagline{bottom:11vh;padding:8px 14px;font-size:.54rem;letter-spacing:.13em}.series-skill-tab{min-width:0;flex:1 1 calc(50% - 5px);max-width:none;padding:11px 12px}.series-skill-tab strong{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){.series-opening > .series-tagline{opacity:1;transform:none}}

/* The first name line used to carry a legacy keyframe animation from an earlier
   pass. When beat-name replaced that animation the line snapped to full opacity
   instead of transitioning, so only the surname faded in and the name did not
   land as one unit. Stop the legacy animation and let both lines share the same
   transition. */
@media screen and (prefers-reduced-motion: no-preference){
  .series-opening .series-opening-copy h1 span:first-child{animation:none!important;opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(26px);filter:blur(7px);transition:none}
}
.series-opening.beat-name .series-opening-copy h1 span:first-child{opacity:1;clip-path:inset(0 0 -8% 0);transform:translateY(0);filter:blur(0);transition:opacity .8s ease,clip-path .88s cubic-bezier(.16,.76,.2,1),transform .92s cubic-bezier(.16,.76,.2,1),filter .8s ease}

/* ============================================================
   FINAL REVIEW PASS — opening title, mission, chooser
   ============================================================ */

/* One name, one treatment. The gradient/sheen on MANICHAND next to a flat
   #d8e7ff surname read as two different colours on first paint. */
.series-opening-copy h1 span,
.series-opening-copy h1 .series-surname,
.series-opening.beat-name .series-opening-copy h1 span:first-child,
.series-opening.beat-series .series-opening-copy h1 span:first-child {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

/* The mission line is the thesis of the page, but the old clamp topped out at
   48px and read like body copy next to the display headings. Give it real
   scale and a comfortable measure. */
.mission-line {
  font-size: clamp(1.9rem, 4.1vw, 4.15rem);
  line-height: 1.24;
  letter-spacing: -0.035em;
  max-width: min(1060px, 60ch);
}
@media (max-width: 700px) {
  .mission-line {
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
    line-height: 1.3;
    max-width: 100%;
  }
}

/* The chooser stays neutral until the visitor chooses. The panel receives
   focus, so no card is painted with the keyboard focus ring on open. */
.audience-panel:focus { outline: none; }
.audience-option:focus-visible { outline: 2px solid var(--series-accent); outline-offset: 3px; }

/* Keep the persona role line from breaking after the slash on narrow desktops. */
#hero-role { text-wrap: balance; }

/* ============================================================
   ROUND 3 — opening without the photograph, the role key-fact
   band, a compact toolkit, and page-wide scale corrections.
   ============================================================ */

/* ---------- Opening: the name carries the screen on its own ---------- */
.series-opening-aura{
  position:absolute;left:50%;top:50%;z-index:0;width:min(1180px,94vw);height:min(680px,74vh);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,rgba(56,132,255,.20),rgba(56,132,255,.05) 46%,transparent 72%);
  filter:blur(8px);
}
.series-opening-scan{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.series-opening-scan::after{
  position:absolute;top:0;right:0;left:0;height:1px;content:"";
  background:linear-gradient(90deg,transparent,rgba(115,181,255,.55),transparent);
  opacity:0;animation:series-scan 3.4s 1.1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes series-scan{
  0%{opacity:0;transform:translateY(16vh)}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;transform:translateY(86vh)}
}

.series-opening-copy{transform:translateY(0)}
.series-opening.beat-portrait .series-opening-copy{transform:translateY(0)}
.series-name-block{
  position:relative;padding:clamp(14px,2vw,26px) clamp(18px,3.2vw,48px);
  background-image:
    linear-gradient(#5f9dff,#5f9dff),linear-gradient(#5f9dff,#5f9dff),
    linear-gradient(#5f9dff,#5f9dff),linear-gradient(#5f9dff,#5f9dff);
  background-repeat:no-repeat;
  background-size:20px 1px,1px 20px,20px 1px,1px 20px;
  background-position:0 0,0 0,100% 100%,100% 100%;
  opacity:0;transform:scale(.985);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,.76,.2,1);
}
.series-opening.beat-name .series-name-block{opacity:1;transform:none}
.series-opening-copy h1{font-size:clamp(3.2rem,12vw,10rem);line-height:.84;letter-spacing:.012em}
/* Faint technical echo behind each line, so the name has depth without
   splitting it into two different colours. */
.series-opening-copy h1 span{position:relative}
.series-opening-copy h1 span::before{
  position:absolute;top:0;left:0;content:attr(data-text);
  color:transparent;-webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1px rgba(103,164,255,.34);
  transform:translate(.055em,.055em);pointer-events:none;
}
.series-name-rule{
  display:block;width:0;height:1px;margin:clamp(10px,1.4vh,16px) auto 0;
  background:linear-gradient(90deg,transparent,#61a3ff,transparent);
  opacity:.9;transition:width 1s .3s cubic-bezier(.2,.8,.2,1);
}
.series-opening.beat-series .series-name-rule{width:min(340px,74%)}
@media(max-width:700px){
  .series-name-block{padding:12px 16px;background-size:14px 1px,1px 14px,14px 1px,1px 14px}
  .series-opening-copy h1{font-size:clamp(2.5rem,11.8vw,4.4rem)}
}
@media(prefers-reduced-motion:reduce){
  .series-opening-scan{display:none}
  .series-name-block{opacity:1;transform:none;transition:none}
  .series-name-rule{width:min(340px,74%);transition:none}
}

/* ---------- Role key facts (replaces the old evidence snapshot) ---------- */
.audience-facts{
  position:relative;z-index:1;padding:clamp(54px,6.4vw,92px) 24px;
  border-top:1px solid color-mix(in srgb,var(--stroke) 40%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--stroke) 40%,transparent);
  background:
    radial-gradient(ellipse at 14% 0%,color-mix(in srgb,var(--series-accent) 9%,transparent),transparent 58%),
    linear-gradient(180deg,#050a12,#04070c);
}
.audience-facts-inner{max-width:1120px;margin:0 auto}
.audience-facts-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(18px,3.4vw,56px);align-items:end;
}
.audience-facts-head h2{
  margin:.55rem 0 0;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.7rem,3vw,2.55rem);line-height:1.08;color:#f4f8ff;text-wrap:balance;
}
.audience-facts-lead{margin:0;color:#9fb1c9;font-size:.98rem;line-height:1.65}
.audience-facts-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin:clamp(22px,2.8vw,36px) 0 0;overflow:hidden;
  border:1px solid var(--series-line);border-radius:13px;background:var(--series-line);
}
.audience-fact{min-width:0;padding:clamp(14px,1.6vw,20px);background:#060b13}
.audience-fact dt{
  font:600 .58rem/1.2 var(--font-mono,monospace);letter-spacing:.15em;
  text-transform:uppercase;color:#7b8fae;
}
.audience-fact dd{margin:.5rem 0 0;color:#eaf2ff;font-size:.94rem;line-height:1.45}
.audience-fact dd b{color:#fff;font-weight:700}
.audience-fact dd span{display:block;margin-top:.18rem;color:#8fa3c0;font-size:.76rem;line-height:1.4}
.audience-facts-links{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(18px,2.2vw,26px) 0 0}
.audience-facts-links a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--series-line);
  border-radius:999px;color:#dbe7f8;font:600 .66rem/1 var(--font-mono,monospace);letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;transition:border-color .25s,background .25s,color .25s,transform .25s;
}
.audience-facts-links a:first-child{border-color:color-mix(in srgb,var(--series-accent) 55%,var(--series-line));background:color-mix(in srgb,var(--series-accent) 12%,transparent);color:#fff}
.audience-facts-links a:hover,.audience-facts-links a:focus-visible{border-color:var(--series-accent);background:color-mix(in srgb,var(--series-accent) 16%,transparent);transform:translateY(-2px);outline:none}
@media(max-width:900px){
  .audience-facts-head{grid-template-columns:1fr;align-items:start}
  .audience-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .audience-facts{padding:44px 18px}
  .audience-facts-grid{grid-template-columns:1fr}
}

/* ---------- Toolkit: complete capability matrix ----------
   The whole toolkit is shown at once — every category, every tool — so a
   reviewer never has to click to discover what is missing. Four columns
   collapse to three, two, then one; chips stay small and scannable. */
.series-skills{display:block}
.skill-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:0 0 clamp(16px,2vw,24px);color:#a9bcd6;font-size:.72rem;line-height:1.5;
}
.skill-legend-title{
  color:#93a9c8;font:600 .56rem/1 var(--font-mono,monospace);
  letter-spacing:.18em;text-transform:uppercase;
}
.skill-legend-item{
  display:inline-flex;align-items:center;gap:6px;color:#cbd7e8;
  font:600 .6rem/1 var(--font-mono,monospace);letter-spacing:.09em;text-transform:uppercase;
}
.skill-legend-note{margin-left:auto;color:#a2b5cf;font-size:.68rem}
.skill-legend .lv{width:8px;height:8px;border-radius:50%}
.lv-pro{background:#5fd39f}
.lv-int{background:#e2b969}
.lv-beg{background:#7b8fae}

.series-skill-matrix{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;
  border:1px solid var(--series-line);border-radius:14px;background:var(--series-line);
}
.skill-block{min-width:0;padding:clamp(13px,1.3vw,17px);background:linear-gradient(160deg,#080d16,#060a11 84%)}
.skill-block-head{
  display:flex;align-items:baseline;gap:8px;margin:0 0 10px;padding:0 0 9px;
  border-bottom:1px solid color-mix(in srgb,var(--skill-hue,#68adff) 26%,var(--series-line));
}
.skill-block-index{
  flex:none;color:color-mix(in srgb,var(--skill-hue,#68adff) 60%,#7f94b2);
  font:600 .55rem/1 var(--font-mono,monospace);letter-spacing:.06em;
}
.skill-block-name{
  margin:0;min-width:0;color:#eef4fd;font-family:var(--font-display);
  font-size:.82rem;font-weight:700;line-height:1.2;overflow-wrap:break-word;
}
.skill-block-count{margin-left:auto;color:#7f94b2;font:600 .55rem/1 var(--font-mono,monospace)}
.skill-block-list{display:flex;flex-wrap:wrap;gap:5px}
.skill-chip{
  display:inline-flex;align-items:center;gap:6px;min-width:0;
  padding:4px 9px 4px 7px;border:1px solid #17222f;border-radius:999px;
  background:#0a1019;color:#cdd9e9;font-size:.72rem;line-height:1.2;
  transition:border-color .22s,background .22s,color .22s;
}
.skill-chip:hover{border-color:color-mix(in srgb,var(--skill-hue,#68adff) 46%,#17222f);background:#0d1522;color:#fff}
.skill-chip-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#5b7089}
.skill-chip[data-level="Pro"] .skill-chip-dot{background:#5fd39f}
.skill-chip[data-level="Intermediate"] .skill-chip-dot{background:#e2b969}
.skill-chip[data-level="Beginner"] .skill-chip-dot{background:#7b8fae}
.skill-chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.series-skill-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;
  color:#7f94b2;font-size:.75rem;line-height:1.5;
}
.series-skill-foot strong{color:#dbe7f8;font-weight:600}
.series-skill-foot a{color:#8fb8f5;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--series-accent) 40%,transparent)}
.series-skill-foot a:hover{color:#fff}
@media(max-width:1240px){.series-skill-matrix{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  .series-skill-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skill-legend-note{margin-left:0;flex-basis:100%}
}
@media(max-width:560px){
  .series-skill-matrix{grid-template-columns:1fr}
  .skill-chip{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){.skill-chip{transition:none}}

/* ---------- Mission chapter: a role-specific kicker above the thesis ----------
   The section is one long display line, so the kicker is its only room to name
   which reader it is speaking to. It fades to full as the line animates in. */
.mission-kicker{
  margin:0 auto clamp(14px,2.2vh,26px);max-width:min(760px,88vw);
  color:#7f9bc4;font:600 .68rem/1.5 var(--font-mono,monospace);
  letter-spacing:.28em;text-transform:uppercase;
}
.mission-kicker:empty{display:none}
@media(max-width:700px){
  .mission-kicker{font-size:.58rem;letter-spacing:.22em;margin-bottom:12px}
}

/* ============================================================
   ROUND 4 — header alignment and contrast.
   ============================================================ */

/* The pill was 48rem — almost exactly as wide as its contents — so the
   centre nav could only sit in the leftover gap between the logo and the
   CTA, which read as left-of-centre. Widen the bar and give the two side
   groups equal flex so the links are centred on the pill itself. */
.nav-pill { max-width: 60rem; }

@media (min-width: 769px) {
  .nav-pill > .nav-left   { flex: 1 1 0; min-width: 0; }
  .nav-pill > .nav-center { flex: 0 0 auto; }
  .nav-pill > .nav-right  { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
}

/* Stars are decoration: keep them behind the controls instead of twinkling
   across the command-palette chip. */
.nav-pill { isolation: isolate; }
.nav-pill .star { z-index: 0; }
.nav-pill .nav-left,
.nav-pill .nav-center,
.nav-pill .nav-right { position: relative; z-index: 1; }

/* A little more body in the bar so small labels do not read as faded. */
.nav-pill { background: rgba(13, 21, 38, 0.74); border-color: rgba(255, 255, 255, 0.16); }
@supports (backdrop-filter: blur(10px)) {
  .nav-pill { background: rgba(13, 21, 38, 0.74); }
}

/* The VIEW pill was the smallest, dimmest label in the bar. */
.audience-switch {
  color: #cfdcef;
  background: rgba(20, 38, 64, 0.85);
  border-color: rgba(122, 170, 232, 0.4);
  letter-spacing: 0.09em;
}
.audience-switch span { color: #8fc4ff; }
.audience-switch:hover,
.audience-switch:focus-visible {
  color: #ffffff;
  background: rgba(26, 48, 80, 0.92);
  border-color: rgba(143, 196, 255, 0.75);
}
@media (min-width: 769px) {
  .audience-switch { font-size: 0.66rem; padding: 8px 13px; }
}

/* Brighter clock and nav labels. */
#nav-clock { color: #ffffff; }
.nav-pill .nav-link { color: #f2f7ff; }

/* Command-palette chip: a readable, deliberately sized keycap. */
#palette-open {
  min-width: 2.4rem;
  color: #cfdcef;
  border-color: rgba(120, 160, 220, 0.45);
  padding: 3px 7px;
}
#palette-open:hover { color: #ffffff; }