/* ------------------------------------------------------------------
   The Psychometrician's Handbook, itemandscale.com
   Direction: Lab Bench. Tool-first, hairline density, scatterplots as
   page furniture, brand palette from Handbook Palette / Pallete.csv.
   ------------------------------------------------------------------ */

:root {
  --violet:  #453065;
  --magenta: #AA378B;
  --coral:   #EC663B;
  --emerald: #019939;
  --teal:    #069999;
  --warm:    #F2F0F3;
  --graphite:#2E2E2E;

  --bg:      #FBFAFB;
  --surface: #ffffff;
  --hair:    #E4E1E7;
  --muted:   #6b6b70;
  --faint:   #9b97a3;
  --ink-dark:#211E30;

  --grad-ch1: linear-gradient(160deg, #4a3168 0%, #453065 48%, #0c5f6b 100%);
  --grad-ch2: linear-gradient(160deg, #8d2d76 0%, #AA378B 45%, #EC663B 100%);

  --rail: 248px;
  --gutter: 40px;

  --sans: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--magenta); text-decoration: none; }
.ilink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
a:hover { color: var(--violet); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--violet); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; color: #fff; }

/* ---------------------------------------------------------- shell */
.shell {
  display: flex; min-height: 100vh;
  /* the rail is sticky and therefore shorter than the page, so its column
     and hairline are painted by the parent instead */
  background:
    linear-gradient(to right,
      var(--surface) 0, var(--surface) var(--rail),
      var(--hair) var(--rail), var(--hair) calc(var(--rail) + 1px),
      transparent calc(var(--rail) + 1px));
}

.rail {
  width: var(--rail); flex-shrink: 0;
  border-right: 1px solid var(--hair);
  background: var(--surface);
  padding: 24px 14px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; align-self: flex-start; max-height: 100vh;
  overflow-y: auto;
}
.rail__brand { padding: 0 10px 4px; display: flex; flex-direction: column; gap: 12px; }
.rail__title {
  font-size: 14px; font-weight: 800; color: var(--violet); line-height: 1.2;
  display: flex; align-items: center; gap: 10px;
}
.rail__title img { flex: 0 0 auto; width: 30px; height: auto; }
.rail__title:hover { color: var(--magenta); }
.rail__hr { height: 1px; background: var(--hair); }
/* Group headings need more air ABOVE than below, or they read as a caption on the
   link they follow rather than a heading for the links beneath. .rail__nav had no
   layout of its own, so groups butted together and every heading sat flush against
   the link above it. The gap below is the nav gap; the label's own padding is the
   smaller space under it. */
.rail__nav { display: flex; flex-direction: column; gap: 22px; }
.rail__group { display: flex; flex-direction: column; gap: 3px; }
.rail__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-dark); font-weight: 600;
  padding: 0 10px 7px; margin: 0 10px 5px 10px;
  border-bottom: 1px solid var(--hair);
}
.rail a {
  display: block; font-size: 13px; padding: 6px 10px; border-radius: 4px;
  color: var(--graphite); font-weight: 500;
}
.rail a:hover { background: var(--warm); color: var(--violet); }
.rail a[aria-current="page"] { background: var(--violet); color: #fff; font-weight: 700; }

.st-credit { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.st-credit__label {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.st-credit img { height: 26px; width: auto; }

.main { flex-grow: 1; min-width: 0; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--hair);
  background: var(--surface);
}
.crumb {
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  letter-spacing: .06em; overflow-wrap: anywhere;
}

/* mobile drawer, no javascript required */
.drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; }

/* ------------------------------------------------------- sections */
section { padding: 34px var(--gutter); border-bottom: 1px solid var(--hair); }
section:last-of-type { border-bottom: 0; }
section.on-white { background: var(--surface); }
section.on-warm  { background: var(--warm); }

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal);
}
.eyebrow--violet  { color: var(--violet); }
.eyebrow--magenta { color: var(--magenta); }
.eyebrow--coral   { color: var(--coral); }

h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.06; font-weight: 800;
     color: var(--violet); letter-spacing: -.024em; }
h2 { font-size: clamp(22px, 2.6vw, 26px); font-weight: 800; color: var(--violet);
     letter-spacing: -.016em; line-height: 1.2; }
