/* ============================================================
   Atlas Srpski design system
   Flexoki paper/ink palette, Source Serif, mobile-first charts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

/* -----------------------------------------------------------
   Tokens
   ----------------------------------------------------------- */

:root {
  color-scheme:   light dark;

  --fx-black:       #100F0F;
  --fx-paper:       #FFFCF0;
  --fx-50:          #F2F0E5;
  --fx-100:         #E6E4D9;
  --fx-150:         #DAD8CE;
  --fx-200:         #CECDC3;
  --fx-300:         #B7B5AC;
  --fx-400:         #9F9D96;
  --fx-500:         #878580;
  --fx-600:         #6F6E69;
  --fx-700:         #575653;
  --fx-800:         #403E3C;
  --fx-850:         #343331;
  --fx-900:         #282726;
  --fx-950:         #1C1B1A;

  --fx-red-400:     #D14D41;
  --fx-red-600:     #AF3029;
  --fx-orange-400:  #DA702C;
  --fx-orange-600:  #BC5215;
  --fx-yellow-400:  #D0A215;
  --fx-yellow-600:  #AD8301;
  --fx-green-400:   #879A39;
  --fx-green-600:   #66800B;
  --fx-cyan-400:    #3AA99F;
  --fx-cyan-600:    #24837B;
  --fx-blue-400:    #4385BE;
  --fx-blue-600:    #205EA6;
  --fx-purple-400:  #8B7EC8;
  --fx-purple-600:  #5E409D;
  --fx-magenta-400: #CE5D97;
  --fx-magenta-600: #A02F6F;

  --paper:          light-dark(var(--fx-paper), var(--fx-black));
  --paper-deep:     light-dark(var(--fx-50), var(--fx-950));
  --paper-mark:     light-dark(var(--fx-100), var(--fx-900));
  --ink:            light-dark(var(--fx-black), var(--fx-50));
  --ink-soft:       light-dark(var(--fx-700), var(--fx-100));
  --ink-muted:      light-dark(var(--fx-600), var(--fx-300));
  --ink-faint:      light-dark(var(--fx-500), var(--fx-500));
  --accent:         light-dark(var(--fx-orange-600), var(--fx-orange-400));
  --cool:           light-dark(var(--fx-cyan-600), var(--fx-cyan-400));
  --hairline:       light-dark(var(--fx-150), var(--fx-850));
  --hairline-soft:  light-dark(var(--fx-100), var(--fx-900));
  --highlight:      light-dark(rgba(188,82,21,.09), rgba(218,112,44,.12));
  --shadow:         light-dark(rgba(16,15,15,.08), rgba(16,15,15,.46));

  --tone-red:       light-dark(var(--fx-red-600), var(--fx-red-400));
  --tone-orange:    light-dark(var(--fx-orange-600), var(--fx-orange-400));
  --tone-yellow:    light-dark(var(--fx-yellow-600), var(--fx-yellow-400));
  --tone-green:     light-dark(var(--fx-green-600), var(--fx-green-400));
  --tone-cyan:      light-dark(var(--fx-cyan-600), var(--fx-cyan-400));
  --tone-blue:      light-dark(var(--fx-blue-600), var(--fx-blue-400));
  --tone-purple:    light-dark(var(--fx-purple-600), var(--fx-purple-400));
  --tone-magenta:   light-dark(var(--fx-magenta-600), var(--fx-magenta-400));

  --gender-m:       var(--tone-blue);
  --gender-f:       var(--tone-magenta);
  --gender-n:     var(--ink);

  --ff-display:   'Source Serif 4', Georgia, serif;
  --ff-body:      'Source Serif 4', Georgia, serif;

  --fs-label:     clamp(.82rem, .78rem + .14vw, .94rem);
  --fs-caption:   clamp(.96rem, .9rem + .2vw, 1.12rem);
  --fs-body:      clamp(1.08rem, 1.02rem + .24vw, 1.24rem);
  --fs-lead:      clamp(1.28rem, 1.1rem + .48vw, 1.58rem);
  --fs-title:     clamp(1.5rem, 1.22rem + .75vw, 2.05rem);
  --fs-head:      clamp(2.1rem, 1.5rem + 1.7vw, 3.3rem);
  --fs-hero:      clamp(3rem, 1rem + 9vw, 10rem);

  --track-label:    .075em;
  --track-display: -.02em;
  --track-hero:    -.035em;

  --lh-snug:  1.3;
  --lh-prose: 1.55;

  --pad-x:        clamp(1rem, 4.5vw, 6rem);
  --max-w:        none;
  --max-prose:    62ch;

  --rad:          2px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* -----------------------------------------------------------
   Reset & base
   ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern", "liga", "onum";
  font-language-override: "SRB";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--paper); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.brand, .chart-card, .foot-icon { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  font-weight: 300;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
h1, h2 {
  font-size: var(--fs-head);
  font-variation-settings: "opsz" 60;
}
h3     { font-size: var(--fs-title); }
h4     { font-size: var(--fs-lead); }

p { margin: 0 0 1.15em; }

/* <i> marks inline Serbian tokens in foreign-language prose so the script
   converter can find them. It's a structural marker, not visual emphasis. */
i { font-style: inherit; }

/* -----------------------------------------------------------
   Layout primitives
   ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

section { position: relative; }

/* -----------------------------------------------------------
   Top navigation
   ----------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 1100;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline-soft);
  padding-top: env(safe-area-inset-top);
  isolation: isolate;
  transform: translateZ(0);
}
.nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--paper);
  pointer-events: none;
  z-index: 0;
}
.nav-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: 1.1rem;
  position: relative;
  z-index: 1;
}
.nav-actions {
  display: inline-flex; align-items: center; gap: .75rem;
  margin-left: auto;
}
.brand {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-lead);
  letter-spacing: -.01em;
  font-feature-settings: "ss01";
}
.brand-mark {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.nav-controls {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
}
.chip {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: .7rem 1rem;
  border-radius: 999px;
  color: var(--ink-muted);
  transition: background .25s, color .25s;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.script-chip {
  min-width: 3rem;
  padding: .55rem 1rem;
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.theme-btn {
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  transition: background .25s, color .25s, transform .25s;
}
.theme-btn svg {
  width: 18px; height: 18px;
  transition: transform .35s ease;
}
:root[data-theme="dark"] .theme-btn svg { transform: rotate(180deg); }

@media (max-width: 560px) {
  .nav-inner { gap: .75rem; }
  .brand span[data-i18n="nav.brand"] { display: none; }
  .brand-mark { font-size: var(--fs-lead); }
}

@media (max-width: 420px) {
  .nav-inner { gap: .5rem; }
  .nav-actions { gap: .4rem; }
  .chip { padding: .55rem .7rem; }
  .script-chip {
    min-width: 2.4rem;
    padding: .42rem .7rem;
  }
  .theme-btn { width: 38px; height: 38px; }
  .theme-btn svg { width: 15px; height: 15px; }
}

@media (max-width: 360px) {
  .nav-inner { padding-block: .85rem; }
  .nav-actions { gap: .3rem; }
  .nav-controls { gap: .15rem; padding: 2px; }
  .chip { padding: .48rem .58rem; }
  .script-chip { min-width: 2.15rem; padding: .36rem .58rem; }
  .theme-btn { width: 34px; height: 34px; }
}

/* -----------------------------------------------------------
   Chart index
   ----------------------------------------------------------- */

.home {
  padding-block: clamp(1.8rem, 5vw, 3.2rem) clamp(3rem, 7vw, 6rem);
}
.home-head {
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
.home-head h1 {
  font-size: var(--fs-head);
  line-height: var(--lh-snug);
}
.chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (min-width: 620px) { .chart-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .chart-grid { grid-template-columns: repeat(3, 1fr); } }
.chart-grid li { min-width: 0; }

.chart-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  height: 100%;
  min-height: clamp(13rem, 20vw, 17rem);
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
  background: var(--paper);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background .25s;
  overflow: hidden;
  isolation: isolate;
}

.chart-glyph {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(3.4rem, 1.8rem + 6vw, 6rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 60;
  font-feature-settings: "tnum";
  white-space: nowrap;
  flex: 1;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.chart-glyph[data-chart="verbs"]    { color: var(--tone-orange); }
.chart-glyph b { color: var(--tone-orange); font-weight: inherit; }
.chart-glyph[data-chart="pitch"] {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.2rem);
  letter-spacing: .08em;
}

.chart-meta { display: flex; flex-direction: column; gap: .3rem; }
.chart-card h2 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
}
.chart-note {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30ch;
}

:root:not([lang="ru"]) [data-lang-only="ru"] {
  display: none;
}

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */

.foot {
  padding-block: 3rem 4rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
}
.foot-icon { display: inline-flex; vertical-align: middle; line-height: 0; }
.foot-icon svg { display: block; }

@media (hover: hover) and (pointer: fine) {
  .chip:hover { color: var(--ink); }
  .chip[aria-pressed="true"]:hover { color: var(--paper); }
  .theme-btn:hover { background: var(--paper-deep); color: var(--ink); }
  .chart-card:hover { background: var(--paper-deep); }
  .foot a:hover { color: var(--accent); }
  .tip-chip:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
  }
  .tip-pop-close:hover { color: var(--ink); background: var(--paper-deep); }
  .case-strip-cell:hover {
    background: color-mix(in oklab, var(--tone, var(--accent)) 8%, transparent);
  }
  a.cast-cell:hover { background: color-mix(in oklab, var(--tone, var(--accent)) 10%, transparent); }
  a.cast-cell-head:hover .cast-abbr { color: var(--ink); }
}

