*{box-sizing:border-box} :root{color-scheme:light;--bg:#f5f5f3;--ink:#222221;--muted:#666663;--line:#ddddd9}html{background:var(--bg)}body{margin:0;color:var(--ink);font-family:Geist,Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:2px}a:hover{color:#000}::selection{background:#d6d6d2}.site{max-width:920px;margin:auto;padding:0 48px}header{height:136px;display:flex;justify-content:space-between;align-items:center}.identity{display:flex;align-items:center;min-width:44px;min-height:44px}.monogram{font-size:30px;font-weight:650;letter-spacing:-3px}.monogram span{color:#858580;margin-left:3px}nav{display:flex;gap:28px}nav a{font-size:13px;color:var(--muted);padding:14px 0}nav a[aria-current]{color:var(--ink)}nav a[aria-current]:after{content:'';display:block;width:3px;height:3px;background:var(--ink);border-radius:50%;margin:5px auto -8px}.home{min-height:calc(100svh - 232px);padding:112px 0 82px;display:flex;align-items:flex-start;position:relative}.intro{max-width:580px}.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.025em;margin:0 0 28px;display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;background:#858580;border-radius:50%}h1{font-weight:500;font-size:clamp(44px,6vw,66px);line-height:1.12;letter-spacing:-.06em;margin:0 0 28px}.period{color:#92928d}.hero-copy{font-size:23px;line-height:1.55;letter-spacing:-.035em;color:var(--ink);margin:0;max-width:540px}.hero-copy span{color:var(--muted)}.context{font-size:14px;color:var(--muted);line-height:1.8;margin:30px 0}.context span{color:var(--ink)}.primary-link{font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:32px;padding:12px 0;border-bottom:1px solid #aaa9a3}.primary-link:hover{border-color:var(--ink)}.home-note{position:absolute;right:0;bottom:78px;display:flex;gap:15px;color:var(--muted)}.note-mark{font-size:31px;line-height:1.1}.home-note p{font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.65;margin:0}footer{min-height:96px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}footer div{display:flex;gap:26px}footer a{padding:15px 0}footer a span{margin-left:4px}.interior{padding:72px 0 60px}.page-intro{max-width:660px;margin-bottom:64px}.interior h1{font-size:clamp(38px,5vw,56px)}.lede{font-size:18px;line-height:1.7;color:var(--muted);max-width:520px}.project{border-top:1px solid var(--line);padding:28px 0 42px}.project-top{display:flex;justify-content:space-between;font:11px 'IBM Plex Mono',monospace;color:var(--muted);margin-bottom:28px}.project h2{font-size:27px;font-weight:500;letter-spacing:-.04em;margin:0 0 10px}.project-title{font-size:19px!important;color:var(--ink)!important}.project p{font-size:15px;line-height:1.75;color:var(--muted);max-width:570px}.project a,.contact-block a{display:inline-block;font-size:13px;border-bottom:1px solid #aaa9a3;padding:12px 0}.project a span,.contact-block a span{margin-left:20px}figure{margin:26px 0}figure img{display:block;width:100%;height:auto;border-radius:8px;filter:grayscale(1);border:1px solid var(--line)}figcaption{font:10px 'IBM Plex Mono',monospace;color:var(--muted);margin-top:10px}.contact-block{border-top:1px solid var(--line);padding-top:40px;margin-top:30px}.contact-block h2{font-size:23px;font-weight:450;letter-spacing:-.035em;margin:0 0 10px}.about-body{display:grid;grid-template-columns:180px 1fr;gap:44px;align-items:start}.portrait{width:180px;height:220px;object-fit:cover;object-position:center 35%;border-radius:5px}.prose p{margin:0 0 20px;font-size:16px;line-height:1.8;color:var(--muted)}.prose p:first-child{color:var(--ink);font-size:20px;letter-spacing:-.025em}.experience{margin-top:64px}.experience h2{font:11px 'IBM Plex Mono',monospace;color:var(--muted);margin:0 0 24px}.experience-row{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line);padding:22px 0}.experience-row>span{font:11px 'IBM Plex Mono',monospace;color:var(--muted);padding-top:4px}.experience h3{font-size:15px;font-weight:500;margin:0 0 5px}.experience p{font-size:13px;color:var(--muted);margin:0}.skip{position:fixed;top:-100px;left:16px;background:var(--ink);color:white;padding:12px;z-index:10}.skip:focus{top:16px;color:white}@media(min-height:900px){.home{padding-top:155px}}@media(max-width:650px){.site{padding:0 26px}header{height:104px}nav{gap:22px}.home{padding:76px 0 50px;min-height:calc(100svh - 200px);flex-direction:column}.hero-copy{font-size:21px}.home-note{position:static;margin:66px 0 0;align-self:flex-end}.eyebrow{font-size:10px}footer{gap:12px;font-size:10px}footer div{gap:18px}.interior{padding:48px 0}.page-intro{margin-bottom:44px}.about-body{grid-template-columns:1fr;gap:28px}.portrait{width:130px;height:150px}.experience-row{grid-template-columns:90px 1fr}.project-type{font-size:10px}}
/* Home entrance: short, overlapping reveals establish the reading order.
   Transform and opacity avoid layout work; no persistent compositor hints. */
.home-page {
  --motion-settle: cubic-bezier(0.23, 1, 0.32, 1);
}
.home-page .intro > * {
  animation: home-arrive 280ms var(--motion-settle) both;
}
.home-page .intro > .eyebrow { animation-delay: 0ms; }
.home-page .intro > h1 { animation-delay: 45ms; }
.home-page .intro > .hero-copy { animation-delay: 90ms; }
.home-page .intro > .context { animation-delay: 135ms; }
.home-page .intro > .primary-link { animation-delay: 180ms; }

@keyframes home-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Move only the directional cue, keeping the link's hit area steady. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page .primary-link > span {
    display: inline-block;
    transition: transform 160ms var(--motion-settle);
  }
  .home-page .primary-link:hover > span { transform: translate(2px, -2px); }
  .home-page .primary-link:active > span { transform: translate(1px, -1px); }
}

