/* The ring of cases. Positions, sizes and type sizes are set by ring.js from
   the viewport; here — only what does not move. */
@font-face { font-family: "Satoshi"; src: url("satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("inter-opsz.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #fafafa;
  --fg: #0a0a0a;
  --muted: #cacaca; /* the list's inactive names: --fg at .2 over --bg */
  --sans: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ring { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.liquid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* With the liquid layer the DOM cards stay for clicks, focus and captions only. */
.gl .threads, .gl .shot img, .gl .shot::after { visibility: hidden; }
/* still decoding — the shader reads its frames — just not shown */
.gl .shot video { opacity: 0; }
div.card { cursor: default; outline: none; }
.gl .shot { background: transparent; }
.threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.threads line { stroke: var(--muted); stroke-linecap: round; }
.cards { position: absolute; left: 0; top: 0; }
.card {
  position: absolute; left: 0; top: 0; display: block;
  color: inherit; text-decoration: none; -webkit-user-drag: none;
  transform-origin: 0 0; will-change: transform; visibility: hidden;
}
.shot { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #e9e9e7; }
.shot::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cap { display: none; justify-content: space-between; gap: 12px; padding-top: 6px; font-size: 15px; line-height: 1.3; }
.cap span:last-child { font-family: var(--mono); font-size: 13px; opacity: .55; white-space: nowrap; }
.card:focus-visible { outline: none; }
.card:focus-visible .shot { outline: 2px solid var(--fg); outline-offset: 6px; }

.title {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: "Inter Display", var(--sans); font-variation-settings: "opsz" 32; font-weight: 400;
  letter-spacing: -0.01em; white-space: pre; pointer-events: none; line-height: 1.3;
}
.title .ch { display: inline-block; overflow: hidden; vertical-align: top; }
.title .ch > span { display: inline-block; }

.list {
  position: fixed; top: 2.4vh; right: 12vw; z-index: 2; list-style: none;
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.4; letter-spacing: .01em; opacity: 0;
}
.list button { opacity: .2; transition: opacity .3s; padding: 0; text-align: left; }
.list button:hover, .list button[aria-current] { opacity: 1; }
.list button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; opacity: 1; }

.meta {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 1;
  display: flex; align-items: baseline; white-space: nowrap; letter-spacing: -0.01em; pointer-events: none;
}
.meta-l { left: 5.5vw; }
.meta-r { right: 5.5vw; }
.meta .slot { position: relative; display: inline-block; }
/* The outgoing word lies over the incoming one and takes no room, so the
   gap always follows the current word. */
.meta .slot > span:first-child { position: absolute; top: 0; left: 0; }
.meta-r .slot > span:first-child { left: auto; right: 0; }
.meta .name { font-family: var(--sans); font-weight: 500; }
.meta .idx { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.loader {
  position: fixed; left: 50%; bottom: 1vh; transform: translateX(-50%);
  font-family: var(--mono); letter-spacing: -0.01em; pointer-events: none;
}

.tag {
  position: fixed; left: 0; top: 0; z-index: 3; height: 40px; padding: 0 18px;
  display: flex; align-items: center; gap: 6px; border-radius: 20px;
  font: 500 14px/1 var(--sans); color: var(--fg);
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 6px 24px rgba(0, 0, 0, .08);
  pointer-events: none; transform: scale(0); will-change: transform;
}

/* Phone: no side list or side captions — each card carries its own. */
@media (max-width: 640px) {
  .list, .meta { display: none; }
  .cap { display: flex; }
  .tag { display: none; }
}

.fallback { max-width: 640px; margin: 0 auto; padding: 48px 16px; height: 100%; overflow: auto; }
.fallback h2 { font-weight: 500; font-size: 32px; margin-bottom: 24px; }
.fallback li { list-style: none; padding: 8px 0; border-top: 1px solid #ddd; }
.fallback a { color: inherit; }