:root {
  --bg: #efefef;
  --bg-rgb: 239, 239, 239;
  --ink: #111;
  --mute: #8a8a8a;
  --line: rgba(0, 0, 0, .14);
  --glyph: 17, 17, 17;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --bg-rgb: 10, 10, 10;
    --ink: #e9e9e9;
    --mute: #707070;
    --line: rgba(255, 255, 255, .14);
    --glyph: 150, 170, 255;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scrollbar-width: none; }
/* ZA WARUDO: a perfect corner hit inverts the corner for half a second. */
.zw {
  position: fixed; z-index: 6; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none; mix-blend-mode: difference;
  background: radial-gradient(circle, var(--zw, #ff7a1a) 0 46%, transparent 70%);
  opacity: 0; transform: scale(.1);
}
.zw.go { animation: zw .5s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes zw {
  0% { opacity: 1; transform: scale(.1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}
@media (max-width: 640px) { .zw { width: 360px; height: 360px; margin: -180px 0 0 -180px; } }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--ink);
  font: 11px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .5; }

#field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; will-change: filter; }

.corner { position: fixed; z-index: 4; padding: 18px 20px; font-size: 11px; mix-blend-mode: difference; color: #fff; }
.tl { top: 0; left: 0; font-weight: 700; }
.tr { top: 0; right: 0; display: flex; gap: 18px; }
.bl { bottom: 0; left: 0; opacity: .75; font-variant-numeric: tabular-nums; }
.bl .live { animation: beat 2s ease-in-out infinite; }
@keyframes beat { 50% { opacity: .35; } }
.br { bottom: 0; right: 0; }

/* bouncing MODELS button */
.bouncer {
  position: fixed; left: 0; top: 0; z-index: 3;
  padding: 12px 18px;
  font-size: 14px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink);
  border: 1px solid var(--ink);
  will-change: transform;
  transition: background .15s, color .15s, opacity .2s;
}
/* Dead zone: dims the glyphs behind it so the button reads over the portrait. */
.bouncer::before {
  content: ""; position: absolute; inset: -16px -22px; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--bg-rgb), .94) 62%, rgba(var(--bg-rgb), 0));
  pointer-events: none;
}
.bouncer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--bg-rgb), .92); }
.bouncer:hover { opacity: 1; background: var(--ink); color: var(--bg); }
.bouncer.flash { background: var(--ink); color: var(--bg); }
.bouncer.flash::after { background: var(--ink); }

/* scroll track: the page never visibly moves, the work list materialises in place */
.track { height: 260vh; height: 240svh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 0 20px; z-index: 2; }
.work { width: 100%; max-width: 760px; max-height: 80vh; max-height: 76svh; overflow-y: auto; scrollbar-width: none; }
.work::-webkit-scrollbar { display: none; }
.work ol { list-style: none; }
.row { border-bottom: 1px solid var(--line); will-change: opacity, filter; }
.row:first-child { border-top: 1px solid var(--line); }

summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 40px 1fr 1.4fr 48px; gap: 12px; align-items: baseline;
  padding: 16px 0;
  font-variant-numeric: tabular-nums;
}
summary::-webkit-details-marker { display: none; }
summary .n, summary .y, summary .d { color: var(--mute); }
summary .t { font-weight: 700; }
summary .y { text-align: right; }
summary:hover .t { opacity: .5; }
details[open] summary .t::after { content: " —"; }

.body { padding: 0 0 26px 52px; max-width: 620px; font-size: 13px; line-height: 1.65; letter-spacing: 0; }
.body p + p { margin-top: 12px; }
.body .meta { font-size: 10px; letter-spacing: .08em; color: var(--mute); }
.body .links a { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-right: 18px; border-bottom: 1px solid var(--line); }
details[open] .body { animation: emerge .7s ease; }
@keyframes emerge { from { opacity: 0; filter: blur(8px); } }

.row.more { border: none; padding-top: 28px; color: var(--mute); }
.row.more a { color: var(--ink); }

@media (max-width: 640px) {
  .corner { padding: max(14px, env(safe-area-inset-top)) 16px 14px; font-size: 10px; }
  .bl, .br { padding: 14px 16px max(14px, env(safe-area-inset-bottom)); }
  .bl { font-size: 9px; }
  .bl .wide { display: none; }
  .bouncer { font-size: 13px; padding: 11px 16px; }
  .stage { padding: 0 16px; }
  summary { grid-template-columns: 26px 1fr 38px; row-gap: 2px; padding: 18px 0; font-size: 12px; }
  summary .t { grid-column: 2; }
  summary .y { grid-column: 3; grid-row: 1; }
  summary .d { display: block; grid-column: 2 / 4; grid-row: 2; font-size: 10px; letter-spacing: .06em; }
  .body { padding: 0 0 22px 38px; font-size: 14px; line-height: 1.6; }
  .body .links a { display: inline-block; padding: 6px 0; }
  .row.more { line-height: 2.2; padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  details[open] .body { animation: none; }
}

/* research log: same sticky track as the home page */
.log summary { grid-template-columns: 56px 1fr 30px; }
.log .body { padding-left: 68px; }
.row.head { border: none; padding-bottom: 22px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.row.head + .row { border-top: 1px solid var(--line); }
.row.head .t { font-weight: 700; letter-spacing: .14em; }
.row.head .d { color: var(--mute); }
@media (max-width: 640px) {
  .log summary { grid-template-columns: 48px 1fr 24px; }
  .log .body { padding-left: 0; }
}