/* Cadeaurijm, Sinterklaas season: an old Sinterklaas board game in chromolitho print.
   A print-blue table with a faint wrapping-paper print, a carton board with a vermilion frame,
   ink key lines and ochre corner blocks. Ochre marks the current square, blue what is chosen or
   passed, red the frame, the gifts square and the primary action.
   Bevan for display and numerals, Bricolage Grotesque for text.
   Colour tokens live on the season class so a Christmas theme can be added beside it. */

@font-face {
  font-family: "Bevan";
  src: url("/static/fonts/bevan-latin.woff2?v=1") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bevan";
  src: url("/static/fonts/bevan-latin-ext.woff2?v=1") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-latin.woff2?v=2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-latin-ext.woff2?v=2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --display: "Bevan", "Rockwell", Georgia, serif;
  --text: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sq-h: 64px;
  --sq-gap: 8px;
  --gutter: 14px;
  color-scheme: light;
}

:root,
.season-sinterklaas {
  --table: #2f5d7c;
  --table-deep: #234a63;
  --on-table: #fbf6ea;
  --on-table-soft: #cddbe5;
  --carton: #f4ead6;
  --carton-hi: #fbf6ea;
  --carton-line: #d8c6a2;
  --ink: #2b1d16;
  --ink-soft: #5e4838;
  --red: #b8322a;
  --red-deep: #93231b;
  --ochre: #d9a441;
  --blue: #2f5d7c;
  --field: #fffdf7;
  --placeholder: #7a6656;
  --alert-wash: #fff3ea;
  --middle-line: rgb(184 50 42 / 55%);
  --table-rule: rgb(251 246 234 / 18%);
  --table-edge: rgb(251 246 234 / 45%);
  --focus: var(--ink);
  --button-edge: var(--ink);

  /* Pieces lie on the table: a short contact shadow plus a soft cast shadow. */
  --lift: 0 2px 3px rgb(16 32 44 / 30%), 0 22px 44px -22px rgb(16 32 44 / 75%);
  --lift-small: 0 1px 1px rgb(43 29 22 / 22%), 0 4px 8px -4px rgb(43 29 22 / 40%);

  /* Wrapping paper: mitre, star, staff and pepernoten, printed faintly on the blue table. */
  --wrapping: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='136' viewBox='0 0 136 136' fill='none' stroke='%23fbf6ea' stroke-opacity='0.085' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M20 54V31l11-14 11 14v23zM31 20v34M20 46h22'/%3E%3Cpath d='M100 14l3.2 8.8 8.8 3.2-8.8 3.2-3.2 8.8-3.2-8.8-8.8-3.2 8.8-3.2z'/%3E%3Cpath d='M96 124V84c0-9 13-9 13 0 0 5-5 7-8 4'/%3E%3Ccircle cx='34' cy='100' r='3.5'/%3E%3Ccircle cx='47' cy='110' r='3.5'/%3E%3Ccircle cx='29' cy='116' r='3.5'/%3E%3Cpath d='M68 62l2 5.5 5.5 2-5.5 2-2 5.5-2-5.5-5.5-2 5.5-2z'/%3E%3C/svg%3E");
  /* Carton grain, very faint. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --stamp-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4' fill='none' stroke='%23fbf6ea' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --stamp-bridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 16c3-7 15-7 18 0' fill='none' stroke='%232f5d7c' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M16.5 12.5l4.5 3.5-5 2.5' fill='none' stroke='%232f5d7c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0.8L9.2 5 5 9.2 0.8 5z' fill='%232f5d7c'/%3E%3C/svg%3E");
  accent-color: var(--blue);
}

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

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html {
  scrollbar-color: var(--on-table-soft) var(--table-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--table);
  background-image: var(--wrapping), var(--wrapping);
  background-position: 0 0, 68px 68px;
  color: var(--on-table);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  font-optical-sizing: auto;
  caret-color: var(--red);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ochre);
  color: var(--ink);
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

/* On the blue table, focus rings and edges are carton or ochre; on carton they are ink. */
.site-header,
.game-title,
.results-head,
.results-main > .reroll,
.results-main > .fineprint,
.back,
.gift-head,
.poem-tools,
.guide-header,
.guide-poem,
.guide-related > h2,
.guides-head,
.site-footer {
  --focus: var(--ochre);
  --button-edge: var(--carton-hi);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
legend {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--carton-hi);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* -------------------------------------------------------------------------------------- */
/* Header and footer                                                                      */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1152px;
  min-height: 60px;
  margin: 0 auto;
  padding: 10px 16px;
}

.wordmark {
  color: var(--on-table);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark span {
  color: var(--ochre);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-nav a {
  color: var(--on-table);
  font-size: 15px;
  font-weight: 650;
  text-decoration-color: var(--table-edge);
}

.site-nav a:hover {
  text-decoration-color: var(--ochre);
}

.season-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px 11px 4px 9px;
  border: 1.5px solid var(--table-edge);
  border-radius: 999px;
  color: var(--on-table);
  font-size: 13px;
  font-weight: 700;
}

.season-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ochre);
}

