/* === tokens.css === */
/* =============================================================
   USUCAPIO · DESIGN TOKENS
   Editoriální právnická typografie. Ostré hrany, klidná hierarchie.
   ============================================================= */

:root {
  /* -- BARVY -------------------------------------------------- */
  /* Papír — nepravá bílá, lehce krémová, jako stránka knihy. */
  --paper: #fafaf6;
  --paper-2: #f3f1e7;        /* zaprášený okraj, hlavičky tabulek */
  --paper-3: #ebe7d6;        /* dělící linky, sekundární plocha */

  /* Inkoust — měkká čerň, ne #000. */
  --ink: #15140f;
  --ink-2: #2c2a22;          /* tlumené tělo */
  --ink-3: #5e5a4d;          /* meta, popisky */
  --ink-4: #8a8576;          /* hairline, tlumené značky */

  /* Akcent — temná krev / pečetní červená. Jediný akcent. */
  --seal: #7d1d1d;
  --seal-2: #5b1414;         /* hover, důraz */
  --seal-tint: #f3e3e0;      /* světlé poutací pole */

  /* Diff (decentní). */
  --diff-add-bg: #e6ecdb;
  --diff-add-mark: #4a5a1d;
  --diff-rem-bg: #f1dcd8;
  --diff-rem-mark: #7d1d1d;

  /* -- PÍSMO -------------------------------------------------- */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Charter', 'Georgia', 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', 'Source Sans Pro', 'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Source Serif 4', 'Source Serif Pro', 'Charter', 'Georgia', serif;
  /* Default body — sans pro běžný UI + tělo zákona. Serif drží jen displeje. */
  --font-default: var(--font-sans);

  /* Velikosti — kompaktní škála, blíže zakonyprolidi (15 px tělo). */
  --t-xs:    0.72rem;        /* ~11.5 — meta */
  --t-sm:    0.82rem;        /* ~13 — labels, breadcrumb */
  --t-base:  0.9375rem;      /* 15 — UI default */
  --t-body:  0.9375rem;      /* 15 — text zákona/rozsudku */
  --t-md:    1.05rem;        /* ~17 */
  --t-lg:    1.25rem;        /* 20 */
  --t-xl:    1.5rem;         /* 24 */
  --t-2xl:   1.85rem;        /* ~30 */
  --t-3xl:   2.25rem;        /* 36 */
  --t-hero:  2.75rem;        /* 44 — landing display */

  --leading-tight: 1.18;
  --leading-snug:  1.3;
  --leading-body:  1.45;
  --leading-prose: 1.5;

  /* OpenType feature sety. */
  --otf-prose:   "kern" 1, "liga" 1, "onum" 1, "calt" 1;   /* old-style numerals v textu */
  --otf-tabular: "kern" 1, "lnum" 1, "tnum" 1;             /* tabulky, sloupce čísel */
  --otf-display: "kern" 1, "liga" 1, "dlig" 1, "onum" 1, "ss01" 1;
  --otf-mono:    "kern" 1, "calt" 0, "ss02" 1;

  /* -- ROZESTUPY (8px grid, ale s editoriálními variantami) -- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Měřítko textových sloupců. */
  --measure-prose: 64ch;     /* tělo zákona */
  --measure-narrow: 52ch;
  --measure-wide:   84ch;
  --container:      1200px;
  --container-wide: 1400px;

  /* -- LINKY / RÁMCE ---------------------------------------- */
  --rule-hair: 1px solid var(--ink-4);
  --rule-soft: 1px solid var(--paper-3);
  --rule-firm: 1px solid var(--ink-2);
  --rule-bold: 2px solid var(--ink);
  --rule-double: 3px double var(--ink);

  /* Žádné rounded — všechno hranaté. */
  --radius: 0;

  /* Stíny — minimalistické, ne soft. */
  --shadow-press: 0 0 0 1px var(--ink), 2px 2px 0 0 var(--ink);
  --shadow-card:  0 1px 0 0 var(--paper-3);
  --shadow-paper: 0 0 0 1px var(--paper-3);

  /* Pohyb — opatrný. */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 80ms;
  --t-mid:  160ms;
  --t-slow: 320ms;
}

