@font-face {
  font-family: Fraunces;
  src: url(/fonts/fraunces.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Figtree;
  src: url(/fonts/figtree.woff2) format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
/* The variable Figtree file has no north-east arrow. This one-glyph face is declared last so it wins for that character and the link arrows stay in Figtree. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/fonts/ibm-plex-mono-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(/fonts/ibm-plex-mono-600.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
:root {
  --page-width: 1536px;
  --page-gutter: 28px;
  --paper: #fffefa;
  --ink: #23262c;
  --soft: #f0eee9;
  --line: #d9d9d6;
  --muted: #626763;
  /* The accent marks things that can be pressed and nothing else. */
  --accent: #23262c;
  --accent-hover: #40444b;
  /* The footer is the design's dark ink band with paper-coloured text. */
  --footer-bg: var(--ink);
  --footer-text: var(--paper);
  --footer-muted: #cfd1cd;
  /* One type system, from the chosen One square design. */
  /* Figtree is second so characters Fraunces lacks, such as the link arrows, stay in the family. */
  --font-display: Fraunces, Figtree, Georgia, serif;
  --font-body: Figtree, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Weights in use: display 600, body 400, labels 600, pressable UI 700, mono 400 and 600. */
  --weight-display: 600;
  --weight-body: 400;
  --weight-label: 600;
  --weight-ui: 700;
  --weight-mono: 400;
  --weight-mono-strong: 600;
  --track-display: -0.045em;
  --track-heading: -0.025em;
  --track-eyebrow: 0.13em;
  /* Display sizes: hero, h1, h2, h3, h4. Phones shrink h2 and h3 through the tokens. */
  --text-hero: clamp(72px, 12vw, 168px);
  --text-h1: clamp(2.25rem, 5vw, 4.125rem);
  --text-h2: 1.8rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-nav: 0.88rem;
  --text-eyebrow: 0.72rem;
  --text-micro: 0.68rem;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-body);
  line-height: 1.55;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button,
.button {
  min-height: 44px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 9px 16px;
  border-radius: 0;
  font-weight: var(--weight-ui);
}
button:hover,
.button:hover {
  background: var(--soft);
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
.primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.primary:hover {
  background: var(--accent-hover);
}
.button {
  display: inline-block;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
[hidden] {
  display: none !important;
}
.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  padding: 10px;
  background: var(--paper);
  z-index: 5;
}
.skip:focus {
  top: 10px;
}
header {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
header button {
  background: transparent;
}
header button:hover {
  background: var(--line);
}
.header-inner {
  max-width: var(--page-width);
  margin: auto;
  min-height: 78px;
  padding: 16px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: var(--weight-display);
  letter-spacing: -0.055em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  display: block;
  background: linear-gradient(
    135deg,
    transparent 48%,
    currentColor 49%,
    currentColor 52%,
    transparent 53%
  );
}
nav {
  display: flex;
  gap: 28px;
  font-size: var(--text-nav);
}
nav a {
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
header nav a {
  font-weight: var(--weight-ui);
}
nav [aria-current] {
  text-decoration: underline;
}
#main-navigation {
  width: 100%;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}
[data-enhanced] #main-navigation {
  width: auto;
  flex-wrap: nowrap;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-nav);
}
.nav-folder {
  position: relative;
}
.nav-folder-heading {
  display: flex;
  align-items: center;
}
.nav-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 32px;
  border: 0;
}
.chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
[aria-expanded="true"] .chevron {
  transform: translateY(2px) rotate(225deg);
}
.nav-panel {
  position: absolute;
  right: 0;
  top: 100%;
  width: 240px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 8px 20px #23262c14;
  z-index: 6;
}
.nav-panel a {
  padding: 8px 12px;
}
#main-navigation a:hover {
  text-decoration: underline;
}
.nav-panel a:hover {
  background: var(--soft);
}
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter) 64px;
}
.kicker,
.footer-groups h2 {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-mono-strong);
  line-height: 1.6;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 1.08;
  margin: 0;
}
h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--track-display);
}
h2 {
  font-size: var(--text-h2);
  letter-spacing: var(--track-display);
}
h3 {
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: var(--track-heading);
}
p {
  margin: 14px 0;
  color: var(--muted);
}
strong,
b {
  font-weight: var(--weight-label);
}
.text-link {
  font-size: 14px;
}
.player {
  border: 1px solid var(--line);
  min-width: 0;
}
.player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.player-top h2 {
  font-size: var(--text-h3);
  margin-top: 2px;
}
.paper-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.fold-canvas {
  width: 100%;
  background: var(--soft);
  display: grid;
  place-items: center;
  aspect-ratio: 1.45;
  max-height: 340px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.fold-canvas svg {
  height: 100%;
  width: 100%;
  max-height: 340px;
}
.player-body {
  padding: 18px 20px;
}
.step-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.step-count {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
}
.instruction {
  font-size: 14px;
  min-height: 44px;
  margin: 10px 0 14px;
}
.phases {
  margin: -6px 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: part;
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.phases li {
  counter-increment: part;
  display: grid;
  grid-template-columns: 22px 1fr;
  color: var(--muted);
  padding: 3px 0 3px 8px;
  border-left: 3px solid var(--line);
}
.phases button {
  all: unset;
  cursor: pointer;
  text-align: left;
}
.phases button:hover {
  text-decoration: underline;
}
.phases button:focus-visible {
  outline-offset: 2px;
}
.phases li::before {
  content: counter(part);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  padding-top: 2px;
}
.phases li.done {
  color: var(--ink);
}
.phases li.done::before {
  content: "✓";
}
.phases li.current {
  color: var(--ink);
  font-weight: var(--weight-label);
  border-left-color: #2f6fdb;
}
.part-badge {
  position: absolute;
  right: 14px;
  top: 10px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 10px;
  background: #2f6fdb;
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  pointer-events: none;
}
.part-badge.fresh {
  animation: part-begins 0.7s ease-out;
}
@keyframes part-begins {
  0% {
    transform: scale(1.35);
    box-shadow: 0 0 0 6px rgba(47, 111, 219, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(47, 111, 219, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .part-badge.fresh {
    animation: none;
  }
}
.main-controls {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
}
.main-controls button {
  padding-inline: 10px;
}
.scrub-label {
  display: flex;
  justify-content: space-between;
  margin-top: 17px;
  font-size: 11px;
  color: var(--muted);
}
input[type="range"] {
  width: 100%;
  height: 30px;
  margin: 3px 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.secondary-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.scrub-time {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.time-rail {
  position: relative;
  height: 40px;
}
.time-segments {
  position: absolute;
  display: flex;
  left: 8px;
  right: 8px;
  top: 23px;
  height: 4px;
  pointer-events: none;
}
.time-segments > span {
  position: relative;
  min-width: 0;
  background: #c5c4bf;
}
.time-segments > span:nth-child(even) {
  background: #e1dfd8;
}
.time-segments > span::before,
.time-segments > span:last-child::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 1px;
  height: 14px;
  background: #72736e;
}
.time-segments > span:last-child::after {
  left: auto;
  right: 0;
}
.time-segments b {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 10px;
  margin-left: -1px;
  background: #2f6fdb;
}
.time-segments i {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-style: normal;
  color: var(--muted);
}
.time-rail input[type="range"] {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  margin: 5px 0 0;
  background: transparent;
}
.time-rail input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.time-rail input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
.time-rail input::-moz-range-track,
.time-rail input::-moz-range-progress {
  height: 4px;
  background: transparent;
}
.time-rail input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
.time-durations {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-bottom: 5px;
}
.time-durations button {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  font-size: 11px;
  font-weight: var(--weight-body);
  font-variant-numeric: tabular-nums;
}
.time-durations button > span:first-child {
  color: var(--muted);
  font-family: var(--font-mono);
}
.time-durations button[aria-current="step"] {
  background: var(--soft);
}
.secondary-controls button {
  font-size: 11px;
  font-weight: var(--weight-body);
  border: 0;
  padding: 4px 0;
  min-height: 44px;
  text-decoration: underline;
}
.secondary-controls label {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.secondary-controls select {
  border: 0;
  background: transparent;
  min-height: 44px;
}
.check input {
  accent-color: var(--ink);
}
.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 9px;
  font-size: 10px;
  color: var(--muted);
}
.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.legend i {
  height: 9px;
  width: 12px;
  display: inline-block;
}
.valley {
  border-bottom: 2px dashed #2f6fdb;
}
.mountain {
  background: repeating-linear-gradient(90deg, #2f6fdb 0 6px, transparent 6px 8px, #2f6fdb 8px 10px, transparent 10px 12px) bottom / 100% 2px no-repeat;
}
.paper-front {
  background: var(--paper-color, #d68165);
  border: 1px solid #555;
}
.paper-back {
  background: var(--paper);
  border: 1px solid #555;
}
.library {
  border-top: 1px solid var(--line);
  padding-top: 30px;
  margin-top: 18px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 24px;
}
.section-head h2 {
  margin-top: 6px;
}
.section-head > a {
  font-size: 13px;
  white-space: nowrap;
}
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.origami-catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.model-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-decoration: none;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
  background: var(--paper);
  transition: background-color 0.16s ease;
}
.model-item:hover {
  background: #f7f5ef;
}
.model-art {
  position: relative;
  height: 158px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--soft) 45%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  overflow: hidden;
}
.model-art-main {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 10px;
  transition: opacity 0.16s ease;
}
.model-art[data-hover-playing="true"] .model-art-main {
  opacity: 0;
}
.model-hover-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.model-hover-hint,
.model-hover-step {
  position: absolute;
  bottom: 6px;
  left: 7px;
  z-index: 2;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 90%, var(--soft));
  border: 1px solid var(--line);
  pointer-events: none;
}
.model-hover-hint {
  color: var(--muted);
  transition: opacity 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.model-item:hover .model-hover-hint {
  color: var(--ink);
  border-color: var(--ink);
}
.model-art[data-hover-playing="true"] .model-hover-hint {
  opacity: 0;
}
.model-art svg {
  width: 100%;
  max-width: 176px;
  height: 136px;
  overflow: visible;
}
.model-form-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 88%, var(--soft));
  border: 1px solid var(--line);
  pointer-events: none;
}
.model-item h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  font-size: 19px;
}
.model-item h3 span {
  font: var(--weight-body) 16px var(--font-body);
  flex-shrink: 0;
}
.model-summary {
  font-size: 12.5px !important;
  line-height: 1.38;
  color: var(--muted);
  margin: 6px 0 4px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.model-meta {
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  color: var(--muted);
  margin: auto 0 0 !important;
  padding-top: 6px;
}
.guide-strip {
  padding: 28px 0;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.guide-strip h2 {
  font-size: var(--text-h3);
}
.guide-strip > div {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
}
.explore {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.explore-grid > a {
  padding: 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.explore-grid > a:hover {
  background: var(--soft);
}
.explore-grid h3, .paper-guide-grid h2 {
  font-size: var(--text-h3);
  line-height: 1.2;
}
.explore-grid p {
  margin: 8px 0 0;
  font-size: 13px;
}
.paper-guide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.breadcrumb {
  font-size: 11px;
  color: var(--muted);
  margin: 22px 0 28px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.page-intro {
  max-width: 800px;
  margin: 25px 0 30px;
}
.page-intro h1 {
  margin-top: 10px;
}
.page-intro p {
  font-size: 17px;
  max-width: 620px;
}
.facts {
  display: flex;
  gap: 0;
  font-size: 11px;
  color: var(--muted);
}
.facts span {
  padding: 0 12px;
  border-right: 1px solid var(--line);
}
.facts span:first-child {
  padding-left: 0;
}
.facts span:last-child {
  border: 0;
}
.lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 36px;
}
.lesson-grid .fold-canvas {
  aspect-ratio: 1.7;
}
.lesson-grid .fold-canvas svg {
  max-height: 390px;
}
.swatches {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}
.swatches button {
  background: var(--swatch);
  width: 44px;
  padding: 0;
  border: 4px solid var(--paper);
  outline: 1px solid var(--line);
}
.swatches [aria-pressed="true"] {
  outline: 2px solid var(--ink);
}
.next-model {
  display: block;
  font-size: 13px;
  margin: 13px 0;
}
.slides {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
}
.slides button {
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: baseline;
  border: 0;
  font-size: 11px;
  font-weight: var(--weight-body);
}
.slides button span {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
}
.slides [aria-current] {
  background: var(--soft);
  font-weight: var(--weight-label);
}
.library-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 0 24px;
  font-size: 11px;
  color: var(--muted);
}
.library-tools label {
  display: flex;
  align-items: center;
  gap: 14px;
}
.library-tools input {
  padding: 12px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 13px;
  width: 230px;
}
.reading {
  max-width: 720px;
  margin: 40px auto;
}
.reading h1 {
  margin-top: 10px;
  margin-bottom: 22px;
}
.reading .lead {
  font-size: 21px;
  line-height: 1.4;
}
.reading h2 {
  margin-top: 36px;
}
.reading p {
  line-height: 1.8;
}
.reading li {
  color: var(--muted);
  padding: 6px;
}
.reading .button {
  margin-top: 22px;
}
/* App documentation keeps connection details and tool inputs readable on phones. */
.app-documentation section { scroll-margin-top: 100px; }
.app-doc-contents { display: flex; flex-wrap: wrap; gap: 0 20px; border-block: 1px solid var(--line); }
.app-doc-contents a { display: inline-flex; align-items: center; min-height: 44px; }
.app-documentation h3 { margin-top: 24px; }
.app-documentation code { overflow-wrap: anywhere; font-size: .9em; }
.app-doc-endpoint { display: inline-block; max-width: 100%; }
.app-documentation pre { padding: 16px; background: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.app-doc-table { max-width: 100%; overflow-x: auto; }
.app-doc-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.app-doc-table caption { text-align: left; padding-block: 8px; font-weight: var(--weight-label); }
.app-doc-table th, .app-doc-table td { padding: 10px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.app-doc-table th:first-child { width: 21%; }
.app-doc-table th:last-child { width: 52%; }
.app-doc-table thead th { position: sticky; top: 0; background: var(--paper); }
.app-doc-table tbody th { position: sticky; left: 0; background: var(--paper); }
.app-documentation figure { margin: 20px 0; }
.app-documentation figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.app-documentation figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.guide-row {
  display: flex;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.guide-row svg,
.guide-symbol {
  width: 130px;
  flex-shrink: 0;
}
.guide-symbol {
  text-align: center;
  font-size: 55px;
}
.guide-row h2 {
  margin-top: 0;
}
.guide-row p {
  margin-bottom: 0;
}
.guide-list {
  border-top: 1px solid var(--line);
}
.guide-list > a {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  text-decoration: none;
}
.guide-list > a:hover {
  background: var(--soft);
}
.guide-list p {
  margin-bottom: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  margin: 22px 0;
  font-size: 13px;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 13px 8px;
  border-bottom: 1px solid var(--line);
}
th {
  font-weight: var(--weight-label);
}
td {
  color: var(--muted);
}
footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  /* The band spans the window; the content keeps the header's and page's 1480px column. */
  padding: 36px max(28px, calc((100% - 1480px) / 2)) 28px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: start;
  gap: 28px;
}
footer :focus-visible {
  outline-color: var(--footer-text);
}
footer .brand {
  font-size: 22px;
}
.footer-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  font-size: 0.875rem;
}
.footer-groups h2 {
  margin: 0 0 8px;
  color: var(--footer-muted);
}
.footer-groups ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-groups a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.footer-groups a:hover, .footer-groups [aria-current] {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .header-inner {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 66px;
    gap: 0 18px;
  }
  #main-navigation, [data-enhanced] #main-navigation {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 12px 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--line);
    align-items: start;
  }
  [data-enhanced] #main-navigation {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav-folder-heading > a {
    flex: 1;
  }
  .nav-disclosure {
    width: 44px;
    border: 1px solid var(--line);
  }
  .nav-panel {
    position: static;
    width: 100%;
    padding: 0 0 0 16px;
    margin-bottom: 8px;
    border: 0;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }
  .explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  footer {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lesson-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 22px;
  }
  .guide-strip {
    align-items: start;
    flex-direction: column;
    gap: 15px;
  }
  .secondary-controls {
    gap: 4px 10px;
  }
}
@media (max-width: 650px) {
  .header-inner {
    padding: 10px 18px;
    min-height: 66px;
  }
  .brand {
    font-size: 22px;
  }
  nav {
    gap: 16px;
  }
  main {
    padding: 0 18px 36px;
  }
  .fold-canvas {
    aspect-ratio: 1.5;
  }
  .player-top {
    padding: 12px 14px;
  }
  .player-body {
    padding: 14px;
  }
  .instruction {
    font-size: 13px;
    min-height: 40px;
  }
  .lesson-grid {
    grid-template-columns: 1fr;
  }
  .lesson-grid .fold-canvas {
    aspect-ratio: 1.35;
  }
  .model-grid {
    grid-template-columns: 1fr;
  }
  .model-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 105px 1fr;
    align-items: center;
    gap: 15px;
    padding: 16px;
  }
  .model-item:last-child {
    border-bottom: 0;
  }
  .model-art,
  .model-art svg {
    height: 100px;
    width: 100px;
  }
  .section-head {
    align-items: start;
  }
  .library {
    padding-top: 23px;
  }
  .section-head > a {
    font-size: 11px;
  }
  .guide-strip > div {
    gap: 14px;
  }
  .page-intro p {
    font-size: 15px;
  }
  .breadcrumb {
    margin: 18px 0 22px;
  }
  .facts {
    font-size: 10px;
  }
  .library-tools {
    align-items: start;
    flex-direction: column;
    gap: 12px;
  }
  .library-tools label {
    width: 100%;
  }
  .library-tools input {
    width: 100%;
    min-width: 0;
  }
  .slides {
    grid-template-columns: 1fr;
  }
  .slides button {
    font-size: 12px;
  }
  .reading {
    margin: 28px 0;
  }
  .reading .lead {
    font-size: 19px;
  }
  .guide-row {
    gap: 15px;
  }
  .guide-row svg,
  .guide-symbol {
    width: 90px;
  }
  footer {
    padding: 28px 18px 24px;
  }
  .footer-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .explore-grid > a {
    padding: 16px 12px;
  }
}
@media (max-width: 650px) {
  :root {
    --text-h2: 1.625rem;
    --text-h3: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}
@media print {
  header,
  footer,
  .breadcrumb,
  .lesson-stage,
  .model-actions,
  .next-folds,
  [data-print],
  .skip {
    display: none !important;
  }
  main {
    max-width: none;
    padding: 0;
  }
  .step-guide .step-watch {
    display: none;
  }
  .step-guide li {
    break-inside: avoid;
  }
}
/* Optional views share the timeline; no 3D surface exists until requested. */
.view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}
.measurement-units {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.measurement-units select {
  min-height: 44px;
  padding: 5px 8px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  font: inherit;
}
.view-picker {
  display: flex;
  border: 1px solid var(--line);
}
.view-picker button {
  border: 0;
  padding: 7px 15px;
  min-height: 44px;
  font-size: 12px;
}
.view-picker [aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.view-toolbar > span {
  font-size: 11px;
  color: var(--muted);
}
.fold-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--soft);
}
.diagram-stage,
.spatial-stage {
  min-width: 0;
  position: relative;
}
.view-label {
  display: none;
  position: absolute;
  left: 14px;
  top: 10px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
  pointer-events: none;
}
.spatial-stage {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  min-height: 260px;
}
.spatial-stage canvas {
  display: block;
  width: 100%;
  height: 340px;
  touch-action: none;
  cursor: grab;
}
.spatial-stage canvas:active {
  cursor: grabbing;
}
.camera-controls {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.camera-controls button {
  font-size: 10px;
  min-height: 36px;
  padding: 5px 10px;
  background: var(--paper);
}
[data-spatial-status] {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 40%;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.player[data-view="both"] .fold-workspace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.player[data-view="both"] .view-label {
  display: block;
}
.player[data-view="both"] .diagram-stage {
  border-right: 1px solid var(--line);
}
.player[data-view="both"] .fold-canvas {
  height: 340px;
  aspect-ratio: auto;
}
.player[data-view="both"] .spatial-stage canvas {
  height: 340px;
}
.player[data-view="3d"] .diagram-stage {
  display: none;
}
.player[data-view="3d"] .legend .valley {
  border-color: #2f6fdb;
}
@media (max-width: 650px) {
  .view-toolbar {
    padding: 8px 12px;
  }
  .view-picker button {
    padding: 6px 13px;
  }
  .view-toolbar > span {
    font-size: 10px;
  }
  .player[data-view="both"] .fold-workspace {
    grid-template-columns: 1fr;
  }
  .player[data-view="both"] .diagram-stage {
    border-right: 0;
  }
  .player[data-view="both"] .fold-canvas,
  .player[data-view="both"] .spatial-stage canvas {
    height: 250px;
  }
  .spatial-stage canvas {
    height: 290px;
  }
  .camera-controls button {
    min-height: 44px;
  }
  .camera-controls {
    bottom: 6px;
  }
}

.paper-sides {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 14px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.paper-sides span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.paper-sides i {
  width: 12px;
  height: 12px;
  display: inline-block;
}

.craft-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.category-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  background: var(--paper);
  transition: background-color 0.16s ease;
}
.category-item:hover {
  background: #f7f5ef;
}
.category-art {
  height: 158px;
  margin-bottom: 6px;
}
.category-item h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 20px;
}
.category-item p {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0;
}
.category-item .model-meta {
  margin-top: auto !important;
  padding-top: 6px;
}
.contents-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.contents-chips a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-size: 12px;
  font-weight: var(--weight-ui);
}
.home-section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13px;
  align-items: center;
}
.home-section-links a {
  white-space: nowrap;
}
.model-item-planned {
  background: color-mix(in srgb, var(--soft) 35%, var(--paper));
}
.craft-basics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 24px;
}
.craft-basics > h2 {
  grid-column: 1/-1;
}
.craft-basics p {
  font-size: 13px;
}
.template-download {
  display: block;
  margin: 15px 0 9px;
  font-size: 12px;
  text-align: center;
}
.template-check {
  font-size: 12px;
}
.cut-mark {
  border-bottom: 2px solid var(--ink);
}
.single-view {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 12px;
}
@media (max-width: 960px) {
  .craft-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  nav {
    gap: 12px;
  }
  .craft-directory {
    grid-template-columns: 1fr;
  }
  .craft-basics {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .craft-basics p {
    margin-bottom: 0;
  }
}

.glue-mark {
  background: var(--ink);
  border-radius: 50%;
  width: 7px !important;
  height: 7px !important;
}

/* The numbers drawn on the sheet are measurements, so they take the design's mono. */
.paper-measurements text {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
}

.dimension-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.crease-pattern { margin: 16px 0; font-size: 12px; }
.crease-pattern summary { cursor: pointer; min-height: 44px; display: list-item; padding-top: 12px; }
.crease-pattern img { display: block; width: 100%; margin: 8px 0; border: 1px solid var(--line); }

/* Paper references share the site's sheet, type and rules with the lessons. */
.reference-page { min-width: 0; }
.reference-intro { margin: 0 0 18px; }
.reference-intro h1 { margin-top: 7px; }
.reference-answer { font-size: 18px; max-width: 780px; margin: 12px 0 0; }
.reference-answer strong { color: var(--ink); font-weight: var(--weight-label); }
.reference-contents { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 20px; padding: 2px; }
.reference-contents a { flex-shrink: 0; }
.reference-block { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; scroll-margin-top: 18px; }
.reference-block h3 { margin-top: 18px; }
.reference-block p { max-width: 78ch; }
.reference-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.size-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding: 18px 0; border-block: 1px solid var(--line); }
.dimension-list { margin: 0; font-variant-numeric: tabular-nums; }
.dimension-list > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dimension-list > div:last-child { border: 0; }
.dimension-list dt { font-size: 11px; color: var(--muted); }
.dimension-list dd { font-size: 20px; margin: 2px 0 0; }
.sheet-figure { margin: 0; min-width: 0; background: var(--soft); padding: 12px; }
.sheet-figure svg { display: block; width: 100%; }
.sheet-selected { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.sheet-comparison { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
.sheet-figure text { font: var(--weight-body) 14px var(--font-body); fill: var(--ink); }
.sheet-figure figcaption { font-size: 11px; color: var(--muted); margin: 3px 0 0; }
.size-note { display: block; font-size: 11px; color: var(--muted); font-weight: var(--weight-body); margin-top: 5px; }
.reference-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.reference-links a, .popular-sizes a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.section-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.section-directory a { border-bottom: 1px solid var(--line); }
.popular-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; padding-top: 12px; }
.popular-sizes .kicker { margin-right: 8px; }
.chart-group { margin-top: 24px; scroll-margin-top: 18px; }
.chart-group .section-head { margin-bottom: 10px; align-items: center; }
.size-chart { margin: 10px 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.size-chart caption { text-align: left; color: var(--muted); font-size: 11px; padding: 0 8px 8px; }
.size-chart thead { background: var(--soft); }
.size-chart th, .size-chart td { padding: 11px 12px; overflow-wrap: anywhere; }
.size-chart th { width: 52%; font-weight: var(--weight-body); }
.size-chart thead th { font-size: 11px; font-weight: var(--weight-label); }
.size-chart th a { display: inline-flex; min-height: 30px; align-items: center; }
.size-chart tr { scroll-margin-top: 16px; }
.size-chart tr:target { background: var(--soft); outline: 1px solid var(--ink); }
.size-chart small { display: block; color: var(--muted); font-size: 11px; }
.size-chart [data-unit] { display: block; }
.size-chart [data-unit="in"] { font-size: 12px; }
[data-chart-unit="mm"] [data-unit="in"], [data-chart-unit="in"] [data-unit="mm"] { display: none; }
.chart-units { display: flex; gap: 0; padding: 12px 0 0; }
.chart-units button { font-size: 12px; }
.chart-units [aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.size-converter { border: 1px solid var(--line); padding: 20px; scroll-margin-top: 16px; }
.size-converter h2 { margin: 3px 0 16px; }
.converter-fields { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; }
.converter-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); min-width: 0; }
.converter-fields input, .converter-fields select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 14px; }
.converter-help { font-size: 11px; margin: 10px 0; }
.converter-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.converter-result strong { font-weight: var(--weight-label); }
[data-converter-error] { font-size: 13px; color: var(--ink); }
@media (max-width: 800px) {
  .converter-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .converter-preset { grid-column: 1/-1; }
}
@media (max-width: 650px) {
  .header-inner { flex-wrap: wrap; gap: 2px; }
  .header-inner > nav { width: 100%; flex-wrap: wrap; gap: 0 18px; }
  .header-inner > nav a { min-height: 44px; }
  footer > div { flex-wrap: wrap; gap: 8px 20px; }
  footer > div a { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb { gap: 6px; font-size: 11px; margin: 14px 0 18px; }
  .reference-answer { font-size: 16px; }
  .size-overview, .reference-columns { grid-template-columns: 1fr; gap: 16px; }
  .dimension-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .dimension-list dd { font-size: 17px; }
  .dimension-list > div { padding: 8px 0; }
  .sheet-figure { padding: 10px; }
  .reference-columns { gap: 0; }
  .reference-block { margin-top: 20px; padding-top: 18px; }
  .size-converter { padding: 14px; }
  .size-converter h2 { margin-bottom: 12px; }
  .converter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .converter-result { font-size: 12px; gap: 6px 12px; }
  .section-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .chart-group .section-head { gap: 8px; align-items: baseline; }
  .chart-group .section-head > a { white-space: normal; text-align: right; }
  .size-chart th, .size-chart td { padding: 10px 6px; font-size: 12px; }
  .size-chart th { width: 48%; }
}
@media print {
  .reference-contents, .size-converter, .chart-units { display: none; }
  [data-size-chart] [data-unit] { display: block; }
  .size-chart tr, .sheet-figure, .reference-block { break-inside: avoid; }
}
.breadcrumb { align-items: center; }
.breadcrumb a { display: inline; min-height: 0; }
.b-comparison th { width: 20%; }
.b-comparison thead { position: sticky; top: 0; }
.size-chart th a { min-height: 44px; }
.size-chart thead { position: sticky; top: 0; z-index: 1; }

.header-inner > nav { flex-wrap: wrap; justify-content: flex-end; gap: 0 20px; }
.reference-article-section:first-of-type { margin-top: 0; }
.reference-article-section .button { margin-top: 4px; }
.reference-steps { max-width: 78ch; padding-left: 24px; }
.reference-steps li { padding: 4px 0 8px 4px; }
.template-figure { margin: 20px 0 0; max-width: 432px; }
.template-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.template-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.template-downloads a { font-size: 14px; }
@media (max-width: 650px) {
  .header-inner > nav { justify-content: flex-start; gap: 0 18px; }
  .template-downloads { gap: 8px; }
  .template-downloads a { width: 100%; overflow-wrap: anywhere; }
}

.paper-summary { border-block: 1px solid var(--line); padding: 14px 0; }
.paper-summary > p { max-width: 78ch; margin-top: 0; }
.paper-summary .dimension-list { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.paper-summary .dimension-list > div { border: 0; }
.paper-summary .dimension-list dd { font-size: 18px; }
.paper-handling { margin: 12px 0 0; }
.paper-handling > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 5fr); border-bottom: 1px solid var(--line); padding: 12px 0; gap: 20px; }
.paper-handling dt { font-weight: var(--weight-label); }
.paper-handling dd { margin: 0; max-width: 72ch; }
.paper-handling small { display: block; color: var(--muted); font-weight: var(--weight-body); }
.paper-table-wrap { max-width: 100%; }
.paper-comparison th { width: 22%; }
.paper-comparison td, .paper-comparison th { overflow-wrap: normal; }
.paper-comparison td:nth-child(2) { width: 12%; }
.paper-siblings { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 12px; }
.paper-siblings a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.paper-siblings [aria-current] { font-weight: var(--weight-label); }
.weight-fields { grid-template-columns: 1fr 1fr 2fr; }
.weight-result { display: block; font-size: 25px; padding: 14px 0 4px; }

/* Holiday collections keep dates and project choices in compact shared rows. */
.holiday-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0; border-block: 1px solid var(--line); }
.holiday-dates > div { padding: 12px 16px; border-right: 1px solid var(--line); }
.holiday-dates > div:first-child { padding-left: 0; }
.holiday-dates > div:last-child { border-right: 0; }
.holiday-dates dt { font-size: 12px; color: var(--muted); }
.holiday-dates dd { margin: 3px 0 0; font-variant-numeric: tabular-nums; }
.holiday-dates dd > span, .holiday-dates strong { display: block; }
.holiday-dates dd > span + span { margin-top: 8px; }
.holiday-dates strong { font-size: 12px; font-weight: var(--weight-label); }
.holiday-dates small { display: block; color: var(--muted); }
.holiday-attribution, .holiday-guidance, .holiday-as-of { font-size: 12px; color: var(--muted); }
.holiday-attribution a { display: inline-block; padding-block: 6px; }
.holiday-upcoming { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.holiday-upcoming li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; border-bottom: 1px solid var(--line); }
.holiday-upcoming a { display: flex; align-items: center; min-height: 48px; }
.holiday-upcoming span { font-size: 12px; font-variant-numeric: tabular-nums; }
.holiday-projects { list-style: none; margin: 12px 0 0; padding: 0; }
.holiday-projects li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.holiday-projects h3 { margin: 0; }
.holiday-projects h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.holiday-projects p { margin: 4px 0; }
.holiday-project-meta, .holiday-tools { font-size: 12px; color: var(--muted); }
.holiday-planned h3 { font-size: var(--text-h4); }
@media (max-width: 800px) {
  .header-inner { flex-wrap: wrap; gap: 2px; }
  .header-inner > nav { flex-wrap: wrap; gap: 0 18px; }
  .holiday-upcoming { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .holiday-projects li { grid-template-columns: 1fr; gap: 2px; }
  .holiday-dates { grid-template-columns: 1fr; }
  .holiday-dates > div, .holiday-dates > div:first-child { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .holiday-dates > div:last-child { border-bottom: 0; }
  .holiday-dates dd { margin: 0; }
}
.basis-chart th, .weight-chart th { width: 30%; }
.paper-table-wrap:focus-visible { outline-offset: 2px; }
@media (max-width: 650px) {
  .paper-summary .dimension-list { grid-template-columns: 1fr; gap: 0; }
  .paper-summary .dimension-list > div { padding: 5px 0; }
  .paper-summary .dimension-list dd { font-size: 16px; }
  .paper-handling > div { grid-template-columns: 1fr; gap: 4px; }
  .paper-comparison { table-layout: auto; }
  .paper-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .paper-comparison tbody { display: grid; }
  .paper-comparison tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .paper-comparison th { grid-column: 1/-1; width: auto; padding-block: 0; font-size: 16px; }
  .paper-comparison td { border: 0; padding: 4px 6px; width: auto !important; }
  .paper-comparison td::before { display: block; color: var(--muted); font-size: 10px; }
  .paper-comparison td:nth-child(2)::before { content: "Gsm"; }
  .paper-comparison td:nth-child(3)::before { content: "Folds well"; }
  .paper-comparison td:nth-child(4)::before { content: "Cuts well"; }
  .paper-comparison td:nth-child(5)::before { content: "Best for"; }
  .weight-fields { grid-template-columns: 1fr 1fr; }
  .weight-basis { grid-column: 1/-1; }
  .weight-result { font-size: 21px; }
  .basis-chart { table-layout: auto; }
}
@media print {
  .paper-siblings { display: none; }
  .paper-comparison tr { break-inside: avoid; }
}

.draft-banner {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px dashed var(--muted);
  background: var(--soft);
}
.draft-banner p {
  margin: 4px 0 0;
}

/* Learning articles use the reference shell, with a comfortable reading measure. */
.learn-reading { max-width: 78ch; }
.learn-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; list-style: none; padding: 0; margin: 4px 0 0; }
.learn-directory li { min-width: 0; border-bottom: 1px solid var(--line); padding: 8px 0 14px; }
.learn-directory h3 { margin: 0; }
.learn-directory a { display: inline-flex; align-items: center; min-height: 44px; }
.learn-directory p { font-size: 14px; margin: 0; }
.learn-term { display: block; font-weight: var(--weight-label); margin-bottom: 4px; }
.learn-symbol-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; }
.learn-symbol { width: 120px; height: 80px; }
.learn-steps { padding-left: 24px; }
.learn-steps li { padding-left: 5px; margin: 12px 0; }
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; gap: 2px; }
  .header-inner > nav { width: 100%; flex-wrap: wrap; gap: 0 18px; }
  .header-inner > nav a { min-height: 44px; }
}
@media (max-width: 650px) {
  .learn-directory { grid-template-columns: 1fr; }
  .learn-symbol-row { grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
  .learn-symbol { width: 90px; height: 70px; }
}

/* Model pages: the player spans the page. On wide screens the 3D view and
   the current step's instruction sit side by side, so the reader never looks
   elsewhere for what to do next. The notes follow below in a compact grid. */
.lesson-stage {
  margin-top: 8px;
}
.lesson-stage .player {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.lesson-stage .step-heading h3 {
  font-size: 21px;
  line-height: 1.15;
}
.lesson-stage .instruction {
  font-size: 15px;
  line-height: 1.45;
  margin: 8px 0 10px;
  min-height: 0;
}
.lesson-stage .phases {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.35;
  gap: 3px;
}
.lesson-stage .phases li {
  padding: 2px 0 2px 8px;
}
.lesson-stage .spatial-stage canvas {
  height: min(58vh, 440px);
}
@media (min-width: 960px) {
  .lesson-stage .player {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
  .lesson-stage .player > .player-top,
  .lesson-stage .player > .view-toolbar,
  .lesson-stage .player > .paper-sides,
  .lesson-stage .player > .slides {
    grid-column: 1 / -1;
  }
  .lesson-stage .fold-workspace {
    grid-column: 1;
    border-bottom: 1px solid var(--line);
  }
  .lesson-stage .player-body {
    grid-column: 2;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .lesson-stage .spatial-stage,
  .lesson-stage .spatial-stage canvas {
    height: min(70vh, 640px);
  }
  .lesson-stage .fold-canvas {
    aspect-ratio: auto;
    height: min(70vh, 640px);
    max-height: none;
  }
  .lesson-stage .fold-canvas svg {
    max-height: none;
  }
  .lesson-stage .slides {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
/* The model page leads with its question and goes straight to the player:
   a compact heading, and a player wider than the reading column (up to
   1480px) so the 3D view gets the room the inspector has. */
.model-intro {
  max-width: none;
  margin: 14px 0 18px;
}
.page-intro > .kicker,
.reference-intro > .kicker,
.reading > .kicker {
  display: none;
}
.model-intro h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  margin-top: 0;
}
.model-intro p {
  font-size: 16px;
  max-width: 78ch;
  margin: 8px 0 10px;
}
.model-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.model-actions .button {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
}
.lesson-stage {
  width: 100%;
  margin-top: 28px;
  scroll-margin-top: 18px;
}
.lesson-stage .player > .player-top {
  display: none;
}
/* On phones the first screen should reach the step text and Next: a shorter
   3D view, and the paper-sides row folds into the legend below. */
@media (max-width: 600px) {
  .lesson-stage .spatial-stage canvas {
    height: min(40vh, 340px);
  }
  .lesson-stage .spatial-stage {
    min-height: 0;
  }
  .lesson-stage .paper-sides,
  .lesson-stage [data-view-caption] {
    display: none;
  }
  .lesson-stage .view-toolbar {
    padding-block: 8px;
  }
  .model-intro {
    margin: 8px 0 12px;
  }
  .model-intro p {
    font-size: 15px;
  }
  .lesson-stage .instruction {
    font-size: 16px;
  }
}

/* Step by step below the player: every fold as a clean before-and-after
   drawing with its instruction, in the same cards the review lab uses. The
   section is the page's readable, printable and indexable instructions. */
.step-guide {
  margin-top: 36px;
}
.step-guide ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 14px;
}
.step-guide figure {
  margin: 0;
  height: 100%;
  border: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr;
}
/* A step card: one small drawing on the left, the badge, title, words and
   watch button beside it. */
.step-guide figure {
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: minmax(120px, 1fr);
  align-items: stretch;
}
.step-drawing {
  width: 104px;
  padding: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--soft);
  border-right: 1px solid var(--line);
}
.step-drawing svg {
  width: 100%;
  height: 100%;
}
.step-guide figcaption {
  padding: 12px 14px 14px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.step-guide h3 {
  font-size: 17px;
  margin: 0;
}
.step-guide p {
  font-size: 14px;
  margin: 0;
}
.step-watch {
  justify-self: start;
  font-size: 12px;
  min-height: 32px;
}
/* Lesson pages play like a video: the timeline, play button and speed sit
   across the bottom of the 3D view, and the camera buttons move to its top
   corner out of the way. */
.video-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "play label speed" "rail rail rail";
  align-items: center;
  gap: 2px 12px;
  padding: 8px 14px 6px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-top: 1px solid var(--line);
}
.video-bar [data-play] {
  grid-area: play;
  min-height: 36px;
  font-size: 13px;
}
.video-bar .scrub-label {
  grid-area: label;
  margin: 0;
}
.video-bar .speed {
  grid-area: speed;
  font-size: 12px;
}
.video-bar .time-rail {
  grid-area: rail;
}
.lesson-stage .camera-controls {
  top: 10px;
  bottom: auto;
  left: auto;
  right: 12px;
  width: auto;
}
.step-diagram {
  margin: 12px 0;
  background: var(--soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  max-height: 260px;
  overflow: hidden;
}
.step-diagram svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 600px) {
  .step-diagram {
    max-height: 200px;
  }
  .video-bar {
    padding: 6px 10px 4px;
  }
}
/* The instruction panel matches the 3D stage height: the step heading sits at
   the top, the 2D step diagram sits immediately under the heading, the step
   instruction text sits under the 2D diagram, and Next/Prev stay at the bottom. */
.lesson-stage {
  --stage-h: min(72vh, 620px);
}
.lesson-stage .step-heading {
  min-height: 44px;
}
.step-words {
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.lesson-stage .step-words {
  margin-top: 10px;
}
.lesson-stage .step-diagram-block {
  min-width: 0;
  width: 100%;
  margin-top: 6px;
}
.lesson-stage .step-diagram {
  aspect-ratio: auto;
  height: 184px;
  max-height: none;
  margin: 0;
}
.lesson-stage .step-diagram-block .legend {
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--paper);
  gap: 4px 10px;
}
.lesson-stage .main-controls {
  margin-top: 8px;
  padding-top: 6px;
  background: var(--paper);
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  .lesson-stage .spatial-stage,
  .lesson-stage .spatial-stage canvas,
  .lesson-stage .fold-canvas {
    height: var(--stage-h);
  }
  .lesson-stage .player-body {
    height: var(--stage-h);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .lesson-stage .step-words {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
}
@media (max-width: 959px) {
  .lesson-stage .step-words {
    min-height: 110px;
  }
  .lesson-stage .step-diagram {
    height: 180px;
  }
}
/* The player rewrites its step text, parts and drawing as it plays. Keep
   the browser's scroll anchoring off it, or every step change pulls the
   page back toward the player and the reader cannot scroll away. */
.player {
  overflow-anchor: none;
}
/* The steps menu: a scrollable list over the left of the 3D view, opened
   from the video bar like a video's chapters. */
.video-bar {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "play steps label speed" "rail rail rail rail";
}
.video-bar .steps-toggle {
  grid-area: steps;
  min-height: 36px;
  font-size: 13px;
}
.video-bar .steps-toggle[aria-expanded="true"] {
  background: var(--ink);
  color: var(--paper);
}
.spatial-stage .slides {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 96px;
  width: min(320px, calc(100% - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  grid-template-columns: 1fr;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  z-index: 2;
}
.player[data-steps-open] .spatial-stage .slides {
  display: grid;
}
.spatial-stage .slides button {
  text-align: left;
}
/* A second slider for the current step alone, under the whole sequence. */
.video-bar {
  grid-template-areas: "play steps label speed" "rail rail rail rail" "step step step step";
}
.video-bar .step-scrub {
  grid-area: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
.video-bar .step-scrub input {
  width: 100%;
  accent-color: var(--ink);
}
/* 3D view tools: a small stack of icon buttons on the right edge. */
.camera-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  gap: 4px;
  z-index: 1;
}
.camera-tools button {
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line);
}
.camera-tools svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.camera-tools button:hover {
  background: var(--paper);
}
/* Compact step cards: smaller drawings, tighter text, and a small play icon
   on the drawing instead of a repeated "Watch in 3D" button. */
.step-guide ol {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}
.step-guide figure {
  position: relative;
}
.step-guide figcaption {
  padding: 8px 10px 10px;
  gap: 3px;
}
.step-guide h3 {
  font-size: 15px;
}
.step-guide p {
  font-size: 13px;
  line-height: 1.45;
}
.step-guide .step-watch {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border: 1px solid var(--line);
}
.step-guide .step-watch svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  margin-left: 2px;
}
/* The steps menu is a drawer that slides in from the left edge of the 3D
   view, full height down to the video bar, so it reads as part of the viewer. */
.spatial-stage .slides,
.player[data-steps-open] .spatial-stage .slides {
  display: grid;
  align-content: start;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 80%);
  padding: 6px 6px 140px;
  border: 0;
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 24px color-mix(in srgb, var(--ink) 8%, transparent);
  transform: translateX(-101%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.player[data-steps-open] .spatial-stage .slides {
  transform: none;
  visibility: visible;
  transition: transform 0.22s ease, visibility 0s;
}
.video-bar {
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .spatial-stage .slides,
  .player[data-steps-open] .spatial-stage .slides {
    transition: none;
  }
}
.spatial-stage .slides,
.player[data-steps-open] .spatial-stage .slides {
  bottom: var(--video-bar-h, 120px);
  padding-bottom: 6px;
}
.video-bar {
  background: var(--paper);
}
/* Lesson pages show only the 3D stage. While it loads, the empty stage and
   its controls are already in place with a quiet note in the middle, rather
   than a flat diagram that is then swapped out. */
.lesson-stage .diagram-stage {
  display: none;
}
.lesson-stage [data-spatial-status] {
  position: absolute;
  inset: 0 0 var(--video-bar-h, 120px);
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}
.lesson-stage [data-spatial-status][hidden] {
  display: none;
}
.step-guide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 16px;
}
.step-guide-head h2 {
  font-size: 28px;
  margin: 0;
}
.step-guide-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.step-stage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.step-stage-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--soft);
  text-decoration: none;
  font-size: 12.5px;
  color: var(--ink);
}
.step-stage-chip:hover {
  background: var(--paper);
  border-color: var(--ink);
}
.step-stage-chip span {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
}
.step-stage + .step-stage {
  margin-top: 26px;
}
.step-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.step-stage-head h3 {
  font-size: 19px;
  margin: 0;
}
.step-card-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.step-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-label);
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
  flex-shrink: 0;
}
.step-guide li[data-print-step] {
  cursor: pointer;
}
.step-guide li[data-print-step]:hover figure {
  border-color: var(--ink);
}
.step-guide li[data-print-step][aria-current="step"] figure {
  border-color: var(--accent, var(--ink));
  box-shadow: inset 0 0 0 1px var(--accent, var(--ink));
  background: color-mix(in srgb, var(--soft) 55%, var(--paper));
}
.step-guide li[data-print-step][aria-current="step"] .step-badge {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
@media print {
  .reference-links,
  .step-guide .step-watch,
  .step-guide-tools,
  .step-stage-nav {
    display: none !important;
  }
  .step-guide ol {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px;
  }
  .step-guide figure {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: minmax(92px, 1fr);
  }
  .step-drawing {
    width: 84px;
    padding: 4px;
  }
  .step-guide figcaption {
    padding: 8px 10px;
  }
}
/* Fold next: related self-sustained model cards at the bottom of the lesson. */
.next-folds {
  margin-top: 40px;
}
.next-fold-hubs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
}
.next-fold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.next-fold-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  min-width: 0;
}
.next-fold-card:hover {
  background: var(--soft);
}
.next-fold-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.next-fold-swatch {
  width: 12px;
  height: 12px;
  background: var(--paper-color, #d68165);
  border: 1px solid var(--ink);
  flex-shrink: 0;
}
.next-fold-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 19px;
}
.next-fold-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.next-fold-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--muted);
  margin-top: 4px;
}
.next-fold-facts span + span::before {
  content: "· ";
}

