/* Tangents — the page wears the palette of the piece on screen.
 * --bg / --ink / --accent / --alt / --peg are set by app.js on every seed. */

:root {
  --bg: #E8EDE4;
  --ink: #2F3D34;
  --accent: #B5C7B1;
  --alt: #7D9982;
  --peg: #F6F8F3;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 40%, transparent);
  --dim: color-mix(in srgb, var(--ink) 60%, transparent);
  --wash: color-mix(in srgb, var(--ink) 5%, transparent);
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-legendary: #D4A62A;
  --t-rare: #5B7CE6;
  --t-uncommon: #5FA37A;
  --gutter: clamp(18px, 3.4vw, 44px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Native controls (selects, spinners, scrollbars) follow the piece: light
   on a light ground, dark on a dark one. app.js toggles the class. */
:root { color-scheme: light; }
:root.dark { color-scheme: dark; }
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  /* the default light palette only; app.js sets the real values from the ink */
  :root { --line: rgba(47,61,52,.16); --line-strong: rgba(47,61,52,.4); --dim: rgba(47,61,52,.6); --wash: rgba(47,61,52,.05); }
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  scroll-behavior: smooth;
  transition: background-color .8s var(--ease), color .8s var(--ease);
}

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.mono { font-family: var(--mono); font-weight: 400; }
.dim { color: var(--dim); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- header -- */
/* The masthead: the mark and the name on the left, the sections in the
   middle, the piece's number on the right, a hairline under all of it. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter) 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; white-space: nowrap; }
.wordmark .mark { width: 26px; height: 26px; flex: none; }
.wordmark .name { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: .02em; font-variation-settings: "wdth" 90; }
.wordmark .by { font-family: var(--display); font-weight: 300; font-size: 13.5px; letter-spacing: .03em; color: var(--dim); margin-left: 7px; font-variation-settings: "wdth" 92; }
.top-nav { display: flex; gap: 26px; }
.top-nav a {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  transition: color .2s;
}
.top-nav a:hover { color: var(--ink); }
.top-right { display: flex; align-items: center; gap: 16px; }
.top-meta { font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.sound { font-family: var(--display); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: color .18s, border-color .18s; }
.sound:hover, .sound[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.top-meta #top-mint { color: var(--ink); }

/* --------------------------------------------------------------- hero -- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(24px, 4vw, 64px);
  padding: 8px var(--gutter) 72px;
  align-items: start;
}
.stage-wrap { min-width: 0; position: relative; }
/* The trait tour: labels on the artwork, in the piece's own colours, that
   fly into the trait list. A dot on the thing, a hairline, and a small card
   with the trait in capitals and the value in the serif. */
.tour { position: absolute; pointer-events: none; z-index: 5; }
.callout { position: absolute; display: flex; align-items: center; transform: translate(-8px, -50%); animation: callout-in .7s ease-out both; }
.callout.flip { flex-direction: row-reverse; transform: translate(calc(-100% + 8px), -50%); }
.callout .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--bg); box-shadow: 0 0 0 5px rgba(255,255,255,.28); flex: none; }
.callout .line { width: 34px; height: 1px; background: var(--ink); opacity: .7; flex: none; transform-origin: left center; animation: line-draw .8s .2s cubic-bezier(.2,.7,.2,1) both; }
.callout.flip .line { transform-origin: right center; }
.callout .card { display: block; padding: 11px 16px 12px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-strong); color: var(--ink); white-space: nowrap; line-height: 1.15; box-shadow: 0 14px 34px rgba(0,0,0,.22); animation: card-rise .9s .35s cubic-bezier(.2,.7,.2,1) both; }
.callout .card small { display: block; font-family: var(--display); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.callout .card b { display: block; font-weight: 500; font-size: 22px; letter-spacing: -.01em; font-variation-settings: "opsz" 24; }
@keyframes callout-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes card-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* The canvas is a square no taller than the window allows, centred in its column
   with the caption under it. Until p5 creates it, the same space is reserved so
   the page does not grow under the reader. */
#stage, #board-stage { width: 100%; line-height: 0; }
#stage:empty { aspect-ratio: 1; max-height: calc(100vh - 150px); }
#board-stage:empty { aspect-ratio: 1; }
#stage canvas, #board-stage canvas { margin: 0 auto; }
#stage canvas, #board-stage canvas {
  display: block;
  max-width: 100%;
  height: auto !important;
  outline: 1px solid var(--line);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .45);
}
.stage-caption {
  margin: 12px auto 0;
  max-width: var(--stage-w, none); /* as wide as the canvas, so it sits under the artwork */
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  min-height: 1.4em;
}

