/* Foreground phone, quieter editorial rhythm. */
.project-grid .project-card .myko-depth-phone,
.project-grid .project-card:hover .myko-depth-phone {
  left:81%;top:20%;height:108%;z-index:2;
  box-shadow:0 10px 22px #342e2518;
}
.myko-room-scene { left:0%;bottom:2%;width:67%;height:65%; }
.project-grid .smart-grid-card .summary-copy > p:not(.eyebrow) { max-width:78%; }
.project-grid .smart-grid-card .summary-footer { width:66%;right:-1%;bottom:-5%; }
.earlier-work { padding-top:clamp(4rem,7vw,7rem);padding-bottom:clamp(2.5rem,4vw,4rem); }
.earlier-intro { margin-bottom:clamp(2.5rem,4vw,4rem); }
.earlier-grid article { min-height:8rem; }
.about { padding-top:clamp(3rem,5vw,5rem);padding-bottom:clamp(4rem,7vw,7rem); }
.footer a { color:inherit;font-weight:650;text-underline-offset:.25em; }
.footer a:hover { text-decoration-thickness:2px; }
@media(max-width:760px) {
 .project-grid .project-card .myko-depth-phone,
 .project-grid .project-card:hover .myko-depth-phone { left:81%;top:23%;height:105%; }
 .myko-room-scene { left:-5%;bottom:4%;width:69%;height:64%; }
 .project-grid .smart-grid-card .summary-copy > p:not(.eyebrow) { max-width:80%; }
 .earlier-grid article { min-height:10rem; }
}

/* Keep project titles anchored while the artwork animates. */
.project-grid .project-card h3,.project-grid .project-summary h3,
.project-grid .project-card:hover h3,.project-grid .project-summary:hover h3,
.project-grid .project-card:focus-visible h3,.project-grid .project-summary:focus-visible h3 {
 transform:none;transition:none;
}

/* Use one continuous, clearly visible hover surface beneath the artwork. */
@media (hover:hover) {
 .project-grid > a:hover { background-color:#dfd5c5; }
 .project-grid .project-card:hover .myko-interface { background-color:#dfd5c5;box-shadow:none; }
 .project-grid .project-card:hover .project-copy { background-color:transparent; }
}
.project-grid > a:focus-visible { background-color:#dfd5c5;outline:3px solid #7540b0;outline-offset:4px; }
.project-grid .project-card:focus-visible .myko-interface { background-color:#dfd5c5;box-shadow:none; }
.project-grid .project-card:focus-visible .project-copy { background-color:transparent; }

/* The homepage opening uses the yellow shown in the approved direction. */
.portfolio-home > .site-header,.portfolio-home .hero { background:var(--yellow); }

/* Keep the portrait and its animated contours together below the mobile copy. */
.hero-artwork { position:absolute;inset:0;pointer-events:none; }
@media (max-width:760px) {
 .portfolio-home .hero { display:flex;flex-direction:column;min-height:calc(100svh - var(--home-header-height,5.45rem));padding-top:2rem;padding-bottom:0; }
 .portfolio-home .hero-name { font-size:clamp(1.75rem,9.5vw,3rem); }
 .portfolio-home .hero-artwork { position:relative;inset:auto;width:min(calc(100% + clamp(1.25rem,8vw,9rem)),30rem);min-height:clamp(15rem,42svh,28rem);flex:1;align-self:flex-end;margin-top:1rem;margin-right:calc(-1 * clamp(1.25rem,8vw,9rem)); }
 .portfolio-home .hero-foreground { object-position:100% center; }
 .portfolio-home .hero-contour,
 .portfolio-home .hero-cutout-base { -webkit-mask-position:100% center;mask-position:100% center; }

 .portfolio-home .project-grid > a { min-height:0; }
 .portfolio-home .project-grid .project-copy { padding:1.5rem 1.5rem 0;background:transparent; }
 .portfolio-home .project-grid .project-summary { min-height:0;padding:1.5rem 1.5rem 0; }
 .portfolio-home .project-grid .summary-copy > p:not(.eyebrow) { max-width:100%; }
 .portfolio-home .project-grid .project-card .myko-depth-phone { display:none; }
 .portfolio-home .project-grid .project-card .myko-interface { position:relative;inset:auto;flex:none;min-height:0;height:clamp(12rem,55vw,17rem); }
 .portfolio-home .project-grid .myko-orbit { min-height:0;height:100%; }
 .portfolio-home .project-grid .myko-room-scene { left:0;bottom:0;width:100%;height:100%; }
 .portfolio-home .project-grid .smart-grid-card .summary-footer,
 .portfolio-home .project-grid .migration-visual { position:relative;inset:auto;align-self:flex-end;width:min(100%,25rem);margin:0; }
 .portfolio-home .project-grid .migration-visual { width:min(90%,24rem); }
 .portfolio-home .project-grid > a.is-in-view * { animation-play-state:running !important; }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
 .portfolio-home .project-grid .artwork-pending { opacity:0;translate:0 1.5rem; }
 .portfolio-home .project-grid .artwork-revealed { opacity:1;translate:0 0;transition:opacity .65s ease,translate .65s cubic-bezier(.2,.8,.2,1); }
}

/* Tablet portrait needs its own composition between phone and desktop layouts. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait) {
 .portfolio-home .hero { display:flex;flex-direction:column;min-height:calc(100svh - var(--home-header-height,5.45rem));padding-top:2rem;padding-bottom:0; }
 .portfolio-home .hero-artwork { position:relative;inset:auto;width:min(calc(100% + clamp(1.25rem,8vw,9rem)),48rem);min-height:clamp(24rem,48svh,40rem);flex:1;align-self:flex-end;margin-top:1rem;margin-right:calc(-1 * clamp(1.25rem,8vw,9rem)); }

 .portfolio-home .hero-foreground { object-position:100% center; }
 .portfolio-home .hero-contour,
 .portfolio-home .hero-cutout-base { -webkit-mask-position:100% center;mask-position:100% center; }
 .portfolio-home .project-grid { grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;min-height:0; }
 .portfolio-home .project-grid .project-card { grid-column:1 / -1;grid-row:auto;min-height:30rem; }
 .portfolio-home .project-grid .project-copy { width:45%;padding:2rem; }
 .portfolio-home .project-grid .project-copy h3 { font-size:clamp(3rem,6vw,4.5rem); }
 .portfolio-home .project-grid .project-copy p { max-width:24ch; }
 .portfolio-home .project-grid .project-card .myko-depth-phone,
 .portfolio-home .project-grid .project-card:hover .myko-depth-phone { left:78%;top:13%;height:94%; }
 .portfolio-home .project-grid .myko-room-scene { left:0;bottom:1%;width:63%;height:69%; }
 .portfolio-home .project-grid .project-summary { min-height:25rem;padding:1.75rem 1.75rem 0;overflow:hidden; }
 .portfolio-home .project-grid .summary-copy > p:not(.eyebrow) { max-width:100%;font-size:1rem; }
 .portfolio-home .project-grid .smart-grid-card .summary-footer { width:85%;right:-1%;bottom:-3%; }
 .portfolio-home .project-grid .migration-visual { width:90%;right:-5%;bottom:-1rem; }
}