.nav-short {
  display: none;
}

.page {
  max-width: 1152px;
  margin: 0 auto;
  padding: 6px var(--gutter) 48px;
}

.site-footer {
  max-width: 1152px;
  margin: 0 auto;
  padding: 26px 16px 40px;
  border-top: 1px solid var(--table-rule);
  color: var(--on-table-soft);
  font-size: 14px;
}

.site-footer p {
  max-width: 36em;
  margin: 0 0 12px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-footer a {
  color: var(--on-table);
  font-weight: 650;
}

/* -------------------------------------------------------------------------------------- */
/* Shared pieces: buttons, links, the framed board, the carton sheet                       */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 22px;
  border: 2px solid var(--button-edge);
  border-radius: 9px;
  background: var(--red);
  color: var(--carton-hi);
  font: 700 17px/1.2 var(--text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--lift-small);
  transition: background-color 0.18s var(--ease-out), transform 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}

.button:hover {
  background: var(--red-deep);
}

.button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgb(43 29 22 / 25%);
}

.button.secondary {
  background: var(--carton-hi);
  color: var(--ink);
}

.button.secondary:hover {
  background: var(--carton);
}

.button[hidden] {
  display: none;
}

.link {
  color: inherit;
  font-weight: 650;
  text-decoration-color: var(--ochre);
  text-decoration-thickness: 2px;
}

.link:hover {
  text-decoration-thickness: 3px;
}

/* The board: carton inside a thick vermilion frame, an ink edge outside, an ink key line
   inside, and ochre corner blocks. */
.board-frame {
  position: relative;
  padding: 16px var(--frame-pad, 14px);
  border: 6px solid var(--red);
  border-radius: 4px;
  outline: 2px solid var(--ink);
  background-color: var(--carton);
  background-image: var(--grain);
  color: var(--ink);
  box-shadow: var(--lift);
  --focus: var(--ink);
  --button-edge: var(--ink);
}

.board-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ink);
  pointer-events: none;
}

.board-frame::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(var(--ochre) 0 0) top 2px left 2px / 16px 16px,
    linear-gradient(var(--ochre) 0 0) top 2px right 2px / 16px 16px,
    linear-gradient(var(--ochre) 0 0) bottom 2px left 2px / 16px 16px,
    linear-gradient(var(--ochre) 0 0) bottom 2px right 2px / 16px 16px,
    linear-gradient(var(--ink) 0 0) top left / 20px 20px,
    linear-gradient(var(--ink) 0 0) top right / 20px 20px,
    linear-gradient(var(--ink) 0 0) bottom left / 20px 20px,
    linear-gradient(var(--ink) 0 0) bottom right / 20px 20px;
  background-repeat: no-repeat;
}

/* A carton sheet: reading text and controls. Lighter than the board, with a key line. */
.reading,
.prose,
.guide-group,
.poem-controls,
.guide-related .guide-list {
  position: relative;
  padding: 24px 20px;
  border-radius: 6px;
  background-color: var(--carton);
  background-image: var(--grain);
  color: var(--ink);
  outline: 1.5px solid var(--ink);
  outline-offset: -7px;
  box-shadow: var(--lift);
  --focus: var(--ink);
  --button-edge: var(--ink);
}

.reading a,
.prose a,
.guide-group a,
.fineprint a {
  font-weight: 650;
}

.reading a,
.prose a {
  color: var(--blue);
}

/* -------------------------------------------------------------------------------------- */
/* Questionnaire: squares 1 to 3 along the top, the middle field, then back along the bottom */