/* -----------------------------------------------------------
   Chart pages — shared
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   Alphabet grid
   ----------------------------------------------------------- */

.alph-section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.alph-legend {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 2rem;
}
.alph-mark {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 1.35rem;
  margin-right: .55rem;
  border: 1px solid var(--hairline);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-soft);
  vertical-align: middle;
}
.alph-mark.diff {
  border-style: dashed;
}

.alph-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  position: relative;
}
@media (min-width: 620px)  { .alph-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 820px)  { .alph-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .alph-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .alph-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1900px) { .alph-grid { grid-template-columns: repeat(6, 1fr); } }
.alph-grid::before,
.alph-grid::after {
  content: "";
  position: absolute;
  background: var(--hairline);
  pointer-events: none;
}
.alph-grid::before { left: 0; right: 0; bottom: 0; height: 1px; }
.alph-grid::after  { top: 0; bottom: 0; right: 0; width: 1px; }

.letter {
  position: relative;
  padding: 1.3rem 1.15rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}
.letter[data-kind="unique"],
.letter[data-kind="diff"] {
  padding-right: 3.7rem;
}

.letter .glyphs {
  display: flex; align-items: baseline; gap: .45rem;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.letter .cyr { color: var(--ink); }
.letter .sep { color: var(--ink-faint); font-size: .55em; padding-bottom: .3em; }
.letter .lat { color: var(--accent); }

.letter .ipa-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: .55rem;
}
.letter .ipa {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  line-height: 1;
  color: var(--ink-muted);
  letter-spacing: .04em;
}

.letter .example {
  margin-top: 1.5rem;
  font-family: var(--ff-body);
  line-height: var(--lh-snug);
}
.letter .example .word {
  font-size: var(--fs-body);
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
  line-height: 1.2;
}
.letter .example .word-cyr { color: var(--ink); }
.letter .example .word-sep { color: var(--ink-faint); }
.letter .example .word-lat { color: var(--accent); font-style: normal; }
.letter .example .tr {
  font-style: italic;
  color: var(--ink-muted);
  display: block;
  font-size: var(--fs-caption);
  margin-top: .35rem;
  line-height: var(--lh-snug);
}

.letter::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  display: none;
  place-items: center;
  width: 2.35rem;
  height: 1.35rem;
  border: 1px solid var(--hairline);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-soft);
}
.letter[data-kind="unique"]::after {
  content: "SR";
  display: grid;
}
.letter[data-kind="diff"]::after {
  content: "!=";
  display: grid;
  border-style: dashed;
}

/* Small `?` glyph used by alphabet and case-note popovers */
.tip-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  vertical-align: baseline;
}
.tip-chip:focus-visible,
.tip-chip[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--ink-muted);
}
.tip-chip:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
}

/* Pronunciation tip — popover */
.tip-pop {
  position: absolute;
  z-index: 50;
  width: min(320px, calc(100vw - 24px));
  opacity: 0;
  transform: none;
  pointer-events: none;
}
.tip-pop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.tip-pop[data-placement="above"] {
  transform: none;
}
.tip-pop-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--rad);
  padding: .95rem 2.2rem .95rem 1.1rem;
  box-shadow: 0 1px 0 var(--hairline-soft), 0 18px 38px -22px var(--shadow), 0 8px 18px -16px var(--shadow);
}
.tip-pop-body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
}
.tip-pop-body strong { color: var(--ink); font-weight: 600; }
.tip-pop-body em { color: var(--accent); font-style: normal; font-family: var(--ff-display); font-weight: 500; }
.tip-pop-close {
  position: absolute;
  top: .35rem; right: .55rem;
  width: 1.6rem; height: 1.6rem;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-size: var(--fs-lead);
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.tip-pop-close:focus-visible { outline: 1px dashed var(--accent); outline-offset: 2px; }

/* Cases page — note popover. Same .tip-pop shell, richer body. */
.case-pop .tip-pop-card {
  border-left: 2px solid var(--tone, var(--accent));
}
.case-pop .tip-pop-body {
  display: grid;
  gap: .7rem;
}

/* -----------------------------------------------------------
   Cases (declension)
   ----------------------------------------------------------- */

.cases-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

/* Baseline for any [data-tone]: ink-soft. Charts that don't carry
   grammatical meaning in color (pronouns, numbers, aspect) inherit this
   neutral tone; chart-specific overrides come below. :where() keeps the
   baseline at 0 specificity so even un-qualified case rules trivially win. */
:where([data-tone]) { --tone: var(--ink-soft); }

/* Per-case tone colors. One hue per case; no overlap with gender hues
   (M = blue, F = magenta). NOM is unmarked — the dictionary form — so it
   takes an ink-tone rather than an accent, distinguishing it visually
   from the inflected cases. */
[data-tone="nom"] { --tone: var(--ink-soft); }
[data-tone="gen"] { --tone: var(--tone-cyan); }
[data-tone="dat"] { --tone: var(--tone-yellow); }
[data-tone="aku"] { --tone: var(--tone-purple); }
[data-tone="vok"] { --tone: var(--tone-red); }
[data-tone="ins"] { --tone: var(--tone-orange); }
[data-tone="lok"] { --tone: var(--tone-green); }

/* Case-toned spans inside the personal-pronouns column header
   (combined labels like "ACC/GEN", "DAT/LOC" tone each half by case). */
.pron-table thead [data-tone] { color: var(--tone); }
.pron-table thead .pron-slash { color: var(--ink-faint); margin: 0 .15em; }

/* Gender-toned labels in pronoun gender header rows and the numbers
   ordinals table header. M = blue, F = magenta, N = ink. */
.pron-mini-head [data-gender="m"],
.num-table-head [data-gender="m"] { color: var(--gender-m); }
.pron-mini-head [data-gender="f"],
.num-table-head [data-gender="f"] { color: var(--gender-f); }
.pron-mini-head [data-gender="n"],
.num-table-head [data-gender="n"] { color: var(--gender-n); }

/* -----------------------------------------------------------
   Case strip — colour-coded sticky nav.
   Mobile-first: all seven cells fit the viewport (no scroll).
   Wider screens reveal the name and number.
   ----------------------------------------------------------- */
.case-strip {
  position: sticky;
  top: var(--nav-height, calc(68px + env(safe-area-inset-top)));
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding-inline: 0;
  transition: transform .28s ease, opacity .2s ease;
  will-change: transform;
}
.case-strip.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 1px));
}
.case-strip-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.case-strip-cell {
  position: relative;
  border-right: 1px solid var(--hairline-soft);
  background: transparent;
  transition: background .35s;
  min-width: 0;
}
.case-strip-cell:last-child { border-right: 0; }
.case-strip-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--tone, var(--accent));
  opacity: .85;
}
.case-strip-cell a {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: .15rem;
  padding: .65rem .2rem .65rem;
  min-height: 52px;
  min-width: 0;
}
.case-strip-cell.is-current {
  background: color-mix(in oklab, var(--tone, var(--accent)) 14%, transparent);
}
.case-strip-cell.is-current::before { height: 4px; opacity: 1; }