/* Origami Hub: Curated rows, filter bar, category pills, and 4-column catalog */
.origami-curated {
  display: grid;
  gap: 28px;
  margin-bottom: 32px;
}
.origami-curated[hidden] {
  display: none;
}
.origami-curated-row {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.origami-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.origami-spotlight-card {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  min-width: 0;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.origami-spotlight-card:hover {
  background: #f7f5ef;
  border-color: var(--ink);
}
.origami-spotlight-card .model-art {
  height: 124px;
  margin-bottom: 8px;
}
.origami-spotlight-card .model-art svg {
  max-width: 140px;
  height: 106px;
}
.origami-spotlight-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 16.5px;
  margin-top: 3px;
}
.origami-spotlight-card h3 span {
  font: var(--weight-body) 14px var(--font-body);
}
.origami-spotlight-card .model-meta {
  font-family: var(--font-mono);
  font-size: 10px !important;
  color: var(--muted);
  margin: auto 0 0 !important;
  padding-top: 5px;
}

.hub-filter-bar {
  display: grid;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--soft) 45%, var(--paper));
}
.hub-filter-bar .library-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 0;
  font-size: 12px;
  color: var(--ink);
}
.hub-search-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.hub-search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 280px;
  min-width: 220px;
}
.hub-search-icon {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.hub-filter-bar .hub-search-box input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hub-filter-bar .hub-search-box input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.hub-level-pills {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  background: var(--paper);
}
.hub-level-pills button {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  padding: 0 14px;
  min-height: 38px;
  font-size: 12.5px;
  font-weight: var(--weight-body);
  cursor: pointer;
  white-space: nowrap;
}
.hub-level-pills button:hover {
  background: var(--soft);
}
.hub-level-pills button:last-child {
  border-right: 0;
}
.hub-level-pills button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  font-weight: var(--weight-label);
}
.hub-sort-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-left: auto;
}
.hub-filter-bar .hub-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.hub-filter-bar .hub-sort-label select {
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.hub-filter-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.filter-reset {
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  cursor: pointer;
}
.filter-reset:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.hub-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.hub-category-pills button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  min-height: 34px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12.5px;
  font-weight: var(--weight-body);
  cursor: pointer;
}
.hub-category-pills button:hover {
  background: var(--soft);
  border-color: var(--ink);
}
.hub-category-pills button span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
}
.hub-category-pills button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: var(--weight-label);
}
.hub-category-pills button[aria-pressed="true"] span {
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}
.hub-empty {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--soft);
}

