/* The Corkboard (/cases/canon) — board-specific rules only. Tokens, keyframes and shared
 * primitives (.page, .masthead, .paper, .d-card, .eyebrow, .footstrip, .disclosure, .btn-gold …)
 * live in deco.css — read that first. Nothing here duplicates a token; everything here is a
 * pixel value taken from design_handoff_endless_noir_reskin/README.md and the prototype's
 * frame `5a` (Endless Noir Reskin.dc.html lines 518-617).
 */

/* ==== title row ======================================================================== */

.cb-titlerow {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  padding: 32px 52px 26px;
}
.cb-titlerow .eyebrow { margin-bottom: 14px; }
.cb-standfirst {
  margin: 0; max-width: 38ch; text-align: right;
  font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6;
  color: var(--text-muted-2);
}

/* ==== viewport / world ================================================================= */
/* This size is load-bearing — the pan/zoom clamp math in board.mjs assumes exactly 1180x700. */

.cb-viewport {
  position: relative;
  width: 1180px; height: 700px;
  overflow: hidden;
  background: var(--bakelite);
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .7);
}
.cb-viewport.dragging { cursor: grabbing; }
.cb-viewport:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }

.cb-world {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.cb-cork {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--board-fallback) url(/assets/corkboard.webp) center/cover;
}

.cb-strings {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
  animation: stringsag 7s ease-in-out infinite;
}
.cb-strings path { transition: stroke .2s, stroke-width .2s, opacity .2s; }

.cb-cards { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* ==== cards ============================================================================= */
/* filter: drop-shadow(...), NEVER box-shadow — the card art is a transparent, deckle-edged
 * image; box-shadow would draw a hard rectangle behind it. */

.cb-card {
  position: absolute;
  transform-origin: 50% 0;
  cursor: pointer;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .6));
  transition: opacity .3s, transform .3s, filter .3s;
}
.cb-card:focus-visible { outline: 2px solid rgba(227, 195, 119, .85); outline-offset: 7px; }
.cb-card.is-selected {
  outline: 2px solid rgba(227, 195, 119, .85); outline-offset: 7px;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .6));
}
.cb-card.is-dimmed { opacity: .18; }

/* height:auto is load-bearing. The <img> carries intrinsic width/height attributes (so the card
 * reserves space before the art loads); without height:auto, `width:100%` scales the width while
 * the attribute pins the height, stretching a 560x332 card into a 560x598 portrait and wrecking
 * the board layout. */
.cb-card__paper { display: block; width: 100%; height: auto; }
.cb-card__face {
  position: absolute; inset: 0; padding: 28px 24px 18px;
  font-family: var(--mono); color: var(--ink-2);
}
.cb-card__kind { font-size: 11px; letter-spacing: .16em; color: var(--paper-label); margin-bottom: 9px; text-transform: uppercase; }
.cb-card__title {
  font-size: 15px; font-weight: 700; letter-spacing: .07em; line-height: 1.3;
  white-space: pre-line; text-transform: uppercase;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* Backstop for a long derived body: never let card copy spill past the paper onto the cork.
 * The face is clipped and the body line-clamped; the drawer carries the full text. */
.cb-card__face { overflow: hidden; }
.cb-card__body {
  font-size: 11px; line-height: 1.5; margin-top: 9px; color: var(--ink-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.cb-card__tack {
  position: absolute; left: 50%; top: -14px; width: 30px; height: 35px; margin-left: -15px;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
}

/* Photo-print variant — added by board.mjs for kind === 'photo'. */
.cb-card--photo .cb-card__face { padding: 0; }
.cb-card__photo-window {
  position: absolute; left: 9%; top: 11%; right: 9%; bottom: 14%;
  background: linear-gradient(160deg, rgba(30, 24, 18, .5), rgba(12, 9, 7, .72));
  mix-blend-mode: multiply;
}
.cb-card__photo-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-card__caption {
  position: absolute; left: 0; right: 0; bottom: 5px; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-muted);
}

/* ==== filter chips ====================================================================== */

.cb-chips { position: absolute; left: 16px; top: 16px; display: flex; gap: 8px; }
.cb-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 13px; cursor: pointer; border: 1px solid rgba(201, 162, 74, .4);
  background: rgba(10, 7, 5, .72); color: #e8d4a8;
}
.cb-chip[aria-current] {
  border-color: transparent; background: var(--grad-button); color: var(--black-2);
}

/* ==== zoom cluster ====================================================================== */

.cb-zoom { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; }
.cb-zoom__btn {
  width: 34px; height: 34px; font-size: 16px; color: #e8d4a8;
  background: rgba(10, 7, 5, .78); border: 1px solid rgba(201, 162, 74, .4); cursor: pointer;
}
.cb-zoom__pct { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--gold); min-width: 46px; text-align: center; }
.cb-zoom__fit {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #e8d4a8; background: rgba(10, 7, 5, .78); border: 1px solid rgba(201, 162, 74, .4);
  padding: 10px 12px; cursor: pointer;
}