.strip-name { display: none; }
.strip-abbr {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tone, var(--accent));
  line-height: 1;
}

@media (min-width: 600px) {
  .case-strip-cell a {
    padding: .75rem .4rem .8rem;
    min-height: 68px;
  }
  .strip-name {
    display: block;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 300;
    font-size: var(--fs-caption);
    color: var(--ink-soft);
    line-height: 1.1;
    margin-top: .25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .case-strip-cell.is-current .strip-name { color: var(--ink); }
}

@media (min-width: 920px) {
  .case-strip { padding-inline: var(--pad-x); }
  .case-strip-cell a {
    justify-items: start;
    text-align: left;
    padding: .85rem .95rem .9rem;
    min-height: 80px;
  }
  .strip-name {
    margin-top: .3rem;
  }
}

/* -----------------------------------------------------------
   Case list — single grid: rows are cases. Stacked below xlarge,
   master 9-col table at xlarge so endings line up across cases.
   ----------------------------------------------------------- */
.case-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.case-row {
  scroll-margin-top: calc(var(--sticky-offset, 120px) + .5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.case-row::before {
  content: "";
  position: absolute;
  top: 0; left: calc(-1 * var(--pad-x));
  width: calc(100% + 2 * var(--pad-x));
  height: 3px;
  background: var(--tone, var(--accent));
  opacity: .85;
}

.case-row-head { display: none; }

.case-cell { min-width: 0; }
.case-cell-preps.is-empty { display: none; }

/* Mobile first: one fact per line. Wider screens line related endings up. */
@media (max-width: 1439.98px) {
  .case-row {
    grid-template-areas:
      "head"
      "m-sg"
      "f-sg"
      "n-sg"
      "m-pl"
      "f-pl"
      "n-pl"
      "ex"
      "preps";
  }
  .case-cell-head    { grid-area: head; }
  .case-cell-end[data-axis="m-sg"] { grid-area: m-sg; }
  .case-cell-end[data-axis="m-pl"] { grid-area: m-pl; }
  .case-cell-end[data-axis="f-sg"] { grid-area: f-sg; }
  .case-cell-end[data-axis="f-pl"] { grid-area: f-pl; }
  .case-cell-end[data-axis="n-sg"] { grid-area: n-sg; }
  .case-cell-end[data-axis="n-pl"] { grid-area: n-pl; }
  .case-cell-ex      { grid-area: ex; }
  .case-cell-preps   { grid-area: preps; }
}

@media (min-width: 680px) and (max-width: 1439.98px) {
  .case-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: .8rem;
    row-gap: 1.5rem;
    grid-template-areas:
      "head  head  head"
      "m-sg  f-sg  n-sg"
      "m-pl  f-pl  n-pl"
      "ex    ex    ex"
      "preps preps preps";
  }
}

.case-cell-head { position: relative; }
.case-cell-head .case-head { display: block; }
.case-cell-head .case-tag {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tone, var(--accent));
  background: color-mix(in oklab, var(--tone, var(--accent)) 10%, transparent);
  padding: .35rem .75rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.case-cell-head h3 {
  font-size: var(--fs-head);
  letter-spacing: -.025em;
  line-height: .98;
}
.case-cell-head h3 em {
  font-style: italic;
  color: var(--ink-soft);
  display: block;
  font-size: var(--fs-caption);
  margin-top: .35em;
  letter-spacing: -.01em;
}
.case-cell-head .tagline {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--ink);
  margin: 1.1rem 0 0;
  line-height: 1.4;
  max-width: 32ch;
}
.case-cell-head .q {
  font-family: var(--ff-body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  margin: .9rem 0 0;
  line-height: 1.45;
  max-width: 34ch;
}
.case-cell-head .q strong { font-style: normal; font-weight: 500; color: var(--tone, var(--accent)); }

/* Each ending cell — small framed block with its own axis label */
.case-cell-end {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .75rem .8rem .8rem;
  border: 1px solid var(--hairline-soft);
  background: color-mix(in oklab, var(--paper) 96%, transparent);
}
.cell-axis {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}
.case-cell-end[data-gender="m"] .cell-axis { color: var(--gender-m); }
.case-cell-end[data-gender="f"] .cell-axis { color: var(--gender-f); }
.case-cell-end[data-gender="n"] .cell-axis { color: var(--gender-n); }

.case-cell-ex .cell-axis,
.case-cell-preps .cell-axis {
  display: block;
  padding-bottom: .7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-muted);
}
.case-cell-ex .examples,
.case-cell-preps .prep-list { max-width: 60ch; }

/* Gender accent on header row column labels (xlarge only) */
[data-gender="m"].cast-gender,
[data-gender="m"].cast-gender-head { color: var(--gender-m); }
[data-gender="f"].cast-gender,
[data-gender="f"].cast-gender-head { color: var(--gender-f); }
[data-gender="n"].cast-gender,
[data-gender="n"].cast-gender-head { color: var(--gender-n); }

/* -----------------------------------------------------------
   Xlarge — render every case as one row of a master 9-col grid.
   Endings now line up vertically across cases.
   ----------------------------------------------------------- */
@media (min-width: 1440px) {
  .cases-section { --pad-x: 0; }

  /* The sticky case-row-head replaces the case-strip at this width */
  .case-strip { display: none; }

  .case-list {
    grid-template-columns:
      minmax(220px, 1.6fr)
      repeat(6, minmax(82px, .9fr))
      minmax(260px, 1.8fr)
      minmax(180px, 1fr);
    border-top: 1px solid var(--hairline);
    border-left: 1px solid var(--hairline);
  }

  .case-row,
  .case-row-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-areas: none;
    gap: 0;
    padding: 0;
    border-bottom: 0;
  }
  .case-row::before { display: none; }
  .case-row > *,
  .case-row-head > * {
    grid-area: auto;
    padding: 1.1rem 1rem;
    border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    min-width: 0;
  }

  .case-row-head {
    display: grid;
    position: sticky;
    top: var(--sticky-offset, 0);
    z-index: 10;
    background: var(--paper-deep);
  }
  .case-row-head > * {
    background: var(--paper-deep);
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1;
    padding: .9rem 1rem;
  }
  .case-row-head [data-gender="m"] { color: var(--gender-m); }
  .case-row-head [data-gender="f"] { color: var(--gender-f); }
  .case-row-head [data-gender="n"] { color: var(--gender-n); }

  /* Empty prep cells must occupy the column so the grid stays aligned */
  .case-cell-preps.is-empty {
    display: block;
    background: color-mix(in oklab, var(--paper-deep) 35%, transparent);
  }

  /* Case header column — tone strip on the left, compact typography */
  .case-row:not(.case-row-head) .case-cell-head {
    border-left: 4px solid var(--tone, var(--accent));
    padding-left: 1.1rem;
    background: color-mix(in oklab, var(--paper-deep) 35%, transparent);
  }
  .case-row:not(.case-row-head) .case-cell-head h3 {
    font-size: var(--fs-lead);
    letter-spacing: -.012em;
    line-height: 1.05;
  }
  .case-row:not(.case-row-head) .case-cell-head h3 em { font-size: var(--fs-caption); margin-top: .25em; }
  .case-row:not(.case-row-head) .case-cell-head .case-tag { margin-bottom: .7rem; padding: .3rem .55rem; }
  .case-row:not(.case-row-head) .case-cell-head .q { font-size: var(--fs-caption); margin-top: .65rem; max-width: none; }
  /* Tagline is narrative — drop it on xlarge */
  .case-row:not(.case-row-head) .case-cell-head .tagline { display: none; }

  /* Ending cells flat into the grid — drop the mobile frame's top/left,
     keep the grid right/bottom borders from .case-row > * */
  .case-row .case-cell-end {
    border-top: 0;
    border-left: 0;
    background: transparent;
    gap: 0;
  }
  .case-row .cell-axis,
  .case-row .case-cell-ex .cell-axis,
  .case-row .case-cell-preps .cell-axis { display: none; }

  /* Examples + preps compact at xlarge */
  .case-row .case-cell-ex .examples,
  .case-row .case-cell-preps .prep-list { max-width: none; }
  .case-row .case-cell-ex .ex { padding: .6rem 0; }
  .case-row .case-cell-ex .ex .sr { font-size: var(--fs-body); }
  .case-row .case-cell-ex .ex .tr { font-size: var(--fs-caption); }
  .case-row .case-cell-preps .prep-list { font-size: var(--fs-body); }
}

.cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .55rem;
}
.cell .end {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--tone, var(--accent));
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
/* Per-cell syncretism pills — replace the old "= NOM" / "= DAT" text with
   small tone-dotted chips so the cross-case map shows visually. */
.cell-shares {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .15rem;
  flex-wrap: wrap;
}
.cell-share {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tone, var(--accent));
  background: color-mix(in oklab, var(--tone, var(--accent)) 10%, transparent);
  padding: .32rem .5rem .31rem .54rem;
  line-height: 1;
  white-space: nowrap;
}
.share-label {
  letter-spacing: inherit;
}
.cell-note {
  margin-left: .22rem;
  transform: translateY(-.2em);
}
/* Alternation cell: -a / -∅¹  — qualifier + identity moved to a note. */
.cell-alt {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: .15rem .35rem;
}
.cell-sep {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--ink-faint);
  line-height: 1;
  margin: 0 .15em;
}
/* Labeled alternation: a vertical stack like "alive: -a / thing: -∅",
   where the label sits to the left of each ending so the rule reads inline. */
.cell-alt-labeled {
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
}
.cell-alt-labeled .end-row {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
.cell-label {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
  min-width: 3.1rem;
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  .case-cell-end { padding: .6rem .65rem .65rem; }
  .case-row { gap: .75rem; }
}

.note-title {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.25;
  margin: 0 0 .6rem;
}
.note-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.note-pairs {
  list-style: none; padding: 0;
  margin: .95rem 0 0;
  display: flex; flex-wrap: wrap;
  gap: .35rem 1.4rem;
}
.note-pairs li {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.4;
}
.note-pairs .from { color: var(--ink-muted); }
.note-pairs .arrow {
  font-family: var(--ff-body);
  font-style: normal;
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}
.note-pairs .to { color: var(--ink-muted); }
/* Spotlight on the changed letters — the whole point of the pair. */
.note-pairs .lit,
.wrinkle-list .lit {
  font-style: italic;
  font-weight: 600;
  color: var(--tone, var(--accent));
  background: color-mix(in oklab, var(--tone, var(--accent)) 14%, transparent);
  padding: 0 .14em;
  border-radius: 2px;
}
.wrinkle-list .from .lit { color: var(--tone, var(--accent)); }
.wrinkle-list .to   .lit { color: var(--tone, var(--accent)); }

/* Examples + prepositions — used inside per-case cells */
.examples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.ex {
  display: grid;
  grid-template-columns: 1fr;
  gap: .2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.ex:first-child { padding-top: 0; }
.ex:last-child { border-bottom: 0; }
.ex .sr {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.35;
}
.ex .sr mark {
  background: color-mix(in oklab, var(--tone, var(--accent)) 14%, transparent);
  color: var(--tone, var(--accent));
  font-style: italic;
  padding: 0 .2em;
  border-radius: 2px;
}
.ex .tr {
  font-family: var(--ff-body);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
}
.ex .tr em {
  font-style: normal;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  color: var(--ink-faint);
  letter-spacing: .04em;
  display: inline-block;
  margin-left: .35em;
}

/* Preposition list — tone-colored inline run; meanings live on the
   future Prepositions chart, so this side stays a quick name index. */
.prep-list {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--tone, var(--accent));
  letter-spacing: -.005em;
  line-height: var(--lh-prose);
  margin: 0;
}

/* -----------------------------------------------------------
   Meet the cast — three nouns through all seven cases.
   Mobile-first: transposed so all genders stay visible.
   ----------------------------------------------------------- */
.case-cast {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--hairline);
}
.cast-frame {
  position: relative;
}
.cast-scroll {
  overflow-x: visible;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border: 1px solid var(--hairline);
  background: color-mix(in oklab, var(--paper) 96%, transparent);
}
.cast-table {
  display: grid;
  grid-auto-rows: auto;
}
.cast-wide { display: none; }
.cast-scroll:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
}
.cast-row {
  display: grid;
  grid-template-columns: 3.75rem repeat(3, minmax(0, 1fr));
  align-items: stretch;
  border-bottom: 1px solid var(--hairline-soft);
}
.cast-row:last-child { border-bottom: 0; }
.cast-row-head {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--hairline);
}
.cast-cell {
  display: flex; align-items: center; justify-content: flex-start;
  padding: .76rem .45rem;
  border-right: 1px solid var(--hairline-soft);
  min-height: 54px;
  text-decoration: none;
  color: inherit;
  transition: background .2s;
  min-width: 0;
}
.cast-cell:last-child { border-right: 0; }
a.cast-cell:focus-visible {
  outline: 1px dashed var(--tone, var(--accent));
  outline-offset: -3px;
}
.cast-cell-head {
  padding: .65rem .45rem;
  min-height: 44px;
  align-items: center;
}
.cast-gender,
.cast-case,
.cast-gender-head,
.cast-row-head .cast-cell-head:first-child {
  background: var(--paper-deep);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-right: 1px solid var(--hairline);
  justify-content: center;
}
.cast-case {
  color: var(--tone, var(--accent));
  text-decoration: none;
}
.cast-gender-head {
  background: var(--paper-deep);
}
.cast-abbr {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--tone, var(--accent));
}
.cast-form {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cast-cell .lit {
  font-style: italic;
  font-weight: 600;
  color: var(--tone, var(--accent));
  background: color-mix(in oklab, var(--tone, var(--accent)) 14%, transparent);
  padding: 0 .14em;
  border-radius: 2px;
}
@media (min-width: 720px) {
  .cast-scroll {
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .cast-mobile { display: none; }
  .cast-wide { display: grid; }
  .cast-row { grid-template-columns: 5rem repeat(7, 1fr); }
  .cast-cell {
    padding: .85rem .75rem;
    min-height: 64px;
    scroll-snap-align: start;
  }
  .cast-cell-head { padding: .65rem .75rem; }
  .cast-gender,
  .cast-wide .cast-row-head .cast-cell-head:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  .cast-wide .cast-row:not(.cast-row-head) .cast-gender {
    background: color-mix(in oklab, var(--paper-deep) 70%, transparent);
  }
  .cast-form {
    font-size: var(--fs-lead);
    overflow: visible;
    text-overflow: clip;
  }
}
@media (min-width: 980px) {
  .cast-cell { padding: 1rem 1.1rem; min-height: 72px; }
}

/* -----------------------------------------------------------
   Off-paradigm pack — i-declension + five wrinkles as one grid.
   Mobile: stack. 760px: two columns. 1440px: full-width six-column band.
   ----------------------------------------------------------- */
.case-extra {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.extra-pack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
@media (min-width: 760px) {
  .extra-pack { grid-template-columns: repeat(2, 1fr); }
}

.extra-panel {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.4rem 1.4rem 1.6rem;
  background: var(--paper);
  display: flex; flex-direction: column;
  min-width: 0;
}

.extra-panel-head { margin: 0 0 1rem; }
.extra-panel-title {
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.2;
}
.extra-panel-title .lit { white-space: nowrap; }
.extra-panel-sub {
  display: block;
  margin-top: .35rem;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.extra-panel-sub em {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.005em;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-right: .25em;
}
.extra-panel-body { min-width: 0; }

/* i-declension paradigm — Sg / Pl table */
.i-decl {
  width: 100%;
  border-collapse: collapse;
}
.i-decl thead th {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: .2rem .6rem .6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.i-decl tbody th.num {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  text-align: left;
  width: 1%;
  white-space: nowrap;
  padding: .7rem 1rem .7rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}
.i-decl tbody td {
  padding: .7rem .6rem .7rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}
.i-decl tbody td .end {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--accent);
  letter-spacing: -.005em;
}
.i-decl tbody tr:last-child th,
.i-decl tbody tr:last-child td { border-bottom: 0; }

/* Wrinkle list — from → to · gloss */
.wrinkle-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.wrinkle-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem;
  padding: .6rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}
.wrinkle-list li:last-child { border-bottom: 0; }

.wrinkle-list .from,
.wrinkle-list .to {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--ink-muted);
  letter-spacing: -.005em;
}
.wrinkle-list .arrow {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}
.wrinkle-list .gloss {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  line-height: 1.4;
  width: 100%;
}

@media (min-width: 1440px) {
  .extra-pack { grid-template-columns: repeat(6, 1fr); }

  .extra-panel {
    padding: 1.1rem 1rem 1.25rem;
  }

  .extra-panel-head { margin-bottom: .85rem; }

  .extra-panel-title {
    font-size: var(--fs-lead);
    line-height: 1.12;
    letter-spacing: -.005em;
  }

  .extra-panel-sub {
    margin-top: .5rem;
    line-height: 1.2;
  }

  .i-decl tbody th.num,
  .i-decl tbody td {
    padding-block: .55rem;
  }

  .i-decl tbody td .end {
    font-size: var(--fs-body);
  }
}

/* -----------------------------------------------------------
   Pronouns
   ----------------------------------------------------------- */

.pron-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.pron-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  position: relative;
}
.pron-layout::before,
.pron-layout::after {
  content: "";
  position: absolute;
  background: var(--hairline);
  pointer-events: none;
}
.pron-layout::before { left: 0; right: 0; bottom: 0; height: 1px; }
.pron-layout::after { top: 0; bottom: 0; right: 0; width: 1px; }

.pron-panel {
  min-width: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  padding: 1.25rem 1.05rem 1.35rem;
  display: grid;
  align-content: start;
  gap: 1.15rem;
}
.pron-panel::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--tone, var(--accent));
  margin: -1.25rem -1.05rem .05rem;
}
.pron-panel-head {
  display: grid;
  gap: .45rem;
}
.pron-kicker,
.pron-panel h4,
.pron-person-label,
.pron-mini-head,
.pron-row-label,
.pron-kw-head,
.pron-kw-row > span:first-child {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
}
.pron-kicker,
.pron-panel h4,
.pron-person-label,
.pron-mini-head,
.pron-row-label,
.pron-kw-head,
.pron-kw-row > span:first-child {
  color: var(--ink-muted);
}
.pron-panel-head h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--tone, var(--accent));
}