h3 { font-size: 17px; font-weight: 700; color: var(--violet); line-height: 1.3; }
.lead { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.58; }
.sub  { color: var(--muted); font-size: 14.5px; }
.prose p + p { margin-top: 14px; }
.prose { max-width: 68ch; }

.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; margin-bottom: 20px; flex-wrap: wrap;
}
.sec-head__text { display: flex; flex-direction: column; gap: 7px; }
.count-line { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; color: var(--teal); }

/* -------------------------------------------------------- buttons */
/* .btn sets display, which beat the hidden attribute: the game's "Play again" and
   "Play the matching game" buttons showed when the script had hidden them */
.btn[hidden] { display: none; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  min-height: 44px;
}
.btn--solid   { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn--solid:hover { background: #d9541f; color: #fff; }
.btn--outline { background: var(--surface); color: var(--violet); border-color: rgba(69,48,101,.28); }
.btn--outline:hover { border-color: var(--violet); color: var(--violet); background: var(--warm); }
.btn--light   { background: #fff; color: var(--magenta); border-color: #fff; }
.btn--ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--sm { padding: 9px 15px; font-size: 13px; min-height: 38px; }
.btn-row { display: flex; gap: 11px; flex-wrap: wrap; }

/* ----------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.figure-card {
  border: 1px solid var(--hair); border-radius: 6px; background: var(--surface); padding: 18px;
}
.figure-card__foot {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.figure-card__foot b { color: var(--violet); font-weight: 500; }

/* the hero card: the publication mark and the current chapter's mark */
.marks {
  border: 1px solid var(--hair); border-radius: 6px; background: var(--surface);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.marks__book { width: 100%; max-width: 340px; height: auto; }
.marks__chapter { width: 100%; max-width: 260px; height: auto; }
.marks__rule { width: 100%; height: 1px; background: var(--hair); margin-top: 4px; }
.marks .eyebrow { margin-top: 2px; }
.marks__note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------- cards */
.grid { display: grid; gap: 14px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.demo-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--hair); border-radius: 6px; overflow: hidden;
  color: inherit;
}
.demo-card:hover { border-color: var(--violet); color: inherit; }
.demo-card__plot { padding: 14px 14px 0; }
.demo-card__body {
  padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 5px;
  border-top: 1px solid var(--hair); margin-top: 10px;
}
.demo-card__title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.demo-card__title strong { font-size: 14px; font-weight: 700; color: var(--violet); }
.demo-card__body p { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* one-line demo rail. The arrows are the point: on a desktop nobody drags a carousel,
   so without them the cards past the edge may as well not exist. */
.cardrail-wrap { display: flex; align-items: center; gap: 10px; }
.cardrail {
  display: flex; gap: 14px; overflow-x: auto; flex-grow: 1; min-width: 0;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 4px; scrollbar-width: thin;
}
.cardrail > .demo-card { flex: 0 0 clamp(230px, 24%, 280px); scroll-snap-align: start; }
.cardrail:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 6px; }
.cardrail-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hair); background: var(--surface); color: var(--violet);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cardrail-btn:hover { border-color: var(--violet); background: var(--warm); }
.cardrail-btn[disabled] { opacity: .3; cursor: default; }
.cardrail-btn[disabled]:hover { border-color: var(--hair); background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .cardrail { scroll-behavior: auto; } }

.codeblock__lede { font-size: 13px; line-height: 1.55; color: #b9b3cc; margin-bottom: 12px; }
.codeblock__cta { width: 100%; margin-top: 14px; }

.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--coral);
  border: 1px solid var(--coral); border-radius: 3px; padding: 1px 4px; text-transform: uppercase;
}

.topic {
  display: flex; gap: 16px; align-items: baseline; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 5px;
  border-left: 3px solid var(--topic, var(--violet)); color: inherit;
}
.topic:hover { border-color: var(--violet); border-left-color: var(--topic, var(--violet)); color: inherit; }
.topic__n { font-family: var(--mono); font-size: 12px; color: var(--topic, var(--violet)); min-width: 22px; }
.topic__body { flex-grow: 1; }
.topic__body strong { font-size: 14.5px; font-weight: 700; color: var(--violet); display: block; }
.topic__body span { font-size: 12.5px; color: var(--muted); }
.topic__n2 { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }
/* the topic currently showing in the deck above */
.topic[aria-current="true"] {
  background: var(--warm); border-color: var(--topic);
  box-shadow: inset 0 0 0 1px var(--topic);
}

.panel {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 5px; padding: 18px;
}
.panel--accent { border-left: 3px solid var(--teal); }
.panel--ch2 { border-left: 3px solid var(--magenta); }
.panel__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 11px;
}
.file-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; }
.file-row span { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; }