/* ==== hint ============================================================================== */

.cb-hint {
  position: absolute; right: 18px; bottom: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(232, 212, 168, .5); pointer-events: none;
}

/* ==== drawer ============================================================================ */

.cb-drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: 392px;
  background: var(--paper-base) url(/assets/paper.webp) center/cover;
  color: var(--ink); padding: 34px 36px;
  box-shadow: var(--sh-drawer);
  overflow: hidden;
}
.cb-drawer[hidden] { display: none; }

.cb-drawer__ring {
  position: absolute; right: -104px; bottom: -116px; width: 290px;
  mix-blend-mode: multiply; opacity: .6; transform: rotate(14deg); pointer-events: none;
}
/* z-index is load-bearing: the drawer's own content is `position:relative` (so it sits above the
 * coffee ring), which otherwise stacks the kind label OVER this button and swallows every click
 * on it — the drawer becomes closable only by Escape. */
.cb-drawer__close {
  position: absolute; right: 26px; top: 26px; z-index: 2; width: 30px; height: 30px; font-size: 15px;
  color: var(--ink-muted); background: transparent; border: 1px solid rgba(120, 90, 40, .4);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.cb-drawer__close:hover { border-color: rgba(120, 90, 40, .8); color: var(--ink); }
.cb-drawer__kind {
  position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--paper-label); margin-bottom: 16px; text-transform: uppercase;
  padding-right: 44px; /* clear the × */
}
.cb-drawer__title {
  position: relative; font-family: var(--deco); font-size: 34px; letter-spacing: .03em;
  line-height: 1.1; text-transform: uppercase; white-space: pre-line; margin-bottom: 18px;
}
.cb-drawer__rule { position: relative; width: 54px; height: 2px; background: var(--paper-label); margin-bottom: 20px; }
.cb-drawer__detail {
  position: relative; margin: 0 0 26px; font-family: var(--serif); font-size: 16px;
  line-height: 1.66; color: var(--ink-body);
}
.cb-drawer__eps-label {
  position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--paper-label); margin-bottom: 11px; text-transform: uppercase;
}
.cb-drawer__eps { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cb-drawer__ep {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #3a3021;
  border: 1px solid rgba(120, 90, 40, .45); padding: 7px 10px;
}
.cb-drawer__play {
  position: relative; display: inline-block; font-family: var(--cond); font-weight: 400;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--cream);
  background: var(--ink); padding: 14px 22px; text-decoration: none;
}

/* ==== 10c: board empty state ============================================================ */
/* Never hide the board itself — the emptiness has to read as *this filter*, not a broken page.
 * The cork stays visible under a radial scrim; one line, one way out. */

