@font-face {
  font-family: "Category Display";
  src: url("../assets/fonts/noto-sans-sc-categories-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Category Tech";
  src: url("../assets/fonts/rajdhani-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
/* Registered so a display's corner brackets can fade on hover. */
@property --category-display-tick { syntax: "<color>"; inherits: false; initial-value: rgb(207 216 224 / 42%); }

.home-page .series-section {
  --category-unit: var(--chapter-content-unit, 1px);
  --category-diagram-opacity: .55;
  --category-content-gap: calc(14 * var(--category-unit));
  --chapter-slot-width: min(var(--chapter-width), calc(1040 * var(--category-unit) + 24px));
  --category-heading-height: calc(80 * var(--category-unit));
  --category-display: "Category Display", "Microsoft YaHei", sans-serif;
  --category-tech: "Category Tech", "Bahnschrift", "Arial Narrow", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: safe center;
  gap: calc(22 * var(--category-unit));
}
.category-heading, .category-panel {
  /* The chapter slot follows this surface so neighboring panels keep their gap. */
  width: min(100%, calc(1040 * var(--category-unit)));
  align-self: center;
}
.category-heading {
  display: flex;
  align-items: end;
  gap: calc(28 * var(--category-unit));
  flex: none;
  min-height: var(--category-heading-height);
}
.category-heading .eyebrow { margin: 0; font-size: calc(10 * var(--category-unit)); }
.category-heading h2 {
  margin: calc(9 * var(--category-unit)) 0 0;
  font: 600 calc(40 * var(--category-unit))/1.2 var(--ui-sans);
  letter-spacing: .02em;
}
.category-heading-rule {
  position: relative;
  flex: 1;
  height: 9px;
  margin-bottom: calc(9 * var(--category-unit));
  background: linear-gradient(90deg, light-dark(#2a353f2d, #acb9c52d), light-dark(#2a353f0d, #acb9c50d)) 0 4px/100% 1px no-repeat;
}
.category-heading-rule::before { content: ""; position: absolute; width: 23px; height: 1px; top: 4px; left: 0; background: light-dark(#2d353e99, #aeb8c499); }
.category-heading-rule::after { content: ""; position: absolute; width: 25px; height: 9px; right: 0; top: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, light-dark(#2a353f50, #acb9c550) 7px 8px); }

.category-panel {
  flex: none;
  /* Heading and surface share the existing chapter height budget. */
  height: max(calc(var(--category-panel-floor, 480) * var(--category-unit)), calc(var(--chapter-content-height) - var(--category-heading-height) - 22 * var(--category-unit) - var(--category-panel-trim, 0px)));
  padding: calc(28 * var(--category-unit)) calc(14 * var(--category-unit));
}
@media (prefers-reduced-motion: no-preference) {
  /* After the surface's own settle details, each column's header line registers in turn. */
  html.has-chapters .home-page .category-panel.is-chapter-calibrating .category-index-line {
    transform-origin: left center;
    animation: chapter-settle-line 240ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  html.has-chapters .home-page .category-panel.is-chapter-calibrating .category-column:nth-child(2) .category-index-line { animation-delay: 40ms; }
  html.has-chapters .home-page .category-panel.is-chapter-calibrating .category-column:nth-child(3) .category-index-line { animation-delay: 80ms; }
  html.has-chapters .home-page .category-panel.is-chapter-calibrating .category-column:nth-child(4) .category-index-line { animation-delay: 120ms; }
  html.has-chapters:is(.is-chapter-entering, .is-chapter-leaving) .home-page .category-panel.is-chapter-calibrating .category-index-line { animation: none; }
}

/* Four columns share one chapter surface. Each holds a specimen display, the
   category's name and description, and a footer with its post count. */
.category-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 100%; }
.category-column {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 calc(20 * var(--category-unit));
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.category-column + .category-column::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(light-dark(#1b262a30, #bfced330), light-dark(#1b262a14, #bfced314)); pointer-events: none; }
.category-column::after { content: ""; position: absolute; z-index: -1; inset: calc(-20 * var(--category-unit)) 0; background: radial-gradient(ellipse at 50% 36%, light-dark(#0d1b250a, #cbddec0a), transparent 75%); opacity: 0; transition: opacity 350ms ease; pointer-events: none; }
.category-column:is(:hover, :focus-visible)::after { opacity: 1; }
.category-column:focus-visible { outline: 1px solid light-dark(#222d3675, #b6c4d075); outline-offset: -6px; }

/* The English label rides in the // header strip, like the other chapters' HUD labels. */
.category-index { display: flex; flex: none; align-items: center; gap: calc(17 * var(--category-unit)); height: calc(24 * var(--category-unit)); }
.category-symbol { position: relative; display: block; flex: none; width: calc(38 * var(--category-unit)); height: calc(24 * var(--category-unit)); color: light-dark(#222d36, #b6c4d0); opacity: .65; font: 600 calc(24 * var(--category-unit))/calc(24 * var(--category-unit)) var(--category-tech); letter-spacing: .12em; }
.category-code { flex: none; color: light-dark(#424f5a, #8d9ba8); font: 600 calc(9 * var(--category-unit))/1 var(--category-tech); letter-spacing: .14em; white-space: nowrap; }
.category-index-line { position: relative; flex: 1; height: calc(1 * var(--category-unit)); background: light-dark(#262f3724, #b5c0ca24); }
.category-index-line::after { content: ""; position: absolute; right: 0; top: calc(-1 * var(--category-unit)); width: calc(3 * var(--category-unit)); height: calc(3 * var(--category-unit)); background: var(--red); }

/* The display takes the column's spare height, so all four specimens share one row. */
.category-composition { display: flex; flex: 1; flex-direction: column; min-height: 0; margin-top: var(--category-content-gap); }
.category-display {
  --category-display-tick: light-dark(rgb(22 29 34 / 42%), rgb(207 216 224 / 42%));
  position: relative;
  display: block;
  flex: 1;
  min-height: calc(110 * var(--category-unit));
  /* The specimen steps down with this container's size; one em is ten category units. */
  container: category-display / size;
  font-size: calc(10 * var(--category-unit));
  /* Corner brackets and a faint dot grid: a small holo screen. */
  background:
    linear-gradient(var(--category-display-tick) 0 0) left top / 9px 1px no-repeat, linear-gradient(var(--category-display-tick) 0 0) left top / 1px 9px no-repeat,
    linear-gradient(var(--category-display-tick) 0 0) right top / 9px 1px no-repeat, linear-gradient(var(--category-display-tick) 0 0) right top / 1px 9px no-repeat,
    linear-gradient(var(--category-display-tick) 0 0) left bottom / 9px 1px no-repeat, linear-gradient(var(--category-display-tick) 0 0) left bottom / 1px 9px no-repeat,
    linear-gradient(var(--category-display-tick) 0 0) right bottom / 9px 1px no-repeat, linear-gradient(var(--category-display-tick) 0 0) right bottom / 1px 9px no-repeat,
    radial-gradient(circle, light-dark(rgb(21 31 40 / 7%), rgb(200 214 226 / 7%)) .8px, transparent 1.2px) center / 13px 13px;
  transition: --category-display-tick 300ms ease;
}
.category-column:is(:hover, :focus-visible) .category-display { --category-display-tick: light-dark(rgb(8 9 11 / 90%), rgb(240 243 246 / 90%)); }

/* Specimens. All four share one construction: 1px planes in the same camera,
   over the same drafting floor. On hover the camera drifts and the specimen
   rises, then each one opens in its own way and shows one orange detail.
   Entry is staged with delays; leaving returns every part at once. */
.category-scene {
  --category-ease: cubic-bezier(.22, .6, .2, 1);
  --category-return: 700ms;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 170px;
  translate: -50% -50%;
  transform: scale(calc(var(--category-unit) / 1px * 1.35 * var(--category-art-size, 1)));
  perspective: 640px;
  perspective-origin: 50% 40%;
  color: light-dark(rgb(37 52 63 / var(--category-diagram-opacity)), rgb(170 188 202 / var(--category-diagram-opacity)));
  transition: color 350ms ease;
  pointer-events: none;
}
/* A soft glow over the floor; it scales and moves with the scene. */
.category-scene::before { content: ""; position: absolute; inset: 48px 0 0; background: radial-gradient(ellipse 46% 40% at 50% 62%, light-dark(rgb(25 37 48 / 7%), rgb(190 206 220 / 7%)), transparent 72%); }
.category-column:is(:hover, :focus-visible) .category-scene { color: light-dark(rgb(28 41 50 / min(1, calc(var(--category-diagram-opacity) + .25))), rgb(186 202 214 / min(1, calc(var(--category-diagram-opacity) + .25)))); }
.category-stage {
  position: absolute;
  left: 80px;
  top: 125px;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(-38deg);
  transition: transform var(--category-return) var(--category-ease);
}
.category-column:is(:hover, :focus-visible) .category-stage { transform: rotateX(-24deg) rotateY(-20deg); transition-duration: 1600ms; }
/* The drafting floor: an 8 x 8 grid with brighter axes, fading out toward its edges. */
.category-floor {
  --category-grid: color-mix(in srgb, currentColor 26%, transparent);
  --category-axis: color-mix(in srgb, currentColor 50%, transparent);
  position: absolute;
  left: -52px;
  top: -52px;
  width: 104px;
  height: 104px;
  transform: rotateX(90deg);
  background:
    linear-gradient(90deg, transparent 52px, var(--category-axis) 52px 53px, transparent 53px),
    linear-gradient(transparent 52px, var(--category-axis) 52px 53px, transparent 53px),
    repeating-linear-gradient(90deg, var(--category-grid) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(var(--category-grid) 0 1px, transparent 1px 13px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent), linear-gradient(transparent, #000 30% 70%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 30% 70%, transparent), linear-gradient(transparent, #000 30% 70%, transparent);
  mask-composite: intersect;
}
.category-specimen { position: absolute; transform-style: preserve-3d; transform: translateY(-56px); transition: transform var(--category-return) var(--category-ease); }
.category-column:is(:hover, :focus-visible) .category-specimen { transform: translateY(-62px); transition-duration: 1600ms; }
.category-specimen i { position: absolute; display: block; box-sizing: border-box; border: 1px solid currentColor; transition: transform var(--category-return) var(--category-ease), opacity var(--category-return) ease; }

/* Minecraft: a block, with a pixel grid on top and a grass line on its sides.
   Hover pulls it into an exploded view, top first, and an orange core voxel forms inside. */
.category-block > i {
  left: -29px;
  top: -29px;
  width: 58px;
  height: 58px;
  background: linear-gradient(transparent calc(30% - .5px), color-mix(in srgb, currentColor 42%, transparent) calc(30% - .5px) calc(30% + .5px), transparent calc(30% + .5px)), light-dark(rgb(37 52 63 / 3%), rgb(170 188 202 / 3%));
}
.category-block > i:nth-child(1) { transform: translateZ(29px); }
.category-block > i:nth-child(2) { transform: rotateY(180deg) translateZ(29px); }
.category-block > i:nth-child(3) { transform: rotateY(-90deg) translateZ(29px); }
.category-block > i:nth-child(4) { transform: rotateY(90deg) translateZ(29px); }
.category-block > i:nth-child(5) {
  transform: rotateX(90deg) translateZ(29px);
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, currentColor 34%, transparent) 0) 0 0 / 25% 100%,
    linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, currentColor 34%, transparent) 0) 0 0 / 100% 25%,
    light-dark(rgb(37 52 63 / 3%), rgb(170 188 202 / 3%));
}
.category-block > i:nth-child(6) { transform: rotateX(-90deg) translateZ(29px); background: light-dark(rgb(37 52 63 / 3%), rgb(170 188 202 / 3%)); }
.category-column:is(:hover, :focus-visible) .category-block > i { transition-duration: 1100ms; transition-delay: 120ms; }
.category-column:is(:hover, :focus-visible) .category-block > i:nth-child(1) { transform: translateZ(40px); }
.category-column:is(:hover, :focus-visible) .category-block > i:nth-child(2) { transform: rotateY(180deg) translateZ(40px); }
.category-column:is(:hover, :focus-visible) .category-block > i:nth-child(3) { transform: rotateY(-90deg) translateZ(40px); transition-delay: 180ms; }
.category-column:is(:hover, :focus-visible) .category-block > i:nth-child(4) { transform: rotateY(90deg) translateZ(40px); transition-delay: 180ms; }
.category-column:is(:hover, :focus-visible) .category-block > i:nth-child(5) { transform: rotateX(90deg) translateZ(46px); transition-delay: 0ms; }
.category-column:is(:hover, :focus-visible) .category-block > i:nth-child(6) { transform: rotateX(-90deg) translateZ(36px); transition-delay: 240ms; }
.category-core { position: absolute; transform-style: preserve-3d; transform: rotateY(0deg) scale3d(.3, .3, .3); transition: transform var(--category-return) var(--category-ease); }
.category-column:is(:hover, :focus-visible) .category-core { transform: rotateY(90deg) scale3d(1, 1, 1); transition-duration: 1400ms; transition-delay: 300ms; }
.category-core > i { left: -8px; top: -8px; width: 16px; height: 16px; border-color: var(--red); background: light-dark(rgb(240 100 70 / 16%), rgb(240 100 70 / 16%)); opacity: 0; }
.category-column:is(:hover, :focus-visible) .category-core > i { opacity: 1; transition-duration: 500ms; transition-delay: 300ms; }
.category-core > i:nth-child(1) { transform: translateZ(8px); }
.category-core > i:nth-child(2) { transform: rotateY(180deg) translateZ(8px); }
.category-core > i:nth-child(3) { transform: rotateY(-90deg) translateZ(8px); }
.category-core > i:nth-child(4) { transform: rotateY(90deg) translateZ(8px); }
.category-core > i:nth-child(5) { transform: rotateX(90deg) translateZ(8px); }
.category-core > i:nth-child(6) { transform: rotateX(-90deg) translateZ(8px); }

/* Daydreams: an orb of three great circles. Hover unwinds the rings like a
   gyroscope at three speeds, and an orange moon starts its orbit. */
.category-orb > i { left: -42px; top: -42px; width: 84px; height: 84px; border-radius: 50%; }
.category-orb > i:nth-child(1) { transform: rotateX(90deg) rotateY(0deg); }
.category-orb > i:nth-child(2) { transform: rotateY(0deg) rotateX(0deg); }
.category-orb > i:nth-child(3) { transform: rotateY(90deg) rotateX(0deg); }
.category-column:is(:hover, :focus-visible) .category-orb > i:nth-child(1) { transform: rotateX(62deg) rotateY(24deg); transition-duration: 1300ms; }
.category-column:is(:hover, :focus-visible) .category-orb > i:nth-child(2) { transform: rotateY(64deg) rotateX(28deg); transition-duration: 1650ms; transition-delay: 60ms; }
.category-column:is(:hover, :focus-visible) .category-orb > i:nth-child(3) { transform: rotateY(134deg) rotateX(-36deg); transition-duration: 2000ms; transition-delay: 120ms; }
.category-orbit { position: absolute; transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-80deg); transition: transform var(--category-return) var(--category-ease); }
.category-column:is(:hover, :focus-visible) .category-orbit { transform: rotateX(14deg) rotateY(150deg); transition-duration: 2000ms; }
/* The moon turns against its orbit, so it always faces the camera. */
.category-moon { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; background: var(--red); opacity: 0; transform: translateX(56px) rotateY(80deg); transition: transform var(--category-return) var(--category-ease), opacity 300ms ease; }
.category-column:is(:hover, :focus-visible) .category-moon { opacity: 1; transform: translateX(56px) rotateY(-150deg); transition-duration: 2000ms, 400ms; transition-delay: 0ms, 150ms; }

/* Collected words: three standing cards. Hover fans them out like a hand and
   writes out the redacted lines on the front card, ending at an orange cursor. */
.category-cards > i { left: -27px; top: -38px; width: 54px; height: 76px; background: light-dark(rgb(37 52 63 / 3%), rgb(170 188 202 / 3%)); }
.category-cards > i:nth-child(1) { transform: translate3d(0, 0, -15px) rotateY(0deg) rotateZ(0deg); border-color: color-mix(in srgb, currentColor 50%, transparent); }
.category-cards > i:nth-child(2) { transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg); border-color: color-mix(in srgb, currentColor 75%, transparent); }
.category-cards > i:nth-child(3) { transform: translate3d(0, 0, 15px) rotateY(0deg) rotateZ(0deg); background: light-dark(rgb(37 52 63 / 4%), rgb(170 188 202 / 4%)); }
.category-column:is(:hover, :focus-visible) .category-cards > i { transition-duration: 1100ms; }
.category-column:is(:hover, :focus-visible) .category-cards > i:nth-child(1) { transform: translate3d(-22px, 4px, -9px) rotateY(-16deg) rotateZ(-8deg); }
.category-column:is(:hover, :focus-visible) .category-cards > i:nth-child(2) { transform: translate3d(0, -6px, 3px) rotateY(0deg) rotateZ(0deg); transition-delay: 50ms; }
.category-column:is(:hover, :focus-visible) .category-cards > i:nth-child(3) { transform: translate3d(22px, 3px, 15px) rotateY(16deg) rotateZ(7deg); transition-delay: 100ms; }
.category-cards > i > span { position: absolute; left: 7px; top: var(--category-line-y); width: var(--category-redacted); height: 1px; background: color-mix(in srgb, currentColor 62%, transparent); transition: width var(--category-return) var(--category-ease); }
.category-cards > i > span:nth-child(1) { --category-line-y: 12px; --category-redacted: 9px; --category-written: 24px; --category-line-step: 0; height: 2px; }
.category-cards > i > span:nth-child(2) { --category-line-y: 24px; --category-redacted: 14px; --category-written: 37px; --category-line-step: 1; }
.category-cards > i > span:nth-child(3) { --category-line-y: 32px; --category-redacted: 6px; --category-written: 31px; --category-line-step: 2; }
.category-cards > i > span:nth-child(4) { --category-line-y: 40px; --category-redacted: 17px; --category-written: 37px; --category-line-step: 3; }
.category-cards > i > span:nth-child(5) { --category-line-y: 48px; --category-redacted: 8px; --category-written: 22px; --category-line-step: 4; }
.category-column:is(:hover, :focus-visible) .category-cards > i > span { width: var(--category-written); transition-duration: 380ms; transition-delay: calc(280ms + var(--category-line-step) * 110ms); }
.category-cards > i > span:last-child::after { content: ""; position: absolute; left: calc(100% + 3px); top: -3px; width: 2px; height: 7px; background: var(--red); opacity: 0; transition: opacity 200ms ease; }
.category-column:is(:hover, :focus-visible) .category-cards > i > span:last-child::after { opacity: 1; transition-delay: 860ms; }

/* Miscellany: an octahedron, whose twelve edges are three orthogonal squares.
   Hover turns each square in its own plane, refolding the octahedron into the
   three mid-planes of a cube around an orange node. */
.category-crystal > i { left: -30px; top: -30px; width: 60px; height: 60px; }
.category-crystal > i:nth-child(1) { transform: rotateZ(45deg) scale(1); }
.category-crystal > i:nth-child(2) { transform: rotateY(90deg) rotateZ(45deg) scale(1); }
.category-crystal > i:nth-child(3) { transform: rotateX(90deg) rotateZ(45deg) scale(1); }
.category-column:is(:hover, :focus-visible) .category-crystal > i:nth-child(1) { transform: rotateZ(0deg) scale(1.16); transition-duration: 1150ms; }
.category-column:is(:hover, :focus-visible) .category-crystal > i:nth-child(2) { transform: rotateY(90deg) rotateZ(0deg) scale(1.16); transition-duration: 1400ms; transition-delay: 80ms; }
.category-column:is(:hover, :focus-visible) .category-crystal > i:nth-child(3) { transform: rotateX(90deg) rotateZ(90deg) scale(1.16); transition-duration: 1650ms; transition-delay: 160ms; }
.category-node { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--red); opacity: 0; transform: rotateZ(45deg) scale(.4); transition: transform var(--category-return) var(--category-ease), opacity var(--category-return) ease; }
.category-column:is(:hover, :focus-visible) .category-node { opacity: 1; transform: rotateZ(0deg) scale(1); transition-duration: 900ms, 400ms; transition-delay: 380ms; }
/* Smaller displays step the specimen down so it stays inside the brackets.
   Widths follow the moon's orbit, heights the raised specimen over its floor. */
@container category-display (width < 16.7em) or (height < 18.3em) { .category-scene { --category-art-size: .9; } }
@container category-display (width < 15.1em) or (height < 16.6em) { .category-scene { --category-art-size: .8; } }
@container category-display (width < 13.6em) or (height < 14.8em) { .category-scene { --category-art-size: .7; } }
@container category-display (width < 12em) or (height < 13.1em) { .category-scene { --category-art-size: .6; } }
@container category-display (width < 10.4em) or (height < 11.4em) { .category-scene { --category-art-size: .52; } }
@container category-display (width < 9.2em) or (height < 10em) { .category-scene { --category-art-size: .46; } }

/* CJK and Latin names share one line height, so the four displays stay equal. */
.category-name { display: block; flex: none; margin-top: calc(16 * var(--category-unit)); white-space: nowrap; font: 700 calc(32 * var(--category-unit))/1.15 var(--category-display); letter-spacing: .04em; }
.category-latin { font: 600 calc(36 * var(--category-unit))/1.02 var(--category-tech); letter-spacing: .01em; }
/* Two lines are reserved for every description, for the same reason. */
.category-description { display: block; flex: none; min-height: 3.5em; margin-top: calc(8 * var(--category-unit)); color: light-dark(#313a40, #a9b3bb); font-size: calc(12 * var(--category-unit)); line-height: 1.75; overflow-wrap: anywhere; }
.category-bottom {
  position: relative;
  display: flex;
  flex: none;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10 * var(--category-unit));
  margin-top: calc(18 * var(--category-unit));
  padding-top: calc(11 * var(--category-unit));
  border-top: 1px solid light-dark(#262f372a, #b5c0ca2a);
}
.category-bottom::before { content: ""; position: absolute; left: 0; top: -1px; width: min(calc(15 * var(--category-unit)), 100%); height: 1px; background: var(--red); transition: width 350ms ease; }
.category-count { display: flex; align-items: baseline; gap: calc(6 * var(--category-unit)); white-space: nowrap; }
.category-count-number { color: light-dark(#1a1f23, #cdd4da); font: 600 calc(16 * var(--category-unit))/1 var(--category-tech); letter-spacing: .08em; font-variant-numeric: tabular-nums; transition: color 350ms ease; }
/* An empty category keeps its count as a quiet placeholder. */
.category-count-number.is-empty { color: light-dark(#69737c, #6a747d); }
.category-count small { color: light-dark(#48515a, #8d97a0); font: calc(11 * var(--category-unit))/1 "Microsoft YaHei", sans-serif; }
.category-action { white-space: nowrap; font-size: calc(11 * var(--category-unit)); line-height: calc(20 * var(--category-unit)); }
.category-action > span { display: inline-block; margin-left: calc(11 * var(--category-unit)); font-size: calc(18 * var(--category-unit)); line-height: calc(20 * var(--category-unit)); transition: translate 300ms ease; }
.category-column:is(:hover, :focus-visible) .category-bottom::before { width: min(calc(44 * var(--category-unit)), 100%); }
.category-column:is(:hover, :focus-visible) .category-action > span { translate: calc(2 * var(--category-unit)) calc(-2 * var(--category-unit)); }
.category-column:is(:hover, :focus-visible) .category-count-number { color: light-dark(#0d1013, #e4e9ed); }
.category-column:is(:hover, :focus-visible) .category-count-number.is-empty { color: light-dark(#4b545c, #8a949d); }

/* Narrower screens tighten the column spacing and names first, so the displays keep their room. */
@media (max-width: 1200px) {
  .category-column { padding-inline: 16px; }
  .category-name { font-size: 28px; }
  .category-latin { font-size: 32px; }
}
@media (max-width: 1100px) {
  .category-column { padding-inline: 12px; }
  /* Keeps the longest label, COLLECTED WORDS, clear of its header line. */
  .category-index { gap: 10px; }
  .category-symbol { width: 30px; }
  .category-name { font-size: 25px; }
  .category-latin { font-size: 28px; }
  .category-description { font-size: 11px; }
  .category-action > span { margin-left: 6px; }
}
@media (max-width: 900px) {
  .category-column { padding-inline: 8px; }
  .category-index { gap: 8px; }
  .category-symbol { width: 26px; }
  .category-code { font-size: 8px; letter-spacing: .05em; }
  .category-name { font-size: 21px; }
  .category-latin { font-size: 24px; }
  .category-bottom { gap: 6px; }
}
@media (max-width: 720px) {
  .home-page .series-section { --chapter-slot-width: calc(92vw + 16px); }
  .category-heading, .category-panel { width: 100%; }
}
/* Phones use a 2 x 2 grid on the same surface. */
@media (max-width: 600px) {
  .home-page .series-section { --category-heading-height: 72px; --category-content-gap: 10px; }
  .category-heading { gap: 14px; }
  .category-heading h2 { font-size: 28px; }
  .category-panel { height: auto; padding: 14px 4px; }
  .category-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; height: auto; }
  .category-column { height: auto; padding-inline: 12px; }
  .category-column:nth-child(3)::before { display: none; }
  .category-column:nth-child(n+3) { padding-top: 14px; border-top: 1px solid light-dark(#1b262a1f, #bfced31f); }
  .category-index { height: 20px; gap: 10px; }
  .category-symbol { scale: .78; transform-origin: left center; }
  .category-code { display: none; }
  .category-display { flex: none; height: 96px; min-height: 0; }
  .category-name { margin-top: 10px; font-size: 19px; }
  .category-latin { font-size: 22px; }
  .category-description { min-height: 3.2em; margin-top: 5px; font-size: 11px; line-height: 1.6; }
  .category-bottom { margin-top: 10px; padding-top: 8px; }
  .category-count-number { font-size: 14px; }
  .category-action > span { margin-left: 5px; }
}
/* Short laptop screens: the panel fits above the ruler instead of scrolling.
   Tighter spacing returns height to the displays. */
@media (min-width: 601px) and (max-height: 820px) {
  /* The trim covers the heading's extra 5px and the panel's perspective growth. */
  .home-page .series-section { --category-panel-floor: 360; --category-panel-trim: 20px; --category-content-gap: calc(12 * var(--category-unit)); }
  .category-panel { padding-block: calc(20 * var(--category-unit)); }
  .category-name { margin-top: calc(12 * var(--category-unit)); }
  .category-bottom { margin-top: calc(14 * var(--category-unit)); }
}
@media (prefers-reduced-motion: reduce) {
  .category-column, .category-column::after, .category-column *, .category-column ::before, .category-column ::after { transition: none !important; animation: none !important; }
}