/* === base.css === */
/* =============================================================
   USUCAPIO · BASE / RESET / BODY
   ============================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-default);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  /* Subtilní papírová textura — jemný šum přes lineární přechod.
     Decentně, ne vintage scrapbook. */
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 25% 18%, rgba(125, 29, 29, 0.012) 0, transparent 38%),
    radial-gradient(circle at 78% 82%, rgba(21, 20, 15, 0.018) 0, transparent 42%);
  min-height: 100vh;
}

/* Sans pro UI prvky. */
button, input, select, textarea, label, nav, .ui {
  font-family: var(--font-sans);
}

/* Mono pro paragrafy, sp.zn., ELI a podobné. */
code, kbd, samp, pre, .mono, .ref {
  font-family: var(--font-mono);
  font-feature-settings: var(--otf-mono);
  font-size: 0.95em;
}

/* Linky — žádné brand modré. Inkoust + pečeť při hoveru. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-4);
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
a:hover {
  color: var(--seal);
  text-decoration-color: var(--seal);
}
a:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

/* Tlačítka — hranatá, „letterpress" feel. */
button, .btn {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: var(--rule-bold);
  border-color: var(--ink);
  border-radius: var(--radius);
  padding: 0.55em 1em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
button:hover, .btn:hover {
  background: var(--seal);
  border-color: var(--seal);
}
button:active, .btn:active { transform: translate(1px, 1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--seal {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--paper);
}
.btn--seal:hover { background: var(--seal-2); border-color: var(--seal-2); }

/* Inputy — ploché, hranaté. */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], textarea, select {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  background: var(--paper);
  color: var(--ink);
  border: var(--rule-firm);
  border-radius: var(--radius);
  padding: 0.55em 0.7em;
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--seal);
  box-shadow: inset 0 -2px 0 0 var(--seal);
}

/* Tabulky — chleba a sůl tohohle webu. */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  line-height: 1.5;
}
table th, table td {
  text-align: left;
  padding: 0.6em 0.85em;
  border-bottom: var(--rule-soft);
  vertical-align: top;
  font-feature-settings: var(--otf-tabular);
}
table th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--t-xs);
  color: var(--ink-3);
  border-bottom: var(--rule-firm);
  background: var(--paper-2);
}
table tbody tr:hover { background: var(--paper-2); }
table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-3);
  padding-bottom: var(--s-3);
}

/* Horizontální linky — editoriální. */
hr {
  border: 0;
  border-top: var(--rule-firm);
  margin: var(--s-7) 0;
}
hr.double { border: 0; border-top: var(--rule-double); }
hr.hair   { border: 0; border-top: var(--rule-hair); }

/* Selection — pečetní červená. */
::selection { background: var(--seal); color: var(--paper); }

/* Focus globální. */
:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

/* Skip link — a11y. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Container utility. */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 720px; }

/* Vizuálně skrytý text (a11y). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === typography.css === */
/* =============================================================
   USUCAPIO · TYPOGRAFIE
   Tufte-vibe, knižní svazek, klid.
   ============================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-3);
  color: var(--ink);
  font-feature-settings: var(--otf-display);
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--t-2xl), 4.2vw, var(--t-3xl));
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
h2 {
  font-size: var(--t-xl);
  letter-spacing: -0.016em;
  margin-top: var(--s-7);
}
h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  margin-top: var(--s-6);
}
h4 {
  font-size: var(--t-md);
  font-weight: 600;
}
h5 {
  font-size: var(--t-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
  color: var(--ink-3);
}
h6 {
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-sans);
  color: var(--ink-3);
}

p {
  margin: 0 0 var(--s-4);
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Global rule — never break Czech words mid-line with a hyphen.
   Applies to all elements that render free-flowing text. */
