/* Homepage exploration: one quiet introduction and two columns of work. */
.home-gallery .grid-hero-b { grid-template-columns: minmax(260px,1fr) minmax(0,2.4fr); gap:0; }
.home-gallery .grid-hero-b .hero-sticky { padding:100px 28px 28px; justify-content:flex-start; background:var(--dark); }
.home-gallery .portfolio-bio { width:100%; max-width:360px; margin:0; }
.home-gallery .portfolio-bio .heading-hero { font-size:28px; line-height:1.15; margin-bottom:24px; }
.home-gallery .portfolio-bio-copy { font-size:15px; line-height:1.5; }
.home-gallery .portfolio-bio-copy p { margin-bottom:18px; }
.home-gallery .hero-sticky > .portfolio-contact-links { flex-direction:row; flex-wrap:wrap; gap:12px 20px; margin:20px 0 0; }
.home-gallery .hero-sticky .portfolio-contact-link { font-size:15px; }
.home-gallery .home-clock { margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:6px; color:var(--heading); }
.home-gallery .home-clock span { font-size:12px; color:var(--heading); }
.home-clock time { font-size:24px; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.home-gallery .grid-hero-b .hero-b { padding:20px 20px 60px 0; background:var(--dark); display:block; }
.home-gallery .collection-list-wrapper-b { width:100%; max-width:none; }
.home-gallery .collection-list-b { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:24px 16px; align-items:start; width:100%; }
.home-gallery .cms-project-card { width:100%; min-width:0; margin:0; padding:0; }
.home-gallery .link-block-image-project-b { display:block; padding:12px; border:1px solid var(--border); border-radius:20px; background:rgba(128,128,128,.07); overflow:hidden; }
.home-gallery .project-hover-plane { width:100%; border-radius:12px; overflow:hidden; }
.home-gallery .block-image-project-b { aspect-ratio:1/1; border-radius:12px; }
.home-gallery .cms-project-caption { padding:18px 4px 8px; text-align:left; }
.home-gallery .heading-project-b { font-size:18px; line-height:1.3; margin:0 0 5px; }
.home-gallery .project-info { font-size:14px; line-height:1.4; }
.home-showcase { position:relative; width:100%; margin-bottom:20px; border:1px solid var(--border); border-radius:20px; overflow:hidden; background:#edf0f2; }
.home-showcase-slides { position:relative; height:auto; aspect-ratio:16/9; }
.home-showcase-slide { position:absolute; inset:0; visibility:hidden; pointer-events:none; }
.home-showcase-slide.is-active { visibility:visible; pointer-events:auto; }
/* The incoming slide is clipped by the wave; both videos stay in the native compositor. */
.home-showcase[data-transition] .home-showcase-slide.is-leaving { visibility:visible; pointer-events:none; }
.home-showcase-slide img { display:block; width:100%; height:100%; object-fit:contain; background:transparent; }
@media(min-width:992px) and (max-height:760px) {
 .home-gallery .grid-hero-b .hero-sticky { padding-top:84px; }
 .home-gallery .portfolio-bio-copy { font-size:14px; line-height:1.4; }
 .home-gallery .portfolio-bio-copy p { margin-bottom:12px; }
 .home-gallery .home-clock { padding-top:16px; }
}
@media(max-width:991px) {
 .home-gallery .grid-hero-b { display:block; }
 .home-gallery .grid-hero-b .hero-sticky { padding:90px 24px 32px; }
 .home-gallery .portfolio-bio { max-width:650px; }
 .home-gallery .grid-hero-b .hero-b { padding:0 24px 60px; }
 .home-gallery .home-clock { flex-direction:row; align-items:center; gap:12px; }
 .home-showcase-slides { height:auto; aspect-ratio:16/9; }
}
@media(max-width:600px) {
 .home-gallery .collection-list-b { grid-template-columns:minmax(0,1fr); }
 .home-gallery .grid-hero-b .hero-b { padding-inline:16px; }
 .home-gallery .portfolio-bio .heading-hero { font-size:28px; }
}
@media(prefers-reduced-motion:reduce) {
 .home-showcase-slide.is-entering,.home-showcase-slide.is-leaving { animation:none; }
 .home-showcase-slide.is-leaving { visibility:hidden; }
}
.home-gallery .grid-hero-b .hero-sticky > .portfolio-bio { width:100%; max-width:360px; margin:0; }
.home-gallery .cms-project-caption { align-items:flex-start; }
.home-gallery .cms-project-caption .project-info { text-align:left; font-size:14px; }
.home-gallery .project-hover-plane > .block-image-project-b { height:100%; aspect-ratio:auto; }

/* Refined quiet surfaces and one aligned left edge. */
.home-gallery { --home-surface:#f7f7f7; }
html.home-gallery[data-theme="dark"] { --home-surface:#303030; }
.home-gallery .navbar { margin-left:28px; }
.home-gallery .brand { padding-inline:0; transform-origin:left center; }
.home-gallery .brand-name { font-family:var(--heading-font); font-weight:650; letter-spacing:-.045em; }
.home-gallery .portfolio-bio,.home-gallery .home-clock,.home-gallery .cms-project-caption { font-family:Arial,Helvetica,sans-serif; }
.home-gallery .portfolio-bio .portfolio-bio-copy {
  font-family:var(--main-font);
  font-weight:300;
}
.home-gallery .portfolio-bio .heading-hero { font-family:Arial,Helvetica,sans-serif; font-size:22px; font-weight:400; letter-spacing:-.025em; }
.home-gallery .home-clock time { font-family:Arial,Helvetica,sans-serif; font-weight:400; letter-spacing:-.035em; }
.home-gallery .link-block-image-project-b { border:0; background:var(--home-surface); }
.home-gallery .project-hover-plane { box-shadow:none; }
.home-gallery .home-showcase { border:0; background:var(--home-surface); }
.home-gallery .grid-hero-b { position:relative; z-index:1; }
.home-gallery[data-matrix-background="active"] .grid-hero-b,
.home-gallery[data-matrix-background="active"] .grid-hero-b .hero-sticky,
.home-gallery[data-matrix-background="active"] .grid-hero-b .hero-b { background:transparent; }
@media(max-width:991px) { .home-gallery .navbar { margin-left:24px; } }

@media(min-width:992px) {
 .home-gallery .grid-hero-b { height:100dvh; overflow-y:auto; overflow-x:hidden; grid-template-rows:auto; align-items:start; overscroll-behavior-y:none; }
 .home-gallery .grid-hero-b .hero-sticky { position:sticky; top:0; height:100dvh; }
 .home-gallery .grid-hero-b .hero-b { height:auto; overflow:visible; }
}

/* Source artwork uses square coordinates: keep it square, never stretch tiles. */
.home-gallery .cms-project-card .project-hover-plane { aspect-ratio:1; transform:none; transition:none; box-shadow:none; }
.home-gallery .cms-project-card .link-block-image-project-b:hover .project-hover-plane{ transform:none; box-shadow:none; }
.home-gallery .cms-project-card .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) .project-hover-plane { transform:none; box-shadow:none; }
.home-gallery .project-hover-plane .image-project-b { object-fit:contain; }
.home-gallery .home-showcase-slide { display:flex; justify-content:center; align-items:center; gap:5%; padding:6%; box-sizing:border-box; }
.home-showcase-slide--citi { background:radial-gradient(ellipse at 12% 8%,#edf7fc,transparent 62%),linear-gradient(135deg,#d8ebf5 8%,#c3dced 60%,#b1cfe7); }
.home-showcase-slide--paramount { background:radial-gradient(ellipse 85% 75% at 8% 5%,#d3eaee,transparent 72%),radial-gradient(ellipse 75% 70% at 100% 96%,#d9b290cc,transparent 72%),radial-gradient(ellipse 70% 85% at 94% 24%,#45668ccc,transparent 76%),linear-gradient(145deg,#a8cedd 5%,#82a9c3 48%,#90aaba); }
.home-showcase-slide--pilates { background:#f8a6cf url('/images/previews/springbom-pilates-preview-background.webp') center bottom/cover no-repeat; }
.home-gallery .home-showcase-slide img { width:auto; height:auto; max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 16px 32px -12px #172c3b40; }
.home-gallery .home-showcase-slide--citi img { height:100%; max-width:40%; width:auto; border-radius:8.2% / 3.8%; }
.home-gallery .home-showcase-slide--paramount img,.home-gallery .home-showcase-slide--pilates img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; }

/* One stationary rounded clip owns every slide, video and wave layer.
   Nested rounded overflow clips antialias independently in Safari. */
.home-gallery .home-showcase {
 box-sizing:border-box; padding:0; border-radius:0; background:transparent;
 overflow:hidden; isolation:isolate; clip-path:inset(0 round 20px);
 /* Composite the video and its backdrop before antialiasing the outer clip. */
 -webkit-mask-image:linear-gradient(#000,#000); mask-image:linear-gradient(#000,#000);
}
.home-gallery .home-showcase-slides { border-radius:0; overflow:visible; }
.home-gallery .cms-project-card { position:relative; }
/* Artwork and its frame move together; captions stay below on the page. */
.home-gallery .cms-project-card .link-block-image-project-b,
.home-gallery .cms-project-card .link-block-image-project-b:hover{
 position:relative; overflow:visible; background:transparent; padding:0; border:0;
 transform:none; box-shadow:none; transition:none;
}
.home-gallery .cms-project-card .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) {
 position:relative; overflow:visible; background:transparent; padding:0; border:0;
 transform:none; box-shadow:none; transition:none;
}
.home-gallery .home-project-visual {
 padding:12px; border-radius:20px; background:var(--home-surface);
 transform:scale(1); transform-origin:center; box-shadow:none;
 transition:transform 300ms cubic-bezier(.2,.7,.3,1);
}
.home-gallery .cms-project-caption { padding:18px 4px 20px; }
.home-gallery .cms-project-caption .project-info { line-height:1.5; }
/* Zoom the artwork inside its stationary rounded frame. */
.home-gallery .project-hover-plane > * {
 scale:1; transform-origin:center; transition:scale 500ms ease;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .home-gallery .link-block-image-project-b:hover .project-hover-plane > *{ scale:1.05; }
.home-gallery .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) .project-hover-plane > * { scale:1.05; }
}
@media(prefers-reduced-motion:reduce) {
 .home-gallery .home-project-visual,
 .home-gallery .project-hover-plane > * { transition:none; }
}
.home-gallery .home-showcase { box-shadow:none; }

/* Crop inside the flattened artwork’s blue antialias fringe. Match its native
   corner radius proportionally at every slide size, rather than a fixed 12px. */
.home-gallery .home-showcase-slide--paramount img { border-radius:2% / 3.57%; }
.home-gallery .project-hover-plane .bb-cover-atmosphere .image-project-b {
 clip-path:inset(26.08% 7.32% round 1.65%);
}
/* One page surface. The old opaque sidebar must not cover overflowing cards. */
.home-gallery body { background:var(--dark); }
.home-gallery .grid-hero-b .hero-sticky {
 background:transparent; z-index:0; isolation:auto; overflow:visible;
}
.home-gallery .grid-hero-b .hero-b { background:transparent; position:relative; z-index:1; }
.home-gallery .cms-project-card { z-index:0; }
.home-gallery .cms-project-card:hover,
.home-gallery .cms-project-card:focus-within:where(html:not([data-focus-input="pointer"]) *) { z-index:2; }

@media(max-width:767px) {
 .home-gallery .home-showcase { display:none; }
}

/* Reveal the complete first slide only after its images have decoded. */
.home-showcase { opacity:0; }
.home-showcase.is-ready { opacity:1; animation:project-feed-enter 800ms cubic-bezier(.22,1,.36,1) both; }
@media(prefers-reduced-motion:reduce) { .home-showcase.is-ready { animation:none; } }

/* Project artwork, using the same screens and compositions as the cases. */
.home-gallery .home-showcase-slide { padding:0; overflow:hidden; }
.showcase-scene { width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:3%; padding:5%; box-sizing:border-box; }
.home-gallery .home-showcase-slide .showcase-scene :is(img,video) { display:block; width:100%; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:0; box-shadow:none; }
.home-gallery .home-showcase-slide .showcase-scene--phones img { width:auto; height:100%; max-width:28%; border-radius:4.4% / 2.03%; box-shadow:0 14px 25px -16px #16272160; }
.home-showcase-slide--locator-mobile { background:#c1d4ce; }
.home-showcase-slide--locator-web {
 background:#e7e7e2 url('https://cdn.sanity.io/images/f2pxa8dn/production/a672a7796dd7b1892d53af5d5813ae935bf3e112-7680x4320.webp?rect=0,4319,7680,1&w=2000&auto=format') center / 100% 100% no-repeat;
}
.home-gallery .home-showcase-slide--locator-web .showcase-scene {
 background:linear-gradient(to bottom,#e7e7e2,transparent 50%);
}
.home-gallery .home-showcase-slide--locator-web .showcase-scene img {
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
}
.home-showcase-slide--posivibez { background:#f4cddd; }
.home-showcase-slide--speedster { background:#ccc; }
.home-gallery .home-showcase-slide--speedster .showcase-scene { padding:0; }
.home-gallery .home-showcase-slide.home-showcase-slide--speedster .showcase-scene--video video {
  width:100%; height:100%; object-fit:contain; border-radius:0;
}
.home-gallery .home-showcase-slide--citi .showcase-scene--phones img { border-radius:8.2% / 3.8%; }
.home-gallery .home-showcase-slide--locator-web .showcase-scene,
.home-gallery .home-showcase-slide--posivibez .showcase-scene { padding:0; }
.home-gallery .home-showcase-slide .showcase-scene--video video { width:auto; height:100%; border-radius:12px; }
.home-gallery .home-showcase-slide .showcase-scene--player img { width:auto; height:auto; border-radius:12px; }

/* Extend the actual video edges in sync with playback, without a separate colour seam. */
.home-showcase-slide--posivibez { background:linear-gradient(#f0bcd1,#eeb3ce); }
.home-gallery .home-showcase-slide--posivibez .showcase-scene { position:relative; }
.showcase-video-backdrop { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.home-gallery .home-showcase-slide--posivibez .showcase-scene video {
  position:relative; width:100%; height:100%; max-height:100%; object-fit:contain; border-radius:0;
}
.home-showcase-slide { text-decoration:none; cursor:pointer; border:0; }
.home-showcase-slide:focus-visible:where(html:not([data-focus-input="pointer"]) *) { outline:2px solid var(--heading); outline-offset:-5px; }

/* Let the Citi recording fill the slide width while retaining the whole phone. */
.home-showcase-slide--citi { background:linear-gradient(#edf3f9,#cde0ed); }
.home-gallery .home-showcase-slide--citi .showcase-scene { padding:0; }
.home-gallery .home-showcase-slide--citi .showcase-scene--video video {
  width:100%; height:100%; object-fit:contain; border-radius:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);
}

/* Transparent Swiftly web composition over the Swiftly sage palette. */
.home-showcase-slide--locator-collage {
  background:radial-gradient(ellipse at 12% 8%,#e5f0e9,transparent 62%),linear-gradient(135deg,#dce9e2 8%,#c1d4ce 65%,#9fbbb0);
}
.home-gallery .home-showcase-slide--locator-collage .showcase-scene { padding:0; }
.home-gallery .home-showcase-slide--locator-collage .showcase-scene img { height:100%; object-fit:cover; transform:scale(1.08); transform-origin:center; }

/* Shared bright accents for the logo and navigation. */
html.home-gallery {
  --accent-blue:#007aff; --accent-green:#009e16; --accent-orange:#ff9500;
  --accent-yellow:#eab500; --nav-about:#a832c5;
}
html.home-gallery[data-theme="dark"] {
  --accent-blue:#57a5ff; --accent-green:#43d65d; --accent-orange:#ffab36;
  --accent-yellow:#ffd329; --nav-about:#e18bf2;
}
.home-gallery .brand-name { color:var(--brand-base-color,var(--accent-orange)); transition:color 220ms ease; }
.home-gallery .brand.is-color-active .brand-name { color:var(--brand-hover-color); }
@media (prefers-reduced-motion:reduce) { .home-gallery .brand-name { transition:none; } }
.home-gallery .portfolio-contact-links > [data-open-about] { --nav-accent:var(--nav-about); }
.home-gallery .portfolio-contact-links > a,
.home-gallery .portfolio-viewer-about-links > a[href*="linkedin.com"] { --nav-accent:var(--accent-blue); }
.home-gallery .portfolio-contact-links > [data-open-contact] { --nav-accent:var(--accent-green); }
.home-gallery .portfolio-viewer-about-links > a[href*="/documents/"] { --nav-accent:var(--accent-green); }
.home-gallery :is(.portfolio-contact-links,.portfolio-viewer-about-links) > .portfolio-contact-link{ color:var(--nav-accent); }
.home-gallery :is(.portfolio-contact-links,.portfolio-viewer-about-links) > .portfolio-contact-link:is(:hover,:focus-visible:where(html:not([data-focus-input="pointer"]) *),:active) { color:var(--nav-accent); }

/* The Los Angeles film fills the slide with its own scenery, without stretched edges. */
/* Bleed the full-frame film by one CSS pixel beneath the outer clip.
   Fractional layout sizes must never expose the poster or slide background. */
.home-gallery .home-showcase-slide--posivibez .showcase-scene video {
 object-fit:cover; flex-shrink:0;
 width:calc(100% + 2px); height:calc(100% + 2px); max-width:none; max-height:none;
}

/* Neutral surfaces matched to the Narin Kim reference. */
.home-gallery { --home-surface:#f7f7f7; --home-surface-hover:#ebebeb; }
html.home-gallery[data-theme="dark"] {
 --dark:#121212; --home-surface:#1c1c1c; --home-surface-hover:#2b2b2b;
}
.home-gallery .home-project-visual { transition:background-color 400ms ease; }
@media (hover:hover) and (pointer:fine) {
 .home-gallery .link-block-image-project-b:hover .home-project-visual {
  background-color:var(--home-surface-hover);
 }
}
.home-gallery .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) .home-project-visual {
 background-color:var(--home-surface-hover);
}
@media (prefers-reduced-motion:reduce) {
 .home-gallery .home-project-visual { transition:none; }
}

/* Match project artwork zoom without changing slideshow timing or slide motion. */
.home-gallery .home-showcase .showcase-scene {
 scale:1; transform-origin:center; transition:scale 500ms ease;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .home-gallery .home-showcase:hover .showcase-scene,
 .home-gallery .home-showcase:focus-within:where(html:not([data-focus-input="pointer"]) *) .showcase-scene { scale:1.05; }
}
@media (prefers-reduced-motion:reduce) {
 .home-gallery .home-showcase .showcase-scene { transition:none; }
}

/* One continuous card surface, including its caption, as in the reference. */
.home-gallery .cms-project-card .link-block-image-project-b,
.home-gallery .cms-project-card .link-block-image-project-b:hover{
 padding:12px; border-radius:16px; background:var(--home-surface);
 transition:background-color 400ms ease;
}
.home-gallery .cms-project-card .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) {
 padding:12px; border-radius:16px; background:var(--home-surface);
 transition:background-color 400ms ease;
}
.home-gallery .cms-project-card .home-project-visual,
.home-gallery .cms-project-card .link-block-image-project-b:hover .home-project-visual{
 padding:0; border-radius:12px; background:transparent;
}
.home-gallery .cms-project-card .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) .home-project-visual {
 padding:0; border-radius:12px; background:transparent;
}
.home-gallery .cms-project-card .cms-project-caption { padding:12px 0 0; }
@media (hover:hover) and (pointer:fine) {
 .home-gallery .cms-project-card .link-block-image-project-b:hover { background:var(--home-surface-hover); }
}
.home-gallery .cms-project-card .link-block-image-project-b:focus-visible:where(html:not([data-focus-input="pointer"]) *) { background:var(--home-surface-hover); }
@media (prefers-reduced-motion:reduce) {
 .home-gallery .cms-project-card .link-block-image-project-b { transition:none; }
}

/* Equal-height cards within each row; captions never create a masonry layout. */
.home-gallery .collection-list-b { align-items:stretch; }
.home-gallery .cms-project-card { display:flex; flex-direction:column; }
.home-gallery .cms-project-card .link-block-image-project-b {
 display:flex; flex-direction:column; flex:1; box-sizing:border-box; width:100%;
}
.home-gallery .cms-project-card .home-project-visual { flex-shrink:0; }
.home-gallery .cms-project-card .cms-project-caption { flex:1; }

/* Match the taller admin preview to the surrounding player and phone compositions. */
.home-gallery .swiftly-admin-interface-cover .interface-cover-screen { width:76%; }
html.work-grid .home-project-visual .swiftly-admin-interface-cover .interface-cover-screen { scale:1; }
.home-gallery .project-hover-plane .pilates-video-cover { padding:8%; }
/* Trim the flattened player's pale edge and keep its shadow on the same contour. */
.home-gallery .project-hover-plane .bb-cover-atmosphere .image-project-b {
 clip-path:inset(26.35% 7.5% 26.5% round 1.65%);
}
.home-gallery .bb-cover-atmosphere::before {
 inset:26.35% 7.5% 26.5%; border-radius:1.65%;
}

/* One desktop work column: cards fill both tracks as the screen grows.
   Override the old centered 618px card cap; keep all work gutters fixed. */
@media (min-width: 992px) {
 .home-gallery .hero-b { --home-work-gap:16px; }
 .home-gallery .collection-list-b { gap:var(--home-work-gap); justify-items:stretch; }
 .home-gallery .collection-list-b > .cms-project-card { width:100%; max-width:none; }
 .home-gallery .home-showcase { margin-bottom:var(--home-work-gap); }
}

/* Shared palette accents for the About story and website credits. */
.home-gallery .portfolio-viewer-about {
  --credit-orange:#b85c00;
  --credit-yellow:#896600;
  --credit-green:#008314;
}
.home-gallery[data-theme="dark"] .portfolio-viewer-about {
  --credit-orange:var(--accent-orange);
  --credit-yellow:var(--accent-yellow);
  --credit-green:var(--accent-green);
}
/* Give each story reference a stable accent in both color themes. */
.home-gallery .portfolio-viewer-about a[href="https://charlierose.com/episodes/17625"] { --portfolio-link:var(--nav-about); }
.home-gallery .portfolio-viewer-about a.portfolio-inline-link {
  background-image:none; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; transition:color 200ms ease;
}
@media(prefers-reduced-motion:reduce) {
  .home-gallery .portfolio-viewer-about a.portfolio-inline-link { transition:none; }
}
.home-gallery .portfolio-viewer-about a[href="https://melody.su/en/catalog/"] { --portfolio-link:var(--credit-orange); }
.home-gallery .portfolio-viewer-about a[href="https://voronoi.co/"] { --portfolio-link:var(--accent-blue); }
.home-gallery .portfolio-viewer-about a[href="https://ericberne.com/games-people-play/"] { --portfolio-link:var(--credit-green); }
.home-gallery .portfolio-viewer-about a[href="https://store.doverpublications.com/products/9780486424996"] { --portfolio-link:var(--nav-about); }
.home-gallery .portfolio-viewer-about a[href="https://www.jcf.org/product-page/the-hero-with-a-thousand-faces-ebook"] { --portfolio-link:var(--credit-yellow); }
.home-gallery .portfolio-about-colophon a[href="https://www.figma.com/"] { --portfolio-link:var(--nav-about); }
.home-gallery .portfolio-about-colophon a[href="https://openai.com/codex/"] { --portfolio-link:var(--credit-green); }
.home-gallery .portfolio-about-colophon a[href="https://www.sanity.io/"] { --portfolio-link:var(--credit-orange); }
.home-gallery .portfolio-about-colophon a[href="https://vercel.com/"] { --portfolio-link:var(--accent-blue); }
.home-gallery .portfolio-about-colophon a[href="https://github.com/"] { --portfolio-link:var(--credit-yellow); }

/* Quote and attribution use the same upright body typography as the story. */
.home-gallery .portfolio-viewer-about .portfolio-about-quote :is(blockquote, blockquote p, figcaption) {
  font-family:var(--main-font); font-size:var(--type-body); line-height:var(--type-body-leading);
  font-weight:400; font-style:normal; letter-spacing:normal;
}

/* Education follows the shared About grid: institution, program and dates. */
.portfolio-viewer-about .portfolio-about-education-list {
  display:grid; gap:16px; min-width:0; padding:0; margin:0; list-style:none;
}
.portfolio-viewer-about .portfolio-about-education-list > li {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 5.8em;
  align-items:start; gap:20px; min-width:0; padding:0; margin:0;
}
.portfolio-viewer-about .portfolio-about-education-list :is(h4,p) {
  margin:0; min-width:0; font-family:var(--main-font); font-size:var(--type-body);
  line-height:var(--type-body-leading); letter-spacing:normal; font-weight:400;
  color:var(--heading);
}
.portfolio-viewer-about .portfolio-about-education-dates {
  text-align:right; white-space:nowrap;
}
@media(max-width:991px) {
  .portfolio-viewer-about .portfolio-about-education-list { gap:24px; }
  .portfolio-viewer-about .portfolio-about-education-list > li {
    grid-template-columns:minmax(0,1fr) auto; gap:4px 16px;
  }
  .portfolio-viewer-about .portfolio-about-education-program { grid-column:1 / -1; grid-row:2; }
  .portfolio-viewer-about .portfolio-about-education-dates { grid-column:2; grid-row:1; }
}
@media(max-width:767px) {
  .portfolio-viewer-about > .portfolio-about-education { grid-template-columns:minmax(0,1fr); }
  .portfolio-viewer-about .portfolio-about-education-list > li { grid-template-columns:minmax(0,1fr); }
  .portfolio-viewer-about .portfolio-about-education-program,
  .portfolio-viewer-about .portfolio-about-education-dates { grid-column:auto; grid-row:auto; }
  .portfolio-viewer-about .portfolio-about-education-dates { text-align:left; }
}

/* One introduction replaces the detached name in the header. */
.home-gallery .grid-hero-b .hero-sticky { padding-top:28px; }
.home-gallery .portfolio-bio .intro-greeting {
  margin:0 0 12px; font-family:var(--main-font); font-size:32px;
  font-weight:650; line-height:1.15; letter-spacing:-.045em; color:var(--heading);
}
.home-gallery .intro-greeting .brand { display:inline-flex; width:max-content; max-width:100%; vertical-align:top; padding:0; min-height:0; }
.home-gallery .intro-greeting .brand-name { font-size:inherit; line-height:inherit; white-space:normal; }
@media(max-width:767px) {
  .home-gallery .hero-sticky .portfolio-bio .heading-hero { font-size:24px; }
}

/* Two structural intervals; prose uses its own one-line paragraph spacing. */
.home-gallery .hero-sticky { --intro-gap:24px; --intro-section-gap:48px; }
.home-gallery .hero-sticky .portfolio-bio {
  display:flex; flex-direction:column; align-items:stretch; gap:0;
}
.home-gallery .hero-sticky .portfolio-bio-copy {
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
}
.home-gallery .hero-sticky .portfolio-bio > .intro-greeting { margin:0 0 var(--intro-section-gap); }
.home-gallery .hero-sticky .portfolio-bio > .heading-hero { margin:0 0 var(--intro-gap); }
.home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy > p { margin:0; }
.home-gallery .grid-hero-b .hero-sticky > .portfolio-contact-links { margin:var(--intro-gap) 0 0; }

/* Inline navigation keeps the introduction in one reading flow. */
/* Keep the full homepage introduction equally airy, including inline icons. */
.home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy { line-height:calc(1.5em + 2px); }
@media(min-width:992px) and (max-height:760px) {
  .home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy { line-height:calc(1.4em + 2px); }
}
@media(max-width:767px) {
  .home-gallery .hero-sticky .portfolio-bio .portfolio-bio-copy { line-height:calc(var(--type-body-leading) + 2px); }
}

.home-gallery .intro-company-line { word-spacing:.06em; }
@font-face {
  font-family:IntroArrow; src:url('/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; unicode-range:U+2197;
}
.home-gallery .portfolio-bio-copy .intro-inline-link {
  color:var(--intro-link-color,var(--heading)); font:inherit; font-weight:500;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-skip-ink:auto; border:0; border-radius:0; padding:0;
}
.home-gallery .portfolio-bio-copy .intro-inline-link:focus-visible:where(html:not([data-focus-input="pointer"]) *) {
  outline:2px solid currentColor; outline-offset:4px;
}
.home-gallery .intro-company-link,.home-gallery .intro-contact-link,.home-gallery .intro-contact-phrase { white-space:nowrap; }
.home-gallery .intro-link-unit,.home-gallery .intro-contact-phrase { display:inline-block; white-space:nowrap; }
.home-gallery .intro-link-arrow {
  display:inline-block; width:.65em; font-family:IntroArrow,monospace;
  font-size:1em; font-weight:600; line-height:1;
}
.home-gallery .intro-contact-icon {
  display:block; width:20px; height:20px; flex:none; object-fit:contain;
}
.home-gallery .portfolio-bio-copy .intro-icon-link {
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  position:relative; width:20px; height:20px; min-width:20px; min-height:20px; text-decoration:none;
}
@media(max-width:767px) {
  .home-gallery .portfolio-bio-copy .intro-icon-link {
    width:26px; height:26px; vertical-align:middle; touch-action:manipulation;
  }
  .home-gallery .intro-contact-icon { width:26px; height:26px; }
  /* Enlarge the touch area without adding blank space to the text line. */
  .home-gallery .intro-icon-link::before {
    content:''; position:absolute; width:44px; height:44px;
    top:50%; left:50%; transform:translate(-50%,-50%);
  }
}
/* One continuous underline for the label and arrow at every viewport size. */
.home-gallery .portfolio-bio-copy :is(.intro-company-link,.intro-spotify-link) {
  position:relative; text-decoration:none;
}
.home-gallery .portfolio-bio-copy :is(.intro-company-link,.intro-spotify-link)::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:currentColor; pointer-events:none;
}
.home-gallery .intro-about-link { --intro-link-color:var(--nav-about); }
.home-gallery .intro-linkedin-link { --intro-link-color:var(--accent-blue); }
.home-gallery .intro-email-link { --intro-link-color:var(--accent-blue); }

/* Focus attention across the full introduction, without moving or resizing its links. */
@media(min-width:768px) and (hover:hover) and (pointer:fine) {
  .home-gallery .portfolio-bio-copy { --intro-muted:#767676; }
  .home-gallery[data-theme="dark"] .portfolio-bio-copy { --intro-muted:#999; }
  .home-gallery .portfolio-bio-copy > p,
  .home-gallery .portfolio-bio-copy .intro-inline-link {
    transition:color 200ms ease;
  }
  .home-gallery .portfolio-bio-copy .intro-contact-icon {
    transition:filter 200ms ease, opacity 200ms ease;
  }
  .home-gallery .portfolio-bio-copy:has(.intro-inline-link:hover) > p,
  .home-gallery .portfolio-bio-copy:has(.intro-inline-link:hover) .intro-inline-link:not(:hover) {
    color:var(--intro-muted);
  }
  .home-gallery .portfolio-bio-copy:has(.intro-inline-link:hover) .intro-icon-link:not(:hover) .intro-contact-icon {
    filter:grayscale(1); opacity:.65;
  }
}
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce) {
  .home-gallery .portfolio-bio-copy > p,
  .home-gallery .portfolio-bio-copy .intro-inline-link,
  .home-gallery .portfolio-bio-copy .intro-contact-icon { transition:none; }
}

.home-gallery .intro-greeting [data-local-greeting],
.home-gallery .intro-greeting .intro-name-line { display:block; white-space:nowrap; }
@media(max-width:359px) {
  .home-gallery .portfolio-bio .intro-greeting { font-size:28px; }
}

/* The greeting aligns with the slideshow; identity and role form two adjacent lines. */
@media(min-width:992px) {
  .home-gallery .grid-hero-b .hero-sticky { padding-top:20px; }
}
.home-gallery .hero-sticky .portfolio-bio > .intro-identity {
  margin:0; font-family:var(--main-font); font-size:22px; font-weight:600;
  line-height:1.3; letter-spacing:-.025em; color:var(--heading);
}
@media(max-width:767px) {
  .home-gallery .hero-sticky .portfolio-bio > .intro-identity { font-size:24px; }
}