/* Opus, the paper side (2026-10-04). The lab is the dark room; these pages are
   the score lying open beside it: white paper, black ink, and every board a
   small black window into the same room — neutral black, ivory cells. No
   accent colour on the paper; emphasis is weight and line. Loaded after
   feed.css and rps.css so it only has to say what changes. */
:root {
  --ink: #111111;
  --ink-2: #5d5b58;
  --ink-3: #9b9892;
  --line: #ecebe8;
  --line-2: #d8d6d1;
  --blue: #111111;          /* links and focus are ink now, marked by a hairline */
  --board: #0a0a0b;
  --cell: #ece7de;
  --cell-glow: 236,231,222;
}
body { font-family: "Helvetica Neue", -apple-system, system-ui, "PingFang SC", "Hiragino Sans GB", sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
b, strong { font-weight: 500; }

.play-header h1 { font-weight: 300; font-size: 30px; letter-spacing: .04em; }
html[lang="zh-CN"] .play-header h1 { letter-spacing: .12em; }
.play-header p { color: var(--ink-2); letter-spacing: .02em; }
.play-nav { gap: 22px; letter-spacing: .04em; }
.play-nav a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .4s cubic-bezier(.2,0,0,1), border-color .4s cubic-bezier(.2,0,0,1); }
.play-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* the avatar: bun drawn in ivory on the same black as every board */
.avatar { background: var(--board); }
.av-host { color: var(--cell); }

.post-text { letter-spacing: .01em; }

/* controls: hairline capsules, ink when chosen — no tinted fills */
.exhibit-controls button, #rps button { border-color: var(--line-2); color: var(--ink-2); font-weight: 400; transition: color .3s, border-color .3s, background .3s; }
.exhibit-controls button:hover, #rps button:hover { color: var(--ink); border-color: var(--ink-2); }
.exhibit-controls button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#rps .teams button[aria-pressed=true] { background: #f3f2ef; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
#rps .territory { height: 3px; }

.exhibit-details summary, .play-extra > summary { color: var(--ink-2); }
.exhibit-details a, #rps .source a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tool { color: var(--ink-3); }
.tool:hover { color: var(--ink); }

.reading-choices a { border-color: var(--line-2); color: var(--ink-2); }
.reading-choices a:hover { color: var(--ink); border-color: var(--ink); }

/* every board: a window into the dark room — and a breath of grain on the glass */
.post-media, #rps .board { position: relative; }
.post-media::after, #rps .board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: .06; mix-blend-mode: screen;
  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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the emoji in the team buttons and the neighbour cross: black-and-white photographs, not stickers */
#rps .teams button, #rps .cross { filter: grayscale(1); }