@media (max-width: 1180px) {
  .origami-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .origami-spotlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .origami-catalog-grid,
  .model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .origami-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .origami-catalog-grid,
  .origami-spotlight-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Portfolio Header, Mega-Menus & Right-Side Search/Browse Drawer (compact-ux)
   ============================================================================ */
.brand-mark-svg {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
}
.site-header {
  --nav-panel: #1b1e23;
  --nav-panel-hover: #2c313a;
  --nav-text: #fffefa;
  --nav-muted: #cfd1cd;
  --nav-rule: #3a404a;
  --nav-input: #fffefa;
  display: block;
  padding: 10px max(var(--page-gutter), calc((100% - var(--page-width) + var(--page-gutter) + var(--page-gutter)) / 2));
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--footer-bg);
  color: var(--footer-text);
  border-bottom: 1px solid var(--nav-rule);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  min-width: 0;
}
.site-header .brand {
  width: auto;
  margin-right: auto;
  flex-shrink: 0;
  font-size: 24px;
  color: var(--footer-text);
}
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible {
  outline: 2px solid var(--footer-text);
  outline-offset: 3px;
}
.site-header button {
  cursor: pointer;
}
.main-menu.desktop-links {
  display: none;
  position: static;
  inset: auto;
  padding: 0;
  max-height: none;
  overflow: visible;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.primary-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-primary,
.nav-menu-trigger > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: var(--weight-mono-strong);
  line-height: 1.4;
  color: var(--footer-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-primary:hover,
.nav-primary[aria-current="page"],
.nav-menu-trigger > a:hover,
.nav-menu-trigger > a[aria-current="page"] {
  color: var(--footer-text);
  border-bottom-color: var(--footer-text);
  text-decoration: none;
}
.nav-divider {
  height: 24px;
  border-left: 1px solid var(--nav-rule);
  margin: 0 8px;
  flex-shrink: 0;
}
.reference-dropdown {
  position: static;
}
.nav-menu-trigger {
  display: flex;
  align-items: center;
}
.site-header .nav-disclosure {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  width: 26px;
  padding: 3px;
  background: none;
  color: var(--footer-muted);
  border: 0;
}
.site-header .nav-disclosure:hover {
  color: var(--footer-text);
  background: var(--nav-panel-hover);
}
.site-header .nav-disclosure svg {
  width: 15px;
  height: 15px;
  transition: transform 0.18s ease;
}
.site-header .nav-disclosure[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.site-header .nav-disclosure[aria-expanded="true"] {
  color: var(--footer-text);
  background: var(--nav-panel-hover);
}
.reference-menu {
  position: absolute;
  top: 100%;
  right: max(28px, calc((100% - 1480px) / 2));
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  padding: 18px 22px;
  background: var(--nav-panel);
  color: var(--nav-text);
  border: 1px solid var(--nav-rule);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.38);
  white-space: normal;
}
.reference-menu[hidden] {
  display: none !important;
}
.reference-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
[data-nav-menu="paper"] .reference-menu {
  width: min(880px, calc(100vw - 32px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-nav-menu="holidays"] .reference-menu {
  width: min(720px, calc(100vw - 32px));
  grid-template-columns: 1.5fr 1fr;
}
[data-nav-menu="holidays"] .navigation-column:first-child .navigation-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.navigation-column h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-mono-strong);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nav-muted);
  margin: 0 0 8px;
}
.navigation-links {
  display: grid;
  gap: 0;
}
.navigation-links a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: var(--weight-body);
  line-height: 1.45;
  color: var(--nav-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.navigation-links a:hover,
.navigation-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: #fff;
}
.reference-menu .drawer-subtopic {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
}
.reference-menu .drawer-subtopic .navigation-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
}
.reference-menu .drawer-subtopic .drawer-disclosure-trigger {
  min-height: 42px;
  padding: 8px 0;
  font-size: 14.5px;
}
.reference-menu .drawer-subtopic .drawer-disclosure-content {
  padding-left: 10px;
}
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--nav-rule);
  background: transparent;
  color: var(--footer-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-mono-strong);
  line-height: 1.4;
}
.header-icon-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.header-icon-button:hover {
  background: var(--nav-panel-hover);
  border-color: var(--footer-muted);
}
.site-header .mobile-menu-button {
  background: var(--footer-text);
  border-color: var(--footer-text);
  color: var(--ink);
}
.site-header .mobile-menu-button:hover {
  background: #e6e4dc;
}
.site-header .site-search-open {
  min-width: 44px;
  flex-shrink: 0;
}