.pron-table {
  width: 100%;
  border-collapse: collapse;
}
.pron-table thead { display: none; }
.pron-table tbody,
.pron-table tr,
.pron-table th,
.pron-table td {
  display: block;
}
.pron-table tr {
  border-top: 1px solid var(--hairline-soft);
  padding-block: .75rem;
}
.pron-table tr:first-child { border-top: 0; padding-top: 0; }
.pron-table th {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .55rem;
  text-align: left;
}
.pron-table td {
  display: grid;
  grid-template-columns: minmax(5.75rem, .8fr) minmax(0, 1fr);
  align-items: baseline;
  gap: .8rem;
  padding: .52rem 0;
  border-top: 1px dashed var(--hairline-soft);
}
.pron-table td::before {
  content: attr(data-label);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pron-subject,
.pron-long,
.pron-short,
.pron-dash,
.pron-form,
.pron-gender-row span,
.pron-kw-row > span:not(:first-child) {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
.pron-subject,
.pron-long,
.pron-form,
.pron-gender-row span,
.pron-kw-row > span:not(:first-child) {
  color: var(--tone, var(--accent));
}
.pron-short {
  color: var(--cool);
}
.pron-comma,
.pron-dash {
  color: var(--ink-muted);
}
.pron-table tr[data-band="self"] .pron-subject,
.pron-table tr[data-band="self"] .pron-long {
  color: var(--accent);
}

.pron-rule-row {
  display: grid;
  gap: .65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.pron-rule-row p,
.pron-poss-card p {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-prose);
  color: var(--ink-muted);
}
.pron-rule-row strong {
  color: var(--ink);
  font-weight: 500;
}

.pron-card-grid,
.pron-demo-pack,
.pron-question-pack {
  display: grid;
  gap: 1.1rem;
}
.pron-mini-head {
  display: grid;
  grid-template-columns: minmax(5.8rem, .8fr) repeat(3, minmax(0, 1fr));
  gap: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.pron-mini-head span:not(:first-child) {
  color: var(--tone, var(--accent));
}
.pron-poss-card {
  display: grid;
  gap: .45rem;
  padding-bottom: .85rem;
  border-bottom: 1px dashed var(--hairline-soft);
}
.pron-poss-card:last-child { border-bottom: 0; padding-bottom: 0; }
.pron-poss-card h4 {
  margin: 0;
}
.pron-gender-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
.pron-gender-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pron-demo-group,
.pron-question-block {
  display: grid;
  gap: .65rem;
}
.pron-matrix {
  display: grid;
  border-top: 1px solid var(--hairline-soft);
}
.pron-matrix-row {
  display: grid;
  grid-template-columns: minmax(5.8rem, .8fr) repeat(3, minmax(0, 1fr));
  gap: .6rem;
  align-items: baseline;
  padding: .72rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}
.pron-matrix-row:last-child { border-bottom: 0; }
.pron-form {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pron-kw-table {
  display: grid;
  border-top: 1px solid var(--hairline-soft);
}
.pron-kw-head,
.pron-kw-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) repeat(2, minmax(0, .8fr));
  gap: .6rem;
  align-items: baseline;
}
.pron-kw-head {
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.pron-kw-head span:not(:first-child) {
  color: var(--tone, var(--accent));
}
.pron-kw-row {
  padding: .72rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}
.pron-kw-row:last-child { border-bottom: 0; }

@media (min-width: 760px) {
  .pron-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pron-personal { grid-column: 1 / -1; }
  .pron-table {
    display: table;
    table-layout: fixed;
  }
  .pron-table thead { display: table-header-group; }
  .pron-table tbody { display: table-row-group; }
  .pron-table tr { display: table-row; padding: 0; border-top: 0; }
  .pron-table th,
  .pron-table td {
    display: table-cell;
    padding: .74rem .7rem;
    border-top: 1px solid var(--hairline-soft);
    border-right: 1px solid var(--hairline-soft);
    vertical-align: baseline;
  }
  .pron-table th:last-child,
  .pron-table td:last-child {
    border-right: 0;
  }
  .pron-table thead th {
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: left;
    border-top: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .pron-table tbody th {
    width: 18%;
  }
  .pron-table td::before { content: none; }
  .pron-table th {
    justify-content: flex-start;
    padding-bottom: .74rem;
  }
}

@media (min-width: 1280px) {
  .pron-layout { grid-template-columns: 1.35fr 1fr; }
  .pron-personal { grid-row: span 3; grid-column: auto; }
}

/* -----------------------------------------------------------
   Verbs (conjugation)
   ----------------------------------------------------------- */

.verbs-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

/* Present forms (all four conjugation buckets + irregulars) share the
   "active default" orange — same family as INS and the brand. Past and
   future fall through to the ink-soft baseline. */
[data-tone="im"],
[data-tone="am"],
[data-tone="em"],
[data-tone="jem"],
[data-tone="irr"] { --tone: var(--tone-orange); }

.verb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  position: relative;
}
.verb-grid::before,
.verb-grid::after {
  content: "";
  position: absolute;
  background: var(--hairline);
  pointer-events: none;
}
.verb-grid::before { left: 0; right: 0; bottom: 0; height: 1px; }
.verb-grid::after { top: 0; bottom: 0; right: 0; width: 1px; }

.verb-col {
  min-width: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  padding: 1.25rem 1.05rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.verb-col::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--tone, var(--accent));
  margin: -1.25rem -1.05rem .05rem;
}

.verb-col-head {
  display: grid;
  gap: .45rem;
}
.verb-kicker,
.verb-col h4,
.verb-sub,
.verb-pron {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
}
.verb-kicker,
.verb-col h4,
.verb-sub {
  color: var(--ink-muted);
}
.verb-col-head h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--tone, var(--accent));
}

.verb-endings,
.verb-example-grid,
.verb-participle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline-soft);
}
.verb-ending-row,
.verb-example-row,
.verb-participle-grid > div {
  display: grid;
  grid-template-columns: minmax(5.6rem, .8fr) minmax(0, 1fr);
  align-items: baseline;
  gap: .8rem;
  padding: .62rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}
.verb-ending-row:last-child,
.verb-example-row:last-child,
.verb-participle-grid > div:last-child {
  border-bottom: 0;
}
.verb-pron {
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.verb-form {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--tone, var(--accent));
  letter-spacing: 0;
}

