/* Shared depth hierarchy; content and native disclosure behavior stay intact. */
#portfolio{--folio-shadow:inset 0 1px 0 #ffffff65,0 4px 0 color-mix(in srgb,var(--color-primary) 13%,var(--color-surface)),0 6px 0 color-mix(in srgb,var(--color-primary) 20%,var(--color-surface)),0 18px 28px -23px #173f3a70}
.complete-preview #portfolio :is(.honor-card,.award-item,.communication-card,.project-card,.contrib-stat,.contrib-panel,.appt-card,.skill-card,.communication-metric){border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-surface));border-radius:20px;background:linear-gradient(145deg,var(--color-surface-2),var(--color-surface));box-shadow:var(--folio-shadow);transition:box-shadow .3s ease,translate .3s ease}
.complete-preview #portfolio :is(.projects-grid,.awards-list,.skills-grid,.appt-list,.communication-grid){gap:24px}
.complete-preview #portfolio .section{border-top-color:color-mix(in srgb,var(--color-primary) 10%,transparent);padding-bottom:48px}
.complete-preview #portfolio .section-label{display:inline-block;width:fit-content;padding:5px 12px;border:1px solid color-mix(in srgb,var(--color-primary) 13%,transparent);border-radius:20px;background:var(--color-primary-highlight);box-shadow:inset 0 1px 0 #ffffff50,0 2px 0 color-mix(in srgb,var(--color-primary) 16%,var(--color-surface));margin-bottom:14px}
.complete-preview #portfolio .section-title{text-shadow:0 2px 0 color-mix(in srgb,var(--color-primary) 9%,transparent)}
.complete-preview #portfolio :is(.art-frame,.contrib-illustration){padding:10px;border-radius:18px;border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--folio-shadow)}
.complete-preview #portfolio .art-frame img{border-radius:12px}
.complete-preview #portfolio .repo-item{border-radius:12px;background:color-mix(in srgb,var(--color-primary) 3%,var(--color-surface));border:1px solid color-mix(in srgb,var(--color-primary) 10%,transparent);box-shadow:inset 0 1px 0 #ffffff40,0 2px 0 color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}
.complete-preview #portfolio :is(.portfolio-rail a,.preview-controls button,.project-search button,.project-search select,.project-search input){box-shadow:inset 0 1px 0 #ffffff65,0 3px 0 color-mix(in srgb,var(--color-primary) 14%,var(--color-surface));border-color:color-mix(in srgb,var(--color-primary) 20%,var(--color-surface))}
.complete-preview #portfolio .full-detail summary{padding:6px 0;min-height:32px;align-items:center}
@media(hover:hover) and (pointer:fine){.complete-preview #portfolio :is(.honor-card,.award-item,.communication-card,.project-card,.appt-card,.skill-card):hover{translate:0 -4px;box-shadow:var(--folio-shadow),0 22px 30px -24px #17645b65}}
.page-clover-garden{position:fixed!important;inset:0;z-index:2!important;pointer-events:none;overflow:hidden;contain:strict}
.page-clover{position:absolute;left:var(--leaf-x);top:var(--leaf-y);width:var(--leaf-size);height:auto;opacity:.56;filter:drop-shadow(1px 3px 2px #28554622);animation:page-clover-drift var(--leaf-time) ease-in-out infinite;animation-delay:var(--leaf-delay);transform-origin:center}
.page-clover-garden.paused .page-clover{animation-play-state:paused}
@keyframes page-clover-drift{0%,100%{transform:translate3d(-4px,15px,0) rotate(-18deg)}50%{transform:translate3d(7px,-24px,0) rotate(24deg)}}
@media(max-width:700px){.page-clover{width:18px;opacity:.4}.complete-preview #portfolio :is(.projects-grid,.awards-list,.skills-grid,.appt-list){gap:20px}}
@media(prefers-reduced-motion:reduce){.page-clover{animation:none}.complete-preview #portfolio :is(.honor-card,.award-item,.communication-card,.project-card,.appt-card,.skill-card){transition:none;translate:none}}
/* A focused dark opening gives the long, light portfolio a clear starting point. */
.complete-preview #portfolio .portfolio-hero{padding:42px 24px 48px;background:radial-gradient(ellipse at 95% 0%,#32675780,transparent 60%),linear-gradient(135deg,#152e2b,#0c211f);color:#f4f3e9;border:1px solid #60847750;border-radius:0 0 30px 30px;box-shadow:0 7px 0 #37534b,0 25px 35px -28px #16362c99;margin-bottom:24px}
.complete-preview #portfolio .portfolio-hero .section-label{background:#9bcbb514;color:#b9d9cb;border-color:#9bcbb538;box-shadow:inset 0 1px 0 #ffffff16,0 2px 0 #081b1740}
.complete-preview #portfolio .portfolio-hero .section-title{font-family:var(--font-body);font-weight:750;font-size:clamp(34px,5.2vw,68px);line-height:1.15;letter-spacing:-.035em;max-width:850px;color:#f4f3e9;text-shadow:0 4px 0 #071c1a30;text-wrap:balance;margin:12px 0 24px}
.portfolio-subtitle{font-size:clamp(16px,1.8vw,20px);line-height:1.8;color:#b9cec4;max-width:45em}
.portfolio-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:32px 0}
.portfolio-fact{padding:20px;border-radius:16px;border:1px solid #a3c5b62e;background:linear-gradient(145deg,#9bcbb515,#9bcbb504);box-shadow:inset 0 1px 0 #ffffff12,0 4px 0 #071c1a38;min-width:0}
.portfolio-fact strong{display:block;font:600 clamp(32px,4vw,48px)/1.1 var(--font-body);color:#b4dfca;margin-bottom:10px}
.portfolio-fact span{font-size:13px;color:#d1ddd6;overflow-wrap:anywhere}
.complete-preview #portfolio .portfolio-hero .portfolio-rail a,.complete-preview #portfolio .portfolio-hero .preview-controls button{color:#d9e8df;background:#203d36;border:1px solid #87b29e45;box-shadow:inset 0 1px 0 #ffffff13,0 3px 0 #091f1b;transition:background .25s ease,translate .25s ease}
.complete-preview #portfolio .portfolio-hero .portfolio-rail a:hover{background:#305b4d;translate:0 -2px}
.portfolio-hero .preview-controls{border-color:#9bcbb52e;margin-top:28px}
.portfolio-hero .preview-label{color:#b4dfca}
.portfolio-hero .preview-controls p{color:#b9cec4}
.page-clover:nth-child(2){filter:blur(.7px) drop-shadow(1px 2px 2px #28554620);opacity:.28}
.page-clover:nth-child(3){filter:blur(1px);opacity:.24}
.page-clover:nth-child(4){scale:1.15;filter:drop-shadow(2px 5px 3px #28554635)}
@media(prefers-reduced-motion:no-preference){.portfolio-fact{animation:fact-enter .7s both;animation-delay:var(--fact-delay)}.folio-enter{animation:fact-enter .65s both}}
@keyframes fact-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.portfolio-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.portfolio-fact{padding:16px}.complete-preview #portfolio .portfolio-hero{padding:30px 20px 36px}.portfolio-hero .preview-controls{align-items:flex-start}}