/* The studio index. Same paper-and-ink bones as Nijimi's, Furlong's, Enogu's
   and Neshi's own sites — Helvetica Neue, no webfonts, no trackers — but built
   for one job the product sites don't do: a big, image-led index of the work.
   Swiss grid, oversized type, large thumbnails. */

:root {
  --paper:   #F6F3EC;
  --panel:   #EDE9DE;
  --ink:     #201B15;
  --second:  #5E574C;
  --faint:   #9A9184;
  --rule:    rgba(32, 27, 21, 0.14);
  --signal:  #201B15;
  --measure: 34rem;

  --nijimi:  #C8102E;
  --furlong: #E0331B;
  --enogu: #D8412F;
  --neshi:   #8C3B2E;
  --corals:  #C23B7A;
  --dots:    #6E8FC4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #171310;
    --panel:  #1F1A15;
    --ink:    #EFE9DD;
    --second: #A79F93;
    --faint:  #6E675C;
    --rule:   rgba(239, 233, 221, 0.16);
    --signal: #EFE9DD;

    --nijimi:  #E8556B;
    --furlong: #F0563E;
    --enogu: #EA6450;
    --neshi:   #C68A6E;
    --corals:  #E169A0;
    --dots:    #9DB6DE;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 78rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap.doc { max-width: 46rem; }
.narrow { max-width: var(--measure); }

/* ---- long-form article, shared with product "Notes" pages ---- */

.claim {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  line-height: 1.22; letter-spacing: -0.02em; max-width: 30rem;
  font-weight: 500;
}
.doc p, .doc .lede { max-width: var(--measure); }
.doc h2 { margin-top: 2.6rem; font-size: 1.3rem; }
.doc h2:first-of-type { margin-top: 1.5rem; }

.figure { margin: 2.2rem 0; }
.figure img {
  display: block; width: 100%; max-width: 20rem;
  border-radius: 6px; border: 1px solid var(--rule);
}
.figure figcaption {
  font-size: .82rem; color: var(--faint); margin-top: .7rem; max-width: var(--measure);
}
.figure.row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.figure.row img { max-width: 14rem; }

a { color: inherit; }
hr { border: none; border-top: 1px solid var(--rule); margin: 0; }

/* ---- type ---- */

h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.4rem, 8.6vw, 6.4rem); }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.6rem); margin-bottom: 1rem; }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: 0.2rem; }
p  { margin: 0 0 1.1rem; }

.kicker {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.4rem;
}
.muted { color: var(--second); }
.small { font-size: 0.85rem; }

/* ---- masthead ---- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(120%) blur(9px);
  -webkit-backdrop-filter: saturate(120%) blur(9px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.topbar.stuck { border-color: var(--rule); }

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem;
  padding: 1.6rem 0 1.3rem;
}
.wordmark {
  font-size: .78rem; letter-spacing: .32em; font-weight: 700;
  text-decoration: none; color: var(--ink);
}
.masthead nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.masthead nav a {
  font-size: .88rem; color: var(--second); text-decoration: none;
  transition: color .2s ease;
}
.masthead nav a:hover { color: var(--ink); }

/* ---- hero ---- */

.hero { padding: 5rem 0 4rem; }
.hero h1 { max-width: 22ch; }
.hero .lede { margin-top: 1.8rem; font-size: 1.15rem; color: var(--second); }

/* ---- work grid: the four shipped products, large thumbnails ---- */

.section { padding: 3.2rem 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
}

.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.tile-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
}
.tile-frame { background: var(--frame, var(--paper)); }
.tile-frame img, .tile-frame svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.16,.8,.3,1);
}
.tile-frame.contain img { object-fit: contain; padding: 6%; }

/* ---- live thumbnails: each one a small working piece of its app ---- */

.tile-frame .layer { position: absolute; inset: 0; }
.tile-frame canvas.layer { width: 100%; height: 100%; display: block; }

/* Enogu: the same strokes lit from the right, faded in by the pointer */
.tile-frame .lit { opacity: var(--light, 0); transition: opacity .25s ease; }
.tile-frame .glare {
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 30%),
              rgba(255, 252, 240, .55), rgba(255, 252, 240, 0) 38%);
  mix-blend-mode: soft-light;
}

/* Neshi: in for 4s, hold for 2s, out for 6s */
.neshi .orb {
  transform-box: fill-box; transform-origin: center;
  animation: neshi-breathe 12s ease-in-out infinite;
}
@keyframes neshi-breathe {
  0%   { transform: scale(.7); }
  33%  { transform: scale(1); }
  50%  { transform: scale(1); }
  100% { transform: scale(.7); }
}
.neshi .cue text { opacity: 0; animation: 12s linear infinite; }
.neshi .c-in   { animation-name: cue-in !important; }
.neshi .c-hold { animation-name: cue-hold !important; }
.neshi .c-out  { animation-name: cue-out !important; }
@keyframes cue-in   { 0%,2% {opacity:0} 6%,28% {opacity:.75} 32%,100% {opacity:0} }
@keyframes cue-hold { 0%,33% {opacity:0} 37%,46% {opacity:.75} 50%,100% {opacity:0} }
@keyframes cue-out  { 0%,50% {opacity:0} 54%,94% {opacity:.75} 98%,100% {opacity:0} }

.neshi .drift { transform-box: view-box; animation: 36s ease-in-out infinite alternate; }
.neshi .d1 { animation-name: drift-1; }
.neshi .d2 { animation-name: drift-2; animation-duration: 44s; }
.neshi .d3 { animation-name: drift-3; animation-duration: 52s; }
@keyframes drift-1 { to { transform: translate(-18px, 14px) rotate(-3deg); } }
@keyframes drift-2 { to { transform: translate(16px, -12px) rotate(2deg); } }
@keyframes drift-3 { to { transform: translate(-12px, -10px) rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
  .neshi .orb, .neshi .drift, .neshi .cue text { animation: none; }
  .neshi .c-in { opacity: .75; }
}
.tile:hover .tile-frame img, .tile:hover .tile-frame svg { transform: scale(1.08); }

.tile-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--accent, var(--signal));
}
.tile-body {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 1.7rem 1.7rem;
}
.tile-body p { margin: .35rem 0 0; color: var(--second); max-width: 32ch; }
.tile-num {
  font-size: .78rem; letter-spacing: .12em; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.tile-arrow {
  font-size: 1.3rem; color: var(--accent, var(--signal));
  transition: transform .25s ease;
  flex-shrink: 0;
}
.tile:hover .tile-arrow { transform: translate(3px, -3px); }

/* ---- thoughts: a plain, text-led list of essays ---- */

.thought-list { border-top: 1px solid var(--rule); }
.thought {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.thought-main { min-width: 0; }
.thought-source {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: .5rem; display: block;
}
.thought h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.thought p { margin: 0; color: var(--second); max-width: 44ch; }
.thought .tile-arrow { font-size: 1.1rem; }
.thought:hover .tile-arrow { transform: translate(3px, -3px); }

/* ---- lab: dense grid of smaller experiments, no imagery ---- */

.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 900px) { .lab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lab-grid { grid-template-columns: 1fr; } }

.lab-item {
  background: var(--paper);
  padding: 1.5rem 1.6rem;
  min-height: 8.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.lab-item h3 { font-size: 1.05rem; }
.lab-item p { font-size: .92rem; color: var(--second); margin: .3rem 0 0; }
.lab-tag {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}

/* ---- footer ---- */

footer { padding: 3rem 0 4rem; }
footer .small { color: var(--faint); }