.verb-block {
  display: grid;
  gap: .65rem;
}
.verb-block h4 {
  margin: 0;
}
.verb-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.verb-pattern {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: .42rem .62rem;
  border: 1px solid var(--hairline-soft);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--tone, var(--accent));
  background: color-mix(in oklab, var(--tone, var(--accent)) 8%, transparent);
}
.verb-list,
.verb-formula,
.verb-note,
.verb-negative p {
  margin: 0;
  color: var(--ink);
  line-height: var(--lh-prose);
}
.verb-list,
.verb-formula {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: 0;
}
.verb-list-glossed {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.verb-list-glossed li {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  flex-wrap: wrap;
}
.verb-list-glossed .verb-lemma {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  color: var(--ink);
}
.verb-list-glossed .verb-gloss {
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}
.verb-note,
.verb-negative p {
  font-size: var(--fs-body);
}
.verb-formula {
  color: var(--tone, var(--accent));
}

.verb-mini-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-soft);
}
.verb-mini {
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  display: grid;
  gap: .75rem;
}
.verb-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.verb-mini-head {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.verb-mini-head h4 {
  color: var(--tone, var(--accent));
}
.verb-negative {
  display: grid;
  gap: .35rem;
}

.verb-examples {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-soft);
}
.verb-example {
  display: grid;
  gap: .2rem;
  padding: .72rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}
