/* Shared, reversible disclosure and press states. Native details remain usable without JS. */
.disclosure-body{display:flow-root;min-width:0}
:root .research-details{margin-top:20px}
:root .research-details>summary{display:flex;align-items:center;justify-content:center;min-height:56px;width:calc(100% + 56px);margin:0 -28px;padding:14px 28px;border:0;border-top:1px solid var(--line);border-radius:0;list-style:none;background:transparent;color:var(--green);cursor:pointer;transition:background-color 180ms ease,color 180ms ease}
:root .research-details>summary::-webkit-details-marker{display:none}
:root .research-details>summary>span{display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;transition:transform 460ms cubic-bezier(.4,0,.2,1)}
:root .research-details>summary svg{width:24px;height:24px}
:root .research-details>summary[aria-expanded=true]>span{transform:rotate(45deg)}
:root .research-details>summary:focus-visible{background:color-mix(in srgb,var(--green) 9%,transparent)}
@media(hover:hover) and (pointer:fine){:root .research-details>summary:hover{background:color-mix(in srgb,var(--green) 9%,transparent)}}
:root .research-details>summary:active{background:transparent}
:root .research-details>summary:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
:root .research-details>.disclosure-body{padding-top:16px}
:root :is(.project,.current-project,.cv-publication,.cv-timeline-entry,.cv-skills>li){transition:background-color 280ms ease,box-shadow 280ms ease,border-color 280ms ease}
:root .cv-publication.details-changing{background:color-mix(in srgb,var(--green) 7%,var(--past-surface,var(--cv-container)))}
:root[data-theme=dark] .cv-publication.details-changing{background:color-mix(in srgb,var(--green) 10%,#202c24)}
:root :is(.cv-timeline-entry,.cv-skills>li).details-changing{background:color-mix(in srgb,var(--green) 5%,transparent)}
:root :is(button,[role=button],summary){transition:background-color 180ms ease,color 180ms ease,filter 180ms ease}
:root :is(button,[role=button]):not(:disabled):hover{filter:brightness(.95)}
:root :is(button,[role=button]):not(:disabled):active{filter:brightness(.88)}
:root .cv-document summary:is(:hover,:focus-visible){background:color-mix(in srgb,var(--green) 8%,transparent)}
:root .cv-document summary:active{background:color-mix(in srgb,var(--green) 14%,transparent)}
@media(max-width:640px){:root .research-details>summary{width:calc(100% + 48px);margin-inline:-24px;padding-inline:24px}}
@media(prefers-reduced-motion:reduce){:root :is(summary,summary>span,button,[role=button],.project,.current-project,.cv-publication,.cv-timeline-entry,.cv-skills>li){transition:none}}
html[data-motion=reduce] :is(summary,summary>span,button,[role=button],.project,.current-project,.cv-publication,.cv-timeline-entry,.cv-skills>li){transition:none}

:root .research-grid>.project>.project-body{padding-bottom:0}
:root .research-details>.disclosure-body{padding-bottom:28px}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=reduce]) :is(.research-masonry>article,.cv-publication):active{translate:0 -1px}
}

/* One edge-to-edge divider; the close rotation follows intent during reversal. */
:root .research-details{border-top:0}
:root .research-details>summary[aria-expanded=false]>span{transform:rotate(0)}
@media print{
 .disclosure-body{display:block!important;overflow:visible!important;height:auto!important}
 details::details-content{content-visibility:visible!important;height:auto!important;overflow:visible!important}
 details{height:auto!important;overflow:visible!important}
}