/* Right-side Modal Search & Browse Drawer */
.site-drawer {
  margin: 0 0 0 auto;
  position: fixed;
  inset: 0;
  width: min(32rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--nav-rule);
  background: var(--nav-panel);
  color: var(--nav-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  color-scheme: dark;
}
.site-drawer:not([open]) {
  display: none !important;
}
.site-drawer[open] {
  animation: drawer-enter 0.24s ease-out;
}
.site-drawer::backdrop {
  background: rgba(12, 15, 19, 0.78);
  animation: drawer-backdrop-enter 0.24s ease-out;
}
.site-drawer[open][data-closing="true"] {
  animation: drawer-exit 0.24s ease-in forwards;
}
.site-drawer[data-closing="true"]::backdrop {
  animation: drawer-backdrop-exit 0.24s ease-in forwards;
}
.drawer-content {
  padding: clamp(20px, 4vw, 30px);
}
.drawer-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.drawer-heading h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-display);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--nav-text);
}
.drawer-heading .header-icon-button {
  background: transparent;
  color: var(--nav-text);
  border-color: var(--nav-rule);
}
.drawer-content .header-icon-button:hover {
  background: var(--nav-panel-hover);
}
.drawer-content > label {
  display: block;
  font-size: 13px;
  color: var(--nav-text);
  margin-bottom: 8px;
}
.drawer-search-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--nav-rule);
  background: var(--nav-input);
  color: var(--ink);
}
.drawer-search-box input {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color-scheme: light;
}
.drawer-search-box input::-webkit-search-cancel-button,
.drawer-search-box input::-webkit-search-decoration {
  appearance: none;
}
.drawer-search-box .header-icon-button {
  border: 0;
  background: transparent;
  color: var(--ink);
}
.drawer-content .search-help {
  margin: 10px 0 18px;
  color: var(--nav-muted);
  font-size: 12px;
  line-height: 1.55;
}
.drawer-groups {
  display: block;
}
.drawer-groups h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-display);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--nav-text);
}
.drawer-primary {
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--nav-rule);
}
.drawer-primary .navigation-links a {
  font-weight: var(--weight-label);
  font-size: 16px;
  min-height: 44px;
}
.drawer-disclosure {
  border-top: 1px solid var(--nav-rule);
  margin-top: 0;
  padding-top: 0;
}
.drawer-primary + .drawer-topic {
  border-top: 0;
}
.drawer-disclosure-heading {
  margin: 0;
}
.drawer-disclosure-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 46px;
  padding: 9px 0;
  text-align: left;
  color: var(--nav-text);
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--weight-display);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.drawer-disclosure-trigger:hover {
  background: transparent;
  color: #fff;
}
.drawer-chevron {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.24s ease;
  flex-shrink: 0;
}
.drawer-disclosure-trigger[aria-expanded="true"] > .drawer-chevron {
  transform: rotate(45deg);
}
.drawer-disclosure-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.24s ease,
    opacity 0.2s ease,
    visibility 0s linear 0.24s;
}
.drawer-disclosure-panel[data-expanded="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.drawer-disclosure-content {
  min-height: 0;
  overflow: hidden;
}
.drawer-subtopic {
  margin-top: 0;
}
.drawer-content .drawer-subtopic .drawer-disclosure-trigger {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-label);
}
.drawer-subtopic .drawer-disclosure-content {
  padding-left: 14px;
}
.drawer-static-group {
  border-top: 1px solid var(--nav-rule);
  padding: 10px 0 6px;
}
.drawer-static-group h4 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nav-muted);
}
.drawer-static-group > .navigation-links {
  padding-left: 12px;
}
.drawer-group-hub {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 0;
  color: var(--nav-muted) !important;
  font-family: var(--font-mono);
  font-size: 12px !important;
  text-underline-offset: 4px;
}
.drawer-content .navigation-links a {
  font-size: 14.5px;
  min-height: 42px;
}
.site-search-results {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-search-results a {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  row-gap: 4px;
  min-height: 60px;
  padding: 13px 0;
  border-bottom: 1px solid var(--nav-rule);
  text-decoration: none;
  font-size: 16.5px;
  color: var(--nav-text);
}
.site-search-results a:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.search-result-category {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nav-muted);
}
.site-search-results strong {
  font-weight: var(--weight-label);
}
.site-search-results a > span:last-child {
  align-self: center;
}
@keyframes drawer-enter {
  from {
    transform: var(--drawer-start, translateX(100%));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes drawer-exit {
  from {
    transform: var(--drawer-start, translateX(0));
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes drawer-backdrop-enter {
  from {
    opacity: var(--backdrop-start, 0);
  }
  to {
    opacity: 1;
  }
}
@keyframes drawer-backdrop-exit {
  from {
    opacity: var(--backdrop-start, 1);
  }
  to {
    opacity: 0;
  }
}
@media (min-width: 1120px) {
  .main-menu.desktop-links {
    display: flex;
  }
  .site-header-actions .mobile-menu-button {
    display: none;
  }
}
@media (max-width: 650px) {
  .site-header {
    padding: 8px 18px;
  }
  .site-header-inner {
    gap: 10px;
    min-height: 44px;
  }
  .site-header-actions {
    gap: 6px;
  }
  .header-action-label {
    display: none;
  }
  .drawer-content {
    padding: 20px;
  }
  .drawer-heading h2 {
    font-size: 23px;
  }
}

/* Structured Route Card Grid (Holidays, Paper Reference & Tools) */
.route-card-grid,
.explore-grid.route-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border: 0;
}
.explore-grid.route-card-grid > a.route-card {
  border: 1px solid var(--line);
}
#seasonal .route-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.route-card,
.explore-grid.route-card-grid > a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}
.route-card:hover,
.explore-grid.route-card-grid > a:hover {
  background: #f7f5ef;
  border-color: var(--ink);
  transform: translateY(-2px);
}
.route-card-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--weight-mono-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.route-card h3,
.explore-grid.route-card-grid > a h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 19px;
  margin: 0;
}
.route-card h3 span {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  flex-shrink: 0;
}
.route-card p,
.explore-grid.route-card-grid > a p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.48;
  color: var(--muted);
}