.game-title {
  max-width: 20ch;
  margin: 4px 0 16px;
  color: var(--on-table);
  font-family: var(--display);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.game .board-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 14px;
}

.board-wrap {
  position: relative;
  grid-row: 1 / 4;
  grid-column: 1;
  display: grid;
  grid-template-rows: subgrid;
}

.board {
  position: relative;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: subgrid;
  column-gap: var(--sq-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.board .square:nth-child(1) { grid-area: 1 / 1; }
.board .square:nth-child(2) { grid-area: 1 / 2; }
.board .square:nth-child(3) { grid-area: 1 / 3; }
.board .square:nth-child(4) { grid-area: 3 / 3; }
.board .square:nth-child(5) { grid-area: 3 / 2; }
.board .square:nth-child(6) { grid-area: 3 / 1; }

/* The printed route: from square 1 along the top, down the right margin, back along the
   bottom to the gifts square. Only the gaps between the pieces show it. */
.board::before {
  content: "";
  position: absolute;
  top: calc(var(--sq-h) / 2);
  bottom: calc(var(--sq-h) / 2);
  left: calc((100% - 2 * var(--sq-gap)) / 6);
  right: -8px;
  border: 2px dashed var(--red);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  opacity: 0.75;
}

.square {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--sq-h);
  padding: 6px 8px 7px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--carton-hi);
  color: var(--ink);
  box-shadow: var(--lift-small);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.square-number {
  color: var(--red);
  font-family: var(--display);
  font-size: 23px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.square-label {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
}

.square.is-current {
  background: var(--ochre);
}

.square.is-current .square-number {
  color: var(--ink);
}

.square.is-done {
  background: var(--blue);
  color: var(--carton-hi);
}

.square.is-done .square-number {
  color: var(--carton-hi);
}

.square.is-done::after,
.square.is-skipped::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: var(--stamp-done) center / contain no-repeat;
}

.square.is-skipped {
  background: var(--carton);
}

.square.is-skipped::after {
  width: 24px;
  background-image: var(--stamp-bridge);
}

.square-finish {
  align-items: flex-start;
  background: var(--red);
  color: var(--carton-hi);
}

.square-icon {
  width: 24px;
  height: 24px;
}

/* The pawn: a mitred piece in red, carton and ochre. */
.pawn {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 24px;
  height: 36px;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgb(43 29 22 / 35%));
}

.js .pawn {
  display: block;
}

.pawn:not(.is-placed) {
  visibility: hidden;
}

.pawn.is-placed {
  transition: transform 0.5s var(--ease-out);
}

.pawn svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pawn-body {
  fill: var(--red);
  stroke: var(--ink);
  stroke-width: 1.4;
}

.pawn-mitre {
  fill: var(--carton-hi);
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.pawn-band {
  fill: var(--ochre);
}

.pawn.is-hopping svg {
  animation: pawn-hop 0.5s var(--ease-out);
}

@keyframes pawn-hop {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Without JavaScript the pawn has nowhere to go. */
.game:not(.js) .pawn {
  display: none;
}

/* The middle field: where the current question is asked. */
.middle {
  position: relative;
  z-index: 1;
  grid-row: 2;
  grid-column: 1;
  padding: 15px 16px 16px;
  border: 2px dashed var(--middle-line);
  border-radius: 10px;
}

.questions {
  display: grid;
  gap: 28px;
}

.js .questions {
  display: block;
}

.question {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.question:focus {
  outline: none;
}

.js .question {
  display: none;
}

.js .question.is-active {
  display: block;
}

legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 13px;
  padding: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.15;
}

.question-number {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--ochre);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  transform: translateY(-3px);
}

.hint {
  margin: -6px 0 14px;
  color: var(--ink-soft);
  font-size: 15px;
}

.optional {
  color: var(--ink-soft);
  font-weight: 500;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  display: inline-block;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--carton-hi);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.25;
  box-shadow: var(--lift-small);
  transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.chip:hover span {
  background: var(--carton);
}

.chip input:checked + span {
  background: var(--blue);
  color: var(--carton-hi);
}

.chip input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.chip input:disabled + span {
  border-style: dashed;
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
  cursor: not-allowed;
}

.other-field {
  margin-top: 16px;
}

.other-field label,
.name-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 700;
}

