/* A neutral wall to hang the two sheets on, so the ink colours are judged
   against paper rather than against the page background. */

:root {
  --wall: #1a1a1c;
  --wall-2: #232326;
  --ink: #f2f2f0;
  --muted: #9a9a98;
  --paper: #fbfbf9;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem clamp(1rem, 3vw, 3rem) 4rem;
  background: var(--wall);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header { max-width: 62ch; margin: 0 auto 2rem; }

h1 {
  margin: 0 0 .35rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 span { color: var(--muted); font-weight: 400; }

.range {
  margin: 0 0 .9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
}

.note { margin: 0; color: var(--muted); }

/* -------------------------------------------------------------- pen legend */

#legend {
  max-width: 1400px;
  margin: 0 auto 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  border: 1px solid #38383c;
  border-radius: 999px;
  background: var(--wall-2);
  color: var(--ink);
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
  transition: opacity .12s, border-color .12s;
}

.chip:hover { border-color: var(--pen); }

/* Switched-off pens grey out rather than disappear, so the strip keeps a stable
   layout while you toggle through it. */
.chip[data-on="false"] { opacity: .38; }
.chip[data-on="false"] .swatch { background: transparent; }

.swatch {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--pen);
  border: 1px solid var(--pen);
  flex: none;
}

.chip .name { font-weight: 500; }
.chip .meta { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- the sheets */

main {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: clamp(.75rem, 2vw, 2rem);
  align-items: flex-start;
  justify-content: center;
}

.sheet {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}

/* The sheets are the artefact — give them real paper and a cast shadow so the
   pair reads as two sheets on a wall, at true relative scale. */
.sheet svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);
}

figcaption {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .8125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Below tablet width the two A1 sheets stop being legible side by side, so
   stack them — the side-by-side hang is the point, but only when it can be read. */
@media (max-width: 720px) {
  main { flex-direction: column; align-items: stretch; }
}

footer {
  max-width: 1400px;
  margin: 2.5rem auto 0;
  color: var(--muted);
  font-size: .875rem;
  text-align: center;
}

footer a { color: var(--ink); }