/* Home001 original 2880x1800 reference, lossless 2x letterform crops. Only Home uses this stylesheet.
   The HTML text, buttons and links remain live. Independent alpha masks
   preserve the supplied drawing; no full-page screenshot is rendered. */
@media(min-width:761px){
body[data-page="home"] .site-header{inset:0 0 auto;top:0;height:0;display:block}
body[data-page="home"] .site-header .wordmark{position:absolute;left:calc(96 * 100vw / 1440);top:calc(64 * 100svh / 900);width:calc(124 * 100vw / 1440);height:calc(40 * 100vw / 1440);min-height:0;display:block;transform:none;gap:0;font-size:calc(20 * 100vw / 1440);line-height:1;letter-spacing:normal}
body[data-page="home"] .wordmark .brand-dot{position:absolute;inset:0 auto auto 0;width:calc(40 * 100vw / 1440);height:calc(40 * 100vw / 1440);border-radius:0;--glyph:url(/assets/home001-reference2x-20261029/brand-dot.png);background:currentColor;-webkit-mask:var(--glyph) center / 100% 100% no-repeat;mask:var(--glyph) center / 100% 100% no-repeat}
body[data-page="home"] .wordmark>span:last-child{position:absolute;left:calc(40 * 100vw / 1440);top:0;width:calc(84 * 100vw / 1440);height:calc(40 * 100vw / 1440);transform:none;--glyph:url(/assets/home001-reference2x-20261029/wordmark.png)}
body[data-page="home"] .main-nav{position:absolute;left:calc(1200 * 100vw / 1440);right:auto;top:calc(54 * 100svh / 900);width:calc(144 * 100vw / 1440);height:calc(62 * 100vw / 1440);display:block;font-size:calc(20 * 100vw / 1440);line-height:1;letter-spacing:normal}
body[data-page="home"] .main-nav a{position:absolute;left:0;width:100%;display:block;min-height:0;white-space:nowrap}
body[data-page="home"] .main-nav a:nth-child(1){top:0;height:calc(23 * 100vw / 1440);--glyph:url(/assets/home001-reference2x-20261029/nav-work.png)}
body[data-page="home"] .main-nav a:nth-child(2){top:calc(23 * 100svh / 900);height:calc(18 * 100vw / 1440);--glyph:url(/assets/home001-reference2x-20261029/nav-playground.png)}
body[data-page="home"] .main-nav a:nth-child(3){top:calc(41 * 100svh / 900);height:calc(21 * 100vw / 1440);--glyph:url(/assets/home001-reference2x-20261029/nav-about.png)}
body[data-page="home"] #hero{height:100svh;min-height:0;max-width:none;width:100%;margin:0}
body[data-page="home"] #hero .skill{left:calc(var(--tx) * 100vw / 1440);top:calc(var(--ty) * 100svh / 900);width:calc(var(--tw) * 100vw / 1440);height:calc(var(--th) * 100vw / 1440);margin:0}
body[data-page="home"] #hero .skill-trigger{width:100%;height:100%;display:block;padding:0;margin:0;border:0;background:none}
body[data-page="home"] #hero .skill-title{position:absolute;inset:0;width:100%;height:100%;max-width:none;white-space:nowrap;font-size:calc(54 * 100vw / 1440);line-height:1;--glyph:var(--title-glyph)}
body[data-page="home"] #hero .skill .skill-number{position:absolute;left:calc((var(--nx) - var(--tx)) * 100vw / 1440);right:auto;top:calc((var(--ny) - var(--ty)) * 100svh / 900);width:calc(var(--nw) * 100vw / 1440);height:calc(var(--nh) * 100vw / 1440);padding:0;transform:none;font-size:calc(26 * 100vw / 1440);line-height:1;letter-spacing:normal;--glyph:var(--number-glyph)}
body[data-page="home"] #hero .hero-signoff{position:absolute;left:calc(520 * 100vw / 1440);top:calc(800 * 100svh / 900);right:auto;bottom:auto;width:calc(384 * 100vw / 1440);height:calc(50 * 100vw / 1440);margin:0;font-size:calc(20 * 100vw / 1440);line-height:1;letter-spacing:normal;text-align:left}
body[data-page="home"] .hero-signoff br{display:none}
body[data-page="home"] .hero-signoff .signoff-main{position:absolute;left:0;top:0;width:100%;height:calc(24 * 100vw / 1440);white-space:nowrap;--glyph:url(/assets/home001-reference2x-20261029/signoff-main.png)}
body[data-page="home"] .hero-signoff .signoff-tagline{position:absolute;left:calc(115 * 100vw / 1440);top:calc(28 * 100vw / 1440);width:calc(155 * 100vw / 1440);height:calc(22 * 100vw / 1440);white-space:nowrap;letter-spacing:normal;--glyph:url(/assets/home001-reference2x-20261029/signoff-tagline.png)}
body[data-page="home"] .wordmark>span:last-child,body[data-page="home"] .main-nav a,body[data-page="home"] #hero .skill-title,body[data-page="home"] #hero .skill-number,body[data-page="home"] .signoff-main,body[data-page="home"] .signoff-tagline{-webkit-text-fill-color:transparent}
body[data-page="home"] .wordmark>span:last-child::after,body[data-page="home"] .main-nav a::after,body[data-page="home"] #hero .skill-title::after,body[data-page="home"] #hero .skill-number::after,body[data-page="home"] .signoff-main::after,body[data-page="home"] .signoff-tagline::after{content:"";position:absolute;inset:0;display:block;background:currentColor;-webkit-mask:var(--glyph) center / 100% 100% no-repeat;mask:var(--glyph) center / 100% 100% no-repeat;pointer-events:none}
body[data-page="home"] ::selection{-webkit-text-fill-color:#fff;background:#000}
}
@media(min-width:761px){
body[data-page="home"] .wordmark .brand-dot,
body[data-page="home"] .wordmark>span:last-child::after,
body[data-page="home"] .main-nav a::after,
body[data-page="home"] #hero .skill-title::after,
body[data-page="home"] #hero .skill-number::after,
body[data-page="home"] .signoff-main::after,
body[data-page="home"] .signoff-tagline::after{image-rendering:auto}
}
/* Compact source navigation on Home001 mobile only; retain the 3-line rhythm. */
@media(max-width:760px){
body[data-page="home"] #hero .hero-signoff{line-height:1.2}
body[data-page="home"] .main-nav{position:relative;display:block;width:115.2px;height:49.6px;font-size:16px;line-height:1;flex:none}
body[data-page="home"] .main-nav a{position:absolute;left:0;display:block;width:100%;min-height:0;-webkit-text-fill-color:transparent}
body[data-page="home"] .main-nav a:nth-child(1){top:0;height:18.4px;--glyph:url('/assets/home001-reference2x-20261029/nav-work.png')}
body[data-page="home"] .main-nav a:nth-child(2){top:18.4px;height:14.4px;--glyph:url('/assets/home001-reference2x-20261029/nav-playground.png')}
body[data-page="home"] .main-nav a:nth-child(3){top:32.8px;height:16.8px;--glyph:url('/assets/home001-reference2x-20261029/nav-about.png')}
body[data-page="home"] .main-nav a::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--glyph) center / 100% 100% no-repeat;mask:var(--glyph) center / 100% 100% no-repeat;pointer-events:none;image-rendering:auto}
}

/* Only 02 ART DIRECTION becomes white in its desktop hover preview. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
body[data-page="home"][data-active-preview="art-direction"] #hero .skill-direction.is-active{color:#fff}
}

/* Match 02: white active titles and numbers for 03 and 05, desktop only. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
body[data-page="home"][data-active-preview="visual-identity"] #hero .skill-identity.is-active,
body[data-page="home"][data-active-preview="typography"] #hero .skill-type.is-active{color:#fff}
}

/* Subtle 6% hover zoom with one soft overshoot; each original centre stays fixed. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
body[data-page="home"] #hero .skill .skill-title,
body[data-page="home"] #hero .skill .skill-number{transform-origin:center center;transition:transform 220ms cubic-bezier(.22,.61,.36,1)}
body[data-page="home"] #hero .skill:hover .skill-title,
body[data-page="home"] #hero .skill:hover .skill-number{transform:scale(1.06);transition-duration:380ms;transition-timing-function:cubic-bezier(.34,1.8,.55,1)}
body[data-page="home"] #hero .skill .skill-number{pointer-events:auto}
}
@media(min-width:761px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
body[data-page="home"] #hero .skill .skill-title,
body[data-page="home"] #hero .skill .skill-number{transition:none}
}