.other-field input,
.name-field input {
  width: 100%;
  max-width: 360px;
  padding: 11px 13px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
}

.other-field input:focus-visible,
.name-field input:focus-visible {
  outline-offset: 1px;
}

.other-field input::placeholder,
.name-field input::placeholder {
  color: var(--placeholder);
}

.step-error {
  margin: 12px 0 0;
  color: var(--red-deep);
  font-weight: 700;
}

.alert {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 2px solid var(--red-deep);
  border-radius: 8px;
  background: var(--alert-wash);
  color: var(--ink);
}

.alert p {
  margin: 0 0 4px;
  font-weight: 700;
}

.alert ul {
  margin: 0;
  padding-left: 20px;
}

/* Sliders: a printed groove with the chosen part in blue and an ochre knob. */

.readout {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
}

.readout output {
  margin-right: 6px;
  color: var(--blue);
  font-family: var(--display);
  font-size: 46px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.readout [data-output="budget"],
.readout [data-output="age"] {
  font-size: 28px;
  white-space: nowrap;
}

.slider {
  --fill: 50%;
  display: block;
  width: 100%;
  height: 36px;
  margin: 6px 0 4px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue) var(--fill), var(--carton) var(--fill));
}

.slider::-moz-range-track {
  height: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--carton);
}

.slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: var(--lift-small);
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ochre);
  box-shadow: var(--lift-small);
}

.slider[type="range"]:focus-visible {
  outline: none;
}

.slider:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.slider:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Without JavaScript the sliders are number fields. */
.slider[type="number"] {
  width: 9em;
  height: auto;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: text;
}

.js .no-js-only {
  display: none;
}

.scale,
.axis-ends {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.preset {
  padding: 7px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: var(--carton);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out);
}

