/* Homepage composition. Shared tokens, shell and controls live in foundation.css. */
/* The canvas and every raised tile stay below the reading layer. */
.home-intro{--hero-columns:6;--hero-column-gap:1.5rem;position:relative;isolation:isolate;min-height:50rem;height:clamp(50rem,88svh,60rem);margin-inline:calc(-1 * var(--page-gutter));margin-bottom:0}
.hero-canvas{position:absolute;inset:0;z-index:0}
/* Paired vertical guides describe six web columns, separated by real gutters. */
.hero-guides{position:absolute;inset:0 var(--page-gutter);display:grid;grid-template-columns:repeat(var(--hero-columns),minmax(0,1fr));gap:var(--hero-column-gap);pointer-events:none}
.hero-guides>span{border-inline:1px solid #cedbd5}
.hero-content{position:relative;z-index:2;width:min(36rem,calc(100% - 2 * var(--page-gutter)));margin-left:var(--page-gutter);padding-top:6.5rem;padding-bottom:1.5rem;pointer-events:none}
.hero-content h1,.hero-content p,.hero-content a{pointer-events:auto}
.hero-availability{position:absolute;top:3.5rem;display:inline-flex;align-items:center;gap:.375rem;min-height:1.75rem;padding:.25rem .5rem;border:1px solid var(--color-rule);border-radius:999px;background:var(--color-canvas);color:var(--color-ink);font-size:.75rem;font-weight:550;line-height:1.4;transition:background var(--duration),border-color var(--duration),transform var(--duration) var(--ease)}
/* A compact visible capsule retains a 44px-high pointer target. */
.hero-availability::before{content:"";position:absolute;inset:-.5rem 0}
.hero-availability-light{width:.375rem;height:.375rem;flex:none;border-radius:50%;background:#24824a}
.hero-availability-email{width:.875rem;height:.875rem;color:var(--color-accent);opacity:0;transform:translateX(-4px);transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}
.hero-availability:focus-visible .hero-availability-email{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){
  .hero-availability:hover{background:var(--color-accent-soft);border-color:var(--color-accent);transform:translateX(4px)}
  .hero-availability:hover .hero-availability-email{opacity:1;transform:none}
  .hero-availability:active{transform:translateX(4px) scale(.97)}
}
@media(hover:none),(pointer:coarse){.hero-availability-email{opacity:1;transform:none}}
.is-keyboard .hero-availability,.is-keyboard .hero-availability-email{transform:none!important}
@media(prefers-reduced-motion:reduce){.hero-availability,.hero-availability-email{transform:none!important}}
@media(max-width:63.9375em){.hero-availability{position:relative;top:auto;margin-bottom:1rem}}
.hero-identity{display:flex;align-items:center;gap:.75rem;min-height:3rem;margin-bottom:1.5rem}
.hero-identity-copy{min-width:0}
.hero-identity-copy>p{font-size:var(--text-body);font-weight:550;letter-spacing:-.01em;white-space:nowrap}
.hero-identity-copy .hero-location{font-size:var(--text-small);font-weight:400;color:var(--color-muted);letter-spacing:0}
.hero-typing-status{font-weight:400;color:var(--color-muted)}
.hero-status-verb{display:inline-block}
.hero-typing-dots{display:inline-flex;align-items:center;gap:3px;margin-left:3px}
.hero-typing-dots i{width:3px;height:3px;border-radius:50%;background:currentColor;animation:chat-dot 900ms ease-in-out infinite}
.home-intro[data-typing-state="suspended"] .hero-typing-dots i{animation-play-state:paused}
.home-intro:not(.is-typing) .hero-typing-dots i{animation:none;opacity:.45}
.hero-typing-dots i:nth-child(2){animation-delay:120ms}.hero-typing-dots i:nth-child(3){animation-delay:240ms}
@keyframes chat-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-2px);opacity:1}}
.hero-avatar{display:block;width:2.5rem;height:2.5rem;flex:none;overflow:hidden;border-radius:50%;background:var(--color-surface)}
.hero-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:scale(1.4);transform-origin:50% 25%}
.home-intro h1{font-size:var(--text-display);line-height:1.05;font-weight:500;letter-spacing:-.04em}
.hero-headline{display:grid;text-wrap:wrap;margin-left:-3px}
.hero-headline>.hero-line,.hero-line-measure{grid-area:1/1;align-self:start;color:var(--color-ink)}
.hero-line-measure{visibility:hidden;pointer-events:none}
.hero-line-measure>span{display:block}
.hero-line .hero-word{display:inline-block;color:inherit}
.hero-line .hero-word--accent{color:var(--color-accent-hover)}
.hero-line::after{content:"";display:inline-block;width:2px;height:.85em;margin-left:3px;vertical-align:-.04em;background:var(--color-accent);opacity:0}
.is-typing .hero-line::after{opacity:1}
.hero-tile{--tile-width:17rem;--tile-height:12rem;position:absolute;left:calc((100% - var(--tile-width)) * var(--home-x));top:calc((100% - var(--tile-height)) * var(--home-y));width:var(--tile-width);height:var(--tile-height);max-width:calc(100% - 2rem);padding:0;border:0;background:none;color:var(--color-muted);text-align:left;user-select:none;-webkit-user-select:none}
.hero-tile:disabled{opacity:1;cursor:default}
.hero-canvas.is-interactive .hero-tile{cursor:grab;touch-action:none}
.hero-tile-face{position:relative;display:block;height:100%;isolation:isolate}
.hero-tile-shadow{position:absolute;inset:auto 3% -.75rem;height:2.5rem;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(20,38,33,.28),rgba(20,38,33,0) 72%);opacity:0;transform:translate3d(0,8px,0) scale(.98);transition:opacity var(--duration),transform 240ms var(--ease)}
.hero-tile-label{display:block;height:1.125rem;font-size:.75rem;letter-spacing:.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform var(--duration-press) var(--ease)}
.hero-tile-picture{position:relative;display:block;height:calc(100% - 1.125rem);border:1px solid var(--color-rule);background:var(--color-surface);transform-origin:center;transition:transform var(--duration-press) var(--ease)}
.hero-tile.is-releasing .hero-tile-picture{transition-duration:240ms}
.hero-tile.is-releasing .hero-tile-label{transition-duration:240ms}
.hero-drag-tip{position:absolute;right:.75rem;bottom:.75rem;z-index:2;padding:.5rem .75rem;background:var(--color-ink);color:var(--color-canvas);font-size:.75rem;line-height:1.2;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(3px) scale(.97);transition:opacity 125ms var(--ease),transform 125ms var(--ease),visibility 0s 125ms}
.hero-canvas.is-interactive .hero-tile:focus-visible .hero-drag-tip{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hero-tile.is-held .hero-drag-tip,.hero-tile.is-tip-dismissed .hero-drag-tip{opacity:0!important;visibility:hidden!important;transition-delay:0s!important}
.hero-tile-picture>img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-tile--dashboard .hero-tile-picture>img{object-fit:cover}
.hero-handles{position:absolute;inset:-4px;opacity:0;pointer-events:none;transition:opacity var(--duration)}
.hero-handles i{position:absolute;width:8px;height:8px;border:2px solid var(--color-accent);background:var(--color-canvas)}
.hero-handles i:nth-child(1){top:0;left:0}.hero-handles i:nth-child(2){top:0;right:0}.hero-handles i:nth-child(3){bottom:0;left:0}.hero-handles i:nth-child(4){bottom:0;right:0}
.hero-tile[aria-pressed="true"] .hero-tile-picture,.hero-tile:focus-visible .hero-tile-picture,.hero-tile.is-held .hero-tile-picture{border-color:var(--color-accent);outline:2px solid var(--color-accent);outline-offset:-1px}
.hero-tile[aria-pressed="true"] .hero-tile-label{color:var(--color-accent-hover)}
.hero-tile[aria-pressed="true"] .hero-handles,.hero-tile:focus-visible .hero-handles,.hero-tile.is-held .hero-handles{opacity:1}
.hero-tile.is-held{cursor:grabbing!important}
.hero-tile:not(.hero-tile--yoshi).is-held .hero-tile-picture{transform:perspective(700px) translateY(-12px) rotateX(5deg) rotateZ(-1deg) scale(1.055)}
.hero-tile.is-held .hero-tile-label{transform:translateY(-22px)}
.hero-tile.is-held .hero-tile-shadow{opacity:1;transform:translate3d(0,18px,0) scale(1.025)}
/* The picture's teal frame is the focus indicator; don't also outline its label. */
.hero-tile:focus-visible{outline:none}
.hero-tile--dashboard{--home-guide:1;--home-x:.05;--home-y:.84;--tile-width:22rem;--tile-height:15rem}
.hero-tile--airport{--home-x:.97;--home-y:.12;--tile-width:15rem;--tile-height:calc(var(--tile-width) * 800 / 1200 + 1.125rem)}
.hero-new{color:var(--color-accent);font-weight:650;margin-right:.5rem}
.hero-tile--motion{--home-x:.97;--home-y:.98;--tile-width:40.5rem;--tile-height:27rem}
.hero-tile--chain{--home-guide:5;--home-x:.65;--home-y:.30;--tile-width:14rem;--tile-height:calc(var(--tile-width) * 930 / 872 + 1.125rem)}
.hero-tile--yoshi{--home-x:.28;--home-y:.55;--tile-width:7rem;--tile-height:var(--tile-width);--duration-yoshi-spin:620ms;z-index:1}
.hero-tile--yoshi .hero-tile-picture{height:100%;padding:.375rem;background:transparent;border-color:transparent;transition:none}
.hero-tile--yoshi .hero-sticker-art{object-fit:contain}
.hero-tile--yoshi .hero-tile-shadow{display:none}
.hero-tile--yoshi .hero-tile-label{height:1px}
.hero-tile--yoshi .hero-drag-tip{right:0;bottom:-2.5rem;white-space:nowrap}
.hero-yoshi-bubble{position:absolute;right:0;bottom:calc(100% + .5rem);z-index:3;padding:.5rem .875rem;border-radius:.75rem;background:var(--color-accent);color:var(--color-canvas);font-size:.875rem;font-weight:550;line-height:1.2;pointer-events:none;opacity:0;transform:translateY(6px) scale(.9);transform-origin:75% 100%;transition:opacity var(--duration-press) var(--ease),transform var(--duration) var(--ease)}
.hero-yoshi-bubble::after{content:"";position:absolute;right:1.25rem;top:calc(100% - 1px);border:6px solid transparent;border-top-color:var(--color-accent);border-bottom:0}
.hero-tile--yoshi.is-woofing .hero-yoshi-bubble{opacity:1;transform:none}
.hero-tile--yoshi.is-woofing .hero-drag-tip{opacity:0!important;visibility:hidden!important}
.is-keyboard .hero-yoshi-bubble{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.hero-yoshi-bubble{transform:none;transition:none}}
.hero-tile--dashboard,.hero-tile--chain{left:calc(var(--page-gutter) + (100% - 2 * var(--page-gutter) + var(--hero-column-gap)) * (var(--home-guide) - 1) / var(--hero-columns))}
@media(hover:hover) and (pointer:fine){
  .hero-canvas.is-interactive .hero-tile:hover .hero-tile-picture{border-color:var(--color-accent);outline:2px solid var(--color-accent);outline-offset:-1px}
  .hero-canvas.is-interactive .hero-tile:hover .hero-handles{opacity:1}
  .hero-canvas.is-interactive .hero-tile:not(.hero-tile--yoshi):not(.is-held):hover .hero-tile-picture{transform:perspective(700px) translateY(-5px) scale(1.03)}
  .hero-canvas.is-interactive .hero-tile:not(.is-held):hover .hero-tile-label{transform:translateY(-12px)}
  .hero-canvas.is-interactive .hero-tile:hover .hero-tile-shadow{opacity:.65}
  .hero-canvas.is-interactive .hero-tile:hover .hero-drag-tip{opacity:1;visibility:visible;transform:none;transition-delay:250ms}
}
.is-keyboard .hero-tile .hero-tile-picture{transform:none!important}
.is-keyboard .hero-tile .hero-tile-label{transform:none!important}
.is-keyboard .hero-tile .hero-tile-shadow{transform:none!important;opacity:0!important}
@media(prefers-reduced-motion:reduce){.hero-tile .hero-tile-picture,.hero-tile .hero-tile-label{transform:none!important}.hero-tile .hero-tile-shadow{transform:none!important;opacity:0!important}.hero-line::after{display:none}}
@media(prefers-contrast:more){.hero-guides{display:none}}
@media(max-width:74.9375em){
  .hero-content{width:min(32rem,calc(100% - 2 * var(--page-gutter)))}
  .hero-tile--dashboard{--tile-width:17rem;--tile-height:12rem}
  .hero-tile--airport{--tile-width:13rem;--home-y:.06}
  .hero-tile--motion{--tile-width:36rem;--tile-height:24rem;--home-y:.98}
  .hero-tile--chain{--home-x:.80;--home-y:.36}
}
@media(min-width:48em) and (max-width:63.9375em){
  .home-intro{min-height:65rem;height:65rem}
  .hero-tile--airport{--home-y:.49}
  .hero-tile--dashboard{--home-y:.50}
  .hero-tile--motion{--home-y:.99}
  .hero-tile--chain{--home-guide:3;--home-x:.55;--home-y:.54}
  .hero-tile--yoshi{--home-x:.35;--home-y:.40;--home-below-copy:1;--home-copy-offset:8}
}
@media(max-width:47.9375em){
  .home-intro{--hero-columns:3;--hero-column-gap:1rem;height:clamp(38rem,calc(100svh - var(--header-height)),50rem);min-height:var(--hero-main-min-height,38rem)}
  .hero-guides>span:nth-child(n+4){display:none}
  .hero-content{width:calc(100% - 2 * var(--page-gutter));padding-top:1.5rem;padding-bottom:1.25rem}
  .home-intro h1{font-size:clamp(2.5rem,8vw,3.5rem)}
  .hero-identity{margin-bottom:1.25rem}
  .hero-avatar{width:2.25rem;height:2.25rem}
  .hero-identity{gap:.625rem}
  .hero-identity-copy>p{font-size:.875rem}
  .hero-identity-copy .hero-location{font-size:.75rem}
  .home-intro .hero-tile{--tile-width:calc((100vw - 2 * var(--page-gutter)) * .58);--tile-height:calc(var(--tile-width) * .625 + 1.125rem);--home-y:.46;--home-below-copy:1;--home-copy-offset:28}
  .hero-tile--dashboard{--home-x:.04}
  .home-intro .hero-tile--airport{--tile-width:calc((100vw - 2 * var(--page-gutter)) * .52);--home-y:.36;--home-copy-offset:-12;--home-edge:right;left:calc(100% - var(--page-gutter) - var(--tile-width))}
  .home-intro .hero-tile--motion{--home-priority:1;--home-guide:0;--home-x:.75;--tile-width:min(26rem,calc((100vw - 2 * var(--page-gutter)) * .88));--tile-height:calc(var(--tile-width) * .5625 + 1.125rem);--home-y:.69;--home-after-row:1;--home-row-gap:-24;left:calc(var(--page-gutter) + (100vw - 2 * var(--page-gutter) - var(--tile-width)) * .75)}
  .home-intro .hero-tile:nth-of-type(n+4):not(.hero-tile--yoshi){display:none}
  .home-intro .hero-tile--yoshi{display:block;--tile-width:4.5rem;--tile-height:var(--tile-width);--home-x:.80;--home-y:.20;--home-below-copy:1;--home-copy-offset:8;--home-edge:right;left:calc(100% - var(--page-gutter) - var(--tile-width))}
  .hero-canvas.has-main-only .hero-tile--dashboard,.hero-canvas.has-main-only .hero-tile--airport{visibility:hidden;pointer-events:none}
  html:not(.js) .home-intro{height:auto;padding-bottom:2rem}
  html:not(.js) .home-intro .hero-canvas{position:relative}
  html:not(.js) .home-intro .hero-tile:not(.hero-tile--motion){display:none}
  html:not(.js) .home-intro .hero-tile--motion{position:relative;top:auto;left:var(--page-gutter)}
  .home-intro .hero-tile:not(.hero-tile--yoshi) .hero-tile-picture,.home-intro .hero-tile .hero-tile-label{transform:none!important}
  .home-intro .hero-tile-label{width:fit-content;max-width:100%;padding-inline:.25rem;background:var(--color-canvas)}
  .home-intro .hero-tile-shadow{display:none}
}
@media(max-width:47.9375em) and (max-height:32em){.home-intro .hero-tile--dashboard,.home-intro .hero-tile--airport{display:none}}
.project-card{display:block;min-width:0}
.project-media{overflow:hidden;border-radius:var(--radius-media);background:var(--color-surface);aspect-ratio:16/9;display:grid;place-items:center}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform 200ms var(--ease)}
.project-card--featured .project-media,.project-media--cover{aspect-ratio:16/9}
.project-card--featured{margin-bottom:3rem}
.project-caption{display:flex;justify-content:space-between;align-items:start;gap:1.5rem;padding-top:1.25rem}
.project-caption h3{font-size:var(--text-card);font-weight:550;transition:color var(--duration)}
.project-caption p:not(.card-meta){margin-top:0.5rem;font-size:.9375rem;line-height:1.5}
.project-caption .card-meta{margin-top:0.625rem}
.project-caption .status-badge{margin-top:0.75rem}
.project-arrow{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-muted);transition:color var(--duration),background var(--duration),transform var(--duration)}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 1.75rem}
@media(hover:hover) and (pointer:fine){.project-card:hover .project-media img{transform:scale(1.015)}.project-card:hover h3{color:var(--color-accent)}.project-card:hover .project-arrow{background:var(--color-accent-soft);color:var(--color-accent);transform:translateX(3px)}}
.project-card:focus-visible h3{color:var(--color-accent)}
.about-section{position:relative;isolation:isolate}
.about-section>.section-heading{position:relative;z-index:1;align-items:center;pointer-events:none}
.about-section>.section-heading h2,.about-tidy{pointer-events:auto}
.about-tidy{gap:.375rem;padding:.5rem .75rem;flex:none;background:var(--color-accent-soft);color:var(--color-accent-hover);border-color:transparent}
.about-tidy .i{width:1.125rem;height:1.125rem;transition:transform var(--duration-press) var(--ease)}
@media(hover:hover) and (pointer:fine){.about-tidy:hover .i{transform:rotate(-12deg)}}
.is-keyboard .about-tidy .i{transform:none!important}
@media(prefers-reduced-motion:reduce){.about-tidy .i{transform:none!important}}
.about-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(18rem,.9fr);gap:3.5rem;align-items:start;padding-block:1rem 3rem;pointer-events:none}
.about-bio{position:relative;z-index:1;min-width:0}
.about-text{pointer-events:auto;text-shadow:0 0 3px #fff,0 0 7px #fff,0 0 12px #fff,0 0 18px #fff}
.about-details a,.about-details .experience-date,.about-tags li,.about-details .company-mark{pointer-events:auto}
.about-bio>h3{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.15;font-weight:500;letter-spacing:-.03em}
.about-lead{font-size:var(--text-lead);line-height:1.5;margin-top:1rem;max-width:46ch}
.about-bio .reading-copy{margin-top:1.5rem;max-width:62ch}
.reading-copy{color:var(--color-muted)}
.about-photo-area{width:100%;max-width:28rem;min-width:0;justify-self:end}
.about-photo-home{position:relative;height:24.5rem}
.has-photo-canvas .about-photo-home{position:static}
.about-photo-canvas{pointer-events:none}
.about-photo{pointer-events:auto}
.about-photo{--tile-width:15rem;--tile-height:21.25rem;--home-x:.38;--home-y:.42;height:auto}
.about-photo--landscape{--tile-width:18rem;--tile-height:14.625rem}
.about-photo .hero-tile-face{transform:rotate(var(--photo-angle))}
.about-photo .hero-tile-label{width:100%;height:1.125rem;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;background:transparent;opacity:0}
.about-photo.is-front .hero-tile-label{opacity:1}
.about-photo .hero-tile-picture{height:auto}
.about-photo .hero-tile-picture>img{display:block;height:auto;object-fit:contain}
.about-photo--one{--photo-angle:-5deg;z-index:5}
.about-photo--two{--photo-angle:7deg;--home-x:.57;--home-y:.22;z-index:4}
.about-photo--three{--photo-angle:2deg;--home-x:.28;--home-y:.1;z-index:3}
.about-photo--four{--photo-angle:-8deg;--home-x:.8;--home-y:.78;z-index:2}
.about-photo--five{--photo-angle:4deg;--home-x:.15;--home-y:.92;z-index:1}
.about-photo-toolbar{position:relative;z-index:1;height:3.5rem;display:flex;align-items:end;justify-content:center;gap:1.25rem;pointer-events:auto}
.about-photo-toolbar .card-meta{align-self:center;margin-top:.75rem}
.about-photo-step{width:2.75rem;min-width:2.75rem;padding:.5rem}
.about-photo-step[data-canvas-previous] .i{transform:rotate(180deg)}
.about-details{position:relative;z-index:1;pointer-events:none;border-top:1px solid var(--color-rule);padding-top:2rem}
.about-details h3{font-size:var(--text-card);font-weight:550}
.about-specialties h3{font-size:var(--text-small);font-weight:500;color:var(--color-muted);letter-spacing:0}
.about-details>section+section{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--color-rule)}
.about-tags{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.about-tags li{display:inline-flex;align-items:center;gap:.375rem;background:var(--color-surface);padding:.375rem .625rem;font-size:var(--text-small)}
.about-tags .i{width:1rem;height:1rem;flex:none}
.about-degree{font-size:var(--text-body);max-width:55ch}
.about-institution{margin-top:.375rem;font-size:.9375rem;color:var(--color-muted)}
.experience-list{list-style:none;padding:0;margin:.75rem 0 0}
.experience-list>li{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;align-items:center;gap:1rem;padding-block:1rem}
.experience-list>li+li{border-top:1px solid var(--color-rule)}
.company-mark{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;color:var(--color-accent-hover);font-size:var(--text-small);font-weight:550;overflow:hidden}
.company-mark img{display:block;width:100%;height:100%;object-fit:contain}
.company-mark[data-company="chain"] img{clip-path:inset(2px)}
.company-mark--rmit{width:3rem;height:3rem;overflow:visible}
.company-mark--rmit img{max-width:none;width:3rem;object-fit:contain}
.portfolio-home .footer-contacts{flex-direction:row;gap:.75rem}
.footer-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;color:var(--color-accent);background:var(--color-accent-soft);transition:background var(--duration),color var(--duration)}
.footer-icon:hover{color:var(--color-accent-hover);background:var(--color-surface)}
.experience-body{min-width:0}
.experience-body h4{margin:0;font-size:var(--text-body);font-weight:550;letter-spacing:0}
.experience-contract{font-weight:400;color:var(--color-muted)}
.experience-date{font-size:var(--text-small);color:var(--color-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.experience-company{margin-top:.25rem;font-size:.9375rem;color:var(--color-muted)}
.education-row{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;margin-top:1.5rem;align-items:start}
@media(max-width:47.9375em){
  .about-intro{grid-template-columns:1fr;gap:2rem;padding-block:.5rem 2rem}
  .about-bio>h3{font-size:1.75rem}
  .about-section>.section-heading{display:flex;gap:.75rem;flex-wrap:wrap}
  .about-photo-area{justify-self:center}
  .about-photo-home{height:23.5rem}
  .about-details>section+section{margin-top:1.5rem;padding-top:1.5rem}
  .experience-list>li{grid-template-columns:3rem minmax(0,1fr);column-gap:1rem;row-gap:.25rem}
  .experience-list .company-mark{grid-row:span 2;align-self:start}
  .experience-date{grid-column:2}
}
@media(max-width:27em){.about-photo{--tile-width:14rem;--tile-height:20rem}.about-photo--landscape{--tile-width:17rem;--tile-height:13.875rem}.experience-list>li,.education-row{grid-template-columns:2.5rem minmax(0,1fr);column-gap:.75rem}.company-mark{width:2.5rem;height:2.5rem}}
.play-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.play-media{height:auto;aspect-ratio:4/3;overflow:hidden;background:var(--color-surface);border-radius:var(--radius-media);display:grid;place-items:center}
.play-media img{width:100%;height:100%;object-fit:cover}
.ring-canvas{display:block;width:100%;height:auto}
.play-item .card-meta{margin-top:1.125rem;font-size:.75rem}
.play-item h3{letter-spacing:-.01em;font-size:1.0625rem;margin-top:0.5rem}
.play-item>p:not(.card-meta){color:var(--color-muted);font-size:.875rem;margin-top:0.625rem}
.play-item .text-link{font-size:var(--text-small);margin-top:0.5rem}


@media(max-width:74.9375em){.play-grid{gap:1.25rem}.about-details{gap:2.5rem}}

@media(max-width:47.9375em){
  .project-grid{grid-template-columns:1fr;gap:2.25rem}.project-card--featured{margin-bottom:2.25rem}
  .project-caption{padding-top:1rem;gap:1rem}.project-caption h3{font-size:1.1875rem}
  .play-grid{grid-template-columns:1fr;gap:2.25rem}.play-media{aspect-ratio:16/10}
}

/* Featured caption follows its cover, matching the standard project flow. */
.project-card--featured .project-caption>div{display:grid;grid-template-columns:1fr auto;gap:0 1.25rem;flex:1}
.project-card--featured .project-caption h3{grid-column:1;grid-row:1;align-self:center}
.project-card--featured .status-badge{grid-column:2;grid-row:1;margin:0;align-self:center}
.project-card--featured .project-caption p{grid-column:1/-1}
@media(max-width:37.4375em){.project-card--featured .project-caption>div{grid-template-columns:1fr}.project-card--featured .status-badge{grid-column:1;grid-row:auto;justify-self:start;margin-top:0.75rem}}

.is-keyboard .project-card:hover .project-media img,.is-keyboard .project-card:hover .project-arrow{transform:none}
@media(prefers-reduced-motion:reduce){.project-card:hover .project-media img,.project-card:hover .project-arrow{transform:none}}

.project-card:active h3{color:var(--color-accent-hover)}

/* Infinite canvas adapted from Framer University's component used by Emmi Wu. */
.play-section .section-heading{align-items:center}
.play-viewport{position:relative;overflow:visible}
.play-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.play-piece{display:block;min-width:0;text-align:left;color:var(--color-ink);background:none;border:0;padding:0;cursor:pointer}
.play-piece .play-media{position:relative;display:block;aspect-ratio:var(--play-ratio,4/3);overflow:hidden;background:var(--color-surface)}
.play-piece .play-media img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.play-video-label{position:absolute;right:.5rem;bottom:.5rem;background:var(--color-canvas);color:var(--color-ink);padding:.25rem .5rem;font-size:.75rem;line-height:1.5;pointer-events:none}
.play-piece[href]{text-decoration:none}
.play-piece-title{display:block;margin-top:.75rem;font-size:.9375rem;font-weight:500;line-height:1.4}
.play-piece-caption{display:block;margin-top:.25rem;font-size:var(--text-small);color:var(--color-muted);line-height:1.5}
.play-piece:focus-visible{outline-offset:.5rem}
.play-hint{display:none}
.play-viewport.is-infinite{height:clamp(38rem,76svh,52rem);overflow:hidden;cursor:grab;isolation:isolate;touch-action:pan-y}
.play-viewport.is-infinite::before{content:"";position:absolute;inset:0 0 auto;height:5rem;z-index:2;background:linear-gradient(to bottom,var(--color-canvas),transparent);pointer-events:none}
.play-viewport.is-infinite::after{content:"";position:absolute;inset:auto 0 0;height:5rem;z-index:2;background:linear-gradient(to top,var(--color-canvas),transparent);pointer-events:none}
.is-infinite .play-board{position:absolute;inset:0;display:block}
.is-infinite .play-piece{position:absolute;left:0;top:0;will-change:transform;user-select:none;-webkit-user-select:none}
.is-infinite .play-piece--cave{width:19rem}
.is-infinite .play-piece--meeting-room{width:13rem}
.is-infinite .play-piece--haak,.is-infinite .play-piece--drift{width:22rem}
.is-infinite .play-piece--hkia-motion{width:21rem}
.is-infinite .play-piece--bubble-tea{width:23.75rem}
.is-infinite .play-piece--hk-pork{width:21.25rem}
.is-infinite .play-piece--touchdesigner{width:17.5rem}
.is-infinite .play-piece--chain{width:22.5rem}
.is-infinite .play-piece--match-illustration{width:15rem}
.play-viewport.is-infinite+.play-hint{display:block;margin-top:1.25rem;color:var(--color-muted);font-size:var(--text-small);text-align:center}
.play-viewport.is-dragging,.play-viewport.is-dragging *{cursor:grabbing}
@media(hover:hover) and (pointer:fine){.play-piece:hover .play-piece-title{color:var(--color-accent);text-decoration:underline;text-underline-offset:.2em}}
@media(min-width:48em) and (max-width:63.9375em){.hero-content{padding-top:2rem}}
@media(max-width:47.9375em){
  .play-board{grid-template-columns:1fr;gap:2.5rem}
}

/* The approved Lexer AI preview shares the canvas drag behavior. */
.home-intro .hero-tile--motion{--tile-height:calc((var(--tile-width) - 2px) * 850 / 1514 + 2px + 1.125rem)}
.hero-tile-picture>video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}