@import url('assets/manrope.css');
:root{--purple:#9370db;--ink:#f0edf2;--paper:#19181d;--muted:#b1acb8;--surface:#29272e;--font:'Manrope',Arial,sans-serif;--serif:'Manrope',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font);}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--purple);outline-offset:5px}button{cursor:pointer}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}a>span[aria-hidden]{margin-left:16px}header{max-width:1336px;margin:auto;padding:30px 0 24px;display:flex;align-items:center;gap:42px}header .brand{font-size:18px;font-weight:600;margin-right:auto}header nav{display:flex;gap:27px;font-size:15px}header nav a:hover{color:var(--purple)}header .cv{font-size:15px}.menu{display:none}.version-links{max-width:1336px;margin:0 auto;display:flex;justify-content:flex-end;gap:23px;font-size:13px;color:var(--muted)}.version-links .selected{color:var(--ink);font-weight:600}.version-links .selected:before{content:'';display:inline-block;background:var(--purple);width:7px;height:7px;border-radius:100%;margin-right:8px}main{max-width:1336px;margin:0 auto}.hero{padding:43px 0 47px}.title-row{display:flex;align-items:center;gap:42px}.portrait{width:76px;height:85px;object-fit:cover;object-position:50% 34%;border-radius:22px}.role{font-size:25px;font-weight:500;line-height:1.25;margin-top:22px}.intro{font-size:19px;line-height:1.55;max-width:545px;margin-top:24px}.current-role{font-size:14px;color:var(--muted);margin-top:20px}.actions{display:flex;align-items:center;gap:25px;margin-top:25px;font-size:15px}.actions a{transition:transform .25s ease}.actions a:hover{transform:translateY(-3px)}.primary{background:var(--ink);color:var(--paper);padding:13px 19px;border-radius:5px}.evidence{padding-top:8px}.world img{width:100%;aspect-ratio:1.78;object-fit:cover;border-radius:5px}.world figcaption{display:flex;justify-content:space-between;font-size:13px;padding-top:12px;color:var(--muted)}.world figcaption a{color:var(--ink)}.teaching-teaser{display:grid;grid-template-columns:1fr 182px;gap:22px;margin-top:40px;align-items:start}.teaching-teaser h2{font:500 28px/1.08 var(--serif);max-width:240px}.teaching-teaser p{font-size:15px;line-height:1.55;margin-top:14px}.teaching-teaser .reach{font-size:12px;line-height:1.5;color:var(--muted)}.teaching-teaser a{display:inline-flex;font-size:14px;margin-top:15px}.teaching-teaser img{width:182px;aspect-ratio:16/9;object-fit:contain;border-radius:4px}.skills-section{display:grid;grid-template-columns:.73fr 1.5fr;gap:65px;margin:16px 0 64px;padding:36px 0 0}.section-intro h2,.section-heading h2{font:500 48px/1.08 var(--serif);letter-spacing:-1px}.section-intro p{font-size:17px;max-width:320px;margin:16px 0 22px}.section-intro>a{font-size:15px}.skill-rows{display:grid;grid-template-columns:1fr 1fr;gap:27px 38px}.skill-row{display:flex;gap:24px;justify-content:space-between}.skill-row h3{font-size:20px;font-weight:500}.skill-row p{font-size:15px;color:var(--muted);margin-top:8px}.skill-row>span{color:var(--purple);font-size:24px}.project-section{padding:50px 0}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.project-section article{display:grid;grid-template-columns:1.25fr 1fr;gap:55px}.project-section article>img{width:100%;aspect-ratio:1.78;object-fit:cover;border-radius:5px}.project-section h3{font:500 46px var(--serif);margin:4px 0 0}.project-section p{font-size:17px;margin:18px 0}.project-section .project-role{font-size:14px;color:var(--muted);margin:3px 0 20px}.project-section article a{display:inline-flex;margin-top:8px}.teaching-section{display:grid;grid-template-columns:.8fr 1.6fr;gap:50px;padding:70px 0}.video-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.video-pair img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:4px}.video-pair figcaption{font-size:17px;margin-top:15px}footer{padding:65px 0 30px}footer h2{font:500 48px var(--serif)}footer p{margin:14px 0}footer>div{display:flex;gap:30px;margin-top:26px}
/* The editorial reading system. */
.skills-main{padding-top:40px}.skills-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:50px;font-size:15px}.skills-top label{display:flex;align-items:center;gap:12px;background:var(--surface);padding:12px 16px;border-radius:5px}.skills-top label>span{font-size:25px;line-height:1}.skills-top input{width:260px;border:0;background:transparent;outline:0;color:var(--ink);font-size:14px}.knowledge-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 280px;gap:54px}.knowledge-layout>aside>h2{font-size:16px;font-weight:500;margin-bottom:19px}.area-links{display:flex;flex-direction:column;gap:18px;font-size:15px;line-height:1.35}.area-links .active{color:#7652b7;font-weight:600}.directory-link{margin-top:50px}.directory-link h3{font-size:20px;font-weight:500}.directory-link p{font-size:14px;color:var(--muted);margin:13px 0 20px}.directory-link>a{font-size:14px}.breadcrumbs{font-size:14px;color:var(--muted);margin-bottom:20px}.skill-intro h1{font:500 66px/1 var(--serif);letter-spacing:-2px;margin-bottom:20px}.skill-intro p{font-size:18px;line-height:1.55}.project-ref{display:flex;gap:13px;align-items:center;margin-top:25px}.project-ref img{width:45px;height:45px;object-fit:cover;border-radius:7px}.project-ref strong{display:block;font-size:14px;font-weight:500}.project-ref span{display:block;font-size:12px;color:var(--muted);margin-top:4px}.disclosures{margin-top:32px}details{padding:17px 0}summary{list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;font-size:21px;font-weight:500}summary::-webkit-details-marker{display:none}summary>b{font-weight:400;font-size:25px;color:#7652b7}.detail-summary{font-size:14px;color:var(--muted);margin:6px 30px 0 0}.detail-content{padding-top:10px}.detail-content p{font-size:16px;line-height:1.6;margin:13px 0}.detail-content>a{font-size:14px;display:inline-flex;margin:12px 0 3px}.disclosures details[open]{background:#eae6ef;margin:7px -24px;padding:20px 24px 24px;border-radius:5px}.disclosures details[open] summary>b{font-size:0}.disclosures details[open] summary>b:after{content:'−';font-size:25px}.related{padding-top:44px}.related figure>img{width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:4px}.related figcaption{font-size:12px;color:var(--muted);margin-top:9px}.related h2{font-size:13px!important;color:var(--muted);margin-top:26px}.related h3{font:500 31px var(--serif);margin-top:12px}.related p{font-size:15px;line-height:1.6;margin:12px 0 20px}.related>a{font-size:14px}.project-detail{padding:38px 0}.project-detail>h1{font:500 108px var(--serif);letter-spacing:-4px;margin-top:35px}.project-detail .lead{max-width:820px;font-size:21px;line-height:1.55;margin:14px 0 32px}.project-full{width:100%;height:430px;object-fit:cover;border-radius:5px}.case-columns{display:grid;grid-template-columns:270px 1fr;gap:70px;margin-top:50px}.case-columns aside{font-size:15px;color:var(--muted)}.case-columns aside p{margin:12px 0 30px}.case-columns article{max-width:760px}.case-columns article h2{font:500 38px var(--serif);margin:30px 0 15px}.case-columns article p{font-size:17px;line-height:1.65;margin:18px 0}
/* The panoramic, work-first direction has its own composition and scale. */
.concept-b{--ink:#f0edf2;--paper:#19181d;--muted:#b1acb8;--surface:#29272e;--font:'Manrope',Arial,sans-serif;--serif:'Manrope',Arial,sans-serif}.concept-b header{padding-top:28px}.concept-b .version-links{justify-content:flex-start;margin-top:9px}.concept-b .hero{padding-top:35px}.top-identity{display:flex;align-items:center;justify-content:space-between}.top-identity>div:first-child{display:flex;gap:16px;align-items:center}.concept-b .portrait{width:51px;height:58px;border-radius:16px}.concept-b .role{margin:0;font-size:21px;font-weight:500}.concept-b .current-role{margin-top:5px;font-size:13px}.concept-b .actions{margin-top:0}.concept-b .primary{background:var(--purple);color:#17131e;border-radius:24px;padding:12px 22px}.concept-b .hero>h1{font:500 143px/1.06 var(--font);letter-spacing:-9px;margin:19px 0 0;white-space:nowrap}.hero-description{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:start;margin:15px 0 30px}.concept-b .intro{max-width:730px;font-size:18px;line-height:1.6;margin:0}.reach-summary{text-align:right;padding-top:3px}.reach-summary p{font-size:24px;font-weight:500;letter-spacing:-.6px}.reach-summary span{font-size:13px;display:block;margin-top:6px;color:var(--muted)}.panorama{position:relative;overflow:hidden;border-radius:5px;background:#304332}.panorama>img{width:100%;height:335px;object-fit:cover;object-position:50% 44%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.panorama:hover>img{transform:scale(1.025)}.panorama:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(7,13,10,.78));pointer-events:none}.panorama figcaption{display:flex;justify-content:space-between;align-items:end;position:absolute;bottom:24px;left:30px;right:30px;z-index:1;color:#fff}.panorama figcaption h2{font-size:41px;line-height:1.1;letter-spacing:-1px;font-weight:500}.panorama figcaption span{font-size:13px}.panorama figcaption> a{font-size:15px}.teaching-ribbon{display:grid;grid-template-columns:1fr 1.5fr auto;gap:37px;padding-top:28px;align-items:start}.teaching-ribbon h2{font-size:19px;font-weight:500;line-height:1.4;max-width:220px}.teaching-ribbon p{font-size:15px;line-height:1.6;color:var(--muted)}.teaching-ribbon>a{font-size:14px;white-space:nowrap;margin-top:3px}.concept-b .skills-section{display:block;margin-top:27px;padding-top:43px}.concept-b .section-intro{display:grid;grid-template-columns:1fr 1.2fr auto;gap:30px;align-items:start}.concept-b .section-intro h2,.concept-b .section-heading h2{font-size:59px;font-weight:500;letter-spacing:-2px}.concept-b .section-intro p{margin:0;font-size:17px;max-width:460px}.concept-b .section-intro>a{margin-top:5px}.concept-b .skill-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:35px}.concept-b .skill-row{display:block}.concept-b .skill-row>span{display:block;margin-top:15px}.concept-b .skill-row h3{font-size:23px;letter-spacing:-.5px}.concept-b .skill-row p{font-size:15px}.concept-b .project-section article{grid-template-columns:1.5fr 1fr;gap:58px}.concept-b .project-section h3{font-size:46px;letter-spacing:-2px}.concept-b .teaching-section{display:block}.concept-b .video-pair{margin-top:35px;gap:32px}.concept-b .skills-top{margin-bottom:25px}.concept-b .knowledge-layout{grid-template-columns:360px minmax(0,1fr);gap:40px 70px}.concept-b .knowledge-layout>aside:first-child{grid-column:1/-1;display:flex;align-items:start;gap:35px;padding-bottom:16px}.concept-b .knowledge-layout>aside:first-child>h2{white-space:nowrap;margin-top:5px}.concept-b .area-links{flex-direction:row;flex-wrap:wrap;gap:13px 25px;max-width:1060px;font-size:14px}.concept-b .area-links a{padding:5px 0}.concept-b .area-links .active{color:#c8b0ef}.concept-b .directory-link{display:none}.concept-b .knowledge-article{grid-column:2;grid-row:2}.concept-b .related{grid-column:1;grid-row:2;padding-top:0}.concept-b .related figure>img{aspect-ratio:.95;object-fit:cover}.concept-b .related h3{font-size:35px}.concept-b .skill-intro h1{font-size:72px;letter-spacing:-3px;margin-bottom:22px}.concept-b .skill-intro p{font-size:20px;max-width:760px}.concept-b .project-ref{display:none}.concept-b .disclosures{margin-top:30px}.concept-b .disclosures details{padding:19px 0}.concept-b .disclosures details[open]{background:var(--surface);margin:7px -25px;padding:23px 25px 26px}.concept-b summary{font-size:23px}.concept-b summary>b{color:#bea3ec}.concept-b .detail-summary{font-size:15px}.concept-b .detail-content p{font-size:17px}.concept-b .breadcrumbs{margin-bottom:21px}.concept-b .project-detail>h1{font-size:120px}.concept-b .project-full{height:440px}
@media(min-width:1700px){header,main,.version-links{max-width:1440px}}
@media(max-width:1439px){header,main,.version-links{margin-left:52px;margin-right:52px}.teaching-teaser{grid-template-columns:1fr 150px}.teaching-teaser img{width:150px}.knowledge-layout{grid-template-columns:200px minmax(0,1fr) 250px;gap:42px}.concept-b .hero>h1{font-size:clamp(92px,10vw,143px)}}
@media(max-width:1050px){header,main,.version-links{margin-left:32px;margin-right:32px}header nav{gap:17px;font-size:14px}header{gap:22px}.title-row{gap:20px}.portrait{width:65px;height:73px}.teaching-teaser{display:block}.teaching-teaser img{display:none}.teaching-teaser h2{max-width:280px}.knowledge-layout{grid-template-columns:170px minmax(0,1fr);gap:36px}.related{display:none}.concept-b .knowledge-layout{grid-template-columns:250px 1fr;gap:35px}.concept-b .related{display:block}.concept-b .skill-intro h1{font-size:60px}.concept-b .hero>h1{letter-spacing:-6px}.hero-description{gap:35px}.teaching-ribbon{grid-template-columns:1fr 2fr}.teaching-ribbon>a{grid-column:2}.concept-b .skill-rows{grid-template-columns:repeat(2,1fr)}.concept-b .section-intro{grid-template-columns:1fr 1.2fr}.concept-b .section-intro>a{grid-column:2}}
@media(max-width:700px){body{}header,main,.version-links{margin-left:22px;margin-right:22px}header{padding:22px 0 19px;gap:20px;flex-wrap:wrap}header .brand{font-size:16px}header nav{display:none;order:5;flex-basis:100%;flex-wrap:wrap;gap:16px 22px;padding:10px 0}header.menu-expanded nav{display:flex}header .cv{display:none}.menu{display:block;border:0;background:none;color:inherit;padding:4px 0;font-size:14px}.version-links{justify-content:flex-start;font-size:11px;gap:18px}.version-links .selected:before{width:5px;height:5px;margin-right:5px}.title-row{justify-content:space-between;gap:16px;align-items:start}.portrait{width:59px;height:67px;border-radius:18px;margin-top:7px}.role{font-size:21px;margin-top:17px}.intro{font-size:16px;line-height:1.6;margin-top:19px}.current-role{font-size:11px;margin-top:17px}.actions{gap:18px;font-size:12px;margin-top:21px}.primary{padding:11px 13px;border-radius:4px}.actions a>span{margin-left:9px}.evidence{padding-top:31px}.world img{aspect-ratio:1.78;border-radius:3px}.world figcaption{font-size:10px;padding-top:9px}.world figcaption a>span{margin-left:5px}.teaching-teaser{margin-top:27px;display:grid;grid-template-columns:1fr 104px;gap:14px}.teaching-teaser img{display:block;width:104px;margin-top:4px}.teaching-teaser h2{font-size:23px;max-width:210px}.teaching-teaser p{font-size:13px;line-height:1.55;margin-top:10px}.teaching-teaser .reach{font-size:10px}.teaching-teaser a{font-size:12px;margin-top:13px}.skills-section{display:block;margin-top:0;padding-top:24px;margin-bottom:35px}.section-intro h2,.section-heading h2{font-size:40px}.section-intro p{font-size:15px;max-width:310px;margin:12px 0 15px}.section-intro>a{font-size:13px}.skill-rows{display:block;margin-top:26px}.skill-row{margin-top:23px}.skill-row h3{font-size:19px}.skill-row p{font-size:14px;margin-top:6px}.project-section{padding:28px 0}.section-heading{margin-bottom:22px}.section-heading>a{font-size:12px}.project-section article{display:block}.project-section h3{font-size:37px;margin-top:19px}.project-section p{font-size:15px;margin:13px 0}.project-section .project-role{font-size:12px;margin-bottom:17px}.project-section article a{font-size:13px}.teaching-section{display:block;padding:40px 0}.video-pair{display:block;margin-top:26px}.video-pair figure{margin-top:25px}.video-pair figcaption{font-size:15px;margin-top:10px}footer{padding:35px 0 15px}footer h2{font-size:38px}footer p{font-size:14px}footer>div{gap:20px;font-size:13px}.skills-main{padding-top:28px}.skills-top{display:block;margin-bottom:28px;font-size:13px}.skills-top label{margin-top:23px;padding:10px 12px}.skills-top input{font-size:13px;width:100%}.knowledge-layout{display:block}.knowledge-layout>aside:first-child{margin-bottom:29px}.knowledge-layout>aside:first-child>h2{display:none}.area-links{display:flex;flex-direction:row;gap:10px 20px;overflow:auto;flex-wrap:nowrap;font-size:12px;padding-bottom:8px}.area-links a{flex-shrink:0}.directory-link{display:none}.breadcrumbs{font-size:12px;margin-bottom:18px}.skill-intro h1{font-size:52px;letter-spacing:-1.6px;margin-bottom:15px}.skill-intro p{font-size:16px;line-height:1.6}.project-ref{margin-top:20px}.project-ref img{width:38px;height:38px}.project-ref strong{font-size:12px}.project-ref span{font-size:10px}.disclosures{margin-top:20px}summary{font-size:19px}.detail-summary{font-size:13px;line-height:1.5;margin-top:7px}.disclosures details[open]{padding:19px 16px 23px;margin:5px -16px}.detail-content p{font-size:15px;line-height:1.65}.detail-content>a{font-size:13px}.related{display:block;padding-top:32px}.related figure>img{aspect-ratio:1.78}.related h2{margin-top:22px}.related h3{font-size:31px}.related p{font-size:15px}.project-detail{padding-top:28px}.project-detail>h1{font-size:70px;margin-top:25px;letter-spacing:-3px}.project-detail .lead{font-size:18px}.project-full{height:220px}.case-columns{display:block;margin-top:25px}.case-columns aside{font-size:13px}.case-columns article h2{font-size:30px}.case-columns article p{font-size:16px}.concept-b header{padding-top:21px}.concept-b .version-links{margin-top:0}.concept-b .hero{padding-top:30px}.top-identity{display:block}.top-identity>div:first-child{gap:12px}.concept-b .portrait{width:43px;height:49px;border-radius:14px;margin-top:0}.concept-b .role{font-size:17px}.concept-b .current-role{font-size:10px;margin-top:4px}.concept-b .hero>h1{font-size:59px;line-height:1.04;letter-spacing:-3.5px;white-space:normal;margin-top:23px;max-width:345px}.concept-b .hero>h1{max-width:320px}.concept-b .actions{margin-top:20px;gap:18px;font-size:11px}.concept-b .primary{padding:10px 16px}.hero-description{display:block;margin:21px 0 25px}.concept-b .intro{font-size:15px;line-height:1.65}.reach-summary{display:none}.panorama>img{height:260px;object-position:50% 48%;object-fit:cover}.panorama figcaption{left:17px;right:17px;bottom:17px}.panorama figcaption h2{font-size:29px;letter-spacing:-1px}.panorama figcaption span{font-size:10px}.panorama figcaption>a{font-size:10px}.panorama figcaption>a>span{margin-left:8px}.teaching-ribbon{display:block;padding-top:23px}.teaching-ribbon h2{font-size:17px;line-height:1.3;max-width:300px}.teaching-ribbon p{font-size:13px;margin-top:10px;line-height:1.6}.teaching-ribbon>a{font-size:12px;display:inline-flex;margin-top:14px}.concept-b .skills-section{margin-top:12px;padding-top:32px}.concept-b .section-intro{display:block}.concept-b .section-intro h2,.concept-b .section-heading h2{font-size:43px;letter-spacing:-2px}.concept-b .section-intro p{font-size:15px;margin:14px 0 18px}.concept-b .section-intro>a{font-size:13px}.concept-b .skill-rows{display:block;margin-top:28px}.concept-b .skill-row{display:flex;margin-top:26px}.concept-b .skill-row h3{font-size:21px}.concept-b .skill-row p{font-size:14px}.concept-b .skill-row>span{margin:0}.concept-b .project-section article{display:block}.concept-b .project-section h3{font-size:38px}.concept-b .video-pair{margin-top:25px}.concept-b .knowledge-layout{display:block}.concept-b .knowledge-layout>aside:first-child{padding:0;margin-bottom:27px;display:block}.concept-b .area-links{flex-wrap:nowrap;font-size:12px;gap:20px}.concept-b .skill-intro h1{font-size:52px;letter-spacing:-2.2px;margin-bottom:17px}.concept-b .skill-intro p{font-size:16px;line-height:1.6}.concept-b .related{display:block;padding-top:32px}.concept-b .related figure>img{aspect-ratio:1.78}.concept-b .breadcrumbs{margin-bottom:17px}.concept-b .disclosures{margin-top:23px}.concept-b summary{font-size:20px}.concept-b .detail-summary{font-size:13px}.concept-b .disclosures details[open]{margin:5px -16px;padding:20px 16px 24px}.concept-b .detail-content p{font-size:15px}.concept-b .project-detail>h1{font-size:78px}.concept-b .project-full{height:240px}}
/* System motion default is resolved by the scoped implementation rules below. */
/* Visual review corrections after actual browser capture. */
.icon{display:inline-block;width:17px;height:17px;vertical-align:-3px;flex-shrink:0}.cv .icon{width:15px;height:15px;margin-left:5px}.skill-row>span .icon{width:23px;height:23px}.menu .icon{width:14px;height:14px;margin-left:4px}summary>b .icon{width:22px;height:22px}summary .icon-minus{display:none}details[open] summary .icon-plus{display:none}details[open] summary .icon-minus{display:inline-block}.disclosures details[open] summary>b:after{content:none}.skills-top>a>.icon,.project-detail>a>.icon{margin-right:6px}.skills-top label>.icon,.skills-top label>span>.icon{width:21px;height:21px;vertical-align:-4px}.concept-b{color-scheme:dark;scrollbar-color:#5b5562 #19181d;scrollbar-width:thin}
@media(max-width:700px){.version-links{font-size:12px;gap:16px}.version-links a{padding:5px 0}.teaching-teaser p{font-size:14px}.teaching-teaser .reach{font-size:11px}.teaching-teaser a{font-size:13px}.teaching-ribbon p{font-size:14px}.teaching-ribbon>a{font-size:13px}.area-links,.concept-b .area-links{flex-wrap:wrap;gap:10px 18px;overflow:visible;font-size:12px;line-height:1.5;padding-bottom:0}.area-links a,.concept-b .area-links a{padding:3px 0}.knowledge-layout>aside:first-child,.concept-b .knowledge-layout>aside:first-child{margin-bottom:28px}.icon{width:15px;height:15px;vertical-align:-3px}.world figcaption .icon,.panorama figcaption .icon{width:12px;height:12px;vertical-align:-2px}.menu .icon{width:13px;height:13px}.concept-b .panorama figcaption> a>span{font-size:inherit}}
html:has(body.concept-b){color-scheme:dark;scrollbar-color:#5b5562 #19181d;scrollbar-width:thin}
/* Consolidated visual review: clearer control, stronger teaching, honest scope. */
.preview-only{cursor:default}.preview-only:hover{transform:none!important}.concept-b .hero{display:grid;grid-template-columns:1fr auto;grid-template-areas:'identity actions' 'name name' 'intro intro' 'panorama panorama' 'teaching teaching';padding-top:30px;padding-bottom:30px}.concept-b .top-identity{grid-area:identity}.concept-b .hero>.actions{grid-area:actions;align-self:center;justify-self:end}.concept-b .hero>h1{grid-area:name;font-size:128px;letter-spacing:-7px}.concept-b .hero-description{grid-area:intro;display:block;margin:15px 0 25px}.concept-b .hero-description .intro{max-width:900px}.concept-b .panorama{grid-area:panorama}.concept-b .panorama>img{height:300px}.concept-b .teaching-ribbon{grid-area:teaching;display:grid;grid-template-columns:176px 1fr 230px;gap:26px;padding-top:25px;align-items:start}.teaching-thumbnail{width:176px;aspect-ratio:16/9;object-fit:contain;border-radius:4px}.concept-b .teaching-content h2{max-width:none;font-size:21px;line-height:1.3}.concept-b .teaching-content p{margin-top:9px;font-size:16px;color:var(--ink);max-width:650px}.concept-b .teaching-reach .reach-summary{text-align:left;padding:0}.concept-b .teaching-reach .reach-summary p{font-size:19px;color:var(--ink);margin:0}.concept-b .teaching-reach .reach-summary span{font-size:12px;margin-top:5px}.teaching-reach>a{display:inline-flex;font-size:14px;margin-top:18px}.concept-b .skills-section{margin-top:12px;padding-top:24px}.concept-b .skill-rows{margin-top:27px}.concept-b .knowledge-layout{gap:25px 70px}.concept-b .knowledge-layout>aside:first-child{padding-bottom:8px;gap:25px}.concept-b .area-links{font-size:13px;gap:8px 20px;max-width:none}.concept-b .knowledge-layout>aside:first-child>h2{font-size:15px}.preview-only[aria-disabled=true]{opacity:.7}
@media(max-width:1439px) and (min-width:701px){.concept-b .hero>h1{font-size:clamp(85px,9.2vw,128px)}.concept-b .teaching-ribbon{grid-template-columns:150px 1fr 210px;gap:23px}.teaching-thumbnail{width:150px}.concept-b .teaching-content h2{font-size:20px}.concept-b .teaching-content p{font-size:15px}}
@media(max-width:1050px) and (min-width:701px){.concept-b .teaching-ribbon{grid-template-columns:140px 1fr}.concept-b .teaching-reach{grid-column:2;display:flex;align-items:center;justify-content:space-between}.teaching-reach>a{margin-top:0}.concept-b .knowledge-layout{gap:25px 35px}}
@media(max-width:700px){body{}.concept-b .hero{grid-template-columns:1fr;grid-template-areas:'identity' 'name' 'intro' 'actions' 'panorama' 'teaching';padding-top:27px;padding-bottom:25px}.concept-b .hero>h1{font-size:59px;line-height:1.04;letter-spacing:-3.5px;margin-top:23px}.concept-b .hero-description{margin:20px 0 0}.concept-b .hero>.actions{justify-self:start;margin:21px 0 27px;font-size:12px}.concept-b .panorama>img{height:246px}.concept-b .teaching-ribbon{grid-template-columns:112px 1fr;gap:14px 16px;padding-top:25px}.concept-b .teaching-thumbnail{width:112px;margin-top:3px}.concept-b .teaching-content h2{font-size:17px;line-height:1.35}.concept-b .teaching-content p{font-size:14px;margin-top:10px;line-height:1.6}.concept-b .teaching-reach{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px}.concept-b .teaching-reach .reach-summary{display:block}.concept-b .teaching-reach .reach-summary p{font-size:16px;letter-spacing:-.4px}.concept-b .teaching-reach .reach-summary span{font-size:11px;margin-top:2px}.teaching-reach>a{font-size:12px;white-space:nowrap;margin-top:0}.concept-b .project-ref{display:flex}.concept-b .knowledge-layout>aside:first-child{margin-bottom:26px;padding-bottom:0}.concept-b .area-links{font-size:12px;gap:8px 18px}.concept-b .skills-section{padding-top:28px}.menu{min-height:44px;margin-top:-6px;margin-bottom:-6px}.version-links a{min-height:34px;display:inline-flex;align-items:center}.version-links .selected:before{flex-shrink:0}}
@media(max-width:700px){.actions a{min-height:44px;display:inline-flex;align-items:center}}
/* Panorama implementation. The approved composition remains the baseline. */
:root{--reading-progress:0;--ease:cubic-bezier(.22,.7,.2,1)}html{scroll-padding-top:100px}body.concept-b{}header{position:relative;z-index:15;min-height:86px;padding-top:22px;padding-bottom:20px;gap:25px}header .brand{white-space:nowrap;flex-shrink:0}header .desktop-nav{display:flex;align-items:center;gap:23px;font-size:14px}header .cv{white-space:nowrap}.header-inner{width:100%;display:flex;align-items:center;gap:26px}.mobile-nav{display:none}.skip-link{position:fixed;left:16px;top:-100px;z-index:999;background:var(--purple);color:#17131e;padding:12px 18px;border-radius:4px}.skip-link:focus{top:16px}.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.motion-toggle{border:0;background:transparent;color:var(--muted);font-size:12px;min-height:44px;padding:8px 0;cursor:pointer}.motion-toggle:hover{color:var(--ink)}.concept-b .hero{padding-top:30px}.concept-b .hero>h1{view-transition-name:portfolio-title}.concept-b .hero>.actions{gap:24px}.concept-b .current-role{color:#b5aebe}.primary{transition:transform .24s var(--ease),background-color .24s}.primary:hover{transform:translateY(-2px);background:#a582e8}.icon{transition:transform .25s var(--ease)}a:hover>.icon,a:hover>span>.icon-out{transform:translate(2px,-2px)}.primary:active{transform:scale(.97)}.site-footer{margin-top:40px}.site-footer .footer-links{display:flex;gap:25px;flex-wrap:wrap}.page-header,.page-heading{padding:45px 0 37px}.page-header h1,.page-heading h1{font:500 76px/1.06 var(--font);letter-spacing:-3.5px;margin-bottom:20px;max-width:1000px}.page-header p,.page-heading p{font-size:20px;line-height:1.6;max-width:850px}.breadcrumb,.breadcrumbs{font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}.breadcrumb a:hover,.breadcrumbs a:hover{color:var(--ink)}.back-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px}.empty-state{padding:50px 0}.empty-state h2{font-size:29px;font-weight:500}.empty-state p{font-size:17px;color:var(--muted);margin-top:15px}.empty-state button{margin-top:22px}.text-button,.secondary-button{background:transparent;border:0;padding:10px 0;color:var(--ink);font-size:14px;min-height:44px}.filter-bar,.filters,.directory-controls{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:end;margin-bottom:30px}.filter-bar label,.filters label,.directory-controls label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--muted)}select,input[type=search],.search-input{background:#2a2730;color:var(--ink);border:1px solid #4b4453;border-radius:5px;padding:12px 14px;min-height:46px;font:14px var(--font)}input::placeholder{color:#b0a7b8;opacity:1}.search-form{display:flex;gap:12px;margin:0 0 28px}.search-form input{flex:1;min-width:0}.search-form button,.filter-bar button,.directory-controls button{min-height:46px;border:0;background:#37313f;color:var(--ink);border-radius:5px;padding:10px 17px}.result-summary,.results-count{font-size:14px;color:var(--muted);margin:20px 0}.filter-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}.filter-chips button,.filter-chips a{border:0;padding:9px 15px;background:#28242e;border-radius:5px;color:#c1b8cb;font-size:14px;min-height:44px}.filter-chips [aria-pressed=true],.filter-chips [aria-current=true]{background:#4d3a68;color:#f6f1ff}.project-index,.projects-index{padding-bottom:20px}.project-list,.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px 42px}.project-card{min-width:0}.project-card img{width:100%;aspect-ratio:1.78;object-fit:cover;border-radius:5px;transition:transform .65s var(--ease)}.project-card .project-logo{width:86px;height:86px;aspect-ratio:1;object-fit:contain;border-radius:18px}.project-card .project-media{background:#25212c;min-height:220px;border-radius:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}.project-card .project-media img.project-logo{margin:46px auto}.project-card .project-media:not(:has(.project-logo)) img{width:100%;height:100%}.project-card h2,.project-card h3{font-size:34px;font-weight:500;line-height:1.15;letter-spacing:-1.2px;margin:22px 0 11px}.project-card .project-role,.project-card .period{font-size:13px;color:var(--muted);margin:0 0 15px}.project-card p{font-size:16px;line-height:1.6;margin:13px 0}.project-card a{font-size:14px;display:inline-flex;align-items:center;gap:8px;margin-top:7px}.project-card:hover .project-media>img:not(.project-logo){transform:scale(1.025)}.project-card .optional-label,.optional-label{font-size:12px;color:#c7addf;margin-top:15px}.archive-section{padding:65px 0 30px}.archive-section h2{font-size:38px;font-weight:500;margin-bottom:20px}.archive-group{margin:32px 0}.archive-group h3{font-size:22px;font-weight:500;margin:14px 0}.archive-group p{font-size:16px;color:var(--muted);max-width:900px}.archive-group ul{padding-left:22px}.archive-group li{margin:12px 0}.project-detail .project-logo{width:96px;height:96px;object-fit:contain;border-radius:20px}.project-metrics,.metrics{display:flex;flex-wrap:wrap;gap:30px 55px;margin:30px 0 36px}.project-metrics strong,.metrics strong,.metric-value{display:block;font-size:33px;font-weight:500;letter-spacing:-1px}.project-metrics span,.metrics span,.metric-label{display:block;font-size:13px;color:var(--muted);margin-top:5px;max-width:230px}.project-detail .technologies,.technology-list{display:flex;gap:10px 17px;flex-wrap:wrap;color:#c9b4e6;font-size:14px;margin-top:24px}.case-columns article section{scroll-margin-top:105px}.case-columns article h2{font-size:32px;line-height:1.25;letter-spacing:-.8px}.case-columns aside nav{display:flex;flex-direction:column;gap:14px;position:sticky;top:26px}.case-columns aside a{font-size:14px;line-height:1.4}.related-links{padding:35px 0}.related-links h2{font-size:26px;font-weight:500;margin-bottom:20px}.related-links a{display:inline-flex;font-size:15px;margin:0 22px 15px 0}.skills-index .knowledge-layout,.skills-index-page .knowledge-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px}.skill-tree{min-width:0}.skill-node{padding:0;margin:0 0 12px;scroll-margin-top:110px}.skill-node>summary{font-size:24px;line-height:1.35;font-weight:500;padding:15px 0;align-items:start;gap:18px}.skill-node>summary .summary-text{flex:1}.skill-node>summary p,.skill-summary{font-size:15px;line-height:1.55;font-weight:400;color:var(--muted);margin-top:8px}.skill-node .skill-children{padding:4px 0 9px 24px}.skill-node .skill-node>summary{font-size:20px;padding:13px 0}.skill-node .skill-node .skill-node>summary{font-size:17px}.skill-node .skill-node .skill-node .skill-node>summary{font-size:16px}.skill-node[open]>summary{color:#d1b5f5}.skill-node .skill-evidence,.skill-projects{display:flex;gap:12px 20px;flex-wrap:wrap;padding:10px 0 14px;font-size:14px}.skill-node .skill-evidence a,.skill-projects a{color:#d1b5f5;min-height:30px}.skill-link{display:inline-flex;align-items:center;gap:8px;margin:6px 0 15px;font-size:14px}.skill-article h2{font-size:29px;font-weight:500;margin:28px 0 14px}.skill-article p{font-size:17px;line-height:1.65;margin:14px 0}.skill-article .related-projects{margin-top:35px}.search-results{display:block}.skill-result,.directory-result{padding:24px 0}.skill-result h2,.directory-result h2{font-size:25px;font-weight:500;line-height:1.3;letter-spacing:-.4px;margin:7px 0 11px}.skill-result p,.directory-result p{font-size:16px;line-height:1.6;max-width:900px;color:#cbc4d2}.result-type{font-size:12px;color:#b7a6ce}.result-breadcrumb{font-size:12px;color:var(--muted);margin-bottom:7px}.result-type+.optional-label{display:inline-block;margin:0 0 0 14px}.result-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:14px}.directory-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:50px}.directory-layout .directory-controls{display:flex;flex-direction:column;align-items:stretch;gap:20px}.pagination{display:flex;align-items:center;gap:16px;margin:30px 0 50px}.pagination button,.load-more{min-height:44px;padding:11px 18px;background:#34303b;color:var(--ink);border:0;border-radius:5px}.pagination button:disabled{opacity:.4;cursor:default}.pagination span{font-size:14px;color:var(--muted)}.teaching-page .teaching-lead{max-width:900px;font-size:21px;line-height:1.65}.teaching-page .approach{display:grid;grid-template-columns:1fr 2fr;gap:45px;margin:35px 0 60px}.teaching-page .approach h2{font-size:32px;font-weight:500;line-height:1.25}.teaching-page .approach p{font-size:17px;line-height:1.65;margin-bottom:17px}.teaching-examples{display:grid;grid-template-columns:1fr 1fr;gap:50px 38px}.teaching-example,.video-card{scroll-margin-top:100px}.teaching-example img,.video-card img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:5px}.teaching-example h2,.video-card h2{font-size:29px;font-weight:500;line-height:1.2;letter-spacing:-.7px;margin:22px 0 13px}.teaching-example h3,.video-card h3{font-size:17px;font-weight:500;margin:15px 0}.teaching-example p,.video-card p{font-size:16px;line-height:1.65;margin:13px 0}.video-meta{font-size:13px;color:var(--muted);margin-top:15px}.video-chapters,.chapter-list{display:flex;flex-direction:column;gap:13px;margin:21px 0}.video-chapters a,.chapter-list a{display:flex;gap:15px;font-size:14px}.video-chapters time,.chapter-list .time{font-variant-numeric:tabular-nums;color:#c1a2eb;min-width:38px}.teaching-related{margin:60px 0 30px;padding:30px;background:#25212b;border-radius:5px}.teaching-related h2{font-size:28px;font-weight:500;line-height:1.25}.teaching-related p{font-size:17px;line-height:1.65;margin:18px 0;max-width:900px}.teaching-related a{display:inline-flex;font-size:14px;margin-right:25px}.experience-role{display:grid;grid-template-columns:270px minmax(0,1fr);gap:45px;padding:30px 0 35px}.experience-role h2{font-size:32px;font-weight:500;line-height:1.2;letter-spacing:-.7px;margin-bottom:15px}.experience-role h3{font-size:22px;font-weight:500;margin:9px 0}.experience-role p,.experience-role li{font-size:17px;line-height:1.65;margin:14px 0}.experience-role .period,.role-meta{font-size:14px;color:var(--muted)}.experience-role ul{padding-left:20px}.experience-role a{display:inline-flex;font-size:14px;margin:12px 22px 0 0}.experience-section{padding:30px 0}.experience-section h2{font-size:33px;font-weight:500;margin:22px 0}.cv-page .cv-body{max-width:1000px}.cv-actions{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:30px}.cv-page h2{font-size:30px;font-weight:500;margin:34px 0 15px}.cv-page h3{font-size:22px;font-weight:500;margin:23px 0 10px}.cv-page p,.cv-page li{font-size:16px;line-height:1.65;margin:11px 0}.cv-page ul{padding-left:20px}.leadership-practice{padding:25px 0;max-width:960px}.leadership-practice h2{font-size:32px;font-weight:500;margin-bottom:17px}.leadership-practice p{font-size:18px;line-height:1.7;margin:17px 0}.leadership-practice a{font-size:15px}.not-found{padding:70px 0 110px}.not-found h1{font-size:60px;font-weight:500;letter-spacing:-2px}.not-found p{font-size:18px;margin:20px 0 30px}
@supports(interpolate-size:allow-keywords){.skill-node,.disclosures details{interpolate-size:allow-keywords}.skill-node::details-content,.disclosures details::details-content{height:0;overflow:clip;transition:height 320ms var(--ease),content-visibility 320ms allow-discrete}.skill-node[open]::details-content,.disclosures details[open]::details-content{height:auto}}
::view-transition-old(root){animation:portfolio-out 160ms ease both}::view-transition-new(root){animation:portfolio-in 330ms var(--ease) both}::view-transition-group(portfolio-work-image){animation-duration:550ms;animation-timing-function:var(--ease)}@keyframes portfolio-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes portfolio-out{to{opacity:0;transform:translateY(-5px)}}
@media(max-width:1150px){header{gap:18px}header .desktop-nav{gap:16px;font-size:13px}header .brand{font-size:16px}.case-columns{gap:40px;grid-template-columns:230px 1fr}.directory-layout{grid-template-columns:190px 1fr;gap:35px}}
@media(max-width:850px){header .desktop-nav{display:none}header .menu{display:flex;align-items:center;justify-content:center;min-height:44px;background:none;border:0;color:var(--ink);font-size:14px}.mobile-nav[hidden]{display:none}.mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:3px;position:absolute;top:78px;left:0;right:0;background:#24202b;padding:16px;border-radius:6px;box-shadow:0 14px 28px #0005}.mobile-nav a{padding:11px 13px;min-height:44px;font-size:15px}.project-list,.project-grid{gap:35px 25px}.teaching-examples{gap:38px 26px}.directory-layout{display:block}.directory-layout .directory-controls{flex-direction:row;flex-wrap:wrap;gap:16px}.directory-layout .directory-controls label{min-width:170px}.experience-role{grid-template-columns:200px 1fr;gap:30px}}
@media(max-width:700px){html{scroll-padding-top:30px}body.concept-b{}header{min-height:72px;padding-top:17px;padding-bottom:15px;gap:16px;flex-wrap:nowrap}header .brand{font-size:16px}header .cv{display:none}.mobile-nav:not([hidden]){top:66px;left:-7px;right:-7px}.concept-b .hero{padding-top:21px}.concept-b .hero>.actions{gap:18px}.page-header,.page-heading{padding:28px 0 27px}.page-header h1,.page-heading h1{font-size:48px;letter-spacing:-2px;margin-bottom:18px}.page-header p,.page-heading p{font-size:17px;line-height:1.65}.breadcrumb,.breadcrumbs{font-size:12px;gap:6px}.filter-bar,.filters,.directory-controls{gap:13px;margin-bottom:24px}.filter-bar label,.filters label,.directory-controls label{font-size:12px;flex:1;min-width:135px}.search-form{gap:8px}.search-form input{min-height:46px;padding:11px 12px;font-size:14px}.search-form button{padding:10px 13px}.filter-chips{gap:8px}.filter-chips button,.filter-chips a{font-size:12px;padding:8px 11px}.project-list,.project-grid{display:block}.project-card{margin-bottom:42px}.project-card h2,.project-card h3{font-size:31px;margin-top:20px}.project-card p{font-size:15px;line-height:1.65}.project-card .project-media{min-height:190px}.project-card .project-media img.project-logo{width:76px;height:76px;margin:40px auto}.archive-section{padding-top:30px}.archive-section h2{font-size:31px}.archive-group h3{font-size:21px}.project-metrics,.metrics{gap:24px 30px;margin:25px 0}.project-metrics strong,.metrics strong,.metric-value{font-size:28px}.project-metrics span,.metrics span,.metric-label{font-size:12px;max-width:150px}.case-columns{display:block}.case-columns aside nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 18px;margin-bottom:28px}.case-columns aside a{font-size:12px;min-height:34px}.case-columns article h2{font-size:27px;letter-spacing:-.5px}.case-columns article p{font-size:16px}.skills-index .knowledge-layout,.skills-index-page .knowledge-layout{display:block}.skill-node>summary{font-size:22px;padding:13px 0}.skill-node>summary p,.skill-summary{font-size:14px}.skill-node .skill-children{padding-left:17px}.skill-node .skill-node>summary{font-size:18px}.skill-node .skill-node .skill-node>summary{font-size:16px}.skill-node .skill-node .skill-node .skill-node>summary{font-size:15px}.skill-evidence a,.skill-projects a{font-size:13px;min-height:40px}.skill-article h2{font-size:25px}.skill-article p{font-size:16px}.directory-result,.skill-result{padding:19px 0}.directory-result h2,.skill-result h2{font-size:23px}.directory-result p,.skill-result p{font-size:15px;line-height:1.65}.result-summary,.results-count{font-size:13px}.directory-layout .directory-controls{gap:14px}.directory-layout .directory-controls label{min-width:130px}.pagination{gap:12px;flex-wrap:wrap}.pagination button{font-size:13px;padding:10px 14px}.teaching-page .approach{display:block;margin:30px 0 37px}.teaching-page .approach h2{font-size:28px;margin-bottom:19px}.teaching-page .approach p{font-size:16px}.teaching-examples{display:block}.teaching-example,.video-card{margin-bottom:42px}.teaching-example h2,.video-card h2{font-size:27px;margin-top:20px}.teaching-example p,.video-card p{font-size:15px}.video-chapters a,.chapter-list a{font-size:13px;min-height:36px}.teaching-related{margin-top:34px;padding:22px 19px}.teaching-related h2{font-size:25px}.teaching-related p{font-size:16px}.teaching-related a{font-size:13px;min-height:40px;align-items:center}.experience-role{display:block;padding:22px 0}.experience-role h2{font-size:29px}.experience-role h3{font-size:21px}.experience-role p,.experience-role li{font-size:16px}.experience-role .period{font-size:13px}.experience-section{padding:20px 0}.experience-section h2{font-size:29px}.leadership-practice h2{font-size:28px}.leadership-practice p{font-size:16px}.not-found{padding:40px 0 75px}.not-found h1{font-size:44px}.site-footer{margin-top:20px}.site-footer .footer-links{gap:16px 24px}.motion-toggle{font-size:12px}.project-detail .technologies,.technology-list{font-size:13px}.cv-page h2{font-size:27px}.cv-page h3{font-size:21px}.cv-page p,.cv-page li{font-size:15px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=full]) *,html:not([data-motion=full]) *::before,html:not([data-motion=full]) *::after{animation:none!important;transition:none!important}html:not([data-motion=full]){scroll-behavior:auto}html:not([data-motion=full]) .panorama>img,html:not([data-motion=full]) .hero>h1{transform:none!important}html:not([data-motion=full])::view-transition-group(*),html:not([data-motion=full])::view-transition-old(*),html:not([data-motion=full])::view-transition-new(*){animation:none!important}html:not([data-motion=full]) .skill-node::details-content,html:not([data-motion=full]) .disclosures details::details-content{transition:none!important}}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation:none!important;transition:none!important}html[data-motion=reduced]{scroll-behavior:auto}html[data-motion=reduced] .panorama>img,html[data-motion=reduced] .hero>h1{transform:none!important}
@media print{header,.motion-toggle,.cv-actions,.skip-link{display:none!important}body{background:white!important;color:#18141c!important;padding:0;font-size:11pt}main{max-width:none;margin:0}a{color:inherit;text-decoration:none}.cv-page h1{font-size:30pt}.cv-page h2{font-size:18pt;break-after:avoid}.cv-page h3{font-size:14pt;break-after:avoid}.cv-page p,.cv-page li{font-size:10.5pt}.cv-page section{break-inside:avoid}footer{display:none}}

/* Route-specific layout using the shared Panorama type and image system. */
:focus-visible { outline: 3px solid #b899ed; outline-offset: 5px; }
header a[aria-current=page] { color: #d3b6ff; }
.page-heading .eyebrow,.eyebrow { font-size: 12px; line-height: 1.5; color: #bda8d8; letter-spacing: .035em; margin-bottom: 13px; }
.page-heading .primary { display: inline-flex; align-items: center; min-height: 46px; margin-top: 23px; font-size: 14px; }
footer>div { flex-wrap: wrap; align-items: center; }
footer>div a { display: inline-flex; align-items: center; min-height: 44px; }
.anchor-target { display:block; scroll-margin-top: 32px; }
.loading-message { padding: 70px 0; color: var(--muted); }
.skills-search-form { display: flex; align-items: center; gap: 10px; }
.skills-search-form>label { margin: 0; min-height: 46px; padding: 0 14px; }
.skills-search-form input { border: 0; border-radius: 0; padding: 11px 0; min-height: 46px; width: min(260px,22vw); }
.skills-search-form>label.area-filter { padding: 0; }
.skills-search-form select { max-width: 205px; }
.skills-search-form>button,.search-field button { border: 0; border-radius: 5px; background: #3f334d; color: var(--ink); min-height: 46px; padding: 10px 17px; font-size: 14px; }
.concept-b .knowledge-layout.skills-overview { display:block; }
.knowledge-layout.skills-overview>.areas { margin-bottom: 32px; }
.skills-overview .knowledge-article { max-width: 1080px; }
.skills-overview .skill-intro { max-width: 900px; margin-bottom: 32px; }
.skill-tree { list-style: none; margin: 0; padding: 0; }
.skill-tree .skill-node { margin: 0; padding: 0; }
.root-tree>.skill-tree { padding-left: 0; }
.root-tree>li { border-top: 1px solid #39333f; }
.root-tree>li:last-child { border-bottom: 1px solid #39333f; }
.root-tree>.skill-node>summary,.root-tree>li>.skill-node>summary { padding: 22px 0; font-size: 27px; }
.node-label { flex: 1; }
.node-label .optional-badge { display: inline-block; margin-left: 12px; vertical-align: middle; }
.node-count { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 400; color: var(--muted); padding-top: 6px; }
.node-count .icon { width: 18px; height: 18px; }
.skill-node:not([open])>summary .icon-plus { display:inline-block; }
.skill-node:not([open])>summary .icon-minus { display:none; }
.skill-node[open]>summary .icon-plus { display:none; }
.skill-node[open]>summary .icon-minus { display:inline-block; }
.skill-children>p { max-width: 780px; font-size: 16px; line-height: 1.65; color: #c9c0d1; margin: 0 0 13px; }
.skill-children>.node-overview { display:inline-flex; min-height:44px; align-items:center; font-size:14px; margin-bottom:11px; color:#c7a6f3; }
.skill-leaf { padding: 13px 0 17px; }
.skill-leaf>a { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:36px; font-size:17px; }
.skill-leaf p { font-size:14px; color:var(--muted); line-height:1.65; max-width:780px; margin-top:6px; }
.skill-children-section { margin-top:35px; }
.skill-children-section>h2 { font-size:25px; font-weight:500; margin-bottom:15px; }
.search-summary { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:28px 0 6px; font-size:14px; color:var(--muted); }
.search-summary .clear-search { white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
.related-project { margin-top:25px; }
.related-project h3 { margin-top:0; }
.related-project>a { display:inline-flex; min-height:44px; align-items:center; font-size:14px; }
.project-card[data-project-id=hideout] { grid-column:1/-1; display:grid; grid-template-columns:1.15fr 1fr; gap:42px; align-items:center; margin-bottom:10px; }
.project-card[data-project-id=hideout] h2 { margin-top:0; font-size:48px; }
.project-card:not([data-project-id=hideout]) { display:grid; grid-template-columns:86px minmax(0,1fr); gap:24px; align-items:start; }
.project-card:not([data-project-id=hideout])>img { width:86px; height:86px; aspect-ratio:1; object-fit:contain; border-radius:17px; margin-top:3px; }
.project-card:not([data-project-id=hideout]) h2 { margin-top:0; }
.project-card:not(:has(>img)) { display:block; }
.optional-projects { padding-top:60px; }
.optional-badge { display:inline-block; font-size:11px; font-weight:500; line-height:1.5; letter-spacing:.02em; color:#ceb8e7; margin-bottom:9px; }
.archive-group { padding:14px 0; margin:10px 0; }
.archive-group>summary { font-size:25px; font-weight:500; min-height:44px; }
.archive-group .detail-content { padding-top:14px; }
.archive-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px 40px; margin-top:25px; }
.archive-grid h3 { font-size:23px; margin:0 0 12px; }
.archive-grid p { font-size:15px; }
.archive-grid a { font-size:14px; display:inline-flex; align-items:center; min-height:44px; margin-top:6px; }
.project-detail:has(>img:not([src*=hideout]))>.project-full { width:100px; height:100px; object-fit:contain; border-radius:19px; }
.metrics { display:grid; grid-template-columns:1fr; gap:22px; }
.metrics>div { display:flex; flex-direction:column-reverse; }
.metrics dd { margin:0; color:var(--ink); font-size:31px; line-height:1.2; font-weight:500; letter-spacing:-.7px; }
.metrics dt { font-size:13px; line-height:1.5; color:var(--muted); margin-top:7px; }
.case-columns aside .section-navigation { position:static; margin:26px 0 30px; }
.case-columns aside>h2 { font-size:15px; color:var(--ink); font-weight:500; margin:24px 0 12px; }
.tag-list { display:flex; flex-wrap:wrap; gap:9px 16px; list-style:none; margin:0 0 22px; padding:0; font-size:13px; color:#c4afd9; }
.related-skills .related-link,.note-context .related-link { display:inline-flex; align-items:center; font-size:14px; min-height:44px; margin:0 20px 8px 0; }
.directory-form { margin:0 0 30px; }
.search-field { max-width:900px; margin-bottom:25px; }
.search-field>label { display:block; font-size:14px; margin-bottom:10px; color:var(--muted); }
.search-field>div { display:flex; gap:12px; align-items:center; }
.search-field>div>.icon { width:22px; height:22px; color:#b79ccd; }
.search-field input { min-width:0; flex:1; }
.directory-form .filter-bar label { min-width:165px; }
.directory-form .clear-search { font-size:13px; display:flex; align-items:center; min-height:46px; }
.result-count { font-size:14px; color:var(--muted); margin:25px 0 4px; }
.directory-result { max-width:1020px; border-bottom:1px solid #38313e; }
.directory-result h2 a { display:inline-flex; gap:18px; align-items:center; }
.result-meta { display:flex; align-items:center; gap:15px; font-size:12px; color:#b6a2cd; }
.result-meta .optional-badge { margin:0; }
.directory-result .result-breadcrumb { font-size:12px; color:var(--muted); margin:0 0 9px; }
.pagination p { font-size:13px; color:var(--muted); }
.teaching-approach { display:grid; grid-template-columns:1fr 1.6fr; gap:60px; padding:15px 0 55px; }
.teaching-approach h2 { font-size:34px; line-height:1.2; font-weight:500; letter-spacing:-1px; }
.teaching-approach p { font-size:17px; line-height:1.7; margin-bottom:17px; }
.teaching-videos>.section-heading h2 { font-size:42px; }
.teaching-videos>p { font-size:17px; color:var(--muted); max-width:870px; margin-top:-7px; margin-bottom:32px; }
.teaching-video { display:grid; grid-template-columns:1.05fr 1fr; gap:43px; margin-bottom:55px; scroll-margin-top:35px; align-items:start; }
.video-image { position:relative; display:block; overflow:hidden; border-radius:5px; }
.video-image img { width:100%; aspect-ratio:16/9; object-fit:contain; }
.play-label { display:flex; align-items:center; gap:9px; background:#221b2e; padding:12px 16px; font-size:13px; color:#e4d6f7; }
.teaching-video .eyebrow { margin-bottom:10px; }
.teaching-video h2 { font-size:35px; font-weight:500; letter-spacing:-1px; line-height:1.15; margin:0 0 17px; }
.teaching-video h3 { font-size:18px; font-weight:500; line-height:1.5; margin:0 0 12px; }
.teaching-video p { font-size:16px; line-height:1.65; margin:12px 0; }
.teaching-video>div>a { font-size:14px; display:inline-flex; align-items:center; min-height:44px; }
.teaching-video .video-chapters { display:block; margin:12px 0; padding:0; }
.video-chapters>summary { font-size:15px; min-height:44px; justify-content:start; gap:14px; color:#c6a3f4; }
.video-chapters ul { list-style:none; padding:0; margin:0; }
.video-chapters a { display:flex; align-items:baseline; gap:12px; min-height:36px; padding:7px 0; font-size:13px; }
.video-chapters .chapter-time { font-variant-numeric:tabular-nums; color:#c8aceb; min-width:38px; }
.video-chapters a .icon { margin-left:auto; }
.video-chapters[open]>summary .icon-plus { display:inline-block; transform:rotate(45deg); }
.related-teaching { max-width:950px; padding:15px 0 20px; }
.related-teaching h2 { font-size:32px; font-weight:500; margin:0 0 20px; }
.related-teaching h3 { font-size:24px; font-weight:500; margin:0 0 15px; }
.related-teaching p { font-size:17px; line-height:1.65; margin-bottom:20px; }
.experience-role .role-meta>p { font-size:13px; line-height:1.6; color:var(--muted); margin-top:0; }
.experience-role .role-meta h2,.experience-role .role-meta h3 { color:var(--ink); }
.independent-work,.education { margin:30px 0 40px; }
.independent-work>h2,.education>h2 { font-size:34px; font-weight:500; margin-bottom:25px; letter-spacing:-1px; }
.independent-work>article,.education>article { padding:15px 0 22px; max-width:940px; }
.independent-work h3,.education h3 { font-size:24px; font-weight:500; margin-bottom:12px; }
.independent-work p,.education p { font-size:17px; line-height:1.65; margin-bottom:12px; }
.independent-work .period { font-size:13px; color:var(--muted); }
.independent-work a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.decision-list { max-width:970px; }
.decision { padding:20px 0 35px; }
.decision h2 { font-size:32px; font-weight:500; margin:0 0 18px; letter-spacing:-.8px; }
.decision p { font-size:18px; line-height:1.7; margin-bottom:20px; }
.decision a { font-size:14px; display:inline-flex; align-items:center; min-height:44px; margin-right:25px; }
.cv-toolbar { display:flex; justify-content:space-between; align-items:center; gap:35px; padding:40px 0; }
.cv-toolbar h1 { font-size:54px; line-height:1.15; font-weight:500; letter-spacing:-2px; }
.cv-toolbar button { border:0; flex-shrink:0; font-size:14px; }
.cv-document { max-width:1100px; }
.cv-document .cv-heading>h2 { font-size:46px; line-height:1.1; letter-spacing:-1.5px; margin-top:15px; }
.cv-document .cv-role { color:#d2b6f6; font-size:21px; }
.cv-document .cv-intro { max-width:900px; margin:28px 0 30px; font-size:18px; }
.cv-skills { display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; }
.cv-skills>h2 { grid-column:1/-1; margin-bottom:0; }
.cv-skills>div h3 { margin-top:0; }
.note-context,.note-projects { margin:20px 0 35px; max-width:950px; }
.note-context h2,.note-projects h2 { font-size:28px; font-weight:500; margin:0 0 18px; }
.note-context p,.note-projects p { font-size:17px; line-height:1.65; margin:15px 0; }
.note-projects article { margin:27px 0; }
.note-projects h3 { font-size:24px; font-weight:500; }
.note-projects a,.note-context>a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.error-main { padding:65px 0; }
.error-main h1 { font-size:56px; line-height:1.1; letter-spacing:-2px; font-weight:500; }
.error-main p { font-size:18px; margin:22px 0; }
@media(max-width:1050px) {
  .skills-top { align-items:start; gap:20px; }
  .skills-search-form { flex-wrap:wrap; justify-content:flex-end; }
  .skills-search-form input { width:210px; }
  .project-card:not([data-project-id=hideout]) { grid-template-columns:64px 1fr; gap:18px; }
  .project-card:not([data-project-id=hideout])>img { width:64px; height:64px; border-radius:13px; }
  .project-card[data-project-id=hideout] { gap:30px; }
  .teaching-video { gap:30px; }
}
@media(max-width:700px) {
  header .brand { font-size:15px; }
  .skills-search-form { margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; justify-content:stretch; }
  .skills-search-form>label:first-child { grid-column:1/-1; min-width:0; }
  .skills-search-form input { width:100%; min-width:0; font-size:14px; }
  .skills-search-form>label.area-filter { min-width:0; }
  .skills-search-form select { max-width:none; width:100%; }
  .skills-search-form>button { min-width:75px; }
  .skills-overview .skill-intro { margin-bottom:23px; }
  .root-tree>li>.skill-node>summary { font-size:23px; padding:18px 0; }
  .node-count { font-size:12px; gap:9px; }
  .skill-children>p { font-size:15px; }
  .skill-leaf>a { font-size:16px; }
  .skill-leaf p { font-size:14px; }
  .search-summary { font-size:13px; align-items:start; }
  .project-card[data-project-id=hideout] { display:block; margin-bottom:42px; }
  .project-card[data-project-id=hideout] h2 { font-size:37px; margin-top:20px; }
  .project-card:not([data-project-id=hideout]) { grid-template-columns:62px minmax(0,1fr); gap:18px; }
  .project-card:not([data-project-id=hideout])>img { width:62px; height:62px; border-radius:12px; }
  .project-card:not(:has(>img)) { display:block; }
  .optional-projects { padding-top:15px; }
  .archive-group>summary { font-size:22px; }
  .archive-grid { display:block; }
  .archive-grid article { margin-bottom:25px; }
  .metrics { display:flex; flex-wrap:wrap; gap:25px 40px; }
  .metrics dd { font-size:28px; }
  .metrics dt { max-width:150px; }
  .search-field>div { gap:9px; }
  .search-field>div>.icon { display:none; }
  .directory-form .filter-bar label { min-width:135px; }
  .directory-result h2 a { gap:12px; }
  .teaching-approach { display:block; padding:5px 0 25px; }
  .teaching-approach h2 { font-size:29px; margin-bottom:20px; }
  .teaching-approach p { font-size:16px; }
  .teaching-videos>.section-heading h2 { font-size:34px; }
  .teaching-videos>p { font-size:16px; margin-bottom:25px; }
  .teaching-video { display:block; margin-bottom:38px; }
  .teaching-video>.video-image { margin-bottom:22px; }
  .teaching-video h2 { font-size:30px; }
  .teaching-video h3 { font-size:17px; }
  .teaching-video p { font-size:15px; }
  .video-chapters a { min-height:44px; font-size:13px; }
  .related-teaching h2 { font-size:28px; }
  .related-teaching h3 { font-size:22px; }
  .related-teaching p { font-size:16px; }
  .related-teaching .actions { flex-wrap:wrap; }
  .independent-work>h2,.education>h2 { font-size:29px; }
  .independent-work h3,.education h3 { font-size:22px; }
  .independent-work p,.education p { font-size:16px; }
  .decision h2 { font-size:28px; }
  .decision p { font-size:16px; }
  .cv-toolbar { display:block; padding:28px 0; }
  .cv-toolbar h1 { font-size:44px; }
  .cv-toolbar button { margin-top:15px; min-height:44px; }
  .cv-document .cv-heading>h2 { font-size:36px; }
  .cv-document .cv-intro { font-size:16px; }
  .cv-skills { display:block; }
  .note-context h2,.note-projects h2 { font-size:25px; }
  .note-context p,.note-projects p { font-size:16px; }
  .error-main h1 { font-size:42px; }
}
@media print {
  .cv-toolbar { display:none!important; }
  .cv-document { max-width:none; }
  .cv-document .experience-role { grid-template-columns:180px 1fr; gap:25px; padding:14px 0; break-inside:avoid; }
  .cv-document .cv-role { color:#222; }
  .cv-document .independent-work { margin:15px 0; }
  .cv-document .cv-heading>h2 { font-size:28pt; }
}

/* Scroll maps directly to the real panorama; other artwork does not drift. */
.concept-b .panorama>img{transition:none}

/* Keep ordinary navigation in reach while the visitor moves through the story. */
header { position:sticky; top:0; background:var(--paper); }
header::before { content:''; position:absolute; inset:0 -18px; background:var(--paper); z-index:-1; pointer-events:none; }
.supporting-projects { display:grid; grid-template-columns:1fr 1fr; gap:42px 45px; margin-top:54px; }
.concept-b .project-section .supporting-project { display:grid; grid-template-columns:74px minmax(0,1fr); gap:23px; align-items:start; }
.concept-b .project-section .supporting-project>img { width:74px; height:74px; aspect-ratio:1; object-fit:contain; border-radius:15px; margin-top:4px; }
.concept-b .project-section .supporting-project h3 { font-size:32px; letter-spacing:-1px; line-height:1.2; margin:0; }
.concept-b .project-section .supporting-project .project-role { font-size:12px; margin:8px 0 15px; }
.concept-b .project-section .supporting-project p { font-size:15px; line-height:1.65; margin:13px 0; }
.project-intro { font-size:19px; line-height:1.65; max-width:1000px; margin:26px 0 32px; }
@media(max-width:700px){
  header::before { inset:0 -22px; }
  .supporting-projects { display:block; margin-top:35px; }
  .concept-b .project-section .supporting-project { grid-template-columns:60px minmax(0,1fr); gap:18px; margin-bottom:32px; }
  .concept-b .project-section .supporting-project>img { width:60px; height:60px; border-radius:12px; }
  .concept-b .project-section .supporting-project h3 { font-size:29px; }
  .concept-b .project-section .supporting-project p { font-size:14px; }
  .project-intro { font-size:16px; margin:22px 0 22px; }
}
@media print {
  body.concept-b { --ink:#18141c; --muted:#49434f; --paper:#fff; --surface:#fff; }
  .cv-document,.cv-document p,.cv-document h2,.cv-document h3,.cv-document a,.cv-document .role-meta,.cv-document .role-meta p { color:#18141c!important; }
  .cv-document .experience-role a { display:none; }
  .cv-document p { orphans:3; widows:3; }
}

/* Browser-review corrections: sticky-header-safe anchors and narrow phones. */
.skill-node,.case-columns article section,.anchor-target,.teaching-video { scroll-margin-top:12px; }
@media(max-width:700px){ html { scroll-padding-top:88px; } }
@media(max-width:360px){
  header { gap:8px; }
  header .brand { font-size:14px; }
  header .menu { font-size:13px; }
  body.concept-b.home {  }
}
.skills-top input:focus-visible { outline:3px solid #b899ed; outline-offset:3px; border-radius:2px; }


/* One keyboard ring encloses the search icon and input as a single control. */
@supports selector(label:has(input:focus-visible)) {
  .skills-search-form>label:has(input:focus-visible) { outline:3px solid #b899ed; outline-offset:3px; }
  .skills-search-form>label:has(input:focus-visible) input { outline:none; }
}
/* Long project and skill names remain in the viewport, with natural word wrapping first. */
h1,h2,h3 { min-width:0; overflow-wrap:anywhere; }
@media(max-width:700px) {
  .concept-b .project-detail>h1 { font-size:clamp(42px,13vw,60px); letter-spacing:-.04em; line-height:1.1; }
  .concept-b .skill-intro h1 { font-size:clamp(38px,11.5vw,52px); letter-spacing:-.04em; line-height:1.1; }
  .page-heading h1,.page-header h1 { font-size:clamp(40px,12vw,48px); letter-spacing:-.04em; }
  .cv-toolbar h1 { font-size:clamp(40px,12vw,44px); }
  .error-main h1 { font-size:clamp(38px,12vw,44px); }
}
.project-detail>.optional-badge { display:block; width:max-content; margin:10px 0 0; }

/* Explicit reduced motion also covers generated disclosure and transition surfaces. */
html[data-motion=reduced] .skill-node::details-content,html[data-motion=reduced] .disclosures details::details-content{transition:none!important;animation:none!important}
html[data-motion=reduced]::view-transition-group(*),html[data-motion=reduced]::view-transition-old(*),html[data-motion=reduced]::view-transition-new(*){animation:none!important;transition:none!important}

/* Round 7: the visitor's navigation stays still; only the reading surface changes. */
#main-content { view-transition-name:portfolio-page; }
header { view-transition-name:portfolio-navigation; }
::view-transition-old(root),::view-transition-new(root),
::view-transition-old(portfolio-navigation),::view-transition-new(portfolio-navigation) { animation:none; }
::view-transition-group(portfolio-navigation) { animation-duration:0s; }
::view-transition-old(portfolio-page) { animation:portfolio-page-out 140ms ease both; }
::view-transition-new(portfolio-page) { animation:portfolio-page-in 240ms var(--ease) both; }
@keyframes portfolio-page-out { to { opacity:0; } }
@keyframes portfolio-page-in { from { opacity:.65; } to { opacity:1; } }
/* Two supported examples share the available space instead of leaving empty grid slots. */
.concept-b .skill-rows { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.concept-b .skill-row { max-width:520px; }
/* Pointer and keyboard visitors get the same small directional cue. */
a .icon-out { transition:transform 180ms var(--ease); }
a:hover .icon-out,a:focus-visible .icon-out { transform:translate(2px,-2px); }
.skill-row:hover h3,.skill-row:focus-visible h3,.directory-result h2 a:hover,.directory-result h2 a:focus-visible { color:#d3b6ff; }
.header-motion { border:0; background:transparent; color:var(--muted); font-size:11px; white-space:nowrap; padding:8px 0; min-height:44px; }
.mobile-motion { border:0; background:transparent; color:var(--ink); text-align:left; padding:11px 13px; min-height:44px; font-size:14px; }
header { gap:24px; }
.skills-main>.page-heading.skill-intro { max-width:1000px; padding-top:0; padding-bottom:25px; }
.skills-main>.page-heading.skill-intro h1 { margin:0 0 17px; }
@media(max-width:1100px) {
  header .desktop-nav,header .header-motion { display:none; }
  header .menu { display:flex; align-items:center; justify-content:center; min-height:44px; background:none; border:0; color:var(--ink); font-size:14px; }
  .mobile-nav[hidden] { display:none; }
  .mobile-nav:not([hidden]) { display:flex; flex-direction:column; gap:3px; position:absolute; top:78px; left:0; right:0; background:#24202b; padding:16px; border-radius:6px; box-shadow:0 14px 28px #0005; }
  .mobile-nav a { padding:11px 13px; min-height:44px; font-size:15px; }
}
@media(max-width:700px) {
  header { gap:12px; }
  .mobile-nav:not([hidden]) { top:66px; left:-7px; right:-7px; }
  .concept-b .skill-rows { display:block; }
  .skills-main>.page-heading.skill-intro { padding-bottom:15px; }
  .skills-main>.page-heading.skill-intro+.skills-top { margin-bottom:24px; }
}
@media(max-width:360px) { header { gap:8px; } }
.project-proof { color:#cdb5eb; font-size:13px!important; line-height:1.5; margin:14px 0!important; }
.project-proof strong { font-weight:600; color:#e5d6f7; margin-right:5px; }
@media(max-width:700px) {
  .concept-b .knowledge-layout.skills-overview>aside.areas { display:none; }
  .skills-main>.page-heading.skill-intro p { max-width:40em; }
}
/* Keep every menu control reachable on short phones and landscape screens. */
.mobile-nav:not([hidden]) {
  max-height:calc(100vh - 100px);
  max-height:calc(100dvh - 100px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-padding-block:8px;
  scrollbar-width:thin;
  scrollbar-color:#8d7ba5 #24202b;
}
/* A reading-surface crossfade must not inherit geometry interpolation. */
::view-transition-group(portfolio-page) { animation:none; }
/* Open navigation panels must clear the fixed chapter dock on short screens. */
header { z-index:30; }
/* Keep leaf evidence in the same compact reading rhythm as the skills tree. */
.skill-teaching-evidence { padding-top:20px; }
.skill-teaching-evidence>h2 { font-size:25px; line-height:1.25; font-weight:500; }
.skill-teaching-examples { display:grid; gap:23px; margin-top:25px; }
.skill-teaching-examples h3 { font-size:19px; line-height:1.4; font-weight:500; }
.skill-teaching-examples h3 a { text-decoration:underline; text-decoration-color:#9370db; text-underline-offset:5px; }
.skill-teaching-examples p { margin-bottom:0; }
/* A detail route identifies its subject before secondary browsing on phones. */
/* Detail pages lead with their subject and application. Discovery is optional;
   the Skills index retains its separate full discovery layout. */
.concept-b .skill-detail-layout { grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:min-content min-content 1fr; gap:0 56px; align-items:start; }
.skill-detail-layout>.skill-detail-heading { grid-column:1; grid-row:1; min-width:0; }
.skill-detail-layout>.skills-top { grid-column:1; grid-row:2; }
.concept-b .skill-detail-layout>.knowledge-article { grid-column:1; grid-row:3; min-width:0; }
.concept-b .skill-detail-layout>.related { grid-column:2; grid-row:1 / 4; padding-top:0; }
.skill-detail-page .skill-intro h1 { font-size:clamp(44px,5vw,64px); line-height:1.08; letter-spacing:-.04em; }
.skill-detail-page .breadcrumbs { margin-bottom:16px; }
.concept-b .skill-detail-layout>.skill-discovery { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 24px; align-items:start; margin:20px 0 26px; }
.skill-discovery>.back-link { margin:0; min-height:44px; display:inline-flex; align-items:center; font-size:13px; }
.concept-b details.skill-discovery-panel { display:block; min-width:0; padding:0; }
.skill-discovery-panel>summary { min-height:44px; font-size:14px; gap:12px; justify-content:flex-end; }
.skill-discovery-panel>summary>b { display:flex; }
.skill-discovery-panel .icon-minus { display:none; }
.skill-discovery-panel[open] .icon-plus { display:none; }
.skill-discovery-panel[open] .icon-minus { display:block; }
.skill-discovery-panel[open] { grid-column:1/-1; }
.skill-discovery-panel[open]>summary { justify-content:space-between; }
.skill-discovery-body { padding:18px 0 22px; border-top:1px solid var(--surface); border-bottom:1px solid var(--surface); }
.skill-discovery-body .skills-search-form { display:flex; flex-wrap:wrap; gap:10px; width:100%; }
.skill-discovery-body .skills-search-form label { margin:0; min-width:0; }
.skill-discovery-body .skills-search-form label:first-child { flex:1 1 220px; }
.skill-discovery-body .skills-search-form input { min-width:0; width:100%; }
.skill-discovery-body .areas { display:block; margin:24px 0 0; }
.skill-discovery-body .areas>h2 { font-size:15px; font-weight:500; margin:0 0 14px; }
.skill-discovery-body .area-links { display:flex; flex-wrap:wrap; gap:8px 22px; }
.skill-discovery-body .area-links a { min-height:36px; display:inline-flex; align-items:center; font-size:14px; }
.skill-discovery-body .directory-link { margin-top:24px; }
.skill-discovery-body .directory-link h3 { font-size:18px; }
.skill-discovery-panel>summary:focus-visible { outline:2px solid var(--purple); outline-offset:4px; }
@media(max-width:1000px) {
  .concept-b .skill-detail-layout { display:block; }
  .skill-detail-layout>.related { margin-top:40px; }
}
@media(max-width:700px) {
  .skill-detail-page .skill-intro h1 { font-size:42px; }
  .concept-b .skill-detail-layout>.skill-discovery { column-gap:14px; margin:18px 0 24px; }
  .skill-discovery>.back-link { font-size:12px; max-width:130px; }
  .skill-discovery-panel>summary { font-size:13px; }
}
/* Route focus stays on the main landmark; its cue belongs to the title. */
#main-content:focus-visible { outline:none; }
#main-content:focus-visible h1 {
  text-decoration-line:underline;
  text-decoration-color:#b899ed;
  text-decoration-thickness:3px;
  text-underline-offset:.1em;
}
/* Text-only cards must not inherit the narrow first column reserved for logos. */
.project-card.project-card-text-only { display:block; }
/* Each archive disclosure owns its state icon independently. */
.archive-group:not([open])>summary .icon-plus { display:inline-block; }
.archive-group:not([open])>summary .icon-minus { display:none; }
.archive-group[open]>summary .icon-plus { display:none; }
.archive-group[open]>summary .icon-minus { display:inline-block; }

/* Cinematic, visitor-driven motion. The layout and all controls remain live. */
:root { --ease:cubic-bezier(.16,1,.3,1); }
::view-transition-old(portfolio-page) { animation:portfolio-page-out 200ms ease both; }
::view-transition-new(portfolio-page) { animation:portfolio-page-in 620ms var(--ease) both; }
@keyframes portfolio-page-in { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
::view-transition-group(portfolio-work-image) { animation-duration:650ms; animation-timing-function:var(--ease); }
.concept-b .skill-row { transition:background-color 260ms ease; border-radius:8px; }
.concept-b .skill-row h3 { transition:color 260ms ease; }
.concept-b .skill-row .icon { transition:transform 320ms var(--ease); }
.concept-b .skill-row:not(details):hover .icon,.concept-b .skill-row:not(details):focus-visible .icon { transform:translate(5px,-5px); }
.video-image img,.video-pair img { transition:transform 650ms var(--ease); }
.video-image:hover img,.video-image:focus-visible img,.video-pair a:hover img,.video-pair a:focus-visible img { transform:scale(1.025); }
/* Native details owns open state, focus and keyboard semantics. The browser
   interpolates its content box in both directions, including nested branches. */
@supports (interpolate-size:allow-keywords) {
  .skill-node,.disclosures details,.archive-group,.video-chapters,.case-depth,.case-contents,.skill-discovery-panel { interpolate-size:allow-keywords; }
  .skill-node::details-content,.disclosures details::details-content,.archive-group::details-content,.video-chapters::details-content,.case-depth::details-content,.case-contents::details-content,.skill-discovery-panel::details-content {
    height:0; overflow:clip;
    transition:height 440ms var(--ease),content-visibility 440ms allow-discrete;
  }
  .skill-node[open]::details-content,.disclosures details[open]::details-content,.archive-group[open]::details-content,.video-chapters[open]::details-content,.case-depth[open]::details-content,.case-contents[open]::details-content,.skill-discovery-panel[open]::details-content { height:auto; }
}
@media(max-width:700px) {
}
html[data-motion=reduced] details::details-content { transition:none!important; animation:none!important; }
@media(prefers-reduced-motion:reduce) { html:not([data-motion=full]) details::details-content { transition:none!important; animation:none!important; } }

/* Snapshots are presentation only. The live navigation remains clickable throughout. */
::view-transition { pointer-events:none; }

/* UA snapshot descendants can override inherited hit testing. All remain visual only. */
::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*) { pointer-events:none; }
/* Small, real examples unfold inside the story; the complete directory stays one link away. */
.concept-b .skill-rows { align-items:start; }
.concept-b .home-skill-example { padding:20px 22px; margin:0; max-width:none; background:#24212b; }
.home-skill-example>summary { align-items:start; gap:18px; min-height:44px; }
.home-skill-example>summary .node-count { padding-top:3px; flex-shrink:0; }
.home-skill-example>summary p { font-weight:400; }
.home-skill-example>.skill-children { padding-top:20px; }
.home-skill-example .skill-tree { margin:0; padding:0; list-style:none; }
.home-skill-example .skill-node>summary { font-size:17px; padding:12px 0; }
.home-skill-example .skill-children p { font-size:14px; line-height:1.65; }
.home-skill-example .skill-leaf>a { font-size:15px; }
.home-skill-example .skill-node .skill-children { padding-left:14px; }
.home-skill-example .home-skill-destination { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; font-size:14px; color:#d3b6ff; }
.home-skill-example:not([open])>summary .icon-minus { display:none; }
.home-skill-example[open]>summary .icon-plus { display:none; }
.home-skill-example[open]>summary .icon-minus { display:inline-block; }
@supports (interpolate-size:allow-keywords) {
  .home-skill-example { interpolate-size:allow-keywords; }
  .home-skill-example::details-content { height:0; overflow:clip; transition:height 440ms var(--ease),content-visibility 440ms allow-discrete; }
  .home-skill-example[open]::details-content { height:auto; }
}
@media(max-width:700px) { .concept-b .home-skill-example { padding:18px; margin-top:18px; } }
/* Leave room for both lesson captions above the chapter dock at desktop landings. */
@media(min-width:701px) {
  .home .teaching-section { padding-top:32px; padding-bottom:90px; }
  .home .teaching-section .video-pair { margin-top:26px; }
  .home .teaching-section .video-pair img { max-height:clamp(150px,calc(100svh - 520px),280px); object-fit:contain; }
}
/* A disclosure is a vertical reading stack, never the old two-column link row. */
.concept-b details.home-skill-example { display:block; min-width:0; }
.home-skill-example>summary { display:flex; min-width:0; }
.home-skill-example>summary>div { flex:1; min-width:0; }
.home-skill-example>.skill-children,.home-skill-example .skill-node { display:block; min-width:0; }
.home-skill-example .skill-node>summary { display:flex; min-width:0; }
.home-skill-example .skill-node>summary>.node-label { min-width:0; }

/* Expanded Hideout case: native progressive detail, existing theme and motion. */
.case-hero-media{margin:0}.case-hero-media figcaption{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px}.case-columns article .case-depth{border-top:1px solid var(--surface);border-bottom:1px solid var(--surface);margin:22px 0 30px;padding:17px 0}.case-depth summary{font-size:16px;line-height:1.5;gap:18px}.case-depth summary>b{display:flex;flex:none}.case-depth .icon-minus{display:none}.case-depth[open] .icon-plus{display:none}.case-depth[open] .icon-minus{display:block}.case-columns article .case-depth p{font-size:16px}.case-depth summary:focus-visible{outline:2px solid var(--purple);outline-offset:6px}@media(max-width:700px){.case-hero-media .project-full{height:auto;aspect-ratio:16/9}.case-depth summary{font-size:15px}.case-columns article .case-depth p{font-size:15px}}

.case-architecture{margin:30px 0;padding:24px;background:var(--surface);border-radius:8px}.case-architecture figcaption{font-size:16px;font-weight:600;line-height:1.5}.case-columns article .architecture-path>p{font-size:13px;color:var(--muted);margin:20px 0 10px}.architecture-path ol{display:flex;gap:28px;list-style:none;margin:0;padding:0}.architecture-path li{position:relative;flex:1;min-width:0;background:var(--paper);border:1px solid var(--muted);border-radius:5px;padding:13px 12px;font-size:14px;line-height:1.5}.architecture-path li+li:before{content:'→';position:absolute;left:-23px;top:50%;transform:translateY(-50%);color:var(--muted)}.case-columns article .architecture-note{font-size:13px;line-height:1.6;color:var(--muted);margin:20px 0 0}@media(max-width:700px){.case-architecture{padding:18px}.architecture-path ol{flex-direction:column;gap:25px}.architecture-path li+li:before{content:'↓';left:50%;top:-25px;transform:translateX(-50%)}}

/* Hideout contents: one accessible rail, compact on small screens. */
.concept-b details.case-contents{display:block;padding:0;min-width:0}.case-contents>summary{display:none}.case-contents-body>h2{font-size:15px;color:var(--ink);font-weight:500;margin:24px 0 12px}.case-contents-body{display:block}.case-contents .icon-minus{display:none}.case-contents[open] .icon-plus{display:none}.case-contents[open] .icon-minus{display:block}
@media(max-width:700px){.case-contents{margin:18px 0 24px;border-top:1px solid var(--surface);border-bottom:1px solid var(--surface)}.case-contents>summary{display:flex;font-size:16px;line-height:1.5;padding:16px 0;color:var(--ink)}.case-contents>summary>b{display:flex}.case-contents-body{padding:0 0 18px}.case-columns .case-contents .section-navigation{display:flex;flex-direction:column;gap:4px;margin:4px 0 18px}.case-contents .section-navigation a{font-size:14px}.case-columns:has(.case-contents) aside>p{margin:10px 0}.case-columns:has(.case-contents){margin-top:24px}.case-contents>summary:focus-visible{outline:2px solid var(--purple);outline-offset:4px}}

/* Hideout desktop opening: bring the game image into view sooner. */
@media(min-width:701px){
  .concept-b .project-detail[data-project-id="hideout"]{padding-top:24px}
  .concept-b .project-detail[data-project-id="hideout"]>h1{font-size:96px;margin-top:20px}
  .concept-b .project-detail[data-project-id="hideout"]>.lead{margin-bottom:28px}
  .concept-b .project-detail[data-project-id="hideout"]>.project-intro{margin-bottom:24px}
}
/* Evidence is readable before opening anything: specific application, then the
   canonical case excerpt and an explicit link to its original section. */
.skill-application>h2{font-size:28px;line-height:1.25;font-weight:500;margin:6px 0 18px}
.skill-examples{display:grid;gap:34px;margin:30px 0 38px;min-width:0}
.skill-example{min-width:0;border-top:1px solid var(--surface);padding-top:24px}
.skill-example>.eyebrow{color:#b8a1d8;font-size:12px;letter-spacing:.08em;margin:0 0 10px}
.skill-example>h3{font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.35px;margin:0 0 14px;overflow-wrap:anywhere}
.skill-excerpt{border-left:2px solid var(--purple);padding:1px 0 1px 20px;margin:20px 0 12px;min-width:0}
.skill-excerpt>.excerpt-label{font-size:13px;color:var(--muted);margin:0 0 12px}
.skill-excerpt>p:last-child{margin-bottom:0}
.skill-example>.evidence-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}
.skill-scope{font-size:14px!important;color:var(--muted)}
.skill-scope a{color:#d1b5f5;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.skill-application>h2{font-size:25px}.skill-example>h3{font-size:22px}.skill-examples{gap:26px}.skill-excerpt{padding-left:15px}.skill-example>.evidence-link{font-size:13px}.skill-example{padding-top:21px}}
/* Logos stay compact and uncropped; only genuine case imagery gets hero space. */
.concept-b .project-detail>.project-full.project-mark{width:84px;height:84px;object-fit:contain;aspect-ratio:1;border-radius:14px;margin:0 0 12px}
@media(min-width:701px){
 .concept-b .project-detail:not([data-project-id="hideout"]){padding-top:24px}
 .concept-b .project-detail:not([data-project-id="hideout"])>h1{font-size:clamp(54px,6.5vw,88px);line-height:1.08;margin-top:20px}
 .concept-b .project-detail:not([data-project-id="hideout"])>.lead{margin-bottom:22px}
 .concept-b .project-detail:not([data-project-id="hideout"])>.project-intro{margin:20px 0 24px}
 .concept-b .project-detail:not([data-project-id="hideout"])>.case-columns{margin-top:28px}
}
.case-section-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1.5;margin:3px 0 14px}
.skill-example .case-depth{display:block;border-top:1px solid var(--surface);border-bottom:1px solid var(--surface);margin:20px 0;padding:16px 0}
.skill-example .case-depth>summary{font-size:16px;line-height:1.5}

/* One canonical skills collection: a calm moving rail, or a complete static grid. */
.home .skills-section { min-width:0; }
.home-skill-collection { min-width:0; max-width:100%; }
.skill-rail-viewport { overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; padding:6px 6px 14px; scroll-padding-inline:6px; }
.skill-rail-track { display:flex; gap:20px; width:max-content; align-items:stretch; }
.skill-rail-track > .skill-evidence-card { box-sizing:border-box; flex:0 0 clamp(280px,30vw,340px); width:clamp(280px,30vw,340px); margin:0; padding:24px; border:1px solid #494350; border-radius:8px; background:#24212b; color:inherit; text-decoration:none; display:flex; flex-direction:column; }
.skill-evidence-card h3 { font-size:23px; line-height:1.25; margin:10px 0 14px; overflow-wrap:anywhere; }
.skill-evidence-card > p:not(.eyebrow) { font-size:15px; line-height:1.65; }
.skill-evidence-card .eyebrow { font-size:12px; }
.skill-evidence-card .evidence-link { margin-top:auto; padding-top:20px; display:flex; gap:10px; align-items:center; color:#b799ed; }
.skill-evidence-card .evidence-link svg { width:18px; height:18px; }
.skill-evidence-card { scroll-margin-inline:6px; }
.skill-evidence-card:focus-visible { outline:3px solid #b799ed; outline-offset:2px; }
.home-skill-collection[data-static="true"] .skill-rail-viewport { overflow:visible; }
.home-skill-collection[data-static="true"] .skill-rail-track { display:grid; width:100%; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.home-skill-collection[data-static="true"] .skill-evidence-card { width:auto; }
@media(max-width:700px) {
 .skill-rail-track > .skill-evidence-card { flex-basis:min(300px,calc(100vw - 56px)); width:min(300px,calc(100vw - 56px)); padding:22px; }
}