/* ============================================================================
   Reworked Multi-Column Site Footer
   ============================================================================ */
footer.site-footer {
  display: block;
  margin-top: auto;
  flex-shrink: 0;
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 2px solid var(--ink);
  padding: 44px max(28px, calc((100% - 1480px) / 2)) 28px;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) minmax(0, 3.2fr);
  gap: 36px 48px;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 254, 250, 0.16);
}
.footer-intro .brand {
  color: var(--footer-text);
  font-size: 24px;
}
.footer-intro p {
  color: var(--footer-muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 14px 0 18px;
  max-width: 38ch;
}
.footer-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.footer-quick-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 254, 250, 0.24);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--footer-text);
  text-decoration: none;
}
.footer-quick-pills a:hover {
  background: rgba(255, 254, 250, 0.12);
  border-color: var(--footer-text);
}
.site-footer .footer-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 28px;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.footer-column h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-mono-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--footer-text);
  margin: 0 0 10px;
}
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.footer-column a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--footer-muted);
  text-decoration: none;
}
.footer-column a:hover,
.footer-column a[aria-current="page"] {
  color: var(--footer-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  font-size: 12px;
  color: var(--footer-muted);
}
.site-footer-bottom p {
  margin: 0;
  color: var(--footer-muted);
}
.footer-meta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-meta-links a {
  color: var(--footer-muted);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.footer-meta-links a:hover {
  color: var(--footer-text);
  text-decoration: underline;
}

@media (max-width: 1080px) {
  #seasonal .route-card-grid,
  .route-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer .footer-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  #seasonal .route-card-grid,
  .route-card-grid {
    grid-template-columns: 1fr;
  }
  footer.site-footer {
    padding: 32px 18px 24px;
  }
  .site-footer .footer-groups {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }
}

.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56vh;
  padding: 40px 16px;
}
.not-found-card {
  max-width: 540px;
  width: 100%;
  text-align: center;
  background: var(--paper-sheet);
  border: 1px solid var(--line);
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.not-found-code {
  font-family: var(--mono);
  font-size: clamp(56px, 8vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 12px;
}
.not-found-card h1 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 4px 0 10px;
}
.not-found-card p {
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 42ch;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}



/* The video bar on phones: the step counter beside the 3D view already says
   where the lesson is, so the bar's "Whole sequence" label stays only for
   screen readers instead of colliding with Play and Speed in one row. */
.video-bar .scrub-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  gap: 8px;
}
.video-bar .scrub-label span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .video-bar .scrub-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Layout E, the lesson stage (the owner's trial on the crane lesson):
   the 3D view spans the page container and opens on the finished
   model. One card over its left side holds the title, the preparation (step
   0: what you need, how the paper starts, the tips) and the step caption,
   the video bar sits over its bottom right, and a filmstrip of every step
   runs under it. Each card over the 3D view names the edge it covers
   (--stage-cover), so the view frames the model in the open part. On phones
   the card and the bar follow the 3D view. */
main[data-layout="stage"] {
  max-width: none;
  padding: 0 0 64px;
}
.stage-after {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.stage-hero {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.player[data-layout="stage"] {
  border: 0;
  position: relative;
}
.player[data-layout="stage"] .diagram-stage {
  display: none;
}
.player[data-layout="stage"] .spatial-stage {
  min-height: 0;
}
.player[data-layout="stage"] [data-spatial-status] {
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
}
.player[data-layout="stage"] [data-spatial-status][hidden] {
  display: none;
}
/* Wide screens: the 3D view and the filmstrip fill the first screen. */
@media (min-width: 761px) {
  .stage-hero {
    display: flex;
    flex-direction: column;
    height: max(600px, calc(100vh - 69px));
    height: max(600px, calc(100svh - 69px));
  }
  .player[data-layout="stage"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .player[data-layout="stage"] .fold-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }
  .player[data-layout="stage"] .spatial-stage {
    flex: 1 1 auto;
    position: relative;
    border-bottom: 1px solid var(--line);
  }
  .player[data-layout="stage"] .spatial-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
/* The complete player, including its canvas and filmstrip, keeps the same
   maximum width as the header. Its card, camera tools and video bar keep
   the page's inner gutters, and the tools count as a cover on the right.
   --stage-edge is the gutter inside the player's own width. */
.player[data-layout="stage"] {
  --stage-edge: max(0px, calc((100% - var(--page-width) + var(--page-gutter) + var(--page-gutter)) / 2));
}
.player[data-layout="stage"] .camera-tools {
  --stage-cover: right;
  right: calc(var(--stage-edge) + 12px);
}
/* The one card over the 3D view: the title, the preparation and the step
   caption, which at the finished model offers Start folding. */
.stage-card {
  --stage-cover: left;
  position: absolute;
  top: 16px;
  left: max(24px, var(--stage-edge, 0px));
  z-index: 2;
  width: min(480px, 38%);
  max-height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  border: 1px solid var(--line);
}
.stage-title {
  --stage-cover: none;
}
.stage-card .stage-title {
  flex: none;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.stage-title .breadcrumb {
  margin: 0 0 6px;
}
.stage-title h1 {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
}
.stage-title p {
  font-size: 14.5px;
  line-height: 1.45;
  margin: 6px 0 8px;
}
.stage-title .facts {
  flex-wrap: wrap;
  row-gap: 2px;
  margin: 0;
}
/* While folding, the card gives the description's room to the step. */
.player:not([data-at-end]) .stage-card .stage-title p {
  display: none;
}
/* The card lays out the caption's parts itself (the caption box steps
   aside), so Back, Next and Replay sit in one place, straight under the
   title, at step 0 and at every step after it, however long a step's words
   are; the words follow and scroll when the card runs out of room. At the
   finished model the preparation comes first and Start folding last. */
.player .stage-caption {
  --stage-cover: none;
  display: contents;
}
.stage-card .main-controls,
.stage-card .step-heading,
.stage-card .step-words,
.stage-card .stage-start {
  flex: none;
  margin: 0 18px;
}
.stage-card .main-controls {
  order: 1;
  margin-top: 12px;
}
.stage-card .step-heading {
  order: 2;
  margin-top: 10px;
}
.stage-card .stage-prep {
  order: 3;
}
.stage-card .step-words {
  order: 4;
  flex: 0 1 auto;
  width: auto;
  min-height: 0;
  margin-top: 6px;
  margin-bottom: 14px;
}
.stage-card .stage-start {
  order: 5;
  margin-bottom: 14px;
}
.player[data-at-end] .stage-card .stage-prep {
  order: 1;
  border-bottom: 1px solid var(--line);
}
/* The preparation is step 0: the card shows it at the start and at the
   finished model, and from step 1 on the step takes its place. At step 0
   the caption's words would repeat its Start line, so they give way. */
.stage-prep {
  --stage-cover: none;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 10px;
  padding: 10px 18px 12px;
  font-size: 13.5px;
  line-height: 1.45;
}
.player[data-at-end] .stage-prep {
  margin-top: 0;
}
.player[data-at-start] .stage-prep {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.player:not([data-at-end]):not([data-at-start]) .stage-prep,
.player[data-at-start] .stage-caption .step-words {
  display: none;
}
.stage-prep dl {
  margin: 0;
  display: grid;
  gap: 8px;
}
.stage-prep dl > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
}
.stage-prep dt {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-mono-strong);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}
.stage-prep dd {
  margin: 0;
}
.stage-prep ul {
  margin: 0;
  padding-left: 15px;
  display: grid;
  gap: 4px;
}
.stage-prep .reference-links {
  margin: 0;
  gap: 2px 16px;
}
.stage-prep .template-download {
  min-height: 36px;
  margin-top: 6px;
  padding: 6px 12px;
}
.stage-prep .template-check {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.stage-prep .reference-links a,
.stage-prep > .notation-link {
  min-height: 32px;
}
.stage-prep > .notation-link {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 0 86px;
  font-size: 13px;
}
.stage-caption .step-heading {
  display: grid;
  gap: 2px;
}
.stage-caption .step-count {
  font-size: 11px;
}
.stage-caption h2 {
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: var(--track-heading);
}
/* At the finished model the card's title already names it. */
.player[data-at-end] .stage-caption [data-title] {
  display: none;
}
.stage-caption .step-words {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.stage-caption .instruction {
  margin: 0;
  min-height: 0;
  font-size: 14.5px;
  line-height: 1.45;
}
.stage-caption .phases {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  gap: 3px;
}
.stage-start {
  display: none;
  gap: 8px;
}
.stage-start .button {
  min-height: 44px;
}
.stage-start .primary {
  flex: 1;
  font-size: 16px;
}
.player[data-at-end] .stage-start {
  display: flex;
}
.player[data-at-end] .stage-caption .main-controls,
.player[data-at-end] .stage-caption .phases {
  display: none;
}
/* The video bar in two slim rows: play and speed either side, the whole
   lesson above and the current step below. It runs from beside the card to
   the right edge, so the timeline gets the stage's width without covering
   the card. The card says where the lesson is, so the bar's position label
   stays for screen readers only. */
.player[data-layout="stage"] .video-bar {
  --stage-cover: bottom;
  left: calc(max(24px, var(--stage-edge, 0px)) + min(480px, 38%) + 16px);
  right: var(--stage-edge, 0px);
  width: auto;
  border-left: 1px solid var(--line);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "play rail speed" "play step speed";
  gap: 0 12px;
  padding: 4px 12px 5px;
}
.player[data-layout="stage"] .video-bar .scrub-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.player[data-layout="stage"] .video-bar [data-play] {
  min-height: 34px;
  padding: 4px 12px;
}
.player[data-layout="stage"] .video-bar .time-rail {
  height: 33px;
}
.player[data-layout="stage"] .video-bar .time-segments {
  top: 16px;
}
.player[data-layout="stage"] .video-bar .time-segments i {
  top: -15px;
}
.player[data-layout="stage"] .video-bar .time-rail input[type="range"] {
  height: 30px;
  margin: 3px 0 0;
}
.player[data-layout="stage"] .video-bar .step-scrub {
  gap: 8px;
  font-size: 10.5px;
}
.player[data-layout="stage"] .video-bar .step-scrub input {
  height: 18px;
  margin: 0;
}
/* The filmstrip: every step's drawing in one sideways row, in place of the
   steps menu, with its number and name in one line under it. It follows the
   lesson and takes the player to a step. */
.filmstrip {
  background: var(--soft);
}
.filmstrip ol {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 6px 24px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.filmstrip li {
  flex: 0 0 auto;
}
.filmstrip button {
  width: 84px;
  height: 70px;
  min-height: 0;
  padding: 3px 5px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 46px auto;
  grid-template-areas: "art art" "mark title";
  align-items: center;
  column-gap: 4px;
  background: var(--paper);
  font-weight: var(--weight-body);
}
.filmstrip button[aria-current] {
  text-decoration: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.film-art {
  grid-area: art;
  justify-self: center;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.film-art svg {
  width: 100%;
  height: 100%;
}
.film-mark {
  grid-area: mark;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--weight-mono-strong);
}
.film-title {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted);
  text-align: left;
}
/* Below the stage: the step cards. */
.stage-after .step-guide {
  margin-top: 26px;
}
/* The step cards, three to a row: the drawing at the left, the words and
   the watch button beside it. */
.stage-after .step-guide ol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}
.stage-after .step-guide figcaption {
  min-width: 0;
  padding: 12px 36px 12px 14px;
  gap: 5px;
}
.stage-after .step-guide h3 {
  font-size: 14.5px;
  line-height: 1.25;
}
.stage-after .step-guide p {
  font-size: 13px;
  line-height: 1.42;
}
.stage-after .step-guide .step-watch {
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
}
.stage-after .step-guide .step-watch svg {
  width: 11px;
  height: 11px;
}
@media (max-width: 1100px) {
  .stage-after .step-guide ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.stage-after .step-guide-tools .legend {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 11px;
}
/* Phones: the 3D view first, then the card and the bar under it, so nothing
   covers the model. The card keeps Start folding under the title and lists
   the preparation after it. */
@media (max-width: 760px) {
  .stage-hero {
    --stage-h: clamp(280px, calc(100vh - 360px), 480px);
    --stage-h: clamp(280px, calc(100svh - 360px), 480px);
  }
  .stage-after {
    padding: 0 16px;
  }
  .player[data-layout="stage"] .spatial-stage {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--line);
  }
  .player[data-layout="stage"] .spatial-stage canvas {
    order: 1;
    height: var(--stage-h);
  }
  .player[data-layout="stage"] [data-spatial-status] {
    inset: 0 0 auto;
    height: var(--stage-h);
  }
  .stage-card {
    --stage-cover: none;
    position: static;
    order: 2;
    width: auto;
    max-height: none;
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .stage-card .stage-title {
    padding: 12px 16px 6px;
  }
  .stage-card .main-controls,
  .stage-card .step-heading,
  .stage-card .step-words,
  .stage-card .stage-start {
    margin-left: 16px;
    margin-right: 16px;
  }
  .stage-prep {
    overflow: visible;
    padding: 10px 16px 14px;
  }
  /* At the finished model a phone shows Start folding before the
     preparation, so it stays on the first screen. */
  .player[data-at-end] .stage-card .step-heading {
    order: 1;
  }
  .player[data-at-end] .stage-card .stage-start {
    order: 2;
    margin-top: 8px;
  }
  .player[data-at-end] .stage-card .stage-prep {
    order: 3;
    margin-top: 12px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  .stage-prep .reference-links a,
  .stage-prep > .notation-link {
    min-height: 44px;
  }
  .stage-title .breadcrumb,
  .stage-title p {
    display: none;
  }
  .stage-title h1 {
    font-size: 24px;
    margin-bottom: 4px;
  }
  .player[data-at-end] .stage-caption .step-words {
    display: none;
  }
  .player[data-layout="stage"] .video-bar {
    --stage-cover: none;
    order: 3;
    position: static;
    width: auto;
    border-left: 0;
    grid-template-areas: "rail rail rail" "play step speed";
    padding: 2px 12px 6px;
  }
  .player[data-layout="stage"] .video-bar .step-scrub > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .player[data-layout="stage"] .video-bar .speed {
    font-size: 0;
  }
  .player[data-layout="stage"] .video-bar .speed select {
    font-size: 12px;
  }
  .player[data-layout="stage"] .camera-tools {
    --stage-cover: none;
    top: 10px;
    right: 10px;
  }
  .filmstrip ol {
    padding: 6px 12px;
  }
  .stage-after .step-guide ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}
@media print {
  .player[data-layout="stage"] .spatial-stage > :not(.stage-card),
  .player[data-layout="stage"] .stage-caption,
  .stage-title .breadcrumb,
  .filmstrip,
  .stage-prep .reference-links,
  .stage-prep > .notation-link {
    display: none !important;
  }
  .player .stage-prep {
    display: block !important;
    overflow: visible;
    padding: 0;
    border: 0;
  }
  .stage-hero,
  .player[data-layout="stage"],
  .player[data-layout="stage"] .fold-workspace,
  .player[data-layout="stage"] .spatial-stage {
    display: block !important;
    height: auto !important;
    border: 0;
    background: none;
  }
  .stage-card {
    position: static;
    width: auto;
    max-height: none;
    border: 0;
    background: none;
  }
  .player .stage-title p {
    display: block !important;
  }
  .stage-card .stage-title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .stage-after {
    padding: 0;
  }
}

/* The home page, the owner's "Family table" design: finished models lying on
   the stage's table behind one card, the 3D stage, then bands tinted in
   muted versions of the models' colours, each with a headline, a few
   lessons and one action. The tints are backgrounds only; the ink button
   stays the one action colour. */
main[data-layout="home"] {
  max-width: none;
  padding: 0;
}
.home-wrap {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
/* The finished-model pictures are drawn from the engine at build time and
   cropped to the paper; their outlines stay one pixel at any size. */
.finished-cut {
  display: block;
  width: 100%;
  height: 100%;
}
.finished-cut path {
  vector-effect: non-scaling-stroke;
}
.home-table {
  --hello-w: 600px;
  position: relative;
  height: 620px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: var(--soft);
  background-image:
    linear-gradient(#dedbd3 1px, transparent 1px),
    linear-gradient(90deg, #dedbd3 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}
/* The open part of the table beside the card, where the models lie. */
.home-mat {
  position: absolute;
  top: 0;
  right: max(0px, calc((100% - 1536px) / 2));
  bottom: 0;
  left: max(44%, calc(max(0px, (100% - 1536px) / 2) + 60px + var(--hello-w)));
}
.home-piece {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  transform: rotate(var(--turn));
  filter: drop-shadow(0 6px 8px rgba(35, 38, 44, 0.14));
}
.home-table-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.home-hello {
  width: var(--hello-w);
  max-width: 100%;
  padding: 28px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 8px 8px 0 #dedbd3;
}
.home-hello h1 {
  margin: 8px 0 14px;
  font-size: 3.25rem;
  line-height: 1.02;
}
.home-hello p {
  margin: 0 0 20px;
  font-size: 17px;
  color: #3b3f45;
}
.home-start,
.home-head .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;
  padding: 11px 22px;
  font-size: 16px;
  white-space: nowrap;
}
.home-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.home-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-size: 14px;
  font-weight: var(--weight-ui);
  text-decoration: none;
}
.home-jump a:hover {
  background: var(--paper);
}
/* The 3D stage: the stage lesson page's own player (lesson layout E) at
   section height, its card holding the lesson's preparation and caption at
   one fixed height, and a strip of models under it. Until a player is
   mounted the model's finished picture stands where the 3D view will draw
   it (--fit-*, from the build): the frame is the part of the view the card
   and the video bar leave open. */
.home-stage {
  --stage-left: max(var(--page-gutter), calc((100% - var(--page-width)) / 2 + var(--page-gutter)));
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.home-stage .stage-hero {
  border-bottom: 0;
}
.home-stage .spatial-stage {
  position: relative;
}
.home-stage .stage-card .stage-title {
  padding: 14px 18px 10px;
}
.home-stage .stage-title h2 {
  margin-top: 2px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
}
.home-stage .stage-title p {
  margin: 6px 0 8px;
  font-size: 14.5px;
  line-height: 1.45;
}
/* Before the 3D view opens, its "Opening 3D…" line stays quiet. */
.home-stage .player:not([data-mounted]) [data-spatial-status] {
  display: none;
}
.home-stage-still {
  position: absolute;
  /* The open part the 3D view frames: right of the card, left of the
     camera tools (38 px, 12 px in from the container's edge, 8 px gap), above
     the video bar. */
  inset: 0 calc(var(--stage-edge) + 58px)
    calc(var(--video-bar-h, 61px) + 8px)
    calc(var(--stage-left) + min(440px, 38%) + 8px);
  container-type: size;
  overflow: hidden;
  background: var(--soft);
  pointer-events: none;
  transition: opacity 0.3s;
}
.home-stage [data-spatial][data-ready="true"] ~ .home-stage-still {
  opacity: 0;
}
.home-stage-art svg {
  position: absolute;
  left: calc(50cqw + var(--fit-x, 0) * 50cqh);
  top: calc(50cqh - var(--fit-y, 0) * 50cqh);
  width: calc(var(--fit-w, 1) * 100cqh);
  height: calc(var(--fit-h, 1) * 100cqh);
  transform: translate(-50%, -50%);
}
.home-stage-touch {
  display: none;
}
.home-stage-strip ol {
  padding: 8px 28px;
  padding-left: var(--stage-left);
  border-top: 1px solid var(--line);
}
.home-stage-strip button {
  width: 116px;
  height: 84px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 54px auto;
  grid-template-areas: "art" "title";
}
.home-stage-strip .film-art {
  width: 84px;
  height: 54px;
  padding: 2px;
}
.home-stage-strip .film-title {
  font-size: 12px;
  color: var(--ink);
  text-align: center;
}
.home-stage-strip button[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
@media (min-width: 761px) {
  .home-stage .stage-hero {
    height: 600px;
  }
  /* One fixed height, so the card never jumps between the preparation and
     the steps; its parts scroll inside it. */
  .home-stage .stage-card {
    top: 20px;
    left: var(--stage-left);
    width: min(440px, 38%);
    height: calc(100% - 40px);
    max-height: none;
  }
  .home-stage .player[data-layout="stage"] .video-bar {
    left: calc(var(--stage-left) + min(440px, 38%) + 16px);
  }
}
/* Touch screens: a swipe across the view scrolls the page; the view takes
   the finger only after the reader taps "Tap to turn the model". */
@media (hover: none) {
  .home-stage-touch {
    position: absolute;
    right: 12px;
    top: calc(var(--stage-h, 300px) - 56px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
  }
  .home-stage:not([data-turning]) .spatial-stage canvas {
    pointer-events: none;
    touch-action: auto;
  }
  .home-stage[data-turning] .home-stage-touch {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
  }
}
.home-band {
  padding: 48px 0;
  background: var(--tint);
  border-bottom: 1px solid var(--line);
}
.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.home-head h2 {
  margin-top: 4px;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}
.home-head p {
  max-width: 62ch;
  margin: 8px 0 0;
  font-size: 16px;
}
.home-cards {
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 14px;
}
.home-cards[data-count="5"] {
  --cols: 5;
}
.home-cards[data-count="6"] {
  --cols: 6;
}
.home-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid rgba(35, 38, 44, 0.12);
}
.home-card-art {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 16px 20px;
  overflow: hidden;
  transition: background 0.2s;
}
.home-card:hover .home-card-art {
  background: var(--soft);
}
/* The hover player (src/app.js) draws the fold over the picture in the same
   box, so nothing moves when it starts or stops. */
.home-card-art {
  position: relative;
}
.home-card-art[data-hover-playing="true"] {
  background: var(--soft);
}
.home-card-art[data-hover-playing="true"] > svg {
  visibility: hidden;
}
.home-card:nth-child(odd) .home-card-art svg {
  transform: rotate(-4deg);
}
.home-card:nth-child(even) .home-card-art svg {
  transform: rotate(3deg);
}
.home-card-body {
  display: block;
  padding: 12px 14px 14px;
}
.home-card h3 {
  font-size: 1.2rem;
}
.home-card-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.home-card-note {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #3b3f45;
}
.home-coming {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin: 22px 0 0;
  font-size: 15px;
  color: var(--ink);
}
.home-coming a {
  font-weight: var(--weight-label);
}
.home-coming a span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-mono);
  color: var(--muted);
}
.home-grown {
  padding: 56px 0;
}
.home-grown-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-grown-cards a {
  display: block;
  padding: 0 0 14px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
}
.home-grown-art {
  display: block;
  height: 150px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--soft);
}
.home-grown-art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.home-grown-cards strong {
  display: block;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: var(--weight-display);
  letter-spacing: var(--track-heading);
}
.home-grown-cards .home-card-meta {
  padding: 2px 16px 0;
}
/* Narrower desktops: a slimmer card leaves the models their room. */
@media (max-width: 1180px) {
  .home-table {
    --hello-w: 480px;
  }
  .home-hello h1 {
    font-size: 2.6rem;
  }
  .home-cards[data-count="6"] {
    --cols: 3;
  }
  .home-cards[data-count="5"] {
    --cols: 3;
  }
}
/* Phones: a strip of table with six models first, then the card; the 3D
   view above its card; two cards a row in the bands, each band's action
   after its lessons. */
@media (max-width: 760px) {
  .home-wrap {
    padding: 0 16px;
  }
  .home-table {
    height: auto;
    display: flex;
    flex-direction: column;
    background-size: 40px 40px;
  }
  /* The models open the phone's first screen, straight under the header,
     on a strip short enough to leave the heading and the first action in
     view; the card follows. */
  .home-mat {
    position: relative;
    left: auto;
    right: auto;
    height: 220px;
  }
  .home-piece {
    left: var(--px);
    top: var(--py);
    width: var(--pw);
    height: var(--ph);
  }
  .home-piece[data-phone="off"] {
    display: none;
  }
  .home-table-inner {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .home-hello {
    width: auto;
    padding: 16px;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
  }
  .home-hello h1 {
    font-size: 2.15rem;
  }
  .home-hello p {
    margin-bottom: 14px;
    font-size: 15px;
  }
  .home-start {
    display: flex;
    width: 100%;
  }
  .home-jump {
    flex-wrap: nowrap;
    margin: 14px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .home-jump a {
    flex: 0 0 auto;
  }
  .home-stage {
    --stage-left: 16px;
  }
  .home-stage-still {
    inset: 0 0 auto;
    height: var(--stage-h);
  }
  /* The phone's portrait stage fits the complete poster before 3D opens. */
  .home-stage-art svg {
    left: 50%;
    top: 50%;
    width: 86%;
    height: 86%;
  }
  .home-stage-strip ol {
    padding: 6px 16px;
  }
  .home-band {
    padding: 30px 0;
  }
  .home-band > .home-wrap,
  .home-grown > .home-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .home-head {
    display: contents;
  }
  .home-head > div {
    margin-bottom: 16px;
  }
  .home-head > .button {
    order: 9;
    width: 100%;
    margin-top: 16px;
  }
  .home-coming {
    order: 10;
  }
  .home-head h2 {
    font-size: 1.65rem;
  }
  .home-head p {
    font-size: 15px;
  }
  .home-cards,
  .home-cards[data-count] {
    --cols: 2;
    gap: 10px;
  }
  .home-cards[data-count="5"] .home-card:last-child {
    display: none;
  }
  .home-card-art {
    padding: 10px 12px;
  }
  .home-card-body {
    padding: 10px 10px 12px;
  }
  .home-card h3 {
    font-size: 1.05rem;
  }
  .home-card-note {
    display: none;
  }
  .home-grown {
    padding: 36px 0;
  }
  .home-grown-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The origami band's paths into the catalogue, under its cards. */
.home-paths {
  margin-top: 20px;
}
@media (max-width: 760px) {
  .home-paths {
    order: 8;
  }
}

/* Category hubs share the home page's table, finished-model cards and tints.
   The complete catalogue sits in the compact subject lists under the picks. */
main[data-layout="hub"] {
  max-width: none;
  padding: 0;
}
.hub-reading {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 28px var(--page-gutter) 48px;
}
.subject-hub .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hub-table {
  --hub-table-h: 640px;
  height: auto;
  min-height: var(--hub-table-h);
}
.hub-table .home-table-inner {
  height: auto;
  min-height: var(--hub-table-h);
  padding-top: 36px;
  padding-bottom: 36px;
}
.hub-hello {
  padding: 22px 28px 24px;
}
.hub-hello .breadcrumb {
  margin: 0 0 12px;
  font-size: 12px;
}
.hub-hello h1 {
  font-size: 3.2rem;
}
.hub-hello p {
  font-size: 16px;
  margin-bottom: 16px;
}
.hub-find {
  display: block;
  margin: 16px 0 14px;
}
.hub-find input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 10px 12px;
  font: inherit;
}
.hub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  font-weight: var(--weight-label);
}
.hub-actions .button {
  padding: 10px 16px;
  font-size: 15px;
}
.hub-jump {
  gap: 6px;
  margin-top: 16px;
}
.hub-jump a {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 13px;
}
.hub-jump a span {
  margin-left: 5px;
  color: var(--muted);
  font: 11px var(--font-mono);
}
.hub-mat {
  left: max(46%, calc(max(0px, (100% - 1536px) / 2) + 60px + var(--hello-w)));
}
.hub-piece {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
  top: calc(3% + var(--row) * 32%);
  left: calc(3% + var(--col) * 32%);
  width: 28%;
  height: 28%;
  min-width: 0;
}
.hub-piece:nth-child(n+7) {
  left: calc(1% + var(--col) * 25%);
  width: 23%;
}
.hub-piece-art {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: block;
  padding: 6px;
  transform: rotate(var(--turn));
  filter: drop-shadow(0 6px 8px rgba(35, 38, 44, .14));
}
.hub-piece-art svg {
  width: 100%;
  height: 100%;
}
.hub-piece-label {
  max-width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: 600 10px/1.3 var(--font-mono);
  text-transform: uppercase;
  text-align: center;
}
.hub-piece-label b {
  margin-left: 5px;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}
.hub-piece:hover .hub-piece-label {
  text-decoration: underline;
}
.hub-facets {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 254, 250, .98);
  border-bottom: 1px solid var(--line);
}
.hub-facets > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
}
.hub-facets select, .hub-facets button {
  min-height: 40px;
  border: 1px solid var(--line);
  padding: 7px 10px;
  font: 13px var(--font-body);
  background: var(--paper);
  color: var(--ink);
  max-width: 100%;
}
.hub-result-count {
  margin-left: auto;
  font: 12px var(--font-mono);
}
.hub-band {
  padding: 40px 0;
  scroll-margin-top: 80px;
}
.hub-band .home-head h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
}
.hub-band .home-head .button {
  white-space: normal;
  max-width: 360px;
  flex-shrink: 0;
}
.hub-band .home-cards[data-count="1"] { --cols: 1; max-width: 340px; }
.hub-band .home-cards[data-count="2"] { --cols: 2; max-width: 680px; }
.hub-band .home-cards[data-count="3"] { --cols: 3; }
.hub-every {
  margin-top: 22px;
  border-top: 1px solid rgba(35, 38, 44, .14);
  padding-top: 14px;
}
.hub-every h3 {
  margin: 0 0 8px;
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-names {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 22px;
}
.hub-names a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(35, 38, 44, .2);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  min-width: 0;
}
.hub-names a:hover > span:first-child { text-decoration: underline; }
.hub-names a > span:first-child { overflow-wrap: anywhere; }
.hub-step {
  font: 11.5px/1.6 var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}
.hub-step abbr { text-decoration: none; }
.hub-index-note { display: block; color: var(--muted); margin-top: 3px; }
.hub-show-all { display: none; }
.subject-hub [hidden] { display: none !important; }
@media (min-width: 761px) and (max-width: 1100px) {
  .hub-table { --hello-w: 46%; }
  .hub-hello h1 { font-size: 2.5rem; }
  .hub-hello { padding: 20px; }
  .hub-mat { left: 51%; }
  .hub-names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hub-reading { padding: 24px 16px 32px; }
  .hub-table { height: auto; min-height: 0; }
  .hub-table .home-table-inner { min-height: 0; padding-top: 0; padding-bottom: 0; }
  .hub-hello { padding: 12px 16px 16px; }
  .hub-hello h1 { font-size: 2.2rem; margin: 6px 0 12px; }
  .hub-hello p { font-size: 15px; }
  .hub-mat { left: auto; height: 300px; }
  .hub-piece { left: calc(3% + var(--col) * 32%); top: calc(3% + var(--row) * 49%); height: 44%; width: 28%; }
  .hub-piece:nth-child(n+7) { display: none; }
  .hub-piece-label { font-size: 9px; padding: 3px 4px; }
  .hub-piece-art { padding: 3px; }
  .hub-actions { gap: 12px; }
  .hub-jump { margin-top: 14px; }
  .hub-facets > div { gap: 6px; padding: 8px 16px; }
  .hub-facets label { flex: 1 1 40%; min-width: 0; }
  .hub-facets select { width: 100%; }
  .hub-result-count { margin: 0; flex: 1; }
  .hub-band { padding: 28px 0; scroll-margin-top: 155px; }
  .hub-band .home-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .hub-band .home-head > div { margin: 0; }
  .hub-band .home-head > .button { order: 0; margin: 0; max-width: none; }
  .hub-band .home-cards[data-count] { --cols: 2; }
  .hub-band .home-card h3 { font-size: 1.06rem; }
  .hub-band .home-card-meta { font-size: 10px; }
  .hub-names { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .hub-names a { font-size: 13.5px; }
  .subject-hub[data-enhanced="true"][data-filtering="false"] .hub-every:has(.hub-show-all):not(.is-expanded) .hub-names a:nth-child(n+17),
  .subject-hub[data-enhanced="true"]:not([data-filtering]) .hub-every:has(.hub-show-all):not(.is-expanded) .hub-names a:nth-child(n+17) { display: none; }
  .subject-hub[data-enhanced="true"] .hub-show-all { display: inline-block; margin-top: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); background: var(--paper); font: 600 13px var(--font-body); }
  .subject-hub[data-filtering="true"] .hub-show-all { display: none; }
}
.hub-facet-choices { display: flex; }
.hub-facet-choices button { border-right-width: 0; white-space: nowrap; font-size: 12px; padding: 7px 9px; }
.hub-facet-choices button:last-child { border-right-width: 1px; }
.hub-facet-choices button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.hub-facet-select { display: none; }
@media (max-width: 1350px) and (min-width: 761px) {
  .hub-facet-choices { display: none; }
  .hub-facet-select { display: block; }
}
@media (max-width: 760px) {
  .hub-facet-choices { display: none; }
  .hub-facet-select { display: block; }
  .hub-facet { flex: 1 1 40%; min-width: 0; }
  .hub-jump a { min-height: 44px; }
}
.hub-table .home-table-inner { pointer-events: none; }
.hub-hello { pointer-events: auto; }
@media (min-width: 761px) {
  .hub-mat[data-pieces="4"] .hub-piece { width: 42%; height: 40%; left: 4%; top: 5%; }
  .hub-mat[data-pieces="4"] .hub-piece:nth-child(even) { left: 53%; }
  .hub-mat[data-pieces="4"] .hub-piece:nth-child(n+3) { top: 53%; }
  .hub-mat[data-pieces="3"] .hub-piece { height: 40%; width: 42%; left: 4%; top: 5%; }
  .hub-mat[data-pieces="3"] .hub-piece:nth-child(2) { left: 52%; top: 28%; }
  .hub-mat[data-pieces="3"] .hub-piece:nth-child(3) { left: 6%; top: 55%; }
}
@media (min-width: 761px) {
  .hub-table:has(.hub-mat[data-pieces="1"]), .hub-table:has(.hub-mat[data-pieces="2"]) { --hub-table-h: 500px; }
  .hub-mat[data-pieces="1"] .hub-piece { left: 15%; top: 12%; width: 70%; height: 70%; }
  .hub-mat[data-pieces="2"] .hub-piece { width: 42%; height: 65%; top: 15%; }
  .hub-mat[data-pieces="2"] .hub-piece:nth-child(2) { left: 53%; }
}
@media (max-width: 760px) {
  .hub-result-count { flex: 1 0 calc(100% - 80px); white-space: nowrap; }
}
.hub-questions { border-top: 1px solid var(--line); }
.hub-question { border-bottom: 1px solid var(--line); }
.hub-question summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; min-height: 48px; cursor: pointer; font-weight: var(--weight-label); list-style: none; }
.hub-question summary::-webkit-details-marker { display: none; }
.hub-question summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin: 0 4px 4px; flex-shrink: 0; }
.hub-question[open] summary::after { transform: rotate(225deg); margin-bottom: -4px; }
.hub-question p { max-width: 70ch; margin: 0 0 16px; }
@media (min-width: 761px) {
  .subject-hub[data-small="true"] .home-cards[data-count="9"] { --cols: 3; }
}
@media (max-width: 760px) {
  .subject-hub[data-small="true"] .home-cards[data-count="5"] .home-card:last-child { display: flex; }
}
.hub-band .home-card[data-holiday-project] .home-card-note { display: block; }

/* Catalogue cards share the home card and hover player. Images reserve the
   same box as the inline still, so lazy loading and playback never move it. */
.home-card-still { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-card-still > svg { width: 100%; height: 100%; }
.home-card:nth-child(odd) img.home-card-still { transform: rotate(-4deg); }
.home-card:nth-child(even) img.home-card-still { transform: rotate(3deg); }
.home-card-art[data-hover-playing="true"] > .home-card-still,
.home-card-art[data-hover-playing="true"] > .model-hover-hint { visibility: hidden; }
.home-card:hover .model-hover-hint { color: var(--ink); border-color: var(--ink); }

/* Finished pictures are cached frames from the live studio. Their reserved
   boxes stay fixed when a fallback drawing is replaced or hover starts. */
.studio-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.model-art-main[data-studio-model] { padding: 0; }
.home-card-art:has([data-studio-model]) { padding: 0; }
.home-stage-art[data-studio-model] { display: block; width: 100%; height: 100%; }
.home-card-art[data-hover-playing="true"] > .studio-still { visibility: hidden; }
[data-studio-cutout="true"][data-studio-ready="true"] { filter: none; }
.hub-catalog-title { margin: 0 0 20px; font-size: clamp(1.6rem, 2.2vw, 2rem); }
.hub-catalog-title [data-hub-group-count] { color: var(--muted); font-weight: 400; }
.hub-catalog .home-cards[data-count] { --cols: 4; max-width: none; }
.hub-catalog .home-cards[data-count] .home-card:last-child { display: flex; }
@media (max-width: 760px) {
  .hub-catalog .home-cards[data-count] { --cols: 2; }
}

/* Finished models use committed studio posters, including without scripts.
   Paper keeps its natural projection while the shared backdrop fills the slot. */
.studio-poster { position: relative; aspect-ratio: 4 / 3; display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.studio-poster-backdrop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.studio-poster-paper { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.home-card-art:has(.studio-poster), .model-art-main:has(.studio-poster) { padding: 0; }
.model-art-main > .studio-poster { width: 100%; height: 100%; }
.home-piece > .studio-poster, .home-grown-art > .studio-poster { width: 100%; height: 100%; }
.step-drawing > .studio-poster { min-height: 150px; }
.film-art > .studio-poster { height: 100%; }
.studio-stage-poster { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1; transition: opacity 180ms ease; background: #eee5dc; }
.studio-stage-paper { position: absolute; inset: var(--poster-top, 0px) var(--poster-right, calc(var(--stage-edge, 0px) + 58px)) var(--poster-bottom, calc(var(--video-bar-h, 61px) + 8px)) var(--poster-left, calc(max(24px, var(--stage-edge, 0px)) + min(480px, 38%) + 8px)); }
.home-stage .studio-stage-paper { --poster-left: calc(var(--stage-left) + min(440px, 38%) + 8px); }
[data-spatial][data-ready="true"] ~ .studio-stage-poster { opacity: 0; }
[data-spatial] { opacity: 0; transition: opacity 180ms ease; }
[data-spatial][data-ready="true"] { opacity: 1; transition: none; }
[data-hover-player] > .studio-poster, [data-hover-player] > .model-art-main { opacity: 1; transition: opacity 180ms ease; }
[data-hover-player][data-hover-playing="true"] > .studio-poster, [data-hover-player][data-hover-playing="true"] > .model-art-main { opacity: 1; visibility: visible; }
.model-hover-canvas { opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
[data-hover-playing="true"] > .model-hover-canvas { opacity: 1; }
.home-card-art[data-hover-playing="true"] > .home-card-still { visibility: visible; }
[data-hover-player] > .model-hover-hint { cursor: pointer; z-index: 4; pointer-events: auto; }
[data-hover-loading] > .model-hover-hint { visibility: visible; color: var(--muted); }
[data-hover-loading] > .model-hover-hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: preview-loading 900ms linear infinite; }
@keyframes preview-loading { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .studio-stage-poster { inset: 0 0 auto; height: var(--stage-h); }
  .studio-stage-paper, .home-stage .studio-stage-paper { inset: var(--poster-top, 0px) var(--poster-right, 0px) var(--poster-bottom, 0px) var(--poster-left, 0px); --poster-left: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-stage-poster, [data-spatial], .model-hover-canvas, [data-hover-player] > .studio-poster, [data-hover-player] > .model-art-main { transition: none; }
  [data-hover-loading] > .model-hover-hint::before { animation: none; }
}
.home-piece:has(.studio-poster), .hub-piece-art:has(.studio-poster) { filter: none; }

@media (hover: none) { [data-hover-player][data-hover-playing="true"] > .model-hover-hint { visibility: visible; opacity: 1; } }