.preset small {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.preset:hover {
  background: var(--carton-hi);
}

.range-pair {
  display: grid;
  gap: 2px;
}

.range-field {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
}

.range-pair + .hint {
  margin-top: 8px;
}

.range-pair ~ .scale {
  padding-left: 60px;
}

.axis + .axis {
  margin-top: 22px;
}

.axis-label {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

/* The way forward stays in reach under long questions. */
html:has(.game) {
  scroll-padding-bottom: 150px;
}

.game-nav {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px -16px -16px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 2px dashed var(--carton-line);
  border-radius: 0 0 8px 8px;
  background-color: var(--carton);
  background-image: var(--grain);
}

.game-nav .button {
  padding-inline: 16px;
  font-size: 16px;
  white-space: nowrap;
}

.game-nav [data-prev] {
  padding-inline: 14px;
}

.game-nav [data-next],
.game-nav [data-submit] {
  flex: 1;
}

.nav-foot {
  display: flex;
  flex-basis: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.squares-left {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
  text-align: right;
}

/* Starting over is possible but quiet: a small underlined word, never a button. */
.restart {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
  text-decoration-color: var(--carton-line);
  text-decoration-thickness: 1.5px;
}

.restart:hover {
  color: var(--ink);
  text-decoration-color: var(--red);
}

.age-scale {
  margin-top: 2px;
}

/* -------------------------------------------------------------------------------------- */
/* Results: the middle of the board, ten numbered squares                                  */

.results {
  display: grid;
  gap: 22px;
}

.results-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 8px;
}

.finish-square {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 78px;
  height: 78px;
  padding: 9px 9px 8px;
  border: 2px solid var(--carton-hi);
  border-radius: 6px;
  background: var(--red);
  color: var(--carton-hi);
  box-shadow: var(--lift);
}

.finish-square .square-icon {
  width: 28px;
  height: 28px;
}

.finish-square .square-label {
  font-size: 12px;
}

.results-intro h1 {
  margin: 0 0 8px;
  color: var(--on-table);
  font-size: 27px;
  line-height: 1.12;
}

.summary {
  margin: 0;
  color: var(--on-table-soft);
  font-size: 16px;
}

.summary .link {
  color: var(--on-table);
}

.note {
  margin: 12px 0 0;
  color: var(--on-table);
  font-size: 15px;
}

.results-intro .button {
  margin-top: 16px;
}

.lots {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lot {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 14px;
  padding: 18px 0;
  border-top: 2px dashed var(--carton-line);
}

.lot:first-child {
  padding-top: 4px;
  border-top: 0;
}

.lot:last-child {
  padding-bottom: 4px;
}

.lot-number {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--carton-hi);
  color: var(--red);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  box-shadow: var(--lift-small);
  font-variant-numeric: tabular-nums;
}

.lot-body {
  min-width: 0;
}

.lot-body h2 {
  margin: 2px 0 4px;
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
}

.meta {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 15px;
}

.price {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.shop-link {
  color: var(--blue);
  font-weight: 650;
}

.blurb {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.reasons {
  display: grid;
  gap: 2px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 14.5px;
}

.reasons li {
  padding-left: 18px;
  background: var(--bullet) left 0.42em / 9px 9px no-repeat;
}

/* One per gift, so not red: red stays for the frame, the gifts square and the main action. */
.button.lot-action {
  grid-column: 1 / -1;
  background: var(--carton-hi);
  color: var(--ink);
}

.button.lot-action:hover {
  background: var(--carton);
}

.reroll {
  margin: 22px 0 0;
}

.fineprint {
  max-width: 36em;
  margin: 16px 0 0;
  color: var(--on-table-soft);
  font-size: 14px;
}

.fineprint a {
  color: var(--on-table);
}

/* -------------------------------------------------------------------------------------- */
/* Poem: a printed game card with a double-rule frame                                      */

.back {
  margin: 6px 0 14px;
  font-size: 15px;
}

.back .link {
  color: var(--on-table);
}

.poem-section {
  display: grid;
  gap: 20px;
}

.gift-head h1 {
  margin: 0 0 8px;
  color: var(--on-table);
  font-size: 27px;
  line-height: 1.12;
}

.gift-head .meta {
  margin: 10px 0 14px;
  color: var(--on-table);
}

.gift-head p:last-child {
  margin: 0;
}

.poem-controls {
  display: grid;
  gap: 20px;
  padding: 20px 20px 22px;
}

.length-form {
  margin: 0;
}

.length-label {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

.length-label output {
  color: var(--blue);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
}

.length-form .button {
  margin-top: 12px;
}

.name-field .hint {
  margin: 6px 0 0;
  font-size: 14px;
}

.poem-card {
  position: relative;
  margin: 0;
  padding: 30px 20px 24px;
  border: 3px solid var(--red);
  border-radius: 4px;
  outline: 2px solid var(--ink);
  background-color: var(--carton-hi);
  background-image: var(--grain);
  color: var(--ink);
  font-size: 17px;
  font-stretch: 88%;
  line-height: 1.55;
  box-shadow: var(--lift);
}

/* The inner rule of the double frame, with ochre corner blocks. */
.poem-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--ink);
  pointer-events: none;
}

.poem-card::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--ochre) 0 0) top 2px left 2px / 12px 12px,
    linear-gradient(var(--ochre) 0 0) top 2px right 2px / 12px 12px,
    linear-gradient(var(--ochre) 0 0) bottom 2px left 2px / 12px 12px,
    linear-gradient(var(--ochre) 0 0) bottom 2px right 2px / 12px 12px,
    linear-gradient(var(--ink) 0 0) top left / 16px 16px,
    linear-gradient(var(--ink) 0 0) top right / 16px 16px,
    linear-gradient(var(--ink) 0 0) bottom left / 16px 16px,
    linear-gradient(var(--ink) 0 0) bottom right / 16px 16px;
  background-repeat: no-repeat;
}

.salutation {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 21px;
}

.stanza {
  margin: 0 0 1.05em;
}

/* A line too long for the card wraps with a hanging indent, so each verse line still reads as one. */
.line {
  display: block;
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.signature {
  margin: 1.4em 0 0;
  color: var(--red);
  font-family: var(--display);
  font-size: 19px;
}

.credit {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1.5px dashed var(--carton-line);
  color: var(--ink-soft);
  font-size: 13.5px;
}

.credit[hidden] {
  display: none;
}

.poem-tools {
  display: grid;
  gap: 16px;
}

.toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--on-table);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.toggle input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--ochre);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actions .whatsapp {
  flex: 1 1 100%;
}

.actions .button.secondary {
  flex: 1 1 auto;
}

.poem-section + .fineprint {
  margin-top: 22px;
}

