/* Editorial rhythm: a quiet introduction, a focused project stage, then supporting work. */
:root{--paper:#f4f2ec;--ink:#18242d;--blue:#255aa5;--muted:#596461;--line:#d5d8d2;--night:#142532}
body{background:var(--paper)}
.site-header{background:rgba(244,242,236,.92);border-color:#d5d8d2}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-block:8px}
.nav-links a:not(.nav-linkedin)::after{content:'';position:absolute;left:0;bottom:2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.nav-links a:not(.nav-linkedin):hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--blue)}
.brand:focus-visible,.nav-links a:focus-visible,.button:focus-visible,.text-action:focus-visible,.about-links a:focus-visible,.footer-actions a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.home-page .home-hero{position:relative;padding-block:100px 130px}
.home-page .home-hero::after{content:'';position:absolute;bottom:48px;left:0;right:0;height:1px;background:#d2d5d0}
.home-page .hero-main .eyebrow{color:#405b69}
.home-page .hero-main h1{letter-spacing:-.065em}
.home-page .hero-main h1 em{color:#253e54;font-weight:500}
.home-page .hero-main>p{color:#4a555a}
.home-page .portrait-wrap{position:relative}
.home-page .portrait{filter:saturate(.72);box-shadow:18px 18px 0 #dce2df}
.home-page .portrait-wrap::after{content:'DREW YANG  /  PRODUCT DESIGN';position:absolute;right:0;bottom:-46px;font:700 10px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.13em;color:#5e6b69}
.home-page .work-section{background:var(--night);color:#f5f7f5;padding-block:118px 132px}
.home-page .work-section .section-top{padding-bottom:28px;border-bottom:1px solid #53626a;margin-bottom:48px}
.home-page .work-section .eyebrow{color:#c1d2dc}
.home-page .work-section .section-top h2,.home-page .work-section .section-top h2 em{color:#f5f7f5}
.home-page .work-section .section-top>p{color:#b8c5ca}
.home-page .featured-work{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
.home-page .work-section .work-card{color:#f5f7f5}
.home-page .work-section .work-card-info p{color:#b8c5ca}
.home-page .work-section .work-card-info .eyebrow{color:#b7c9d4}
.home-page .work-section .work-card-title>span{color:#b3cde5}
.home-page .work-section .work-card-art{background:#cbd2d1;transition:box-shadow .35s ease,transform .35s ease}
.home-page .work-section .work-card:hover .work-card-art{box-shadow:0 16px 32px rgba(0,0,0,.22);transform:translateY(-3px)}
.home-page .work-section .work-card-art img{filter:saturate(.88)}
.home-page .work-section .work-card:hover .work-card-art img{filter:saturate(1)}
.home-page .work-card[href*="pocketchina"] .work-card-art img{object-position:left center}
.home-page .work-card[href*="squadsizzle"] .work-card-art img{object-position:center 28%}
.home-page .work-section .card-index{display:grid;width:38px;height:38px;top:14px;left:14px;background:#f4f2ec;border:0;border-radius:50%;color:var(--ink);font:700 12px 'DM Sans',Arial,sans-serif;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.home-page .work-section .secondary-work{padding-top:18px;border-top:1px solid #344955}
.home-page .work-section .secondary-work .work-card-art{height:300px}
.home-page .approach-section{background:#f4f2ec}
.home-page .approach-grid>div{border-color:#c7cfca;transition:background .25s ease,box-shadow .25s ease}
@media(hover:hover){.home-page .approach-grid>div:hover{background:rgba(220,230,229,.5);box-shadow:inset 0 -2px var(--blue)}}
.home-page .approach-grid span{color:var(--blue)}
.home-page .pm-note{background:#dfe9e9;border-left:3px solid var(--blue)}
.home-page .experiments-section{background:#e9eef0}
.home-page .experiments-section .section-top{padding-bottom:28px;border-bottom:1px solid #c9d4d8}
.home-page .experiment-grid{row-gap:64px}
.home-page .experiment-grid .work-card-art{height:320px;background:#d8e0e3}
.home-page .experiment-grid .work-card-info p{color:#53615f}
.home-page .about-section{background:#e7e3da}
.home-page .about-layout{padding-block:8px}
.footer{background:#142532}
.footer-actions a:focus-visible{outline-color:#bdd0df}
.case-page{background:#f4f2ec}
.case-page .case-hero{border-bottom:1px solid #c9d0cf}
.case-page .case-hero .eyebrow{color:var(--blue)}
.case-page .case-section{border-color:#c9d0cf}
.resume-page{background:#f4f2ec}
/* Progressive enhancement keeps content readable if motion is unavailable. */
.reveal{opacity:1;transform:none}
.has-motion .reveal:not(.in-view){opacity:0;transform:translateY(22px)}
.has-motion .reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:no-preference){
  .home-page .hero-main>.eyebrow{animation:enter-up .6s both}
  .home-page .hero-main h1{animation:enter-up .72s .08s both}
  .home-page .hero-main>p{animation:enter-up .72s .17s both}
  .home-page .hero-actions{animation:enter-up .72s .24s both}
  .home-page .portrait-wrap{animation:enter-up .82s .2s both}
}
@keyframes enter-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.home-page .featured-work{gap:28px}.home-page .work-section .secondary-work .work-card-art{height:250px}}
@media(max-width:720px){
  .home-page .home-hero{padding-block:72px 106px}
  .home-page .home-hero::after{bottom:44px}
  .home-page .portrait-wrap::after{font-size:9px;bottom:-31px}
  .home-page .work-section{padding-block:82px 92px}
  .home-page .featured-work{grid-template-columns:1fr;gap:42px}
  .home-page .work-section .secondary-work{padding-top:36px}
  .home-page .work-section .secondary-work .work-card-art{height:auto;aspect-ratio:1.35}
  .home-page .experiment-grid .work-card-art{height:auto;aspect-ratio:1.35}
  .home-page .approach-grid>div:hover{background:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.home-page .work-section .work-card-art,.nav-links a::after,.home-page .approach-grid>div{transition:none}.has-motion .reveal:not(.in-view){opacity:1;transform:none}}
@media print{.home-page .work-section{background:white;color:#18242d}.reveal,.has-motion .reveal:not(.in-view){opacity:1;transform:none}}