@font-face {
  font-family: "Portfolio Roman";
  src: url("assets/roman-numeral.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
  unicode-range: U+2161;
}
* { box-sizing: border-box; }
html { background: #fff; color: #111; font-family: "Portfolio Roman", Arial, Helvetica, sans-serif; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #111; outline-offset: 6px; }
.canvas { position: relative; width: 100%; aspect-ratio: 16/9; container-type: inline-size; min-height: 0; }
.nav, .city, .subtitle, .illustration > .section-label { position: absolute; font-size: 1cqw; letter-spacing: .1875cqw; font-weight: 400; white-space: nowrap; }
.nav { left: 3.5%; top: 4.22%; }
.city { right: 1.875%; top: 4.22%; font-size: .9375cqw; letter-spacing: .125cqw; }
.logo { position: absolute; left: 28.25%; top: 16.5556%; width: 39.9375%; height: 28.2222%; margin: 0; }
.logo img, .illustration img { display: block; width: 100%; height: 100%; object-fit: contain; }
.subtitle { left: 37.3125%; top: 40.7778%; width: 25%; margin: 0; text-align: center; font-size: 1.125cqw; letter-spacing: .3125cqw; }
.illustration { position: absolute; cursor: pointer; }
.person { left: 17.75%; top: 48.1111%; width: 26.75%; height: 43.7778%; }
.desk { left: 55.25%; top: 54.8889%; width: 25.9375%; height: 36.1111%; }
.illustration > .section-label { top: calc(100% + 1cqw); left: 50%; transform: translateX(-50%); font-size: 1.0625cqw; letter-spacing: .25cqw; }
.desk > .section-label { top: calc(100% + 1.375cqw); letter-spacing: .1875cqw; }
/* Keep source pixels unfiltered. Only the separate, exterior shadow layer fades in. */
.illustration-visual { position: absolute; inset: 0; transform-origin: center; transition: transform 250ms ease-out; }
.illustration .original-art { position: relative; z-index: 1; }
.illustration .outer-shadow {
  position: absolute; left: var(--shadow-left); top: var(--shadow-top);
  width: var(--shadow-width); height: var(--shadow-height);
  opacity: 0; transition: opacity 250ms ease-out; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .illustration:hover .illustration-visual { transform: translateY(-3px) scale(1.04); }
  .illustration:hover .outer-shadow { opacity: 1; }
}
.illustration:focus-visible .illustration-visual { transform: translateY(-3px) scale(1.04); }
.illustration:focus-visible .outer-shadow { opacity: 1; }
.illustration.tap-feedback .illustration-visual { animation: tap-lift 250ms ease-out; }
.illustration.tap-feedback .outer-shadow { opacity: .6; }
@keyframes tap-lift { 50% { transform: translateY(-2px) scale(1.02); } }
.explore-hint { position: absolute; left: 50%; top: 51%; margin: 0; transform: translateX(-50%); font-size: .625cqw; letter-spacing: .09cqw; color: #666; white-space: nowrap; pointer-events: none; transition: opacity 250ms ease-out; }
.has-explored .explore-hint { opacity: 0; }
.touch-hint { display: none; }
@media (hover: none), (pointer: coarse) {
  .mouse-hint { display: none; }
  .touch-hint { display: inline; }
}
.decoration { position: absolute; pointer-events: none; }
.star { background: #111; clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }
.line { background: #222; }
/* Full-height, open title composition follows the supplied homepage screenshot. */
.projects { position: absolute; top: 14.55%; height: auto; overflow: visible; z-index: 2; animation: reveal .2s ease; }
.projects.left { left: 1.25%; width: 36.25%; }
.projects.right { right: 1.25%; top: 15.33%; width: 32.75%; text-align: right; }
.entries { display: flex; flex-direction: column; gap: .225cqw; }
.type-target { position: relative; display: block; width: 100%; padding-bottom: 0; text-align: inherit; }
.type-target strong { display: block; font-size: 3.75cqw; font-weight: 900; letter-spacing: -.025cqw; line-height: 1.04; overflow-wrap: normal; text-wrap: wrap; }
.right .type-target strong { font-size: 3.5cqw; }
.group-label { margin: 0; font-size: inherit; cursor: default; }
.group-label strong { font-weight: 700; }
.type-target small { position: absolute; left: 0; right: 0; top: calc(100% - 2px); min-height: 0; display: block; font-size: .5cqw; font-weight: 400; line-height: 1.2; letter-spacing: .055cqw; color: #555; opacity: 0; visibility: hidden; transition: opacity .15s ease; }
.type-target[data-type-active] small { opacity: 1; visibility: visible; }
.close { position: absolute; top: -1.9cqw; left: 0; display: block; font-size: .65cqw; letter-spacing: .1cqw; margin-bottom: 1.2cqw; }
.right .close { left: 0; right: auto; text-align: left; }
.sr-only { position: absolute; top: 0; left: 0; margin: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
dialog { border: 1px solid #111; padding: 48px; max-width: min(560px,90vw); }
dialog::backdrop { background: #ffffffd9; }
.dialog-close { position: absolute; right: 16px; top: 10px; font-size: 28px; }
.return { border-bottom: 1px solid; padding: 10px 0; }
dialog h2 { font-size: 32px; line-height: 1.1; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-aspect-ratio: 16/9) and (min-width: 901px) {
  .canvas { width: min(100%,177.7778vh); margin: auto; }
}
@media (max-width: 900px) {
  .canvas { min-height: 760px; aspect-ratio: auto; padding-bottom: 24px; }
  .nav, .city { top: 24px; font-size: 10px; letter-spacing: 1px; }
  .nav { left: 20px; }
  .city { right: 20px; }
  .logo { left: 12%; top: 95px; width: 76%; height: auto; aspect-ratio: 639/254; }
  .subtitle { left: 10%; top: calc(95px + 28cqw); width: 80%; font-size: 11px; letter-spacing: 2.5px; }
  .person { left: 6%; top: calc(180px + 25cqw); width: 43%; height: auto; aspect-ratio: 428/394; }
  .desk { left: 54%; top: calc(200px + 25cqw); width: 41%; height: auto; aspect-ratio: 415/325; }
  .illustration > .section-label, .desk > .section-label { top: calc(100% + 14px); font-size: 9px; letter-spacing: 1px; }
  .explore-hint { top: calc(260px + 55cqw); font-size: 9px; letter-spacing: 1px; }
  .decoration { top: var(--mobile-top) !important; height: var(--mobile-height) !important; }
  .projects, .projects.left, .projects.right { position: relative; top: auto; left: auto; right: auto; width: auto; height: auto; margin: 0 20px; padding: 24px 0; overflow: visible; }
  .projects:not([hidden]) { display: block; margin-top: calc(260px + 69cqw); }
  .entries { gap: 24px; }
  .type-target strong, .right .type-target strong { font-size: clamp(36px,7vw,56px); letter-spacing: -1px; }
  .type-target { padding-bottom: 38px; }
  .type-target small { font-size: 10px; min-height: 30px; letter-spacing: 1px; }
  .close { font-size: 10px; letter-spacing: 1px; margin-bottom: 25px; }
  dialog { padding: 36px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .illustration img { transform: none !important; filter: none !important; }
}


@media (min-width: 901px) {
  .left .type-target:nth-child(2) { width: 26.9cqw; }
  .left .type-target:nth-child(3), .left .group-label { width: 27cqw; }
  .left .type-target:nth-child(5) { width: 23.75cqw; }
  .left .type-target:nth-child(6), .left .type-target:nth-child(7) { width: 16cqw; }
  .right .entries { align-items: flex-end; gap: clamp(.65cqw, 2.5svh, 1.4cqw); }
  /* Match the left list: 11 title lines at 3.9cqw plus six .225cqw gaps. */
  .projects.right { top: auto; bottom: calc(100% - 14.55% - 44.25cqw); }
  .right .type-target:last-child { width: 20.95cqw; }
}
/* A prepainted texture fades/transforms as one layer; no per-frame canvas painting. */
.title-dust { position: absolute; left: -12px; top: -12px; pointer-events: none; opacity: 0; transition: opacity 120ms ease-out, transform 160ms ease-out; transform: scale(.995); }
.type-target.is-dispersing .title-dust { opacity: 1; transform: scale(1); }
.type-target.is-dispersing strong {
  -webkit-mask-image: radial-gradient(circle at center, #000 0 .7px, transparent .85px);
  mask-image: radial-gradient(circle at center, #000 0 .7px, transparent .85px);
  -webkit-mask-size: 2px 2px; mask-size: 2px 2px; opacity: .85;
}
.type-target.dust-ready.is-dispersing strong { -webkit-mask-image: none; mask-image: none; opacity: .18; }
.type-target strong { transition: opacity 120ms ease-out; }
@media (max-width: 900px) {
  .projects .entries { gap: 24px; }
  .type-target { padding-bottom: 38px; }
  .type-target small { top: auto; bottom: 2px; }
  .close, .right .close { position: static; margin-bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .title-dust { display: none; }
  .type-target.is-dispersing strong { -webkit-mask-image: none; mask-image: none; opacity: 1; }
  .illustration-visual { transform: none !important; }
  .illustration .outer-shadow { opacity: 0 !important; }
}
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("assets/explore-cursor.svg") 5 12, auto; }
  a, button, .type-target, .illustration { cursor: url("assets/explore-cursor.svg") 5 12, pointer; }
  .explore-hint { display: none; }
}
/* Empty parts of the open composition must not block either illustration. */
.projects, .entries { pointer-events: none; }
.type-target, .close { pointer-events: auto; }
/* The compact screenshot spacing leaves labels in the inter-line leading. */
.type-target small { z-index: 3; }
html { overflow-x: clip; }

/* Page edges follow the browser, while the artwork keeps its centered 1600×900 stage. */
@media (min-width: 901px) {
  .canvas {
    --page-edge: clamp(12px, calc(.5cqw + (100vw - 100cqw) / 6), 64px);
    --outside-offset: calc(var(--page-edge) - (100vw - 100cqw) / 2);
  }
  .projects.left, .nav { left: var(--outside-offset); }
  .projects.right, .city { right: var(--outside-offset); }
  .title-line { display: block; white-space: nowrap; }
}
@media (min-width: 901px) {
  .right .type-target:last-child strong {
    line-height: .9;
    letter-spacing: clamp(-.125cqw, calc(-.125cqw + (100vw - 100cqw) / 160), -.025cqw);
  }
  .right .type-target:last-child strong::first-line { letter-spacing: -.2cqw; }
}