/* -------------------------------------------------------------------------------------- */
/* Guides and articles                                                                     */

.guide,
.guides-index {
  display: grid;
  gap: 24px;
  max-width: 740px;
  margin: 0 auto;
}

.guide-header h1,
.guides-head h1 {
  margin: 0 0 8px;
  color: var(--on-table);
  font-size: 30px;
  line-height: 1.12;
}

.guide-header .back {
  margin-bottom: 10px;
}

.guide-path ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.guide-path ol::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  border-top: 2px dashed var(--table-edge);
}

.guide-artikel .guide-path ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-artikel .guide-path ol::before {
  display: none;
}

.path-square {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  height: 100%;
  min-height: 66px;
  padding: 6px 8px 7px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--carton-hi);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--lift-small);
  transition: background-color 0.3s var(--ease-out);
  --focus: var(--ochre);
}

.path-square .square-number {
  font-size: 22px;
}

.path-start .square-icon {
  width: 24px;
  height: 24px;
  color: var(--red);
}

.path-start[aria-current] .square-icon {
  color: var(--ink);
}

.path-square:hover .square-label {
  text-decoration: underline;
}

.path-square[aria-current] {
  background: var(--ochre);
}

.path-square[aria-current] .square-number {
  color: var(--ink);
}

.guide [data-guide-section],
.guide-body h2 {
  scroll-margin-top: 16px;
}

.reading {
  font-size: 17px;
  line-height: 1.65;
}

.reading > :first-child,
.prose > :first-child {
  margin-top: 0;
}

.reading > :last-child,
.prose > :last-child {
  margin-bottom: 0;
}

.reading p,
.reading ul,
.reading ol {
  max-width: 38em;
}

.reading h2,
.guide-gifts h2,
.guide-group h2 {
  margin: 1.5em 0 0.5em;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.guide-gifts h2,
.guide-group h2 {
  margin-top: 0;
}

.reading h3 {
  margin: 1.4em 0 0.3em;
  font-size: 18px;
}

.reading li + li {
  margin-top: 4px;
}

.guide-gifts .lots {
  margin-top: 12px;
}

.guide-cta {
  margin: 20px 0 0;
}

.guide-poem > h2 {
  margin: 0 0 8px;
  color: var(--on-table);
  font-size: 24px;
}

.guide-poem > .summary {
  margin-bottom: 18px;
}

.guide-poem > p:last-child {
  margin: 18px 0 0;
}

.guide-related > h2 {
  margin: 0 0 14px;
  color: var(--on-table);
  font-size: 24px;
}

.guide-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-card {
  padding: 14px 0;
  border-top: 2px dashed var(--carton-line);
}

.guide-card:first-child {
  padding-top: 0;
  border-top: 0;
}

.guide-card:last-child {
  padding-bottom: 0;
}

.guide-card a {
  color: var(--ink);
  text-decoration: none;
}

.guide-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.guide-card a:hover h3 {
  text-decoration-color: var(--red);
}

.guide-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.guides-head .summary {
  margin-bottom: 18px;
}

.guide-group + .guide-group {
  margin-top: 24px;
}

.guides-head + .guide-group {
  margin-top: 24px;
}

/* Prose pages: zo kiezen we, privacy, not found. */
.prose {
  max-width: 740px;
  margin: 8px auto 0;
  padding: 28px 22px;
  font-size: 17px;
  line-height: 1.6;
}

.prose h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.12;
}

.prose .lead {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 19px;
}

.prose h2 {
  margin: 1.6em 0 0.4em;
  font-size: 21px;
  line-height: 1.2;
}

.prose p,
.prose ul {
  max-width: 38em;
}

.prose li + li {
  margin-top: 6px;
}

.prose .button {
  margin-top: 8px;
}

/* -------------------------------------------------------------------------------------- */
/* Wider screens                                                                          */