/* Keyboard navigation immediately reveals all content and keeps focus stable. */
.home-page:has(:focus-visible) .intro > * { animation: none; }
.home-page .primary-link:focus-visible > span { transition: none; transform: none; }

/* A brief simultaneous fade retains arrival without spatial movement or delay. */
@media (prefers-reduced-motion: reduce) {
  .home-page .intro > :nth-child(n) {
    animation: home-fade 120ms ease-out both;
    animation-delay: 0ms;
  }
}
@keyframes home-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A small generative study sits beside the introduction, clear of the text. */
.home-page .site { max-width: 1120px; }
.home-page .home { gap: 56px; align-items: center; padding-top: 70px; }
.home-page .intro { flex: 1; min-width: 0; }
.home-page h1 { font-size: clamp(44px, 5.2vw, 66px); }
.pixel-art { flex: 0 1 384px; width: 384px; max-width: 100%; }
/* Full-viewport texture stays behind all content and cannot intercept input. */
.home-page { isolation: isolate; }
.home-page .site { position: relative; z-index: 1; }
.pixel-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image: radial-gradient(circle, #22222212 1px, transparent 1px);
  background-size: 10px 10px;
}
.pixel-field.is-ready { background: none; }
.pixel-field canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) {
  .home-page .home { flex-direction: column; align-items: flex-start; gap: 44px; padding-top: 48px; }
  .pixel-art { flex: none; width: 100%; max-width: 384px; align-self: center; }
}

/* Eight real CSS cuboids: discrete components assembling into one system. */
.block-scene {
  width: 100%; aspect-ratio: 1; position: relative; perspective: 850px;
  background: radial-gradient(ellipse at 50% 45%, #e7e7e3, transparent 70%);
}

.block-sculpture {
  position: absolute; top: 45%; left: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(-32deg);
  animation: block-turn 16s ease-in-out infinite alternate paused;
}
.building-block {
  position: absolute; width: 64px; height: 64px; margin: -32px;
  transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z));
  animation: block-assemble 8s cubic-bezier(.45, 0, .55, 1) infinite alternate paused;
}
.block-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid #ffffff12; }
.block-face.front { background: linear-gradient(140deg, #424242, #252525); transform: translateZ(32px); }
.block-face.back { background: #272727; transform: rotateY(180deg) translateZ(32px); }
.block-face.left { background: linear-gradient(135deg, #343434, #1c1c1c); transform: rotateY(-90deg) translateZ(32px); }
.block-face.right { background: linear-gradient(130deg, #262626, #111); transform: rotateY(90deg) translateZ(32px); }
.block-face.top { background: linear-gradient(145deg, #777, #494949); transform: rotateX(90deg) translateZ(32px); }
.block-face.bottom { background: #161616; transform: rotateX(-90deg) translateZ(32px); }
.block-shadow { position: absolute; width: 62%; height: 12%; left: 19%; top: 78%; background: radial-gradient(ellipse, #00000020, transparent 70%); }
.pixel-art.is-playing .block-sculpture, .pixel-art.is-playing .building-block { animation-play-state: running; }
@keyframes block-turn {
  from { transform: rotateX(-24deg) rotateY(-32deg); }
  to { transform: rotateX(-18deg) rotateY(-53deg); }
}
@keyframes block-assemble {
  0%, 15% { transform: translate3d(var(--x), var(--y), var(--z)); }
  85%, 100% { transform: translate3d(calc(var(--x) * 1.4), calc(var(--y) * 1.4), calc(var(--z) * 1.4)); }
}
/* Animations default to paused. JS reads prefers-reduced-motion before
   enabling playback. Reduced motion keeps both scenes static. */
@media (max-width: 380px) {
  .block-scene { perspective: 1100px; }
  .block-sculpture { zoom: .85; }
}

/* Four small pixels echo the background; the native cursor stays intact. */
.pixel-cursor { display: none; position: fixed; left: 0; top: 0; width: 20px; height: 20px;
  margin: -10px; z-index: 20; pointer-events: none; opacity: 0;
}
.pixel-cursor i { position: absolute; width: 3px; height: 3px; background: #666; }
.pixel-cursor i:nth-child(1) { left: 0; top: 0; }
.pixel-cursor i:nth-child(2) { right: 0; top: 0; }
.pixel-cursor i:nth-child(3) { left: 0; bottom: 0; }
.pixel-cursor i:nth-child(4) { right: 0; bottom: 0; }
.pixel-cursor.is-link i { background: #222; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pixel-cursor { display: block; }
  .pixel-cursor.is-visible { opacity: .65; }
}

.speaking-photo {
  width: min(280px, 100%); margin: 36px 0 0;
  padding: 8px 8px 0; background: #ecece8; border: 1px solid var(--line);
  border-radius: 4px;
}
.speaking-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 80%;
  filter: grayscale(1); border: 0; border-radius: 2px;
}
.speaking-photo figcaption {
  margin: 0; padding: 12px 3px; font-size: 10px; line-height: 1.6;
}
@media (max-width: 650px) {
  .speaking-photo { margin-left: 0; width: min(240px, 100%); }
}