html, body, * {
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Hero display — pro landing. */
.display {
  font-family: var(--font-display);
  font-size: clamp(var(--t-2xl), 6.5vw, var(--t-hero));
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-weight: 600;
  text-wrap: balance;
}

/* Eyebrow / kicker. */
.kicker {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--seal);
}

/* Lead odstavec. */
.lead {
  font-family: var(--font-serif);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure-wide);
  font-feature-settings: var(--otf-prose);
}

/* Tělo zákona — prose styl. */
.prose {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--leading-prose);
  max-width: var(--measure-prose);
  font-feature-settings: var(--otf-prose);
  color: var(--ink);
}
.prose p { margin: 0 0 var(--s-4); }
.prose p + p { text-indent: 1.4em; margin-top: 0; }   /* knižní odstavce */
.prose p.no-indent + p { text-indent: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }

/* Citace — práva. */
blockquote, .citation-block {
  margin: var(--s-5) 0;
  padding: var(--s-2) var(--s-5);
  border-left: 3px solid var(--seal);
  color: var(--ink-2);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: var(--measure-wide);
}
blockquote cite {
  display: block;
  margin-top: var(--s-3);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* Číslování paragrafů — vystouplé do margin. */
.par-num {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--seal);
  font-weight: 600;
}

/* Drobné značky / chips. */
.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--ink-4);
  color: var(--ink-2);
  background: var(--paper);
  line-height: 1.6;
}
.tag--seal { border-color: var(--seal); color: var(--seal); }
.tag--ink  { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Definiční výpisy — pro meta info zákona. */
.dl-cards {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-5);
  row-gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
}
.dl-cards dt {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  padding-top: 0.2em;
}
.dl-cards dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--t-base);
  color: var(--ink);
}

/* Section break — Tufte horizontal rule. */
.section-break {
  border: 0;
  text-align: center;
  margin: var(--s-7) 0;
  height: 1em;
  position: relative;
}
.section-break::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--ink-4);
  margin: 0 auto;
}

/* Sloupec čísel — tabular. */
.num, .tabular { font-feature-settings: var(--otf-tabular); }

/* === print.css === */
/*
 * Print stylesheet for Usucapio web subdomains.
 *
 * Goal: when a lawyer prints a paragraph / commentary / decision to PDF
 * or to actual paper for a brief, the result should look like a clean
 * black-on-white legal document — not a screenshot of the web UI.
 *
 * - Hide chrome: nav, search, footer, sidebars, tabs, action buttons.
 * - Force a print-friendly serif (Source Serif 4 if web fonts loaded,
 *   else the system serif fallback) at 11pt body / 1.4 line height.
 * - Avoid breaking paragraphs across pages.
 * - Print the URL after every link so citations remain traceable on paper
 *   ("…viz § 2954 (https://zakony.usucapio.com/2012/89/par_2954)…").
 *
 * Imported from `Layout.astro` via `<style is:global>`.
 */