/* Moving sheets must not enlarge the document or trigger viewport rescaling. */
html,body{overflow-x:clip}
:root .research-masonry>article{position:relative;isolation:isolate;overflow:hidden}
:root .research-masonry>article::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:var(--green);opacity:0;transition:opacity 220ms ease}
:root .research-masonry>.current-project::after{background:#a48abb}
@media(hover:hover){:root .research-masonry>article:hover::after{opacity:.035}}
:root .research-masonry>article:active::after{opacity:0}
:root .research-masonry>article:is(.card-press,.pending-ack,.details-changing)::after{opacity:.09}
:root .research-masonry>.current-project:is(.card-press,.pending-ack,.details-changing)::after{opacity:.12}
:root .research-masonry>.pending-ack .project-meta{color:#8a639f}
:root[data-theme=dark] .research-masonry>.pending-ack .project-meta{color:#dec4f2}
:root .research-masonry .project-meta{transition:color 220ms ease}
:root .model-project .model-card-preview:focus-visible{outline-offset:-4px;border-radius:inherit}
:root .research-details>summary>span{width:40px;height:40px;border:1px solid transparent;border-radius:50%;transition:transform 460ms cubic-bezier(.4,0,.2,1),border-color 220ms ease,background-color 220ms ease}
:root .research-details>summary[aria-expanded=true]>span{border-color:currentColor;background:color-mix(in srgb,var(--green) 7%,transparent)}
:root .research-details>summary{min-height:64px;padding-block:11px}
html[data-motion=reduce] .research-masonry>article::after{transition:none}
@media(prefers-reduced-motion:reduce){:root .research-masonry>article::after{transition:none}}

/* Use our tonal press state instead of the browser's blue delegated-click flash. */
:root .research-masonry>article,:root .research-masonry>article *,:root .model-morph{ -webkit-tap-highlight-color:transparent }
:root .model-project.model-press{background:color-mix(in srgb,var(--green) 8%,#f0edf6)}
:root[data-theme=dark] .model-project.model-press{background:color-mix(in srgb,var(--green) 10%,#292632)}
:root .research-masonry>.model-project.model-press::after{opacity:.07}

/* Empty contact-card space shares the expand/shrink action, without native tap flash. */
:root .shared-contact-card,:root .shared-contact-card *{-webkit-tap-highlight-color:transparent}

/* The complete media preview is one target; its action cue mirrors hover and press. */
:root :is(.research-film,.model-card-preview){cursor:pointer;touch-action:manipulation}
:root :is(.research-film,.model-card-preview) .play-label{transition:background-color 180ms ease,color 180ms ease,filter 180ms ease,transform 180ms ease;pointer-events:none}
:root .film-preview:has(.research-film):is(:hover,:focus-within) .play-label,
:root .model-project .current-figure:is(:hover,:focus-within) .play-label{background:var(--button-bg);color:var(--button-fg);filter:brightness(.92);transform:translateY(-1px)}
:root .film-preview:has(.research-film):active .play-label,
:root .model-project .current-figure:active .play-label,
:root .model-project.model-press .play-label,
:root .media-press-cue{background:var(--button-bg);color:var(--button-fg);filter:brightness(.84);transform:scale(.97);box-shadow:none}
:root .media-activating::after{opacity:.08}
:root .media-press-cue{z-index:3;pointer-events:none;animation:media-cue-release 320ms ease-out forwards}
@keyframes media-cue-release{0%,40%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){:root :is(.research-film,.model-card-preview) .play-label,:root .media-press-cue{transition:none;animation:none;transform:none}}
html[data-motion=reduce] :is(.research-film,.model-card-preview) .play-label,html[data-motion=reduce] .media-press-cue{transition:none;animation:none;transform:none}

/* The whole disclosure is full bleed, including its animation clipping boundary. */
:root .shared-contact-card figcaption::before{display:none}
:root .research-details{--study-inset:28px;width:calc(100% + var(--study-inset)*2);margin-inline:calc(-1 * var(--study-inset))}
:root .research-details>summary{width:100%;margin-inline:0;padding-inline:var(--study-inset);border-radius:0 0 27px 27px;transition:background-color 180ms ease,color 180ms ease,border-radius 460ms cubic-bezier(.4,0,.2,1)}
:root .research-details>summary[aria-expanded=true]{border-radius:0}
:root .research-details>.disclosure-body{padding-inline:var(--study-inset)}
@media(max-width:640px){:root .research-details{--study-inset:24px}:root .research-details>summary{border-radius:0 0 23px 23px}:root .research-details>summary[aria-expanded=true]{border-radius:0}}
@media(prefers-reduced-motion:reduce){:root .research-details>summary{transition:none}}
html[data-motion=reduce] .research-details>summary{transition:none}

/* Unfinished card acknowledgement is decorative, never a fabricated loading task. */
:root .current-project .project-meta{display:flex;align-items:center;justify-content:flex-start;gap:8px}
:root .model-project .current-copy{cursor:auto}
:root .model-project .current-figure{cursor:pointer}

/* One selected surface travels between citation formats while the content resizes. */
:root .citation-tabs{position:relative;isolation:isolate}
:root .citation-tabs::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:var(--citation-thumb-width,0px);transform:translateX(var(--citation-thumb-x,0px));border-radius:999px;background:var(--button-bg);z-index:0;pointer-events:none;opacity:0;transition:transform 460ms cubic-bezier(.4,0,.2,1),width 460ms cubic-bezier(.4,0,.2,1)}
:root .citation-tabs.citation-slider-ready::before{opacity:1}
:root .citation-tabs button{position:relative;z-index:1;font-weight:500}
:root .citation-tabs.citation-slider-ready button[aria-selected=true]{background:transparent;color:var(--button-fg);font-weight:500}
:root .citation-tabs.citation-slider-ready button[aria-selected=true]:hover{background:transparent}
@media(prefers-reduced-motion:reduce){:root .citation-tabs::before{transition:none}}
html[data-motion=reduce] .citation-tabs::before{transition:none}

:root .citation-entry-copy{display:flex;align-items:center;justify-content:center;width:max-content;min-height:44px;margin:8px 0 0 auto;padding:10px 12px;border:0;border-radius:999px;background:transparent;color:var(--green);font:600 12px/20px var(--font);cursor:pointer;transition:var(--control-transition)}
:root .citation-entry-copy:hover{background:var(--control-tonal)}
:root .citation-entry-copy:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* CV disclosures use one compact action on the right, never a clipping-wide highlight. */
:root .cv-document :is(.cv-entry-details,.cv-publication>details,.cv-method)>summary{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:48px;padding:4px;background:transparent!important;border:0;border-radius:0;list-style:none;font-size:0;line-height:1;outline:none}
:root .cv-document .cv-method>summary{justify-content:space-between;min-height:64px}
:root .cv-document :is(.cv-entry-details,.cv-publication>details,.cv-method)>summary::after{content:"+";display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;box-sizing:border-box;margin-left:auto;border:1px solid var(--cv-rule);border-radius:50%;background:var(--control-tonal);color:var(--green);font:400 22px/1 var(--font);transition:background-color 180ms ease,border-color 180ms ease}
:root .cv-document :is(.cv-entry-details,.cv-publication>details,.cv-method)>summary[aria-expanded=true]::after,
:root .cv-document :is(.cv-entry-details,.cv-publication>details,.cv-method)[open]>summary:not([aria-expanded])::after{content:"−"}
:root .cv-document :is(.cv-entry-details,.cv-publication>details,.cv-method)>summary:is(:hover,:active)::after{background:var(--control-hover);border-color:var(--green)}
:root .cv-document :is(.cv-entry-details,.cv-publication>details,.cv-method)>summary:focus-visible::after{outline:2px solid var(--green);outline-offset:2px}
:root .cv-document .cv-method>summary h3{font-size:14px;line-height:1.5}
:root .cv-document .cv-filters{position:relative;isolation:isolate;display:flex;flex-wrap:nowrap;width:max-content;max-width:100%;gap:2px;padding:2px;border-radius:999px;background:var(--control-tonal)}
:root .cv-document .cv-filters::before{content:"";position:absolute;z-index:0;left:0;top:2px;bottom:2px;width:var(--filter-width,0px);transform:translateX(var(--filter-x,0px));border-radius:999px;background:var(--button-bg);opacity:0;pointer-events:none;transition:transform 460ms cubic-bezier(.4,0,.2,1),width 460ms cubic-bezier(.4,0,.2,1)}
:root .cv-document .cv-filters.cv-filter-slider-ready::before{opacity:1}
:root .cv-document .cv-filters button{position:relative;z-index:1;background:transparent;font-weight:500}
:root .cv-document .cv-filters.cv-filter-slider-ready button[aria-pressed=true]{background:transparent;color:var(--button-fg)}
:root .cv-document .cv-filters button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
:root .cv-document .cv-filters.cv-filter-slider-ready button[aria-pressed=true]:hover{background:transparent}
@media(prefers-reduced-motion:reduce){:root .cv-document .cv-filters::before,:root .cv-document summary::after{transition:none}}
html[data-motion=reduce] .cv-document .cv-filters::before,html[data-motion=reduce] .cv-document summary::after{transition:none}

/* Remain authoritative when CV base styles are loaded lazily from About. */
:root .cv-document .cv-filters.cv-filter-slider-ready button{background:transparent}
:root .cv-document .cv-filters.cv-filter-slider-ready button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
:root .cv-document .cv-filters.cv-filter-slider-ready button[aria-pressed=true]:hover{background:transparent}

/* Align CV actions with their titles; summaries no longer create a separate row. */
:root .cv-timeline-body,:root .cv-publication{position:relative}
:root .cv-timeline-body:has(.cv-entry-details)>h3,:root .cv-publication>h3{display:flex;align-items:center;min-height:48px;padding-right:56px}
:root .cv-document :is(.cv-entry-details,.cv-publication>details){--disclosure-closed-height:0px}
:root .cv-document :is(.cv-entry-details,.cv-publication>details)>summary{position:absolute;top:0;right:-4px;width:48px;height:48px;min-height:48px;margin:0;z-index:1}
:root .cv-document .cv-publication>details>summary{right:20px}
:root .cv-publication .cv-paper-links{margin-top:4px}
@media(max-width:760px){:root .cv-document .cv-publication>details>summary{right:16px}}

/* Timeline feedback covers the actual card surface, not an inset text rectangle. */
:root .cv-document .cv-timeline{padding:0;border-radius:24px;overflow:clip}
:root .cv-document .cv-timeline-entry{padding:24px;border-radius:0}
:root .cv-document .cv-timeline-entry:first-child{border-top-left-radius:24px;border-top-right-radius:24px}
:root .cv-document .cv-timeline-entry:last-child{border-bottom-left-radius:24px;border-bottom-right-radius:24px}
:root .cv-document .cv-timeline-entry.details-changing{background:color-mix(in srgb,var(--green) 7%,var(--cv-container))}
@media(max-width:760px){:root .cv-document .cv-timeline-entry{padding:20px}}

/* One integrated action footer; one primary action in each contact-card mode. */
:root .shared-contact-card .contact-card-actions{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);gap:10px}
:root .shared-contact-card .contact-research{background:color-mix(in srgb,var(--green) 8%,var(--contact-card-surface));color:var(--ink)}
:root .shared-contact-card.cv-contact-card .contact-card-actions{margin:12px 28px 0;padding:16px 0 24px}
:root .shared-contact-card.cv-contact-card .contact-research{min-width:0}
:root .shared-contact-card.cv-contact-card .contact-cv-toggle{background:var(--control-tonal);color:var(--ink)}
:root .shared-contact-card.cv-contact-card .contact-cv-toggle:is(:hover,:focus-visible){background:var(--control-hover);color:var(--ink)}
@media(max-width:760px){:root .shared-contact-card.cv-contact-card .contact-card-actions{margin-inline:20px;padding-bottom:20px}}

/* Pilot visual project stories: descriptive workflows, real contributions, direct resources. */
.project-story{padding-top:10px}
.project-story .project-takeaway{margin:0;font-size:18px;font-weight:500;line-height:1.6;letter-spacing:-.015em;color:var(--ink)}
.project-workflow{margin:22px 0;padding:18px 16px 20px;border-radius:20px;background:color-mix(in srgb,var(--art-accent) 7%,var(--past-surface))}
.project-workflow>figcaption{margin:0 0 14px;padding:0;font-size:12px;line-height:1.5;font-weight:600;color:var(--muted)}
.project-workflow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:0}
.project-workflow-steps>li{position:relative;margin:0;min-width:0}
.story-step-icon{height:64px;margin-bottom:10px;color:var(--green)}
.story-icon{display:block;width:64px;height:64px;pointer-events:none}
.story-step-copy strong{display:block;font-size:13px;font-weight:600;line-height:1.4;color:var(--ink)}
.story-step-copy p{margin:5px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.story-connector{position:absolute;top:25px;right:-18px;color:var(--muted);opacity:.55;pointer-events:none}
.project-contribution h4{margin:0 0 8px;font-size:13px;font-weight:600;line-height:1.5;color:var(--green)}
.project-contribution p{margin:0;font-size:14px;line-height:1.75;color:var(--secondary-text)}
.project-resource-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
:root .project-resource-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 16px;border:0;border-radius:999px;background:var(--control-tonal);color:var(--ink);font:600 12px/20px var(--font);text-decoration:none;transition:var(--control-transition)}
:root .project-resource-action:hover{background:var(--control-hover);color:var(--green)}
:root .project-resource-action:active{filter:brightness(.9)}
:root .project-resource-action:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.project-resource-action>svg{flex:none}
.project-prose--resources{padding-top:0}
.project-prose--resources h3{font-size:12px;font-weight:600;color:var(--muted);margin:18px 0 6px}
.project-prose--resources p{font-size:12px;line-height:1.85}
@media(max-width:480px){
 .project-story .project-takeaway{font-size:17px}
 .project-workflow{padding:16px}
 .project-workflow-steps{grid-template-columns:minmax(0,1fr);gap:18px}
 .project-workflow-steps>li{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px}
 .story-step-icon{height:48px;margin:0}
 .story-icon{width:48px;height:48px}
 .story-connector{top:auto;bottom:-17px;left:12px;right:auto;width:24px;height:14px;transform:rotate(90deg)}
 .project-resource-actions{gap:8px}
 :root .project-resource-action{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){:root .project-resource-action{transition:none}}
html[data-motion=reduce] .project-resource-action{transition:none}

/* A brief writing cue acknowledges unfinished work without implying loading. */
:root .current-project .project-meta::after{content:"";display:inline-block;flex:none;width:16px;height:16px;box-sizing:border-box;border:0;border-radius:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2016.5V20h3.5L18%209.5%2014.5%206%204%2016.5zm16.7-9.7a1%201%200%200%200%200-1.4l-2.1-2.1a1%201%200%200%200-1.4%200L15.5%205%2019%208.5l1.7-1.7z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2016.5V20h3.5L18%209.5%2014.5%206%204%2016.5zm16.7-9.7a1%201%200%200%200%200-1.4l-2.1-2.1a1%201%200%200%200-1.4%200L15.5%205%2019%208.5l1.7-1.7z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:0;transition:opacity 140ms ease}
:root .current-project.pending-ack .project-meta::after{opacity:1;animation:pending-pencil-note 600ms ease-in-out 1}
@keyframes pending-pencil-note{0%,100%{transform:rotate(-8deg) translateX(0)}35%{transform:rotate(8deg) translateX(2px)}65%{transform:rotate(-4deg) translateX(-1px)}}
@media(prefers-reduced-motion:reduce){:root .current-project .project-meta::after{animation:none!important;transition:none}}
html[data-motion=reduce] .current-project .project-meta::after{animation:none!important;transition:none}

/* In a single column, animated disclosure height alone moves the following cards. */
html:has(.disclosure-animating){overflow-anchor:none}
@media(max-width:640px){
 :root .research-masonry>article{overflow-anchor:none}
}
@media(hover:none),(pointer:coarse){
 :root .research-masonry>article:active{translate:none}
 :root .research-masonry>article:has(summary:active):not(.card-press):not(.details-changing)::after{opacity:0}
}

/* Desktop study disclosures use the width of both research columns. */

:root .video-size-toggle{width:48px;min-width:48px;max-width:48px;height:48px;min-height:48px;max-height:48px;flex:none;aspect-ratio:1;padding:0}

/* One column for details; the same native summary rides the growing bottom edge. */
:root .research-details{position:relative;--disclosure-closed-height:64px}
:root .research-details:not([open]){height:64px}
:root .research-details>summary{position:absolute;left:0;bottom:0;z-index:3;height:64px;min-height:64px;background:var(--past-surface,var(--surface));border-radius:0 0 27px 27px!important}
:root .research-details>.disclosure-body{padding-top:16px;padding-bottom:92px}
:root .research-details>summary>span{transform:none!important}
.research-details .disclosure-vertical{opacity:1;transform-origin:12px 12px;transition:opacity 220ms ease,transform 680ms cubic-bezier(.4,0,.2,1)}
.research-details>summary[aria-expanded=true] .disclosure-vertical{opacity:0;transform:scaleY(0)}
@media(max-width:640px){:root .research-details>summary{border-radius:0 0 23px 23px!important}}
@media(prefers-reduced-motion:reduce){.research-details .disclosure-vertical{transition:none}}
html[data-motion=reduce] .research-details .disclosure-vertical{transition:none}

/* Match the CV disclosure's visible circular boundary in its resting state. */
:root .research-details>summary>span{box-sizing:border-box;border-color:var(--line);background:var(--control-tonal)}
@media(hover:hover) and (pointer:fine){:root .research-details>summary:hover>span{border-color:var(--green);background:var(--control-hover)}}