.cb-empty { position: absolute; inset: 0; pointer-events: none; }
.cb-empty[hidden] { display: none; }
.cb-empty__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(80% 70% at 50% 40%, rgba(8, 7, 10, .35), rgba(8, 7, 10, .85));
}
.cb-empty__copy {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; padding: 0 40px; pointer-events: auto;
}
.cb-empty__title {
  font-family: var(--deco); font-size: 26px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 10px;
}
.cb-empty__line {
  margin: 0 auto 18px; font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.65; color: #c6bba2; max-width: 34ch;
}
.cb-empty__reset {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #e8d4a8; border: 1px solid rgba(201, 162, 74, .45); padding: 11px 16px;
  background: rgba(10, 7, 5, .7); cursor: pointer;
}
.cb-empty__reset:hover { border-color: var(--gold-bright); color: var(--cream); }

/* ==== 7a: the canon reading surface below the board ===================================== */
/* The longest read on the site. One job per face, and nothing longer than a title is ever
 * uppercase. Every muted label on this paper is --paper-label — never gold. Markup comes from
 * corkboard.ts renderCanonSections(). */

/* ==== case-jacket sub-nav (folder tabs) — the corkboard's own section switcher ========= */
/* Sits under the hero, above the content. Real links to sibling pages; the active folder is
 * pulled forward. Two selection cues (paper fill + gold top rule) plus aria-current, per a11y. */
.canon-tabs {
  display: flex; gap: 3px; align-items: flex-end;
  margin: 8px 0 0; padding: 10px 52px 0;
  border-bottom: 2px solid var(--gold-deep);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.canon-tabs::-webkit-scrollbar { display: none; }
.canon-tab {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 11px 18px; text-decoration: none;
  background: rgba(120, 90, 40, .10);
  border: 1px solid rgba(120, 90, 40, .32); border-bottom: none;
  border-radius: 9px 9px 0 0; color: var(--ink-muted);
  transition: background .18s, color .18s;
}
.canon-tab-num { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--paper-label); }
.canon-tab-label { font-family: var(--cond); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
/* Inactive tabs sit on the dark page, so hover must BRIGHTEN (gold), never darken toward --ink —
 * dark ink on the dark tab is invisible. Scoped off the active tab, which owns the paper fill. */
.canon-tab:not(.is-active):hover { background: rgba(201, 162, 74, .14); color: var(--gold-bright); }
.canon-tab:not(.is-active):hover .canon-tab-label,
.canon-tab:not(.is-active):hover .canon-tab-num { color: var(--gold-bright); }
.canon-tab:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.canon-tab.is-active {
  background: var(--paper-base); border-color: var(--gold-deep); color: var(--ink);
  margin-bottom: -2px; /* overlap the strip's rule so the open folder joins the page */
  box-shadow: inset 0 3px 0 var(--gold);
}
.canon-tab.is-active .canon-tab-label { color: var(--ink); }
.canon-tab.is-active .canon-tab-num { color: var(--gold-deep); }

.canon-note {
  margin: 0; padding: 16px 52px 0; max-width: 82ch;
  font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 15px; line-height: 1.6;
  color: var(--ink-muted);
}
.canon-note-horizon {
  font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--paper-label); white-space: nowrap;
}

.canon-backtop { margin: 44px 0 0; padding-top: 20px; border-top: 1px solid rgba(120, 90, 40, .22); }
.canon-backtop a {
  font-family: var(--cond); font-weight: 500; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--paper-label); text-decoration: none;
}
.canon-backtop a:hover { color: var(--ink); }

/* On a single-section leaf the section head sticks, so its label stays put down a long list. */
.canon-leaf .canon-head {
  position: sticky; top: 0; z-index: 3; margin-top: 0;
  padding: 14px 0 12px; background: var(--paper-base);
}
/* A case page deep-links straight to a row (e.g. /cases/canon/threads#entry-<slug>). Offset the
 * jump target below the sticky head so it isn't hidden under the label the reader just clicked. */
.canon-leaf .canon-row { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 1179px) {
  .canon-tabs { padding: 8px var(--pad-x) 0; }
  .canon-note { padding: 14px var(--pad-x) 0; }
}

.canon-read { padding: 60px 64px 64px; position: relative; }
/* .paper's center/cover is for card-sized surfaces — stretched over this multi-thousand-px
 * column it blurs into blotches. Tile the stock at its native size instead. */