.panel { position: sticky; top: 22px; min-width: 0; }
.eyebrow {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(52px, 5.8vw, 84px);
  line-height: .92;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96, "wdth" 88;
}
.lede {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.5;
  max-width: 42ch;
  font-variation-settings: "opsz" 16;
}

/* The mint card: the number with its stepper, the nine traits, one line of detail. */
.mintcard { border-top: 1px solid var(--line-strong); padding-top: 12px; }
.mint-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.label {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.hash {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-all;
  padding: 10px 12px;
  background: var(--wash);
  border-radius: 6px;
  user-select: all;
}

.mint-input { display: inline-flex; align-items: baseline; gap: 2px; border-bottom: 1px solid var(--line-strong); padding: 0 4px 1px; }
.mint-input input {
  font-family: var(--mono);
  font-size: 17px;
  width: 4.2ch;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
}
.mint-input input::-webkit-outer-spin-button, .mint-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.peg-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0 0 3px;
  transition: background-color .18s, color .18s, transform .18s;
}
.peg-btn:hover { background: var(--ink); color: var(--bg); }
.peg-btn:active { transform: scale(.94); }

.btn {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, opacity .18s;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { opacity: .82; }
.btn.ghost { border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* The controls: four equal buttons in two columns, the mechanism picker under them when it applies. */
.controls { margin-top: 16px; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-grid .btn { display: inline-flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; white-space: nowrap; }
/* The mechanism picker, shown only while the mechanism is on. */
.toast { margin: 8px 0 0; min-height: 1.3em; font-family: var(--mono); font-size: 12px; color: var(--dim); opacity: 0; transition: opacity .3s; }
.toast.show { opacity: 1; }

.tier-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tier-name { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.tier-badge {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink);
  margin-left: 14px; margin-right: 8px;
  flex: none;
  transition: box-shadow .4s var(--ease), background-color .4s;
}
.tier-badge.t-Uncommon { background: var(--t-uncommon); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--t-uncommon); }
.tier-badge.t-Rare { background: var(--t-rare); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--t-rare), 0 0 0 7px var(--bg), 0 0 0 8px var(--t-rare); }
.tier-badge.t-Legendary { background: var(--t-legendary); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--t-legendary), 0 0 0 7px var(--bg), 0 0 0 8px var(--t-legendary), 0 0 0 11px var(--bg), 0 0 0 12px var(--t-legendary); }
.summary { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.trait-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 18px; row-gap: 0; font-size: 14px; }
.trait-list dt { color: var(--dim); padding: 4px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; align-self: center; }
.trait-list dd { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.trait-list dd .n { font-family: var(--mono); font-size: 11.5px; color: var(--dim); white-space: nowrap; }

/* ----------------------------------------------------------- sections -- */
.section { padding: 72px var(--gutter); max-width: 1280px; margin: 0 auto; border-top: 1px solid var(--line); }
.section h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.025em;
  line-height: 1.02;
  font-variation-settings: "opsz" 72, "wdth" 92;
}
.intro { font-size: 20px; max-width: 64ch; margin: 0 0 40px; font-variation-settings: "opsz" 20; }

/* how */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.steps figure { margin: 0 0 14px; }
.steps img { width: 100%; aspect-ratio: 1; outline: 1px solid var(--line); background: var(--wash); }
.step-n { display: inline-block; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.steps h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; }
.steps p { margin: 0; font-size: 15.5px; line-height: 1.5; }