@media (min-width: 640px) {
  :root {
    --sq-h: 76px;
    --sq-gap: 10px;
    --gutter: 24px;
  }

  .site-header {
    padding: 14px 24px;
  }

  .site-footer {
    padding: 28px 24px 44px;
  }

  .game-title {
    font-size: 40px;
  }

  .board-frame {
    --frame-pad: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .square {
    padding: 8px 11px 9px;
  }

  .square-number {
    font-size: 28px;
  }

  .square-label {
    font-size: 14px;
  }

  .middle {
    padding: 24px 24px 20px;
  }

  .chip span {
    padding: 9px 13px;
  }

  .chips {
    gap: 8px;
  }

  legend {
    font-size: 27px;
  }

  .readout [data-output="budget"],
  .readout [data-output="age"] {
    font-size: 36px;
  }

  .game-nav .button {
    padding-inline: 22px;
    font-size: 17px;
  }

  html:has(.game) {
    scroll-padding-bottom: 0;
  }

  .game-nav {
    position: static;
    margin: 22px -24px -20px;
    padding: 16px 24px;
  }

  .game-nav [data-next],
  .game-nav [data-submit] {
    flex: 0 0 auto;
    min-width: 210px;
  }

  .nav-foot {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    align-self: center;
    order: -1;
    gap: 2px 18px;
  }

  .squares-left {
    text-align: left;
  }

  .lot {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    column-gap: 18px;
  }

  .lot-number {
    width: 58px;
    height: 58px;
    font-size: 28px;
  }

  .button.lot-action {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    min-height: 46px;
    padding: 10px 16px;
    font-size: 15.5px;
  }

  .results-intro h1,
  .gift-head h1 {
    font-size: 34px;
  }

  .poem-card {
    padding: 44px 44px 34px;
    font-size: 20px;
    font-stretch: 100%;
  }

  .actions .whatsapp {
    flex: 0 1 auto;
  }

  .actions .button.secondary {
    flex: 0 1 auto;
  }

  .guide-header h1,
  .guides-head h1 {
    font-size: 40px;
  }

  .path-square .square-label {
    font-size: 14px;
  }

  .guide-artikel .guide-path ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reading {
    padding: 34px 40px;
    font-size: 18px;
  }

  .prose {
    padding: 40px 44px;
    font-size: 18px;
  }

  .prose h1 {
    font-size: 38px;
  }

  .guide-group,
  .guide-related .guide-list {
    padding: 30px 34px;
  }
}

@media (min-width: 960px) {
  :root {
    --sq-h: 84px;
  }

  .pawn {
    width: 30px;
    height: 45px;
  }

  .page {
    padding-top: 18px;
  }

  .game {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    align-items: start;
  }

  .game-title {
    position: sticky;
    top: 40px;
    margin: 28px 0 0;
    font-size: 52px;
    line-height: 1.08;
  }

  .results {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    align-items: start;
  }

  .results-head {
    position: sticky;
    top: 32px;
    margin-top: 12px;
  }

  .results-head .finish-square {
    width: 66px;
    height: 66px;
    padding: 7px 7px 6px;
  }

  .results-head .finish-square .square-icon {
    width: 24px;
    height: 24px;
  }

  .results-head:only-child {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 760px;
  }

  .results-intro h1 {
    font-size: 34px;
    line-height: 1.1;
  }

  .gift-head h1 {
    font-size: 40px;
    line-height: 1.08;
  }

  .poem-section {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "head card"
      "controls card"
      "tools card"
      ". card";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 48px;
    row-gap: 22px;
    align-items: start;
  }

  .gift-head {
    grid-area: head;
  }

  .poem-controls {
    grid-area: controls;
  }

  .poem-card {
    grid-area: card;
  }

  .poem-tools {
    grid-area: tools;
  }

  .guide-group .guide-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
  }

  .guide-group .guide-card:nth-child(2) {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 520px) {
  .nav-long {
    display: none;
  }

  .nav-short {
    display: inline;
  }
}

@media (max-width: 420px) {
  .poem-card {
    padding: 26px 15px 20px;
    font-size: 16px;
    font-stretch: 82%;
  }
}

@media (max-width: 370px) {
  :root {
    --sq-gap: 6px;
    --gutter: 10px;
  }

  .square {
    padding: 5px 6px 6px;
  }

  .square-label {
    font-size: 11.5px;
  }

  .season-chip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .no-print {
    display: none !important;
  }

  .page {
    padding: 0;
  }

  .poem-section {
    display: block;
  }

  .poem-card {
    max-width: 16cm;
    margin: 0 auto;
    padding: 1.2cm 1.4cm;
    background: #ffffff;
    box-shadow: none;
    font-size: 15pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}