/* Ami Kobayashi — quiet catalogue layout: white page, the work carries the colour. */
:root {
  --ink: #141414;
  --muted: #8a8a8a;
  --rule: #e6e6e3;
  --paper: #ffffff;
  --side: 210px;
  --gap: 40px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dot-y: #ffe62e;
  --dot-p: #ff8cc6;
  --dot-b: #8fd0f7;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 13px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, figure, blockquote { margin: 0; }

/* ---------- frame: fixed name + medium list on the left ---------- */
.frame { padding: 28px var(--gap) 80px; }
.side {
  position: fixed; top: 28px; left: var(--gap); width: var(--side);
}
.name { font-size: 15px; letter-spacing: .01em; display: inline-block; margin-bottom: 26px; }
.side ul { list-style: none; padding: 0; margin: 0; }
.side li { margin: 0 0 2px; }
.side li.gap { margin-top: 18px; }
.side a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* the cursor is a polka dot (cursor.js) */
html.dot-cursor, html.dot-cursor * { cursor: none !important; }
.cursor-dot {
  position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  pointer-events: none; z-index: 1000; background: var(--dot-b);
  transition: width .2s cubic-bezier(.3, 1.7, .5, 1), height .2s cubic-bezier(.3, 1.7, .5, 1),
              margin .2s cubic-bezier(.3, 1.7, .5, 1), opacity .2s;
}
.cursor-dot.big { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.cursor-dot.gone { opacity: 0; }
.planted-layer { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 5; }
.planted { position: absolute; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .cursor-dot { transition: none; } }
main { margin-left: calc(var(--side) + var(--gap)); max-width: 1180px; }

/* ---------- home opening: looping clips ---------- */
.reel { margin-bottom: 64px; }
.loop video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eceae6; }
.loop .cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 7px; min-height: 20px; }
.lead video { max-height: 72vh; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.sound { display: inline-flex; align-items: center; gap: 12px; }
.snd {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer;
}
.snd:hover, .snd[aria-pressed="true"] { color: var(--ink); }
.snd[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.vol { -webkit-appearance: none; appearance: none; width: 110px; height: 16px; background: none; margin: 0; cursor: pointer; }
.vol::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.vol::-moz-range-track { height: 1px; background: var(--ink); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin-top: -4px; border: 0; }
.vol::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 0; }
.vol:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---------- thumbnail grids ---------- */
.group { margin-bottom: 56px; }
.group h2, .section-head, .sub {
  font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 18px; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--rule); transition: opacity .2s; }
.tile span { display: block; margin-top: 7px; }
.tile:hover { color: var(--ink); }
.tile:hover img { opacity: .82; }

/* ---------- a single work: images stacked, label beside ---------- */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 0 var(--gap); align-items: start; }
.label { grid-column: 2; grid-row: 1; position: sticky; top: 28px; }
.plates { grid-column: 1; grid-row: 1; }
.title { font-size: 13px; font-weight: 400; font-style: italic; margin-bottom: 6px; }
.title .year { font-style: normal; }
.label p { color: var(--ink); }
.label .desc { margin-top: 12px; max-width: 30em; }
.label .note { margin-top: 12px; color: var(--muted); font-style: italic; }
.plate { margin: 0 0 44px; }
.plate img, .plate video { max-height: 86vh; width: auto; cursor: zoom-in; }
.plate video { cursor: auto; width: 100%; max-width: 1000px; background: #000; }
.sub { margin-top: 64px; }
.process { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.process .plate { margin: 0; }
.process .plate img { max-height: none; width: 100%; }
.pager {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 20px; max-width: 1000px;
  flex-wrap: wrap;
}

/* ---------- text pages ---------- */
.text { max-width: 36em; font-size: 14px; line-height: 1.65; }
.text .title { font-size: 14px; margin-bottom: 4px; }
.text .context { color: var(--muted); margin-bottom: 28px; }
.text p { margin-bottom: 1em; }
.text blockquote { margin: 1.4em 0 1.6em 2em; }
.text blockquote p { margin-bottom: .4em; }
.text blockquote footer { color: var(--muted); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plate img:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- mid-width: label goes above the images ---------- */
@media (max-width: 1100px) {
  .work { display: block; }
  .label { position: static; margin-bottom: 26px; }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(255,255,255,.97); z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.lightbox[hidden] { display: none; }
body.locked { overflow: hidden; }

/* ---------- narrow screens: name + list on top, everything in one column ---------- */
@media (max-width: 900px) {
  :root { --gap: 16px; }
  .frame { padding: 20px var(--gap) 60px; }
  .side { position: static; width: auto; margin-bottom: 30px; }
  .name { margin-bottom: 10px; }
  .side ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .side li, .side li.gap { margin: 0; }
  main { margin-left: 0; }
  .work { display: block; }
  .label { position: static; margin-bottom: 22px; }
  .plate { margin-bottom: 22px; }
  .plate img { max-height: none; width: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .pager { font-size: 12px; }
  .strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  }
  .strip .loop { scroll-snap-align: start; }
  .strip { scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .reel { margin-bottom: 44px; }
}