.canon-read { background: linear-gradient(rgba(246, 238, 214, .45), rgba(246, 238, 214, .45)), url(/assets/paper.webp) top left / 1240px auto repeat, var(--paper-base); }
.canon-ring { right: -96px; top: 190px; width: 280px; height: auto; opacity: .5; transform: rotate(18deg); }

.canon-cols { position: relative; display: flex; gap: 52px; align-items: flex-start; }
.canon-main { flex: 1 1 auto; min-width: 0; max-width: 700px; }

/* Section label rows. These replace .eyebrow at .5em gold: measured against the real paper
 * texture that gold lands at 2.2:1; this brown is 4.5:1. */
.canon-head { display: flex; align-items: center; gap: 14px; margin: 52px 0 24px; scroll-margin-top: 16px; }
.canon-head:first-child { margin-top: 0; }
/* Owner override of the comp's 11px Oswald labels (2026-08-09): on the site's longest page
 * the section heads ARE the wayfinding, and at 11px they rendered smaller than the 14px thread
 * names inside their own sections. Display type, ink, like every other Poiret heading. */
.canon-label {
  font-family: var(--deco); font-weight: 400; font-size: 24px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.canon-hairline { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(84, 64, 28, .55), transparent); }
.canon-count { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; color: var(--paper-label); }