@media print {
  /* ----- page setup ----- */
  @page {
    margin: 1.8cm 1.6cm 2cm 1.6cm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }

  /* ----- hide chrome ----- */
  .usuc-head,
  .usuc-foot,
  .usuc-search,
  .usuc-sidebar,
  .usuc-tabs,
  .usuc-actions,
  .skip-link,
  nav,
  header[role='banner'],
  footer[role='contentinfo'],
  [data-print-hide],
  button,
  .no-print {
    display: none !important;
  }

  /* Layout reset — single column, full bleed within page margins. */
  main,
  #main,
  .container,
  .container--wide,
  .container--narrow {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ----- typography ----- */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: #000 !important;
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-weight: 700;
  }
  h1 { font-size: 18pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 12pt; }
  h4, h5, h6 { font-size: 11pt; }

  p,
  li,
  blockquote,
  .paragraph-body,
  .commentary-body,
  .decision-body {
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  pre, code {
    font-size: 10pt;
    background: transparent !important;
    border: none !important;
    color: #000 !important;
  }

  /* ----- links: print the URL after them ----- */
  a,
  a:link,
  a:visited {
    color: #000 !important;
    text-decoration: underline;
  }
  /* Show absolute URL after external links, and pretty internal links. */
  a[href^='http']:after,
  a[href^='/']:after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #333;
    word-break: break-all;
  }
  /* In-page anchors and javascript: don't get a noisy URL. */
  a[href^='#']:after,
  a[href^='javascript:']:after,
  a[href^='mailto:']:after,
  a.no-print-url:after {
    content: '';
  }

  /* ----- tables and figures ----- */
  table {
    page-break-inside: avoid;
    border-collapse: collapse;
  }
  th, td {
    border: 0.5pt solid #000 !important;
    padding: 4pt 6pt;
  }
  img, svg {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* ----- citation block: stays together with its paragraph ----- */
  .citation,
  .ref,
  .ref-block {
    page-break-inside: avoid;
  }
}

/* === Breadcrumb.astro === */

  .usuc-bc {
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    /* Breathing room below the sticky header rule. */
    padding-top: var(--s-3);
  }
  .usuc-bc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
  }
  .usuc-bc li {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  .usuc-bc a {
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .usuc-bc a:hover { color: var(--seal); border-bottom-color: var(--seal); }
  .usuc-bc [aria-current="page"] { color: var(--ink); }
  .usuc-bc .sep { color: var(--ink-4); }


/* === Citation.astro === */

  .usuc-cite {
    border: var(--rule-firm);
    background: var(--paper);
    padding: var(--s-5);
    /* pečetní hřbet vlevo */
    border-left: 4px solid var(--seal);
  }
  .usuc-cite header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
  }
  .usuc-cite__short {
    font-family: var(--font-mono);
    font-size: var(--t-md);
    color: var(--seal);
    font-weight: 600;
  }
  .usuc-cite .dl-cards { margin-bottom: var(--s-4); }
  .usuc-cite__actions {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    border-top: var(--rule-soft);
    padding-top: var(--s-4);
  }
  .usuc-cite__actions .btn {
    font-size: var(--t-xs);
  }
  .usuc-cite__actions [data-copied="true"] {
    background: var(--seal);
    color: var(--paper);
    border-color: var(--seal);
  }


/* === Footer.astro === */

  .usuc-foot {
    margin-top: var(--s-9);
    border-top: var(--rule-soft);
    background: var(--paper-2);
    padding: var(--s-5) 0;
    color: var(--ink-3);
  }
  .usuc-foot__attrib {
    font-family: var(--font-serif);
    font-size: var(--t-xs);
    line-height: 1.6;
  }
  .usuc-foot__attrib p { margin: 0; }
  .usuc-foot__attrib strong { color: var(--ink-2); }


/* === Header.astro === */

  .usuc-header {
    border-bottom: var(--rule-firm);
    background: var(--paper);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 0 0 var(--paper-3);
  }
  .usuc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .usuc-brands {
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  .usuc-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    color: var(--ink-3);
    padding: 4px var(--s-3);
    border-right: var(--rule-soft);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .usuc-brand__seal svg { width: 26px; height: 26px; }
  .usuc-brand:last-child { border-right: 0; }
  .usuc-brand:hover { color: var(--ink); background: var(--paper-2); }
  .usuc-brand--active {
    color: var(--ink);
    background: var(--paper);
  }
  .usuc-brand--active .usuc-brand__seal { color: var(--seal); }
  .usuc-brand--active .usuc-brand__sub { color: var(--seal); font-weight: 600; }

  .usuc-brand__seal {
    display: inline-flex;
    color: currentColor;
    opacity: 0.85;
  }
  .usuc-brand--active .usuc-brand__seal { opacity: 1; }
  .usuc-brand__word {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
  }
  .usuc-brand__name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.012em;
  }
  .usuc-brand__sub {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    margin-top: 2px;
  }

  .usuc-nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
  }
  .usuc-nav a {
    text-decoration: none;
    color: var(--ink-2);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .usuc-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--seal);
  }

  @media (max-width: 720px) {
    .usuc-brand__word { display: none; }
    .usuc-brand { padding: var(--s-2); }
  }