.codeblock { background: var(--ink-dark); border-radius: 5px; padding: 18px; }
.codeblock__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8D88A8; margin-bottom: 10px;
}
.codeblock pre {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: #E9E7F1;
  margin: 0; white-space: pre; overflow-x: auto;
}
.codeblock .c { color: #938EB0; }
.codeblock .s { color: #8FD6C8; }
.codeblock .f { color: #C9A6E0; }

/* --------------------------------------------------- contributors */
.orgs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.org__chip {
  height: 52px; background: #fff; border: 1px solid var(--hair); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; padding: 9px;
}
.org__chip img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.org__chip--ghost {
  background: transparent; border-style: dashed; border-color: var(--hair);
  color: var(--faint); font-size: 10px; line-height: 1.25; text-align: center;
}
.org__name { font-size: 11px; line-height: 1.3; color: var(--faint); text-align: center; margin-top: 8px; }
.orgs-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

/* ------------------------------------------------------ how to cite */
.cite {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 6px;
  padding: 16px 18px; margin-bottom: 12px;
}
.cite__what {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.cite__ref {
  font-size: 14px; line-height: 1.55; padding-left: 26px; text-indent: -26px;
  margin-bottom: 8px; word-break: break-word;
}
.cite__note { font-size: 13px; line-height: 1.5; color: var(--faint); margin-bottom: 12px; }
.cite button[data-copy] { cursor: pointer; }

/* ------------------------------------------------------ the reader */
.reader-section { padding-bottom: 18px; }
.reader {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 8px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(69,48,101,.07);
}
.reader:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.reader__slide {
  width: 100%; height: auto; aspect-ratio: 1400 / 787; display: block;
  background: var(--warm); border-bottom: 1px solid var(--hair);
}
.reader__bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap;
}
.reader__btn {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--hair); background: var(--surface); color: var(--violet);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.reader__btn:hover { border-color: var(--violet); background: var(--warm); }
.reader__btn[disabled] { opacity: .3; cursor: default; }
.reader__btn[disabled]:hover { border-color: var(--hair); background: var(--surface); }
.reader__count {
  font-family: var(--mono); font-size: 13px; color: var(--violet); font-weight: 500;
  font-variant-numeric: tabular-nums; min-width: 66px; text-align: center;
}
.reader__where {
  font-size: 13.5px; color: var(--muted); flex-grow: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reader__full { font-size: 13px; font-weight: 700; white-space: nowrap; }
.reader__toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; min-height: 38px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--violet);
  border-radius: 5px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.reader__toggle:hover { border-color: var(--violet); background: var(--warm); }
.reader__toggle[aria-expanded="true"] {
  background: var(--violet); border-color: var(--violet); color: #fff;
}

/* The strip sits below the slide rather than beside it. A left pane would take width
   back off the slide, which is the thing that was too small in the first place. */
.reader__strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px;
  border-top: 1px solid var(--hair); background: var(--warm);
  scroll-behavior: smooth;
}
.reader__strip[hidden] { display: none; }
.thumb {
  flex: 0 0 auto; position: relative; padding: 0; cursor: pointer; line-height: 0;
  border: 1px solid var(--hair); border-radius: 3px; overflow: hidden;
  background: var(--surface); width: 120px;
}
.thumb img { width: 100%; height: auto; display: block; }
.thumb:hover { border-color: var(--violet); }
.thumb[aria-current="true"] {
  border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet);
}
.thumb__n {
  position: absolute; right: 3px; bottom: 3px; font-family: var(--mono); font-size: 10px;
  line-height: 1; padding: 2px 4px; border-radius: 2px;
  background: rgba(33,30,48,.78); color: #fff;
}
@media (prefers-reduced-motion: reduce) { .reader__strip { scroll-behavior: auto; } }
.reader__hint { margin-top: 10px; }

/* ----------------------------------------------------- demo pages */
.demo-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.demo-stage {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 6px; padding: 18px;
}
/* Two faults reported 2026-09-09. First, the plot was sized as a percentage of the
   column while the type was sized in px, so zooming the browser out widened the column
   and the plot held its physical size while every label shrank: the graph appeared to
   grow. Sizing the plot in rem as well ties it to the type, so both move together.
   Second, the plot plus readout plus sliders ran taller than a laptop viewport, so the
   graph and the controls were never in view at once. The vh term keeps the plot short
   enough to fit, and the figure sticks to the top so it stays visible while you reach
   the sliders on a short screen. */
.demo-stage [data-stage] {
  width: min(100%, 44rem, 74vh);
  aspect-ratio: 640 / 380;
  margin: 0 auto;
}
.demo-stage__fig {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  padding-bottom: 4px;
}
.demo-stage svg { width: 100%; height: 100%; display: block; touch-action: none; }
.demo-stage svg circle[cursor] { outline: none; }
.demo-stage svg circle[cursor]:focus-visible {
  stroke: var(--coral); stroke-width: 2; }
.readout { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px;
           border-top: 1px solid var(--hair); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
           color: var(--faint); }
.stat__v { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--violet);
           font-variant-numeric: tabular-nums; }
