/* Portfolio layout adaptations only. Typography, surfaces and controls come from the club stylesheet. */
html{scroll-padding-top:24px}
.portfolio-gallery{min-width:0}
.portfolio-gallery .meeting-watch{padding-bottom:0}
.portfolio-gallery .meeting-slide img{object-fit:contain}
#ssc .meeting-slide{background:#111}
#club>.project-link{margin-top:0}
.blender-icon{width:76px;height:76px;padding:16px;background:#f5f5f7;border-radius:18px;margin-bottom:24px}
#experience .what-we-do-features{grid-template-columns:repeat(2,minmax(0,1fr))}
#skills .what-we-do-features{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){#experience .what-we-do-features,#skills .what-we-do-features{grid-template-columns:1fr}}
/* Personal introduction layout; the shared font, weights and controls stay unchanged. */
.hero{min-height:calc(90svh - 72px);align-content:center;padding:17svh 0 23svh}
.hero-copy{display:grid;grid-template-columns:1fr 1.15fr;align-items:end;gap:clamp(28px,5vw,72px);max-width:none}
.hero-copy p{margin-top:0}
@media(max-width:760px){.hero{min-height:calc(86svh - 72px);padding:15svh 0 19svh}.hero-copy{grid-template-columns:1fr;gap:26px}}
/* Larger personal header, with the shared Geist family and existing menu behavior. */
.site-header .brand,.site-header .nav{font-family:inherit;font-size:16px;letter-spacing:0;font-weight:400}
.hero-copy{grid-template-columns:1.1fr 1fr}
.hero h1{font-size:clamp(72px,10.5vw,160px)}
@media(max-width:760px){.hero-copy{grid-template-columns:1fr}.hero h1{font-size:clamp(64px,17vw,104px)}}

/* Let the next section title enter the initial viewport. */
#projects{padding-top:clamp(30px,4svh,52px)}

/* Showreel retains each medium's aspect ratio, with the club's shared controls. */
/* Apple iPhone gallery light palette, inspected on apple.com/iphone/. */

/* Descriptions sit on the media, with a fading foreground for contrast. */

/* Restore the club's viewport-wide rail instead of clipping at the content inset. */

/* Every gallery uses the club's full-viewport rail; none stops at the text inset. */
.portfolio-gallery .meeting-slide-track{width:var(--viewport-width);margin-inline:calc((var(--viewport-width) - 100%) / -2);--project-gallery-gutter:calc((var(--viewport-width) - var(--carousel-card-width)) / 2);overscroll-behavior-y:auto}
#club-title{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
#club-title img{display:block;flex:none;width:clamp(42px,6vw,76px);height:auto}

:root{--viewport-width:100vw}
.projects,.project-rail:not([data-slide-track]){width:var(--viewport-width);margin-inline:calc((var(--viewport-width) - 100%) / -2)}
html,body{overflow-x:clip}
.hero-fluid{width:var(--viewport-width)}
.what-we-do{grid-template-columns:minmax(0,1fr)}
@media(max-width:760px){#club-title{flex-direction:column;align-items:flex-start}}


/* Apple's MediaCardGallery geometry: one broad card, centered with equal end gutters.
   Source: /v/apple-homeview/c/built/styles/overview.built.css (.media-card-set). */
#showreel-gallery{--reel-width:min(calc(var(--viewport-width)*.875),1260px);--reel-height:612px;--reel-gutter:calc((var(--viewport-width) - var(--reel-width))/2)}
#showreel-gallery .meeting-slide-track{--carousel-card-width:var(--reel-width);--project-gallery-gutter:var(--reel-gutter);scroll-padding-inline:var(--reel-gutter);touch-action:pan-x pan-y}
#showreel-gallery .gallery-track{gap:20px;padding-inline:var(--reel-gutter)}
#showreel-gallery .meeting-slide{width:var(--reel-width);height:var(--reel-height);aspect-ratio:auto;scroll-snap-align:center;filter:none;cursor:grab;background:#000}
#showreel-gallery .meeting-slide img,#showreel-gallery .meeting-slide video{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#showreel-gallery .meeting-slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:none}
#showreel-gallery .meeting-slide[data-caption-scrim]::after{background:linear-gradient(to bottom,rgba(0,0,0,.38),rgba(0,0,0,.15) 26%,transparent 58%)}
#showreel-gallery .showreel-description{position:absolute;z-index:2;top:48px;left:48px;right:48px;max-width:584px;margin:0;color:rgba(255,255,255,.92);font-size:28px;font-weight:600;line-height:1.142857;letter-spacing:-.02em;pointer-events:none;text-align:left;opacity:var(--caption-opacity,1);transform:translateX(var(--caption-shift,0px))}
#showreel-gallery .gallery-playback{--gallery-surface:#eeeef0;--gallery-ink:#262626}
#showreel-gallery .gallery-indicator{background:#89898b;opacity:1}
#showreel-gallery .meeting-slide-edge .gallery-button{background:#eeeef0;color:#262626}
@media(max-width:1068px){#showreel-gallery{--reel-height:576px}#showreel-gallery .showreel-description{top:44px;left:44px;right:44px}}
@media(max-width:734px){#showreel-gallery{--reel-width:max(280px,calc(var(--viewport-width)*.875 - 20px));--reel-height:480px}#showreel-gallery .showreel-description{top:32px;left:32px;right:32px;font-size:24px}}

/* Interactive award uses the same card frame as the WWDC photographs. */
#ssc-gallery [data-model-slide]{background:transparent}
#ssc-gallery [data-model-slide] iframe{display:block;width:100%;height:100%;border:0;aspect-ratio:16/9}
#ssc-gallery [data-model-slide]:not([data-active="true"]) iframe{pointer-events:none}

/* Overscan the award's render surface without changing its reference card size. */
#ssc-gallery .meeting-slide-track{
 --award-overscan:calc(var(--carousel-card-width) * 9 / 16 * .25);
 padding-top:calc(10px + var(--award-overscan));
 padding-bottom:calc(18px + var(--award-overscan));
 margin-top:calc(-1 * var(--award-overscan));
 margin-bottom:calc(-1 * var(--award-overscan));
}
#ssc-gallery [data-model-slide]{overflow:visible}
#ssc-gallery [data-model-slide] iframe{position:absolute;left:0;top:-25%;height:150%;aspect-ratio:auto}
#ssc-gallery .gallery-playback{z-index:2}

#ssc-gallery [data-model-slide]{clip-path:none!important;-webkit-clip-path:none!important}

/* Original aspect ratios, with exactly centered first/last gutters measured by the player. */
#showreel-gallery .meeting-slide-track{--project-gallery-gutter:0px;scroll-padding-inline:0}
#showreel-gallery .gallery-track{align-items:center;padding-inline:0}
#showreel-gallery .meeting-slide{
 --item-width:min(calc(var(--reel-height) * var(--media-ratio)),var(--reel-width));
 width:var(--item-width);height:calc(var(--item-width) / var(--media-ratio));
 aspect-ratio:var(--media-ratio);min-width:0;min-height:0;
}

/* Broad shadows belong to the title glyphs, not the dark card's edges. */
#showreel-gallery .showreel-description{
 text-shadow:0 2px 12px rgba(0,0,0,.3),0 0 72px rgba(0,0,0,.9),0 12px 120px rgba(0,0,0,.75);
 will-change:transform,opacity;
}

/* Keep the Duo title in the recording's open space above the device. */
#showreel-gallery [data-slide="2"] .showreel-description{top:20px;left:24px;right:24px;max-width:none}
@media(max-width:734px){#showreel-gallery [data-slide="2"] .showreel-description{top:16px;left:16px;right:16px;font-size:18px}}

#experience .what-we-do-feature .project-link{margin-top:20px}


/* Navigation stays at the top of the document. */
.site-header{position:relative;top:auto}
.site-header-inner{justify-content:flex-start}

/* Shared gallery fixes: measured end gutters, one centered focus, no edge shadows. */
[data-slide-player] .meeting-slide-track{scroll-padding-inline:0;overscroll-behavior-y:auto}
[data-slide-player] .gallery-track{padding-inline:0}
[data-slide-player] .meeting-slide{scroll-snap-align:center}
.project-media,.gallery-media{box-shadow:none}
#ssc-title{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
#ssc-title img{display:block;flex:none;width:clamp(42px,6vw,76px);height:auto}
@media(max-width:760px){#ssc-title{flex-direction:column;align-items:flex-start}}

#ssc-title img{filter:brightness(0) invert(1)}
html.js [data-mesh-placeholder] > img:not(.mesh-image-loaded){opacity:0}

[data-mesh-placeholder]{background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
[data-mesh-placeholder]:has(>img.mesh-image-loaded){background-image:none!important}

#showreel-gallery .gallery-playback{background:transparent}

/* Personal closing section: a compact reading column beside the project workspace. */
.personal-skills>h2{max-width:18ch;margin-bottom:clamp(36px,5vw,72px)}
.skills-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.skills-notes{display:flex;flex-direction:column;gap:32px}
.skills-note h3{font-size:clamp(20px,2vw,26px);font-weight:500;line-height:1.2;letter-spacing:-.025em;margin:0 0 10px}
.skills-note p{font-size:17px;line-height:1.55;color:var(--muted);margin:0;max-width:38ch}
.skills-workspace{margin:0;position:sticky;top:32px}
.skills-workspace img{display:block;width:100%;height:auto;border-radius:18px}
@media(max-width:760px){.skills-layout{grid-template-columns:1fr;gap:36px}.skills-workspace{position:static;grid-row:1}.skills-notes{gap:28px}.skills-note p{max-width:unset}}

/* Geist has no width axis; reserve layout space for the expanded name. */
.hero h1{width:calc(100% / 1.12);max-width:none;transform:scaleX(1.12);transform-origin:left center}