/* === Hierarchy.astro === */

  .usuc-hier__title { margin-bottom: var(--s-3); }
  .usuc-hier {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
  }
  .usuc-hier li {
    border-left: 1px solid var(--paper-3);
    padding-left: var(--s-3);
    margin: 0 0 var(--s-1) 0;
    position: relative;
  }
  .usuc-hier li.is-active { border-left-color: var(--seal); }
  .usuc-hier li.is-accent > .usuc-hier__row .usuc-hier__label {
    color: var(--seal);
    font-weight: 700;
  }
  .usuc-hier__row {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: 4px 0;
    line-height: 1.35;
  }
  .usuc-hier__label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--ink);
    min-width: 5.5ch;
  }
  .usuc-hier__name {
    flex: 1 1 auto;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-2);
  }
  .usuc-hier__range {
    flex: 0 0 auto;
    font-size: var(--t-xs);
    color: var(--ink-4);
    font-feature-settings: var(--otf-tabular);
  }
  /* nesting indentation handled by border-left padding above */
  .usuc-hier--l1 { margin-left: var(--s-3); }
  .usuc-hier--l2 { margin-left: var(--s-3); }
  .usuc-hier--l3 { margin-left: var(--s-3); }
  .usuc-hier--l4 .usuc-hier__row { padding: 2px 0; }


/* === LawHeader.astro === */

  .usuc-lh {
    padding: var(--s-7) 0 var(--s-5);
    border-bottom: var(--rule-double);
    background:
      linear-gradient(to bottom, var(--paper) 0, var(--paper) 70%, transparent 100%);
    position: relative;
  }
  .usuc-lh__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-4);
    gap: var(--s-4);
    flex-wrap: wrap;
  }
  .usuc-lh__id {
    font-size: var(--t-md);
    color: var(--seal);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .usuc-lh__title {
    margin: 0 0 var(--s-2);
    font-size: clamp(var(--t-2xl), 5vw, var(--t-3xl));
    line-height: 1.04;
    letter-spacing: -0.024em;
    max-width: 22ch;
  }
  .usuc-lh__sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--t-md);
    color: var(--ink-2);
    margin: 0 0 var(--s-6);
    max-width: var(--measure-wide);
  }
  .usuc-lh__meta { margin-top: var(--s-5); }


/* === Seal.astro === */

  .usuc-seal {
    color: var(--seal);
    display: inline-block;
  }


/* === Search.astro === */

  .usuc-search {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    border: var(--rule-bold);
    background: var(--paper);
    box-shadow: 4px 4px 0 0 var(--ink);
    transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .usuc-search:focus-within {
    box-shadow: 4px 4px 0 0 var(--seal);
    border-color: var(--seal);
  }
  .usuc-search__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--s-3) 0 var(--s-4);
    color: var(--ink-3);
    border-right: var(--rule-soft);
  }
  .usuc-search input {
    border: 0;
    background: transparent;
    font-family: var(--font-serif);
    color: var(--ink);
  }
  .usuc-search input:focus { box-shadow: none; }
  .usuc-search button {
    border: 0;
    border-left: var(--rule-bold);
    background: var(--ink);
    color: var(--paper);
    padding: 0 var(--s-5);
  }
  .usuc-search button:hover { background: var(--seal); }
  .usuc-search--lg input {
    font-size: var(--t-md);
    padding: var(--s-4) var(--s-3);
  }
  .usuc-search--md input {
    font-size: var(--t-base);
    padding: var(--s-3) var(--s-2);
  }
  .usuc-search--lg button {
    font-size: var(--t-sm);
    letter-spacing: 0.12em;
  }

  .usuc-search__hints {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    border-top: var(--rule-soft);
    padding: var(--s-2) var(--s-4);
    background: var(--paper-2);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
  }
  .usuc-search__hints a {
    text-decoration: none;
    color: var(--ink-2);
    border-bottom: 1px dashed var(--ink-4);
    padding-bottom: 1px;
  }
  .usuc-search__hints a:hover { color: var(--seal); border-bottom-color: var(--seal); }


