:root {
  --bg: #f5f4f0;
  --grid: #e8e5dd;
  --ink: #1c1c1a;
  --body: #4a4944;
  --muted: #8a8780;
  --faint: #b3afa6;
  --line: #e6e3db;
  --link: #2f5bd3;
  --red: #e3350d;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --pixel: "Press Start 2P", monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); color: var(--ink); background-color: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
.mono, .sub, .hello, .hint { font-family: var(--mono); }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 24px var(--gutter);
  background: linear-gradient(var(--bg) 55%, rgba(245, 244, 240, 0)); }
.brand { font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.nav nav { display: flex; gap: 28px; }
.nav nav a { font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: #5e5b55; transition: color .2s; }
.nav nav a:hover { color: var(--ink); }

/* hero */
.hero { min-height: 100svh; display: grid; grid-template-columns: 1fr minmax(280px, 400px) 1fr; align-items: center; column-gap: clamp(24px, 4vw, 64px);
  padding: 96px var(--gutter) 130px; position: relative; perspective: 1100px; }
.hero-left { justify-self: end; }
.hero-right { justify-self: start; }
.hello { font-size: 15px; margin-bottom: 4px; }
h1 { font: 300 clamp(44px, 5.2vw, 78px)/1 var(--sans); letter-spacing: -.035em; white-space: nowrap; }
.word { font: italic 400 clamp(60px, 7.4vw, 110px)/.9 var(--serif); letter-spacing: -.02em; height: 1.02em; overflow: hidden; padding: 0 .2em 0 .16em; margin-left: -.16em; }
.word span { display: inline-block; transition: transform .5s var(--ease), opacity .5s, filter .5s; }
.word span.out { transform: translateY(-40%); opacity: 0; filter: blur(6px); }
.word span.in { transform: translateY(40%); opacity: 0; filter: blur(6px); transition: none; }
.sub { font-size: 13px; color: var(--muted); margin-top: 14px; }
.sub a { color: var(--link); text-decoration: none; }
.hint { position: absolute; left: 50%; bottom: 116px; transform: translateX(-50%); display: flex; gap: 18px; font-size: 11px; color: var(--faint); white-space: nowrap; }
.hint b { color: #4f9cf0; font-weight: 400; }
.keys { letter-spacing: .2em; }

/* the device: floats, faces you, leans toward the cursor */
.dex-float { position: relative; width: 100%; animation: float 6s ease-in-out infinite; }
.dex { --tx: 0deg; --ty: 0deg; --gx: 50%; --gy: 30%;
  position: relative; width: 100%; aspect-ratio: 524 / 827; user-select: none; -webkit-user-select: none;
  transform: rotateX(var(--tx)) rotateY(var(--ty)); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.dex.live { transition: transform .12s linear; }
.dex-img { width: 100%; height: auto; display: block; pointer-events: none; filter: drop-shadow(0 34px 36px rgba(60, 25, 10, .16)); }
.dex-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.9), rgba(255,255,255,0) 45%);
  -webkit-mask: url(assets/pokedex-front.png) center / 100% 100% no-repeat; mask: url(assets/pokedex-front.png) center / 100% 100% no-repeat; }
.dex.live .dex-sheen { opacity: .8; }
.dex-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; cursor: grab; touch-action: none; }
.dex-screen:active { cursor: grabbing; }
.dex-screen canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dex-dialog { position: absolute; left: 5px; right: 5px; top: 5px; min-height: 30px; padding: 6px 7px;
  background: #fff; border: 2px solid #1a1c2c; box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #1a1c2c;
  font: 6px/1.7 var(--pixel); color: #1a1c2c; white-space: pre-line; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.dex-dialog.on { opacity: 1; transform: none; }
.hit { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.hit.round, .hit.lens { border-radius: 50%; }
.hit:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.hit.pressed { animation: press .18s ease-out; }
.hit.lens::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; transition: background .3s; }
.dex.scan .hit.lens::after { background: radial-gradient(circle, rgba(170, 225, 255, .95), rgba(120, 190, 255, 0) 70%); }
.dex-bubble { position: absolute; left: 58%; top: 14%; font: 10px/1 var(--pixel); background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; opacity: 0; pointer-events: none; white-space: nowrap; }
.dex-bubble::after { content: ""; position: absolute; left: 14px; bottom: -8px; width: 10px; height: 10px; background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.dex-bubble.on { animation: bubble 1.1s var(--ease) forwards; }
.dex-float.shake { animation: shake .4s steps(2) 2, float 6s ease-in-out infinite; }
.spark { position: absolute; left: 50%; top: 42%; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, #fff 0 25%, #a8d8ff 45%, rgba(79,156,240,0) 70%); animation: spark .9s var(--ease) forwards; }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes shake { 0% { translate: -6px 2px; } 50% { translate: 6px -2px; } 100% { translate: 0 0; } }
@keyframes press { 50% { transform: translate(-50%, -50%) scale(.85); background: rgba(0, 0, 0, .12); } }
@keyframes bubble { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes spark { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; } }

/* quiet sections (Raphael-style) */
.block { max-width: 1080px; margin: 0 auto; padding: 56px var(--gutter); }
.intro p { font: 400 17px/1.7 var(--sans); color: var(--body); max-width: 640px; }
.intro p + p { margin-top: 14px; }
.intro a { color: var(--ink); text-decoration: underline; text-decoration-color: #cfcbc2; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.intro a:hover { text-decoration-color: var(--ink); }
h2 { font: 500 15px/1 var(--sans); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
h2 span { margin-left: 8px; color: var(--muted); font-weight: 400; }

/* work tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }
.tile { text-decoration: none; color: inherit; display: block; }
.stage { aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; overflow: hidden; position: relative;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.tile:hover .stage { border-color: #d6d2c8; box-shadow: 0 10px 30px rgba(28, 28, 26, .07); transform: translateY(-2px); }
.stage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.tile:hover .stage img { transform: scale(1.025); }
.tile:focus-visible .stage { outline: 2px solid var(--link); outline-offset: 3px; }
.meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 13px; }
.meta b { font-weight: 500; }
.meta span { color: var(--muted); }

/* vignette: design agent */
.composer { width: 74%; font-size: 10px; }
.brief { background: #f4f3ef; border: 1px solid #ebe8e1; border-radius: 8px; padding: 9px 10px; color: var(--ink); }
.outs { display: flex; gap: 5px; margin-top: 8px; }
.outs span { flex: 1; text-align: center; padding: 6px 0; border-radius: 6px; background: #eef4ff; color: #2f5bd3; font-weight: 500; opacity: .35; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); }
.tile:hover .outs span { opacity: 1; transform: none; }
.tile:hover .outs span:nth-child(2) { transition-delay: .12s; }
.tile:hover .outs span:nth-child(3) { transition-delay: .24s; }

/* vignette: IDDS components */
.kit { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 500; }
.kit .btn { background: #0a5cc4; color: #fff; padding: 7px 14px; border-radius: 6px; transition: transform .15s; }
.tile:hover .kit .btn { transform: scale(.96); }
.kit .badge { background: #e6f6ec; color: #13804a; padding: 4px 8px; border-radius: 999px; }
.kit .toggle { width: 30px; height: 18px; border-radius: 999px; background: #d4d8e0; position: relative; transition: background .3s; }
.kit .toggle i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .3s var(--ease); }
.tile:hover .kit .toggle { background: #0a5cc4; }
.tile:hover .kit .toggle i { transform: translateX(12px); }

/* vignette: INAgov tracker */
.tracker { width: 78%; font-size: 9.5px; border: 1px solid #ebe8e1; border-radius: 8px; padding: 10px; background: #fafaf8; }
.tracker p { font-weight: 500; margin-bottom: 8px; }
.tracker ol { list-style: none; display: flex; justify-content: space-between; position: relative; }
.tracker ol::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; background: #e3e0d8; }
.tracker li { position: relative; padding-top: 16px; color: var(--muted); font-size: 8.5px; }
.tracker li::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #d6d2c8; box-sizing: border-box; transition: all .3s; }
.tracker li.done::before { background: #0a5cc4; border-color: #0a5cc4; }
.tracker li.now { color: var(--ink); }
.tracker li.now::before { border-color: #0a5cc4; }
.tile:hover .tracker li.now::before { background: #0a5cc4; }
.tile:hover .tracker li:last-child::before { border-color: #0a5cc4; }

/* vignette: Jack corporate card */
.ccard { width: 58%; aspect-ratio: 1.586; border-radius: 10px; background: linear-gradient(135deg, #1f2a44, #0f1626); color: #fff; padding: 10px 12px; position: relative; font-size: 9px;
  box-shadow: 0 8px 20px rgba(15, 22, 38, .25); transition: transform .4s var(--ease); }
.tile:hover .ccard { transform: rotate(-4deg) translateY(-3px); }
.ccard .chip { display: block; width: 18px; height: 13px; border-radius: 3px; background: linear-gradient(135deg, #e9d18c, #b99645); }
.ccard .who { position: absolute; left: 12px; bottom: 22px; font-weight: 500; }
.ccard .lim { position: absolute; left: 12px; bottom: 9px; color: #9aa6c0; }
.ccard .ok { position: absolute; right: 10px; top: 9px; background: #22c55e; color: #fff; font-size: 8px; font-weight: 600; padding: 3px 6px; border-radius: 999px; opacity: 0; transform: scale(.8); transition: all .3s var(--ease) .1s; }
.tile:hover .ccard .ok { opacity: 1; transform: none; }

/* vignette: Lampirin score */
.score { display: grid; justify-items: center; position: relative; }
.score svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.score .track { fill: none; stroke: #eceae4; stroke-width: 6; }
.score .bar { fill: none; stroke: #74abfe; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 120; transition: stroke-dashoffset .9s var(--ease); }
.tile:hover .score .bar { stroke-dashoffset: 22.9; }
.score b { position: absolute; top: 24px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.score span { font-size: 9.5px; color: var(--muted); margin-top: 6px; }

/* vignette: legal rows */
.rows { width: 80%; font-size: 9.5px; border: 1px solid #ebe8e1; border-radius: 8px; overflow: hidden; }
.rows div { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-top: 1px solid #f0eee8; transition: background .3s; }
.rows div:first-child { border-top: 0; }
.rows em { font-style: normal; font-size: 8.5px; font-weight: 500; padding: 2px 7px; border-radius: 999px; transition: background .3s, color .3s; }
.rows .p { background: #fff4e0; color: #b46a00; }
.rows .g { background: #e6f6ec; color: #13804a; }
.tile:hover .rows .hot { background: #fafaf6; }
.tile:hover .rows .swap { background: #e6f6ec; color: #13804a; }

/* experience list */
.list { list-style: none; }
.list li { display: grid; grid-template-columns: 1fr 1fr 7.5em; gap: 16px; padding: 14px 0; font-size: 15px; }
.list li span, .list li time { color: var(--muted); }
.list li time { font-variant-numeric: tabular-nums; text-align: right; }

/* footer + dock */
.foot { max-width: 1080px; margin: 0 auto; padding: 40px var(--gutter) 140px; display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.dock { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; display: flex; gap: 4px; padding: 8px 10px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e4e1d9; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* mobile */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding-top: 84px; padding-bottom: 150px; min-height: auto; }
  .hero-left, .hero-right { justify-self: stretch; }
  .hero-left { order: 1; } .hero-right { order: 2; margin-top: -6px; } .dex-float { order: 3; width: min(72vw, 300px); margin-top: 12px; }
  .hero-left .sub { display: none; }
  .hint { position: static; transform: none; order: 4; width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px 14px; white-space: normal; margin-top: 14px; }
  h1 { font-size: 44px; }
  .word { font-size: 60px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .list li { grid-template-columns: 1fr auto; gap: 2px 16px; } .list li span { grid-column: 1; grid-row: 2; font-size: 13px; }
  .list li time { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 13px; }
  .nav nav { gap: 16px; } .nav nav a:not(:last-child) { display: none; }
}
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dex-float { animation: none; } .dex { transition: none; } .word span { transition: none; } }

/* NEKKEN cabinet: a wall-mounted aluminium arcade */
@media (min-width: 901px) { .hero { grid-template-columns: 1fr minmax(270px, 340px) 1fr; } }
.cab-float { position: relative; width: 100%; animation: float 6s ease-in-out infinite; z-index: 5;
  transition: transform .75s cubic-bezier(.65, 0, .2, 1); }
.cab { --tx: 0deg; --ty: 0deg; position: relative; width: 100%; aspect-ratio: 360 / 434; user-select: none; -webkit-user-select: none;
  transform: rotateX(var(--tx)) rotateY(var(--ty)); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.cab.live { transition: transform .12s linear; }
.cab-svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(-10px 14px 10px rgba(30, 30, 35, .16)) drop-shadow(-46px 44px 38px rgba(30, 30, 35, .13)); }
.cab-svg .stick { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .08s; }
.cab.k-left .stick { transform: rotate(-16deg); }
.cab.k-right .stick { transform: rotate(16deg); }
.cab-svg .b .cap { transition: transform .06s; }
.cab.k-1 .b1 .cap, .cab.k-2 .b2 .cap, .cab.k-3 .b3 .cap, .cab.k-4 .b4 .cap { transform: translateY(2.2px); }
.cab-svg .led { animation: led 1.6s steps(1) infinite; }
@keyframes led { 50% { opacity: .25; } }

.cab-screen { position: absolute; left: 16.667%; top: 5.53%; width: 66.667%; height: 41.475%; overflow: hidden; touch-action: none; container-type: size; background: #fbfaf6; }
.cab-screen canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* glass: a soft glare and a faint inner shade, scanlines only while the game runs */
.cab-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(118deg, rgba(255,255,255,.22) 0 22%, rgba(255,255,255,0) 38%), radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.14));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.cab-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 .3px, transparent .3px .9px); }
html.playing .cab-screen::after { opacity: 1; }
.cab-screen.boot canvas { animation: crt .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes crt { 0% { transform: scale(1, .01); filter: brightness(4); } 45% { transform: scale(1, .04); filter: brightness(3); } 100% { transform: none; filter: none; } }

/* attract mode: a quiet white screen, like a cabinet waiting for a coin */
.attract { position: absolute; inset: 0; z-index: 1; text-align: center; pointer-events: none; transition: opacity .25s; }
.attract-title { position: absolute; left: 0; right: 0; top: 9cqh; font: 600 12.5cqw/1 var(--sans); letter-spacing: -.02em; color: #2c2c2e; }
.attract-sub { position: absolute; left: 0; right: 0; top: 30cqh; font: 500 4.6cqw/1 var(--sans); color: #55555a; }
.attract-coin { position: absolute; left: 0; right: 0; bottom: 9cqh; font: 2.6cqw/1 var(--pixel); color: #e3350d; animation: led 1.1s steps(1) infinite; }
html.playing .attract { opacity: 0; }

/* hover: the cursor becomes a Play badge; click zooms into the screen */
.cab-play { position: absolute; inset: 0; z-index: 6; border: 0; background: transparent; cursor: none; border-radius: 10px; }
.cab-play:focus-visible { outline: 2px solid var(--link); outline-offset: 6px; }
@media (hover: none) { .cab-play { cursor: pointer; } }
html.playing .cab-play { display: none; }
.play-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .18s, transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.play-cursor span { display: flex; align-items: center; gap: 7px; padding: 9px 15px 9px 13px; border-radius: 999px; background: #1c1c1a; color: #fff;
  font: 500 13px/1 var(--sans); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.play-cursor span::before { content: ""; width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.play-cursor.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.cab .hit { pointer-events: none; z-index: 4; }
html.playing .cab .hit { pointer-events: auto; }
.cab .hit.down { background: transparent; }
.hint .touch { display: none; }
@media (hover: none) { .hint .fine { display: none; } .hint .touch { display: inline; } }

/* play mode */
html.playing, html.playing body { overflow: hidden; }
html.playing .cab-float { animation: none; z-index: 60; }
.hero-left, .hero-right, .hint, .nav, .dock { transition: opacity .35s; }
html.playing .hero-left, html.playing .hero-right, html.playing .hint, html.playing .nav, html.playing .dock { opacity: 0; pointer-events: none; }
.exit-play { position: fixed; top: 24px; right: 24px; z-index: 80; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: #6f6e6a; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .3s .3s, transform .3s .3s, background .2s; }
.exit-play:hover { background: #4a4944; }
.exit-play:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
html.playing .exit-play { opacity: 1; pointer-events: auto; transform: none; }

/* keycaps: the real controller */
.pad { position: fixed; left: 50%; bottom: 22px; z-index: 80; display: flex; align-items: flex-end; gap: 28px; padding: 14px 20px 12px;
  background: rgba(250, 249, 246, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid #e2dfd7; border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.10); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .35s, transform .45s var(--ease); }
html.playing .pad { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); transition-delay: .35s; }
.pad-group { display: grid; justify-items: center; gap: 8px; }
.pad-group > span { font: 400 11px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.pad-group > span em { font-style: normal; color: var(--faint); }
.caps { display: flex; gap: 6px; }
.cap { min-width: 42px; height: 42px; padding: 0 8px; display: grid; place-content: center; gap: 2px; border: 1px solid #d9d6ce; border-radius: 9px; background: #fff;
  font: 500 15px/1 var(--mono); color: var(--ink); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 2px 0 #d2cec5, 0 3px 6px rgba(0,0,0,.05); transition: transform .06s, box-shadow .06s, background .15s; }
.cap b { font-weight: 500; }
.cap small { font: 400 8.5px/1 var(--mono); color: var(--muted); }
.cap.c b { color: #1f9bd6; } .cap.v b { color: #8b4dff; }
.cap.down { transform: translateY(2px); box-shadow: 0 0 0 #d2cec5; background: #f1efe9; }
.cap:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.cap.wide { min-width: 52px; cursor: default; font-size: 12px; color: var(--muted); }
@media (hover: none) { .pad .esc { display: none; } }

@media (max-width: 900px) {
  .cab-float { order: 3; width: min(72vw, 300px); margin-top: 12px; }
  .pad { gap: 14px; padding: 12px 14px 10px; bottom: 14px; width: calc(100% - 28px); justify-content: space-between; }
  .pad-group > span { display: none; }
  .cap { min-width: 52px; height: 52px; font-size: 17px; }
  .exit-play { top: 14px; right: 14px; }
}
@media (max-width: 420px) { .cap { min-width: 44px; height: 48px; padding: 0 5px; } .pad { gap: 8px; } .caps { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .cab-float { animation: none; transition: none; } .cab { transition: none; } .cab-screen.boot canvas { animation: none; } }

/* intro + work, Rachel-style */
#work { padding-top: 24px; }
.tile .stage { border-radius: 14px; aspect-ratio: 4 / 3; }
.tile .meta { margin-top: 16px; font-size: 15px; }
.tile .desc { font-size: 14px; color: var(--muted); margin-top: 4px; }
.tile.locked { cursor: default; }
.tile.locked:hover .stage { transform: none; box-shadow: none; }
.tile.locked:hover .stage img { transform: none; }

/* Rachel-style thumbnails: one idea on a color field, staggered columns */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
.tiles .col { display: grid; gap: 36px; }
.tile .meta { justify-content: flex-start; gap: 8px; }
.tile .meta span::before { content: "/"; color: var(--faint); margin-right: 8px; }
.th { aspect-ratio: var(--ar); border: 0; border-radius: 0; position: relative; display: grid; place-items: center; overflow: hidden; }
.th::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tile:hover .th { transform: none; box-shadow: none; }

.prompt { position: relative; width: 66%; min-height: 34%; background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 18px 40px rgba(0,0,0,.25);
  font: 400 clamp(13px, 1.5vw, 18px)/1.4 var(--sans); color: var(--ink); text-align: left; transition: transform .5s var(--ease); }
.tile:hover .prompt { transform: translateY(-4px); }
.prompt .typed { white-space: pre-wrap; }
.prompt .caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--ink); vertical-align: -.18em; margin-left: 1px; animation: led 1s steps(1) infinite; }
.prompt .send { position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%; background: #d97757; color: #fff; display: grid; place-items: center; font: 600 15px/1 var(--sans); }

.th-idds { background: #ecedf0; background-image: radial-gradient(#cfd2d8 1px, transparent 1px); background-size: 18px 18px; gap: 22px; align-content: center; }
.themes { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); font: 500 12px/1 var(--sans); }
.themes span { padding: 7px 12px; border-radius: 999px; color: var(--muted); transition: background .4s, color .4s; }
.themes span.on { background: #1c1c1a; color: #fff; }
.btn { --brand: #1a6fd8; width: 46%; padding: 16px 0; border-radius: 10px; background: var(--brand); color: #fff; text-align: center; font: 500 clamp(14px, 1.5vw, 17px)/1 var(--sans);
  box-shadow: 0 12px 28px -8px var(--brand); transition: background .6s var(--ease), box-shadow .6s var(--ease); }

.th-inagov { background: linear-gradient(160deg, #a9cdfb, #e4efff 70%); }
.th-inagov img { width: 62%; height: auto; border-radius: 16px; box-shadow: 0 24px 50px -16px rgba(25, 70, 140, .45); transition: transform .6s var(--ease); }
.tile:hover .th-inagov img { transform: translateY(-4px) rotate(-1deg); }

.th-az { background: #4a0f26; }
.th-az img { width: 26%; height: auto; transition: transform .6s var(--ease); }

@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } .tiles .col { gap: 28px; } .tiles .col + .col { margin-top: 28px; } }
.tile .th { aspect-ratio: var(--ar); border-radius: 2px; border: 0; }

.th-bnk { background: #6f8fb5; }
/* the brand shoot: model with the bags beside the Belle & Kate wordmark */
.th-bnk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform-origin: 30% 50%; transition: transform .8s var(--ease); }
.tile:hover .th-bnk img { transform: scale(1.04); }

/* IDDS tile: a mini IDDS screen driven by tokens, with a Figma-style variables panel.
   Registered color properties let the whole screen glide between agency modes. */
@property --p900 { syntax: "<color>"; inherits: true; initial-value: #06489c; }
@property --p600 { syntax: "<color>"; inherits: true; initial-value: #1e6ece; }
@property --p400 { syntax: "<color>"; inherits: true; initial-value: #609cea; }
@property --p200 { syntax: "<color>"; inherits: true; initial-value: #9cc0f0; }
.idds-demo { position: relative; width: 84%; container-type: inline-size; transition: --p900 .4s ease, --p600 .4s ease, --p400 .4s ease, --p200 .4s ease; }
.idds-demo .ui { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.6cqw; background: #fff; border-radius: 2cqw; padding: 1.8cqw; box-shadow: 0 2cqw 5cqw -1.5cqw rgba(30,35,50,.22); }
.idds-demo .card { border: 1px solid #eceef1; border-radius: 1.4cqw; padding: 2cqw; position: relative; overflow: hidden; }
.idds-demo .login { display: grid; gap: 1.5cqw; align-content: start; }
.idds-demo .logo { position: relative; height: 4.6cqw; }
.idds-demo .logo img, .idds-demo .ill img { position: absolute; left: 0; top: 0; height: 100%; width: auto; opacity: 0; transition: opacity .5s var(--ease); }
.idds-demo .logo img.on, .idds-demo .ill img.on { opacity: 1; }
.idds-demo .field { display: block; height: 3.6cqw; border: 1px solid #e3e5e9; border-radius: .9cqw; }
.idds-demo .ibtn { display: block; height: 4cqw; border-radius: .9cqw; background: var(--p600); color: #fff; font: 500 1.7cqw/4cqw var(--sans); text-align: center; margin-top: .6cqw; }
.idds-demo .pie { display: flex; align-items: center; gap: 2.2cqw; }
.idds-demo .donut { width: 15cqw; aspect-ratio: 1; border-radius: 50%; flex: none;
  background: conic-gradient(var(--p600) 0 10%, var(--p400) 10% 30%, var(--p900) 30% 35%, var(--p600) 35% 45%, var(--p900) 45% 70%, var(--p200) 70% 100%); }
.idds-demo .pie ul { list-style: none; display: grid; gap: 1.1cqw; flex: 1; }
.idds-demo .pie li { height: 1.1cqw; border-radius: 1cqw; background: #eef0f3; position: relative; padding-left: 0; }
.idds-demo .pie li::before { content: ""; position: absolute; left: -2cqw; top: 0; width: 1.1cqw; height: 1.1cqw; border-radius: .3cqw; background: var(--p600); }
.idds-demo .pie li:nth-child(2)::before { background: var(--p400); } .idds-demo .pie li:nth-child(3)::before { background: var(--p900); } .idds-demo .pie li:nth-child(4)::before { background: var(--p200); }
.idds-demo .pie ul { padding-left: 2cqw; }
.idds-demo .bars { display: flex; align-items: flex-end; justify-content: space-between; height: 17cqw; padding-bottom: 1.6cqw; background: repeating-linear-gradient(0deg, #f1f2f4 0 1px, transparent 1px 25%) content-box; }
.idds-demo .bars span { display: flex; align-items: flex-end; gap: .4cqw; height: 100%; }
.idds-demo .bars i { display: block; width: 1.5cqw; border-radius: .3cqw .3cqw 0 0; background: var(--p600); height: calc(var(--a) * 2%); transition: height .8s var(--ease); }
.idds-demo .bars i + i { background: var(--p200); height: calc(var(--b) * 2%); }
.idds-demo .ill { padding: 0; min-height: 17cqw; background: var(--p200); }
.idds-demo .ill img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.idds-demo .vars { position: absolute; right: -6cqw; bottom: -7cqw; width: 42cqw; background: #2c2c2c; color: #e6e6e6; border-radius: 1.6cqw; padding: 1.6cqw 1.8cqw 1.2cqw;
  box-shadow: 0 2.4cqw 5cqw -1cqw rgba(0,0,0,.4); font: 400 1.55cqw/1.2 var(--mono); }
.idds-demo .vh { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2cqw; margin-bottom: .6cqw; border-bottom: 1px solid #3d3d3d; }
.idds-demo .vh b { font: 500 1.7cqw/1 var(--sans); color: #fff; }
.idds-demo .vh em { font-style: normal; font: 500 1.5cqw/1 var(--sans); padding: .6cqw 1.1cqw; border-radius: .8cqw; background: #3d3d3d; color: #fff; }
.idds-demo .vr { display: grid; grid-template-columns: 2.2cqw 1fr auto; align-items: center; gap: 1.2cqw; padding: .75cqw 0; }
.idds-demo .vr i { width: 2.2cqw; height: 2.2cqw; border-radius: .5cqw; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.idds-demo .vr code { font: inherit; color: #bdbdbd; } .idds-demo .vr .hex { color: #fff; text-transform: uppercase; }
.th-idds { padding-right: 4%; padding-bottom: 4%; }

.cap.su { opacity: .35; transition: opacity .3s, box-shadow .3s; }
.cap.su b { color: #d1532f; }
html.super-ready .cap.su { opacity: 1; animation: suready 1s ease-in-out infinite; }
@keyframes suready { 50% { box-shadow: 0 2px 0 #d2cec5, 0 0 0 4px rgba(255,190,60,.45); } }

.mute-play { position: fixed; top: 24px; right: 78px; z-index: 80; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: #6f6e6a; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .3s .3s, transform .3s .3s, background .2s; }
.mute-play:hover { background: #4a4944; }
.mute-play:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.mute-play .off { display: none; } .mute-play.muted .on { display: none; } .mute-play.muted .off { display: block; }
html.playing .mute-play { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 900px) { .mute-play { top: 14px; right: 66px; } }

/* off the clock + footer wordmark (from the old portfolio) */
.fun-lede { font-size: 15px; color: var(--muted); margin-top: -8px; }
.fun-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.fun-grid figure { aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.fun-grid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wordmark { max-width: 1080px; margin: 24px auto 0; padding: 0 var(--gutter); }
.wordmark img { width: 100%; height: auto; display: block; opacity: .9; }
@media (max-width: 560px) { .fun-grid { grid-template-columns: 1fr; } }


/* Jack tile: the redesigned Task screen; hover clears the approval queue */
.th-jack { container-type: inline-size; background: radial-gradient(60% 90% at 18% 70%, #6f63c9 0%, rgba(111, 99, 201, 0) 60%), radial-gradient(50% 70% at 85% 20%, #1d4f73 0%, rgba(29, 79, 115, 0) 65%), #070b16; }
.jk-phone { position: absolute; left: 50%; top: 11%; width: 56cqw; height: 100%; transform: translateX(-50%); background: #fff; border-radius: 6cqw 6cqw 0 0; border: 1.4cqw solid #11131a; border-bottom: 0; box-shadow: 0 0 0 .35cqw #4b4f63, 0 4cqw 10cqw -2cqw rgba(0, 0, 0, .6); overflow: hidden; font-family: var(--sans); color: #1c1c1a; transition: transform .6s var(--ease); }
.tile:hover .jk-phone { transform: translateX(-50%) translateY(-1.6cqw); }
.jk-bar { display: flex; justify-content: space-between; align-items: center; padding: 2.4cqw 5cqw 0; font: 600 2.4cqw/1 var(--sans); }
.jk-bar i { width: 4.6cqw; height: 1.8cqw; border-radius: .5cqw; background: #1c1c1a; }
.jk-head { display: flex; justify-content: space-between; align-items: center; padding: 4cqw 4.4cqw 3cqw; }
.jk-head b { font: 600 3.6cqw/1 var(--sans); }
.jk-head span { font: 500 2cqw/1 var(--sans); color: #55534d; border: .25cqw solid #dddad3; border-radius: 1cqw; padding: 1.2cqw 1.6cqw; }
.jk-phone ul { list-style: none; margin: 0; padding: 0; }
.jk-phone li { display: flex; align-items: center; gap: 2.6cqw; padding: 2.5cqw 4.4cqw; border-top: .25cqw solid #efede8; transition: background .4s; }
.jk-phone li i { width: 3.6cqw; height: 3.6cqw; flex: none; color: #3b3a36; }
.jk-phone li i svg { width: 100%; height: 100%; display: block; }
.jk-phone li p { flex: 1; min-width: 0; margin: 0; }
.jk-phone li b { display: block; font: 600 2.4cqw/1.25 var(--sans); }
.jk-phone li em { display: block; font: 400 1.9cqw/1.3 var(--sans); font-style: normal; color: #8a877f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-phone .n { display: grid; place-items: center; min-width: 3.8cqw; height: 3.8cqw; border-radius: .9cqw; background: #2a2a2e; color: #fff; font: 600 2.1cqw/1 var(--sans); transition: background .4s var(--ease), transform .4s var(--ease); }
.jk-phone li.hot .n { position: relative; color: transparent; }
.jk-phone li.hot .n::before { content: "3"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; transition: opacity .25s; }
.jk-phone li.hot .n::after { content: ""; position: absolute; left: 50%; top: 46%; width: 1.1cqw; height: 1.9cqw; border: solid #fff; border-width: 0 .45cqw .45cqw 0; transform: translate(-50%, -50%) rotate(45deg) scale(.4); opacity: 0; transition: opacity .25s, transform .35s var(--ease); }
.tile:hover .jk-phone li.hot { background: #f1faf4; }
.tile:hover .jk-phone li.hot .n { background: #13a35a; transform: scale(1.08); }
.tile:hover .jk-phone li.hot .n::before { opacity: 0; }
.tile:hover .jk-phone li.hot .n::after { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .th-jack * { transition: none !important; } }
.tile .th-inagov img { width: 76%; }
@media (max-width: 560px) { .tiles .tile .th { aspect-ratio: 16 / 11; } }

/* INA Agent: a white field with a little blue mesh gradient drifting through, and a quiet wordmark */
.th-agent { container-type: inline-size; isolation: isolate; background: #f8f9fc; }
/* soft blobs are radial gradients, not a CSS blur: a big blur layer renders as a black box in iOS Safari, and costs a lot to animate */
.ag-flow { position: absolute; inset: -30%; z-index: 0; }
.ag-flow i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--c) 30%, transparent) !important; scale: 1.45; }
/* the mesh drifts visibly now: shorter loops, wider travel, a touch more blue (still mostly white) */
.ag-flow .f1 { width: 50%; height: 44%; left: 48%; top: 18%; --c: #c3d4ff; animation: agf1 7s ease-in-out infinite; }
.ag-flow .f2 { width: 34%; height: 30%; left: 56%; top: 30%; --c: #8aacff; opacity: .6; animation: agf2 9s ease-in-out infinite; }
.ag-flow .f3 { width: 44%; height: 38%; left: 14%; top: 50%; --c: #d4e1ff; animation: agf3 8s ease-in-out infinite; }
.ag-flow .f4 { width: 30%; height: 28%; left: 28%; top: 56%; --c: #a3bfff; opacity: .5; animation: agf4 6.5s ease-in-out infinite; }
.ag-flow .f5 { width: 46%; height: 36%; left: 24%; top: 22%; --c: #ffffff; animation: agf5 7.5s ease-in-out infinite; }
@keyframes agf1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-38%, 26%) scale(1.18); } 66% { transform: translate(-12%, 46%) scale(.92); } }
@keyframes agf2 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-70%, 40%) scale(1.2); } 66% { transform: translate(-30%, -30%) scale(.9); } }
@keyframes agf3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60%, -44%) scale(1.15); } }
@keyframes agf4 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(90%, -50%) scale(1.3); } 66% { transform: translate(40%, 20%) scale(.9); } }
@keyframes agf5 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40%, 30%) scale(1.12); } }
.ag-grain { position: absolute; inset: 0; z-index: 1; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ag-mark { position: relative; z-index: 2; display: flex; align-items: center; gap: .45em; font: 500 clamp(15px, 4.4cqw, 34px)/1 var(--sans); letter-spacing: -.01em; color: #1d1f26; transition: transform .6s var(--ease); }
.ag-mark svg { width: .82em; height: .82em; fill: #ff2a12; animation: agstar 8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes agstar { 0%, 70%, 100% { transform: rotate(0); } 80%, 90% { transform: rotate(90deg); } }
.tile:hover .ag-mark { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .th-agent * { animation: none !important; } }

/* BGM toggle, carried over from the Framer site: ring = track progress */
.bgm { position: fixed; left: 28px; bottom: 28px; z-index: 60; display: grid; justify-items: center; gap: 10px; transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.playing .bgm { opacity: 0; transform: translateY(12px); pointer-events: none; }
.bgm-note { position: absolute; left: 60px; bottom: 140px; margin: 0; font: 400 9px/1 "Press Start 2P", var(--mono); color: #2b2a27; white-space: nowrap; transform: rotate(-6deg); transition: opacity .4s; pointer-events: none; }
.bgm-note svg { position: absolute; left: -2px; top: 16px; width: 32px; height: 38px; color: #2b2a27; }
.bgm.heard .bgm-note { opacity: 0; }
.bgm-btn { --ring: #2f2f2d; position: relative; width: 60px; height: 60px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: conic-gradient(var(--link, #1e6ece) var(--p, 0deg), var(--ring) 0); transition: transform .3s var(--ease); }
.bgm-btn::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fbfaf7; }
.bgm-btn:hover { transform: scale(1.06); }
.bgm-btn:active { transform: scale(.96); }
.bgm-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.bgm-ic { position: relative; display: flex; gap: 3px; width: 12px; height: 13px; }
/* paused state shows a play triangle; playing shows two bars */
.bgm-ic i { display: block; width: 4px; height: 13px; border-radius: 1.5px; background: var(--ring); transition: clip-path .25s var(--ease), width .25s var(--ease); }
.bgm:not(.on) .bgm-ic i:first-child { width: 12px; border-radius: 1px; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.bgm:not(.on) .bgm-ic i:last-child { width: 0; }
.bgm-label { font: 400 8px/1 "Press Start 2P", var(--mono); color: #2b2a27; background: #ecebe7; padding: 6px 10px; letter-spacing: .04em; }
@media (max-width: 700px) { .bgm { left: 16px; bottom: 22px; } .bgm-btn { width: 46px; height: 46px; } .bgm-btn::before { inset: 7px; } .bgm-note, .bgm-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .bgm, .bgm-btn, .bgm-ic i { transition: none; } }


/* the cabinet is wall-mounted: no float, no tilt, it hangs on two brackets and shades the page behind it */
.cab-float { animation: none; }
.cab { aspect-ratio: 360 / 340; transform: none; }
.cab-screen { top: 7.059%; height: 52.941%; }

/* About page: Bao To's layout (bio + tilted polaroid, logo rows, polaroid strip) in our tokens */
body.about { padding-bottom: 120px; }
.nav nav a[aria-current="page"] { color: var(--ink); }
.ab { max-width: 640px; margin: 0 auto; padding: 132px var(--gutter) 40px; }
.ab-hero { display: grid; grid-template-columns: 1fr 188px; gap: 40px; align-items: start; }
.ab-title { font: 400 30px/1.2 var(--sans); letter-spacing: -.02em; white-space: normal; margin-bottom: 26px; }
.ab-hero p, .ab-life p, .ab-contact p { font: 400 14.5px/1.7 var(--sans); color: var(--body); }
.ab-hero p + p { margin-top: 12px; }
.ab-portrait { transform: rotate(3deg); margin-top: 4px; }
.ab a { color: var(--ink); text-decoration: underline; text-decoration-color: #cfcbc2; text-underline-offset: 3px; }
.ab a:hover { text-decoration-color: var(--ink); }
.ab-sec { margin-top: 64px; }
.ab-sec h2 { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.ab-list { list-style: none; }
.ab-list > li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 10px 0; }
.ab-logo { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font: 600 10px/1 var(--sans); color: #fff; letter-spacing: -.02em; margin-top: -2px; }
.ab-logo svg { width: 15px; height: 15px; fill: #fff; }
.l-ina { background: #e8251a; } .l-lmp { background: #74abfe; color: #032358; } .l-jack { background: #1c1c1e; } .l-bnk { background: #6f8fb5; font-size: 8px; }
.l-banmo { background: #f2a33a; } .l-int { background: #e6e3dc; color: #6b675f; } .l-ub { background: #1d3f8f; font-size: 9px; }
.ab-head { display: flex; align-items: baseline; gap: 7px; font-size: 14px; line-height: 1.4; }
.ab-head b { font-weight: 500; color: var(--ink); }
.ab-head i { font-style: normal; color: var(--faint); }
.ab-head span { color: var(--muted); }
.ab-head time { margin-left: auto; font-size: 12.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ab-what ul { margin: 6px 0 0; padding-left: 16px; }
.ab-what li, .ab-what > p { font-size: 13.5px; line-height: 1.6; color: var(--body); }
.ab-what > p { margin-top: 4px; }
.ab-what a { color: #2f62d9; text-decoration: none; } .ab-what a:hover { text-decoration: underline; }
.ab-life .todo { margin-top: 16px; }
.ab-contact p + p { margin-top: 12px; }
/* polaroids: white frame, soft shadow, a slight tilt each */
.polaroid { margin: 0; background: #fff; padding: 7px 7px 26px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 24px -8px rgba(40,35,25,.22); position: relative; }
.polaroid img, .ph-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #f1eee6; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font: 400 11px/1 var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.ph-photo { display: grid; place-items: center; border: 1.5px dashed #c9b98f; background: #fdf9ee; }
.ph-photo span { font: 500 10px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #8a6d1f; text-align: center; padding: 8px; }
.ab-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 48px auto 0; max-width: 940px; padding: 0 var(--gutter); }
.ab-strip .polaroid img { aspect-ratio: 1; }
.ab-strip .polaroid:nth-child(1) { transform: rotate(-3deg); } .ab-strip .polaroid:nth-child(2) { transform: rotate(2deg) translateY(6px); }
.ab-strip .polaroid:nth-child(3) { transform: rotate(-1.5deg); } .ab-strip .polaroid:nth-child(4) { transform: rotate(3deg) translateY(4px); }
.ab-strip .polaroid:nth-child(5) { transform: rotate(-2deg); }
.ab-strip .polaroid { transition: transform .4s var(--ease); }
.ab-strip .polaroid:hover { transform: rotate(0) translateY(-6px) scale(1.04); z-index: 2; }
@media (max-width: 640px) {
  .ab { padding-top: 104px; }
  .ab-hero { grid-template-columns: 1fr 112px; gap: 20px; }
  .ab-title { font-size: 26px; }
  .ab-strip { grid-template-columns: repeat(3, 1fr); }
  .ab-head { flex-wrap: wrap; row-gap: 2px; } .ab-head time { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ab-strip .polaroid { transition: none; } }
.ab .todo { padding: 14px 16px; border: 1.5px dashed #c9b98f; border-radius: 12px; background: #fdf9ee; }
.ab .todo b { display: block; font: 500 11.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #8a6d1f; }
.ab .todo ul { margin: 8px 0 0; padding-left: 18px; }
.ab .todo li { font-size: 13.5px; line-height: 1.55; color: #6f5a22; }

/* hero, Cindy Ly's proportions: headline and rotating word at one size, hugging a bigger object */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.hae-mark { width: 22px; height: 28px; background: var(--ink); -webkit-mask: url(assets/hae-logo.webp) center / contain no-repeat; mask: url(assets/hae-logo.webp) center / contain no-repeat; }
.hero { column-gap: clamp(12px, 1.8vw, 32px); }
@media (min-width: 901px) { .hero { grid-template-columns: 1fr minmax(300px, 400px) 1fr; } }
h1, .word { font-size: clamp(48px, 7.2vw, 106px); }
@media (min-width: 901px) { .word { filter: url(#pixelate); } }
.hint .fine { display: none; }
.stamp { position: absolute; right: var(--gutter); bottom: 32px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
html.playing .stamp { opacity: 0; }
@media (max-width: 900px) {
  /* phone: greeting, the cabinet, then the sentence, all centred */
  .hero { text-align: center; }
  .hero-left, .hero-right { display: contents; }
  .hero .hello { order: 1; margin-bottom: 6px; }
  .hero .cab-float { order: 2; margin: 4px 0 18px; }
  .hero h1 { order: 3; font-size: 52px; }
  .hero .word { order: 4; font-size: 58px; margin: 0; padding: 0 .1em; }
  .hero-left .sub { display: none; }
  .hero-right .sub { order: 5; margin-top: 10px; }
  .hint { order: 6; }
  .stamp { display: none; }
  .hero { padding-bottom: 72px; }
}

/* About page in the project-detail frame: fixed sidebar (crumb + numbered nav), 960px column */
.rc .ab { max-width: none; width: min(960px, calc(100vw - var(--side) - 80px)); margin: 0 0 0 var(--side); padding: 120px 0 160px; }
.rc .ab-hero { grid-template-columns: 1fr 240px; gap: 56px; }
.rc .ab-hero p, .rc .ab-life p, .rc .ab-contact p { font-size: 16.5px; line-height: 1.75; }
.rc .ab-title { font: 400 clamp(36px, 3.6vw, 54px)/1.12 var(--serif-h); letter-spacing: -.01em; color: #2e3640; margin-bottom: 32px; }
.rc .ab-what li, .rc .ab-what > p { font-size: 15px; }
.rc .ab-head { font-size: 15.5px; }
.rc .ab-strip { max-width: none; padding: 0; margin: 56px 0 0; }
@media (max-width: 900px) { .rc .ab { width: auto; margin: 0; padding: 40px var(--gutter) 140px; } .rc .ab-hero { grid-template-columns: 1fr 140px; gap: 24px; } }

/* hero type, Cindy's recipe: DM Mono greeting + sub-lines, DM Sans headline, serif italic word */
.hero .hello { font: 400 16px/1.25 "DM Mono", var(--mono); letter-spacing: .04em; color: #404040; margin-bottom: 6px; }
.hero h1 { font-family: "DM Sans", var(--sans); font-weight: 400; letter-spacing: -.03em; color: #2d2d2d; }
.hero .word { color: #2d2d2d; }
.hero .sub { font: 300 16px/1.25 "DM Mono", var(--mono); letter-spacing: .04em; color: #8a8a8a; }
@media (max-width: 900px) { .hero .sub { font-size: 14px; } }

/* Fun page: a gallery of little windows (after cindyly.design's side quests) */
.sq { max-width: 1272px; margin: 0 auto; padding: 56px var(--gutter) 160px; }
.sq-back { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; }
.sq-back:hover { color: var(--ink); }
.sq-title { font: italic 400 clamp(44px, 5vw, 64px)/1 var(--serif); letter-spacing: -.01em; color: #2d2d2d; margin-top: 36px; }
@media (min-width: 901px) { .sq-title { filter: url(#pixelate); } }
.sq-dots i { font-style: normal; animation: sq-dot 1.6s infinite; }
.sq-dots i:nth-child(2) { animation-delay: .2s; } .sq-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes sq-dot { 0%, 20% { opacity: 0; } 30%, 100% { opacity: 1; } }
.sq-sub { font: 400 17px/1.5 "DM Sans", var(--sans); color: #404040; margin-top: 14px; }
.sq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1px; grid-auto-flow: dense; align-items: start; column-gap: 16px; margin-top: 32px; }
.sq-tile.wide { grid-column: span 2; }

/* window chrome, shared by tiles and the preview */
.sq-tile, .sq-win { background: #fff; border: 1px solid #e2e0da; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05); }
.sq-tile { position: relative; display: block; width: 100%; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s; }
.sq-open { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sq-open:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 8px; }
.sq-tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px rgba(0,0,0,.09); }
.sq-bar { position: relative; display: flex; align-items: center; height: 24px; padding: 0 8px; background: linear-gradient(#fff, #f7f7f7 30%, #ececec 55%, #e6e6e6 75%, #e2e2e2); border-bottom: 1px solid #d9d9d9; box-shadow: inset 0 1px #fff; }
.sq-lights { display: inline-flex; gap: 5px; position: relative; z-index: 1; }
.sq-lights i, .sq-close { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); transition: background .2s; }
.sq-tile:hover .sq-lights i:nth-child(1), .sq-win .sq-close { background: #ff5f57; }
.sq-tile:hover .sq-lights i:nth-child(2) { background: #febc2e; }
.sq-tile:hover .sq-lights i:nth-child(3) { background: #28c840; }
.sq-name { position: absolute; left: 50%; transform: translateX(-50%); font: 400 11px/1 var(--mono); letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.sq-media { display: block; background: #eeeeec; }
.sq-media img, .sq-media video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; object-position: top; }
.sq-media.px img { image-rendering: pixelated; }
/* phone-shaped clips sit on a light mat, like a device on a desk */
.sq-tile.phone .sq-media, .sq-win.is-phone .sq-media { padding: 40px 0 36px; background: #f9f9f9; }
.sq-tile.phone video, .sq-win.is-phone video { width: 56%; margin: 0 auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }

/* preview window */
.sq-win { width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; margin: auto; color: var(--ink); }
.sq-win::backdrop { background: rgba(245,244,240,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sq-win[open] { animation: sq-pop .28s var(--ease); }
@keyframes sq-pop { from { opacity: 0; transform: scale(.96); } }
.sq-win .sq-bar { height: 34px; padding: 0 14px; }
.sq-win .sq-lights { gap: 7px; }
.sq-win .sq-lights i, .sq-win .sq-close { width: 12px; height: 12px; }
.sq-close { cursor: pointer; }
.sq-close:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.sq-win .sq-name { font-size: 12px; font-weight: 500; }
.sq-win-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; max-height: calc(100dvh - 84px); }
.sq-win-media { display: flex; align-items: center; justify-content: center; padding: 24px; background: #fafafa; overflow: auto; }
.sq-win-media .sq-media { position: relative; width: 100%; border-radius: 4px; overflow: hidden; }
.sq-win.is-phone .sq-win-media .sq-media { background: none; padding: 0; }
.sq-win.is-phone video { width: min(240px, 70%); }
.sq-win-info { padding: 22px 20px; border-left: 1px solid #ececec; background: #fafafa; overflow: auto; }
.sq-win-info b { display: block; font: italic 400 26px/1.15 var(--serif); }
.sq-win-info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 18px 0 0; font-size: 13px; }
.sq-win-info dt { color: var(--muted); }
.sq-win-info dd { margin: 0; text-align: right; }
.sq-win-info p { font: 400 15px/1.55 "DM Sans", var(--sans); color: #2d2d2d; margin-top: 18px; }
.sq-win-info a { display: inline-block; margin-top: 16px; font-size: 14px; color: var(--ink); text-decoration: underline; text-decoration-color: #cfcbc2; text-underline-offset: 4px; }
.sq-win-info a:hover { text-decoration-color: var(--ink); }

@media (max-width: 1100px) { .sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .sq { padding-top: 32px; }
  .sq-grid { grid-template-columns: minmax(0, 1fr); }
  .sq-tile.wide { grid-column: auto; }
  .sq-win-body { grid-template-columns: 1fr; overflow: auto; }
  .sq-win-media { padding: 16px; overflow: visible; }
  .sq-win-info { border-left: 0; border-top: 1px solid #ececec; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .sq-dots i, .sq-win[open] { animation: none; } .sq-tile { transition: none; } }


/* hero, set like rachelchen.tech: one big serif sentence, then currently / previously */
.rhero { padding-top: clamp(150px, 22vh, 240px); padding-bottom: 72px; }
.rhero h1 { position: relative; font: 400 clamp(44px, 5.6vw, 84px)/1.12 "Newsreader", Georgia, serif; letter-spacing: -.015em; color: #2e3640; white-space: normal; max-width: 13em; text-wrap: balance; }
.rh-now { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 28em); gap: 32px; margin-top: 56px; }
.rh-now dt { font-size: 15px; color: var(--muted); }
.rh-now dd { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: #3a414c; }
.rh-now a { color: inherit; text-decoration: underline; text-decoration-color: #cfcbc2; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.rh-now a:hover { text-decoration-color: currentColor; }
@media (max-width: 640px) { .rhero { padding-top: 120px; padding-bottom: 40px; } .rh-now { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } }

/* the arcade waits at the end of the page */
.arcade { margin-top: 48px; }
.hero .big { font: 400 clamp(48px, 7.2vw, 106px)/1 "DM Sans", var(--sans); letter-spacing: -.03em; color: #2d2d2d; white-space: nowrap; }
@media (max-width: 900px) { .hero .big { order: 3; font-size: 52px; } }

/* Mercury-style player button: one round pause / play, bottom-left of every video and moving card */
.vp-host, .vp-wrap { position: relative; }
.vp { position: absolute; left: 16px; bottom: 16px; z-index: 3; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  /* frosted glass: blurred backdrop, soft white rim, a gentle top highlight */
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22)); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.04), 0 4px 14px rgba(20,24,40,.12);
  color: #1d1d1f; transition: transform .2s var(--ease), background .2s; }
.vp:hover { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4)); transform: scale(1.06); }
.vp:active { transform: scale(.94); }
.vp:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.vp svg { width: 14px; height: 14px; fill: currentColor; }
.vp .i-play { display: none; margin-left: 2px; }
.vp.is-paused .i-play { display: block; } .vp.is-paused .i-pause { display: none; }
.vp-wrap > .vp { bottom: auto; transform: translateY(calc(-100% - 16px)); }
.vp-wrap > .vp:hover { transform: translateY(calc(-100% - 16px)) scale(1.06); }
.vp-wrap > .vp:active { transform: translateY(calc(-100% - 16px)) scale(.94); }
.is-paused, .is-paused * { animation-play-state: paused !important; }
@media (max-width: 680px) { .vp { width: 36px; height: 36px; left: 12px; bottom: 12px; } .vp-wrap > .vp { transform: translateY(calc(-100% - 12px)); } }
.vp-frame { display: block; border-radius: inherit; }

/* dock v2, after cindyly.design: big app icons, bold labels, one hover trick per icon */
.dock { gap: 6px; padding: 12px 14px 10px; border-radius: 26px; background: linear-gradient(#fdfdfc, #f6f6f4); border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dk { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; padding: 4px 0 2px; border-radius: 16px; text-decoration: none; color: #1c1c1a; }
.dk:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.dk-ic { position: relative; display: grid; place-items: center; width: 52px; height: 52px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dk-ic svg { width: 100%; height: 100%; overflow: visible; }
.dk-tile { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06); }
.dk-lb { font: 600 14px/1 var(--sans); letter-spacing: -.01em; }
.dk[aria-current="page"] .dk-lb { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: #cfcbc2; }
.dk:hover .dk-ic { transform: translateY(-6px); }
.dk:active .dk-ic { transform: translateY(-2px) scale(.94); }

/* works: the folder opens and a page peeks out */
.dk-back { fill: #7db5f6; }
.dk-paper { fill: #fff; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dk-paper2 { stroke: #c7d9ee; stroke-width: 1.6; stroke-linecap: round; fill: none; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dk-front { transform-origin: 28px 46px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.dk-front path:first-child { fill: #a6cffd; }
.dk-shine { stroke: #c9e2ff; stroke-width: 1.2; fill: none; }
.dk-works:hover .dk-front { transform: perspective(80px) rotateX(-28deg); }
.dk-works:hover .dk-paper, .dk-works:hover .dk-paper2 { transform: translateY(-5px); }

/* fun: the joystick waggles */
.dk-fun .dk-tile { background: #ffe9e1; }
.dk-base { fill: #fff; stroke: #f07a68; stroke-width: 1.8; }
.dk-shaft { stroke: #f07a68; stroke-width: 3; stroke-linecap: round; }
.dk-ball { fill: #ff8b78; stroke: #e2604c; stroke-width: 1.6; }
.dk-glint { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.dk-btn { fill: #f07a68; }
.dk-stick { transform-origin: 28px 40px; }
.dk-fun:hover .dk-stick { animation: dk-waggle .6s ease-in-out; }
.dk-fun:hover .dk-btn { animation: dk-tap .6s steps(1); }
@keyframes dk-waggle { 25% { transform: rotate(-18deg); } 55% { transform: rotate(14deg); } 80% { transform: rotate(-6deg); } }
@keyframes dk-tap { 30%, 60% { fill: #ffd2c8; } }

/* about: my mark on a cream card that tilts and says hi */
.dk-about .dk-tile { background: #fff6dc; }
.dk-hae { width: 26px; height: 32px; background: #1c1c1a; -webkit-mask: url(assets/hae-logo.webp) center / contain no-repeat; mask: url(assets/hae-logo.webp) center / contain no-repeat; }
.dk-hi { position: absolute; top: -8px; right: -12px; padding: 3px 6px; border-radius: 8px 8px 8px 2px; background: #1c1c1a; color: #fff; font: 600 10px/1 var(--sans); font-style: normal; opacity: 0; transform: translateY(4px) scale(.6); transform-origin: 0 100%; transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.dk-about:hover .dk-ic { transform: translateY(-6px) rotate(-7deg); }
.dk-about:hover .dk-hi { opacity: 1; transform: rotate(7deg); }

@media (max-width: 480px) { .dk { width: 64px; } .dk-ic { width: 44px; height: 44px; } .dk-lb { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .dk-ic, .dk-front, .dk-paper, .dk-paper2 { transition: none; } .dk-fun:hover .dk-stick, .dk-fun:hover .dk-btn { animation: none; } }

/* the Hae signature leads the headline, then flies up into the header as you scroll */
/* the signature stands in for the word "Haechal": its "ae" sits on the baseline at about the text's x-height, the tail drops like a descender */
.rh-hae { position: relative; display: inline-block; width: 1.525em; height: 1.265em; vertical-align: -.352em; margin: 0 -.04em 0 -.02em; }
/* a soft shadow of the mark stays in the headline after the real one flies to the header */
.rh-hae::before { content: ""; position: absolute; inset: 0; background: #2e3640; -webkit-mask: url(assets/hae-word.webp) center / 100% 100% no-repeat; mask: url(assets/hae-word.webp) center / 100% 100% no-repeat; opacity: .1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hae-fly { position: fixed; left: 0; top: 0; z-index: 25; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.hae-in { position: absolute; inset: 0; background: url(assets/hae-word.webp) center / 100% 100% no-repeat; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), filter .3s; }
/* the hologram: an iridescent band clipped to the letters, swept across on hover */
.hae-in::after { content: ""; position: absolute; inset: 0; -webkit-mask: url(assets/hae-word.webp) center / 100% 100% no-repeat; mask: url(assets/hae-word.webp) center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 30%, #9fd8ff 40%, #d9b8ff 47%, #ffd1e8 53%, #c8f7dc 60%, transparent 70%) 150% 0 / 250% 100% no-repeat; opacity: 0; transition: opacity .3s; }
@media (hover: hover) { .hae-in::after { mix-blend-mode: color-dodge; } }
@media (hover: none) { .hae-in::after { display: none; } }
.hae-fly.hover .hae-in { transform: perspective(300px) rotateY(calc(var(--hx, 0) * 22deg)) rotateX(calc(var(--hy, 0) * -18deg)) translateY(-4%) scale(1.06); filter: drop-shadow(0 10px 14px rgba(46, 54, 64, .18)); }
.hae-fly.hover .hae-in::after { opacity: .9; animation: hae-sheen 1.4s ease-in-out infinite alternate; }
@keyframes hae-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.hae-fly.hover @media (prefers-reduced-motion: reduce) { .hae-in { transition: none; } .hae-fly.hover .hae-in { transform: none; } .hae-fly.hover .hae-in::after { animation: none; background-position: 50% 0; } }
.has-fly .nav .hae-mark { visibility: hidden; }
html.playing .hae-fly { opacity: 0; }

/* the arcade is the footer: back to top + last updated sit right under it */
.arcade { min-height: 88svh; }
.foot { align-items: center; padding-top: 8px; padding-bottom: 120px; }
.foot .mono { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.to-top { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; }
.to-top:hover { color: var(--ink); }
.to-top svg { transition: transform .25s var(--ease); }
.to-top:hover svg { transform: translateY(-3px); }

/* work: four equal cards in a 2×2 grid that fade up as they scroll in (app.js adds .reveal) */
.tiles.stack4 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 24px; align-items: start; }
.stack4 .tile .th { aspect-ratio: 16 / 11; }
.stack4.reveal .tile { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.stack4.reveal .tile:nth-child(even) { transition-delay: .12s; }
.stack4.reveal .tile.in { opacity: 1; transform: none; }
@media (max-width: 560px) { .tiles.stack4 { grid-template-columns: 1fr; gap: 32px; } .stack4.reveal .tile:nth-child(even) { transition-delay: 0s; } }

/* dock moves up into the header: one compact bar, same icons and hover tricks */
.dock { top: 14px; bottom: auto; left: auto; right: var(--gutter); transform: none; gap: 2px; padding: 5px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(0,0,0,.07); }
.dk { flex-direction: row; width: auto; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 11px; transition: background .2s; }
.dk:hover { background: rgba(0,0,0,.035); }
.dk[aria-current="page"] { background: rgba(0,0,0,.055); }
.dk[aria-current="page"] .dk-lb { text-decoration: none; }
.dk-ic { width: 28px; height: 28px; }
.dk-tile { border-radius: 8px; }
.dk-lb { font: 600 13px/1 var(--sans); }
.dk:hover .dk-ic { transform: translateY(-2px) scale(1.06); }
.dk-about:hover .dk-ic { transform: translateY(-2px) rotate(-8deg) scale(1.06); }
.dk-hae { width: 15px; height: 19px; }
.dk-hi { top: -9px; right: -16px; padding: 2px 5px; font-size: 9px; border-radius: 6px 6px 6px 2px; }
@media (max-width: 560px) {
  .dock { right: 12px; top: 12px; }
  .dk { padding: 5px; }
  .dk-lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* sound toggle sits beside play/pause, same glass */
.vp-snd { left: 64px; }
.vp-snd .i-on { display: none; } .vp-snd.is-muted .i-on { display: none; } .vp-snd.is-muted .i-off { display: block; }
.vp-snd:not(.is-muted) .i-on { display: block; } .vp-snd:not(.is-muted) .i-off { display: none; }
.vp-snd svg { width: 16px; height: 16px; }
@media (max-width: 680px) { .vp-snd { left: 56px; } }

/* about: a quiet contact line under the bio */
.ab-bio .ab-links { margin-top: 26px; font: 400 13px/1.6 var(--mono); color: var(--muted); }
.ab-bio .ab-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.ab-bio .ab-links a:hover { color: var(--ink); }
.ab-bio .ab-links i { font-style: normal; color: var(--faint); margin: 0 10px; }

/* websites I've made: magnetic pills; hovering one pops a tilted preview clip above it
   (after Akash's magnetic hover tooltips, framer.university) */
.rmade .rm-h { font: 400 15px/1 var(--mono); letter-spacing: .02em; color: var(--ink); border: 0; padding: 0; margin: 0 0 28px; }
.rm-h span { color: var(--muted); }
.mg-row { display: flex; flex-wrap: wrap; gap: 14px 12px; padding-top: 8px; }
.mg { position: relative; display: block; text-decoration: none; color: inherit; }
.mg-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 10px; background: #fff;
  font: 400 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #6b6862; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
  transform: translate(var(--bx, 0px), var(--by, 0px)); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), color .2s, box-shadow .2s; }
.mg:hover .mg-btn, .mg:focus-visible .mg-btn { color: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.1); }
.mg:focus-visible { outline: none; } .mg:focus-visible .mg-btn { outline: 2px solid var(--link); outline-offset: 2px; }
.mg-ic { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; flex: none; }
.mg-ring { display: grid; place-items: center; background: #fbeceb; color: #a13a3a; font-size: 11px; }
.mg-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; width: 280px; margin-left: -140px; pointer-events: none; perspective: 700px;
  transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform .45s cubic-bezier(.2, 1.2, .4, 1); }
.mg-card { display: block; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 18px 40px rgba(28, 28, 26, .18);
  transform-origin: 50% 100%; opacity: 0; transform: translateY(10px) scale(.6) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity .2s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.mg.on .mg-card { opacity: 1; transform: translateY(0) scale(1) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.mg-card video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; background: #eeeeec; }
.mg-cap { display: block; padding: 8px 6px 4px; font: 400 12px/1.4 var(--sans); color: var(--muted); text-align: left; }
@media (hover: none), (max-width: 700px) { .mg-tip { display: none; } }
@media (max-width: 560px) { .mg-row { gap: 10px 8px; } .mg-btn { font-size: 12px; padding: 8px 11px 8px 8px; } }
@media (prefers-reduced-motion: reduce) { .mg-btn, .mg-tip, .mg-card { transition: opacity .2s; } }

/* record player, bottom-left (vinyl.js): a spinning disc that opens into a little card */
.vinyl { position: fixed; left: 20px; bottom: 20px; z-index: 40; display: grid; justify-items: center; width: 64px; padding: 8px; border-radius: 22px;
  background: rgba(252, 251, 248, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.08);
  transition: width .45s var(--ease), padding .45s var(--ease), opacity .3s; }
.vinyl.open { width: 236px; padding: 18px 18px 14px; }
html.playing .vinyl { opacity: 0; pointer-events: none; }
.vy-disc { width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.vy-disc:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.vy-rec { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #151515 0 1.5px, #232323 1.5px 3px), #1a1a1a;
  box-shadow: inset 0 0 0 2px #0e0e0e, 0 6px 16px rgba(0,0,0,.25); animation: vy-spin 4s linear infinite; animation-play-state: paused; }
.vy-rec::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 15%, rgba(255,255,255,.14) 20%, transparent 26% 65%, rgba(255,255,255,.1) 70%, transparent 76%); }
.vinyl.on .vy-rec { animation-play-state: running; }
.vy-label { position: relative; z-index: 1; display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #d8452f 50%, #f1ead9 50%); overflow: hidden; }
.vy-label::after { content: ""; position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #1a1a1a; }
.vy-hae { position: absolute; left: 14%; top: 22%; width: 34%; height: 30%; background: #f1ead9; -webkit-mask: url(assets/hae-word.webp) center / contain no-repeat; mask: url(assets/hae-word.webp) center / contain no-repeat; }
.vy-label em { position: absolute; right: 12%; bottom: 20%; font: 600 7px/1 var(--sans); font-style: normal; color: #b23a28; writing-mode: vertical-rl; letter-spacing: .1em; }
.vinyl:not(.open) .vy-label em { display: none; }
@keyframes vy-spin { to { transform: rotate(360deg); } }
.vy-body { display: none; width: 100%; text-align: center; }
.vinyl.open .vy-body { display: block; animation: vy-in .4s var(--ease); }
@keyframes vy-in { from { opacity: 0; transform: translateY(6px); } }
.vy-now { display: inline-flex; white-space: nowrap; align-items: center; gap: 7px; margin-top: 14px; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8a8780; }
.vy-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; color: #d8452f; }
.vy-eq i { width: 2px; height: 30%; border-radius: 1px; background: currentColor; }
.vinyl.on .vy-eq i { animation: vy-eq .9s ease-in-out infinite; }
.vy-eq i:nth-child(2) { animation-delay: .2s; } .vy-eq i:nth-child(3) { animation-delay: .45s; } .vy-eq i:nth-child(4) { animation-delay: .1s; }
@keyframes vy-eq { 50% { height: 100%; } }
.vy-title { font: 400 15px/1.3 var(--mono); color: var(--ink); margin-top: 10px; }
.vy-artist { font: 400 12px/1.2 var(--mono); color: var(--muted); margin-top: 4px; }
.vy-bar { display: block; height: 3px; margin-top: 14px; border-radius: 2px; background: #dedbd4; overflow: hidden; }
.vy-bar i { display: block; height: 100%; width: var(--p, 0%); background: #6b6862; transition: width 1s linear; }
.vy-time { font: 400 12px/1 var(--mono); color: var(--muted); margin-top: 10px; font-variant-numeric: tabular-nums; }
.vy-time b { color: var(--ink); font-weight: 500; }
.vy-play { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 12px 7px 10px; border: 0; border-radius: 999px; cursor: pointer;
  font: 400 12px/1 var(--mono); color: var(--ink); background: rgba(0,0,0,.06); transition: background .2s; }
.vy-play:hover, .vy-play:focus-visible { background: rgba(0,0,0,.1); }
.vy-play:disabled { cursor: progress; opacity: .7; }
.vy-ico { width: 0; height: 0; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent currentColor; }
.vinyl.live .vy-ico { width: 7px; height: 9px; border: 0; border-left: 2.5px solid; border-right: 2.5px solid; }
.vinyl.live .vy-eq { color: #2f8f5b; }
.vy-yt { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .vinyl.on .vy-rec, .vinyl.on .vy-eq i { animation: none; } .vy-bar i { transition: none; } }
.vy-toggle { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--muted); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.08); opacity: 0; transition: opacity .2s, transform .3s var(--ease); }
.vinyl:hover .vy-toggle, .vinyl.open .vy-toggle, .vy-toggle:focus-visible { opacity: 1; }
.vinyl.open .vy-toggle { transform: rotate(180deg); }
@media (max-width: 560px) { .vinyl { left: 12px; bottom: 12px; width: 54px; padding: 6px; } .vinyl.open { width: 210px; } .vy-now { letter-spacing: .02em; } .vy-artist { font-size: 11px; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .vy-rec, .vy-eq i { animation: none !important; } }

/* about: experience and education as quiet one-line rows (after baothiento.com) */
.ab-simple { list-style: none; margin: 0; padding: 0; }
.ab-simple li { display: grid; grid-template-columns: 40% minmax(0, 1fr) 7.5em; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.ab-simple li:first-child { border-top: 0; }
.ab-simple b { font-weight: 500; color: var(--ink); }
.ab-simple b a { color: inherit; text-decoration: underline; text-decoration-color: #cfcbc2; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.ab-simple b a:hover { text-decoration-color: var(--ink); }
.ab-simple span { color: var(--muted); }
.ab-simple time { font: 400 13px/1 var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .ab-simple li { grid-template-columns: 1fr auto; gap: 2px 12px; } .ab-simple span { grid-column: 1; grid-row: 2; font-size: 14px; } .ab-simple time { grid-row: 1; grid-column: 2; } }
.ab-portrait img { aspect-ratio: 4 / 5; }
/* on phones the portrait sits above the bio, centred, instead of squeezing beside it */
@media (max-width: 640px) { .rc .ab-hero { grid-template-columns: minmax(0, 1fr); } .rc .ab-portrait { order: -1; width: min(220px, 60%); justify-self: center; margin-bottom: 8px; } }
.ab-simple time { text-align: right; }

/* about: same column and side padding as the homepage (1080px max, centred, gutter on both sides) */
body.about .ab, body.about.rc .ab { width: auto; max-width: 1080px; margin: 0 auto; padding: 132px var(--gutter) 160px; box-sizing: border-box; }
body.about .ab-strip { max-width: none; padding: 0; }
@media (max-width: 640px) { body.about .ab, body.about.rc .ab { padding-top: 96px; } }

/* the arcade closes every page: case studies offset it past their fixed side nav */
@media (min-width: 901px) { body.rc:not(.about) .arcade, body.rc:not(.about) .foot { margin-left: var(--side); } body.rc:not(.about) .foot { max-width: calc(1080px); } }
.arcade { border-top: 0; }

/* about: the Home / About crumb lines up with the content column, like the homepage */
body.about .cs-side { position: absolute; left: max(0px, calc((100% - 1080px) / 2)); bottom: auto; width: auto; padding: 40px var(--gutter); pointer-events: none; }
body.about .cs-side a { pointer-events: auto; }

/* about: a stack of polaroids; the top one tosses to the back on click / drag (pstack.js) */
.ab-life-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.pst-hint { margin-top: 14px !important; font: 400 13px/1.4 var(--mono) !important; color: var(--faint) !important; }
.pst { position: relative; aspect-ratio: 1 / 1.12; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none; }
.pst:focus-visible { outline: 2px solid var(--link); outline-offset: 8px; border-radius: 6px; }
.pst-card { position: absolute; inset: 4% 6%; margin: 0; padding: 6% 6% 0; background: #fff; border-radius: 3px; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 30px -6px rgba(40, 35, 25, .28);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: transform .5s cubic-bezier(.2, 1, .3, 1), box-shadow .3s; }
.pst-card.drag { transition: none; cursor: grabbing; }
.pst-card img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 722; object-fit: cover; background: #f1eee6; pointer-events: none; }
.pst-card figcaption { padding: 6% 0 7%; text-align: center; font: 500 clamp(20px, 2.2vw, 28px)/1 "Caveat", "Comic Sans MS", cursive; color: #1d1d1b; transform: rotate(-2deg); }
.pst:hover .pst-card.top { box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 22px 44px -8px rgba(40, 35, 25, .34); }
@media (max-width: 760px) { .ab-life-row { grid-template-columns: 1fr; } .pst { width: min(320px, 86%); margin: 8px auto 0; } }
@media (prefers-reduced-motion: reduce) { .pst-card { transition: none; } }

/* bottom pill nav: grey glass bar, the light pill marks the current page and slides to whatever you hover (pnav.js) */
.dock.pnav { top: auto; bottom: 22px; left: 50%; right: auto; transform: translateX(-50%); display: flex; gap: 0; padding: 6px; border-radius: 18px;
  background: rgba(150, 150, 150, .78); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18); }
.pnav a { position: relative; z-index: 1; padding: 11px 20px; border-radius: 13px; font: 500 16px/1 var(--sans); letter-spacing: -.01em; color: #232323; text-decoration: none; transition: color .2s; }
.pnav a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pn-hi { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 13px; background: #e4e4e4;
  box-shadow: 0 4px 12px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7); transform: translateX(var(--hx, 0px)); width: var(--hw, 0px);
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), width .35s cubic-bezier(.3, 1.3, .5, 1); }
@media (max-width: 480px) { .pnav a { padding: 10px 16px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .pn-hi { transition: none; } }

/* Apple-style liquid glass for the bottom nav: clear, heavily blurred and saturated, with a bright rim and soft inner light */
.dock.pnav { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16)); border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(22px) saturate(1.9) brightness(1.04); -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(0,0,0,.05), inset 0 0 18px rgba(255,255,255,.25); }
.dock.pnav::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.55), transparent 55%), radial-gradient(80% 60% at 90% 110%, rgba(255,255,255,.25), transparent 60%); }
.pnav a { color: #1c1c1e; }
.pn-hi { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7)); box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.12), inset 0 1px 0 #fff, inset 0 -1px 1px rgba(0,0,0,.04); }
@media (max-width: 560px) { .dock.pnav { right: auto; top: auto; left: 50%; bottom: 16px; } }

/* arcade footer: just the cabinet, centred */
.arcade .cab-float { grid-column: 2; }
@media (max-width: 900px) { .arcade .cab-float { grid-column: auto; } }
@media (max-width: 900px) { .arcade { min-height: auto; padding-top: 48px; padding-bottom: 32px; } }

/* teaser above the arcade */
.arcade { grid-template-rows: auto auto; }
.arc-tease { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 34em; margin-bottom: 8px; }
.arc-k { font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.arc-tease h2 { font: 400 clamp(28px, 3.2vw, 42px)/1.15 "Newsreader", Georgia, serif; letter-spacing: -.01em; color: #2e3640; border: 0; padding: 0; margin: 14px 0 0; }
.arc-tease p:last-child { font-size: 16px; line-height: 1.6; color: var(--body); margin-top: 12px; }
html.playing .arc-tease { opacity: 0; transition: opacity .3s; }

/* let's talk, after the arcade */
.talk { padding-top: 40px; padding-bottom: 24px; }
.talk h2 { font: 500 clamp(44px, 5.4vw, 72px)/1 var(--sans); letter-spacing: -.04em; color: #1d1d1b; border: 0; padding: 0; margin: 0; }
.talk > p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--body); margin-top: 22px; max-width: 34em; }
.talk-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.talk-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: 999px; font: 500 17px/1 var(--sans); text-decoration: none; cursor: pointer;
  color: var(--ink); background: linear-gradient(180deg, #fff, #f6f4ef); border: 1px solid #ddd9cf; box-shadow: 0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 #fff; transition: transform .2s var(--ease), box-shadow .2s; }
.talk-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 #fff; }
.talk-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.talk-btn.primary { color: #fff; background: linear-gradient(180deg, #557a5c, #3f6046); border-color: #3a5940; box-shadow: 0 2px 6px rgba(40, 70, 45, .3), inset 0 1px 0 rgba(255,255,255,.22); }
.talk-btn.primary:hover { box-shadow: 0 10px 22px rgba(40, 70, 45, .3), inset 0 1px 0 rgba(255,255,255,.22); }
.talk-btn.primary svg { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 50% 90%; }
.talk-btn.primary:hover svg { transform: rotate(-14deg); }
.talk-btn.copied { color: #3f6046; border-color: #a9c3ad; }
.talk-links { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.talk-links a { font-size: 18px; color: var(--body); text-decoration: none; transition: color .2s; }
.talk-links a:hover { color: var(--ink); }
@media (max-width: 560px) { .talk-btn { padding: 13px 20px; font-size: 16px; } .talk-links { gap: 10px 24px; } .talk-links a { font-size: 16px; } }
.nw { white-space: nowrap; }
.arc-tease h2 { text-wrap: balance; }

/* Playground (after pricharielp.framer.website/playground): pixel hero, full-bleed rows of rounded cards.
   Each card shows a still; its clip plays only on hover (playground.js) */
body.pg { background: #f8f8f6; }
.pg-main { padding: 0 20px 140px; }
.pg-hero { position: relative; max-width: 1100px; margin: 0 auto; padding: 72px 0 64px; text-align: center; }
.pg-pill { display: inline-block; padding: 9px 20px; border: 1.5px solid #1c1c1a; border-radius: 999px; font: 400 clamp(13px, 1.3vw, 18px)/1 "Silkscreen", var(--mono); letter-spacing: .02em; text-transform: uppercase; color: #1c1c1a; }
.pg-title { display: grid; margin: 26px 0 0; font: 700 clamp(30px, 8vw, 124px)/.86 "Silkscreen", var(--mono); letter-spacing: -.09em; text-transform: uppercase; color: #1c1c1a; }
.pg-sub { max-width: 30em; margin: 30px auto 0; font: 400 clamp(11px, 1vw, 13px)/1.45 "Silkscreen", var(--mono); text-transform: uppercase; color: #3a3a38; }
.pg-tags { position: absolute; inset: 40px 0 0; pointer-events: none; }
.pg-tag { position: absolute; transform: translate(-50%, -50%); padding-top: 12px; font: italic 400 clamp(16px, 1.6vw, 22px)/1 "Instrument Serif", Georgia, serif; color: #4a4944; }
.pg-tag::before { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #3a3a38; }
.pg-grid { display: grid; gap: 20px; }
.pg-row { display: flex; gap: 20px; height: clamp(260px, 27vw, 420px); }
.pg-card { position: relative; flex: var(--g, 1) 1 0; min-width: 0; border-radius: 10px; overflow: hidden; background: #e9e7e1; cursor: pointer; transition: transform .45s var(--ease), box-shadow .45s; }
.pg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.14); }
.pg-card .sq-open { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; background: none; cursor: pointer; }
.pg-card .sq-open:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; border-radius: 10px; }
.pg-card .sq-media { position: absolute; inset: 0; display: block; padding: 0 !important; background: none; }
.pg-card .sq-media img, .pg-card .sq-media video { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; transition: transform .8s var(--ease); }
.pg-card:hover .sq-media img, .pg-card:hover .sq-media video { transform: scale(1.03); }
.pg-card .sq-media.px img { image-rendering: pixelated; }
.pg-badge { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border: 1px solid #1c1c1a; border-radius: 6px; background: #fff;
  font: 400 11px/1 "Silkscreen", var(--mono); color: #1c1c1a; pointer-events: none; }
.pg-badge i { width: 7px; height: 7px; border: 1px solid currentColor; box-shadow: inset 0 0 0 1.5px #fff; background: currentColor; }
.pg-card.playing .pg-badge i { background: #e5352b; border-color: #e5352b; animation: led 1s steps(1) infinite; }
@media (max-width: 900px) { .pg-tags { display: none; } .pg-hero { padding: 48px 0 40px; } }
@media (max-width: 760px) {
  .pg-main { padding: 0 12px 140px; } .pg-grid, .pg-row { gap: 12px; }
  .pg-row { flex-direction: column; height: auto; }
  .pg-card { flex: none; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .pg-card, .pg-card .sq-media img, .pg-card .sq-media video { transition: none; } }

/* playground v2: the old "Just tinkering..." header, and justified rows. Each card takes its media's own
   aspect ratio and grows in proportion to it, so every card in a row shares one height and nothing is cropped */
.pg-hero { text-align: left; max-width: none; padding: 56px 0 40px; }
.pg-hero .sq-title { margin-top: 36px; }
.pg-row { height: auto; align-items: flex-start; }
.pg-card { flex: var(--g, 1) 1 0; aspect-ratio: var(--ar); }
.pg-card .sq-media img, .pg-card .sq-media video { object-fit: cover; }
@media (max-width: 760px) {
  .pg-row { flex-direction: row; flex-wrap: wrap; }
  .pg-card { flex: var(--g) 1 calc(var(--g) * 42%); }
}
.pg-badge { text-transform: uppercase; }
/* polaroid stack: bigger photo, quieter caption */
.pst-card { padding: 4.5% 4.5% 0; }
.pst-card img { aspect-ratio: 1 / 1.02; }
.pst-card figcaption { padding: 3.5% 0 4.5%; font-size: clamp(15px, 1.5vw, 19px); color: #8a8780; }
.pst-card { bottom: auto; } .pst { aspect-ratio: 1 / 1.08; }
/* playground uses the same column and side padding as the homepage and about (1080 max, centred, gutter) */
.pg-main { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter) 140px; box-sizing: content-box; }
.pg-hero { padding-top: 40px; }
@media (max-width: 760px) { .pg-main { padding: 0 var(--gutter) 140px; } }
.pg-main { box-sizing: border-box; }

/* websites I've made: list + live preview window (app.js) */
.sl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.sl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sl-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 10px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .25s, padding .3s var(--ease); }
.sl-row:hover, .sl-row.on, .sl-row:focus-visible { background: rgba(255,255,255,.7); padding-left: 16px; }
.sl-row:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.sl-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.sl-icimg { width: 20px; height: 20px; object-fit: contain; }
.sl-heart { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; background: #fbeceb; color: #a13a3a; font-size: 14px; }
.sl-tx { display: grid; gap: 2px; min-width: 0; }
.sl-tx b { font: 500 16px/1.3 var(--sans); }
.sl-tx > span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.sl-peek { margin-left: auto; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--link); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--ease); white-space: nowrap; }
.sl-row:hover .sl-peek, .sl-row.on .sl-peek { opacity: 1; transform: none; }
.sl-go { flex: none; color: var(--faint); transition: color .2s, transform .25s var(--ease); }
.sl-row:hover .sl-go { color: var(--ink); transform: translate(2px, -2px); }
.sl-stage { position: sticky; top: 96px; }
.sl-win { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 14px 36px rgba(28, 28, 26, .1); transition: box-shadow .3s; }
.sl-stage.live .sl-win { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 22px 50px rgba(28, 28, 26, .16); }
.sl-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #f3f2ef; border-bottom: 1px solid #e6e3db; }
.sl-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcd9d2; }
.sl-stage.live .sl-bar i:nth-child(1) { background: #ff5f57; } .sl-stage.live .sl-bar i:nth-child(2) { background: #febc2e; } .sl-stage.live .sl-bar i:nth-child(3) { background: #28c840; }
.sl-url { margin: 0 auto; padding: 4px 14px; border-radius: 6px; background: #fff; font: 400 11px/1 var(--mono); font-style: normal; color: var(--muted); transform: translateX(-20px); }
.sl-screen { position: relative; aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, #faf9f6 0 10px, #f5f3ee 10px 20px); }
.sl-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .3s; }
.sl-vid.on { opacity: 1; }
.sl-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; color: var(--muted); transition: opacity .25s; }
.sl-empty svg { color: var(--faint); animation: sl-nudge 1.8s ease-in-out infinite; }
.sl-empty b { font: 500 15px/1.3 var(--sans); color: var(--body); }
.sl-empty span { font-size: 13px; }
.sl-stage.live .sl-empty { opacity: 0; }
@keyframes sl-nudge { 50% { transform: translate(-6px, 2px); } }
@media (max-width: 860px), (hover: none) { .sl-wrap { grid-template-columns: 1fr; } .sl-stage, .sl-peek { display: none; } }
@media (prefers-reduced-motion: reduce) { .sl-empty svg { animation: none; } }
/* the "Preview →" hint floats over the row so hovering never reflows it */
.sl-row { padding-right: 44px; } .sl-row:hover, .sl-row.on, .sl-row:focus-visible { padding-left: 10px; }
.sl-peek { position: absolute; right: 40px; top: 50%; margin: 0; padding: 4px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(47,91,211,.15); transform: translate(-6px, -50%); }
.sl-row:hover .sl-peek, .sl-row.on .sl-peek { transform: translate(0, -50%); }
.sl-go { position: absolute; right: 14px; top: 50%; margin-top: -8px; }
.sl-row:hover .sl-go { transform: translate(2px, -2px); }

/* websites v2: preview window centred against the list, no hover tag, and multiplayer-style cursors:
   "Haechal" wanders around the window (and points at it while you browse), "You" follows your pointer */
.sl-wrap { align-items: center; }
.sl-stage { position: relative; top: auto; padding: 48px 0; }
.sl-peek { display: none !important; }
.rmade { position: relative; }
.mc { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: flex-start; pointer-events: none; will-change: transform; }
.mc svg { flex: none; margin-top: -4px; margin-right: -2px; }
.mc b { margin-top: 10px; padding: 7px 16px; border-radius: 999px; font: 500 15px/1 var(--sans); color: #fff; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.mc-hae svg { fill: #e8633f; } .mc-hae b { background: #e8633f; }
.mc-hae { transition: transform 1.1s cubic-bezier(.45, .05, .25, 1); }
.mc-you svg { fill: #1c1c1a; } .mc-you b { background: #1c1c1a; }
.mc-you { opacity: 0; transition: opacity .2s; }
.rmade.has-you .mc-you { opacity: 1; }
@media (max-width: 860px), (hover: none) { .mc { display: none; } }
@media (prefers-reduced-motion: reduce) { .mc-hae { transition: none; } }
/* inside the websites section the "You" arrow replaces the system cursor */
@media (hover: hover) and (min-width: 861px) { .rmade.has-you, .rmade.has-you * { cursor: none !important; } .mc-you svg { margin-top: 0; } }

/* Belle & Kate thumbnail: an emerald croc Birkin on cream, the B&K ROOM wordmark beneath it */
.th-bnk { background: radial-gradient(120% 90% at 50% 35%, #fbf8f1, #efe8da); }
.bk-thumb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6%; padding: 7% 0 8%; }
.th-bnk .bk-thumb img { position: static; inset: auto; object-fit: contain; transform: none; }
.th-bnk .bk-bag { width: auto !important; height: 62% !important; max-height: 62%; filter: drop-shadow(0 18px 22px rgba(30, 50, 35, .25)); transition: transform .6s var(--ease); }
.th-bnk .bk-logo { width: 34% !important; height: auto !important; opacity: .9; }
.tile:hover .th-bnk .bk-bag { transform: translateY(-6px) rotate(-2deg); }
.bk-thumb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; container-type: size; }
.th-bnk .bk-bag { height: 56cqh !important; max-height: none; width: auto !important; max-width: 70%; }
.th-bnk .bk-logo { width: 30cqw !important; max-width: 200px; margin-top: 7cqh; }

/* preloader (home only): the hologram mark sits centred, catches one sheen, then flies into its seat in the headline.
   The mark is the same .hae-fly element the scroll animation uses, so it lands exactly where it lives. */
.pl { display: none; }
html.preload { overflow: hidden; }
html.preload .pl { display: block; position: fixed; inset: 0; z-index: 200; background: var(--bg); transition: opacity .7s cubic-bezier(.4, 0, .2, 1); }
html.preload .hae-fly { z-index: 201; opacity: 0; }
html.preload.pl-show .hae-fly { opacity: 1; transition: opacity .5s ease; }
html.preload.pl-out .pl { opacity: 0; }
html.preload .hae-fly.shine .hae-in::after { display: block; opacity: .95; mix-blend-mode: color-dodge; animation: hae-sheen-once 1s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes hae-sheen-once { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* the headline words settle in as the mark lands */
/* (opacity only on the h1: a transform would shift the seat the mark is measured against) */
html.preload .rhero h1 { opacity: 0; }
html.preload .rhero .rh-now { opacity: 0; transform: translateY(12px); }
html.preload.pl-out .rhero h1 { opacity: 1; transition: opacity .6s .4s ease; }
html.preload.pl-out .rhero .rh-now { opacity: 1; transform: none; transition: opacity .6s .55s ease, transform .7s .55s cubic-bezier(.2, .7, .2, 1); }

/* headline word rotator: every word stacks in one grid cell, so the box is always as wide as the longest
   word and the line never reflows; overflow:clip (not hidden) keeps the text baseline */
.rw { display: inline-grid; overflow: clip; padding: .08em 0 .16em; margin: -.08em 0 -.16em; }
.rw > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(70%);
  transition: transform .8s cubic-bezier(.6, 0, .2, 1), opacity .55s ease; }
.rw > .on { opacity: 1; transform: none; transition-delay: .12s; }
.rw > .out { opacity: 0; transform: translateY(-70%); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .rw > span { transition: none; } }