/* rarity */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-bottom: 56px; }
.tier { border-top: 2px solid var(--ink); padding-top: 14px; }
.tier.tier-Legendary { border-color: var(--t-legendary); }
.tier.tier-Rare { border-color: var(--t-rare); }
.tier.tier-Uncommon { border-color: var(--t-uncommon); }
.tier h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.tier .count { margin: 0 0 10px; }
.tier .big { font-family: var(--display); font-weight: 200; font-size: 52px; line-height: 1; letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.tier .count .dim { font-family: var(--mono); font-size: 12px; }
.tier p:last-child { margin: 0; font-size: 15.5px; line-height: 1.5; }

.board-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(24px, 3vw, 48px); align-items: start; }
.board { padding-top: 4px; min-width: 0; }
.board-side { position: sticky; top: 18px; }
.board-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.board-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#board-note { font-size: 12px; }
.pegboard { position: relative; }
.pegboard svg { width: 100%; height: auto; display: block; overflow: visible; }
.pegboard g.peg { cursor: pointer; transition: transform .9s var(--ease); }
.pegboard g.peg circle { transition: r .2s; }
.pegboard g.peg:hover circle:first-child { r: 6.8; }
.pegboard g.peg.current circle:first-child { stroke: var(--ink); stroke-opacity: 1; stroke-width: 2.2; }
.board-tip { position: absolute; z-index: 5; pointer-events: none; width: 152px; padding: 6px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); transform: translate(-50%, calc(-100% - 12px)); }
.board-tip img { width: 100%; aspect-ratio: 1; display: block; border-radius: 6px; background: var(--wash); }
.board-tip-text { font-size: 11.5px; line-height: 1.35; padding: 7px 2px 2px; color: var(--dim); }
.board-tip-text b { color: var(--ink); font-family: var(--mono); font-weight: 500; margin-right: 4px; }