/* === SectionView.astro === */

  .usuc-sec {
    border-top: var(--rule-firm);
    padding-top: var(--s-5);
  }
  .usuc-sec__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
  }
  .usuc-sec__refbar {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-3);
  }
  .usuc-sec__refbar .par-num {
    font-size: var(--t-lg);
  }
  .usuc-sec__marginal {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--t-md);
    color: var(--ink-2);
  }
  .usuc-sec__ver {
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
  }
  .usuc-sec__p {
    display: grid;
    grid-template-columns: 4ch 1fr;
    gap: var(--s-4);
    margin: 0 0 var(--s-4);
    text-indent: 0;
  }
  .usuc-sec__num {
    color: var(--seal);
    font-size: 0.9em;
    text-align: right;
    line-height: var(--leading-prose);
  }
  .usuc-sec__txt {
    line-height: var(--leading-prose);
  }


/* === Tabs.astro === */

  .usuc-tabs {
    display: flex;
    gap: 0;
    border-bottom: var(--rule-firm);
    flex-wrap: wrap;
  }
  .usuc-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--ink-3);
    padding: 6px var(--s-3);
    border: 1px solid transparent;
    border-bottom: 0;
    margin-bottom: -1px;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .usuc-tab:hover { color: var(--ink); background: var(--paper-2); }
  .usuc-tab.is-active {
    color: var(--ink);
    background: var(--paper);
    border-color: var(--ink-2);
    border-bottom-color: var(--paper);
    font-weight: 700;
    position: relative;
  }
  .usuc-tab.is-active::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: var(--seal);
  }
  .usuc-tab__count {
    font-size: 0.85em;
    color: var(--ink-4);
  }
  .usuc-tab.is-active .usuc-tab__count { color: var(--seal); }


/* === VersionTable.astro === */

  .usuc-vt {
    border-top: var(--rule-double);
    border-bottom: var(--rule-double);
    padding: var(--s-5) 0;
  }
  .usuc-vt__head {
    margin-bottom: var(--s-5);
    max-width: var(--measure-wide);
  }
  .usuc-vt__head p {
    font-family: var(--font-serif);
    font-size: var(--t-base);
    color: var(--ink-2);
    margin: var(--s-2) 0 0;
  }
  .usuc-vt__table {
    font-size: var(--t-sm);
  }
  .usuc-vt__table .num {
    width: 6ch;
    color: var(--ink-3);
  }
  .usuc-vt__date {
    font-feature-settings: var(--otf-tabular);
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--ink-2);
  }
  .usuc-vt__dash { margin: 0 0.4em; color: var(--ink-4); }
  .usuc-vt__note {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink-2);
  }
  .usuc-vt__cmp {
    text-align: right;
    width: 18ch;
  }
  .usuc-vt__cmp a {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    text-decoration: none;
    color: var(--ink-3);
    border-bottom: 1px dashed var(--ink-4);
  }
  .usuc-vt__cmp a:hover { color: var(--seal); border-bottom-color: var(--seal); }

  .usuc-vt__table tr.is-current td { background: var(--seal-tint); }
  .usuc-vt__table tr.is-future td  { background: repeating-linear-gradient(45deg, var(--paper-2) 0 6px, var(--paper) 6px 12px); }

  .usuc-vt__legend {
    margin-top: var(--s-4);
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    color: var(--ink-3);
  }