.stat__v--teal { color: var(--teal); }
.stat__v--coral { color: var(--coral); }
.stat__v--emerald { color: var(--emerald); }

.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 16px 24px; align-items: start; margin-top: 16px;
            padding-top: 16px; border-top: 1px solid var(--hair); }
.controls > .note { grid-column: 1 / -1; }
.control { display: flex; flex-direction: column; gap: 6px; }
.control__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.control label { font-size: 13px; font-weight: 700; color: var(--violet); }
.control output { font-family: var(--mono); font-size: 12px; color: var(--muted);
                  font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--teal); height: 24px; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented button {
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--graphite);
  border-radius: 4px; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }

.note { font-size: 13px; line-height: 1.55; color: var(--muted); }
.mono { font-family: var(--mono); font-size: .95em; color: var(--violet); }

/* ------------------------------------------- glossary matching game */
.game-start img { flex: 0 0 auto; }
.game {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 8px;
  padding: 22px 24px;
}
.game__bar {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.game__score {
  font-family: var(--mono); font-size: 15px; color: var(--violet); font-weight: 500;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.game__say { margin-bottom: 18px; }
.game__board { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; }
.tiles__head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 9px;
}
.tiles { display: flex; flex-direction: column; gap: 8px; }
.tile {
  text-align: left; font-family: inherit; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 5px; background: var(--bg);
  padding: 12px 14px; color: var(--graphite); min-height: 44px;
}
/* terms stay violet and bold throughout, including while they are leaving */
.tile--term { font-weight: 700; color: var(--violet); font-size: 14.5px; }
.tile--def { font-size: 13px; line-height: 1.5; }
.tile:hover:not(:disabled) { border-color: var(--violet); background: var(--warm); }
.tile.is-picked {
  border-color: var(--violet); background: var(--warm);
  box-shadow: inset 0 0 0 1px var(--violet);
}
.tile.is-right { border-color: var(--emerald); background: #E4F3EA; }
.tile.is-wrong { border-color: var(--coral); background: #FCEAE1; }

/* a matched pair leaves, and the next term in the bank arrives in its place */
.tile.is-leaving { opacity: 0; transform: scale(.94); pointer-events: none; }
/* a matched pair stays where it was, dimmed, until the round ends, so nothing moves */
.tile.is-done { opacity: .35; pointer-events: none; }
.tile.is-arriving { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: no-preference) {
  .tile { transition: background .15s, border-color .15s, opacity .3s ease, transform .3s ease; }
}

/* the opening: cards not in this hand step aside, the rest split and fly apart */
.panel.is-dismissed { opacity: 0; transform: scale(.96); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .panel[data-gloss-term] { transition: opacity .34s ease, transform .34s ease; }
}
.game.is-dealing { opacity: 0; }
.game.is-dealing .tile { transition: none; }
@media (max-width: 700px) {
  .game__board { grid-template-columns: 1fr; }
}
figcaption { font-size: 12px; font-style: italic; color: var(--muted); margin-top: 8px; }

/* ------------------------------------------------------ ch2 block */
.ch2 { background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--magenta);
       border-radius: 5px; padding: 26px 28px; display: grid;
       grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.signup { display: flex; flex-direction: column; gap: 10px; }
/* the Jotform needs the full width, so the block stacks rather than splits */
.ch2:has(.signup--embed) { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.signup--embed { scroll-margin-top: 80px; }
.signup__row { display: flex; gap: 8px; flex-wrap: wrap; }
.signup input[type="email"] {
  flex-grow: 1; min-width: 200px; border: 1px solid var(--hair); border-radius: 5px;
  padding: 11px 13px; font-size: 14px; font-family: inherit; background: var(--bg);
  color: var(--graphite); min-height: 44px;
}
.signup__small { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* --------------------------------------------------------- footer */
.foot {
  padding: 26px var(--gutter); display: flex; justify-content: space-between;
  align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px;
  color: var(--faint); border-top: 1px solid var(--hair); flex-wrap: wrap;
}
.foot a { color: var(--faint); }
.foot a:hover { color: var(--violet); }

/* ----------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orgs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .demo-layout { grid-template-columns: 1fr 260px; }
}

@media (max-width: 1000px) {
  :root { --gutter: 24px; }
  .shell { display: block; background: none; }
  .rail {
    width: auto; position: static; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--hair); padding: 0;
  }
  .rail__brand {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 13px var(--gutter); gap: 14px;
  }
  .rail__title { max-width: 230px; gap: 8px; }
  .rail__title img { width: 26px; }
  .rail__hr, .rail .st-credit__label { display: none; }
  .rail__brand .st-credit { flex-direction: row; align-items: center; gap: 12px; }
  .burger {
    display: flex; flex-direction: column; gap: 4px; width: 44px; height: 44px;
    align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .burger span { display: block; width: 22px; height: 2px; background: var(--violet); }
  .rail__nav {
    display: none; padding: 6px var(--gutter) 18px; flex-direction: column; gap: 24px;
  }
  .drawer-toggle:checked ~ .shell .rail__nav { display: flex; }
  .rail__group { gap: 2px; }
  .rail a { padding: 10px; font-size: 14px; }
  .hero { grid-template-columns: 1fr; gap: 26px; }
  .ch2 { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .demo-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orgs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .cardrail-btn { display: none; }
  .cardrail > .demo-card { flex: 0 0 78%; }
  body { font-size: 15px; }
  section { padding: 26px var(--gutter); }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .orgs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .org__chip--ghost {
  background: transparent; border-style: dashed; border-color: var(--hair);
  color: var(--faint); font-size: 10px; line-height: 1.25; text-align: center;
}
.org__name { font-size: 11px; line-height: 1.25; }
  .btn-row .btn { width: 100%; }
  .reader__where { display: none; }
  .reader__count { min-width: 58px; font-size: 12px; }
  .reader__toggle span { display: none; }
  .reader__toggle { padding: 8px 10px; }
  .thumb { width: 92px; }
  .sec-head { gap: 14px; }
  .readout { gap: 18px; }
  .foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --------------------------------------------------------- print */
@media print {
  .rail, .topbar, .burger { display: none; }
  body { background: #fff; }
  section { break-inside: avoid; border-bottom: 1px solid #ddd; }
}

/* ----------------------------------------------------- named contributors
   Name over organisation, one item per person, so a column break can never put a
   name in one column and its organisation in the next. */
.people{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px 26px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.people li{ break-inside: avoid; }
.person__name{
  display: block; font-size: 14px; font-weight: 700; color: var(--ink-dark);
  line-height: 1.3;
}
.person__org{
  display: block; font-size: 13px; color: var(--muted); line-height: 1.35;
}