.freq { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 18px; }
.freq summary { cursor: pointer; font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: .02em; }
.freq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 32px; margin-top: 22px; }
.freq-block h4 { margin: 0 0 8px; font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.freq-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; padding: 3px 0; }
.freq-row .bar { grid-column: 1 / -1; height: 3px; background: var(--wash); border-radius: 2px; overflow: hidden; }
.freq-row .bar i { display: block; height: 100%; background: var(--ink); opacity: .55; }
.freq-row .n { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* edition */
.edition-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pages { display: flex; flex-wrap: wrap; gap: 6px; }
.filter { font-family: var(--display); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.filter select { font: inherit; font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 16px 14px; }
.cell { margin: 0; cursor: pointer; }
.cell img { width: 100%; aspect-ratio: 1; outline: 1px solid var(--line); background: var(--wash); opacity: 0; transition: opacity .4s, transform .25s var(--ease); }
.cell img.ready { opacity: 1; }
.cell:hover img { transform: translateY(-2px); }
.cell figcaption { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.cell figcaption b { font-weight: 500; color: var(--ink); }
.cell.is-current img { outline: 2px solid var(--ink); }
.grid-empty { color: var(--dim); }

/* footer */
/* The footer echoes the masthead: the mark and the name, then the credits. */
.foot { padding: 34px var(--gutter) 64px; max-width: 1280px; margin: 0 auto; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.foot .wordmark { margin-bottom: 14px; }
.foot p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--dim); max-width: 60ch; }
.foot .foot-keys { font-size: 12px; line-height: 1.6; padding-top: 8px; }
.foot #gen-version { font-size: 13px; }

/* In a room: the scene is a flat drawing, the piece an image inside it. */
.room-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 18px; }
.room-scene { border: 1px solid var(--line); background: #EDE9E2; line-height: 0; aspect-ratio: 16 / 9; }
.room-controls .btn { min-width: 44px; justify-content: center; }
.room-scene svg { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .panel { position: static; }
  /* On a phone the panel stacks under the piece, so the generate buttons come
     first: random seed, then the mint row, then the hash, the title and the rest,
     and the artwork and the buttons fit on one screen. */
  .panel { display: flex; flex-direction: column; }
  .panel .controls { order: -2; margin-top: 4px; }
  .panel .mintcard { order: -1; margin-top: 14px; }
  .panel .eyebrow { border-top: 1px solid var(--line-strong); padding-top: 18px; margin-top: 20px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* The page must never grow wider than the phone. */
  body { overflow-x: clip; }
  .top { flex-wrap: wrap; row-gap: 8px; }
  .top-meta { display: none; }
  /* The nav takes its own line and stays on one line, scrolling sideways inside the screen if it has to. */
  .top-nav { order: 3; flex: 0 0 100%; min-width: 0; overflow-x: auto; white-space: nowrap; gap: 20px; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-nav a { flex: none; letter-spacing: .12em; }
  .steps, .tiers { grid-template-columns: 1fr; }
  .title { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html, .pegboard g.peg, .pegboard circle, .cell img, .btn, .peg-btn { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------- minting and about -- */
/* Text on the left, a fact sheet on the right; the same frame in both sections. */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-text p { font-size: 18px; line-height: 1.62; margin: 0 0 22px; max-width: 58ch; font-variation-settings: "opsz" 18; }
.about-text p.lead { font-size: 22px; line-height: 1.45; font-variation-settings: "opsz" 24; margin-bottom: 28px; }
.about-text p:last-child { margin-bottom: 0; }
.about-text .aside { border-top: 1px solid var(--line); padding-top: 22px; }

/* A fact sheet: small uppercase labels, the values in the serif, one hairline per row. */
.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 22px; font-size: 15.5px; line-height: 1.5; }
.facts dt { font-family: var(--display); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 500; align-self: start; padding-top: 14px; }
.facts dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts dt:first-of-type, .facts dd:first-of-type { border-top: 1px solid var(--line-strong); }
.facts a { word-break: break-all; }
.facts .mono { font-size: 13.5px; }

/* Under the About fact sheet: the state of the sale, and the mint link once there is one. */
.mint-where { margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mint-state { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--dim); }
.mint-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }

/* The artists, one row per trait. */
.artists { margin: 6px 0 26px; }
.artists dd { font-size: 16px; }

/* ------------------------------------------------------------- filters -- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
.filters .filter { text-transform: none; letter-spacing: 0; }
.filters select { max-width: 220px; }
.filters-wait { margin: 0; }
.trait-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.trait-btn:hover { text-decoration-color: var(--ink); }

/* ---------------------------------------------------------- tier picks -- */
.tier-picks { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -4px 0 12px; }

.run-hint { color: var(--dim); }
.run-hint::before { content: '· '; }


/* Preview builds: a line for testers under the seed controls. */
/* The seed, and a note for testers, under the controls. */
.seedline { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.seed-line { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; }
.seed-line .label { padding-top: 6px; }
.seed-line .hash { display: block; font-size: 11.5px; padding: 6px 10px; }
.tester-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim, #777); }
.tester-note a { color: inherit; }

/* Narrow screens, for the blocks defined above (this has to come after them). */
/* ------------------------------------------------- traits and lineage -- */
/* The nine traits, listed under the four steps in the fact-sheet style. */
.catalogue { margin-top: 56px; max-width: 820px; }
.catalogue h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -.01em; line-height: 1.2; }
.catalogue > p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.55; max-width: 62ch; }
.catalogue .facts dd { font-size: 16px; }

/* The lineage: one row per artist, in the order the work was made. The year
   and the thread on the left, a piece from the edition, then the text. */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.timeline li { display: grid; grid-template-columns: 104px 292px minmax(0, 1fr); gap: 0 30px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
/* A piece from the edition, and beside it, where the work is public domain, the artist's work. */
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.figures figure { margin: 0; min-width: 0; }
.figures figcaption, .piece-cap { margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.4; color: var(--dim); }
.figures figcaption a { color: inherit; }
.ref-img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--wash); outline: 1px solid var(--line); }
.timeline .when { padding-top: 4px; }
.timeline .year { display: block; font-family: var(--mono); font-size: 14px; }
.timeline .thread { display: block; margin-top: 6px; font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.timeline .piece { display: block; aspect-ratio: 1; outline: 1px solid var(--line); background: var(--wash); overflow: hidden; }
.timeline .piece-cap { display: block; }
.timeline .piece img { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; }
.timeline .piece img.ready { opacity: 1; }
.timeline .piece:hover img, .timeline .piece:focus-visible img { opacity: .9; }
.timeline h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -.01em; line-height: 1.2; }
.timeline .work { margin: 0 0 10px; font-size: 15px; color: var(--dim); }
.timeline p { margin: 0; font-size: 16.5px; line-height: 1.58; max-width: 64ch; }
.timeline .tags { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.timeline .tag { font-family: var(--display); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 10px; }
.timeline .tag b { color: var(--ink); font-weight: 500; }

@media (max-width: 980px) {
  .about-grid, .board-grid, .foot-grid { grid-template-columns: 1fr; }
  .foot-grid { gap: 18px; }
  /* On a phone the picked piece sits above the board and stays put while the board scrolls. */
  .board-side { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 8px 0; order: -1; }
  #board-stage { width: min(100%, 34vh); margin: 0 auto; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 22px 0; }
  .timeline .figures { grid-row: 1; max-width: 420px; margin-bottom: 12px; }
  .timeline .when { grid-row: 2; padding-top: 0; display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
  .timeline .thread { margin-top: 0; }
  .timeline .body { grid-row: 3; }
}