/* The primer reads bigger than anywhere else on the site, on purpose. Do not normalize down. */
.canon-primer { margin: 0 0 20px; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.8; color: #3b3122; }
.canon-aside { margin: 0 0 18px; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 16.5px; line-height: 1.72; color: #463a2a; }
.canon-aside a { color: var(--paper-label); text-decoration-color: rgba(84, 64, 28, .5); }

/* Rows and rules. Every list row takes a top rule; the last in a group a bottom rule too. */
.canon-rows { margin-bottom: 26px; }
.canon-row { display: flex; gap: 20px; align-items: baseline; padding: 15px 0; border-top: 1px solid rgba(120, 90, 40, .22); }
.canon-rows > .canon-row:last-child { border-bottom: 1px solid rgba(120, 90, 40, .22); }
.canon-num { flex: none; width: 64px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--paper-label); }

.canon-door { text-decoration: none; color: inherit; }
.canon-row-main { flex: 1; min-width: 0; }
.canon-door-title {
  display: block; font-family: var(--deco); font-size: 25px; letter-spacing: .03em;
  text-transform: uppercase; line-height: 1.2; margin-bottom: 5px; color: var(--ink);
  transition: color .2s;
}
.canon-door:hover .canon-door-title { color: var(--paper-label); }
.canon-door-why { display: block; font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.7; color: #463a2a; }

.canon-record-row { display: flex; }
.canon-record-line { flex: 1; font-family: var(--serif); font-weight: 500; font-size: 17.5px; line-height: 1.72; color: #3b3122; }

/* Threads. A thread name is a heading, not a data chip: 14px Space Mono 700, dotted underline
 * when it links to a board card. Resolved rows echo the case-detail strike treatment. */
.canon-thread { display: block; }
.canon-thread-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 7px; flex-wrap: wrap; }
.canon-thread-name {
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
a.canon-thread-name { text-decoration: none; border-bottom: 1px dotted var(--paper-label); }
a.canon-thread-name:hover { color: var(--paper-label); }
.canon-when { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-label); }
.canon-thread-body { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.72; color: #463a2a; max-width: 58ch; }
/* Recede by ink, never alpha (design rule 2026-08-09): opacity over the texture collapses
 * contrast below AA. The strike carries the "closed" reading; the body just steps back. */
.canon-thread.is-resolved .canon-thread-body { color: var(--ink-muted); }
.canon-thread-name.is-resolved { text-decoration: line-through; text-decoration-color: rgba(168, 51, 29, .7); }

/* The right rail: an on-this-page index with counts, the no-spoilers assurance, and the
 * release-horizon plate. */
.canon-rail { flex: 0 0 264px; position: relative; padding-left: 36px; border-left: 1px solid rgba(120, 90, 40, .28); }
.canon-rail-head {
  font-family: var(--cond); font-weight: 500; font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--paper-label); margin-bottom: 20px;
}
.canon-rail-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 13px 0;
  border-top: 1px solid rgba(120, 90, 40, .2); text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
}
.canon-rail-row:last-of-type { border-bottom: 1px solid rgba(120, 90, 40, .2); }
.canon-rail-row:hover span:first-child { color: var(--paper-label); }
.canon-rail-count { color: var(--paper-label); font-size: 12px; }
.canon-rail-note { margin: 22px 0 0; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: 15px; line-height: 1.7; color: #463a2a; }
.canon-horizon { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(120, 90, 40, .2); }
.canon-horizon-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-label); margin-bottom: 10px;
}
.canon-horizon-case { font-family: var(--deco); font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); line-height: 1.15; }
.canon-horizon-note { margin: 8px 0 0; font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.68; color: #463a2a; }

/* ==== 8b tablet: full-width board, rail becomes a strip ================================= */

@media (max-width: 1179px) {
  .cb-titlerow { padding: 26px var(--pad-x) 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .cb-standfirst { text-align: left; }
  .cb-viewport { width: 100%; height: 560px; }
  .canon-read { padding: 40px var(--pad-x) 48px; }
  .canon-cols { flex-direction: column; }
  /* The rail becomes a full-width strip of chips above the copy. */
  .canon-rail { flex: none; width: 100%; padding-left: 0; border-left: 0; order: -1; padding-bottom: 20px; border-bottom: 1px solid rgba(120, 90, 40, .25); margin-bottom: 6px; }
  .canon-rail-head { margin-bottom: 12px; }
  .canon-rail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .canon-rail-head { flex-basis: 100%; }
  .canon-rail-row {
    flex: none; gap: 8px; padding: 7px 9px; border: 1px solid rgba(120, 90, 40, .35) !important;
    font-size: 11px; letter-spacing: .14em;
  }
  .canon-rail-note { flex-basis: 100%; margin: 8px 0 0; }
  .canon-horizon { flex-basis: 100%; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(120, 90, 40, .2); }
}

/* ==== 8a phone: real board, bottom-sheet drawer ========================================= */

@media (max-width: 599px) {
  .cb-viewport { height: 470px; }
  .cb-chips { left: 14px; right: 14px; top: 12px; overflow-x: auto; scrollbar-width: none; }
  .cb-chips::-webkit-scrollbar { display: none; }
  .cb-chip { white-space: nowrap; flex: none; padding: 7px 10px; }
  .cb-zoom { left: 14px; bottom: 14px; gap: 6px; }
  .cb-zoom__btn { width: 40px; height: 40px; }  /* touch targets never below 40px */
  .cb-zoom__fit { padding: 11px 13px; }
  /* The wheel-and-drag hint collides with the zoom cluster at 390 and touch users pinch
   * anyway — the affordance is the board itself. */
  .cb-hint { display: none; }
  /* The drawer becomes a bottom sheet: full width, paper stock, grab handle, full-width play. */
  .cb-drawer {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62%;
    padding: 16px 22px 26px; overflow-y: auto;
    box-shadow: 0 -20px 40px -18px rgba(0, 0, 0, .8);
  }
  .cb-drawer::before {
    content: ""; display: block; width: 44px; height: 4px; margin: 0 auto 16px;
    background: rgba(120, 90, 40, .35);
  }
  .cb-drawer__title { font-size: 28px; }
  .cb-drawer__play { display: block; text-align: center; padding: 16px; }
  .canon-primer { font-size: 17px; }
  .canon-head { flex-wrap: wrap; }
  .canon-label { font-size: 20px; white-space: normal; }
  .canon-door-title { font-size: 21px; }
  .canon-row { flex-wrap: wrap; gap: 6px 20px; }
  .canon-num { width: auto; }
}