.verb-example:last-child { border-bottom: 0; }
.verb-example .sr {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.verb-example .tr {
  font-family: var(--ff-body);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.verb-participle-grid > div {
  grid-template-columns: minmax(7rem, 1fr) auto;
}
.verb-participle-grid .verb-sub {
  line-height: var(--lh-snug);
}
.verb-reflexive {
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
}
.verb-pop .tip-pop-card {
  border-left: 2px solid var(--accent);
}
.verb-tip {
  display: grid;
  gap: .8rem;
}
.verb-tip h4 {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

@media (min-width: 680px) {
  .verb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .verb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1360px) {
  .verb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1840px) {
  .verb-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .verb-col {
    padding: 1.1rem .9rem 1.2rem;
  }
  .verb-col::before {
    margin: -1.1rem -.9rem .05rem;
  }
  .verb-ending-row,
  .verb-example-row {
    grid-template-columns: minmax(4.75rem, .8fr) minmax(0, 1fr);
    gap: .55rem;
  }
  .verb-participle-grid > div {
    grid-template-columns: 1fr;
    gap: .22rem;
  }
}

/* -----------------------------------------------------------
   Verb aspect pairs
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   Numbers
   ----------------------------------------------------------- */

.num-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.num-layout {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.num-panel {
  border-top: 1px solid var(--hairline);
}

.num-panel-head {
  padding-block: 1rem .85rem;
  border-bottom: 1px solid var(--hairline);
}

.num-panel-head h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--tone, var(--accent));
}

.num-mini-grid,
.num-table {
  display: grid;
}

.num-mini-grid {
  grid-template-columns: 1fr;
}

.num-mini {
  display: grid;
  gap: .25rem;
  align-content: start;
  padding: .9rem 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.num-value {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-feature-settings: "tnum";
}

.num-word,
.num-built,
.num-examples span {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.num-word,
.num-built {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: 0;
}

.num-built {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  color: var(--tone, var(--accent));
}

.num-plus {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

.num-table-head {
  display: none;
}

.num-table-row {
  display: grid;
  gap: .65rem;
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.num-table-row:last-child {
  border-bottom-color: var(--hairline);
}

.num-table-row > * {
  min-width: 0;
}

.num-table-row > [data-label] {
  display: grid;
  gap: .3rem;
}

.num-table-row > [data-label]::before {
  content: attr(data-label);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--tone, var(--accent));
}

.num-pattern,
.num-meaning {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-muted);
}

.num-examples {
  display: grid;
  gap: .35rem;
}

.num-examples span {
  display: block;
}

.num-ordinal-table .num-word {
  color: var(--tone, var(--accent));
}

@media (min-width: 700px) {
  .num-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .num-mini,
  .num-mini:nth-child(odd),
  .num-mini:nth-child(even) {
    padding: .9rem;
    border-right: 1px solid var(--hairline-soft);
  }

  .num-mini:nth-child(4n) {
    border-right: 0;
  }
}

@media (min-width: 900px) {
  .num-panel {
    border: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .num-panel-head {
    padding: 1rem .9rem .85rem;
  }

  .num-table-head {
    display: grid;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--hairline);
  }

  .num-build-table .num-table-head,
  .num-noun-table .num-table-head {
    grid-template-columns: minmax(7rem, .45fr) minmax(12rem, .9fr) minmax(0, 1.65fr);
  }

  .num-ordinal-table .num-table-head {
    grid-template-columns: minmax(7rem, .5fr) repeat(3, minmax(0, 1fr));
  }

  .num-table-head span {
    padding: .85rem .9rem;
    border-right: 1px solid var(--hairline);
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .num-table-head span:last-child {
    border-right: 0;
  }

  .num-table-row {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .num-build-table .num-table-row,
  .num-noun-table .num-table-row {
    grid-template-columns: minmax(7rem, .45fr) minmax(12rem, .9fr) minmax(0, 1.65fr);
  }

  .num-ordinal-table .num-table-row {
    grid-template-columns: minmax(7rem, .5fr) repeat(3, minmax(0, 1fr));
  }

  .num-table-row > * {
    padding: .9rem;
    border-right: 1px solid var(--hairline-soft);
  }

  .num-table-row > *:last-child {
    border-right: 0;
  }

  .num-table-row > [data-label] {
    display: block;
  }

  .num-built[data-label] {
    display: flex;
  }

  .num-examples[data-label] {
    display: grid;
  }

  .num-table-row > [data-label]::before {
    content: none;
  }

  .num-examples {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .num-layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }

  .num-cardinals .num-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .num-cardinals .num-mini {
    border-right: 1px solid var(--hairline-soft);
  }

  .num-cardinals .num-mini:nth-child(2n) {
    border-right: 0;
  }

  .num-builds,
  .num-nouns,
  .num-ordinals {
    grid-column: 1 / -1;
  }
}

.aspect-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.aspect-layout {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.aspect-group {
  border-top: 1px solid var(--hairline);
}

.aspect-group-head {
  padding-block: 1rem .85rem;
  border-bottom: 1px solid var(--hairline);
}

.aspect-group-head h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--tone, var(--accent));
}

.aspect-compare-head,
.aspect-table-head {
  display: none;
}

.aspect-compare,
.aspect-table,
.aspect-prefix-grid,
.aspect-trap-grid {
  display: grid;
}

.aspect-compare-row,
.aspect-table-row,
.aspect-prefix,
.aspect-trap {
  display: grid;
  gap: .75rem;
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.aspect-compare-row:last-child,
.aspect-table-row:last-child,
.aspect-prefix:last-child,
.aspect-trap:last-child {
  border-bottom-color: var(--hairline);
}

.aspect-compare-row h4,
.aspect-table-row h4,
.aspect-prefix p,
.aspect-trap h4 {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.aspect-side,
.aspect-table-row > div,
.aspect-trap {
  min-width: 0;
}

.aspect-cell {
  display: grid;
  gap: .3rem;
}

.aspect-cell::before {
  content: attr(data-label);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--tone, var(--accent));
}

.aspect-side {
  display: grid;
  gap: .45rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--hairline-soft);
}

.aspect-side::before {
  content: attr(data-label);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--tone, var(--accent));
}

.aspect-side p,
.aspect-table-row p,
.aspect-trap p,
.aspect-tip p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-muted);
}

.aspect-example {
  display: grid;
  gap: .12rem;
}

.aspect-example .sr,
.aspect-form,
.aspect-prefix-head h4,
.aspect-prefix li {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.aspect-example .tr {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.aspect-form,
.aspect-prefix-head h4,
.aspect-prefix li {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: 0;
}

.aspect-form,
.aspect-prefix-head h4 {
  color: var(--tone, var(--accent));
}

.aspect-table-row {
  grid-template-columns: 1fr;
}

.aspect-prefix {
  align-content: start;
}

.aspect-prefix-head {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.aspect-prefix ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.aspect-prefix li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.aspect-arrow {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

.aspect-trap {
  gap: .55rem;
}

.aspect-pop .tip-pop-card {
  border-left: 2px solid var(--accent);
}

.aspect-tip {
  display: grid;
  gap: .65rem;
}

.aspect-tip h4 {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

@media (min-width: 760px) {
  .aspect-group {
    border: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .aspect-group-head {
    padding: 1rem .9rem .85rem;
  }

  .aspect-compare-head,
  .aspect-table-head {
    display: grid;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--hairline);
  }

  .aspect-compare-head {
    grid-template-columns: minmax(9rem, .7fr) repeat(2, minmax(0, 1fr));
  }

  .aspect-table-head {
    grid-template-columns: minmax(9rem, .85fr) repeat(2, minmax(0, 1fr));
  }

  .aspect-pattern-table .aspect-table-head,
  .aspect-pair-table .aspect-table-head {
    grid-template-columns: minmax(9rem, .9fr) minmax(8rem, .7fr) minmax(8rem, .7fr) minmax(0, 1.4fr);
  }

  .aspect-compare-head span,
  .aspect-table-head span {
    padding: .85rem .9rem;
    border-right: 1px solid var(--hairline);
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .aspect-compare-head span:last-child,
  .aspect-table-head span:last-child {
    border-right: 0;
  }

  .aspect-compare-row,
  .aspect-table-row {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .aspect-compare-row {
    grid-template-columns: minmax(9rem, .7fr) repeat(2, minmax(0, 1fr));
  }

  .aspect-time-table .aspect-table-row {
    grid-template-columns: minmax(9rem, .85fr) repeat(2, minmax(0, 1fr));
  }

  .aspect-pattern-table .aspect-table-row,
  .aspect-pair-table .aspect-table-row {
    grid-template-columns: minmax(9rem, .9fr) minmax(8rem, .7fr) minmax(8rem, .7fr) minmax(0, 1.4fr);
  }

  .aspect-compare-row h4,
  .aspect-compare-row .aspect-side,
  .aspect-table-row h4,
  .aspect-table-row > span,
  .aspect-table-row > p,
  .aspect-table-row > div {
    padding: .9rem;
    border-right: 1px solid var(--hairline-soft);
  }

  .aspect-compare-row > *:last-child,
  .aspect-table-row > *:last-child {
    border-right: 0;
  }

  .aspect-side {
    padding-top: .9rem;
    border-top: 0;
  }

  .aspect-side::before {
    content: none;
  }

  .aspect-cell {
    display: block;
  }

  .aspect-cell::before {
    content: none;
  }

  .aspect-prefix-grid,
  .aspect-trap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--hairline-soft);
  }

  .aspect-prefix,
  .aspect-trap {
    padding: 1rem .9rem 1.1rem;
    border-right: 1px solid var(--hairline-soft);
    border-bottom: 1px solid var(--hairline);
  }
}

@media (min-width: 1180px) {
  .aspect-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .aspect-contrast,
  .aspect-pairs {
    grid-column: 1 / -1;
  }

  .aspect-prefix-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -----------------------------------------------------------
   Pitch & stress
   ----------------------------------------------------------- */

.pitch-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.pitch-layout {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.pitch-group {
  border-top: 1px solid var(--hairline);
}

.pitch-group-head {
  padding-block: 1rem .85rem;
  border-bottom: 1px solid var(--hairline);
}

.pitch-group-head h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.pitch-accent-head,
.pitch-table-head {
  display: none;
}

.pitch-accent-grid,
.pitch-table,
.pitch-paradigm-grid,
.pitch-priority-list,
.pitch-reading-list {
  display: grid;
}

.pitch-accent-card,
.pitch-table-row,
.pitch-paradigm,
.pitch-priority-row {
  display: grid;
  gap: .75rem;
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.pitch-accent-card:last-child,
.pitch-table-row:last-child,
.pitch-paradigm:last-child,
.pitch-priority-row:last-child {
  border-bottom-color: var(--hairline);
}

.pitch-mark {
  font-family: var(--ff-display);
  font-size: var(--fs-head);
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
}

.pitch-cell,
.pitch-table-row p,
.pitch-priority-row p,
.pitch-reading-list p,
.pitch-tip p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink-muted);
}

.pitch-cell {
  display: grid;
  gap: .3rem;
  min-width: 0;
}

.pitch-cell::before,
.pitch-mark::before {
  content: attr(data-label);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pitch-mark::before {
  display: block;
  margin-bottom: .35rem;
}

.pitch-contour-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.pitch-contour-cell::before {
  width: 100%;
}

.pitch-contour,
.pitch-pattern,
.pitch-rank {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
}

.pitch-marks span {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--accent);
}

.pitch-contour {
  color: var(--ink);
  padding-bottom: .18rem;
  border-bottom: 2px solid var(--ink);
}

.pitch-accent-card[data-contour="rising"] .pitch-contour {
  border-bottom-style: dashed;
}

.pitch-pattern,
.pitch-rank {
  color: var(--accent);
}

.pitch-examples,
.pitch-sr-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1rem;
}

.pitch-example {
  display: grid;
  gap: .08rem;
  min-width: 0;
}

.pitch-example .sr,
.pitch-sr-list span,
.pitch-form,
.pitch-paradigm-head h4 {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--ink);
}

.pitch-example .tr,
.pitch-paradigm-head span {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.pitch-table-row h4,
.pitch-paradigm-head,
.pitch-priority-row h4,
.pitch-case {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pitch-table-row h4,
.pitch-priority-row h4,
.pitch-paradigm-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 0;
}

.pitch-paradigm-head h4 {
  color: var(--accent);
  text-transform: none;
}

.pitch-paradigm-head span {
  text-transform: none;
  letter-spacing: 0;
}

.pitch-paradigm-cells {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-soft);
}

.pitch-paradigm-cells > div,
.pitch-reading-list li {
  display: grid;
  grid-template-columns: minmax(5.8rem, .8fr) minmax(0, 1fr);
  gap: .8rem;
  align-items: baseline;
  padding: .72rem 0;
  border-bottom: 1px dashed var(--hairline-soft);
}

.pitch-paradigm-cells > div:last-child,
.pitch-reading-list li:last-child {
  border-bottom: 0;
}

.pitch-form {
  color: var(--ink);
}

.pitch-priority-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
}

.pitch-priority-row p {
  grid-column: 2;
}

.pitch-rank {
  color: var(--paper);
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-feature-settings: "tnum";
}

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

.pitch-reading-list span {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
  font-feature-settings: "tnum";
}

.pitch-pop .tip-pop-card {
  border-left: 2px solid var(--accent);
}

.pitch-tip {
  display: grid;
  gap: .65rem;
}

.pitch-tip h4 {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

@media (min-width: 760px) {
  .pitch-group {
    border: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .pitch-group-head {
    padding: 1rem .9rem .85rem;
  }

  .pitch-accent-head,
  .pitch-table-head {
    display: grid;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--hairline);
  }

  .pitch-accent-head {
    grid-template-columns: minmax(5rem, .4fr) minmax(7rem, .55fr) minmax(8rem, .65fr) minmax(6rem, .45fr) minmax(0, 1.45fr);
  }

  .pitch-table-head,
  .pitch-table-row {
    grid-template-columns: minmax(10rem, .75fr) minmax(0, 1fr) minmax(0, 1.3fr);
  }

  .pitch-accent-head span,
  .pitch-table-head span {
    padding: .85rem .9rem;
    border-right: 1px solid var(--hairline);
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .pitch-accent-head span:last-child,
  .pitch-table-head span:last-child {
    border-right: 0;
  }

  .pitch-accent-card,
  .pitch-table-row {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .pitch-accent-card {
    grid-template-columns: minmax(5rem, .4fr) minmax(7rem, .55fr) minmax(8rem, .65fr) minmax(6rem, .45fr) minmax(0, 1.45fr);
  }

  .pitch-mark,
  .pitch-accent-card > .pitch-cell,
  .pitch-table-row h4,
  .pitch-table-row > p,
  .pitch-table-row > div {
    padding: .9rem;
    border-right: 1px solid var(--hairline-soft);
  }

  .pitch-accent-card > *:last-child,
  .pitch-table-row > *:last-child {
    border-right: 0;
  }

  .pitch-cell {
    display: block;
  }

  .pitch-marks {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
  }

  .pitch-cell::before,
  .pitch-mark::before,
  .pitch-contour-cell::before {
    content: none;
  }

  .pitch-mark {
    display: flex;
    align-items: center;
  }

  .pitch-contour-cell {
    display: flex;
  }

  .pitch-length-table .pitch-table-head,
  .pitch-length-table .pitch-table-row {
    grid-template-columns: minmax(10rem, .8fr) minmax(8rem, .55fr) minmax(0, 1.4fr);
  }

  .pitch-paradigm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--hairline-soft);
  }

  .pitch-priority-list {
    grid-template-columns: 1fr;
    border-left: 1px solid var(--hairline-soft);
  }

  .pitch-paradigm,
  .pitch-priority-row {
    padding: 1rem .9rem 1.1rem;
    border-right: 1px solid var(--hairline-soft);
    border-bottom: 1px solid var(--hairline);
  }

  .pitch-reading-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--hairline-soft);
  }

  .pitch-reading-list li {
    grid-template-columns: 1fr;
    gap: .45rem;
    padding: 1rem .9rem 1.1rem;
    border-right: 1px solid var(--hairline-soft);
    border-bottom: 1px solid var(--hairline);
  }
}

@media (min-width: 1180px) {
  .pitch-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .pitch-accents,
  .pitch-paradigms {
    grid-column: 1 / -1;
  }

  .pitch-paradigm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -----------------------------------------------------------
   Prepositions
   ----------------------------------------------------------- */

.prep-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.prep-layout {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.prep-group {
  border-top: 1px solid var(--hairline);
}

.prep-group-head {
  padding-block: 1rem .85rem;
  border-bottom: 1px solid var(--hairline);
}

.prep-group-head h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.prep-table {
  display: grid;
}

.prep-table-head {
  display: none;
}

.prep-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: .85rem 1rem;
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--hairline-soft);
  --prep-dot: var(--tone, var(--accent));
}

.prep-row:last-child {
  border-bottom-color: var(--hairline);
}

.prep-visual {
  min-width: 0;
}

.prep-visual-pack {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.prep-visual-pack.is-split {
  flex-direction: column;
  align-items: flex-start;
}

.prep-icon-cell {
  display: block;
  --prep-dot: var(--tone, var(--accent));
}

.prep-icon-cell[data-case="gen"] { --prep-dot: var(--tone-cyan); }
.prep-icon-cell[data-case="dat"] { --prep-dot: var(--tone-yellow); }
.prep-icon-cell[data-case="aku"] { --prep-dot: var(--tone-purple); }
.prep-icon-cell[data-case="ins"] { --prep-dot: var(--tone-orange); }
.prep-icon-cell[data-case="lok"] { --prep-dot: var(--tone-green); }

.prep-icon {
  width: 5rem;
  height: auto;
  color: var(--ink-muted);
  overflow: visible;
}

.prep-visual-pack.is-split .prep-icon {
  width: 4.1rem;
}

.prep-icon-object,
.prep-icon-line,
.prep-icon-dash {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.prep-icon-dash {
  stroke-dasharray: 3 4;
}

.prep-icon-dot {
  fill: var(--prep-dot);
  stroke: var(--paper);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.prep-icon-arrow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.prep-name {
  align-self: center;
  font-size: var(--fs-head);
  font-weight: 300;
  line-height: 1;
  color: var(--tone, var(--accent));
  overflow-wrap: anywhere;
}

.prep-uses {
  grid-column: 1 / -1;
  display: grid;
  gap: .75rem;
}

.prep-use {
  display: grid;
  gap: .35rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--hairline-soft);
}

.prep-use:first-child {
  padding-top: 0;
  border-top: 0;
}

.prep-use-head {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
}

.prep-case {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--case-tone, var(--tone, var(--accent)));
  background: color-mix(in oklab, var(--case-tone, var(--tone, var(--accent))) 12%, transparent);
  padding: .36rem .52rem .34rem;
}

.prep-case[data-case="gen"] { --case-tone: var(--tone-cyan); }
.prep-case[data-case="dat"] { --case-tone: var(--tone-yellow); }
.prep-case[data-case="aku"] { --case-tone: var(--tone-purple); }
.prep-case[data-case="ins"] { --case-tone: var(--tone-orange); }
.prep-case[data-case="lok"] { --case-tone: var(--tone-green); }

.prep-meaning {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prep-example {
  display: grid;
  gap: .1rem;
}

.prep-example .sr {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.prep-example .tr {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

@media (min-width: 920px) {
  .prep-group {
    border: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .prep-group-head {
    padding: 1rem .9rem .85rem;
  }

  .prep-table-head {
    display: grid;
    grid-template-columns: 6.5rem 8.5rem minmax(15rem, 1fr) minmax(20rem, 1.55fr);
    background: var(--paper-deep);
    border-bottom: 1px solid var(--hairline);
  }

  .prep-table-head span {
    padding: .85rem .9rem;
    border-right: 1px solid var(--hairline);
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .prep-table-head span:last-child {
    border-right: 0;
  }

  .prep-row {
    grid-template-columns: 6.5rem 8.5rem minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .prep-row:last-child {
    border-bottom-color: var(--hairline);
  }

  .prep-visual,
  .prep-name,
  .prep-uses {
    padding: .9rem;
    border-right: 1px solid var(--hairline);
  }

  .prep-visual {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .prep-visual-pack,
  .prep-visual-pack.is-split {
    align-items: center;
  }

  .prep-name {
    display: flex;
    align-items: center;
    font-size: var(--fs-title);
  }

  .prep-uses {
    grid-column: auto;
    border-right: 0;
    gap: 0;
    padding: 0;
  }

  .prep-use {
    grid-template-columns: minmax(15rem, 1fr) minmax(20rem, 1.55fr);
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--hairline-soft);
  }

  .prep-use:first-child {
    border-top: 0;
  }

  .prep-use-head,
  .prep-example {
    padding: .9rem;
  }

  .prep-use-head {
    border-right: 1px solid var(--hairline-soft);
  }

  .prep-icon {
    width: 4.8rem;
  }

  .prep-visual-pack.is-split .prep-icon {
    width: 4.1rem;
  }
}

/* -----------------------------------------------------------
   False friends
   ----------------------------------------------------------- */

.false-section {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.false-layout {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.false-group {
  border-top: 1px solid var(--hairline);
}

.false-group-head {
  padding-block: 1rem .85rem;
  border-bottom: 1px solid var(--hairline);
}

.false-group-head h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.false-table,
.false-row {
  display: grid;
}

.false-table-head {
  display: none;
}

.false-row {
  gap: .75rem;
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.false-row:last-child {
  border-bottom-color: var(--hairline);
}

.false-word,
.false-cell,
.false-example {
  min-width: 0;
}

.false-word::before,
.false-cell::before,
.false-example::before {
  content: attr(data-label);
  display: block;
  margin-bottom: .35rem;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.false-word .sr {
  font-family: var(--ff-display);
  font-size: var(--fs-head);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--accent);
  overflow-wrap: anywhere;
}

.false-cell {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--ink);
}

.false-means {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.false-trap {
  display: flex;
  align-items: baseline;
  gap: .45rem .55rem;
  flex-wrap: wrap;
  color: var(--ink-muted);
}

.false-not {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-mark);
  padding: .34rem .48rem .32rem;
}

.false-trap small {
  flex-basis: 100%;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

.false-example {
  display: grid;
  gap: .12rem;
}

.false-example .sr {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.false-example .tr {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
}

@media (min-width: 880px) {
  .false-group {
    border: 1px solid var(--hairline);
    border-bottom: 0;
  }

  .false-group-head {
    padding: 1rem .9rem .85rem;
  }

  .false-table-head {
    display: grid;
    grid-template-columns: minmax(8rem, .65fr) minmax(12rem, .85fr) minmax(12rem, .95fr) minmax(16rem, 1.3fr);
    background: var(--paper-deep);
    border-bottom: 1px solid var(--hairline);
  }

  .false-table-head span {
    padding: .85rem .9rem;
    border-right: 1px solid var(--hairline);
    font-family: var(--ff-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .false-table-head span:last-child {
    border-right: 0;
  }

  .false-row {
    grid-template-columns: minmax(8rem, .65fr) minmax(12rem, .85fr) minmax(12rem, .95fr) minmax(16rem, 1.3fr);
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .false-word,
  .false-cell,
  .false-example {
    padding: .9rem;
    border-right: 1px solid var(--hairline-soft);
  }

  .false-row > *:last-child {
    border-right: 0;
  }

  .false-word::before,
  .false-cell::before,
  .false-example::before {
    content: none;
  }

  .false-word .sr {
    font-size: var(--fs-title);
  }
}

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

/* -----------------------------------------------------------
   Utilities
   ----------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}