/* ============================================================
   chuchotage.css
   A Bootstrap 5-compatible class system, redrawn in the
   Chuchotage editorial aesthetic.

   Drop-in replacement for bootstrap.css for the classes covered
   here. No JS. No bootstrap dependency. No CSS reset assumed —
   we set the basics ourselves.

   Aesthetic: cream paper, terracotta single accent, deep ink,
   Instrument Serif headings, Inter Tight body, JetBrains Mono
   for technical labels.
   ============================================================ */

/* ── Self-hosted fonts (CSP 'self') ────────────────────────── */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/lib/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/lib/fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/lib/fonts/inter-tight-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/lib/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/lib/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/lib/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/lib/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/lib/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/lib/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Palette */
  --cc-cream:      #f6f4ef;
  --cc-paper:      #fbf9f4;
  --cc-ink:        #1a1a1a;
  --cc-ink-2:      #2a2a2a;
  --cc-mute:       #6b665e;
  --cc-mute-2:     #9a948a;
  --cc-rule:       #e3ddd0;
  --cc-soft:       #ece8de;
  --cc-accent:     #c2603a;        /* darkened from #d97757 for AA on cream */
  --cc-accent-2:   #a64f2c;
  --cc-accent-bright: #d97757;     /* keep brighter tone for backgrounds */
  --cc-deep:       #2a3d2e;
  --cc-success:    #2f6b2d;
  --cc-danger:     #a23015;
  --cc-warning:    #8a6a1d;
  --cc-info:       #2f5a78;

  /* Bootstrap token bridge — same names BS expects */
  --bs-primary:    var(--cc-ink);
  --bs-secondary:  var(--cc-mute);
  --bs-success:    var(--cc-success);
  --bs-danger:     var(--cc-danger);
  --bs-warning:    var(--cc-warning);
  --bs-info:       var(--cc-info);
  --bs-light:      var(--cc-cream);
  --bs-dark:       var(--cc-ink);
  --bs-body-color: var(--cc-ink);
  --bs-body-bg:    var(--cc-paper);
  --bs-border-color: var(--cc-rule);
  --bs-border-radius:    10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 22px;

  /* Type */
  --cc-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --cc-font-body:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Shadows — soft, paper-like, never blue */
  --cc-shadow-sm: 0 1px 2px rgba(40, 30, 20, 0.05);
  --cc-shadow:    0 2px 6px rgba(40, 30, 20, 0.06), 0 8px 24px rgba(40, 30, 20, 0.05);
  --cc-shadow-lg: 0 12px 40px rgba(40, 30, 20, 0.10), 0 40px 80px -20px rgba(40, 30, 20, 0.15);

  /* Spacing scale (matches BS 0..5 = 0, .25, .5, 1, 1.5, 3 rem) */
  --cc-sp-0: 0;
  --cc-sp-1: 0.25rem;
  --cc-sp-2: 0.5rem;
  --cc-sp-3: 1rem;
  --cc-sp-4: 1.5rem;
  --cc-sp-5: 3rem;
}

/* ── Reset + base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--cc-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cc-ink);
  background: var(--cc-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}
hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--cc-rule);
  opacity: 1;
}
a {
  color: var(--cc-ink);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cc-mute-2);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
a:hover { color: var(--cc-accent); text-decoration-color: var(--cc-accent); }
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
mark, .mark {
  background: linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--cc-accent) 40%, transparent) 60%);
  color: inherit;
  padding: 0 .1em;
}
small, .small { font-size: 0.875em; }
b, strong { font-weight: 600; }
code, kbd, pre, samp {
  font-family: var(--cc-font-mono);
  font-size: 0.875em;
}
code {
  color: var(--cc-accent-2);
  background: color-mix(in oklab, var(--cc-accent) 8%, var(--cc-paper));
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
kbd {
  background: var(--cc-ink);
  color: var(--cc-paper);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  font-size: 0.8em;
}
pre {
  display: block;
  background: var(--cc-cream);
  border: 1px solid var(--cc-rule);
  border-radius: var(--bs-border-radius);
  padding: 1rem 1.25rem;
  overflow: auto;
  margin: 0 0 1rem;
}
pre code { background: none; color: inherit; padding: 0; }
blockquote {
  margin: 1.5rem 0;
  padding: 0 1.5rem;
  border-left: 2px solid var(--cc-accent);
  font-family: var(--cc-font-display);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--cc-ink);
}
::selection { background: color-mix(in oklab, var(--cc-accent) 35%, transparent); color: var(--cc-ink); }

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cc-font-display);
  font-weight: 400;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--cc-ink);
}
h1, .h1 { font-size: 2.75rem; margin: 0 0 0.5rem; }
h2, .h2 { font-size: 2.25rem; margin: 0 0 0.5rem; }
h3, .h3 { font-size: 1.75rem; margin: 0 0 0.5rem; }
h4, .h4 { font-size: 1.375rem; margin: 0 0 0.5rem; }
h5, .h5 { font-size: 1.125rem; margin: 0 0 0.5rem; }
h6, .h6 { font-size: 0.75rem; font-family: var(--cc-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cc-mute); margin: 0 0 0.5rem; line-height: 1.4; }

.display-1 { font-family: var(--cc-font-display); font-size: 7rem;    line-height: 1.0;  letter-spacing: -0.03em;  font-weight: 400; margin: 0 0 0.25em; }
.display-2 { font-family: var(--cc-font-display); font-size: 5.75rem; line-height: 1.02; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 0.25em; }
.display-3 { font-family: var(--cc-font-display); font-size: 4.75rem; line-height: 1.04; letter-spacing: -0.02em;  font-weight: 400; margin: 0 0 0.25em; }
.display-4 { font-family: var(--cc-font-display); font-size: 3.75rem; line-height: 1.06; letter-spacing: -0.02em;  font-weight: 400; margin: 0 0 0.25em; }
.display-5 { font-family: var(--cc-font-display); font-size: 3rem;    line-height: 1.08; letter-spacing: -0.015em; font-weight: 400; margin: 0 0 0.25em; }
.display-6 { font-family: var(--cc-font-display); font-size: 2.5rem;  line-height: 1.1;  letter-spacing: -0.015em; font-weight: 400; margin: 0 0 0.25em; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--cc-mute); font-weight: 400; }

p { margin: 0 0 1rem; text-wrap: pretty; }
.text-wrap-balance { text-wrap: balance; }

/* Italic shorthand we use inside display headings */
.serif-em { font-family: var(--cc-font-display); font-style: italic; color: var(--cc-accent); }

/* Mono micro-label (frequent throughout brand) */
.eyebrow {
  font-family: var(--cc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-mute);
}

/* ── Grid: container / row / col ───────────────────────────── */
.container,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 576px)  { .container, .container-sm  { max-width: 540px; } }
@media (min-width: 768px)  { .container, .container-sm, .container-md  { max-width: 720px; } }
@media (min-width: 992px)  { .container, .container-sm, .container-md, .container-lg  { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl  { max-width: 1140px; } }
@media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl  { max-width: 1320px; } }
.container-fluid { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; margin-left: auto; margin-right: auto; }

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.g-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.g-2 { --bs-gutter-x: .5rem;  --bs-gutter-y: .5rem; }
.g-3 { --bs-gutter-x: 1rem;   --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem;   --bs-gutter-y: 3rem; }
.gx-0 { --bs-gutter-x: 0; } .gy-0 { --bs-gutter-y: 0; }
.gx-3 { --bs-gutter-x: 1rem; } .gy-3 { --bs-gutter-y: 1rem; }
.gx-4 { --bs-gutter-x: 1.5rem; } .gy-4 { --bs-gutter-y: 1.5rem; }
.gx-5 { --bs-gutter-x: 3rem; } .gy-5 { --bs-gutter-y: 3rem; }

@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 auto; width: 8.3333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 auto; width: 8.3333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--cc-ink);
  --btn-bd: transparent;
  --btn-bg-h: var(--cc-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--cc-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .08s;
  user-select: none;
}
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }

.btn-primary   { --btn-bg: var(--cc-ink);    --btn-fg: var(--cc-paper); --btn-bd: var(--cc-ink);    --btn-bg-h: var(--cc-ink-2); }
.btn-secondary { --btn-bg: var(--cc-soft);   --btn-fg: var(--cc-ink);   --btn-bd: var(--cc-soft);   --btn-bg-h: var(--cc-rule); }
.btn-success   { --btn-bg: var(--cc-success);--btn-fg: var(--cc-paper); --btn-bd: var(--cc-success);--btn-bg-h: color-mix(in oklab, var(--cc-success) 80%, black); }
.btn-danger    { --btn-bg: var(--cc-danger); --btn-fg: var(--cc-paper); --btn-bd: var(--cc-danger); --btn-bg-h: color-mix(in oklab, var(--cc-danger) 85%, black); }
.btn-warning   { --btn-bg: var(--cc-warning);--btn-fg: var(--cc-ink);   --btn-bd: var(--cc-warning);--btn-bg-h: color-mix(in oklab, var(--cc-warning) 85%, black); }
.btn-info      { --btn-bg: var(--cc-info);   --btn-fg: var(--cc-paper); --btn-bd: var(--cc-info);   --btn-bg-h: color-mix(in oklab, var(--cc-info) 85%, black); }
.btn-light     { --btn-bg: var(--cc-cream);  --btn-fg: var(--cc-ink);   --btn-bd: var(--cc-rule);   --btn-bg-h: var(--cc-soft); }
.btn-dark      { --btn-bg: var(--cc-ink);    --btn-fg: var(--cc-paper); --btn-bd: var(--cc-ink);    --btn-bg-h: var(--cc-ink-2); }
.btn-accent    { --btn-bg: var(--cc-accent-2); --btn-fg: var(--cc-paper); --btn-bd: var(--cc-accent-2); --btn-bg-h: var(--cc-accent); }
.btn-link      { --btn-bg: transparent; --btn-fg: var(--cc-ink); --btn-bd: transparent; --btn-bg-h: transparent; text-decoration: underline; text-decoration-color: var(--cc-mute-2); text-underline-offset: 3px; padding-left: 0; padding-right: 0; }
.btn-link:hover { color: var(--cc-accent); text-decoration-color: var(--cc-accent); }

.btn-outline-primary   { --btn-bg: transparent; --btn-fg: var(--cc-ink);    --btn-bd: var(--cc-ink);    --btn-bg-h: var(--cc-ink);    }
.btn-outline-primary:hover  { color: var(--cc-paper); }
.btn-outline-secondary { --btn-bg: transparent; --btn-fg: var(--cc-ink);    --btn-bd: var(--cc-rule);   --btn-bg-h: var(--cc-soft);   }
.btn-outline-success   { --btn-bg: transparent; --btn-fg: var(--cc-success);--btn-bd: var(--cc-success);--btn-bg-h: var(--cc-success); }
.btn-outline-success:hover  { color: var(--cc-paper); }
.btn-outline-danger    { --btn-bg: transparent; --btn-fg: var(--cc-danger); --btn-bd: var(--cc-danger); --btn-bg-h: var(--cc-danger); }
.btn-outline-danger:hover   { color: var(--cc-paper); }
.btn-outline-warning   { --btn-bg: transparent; --btn-fg: var(--cc-warning);--btn-bd: var(--cc-warning);--btn-bg-h: var(--cc-warning);}
.btn-outline-info      { --btn-bg: transparent; --btn-fg: var(--cc-info);   --btn-bd: var(--cc-info);   --btn-bg-h: var(--cc-info); }
.btn-outline-info:hover     { color: var(--cc-paper); }
.btn-outline-dark      { --btn-bg: transparent; --btn-fg: var(--cc-ink);    --btn-bd: var(--cc-ink);    --btn-bg-h: var(--cc-ink); }
.btn-outline-dark:hover     { color: var(--cc-paper); }
.btn-outline-light     { --btn-bg: transparent; --btn-fg: var(--cc-cream);  --btn-bd: var(--cc-cream);  --btn-bg-h: var(--cc-cream); }
.btn-outline-accent    { --btn-bg: transparent; --btn-fg: var(--cc-accent); --btn-bd: var(--cc-accent); --btn-bg-h: var(--cc-accent); }
.btn-outline-accent:hover   { color: var(--cc-paper); }

.btn-sm { font-size: 0.8125rem; padding: 0.4375rem 0.75rem; border-radius: var(--bs-border-radius-sm); }
.btn-lg { font-size: 1.0625rem; padding: 0.9375rem 1.5rem; border-radius: var(--bs-border-radius-lg); }

.btn-group { display: inline-flex; vertical-align: middle; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-group > .btn:first-child { border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-label { display: inline-block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--cc-ink); }
.form-text { font-size: 0.8125rem; color: var(--cc-mute); margin-top: 0.375rem; }

.form-control,
.form-select {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-family: var(--cc-font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--cc-ink);
  background: var(--cc-cream);
  border: 1px solid var(--cc-rule);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none;
}
.form-control::placeholder { color: var(--cc-mute-2); }
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--cc-accent);
  background: var(--cc-paper);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cc-accent) 20%, transparent);
}
.form-control:disabled,
.form-select:disabled { background: var(--cc-soft); opacity: 0.65; }
.form-control-sm { padding: 0.4375rem 0.625rem; font-size: 0.8125rem; border-radius: var(--bs-border-radius-sm); }
.form-control-lg { padding: 0.875rem 1.125rem; font-size: 1.0625rem; border-radius: var(--bs-border-radius-lg); }
textarea.form-control { min-height: 6rem; resize: vertical; }

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  padding-right: 2.25rem;
}

.form-check { display: flex; align-items: center; gap: 0.5rem; padding-left: 0; min-height: 1.5rem; margin-bottom: 0.375rem; }
.form-check-input {
  appearance: none;
  width: 1.0625rem; height: 1.0625rem;
  margin: 0; flex-shrink: 0;
  background: var(--cc-cream);
  border: 1px solid var(--cc-mute);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background: var(--cc-ink); border-color: var(--cc-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fbf9f4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l3 3 5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 70%;
}
.form-check-input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--cc-paper) 30%, transparent 33%);
}
.form-check-input:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }
.form-check-label { font-size: 0.9375rem; color: var(--cc-ink); cursor: pointer; }

.form-switch .form-check-input {
  width: 2.25rem; height: 1.25rem; border-radius: 9999px;
  background: var(--cc-soft); border-color: var(--cc-rule);
  background-image: radial-gradient(circle at 0.45rem 50%, var(--cc-paper) 0.45rem, transparent 0.45rem);
  background-size: auto; transition: background-color .15s, background-position .15s;
}
.form-switch .form-check-input:checked {
  background-color: var(--cc-accent); border-color: var(--cc-accent);
  background-image: radial-gradient(circle at calc(100% - 0.45rem) 50%, var(--cc-paper) 0.45rem, transparent 0.45rem);
}

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; min-width: 0; }
.input-group-text {
  display: flex; align-items: center; padding: 0 0.875rem;
  font-size: 0.875rem; color: var(--cc-mute);
  background: var(--cc-soft); border: 1px solid var(--cc-rule);
}
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.input-group > :not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); }
.input-group > :last-child  { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cc-paper);
  border: 1px solid var(--cc-rule);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}
.card-body { flex: 1 1 auto; padding: 1.5rem; }
.card-header {
  padding: 1rem 1.5rem;
  background: var(--cc-cream);
  border-bottom: 1px solid var(--cc-rule);
  font-family: var(--cc-font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cc-mute);
}
.card-footer { padding: 1rem 1.5rem; background: var(--cc-cream); border-top: 1px solid var(--cc-rule); }
.card-title { font-family: var(--cc-font-display); font-size: 1.625rem; line-height: 1.1; margin: 0 0 0.5rem; }
.card-subtitle { font-size: 0.875rem; color: var(--cc-mute); margin: -0.25rem 0 0.75rem; }
.card-text { color: var(--cc-ink); margin: 0 0 1rem; }
.card-text:last-child { margin-bottom: 0; }
.card-img-top { width: 100%; display: block; border-bottom: 1px solid var(--cc-rule); }
.card-link + .card-link { margin-left: 1rem; }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  position: relative;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cc-rule);
  border-left: 3px solid var(--cc-ink);
  border-radius: var(--bs-border-radius);
  background: var(--cc-cream);
  color: var(--cc-ink);
  margin-bottom: 1rem;
}
.alert-heading { margin: 0 0 0.25rem; font-size: 1rem; font-family: var(--cc-font-body); font-weight: 600; letter-spacing: -0.005em; }
/* Alerts: darkened text + tinted bg, computed so AA passes against the panel. */
.alert-primary   { border-left-color: var(--cc-ink);     background: color-mix(in oklab, var(--cc-ink) 4%, var(--cc-paper));     color: var(--cc-ink); }
.alert-secondary { border-left-color: var(--cc-mute);    background: var(--cc-cream); color: var(--cc-ink); }
.alert-success   { border-left-color: var(--cc-success); background: color-mix(in oklab, var(--cc-success) 10%, var(--cc-paper)); color: #1c4a1a; }
.alert-danger    { border-left-color: var(--cc-danger);  background: color-mix(in oklab, var(--cc-danger) 10%, var(--cc-paper));  color: #6e1f0d; }
.alert-warning   { border-left-color: var(--cc-warning); background: color-mix(in oklab, var(--cc-warning) 14%, var(--cc-paper)); color: #5a4310; }
.alert-info      { border-left-color: var(--cc-info);    background: color-mix(in oklab, var(--cc-info) 10%, var(--cc-paper));    color: #1f3e54; }
.alert-dark      { border-left-color: var(--cc-ink);     background: var(--cc-ink); color: var(--cc-paper); }
.alert-light     { border-left-color: var(--cc-rule);    background: var(--cc-paper); color: var(--cc-ink); }
.alert-accent    { border-left-color: var(--cc-accent);  background: color-mix(in oklab, var(--cc-accent) 10%, var(--cc-paper));  color: #7a2f12; }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.5rem;
  font-family: var(--cc-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 4px;
  color: var(--cc-paper);
  background: var(--cc-ink);
}
.badge.rounded-pill { border-radius: 9999px; padding: 0.3125rem 0.625rem; }
.text-bg-primary   { color: var(--cc-paper);  background: var(--cc-ink) !important; }
.text-bg-secondary { color: var(--cc-paper);  background: var(--cc-mute) !important; }
.text-bg-success   { color: var(--cc-paper);  background: var(--cc-success) !important; }
.text-bg-danger    { color: var(--cc-paper);  background: var(--cc-danger) !important; }
.text-bg-warning   { color: var(--cc-ink);    background: var(--cc-warning) !important; }
.text-bg-info      { color: var(--cc-paper);  background: var(--cc-info) !important; }
.text-bg-light     { color: var(--cc-ink);    background: var(--cc-cream) !important; }
.text-bg-dark      { color: var(--cc-paper);  background: var(--cc-ink) !important; }
.text-bg-accent    { color: var(--cc-paper);  background: var(--cc-accent-2) !important; }

/* ── Navbar / Nav ──────────────────────────────────────────── */
.navbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.5rem;
  background: var(--cc-paper);
  border-bottom: 1px solid var(--cc-rule);
}
.navbar-brand {
  font-family: var(--cc-font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--cc-ink);
  text-decoration: none;
  margin-right: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.navbar-brand:hover { color: var(--cc-accent); }
.navbar-nav { display: flex; flex-direction: row; gap: 1.5rem; list-style: none; padding: 0; margin: 0; align-items: center; }
.nav-link {
  color: var(--cc-ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.5rem 0;
  position: relative;
  white-space: nowrap;
}
.nav-link:hover { color: var(--cc-accent); }
.nav-link.active { color: var(--cc-accent); }
.nav-link.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--cc-accent);
}

.nav { display: flex; list-style: none; padding: 0; margin: 0; gap: 0.25rem; }
.nav-tabs { border-bottom: 1px solid var(--cc-rule); }
.nav-tabs .nav-link { padding: 0.625rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav-tabs .nav-link.active { border-bottom-color: var(--cc-accent); color: var(--cc-accent); }
.nav-pills .nav-link { padding: 0.5rem 0.875rem; border-radius: var(--bs-border-radius); }
.nav-pills .nav-link.active { background: var(--cc-ink); color: var(--cc-paper); }
.nav-pills .nav-link.active::after { display: none; }

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem; gap: 0.5rem; font-size: 0.875rem; }
.breadcrumb-item { color: var(--cc-mute); display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb-item a { color: var(--cc-mute); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--cc-accent); }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--cc-mute-2); margin-right: 0.5rem; }
.breadcrumb-item.active { color: var(--cc-ink); }

/* ── Pagination ────────────────────────────────────────────── */
.pagination { display: flex; list-style: none; padding: 0; margin: 0; gap: 0; }
.page-item { display: flex; }
.page-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem;
  color: var(--cc-ink); background: var(--cc-paper);
  border: 1px solid var(--cc-rule);
  text-decoration: none; font-size: 0.875rem; font-weight: 500;
  margin-left: -1px;
}
.page-item:first-child .page-link { border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); margin-left: 0; }
.page-item:last-child .page-link { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }
.page-link:hover { background: var(--cc-cream); color: var(--cc-accent); }
.page-item.active .page-link { background: var(--cc-ink); color: var(--cc-paper); border-color: var(--cc-ink); z-index: 1; }
.page-item.disabled .page-link { color: var(--cc-mute-2); pointer-events: none; }

/* ── Progress ──────────────────────────────────────────────── */
.progress {
  display: flex; height: 0.5rem;
  background: var(--cc-soft); border-radius: 9999px; overflow: hidden;
}
.progress-bar {
  display: flex; align-items: center; justify-content: center;
  background: var(--cc-ink); color: var(--cc-paper);
  font-size: 0.6875rem; text-align: center;
  transition: width .3s ease;
}
.progress-bar.bg-accent { background: var(--cc-accent); }
.progress-bar.bg-success { background: var(--cc-success); }
.progress-bar.bg-danger { background: var(--cc-danger); }
.progress-bar.bg-warning { background: var(--cc-warning); }
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
@keyframes cc-progress-anim { from { background-position: 1rem 0; } to { background-position: 0 0; } }
.progress-bar-animated { animation: cc-progress-anim 1s linear infinite; }

/* ── Spinners ──────────────────────────────────────────────── */
@keyframes cc-spinner { to { transform: rotate(360deg); } }
@keyframes cc-grow { 0% { transform: scale(0); } 50%, 100% { transform: scale(1); opacity: 0; } }
.spinner-border {
  display: inline-block; width: 1.5rem; height: 1.5rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: cc-spinner .75s linear infinite;
}
.spinner-grow {
  display: inline-block; width: 1.5rem; height: 1.5rem;
  background: currentColor; border-radius: 50%;
  opacity: 0; animation: cc-grow .75s linear infinite;
}
.spinner-border-sm, .spinner-grow-sm { width: 1rem; height: 1rem; border-width: 1.5px; }

/* ── List group ────────────────────────────────────────────── */
.list-group {
  display: flex; flex-direction: column;
  border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius);
  overflow: hidden; padding: 0; margin: 0; list-style: none;
}
.list-group-item {
  display: flex; align-items: center;
  padding: 0.875rem 1.125rem;
  background: var(--cc-paper);
  border-bottom: 1px solid var(--cc-rule);
  color: var(--cc-ink); font-size: 0.9375rem;
  text-decoration: none;
}
.list-group-item:last-child { border-bottom: 0; }
.list-group-item.active { background: var(--cc-ink); color: var(--cc-paper); }
.list-group-item-action:hover { background: var(--cc-cream); }
.list-group-flush { border: 0; border-radius: 0; }
.list-group-flush > .list-group-item { border-left: 0; border-right: 0; }

/* ── Dropdown (CSS-only visual + focus-within open) ────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle::after {
  content: ''; display: inline-block; margin-left: 0.5rem;
  width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  min-width: 10rem; padding: 0.375rem;
  background: var(--cc-paper); border: 1px solid var(--cc-rule);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--cc-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  list-style: none; margin: 0;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu,
.dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
  display: block; width: 100%; padding: 0.5rem 0.75rem;
  font-size: 0.9375rem; color: var(--cc-ink);
  text-decoration: none; border-radius: var(--bs-border-radius-sm);
  cursor: pointer; background: none; border: 0; text-align: left;
}
.dropdown-item:hover { background: var(--cc-cream); color: var(--cc-accent); }
.dropdown-divider { height: 1px; background: var(--cc-rule); margin: 0.375rem 0; }
.dropdown-header { padding: 0.375rem 0.75rem; font-family: var(--cc-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); }

/* ── Accordion ─────────────────────────────────────────────── */
.accordion { border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--cc-rule); background: var(--cc-paper); }
.accordion-item:last-child { border-bottom: 0; }
.accordion-button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem 1.25rem;
  background: var(--cc-paper); border: 0; cursor: pointer;
  font-family: var(--cc-font-body); font-size: 1rem; font-weight: 500;
  color: var(--cc-ink); text-align: left;
}
.accordion-button:hover { background: var(--cc-cream); }
.accordion-button::after {
  content: ''; display: inline-block;
  width: 0.625rem; height: 0.625rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.accordion-button:not(.collapsed)::after { transform: rotate(-135deg); }
.accordion-body { padding: 0 1.25rem 1.25rem; color: var(--cc-mute); }
.accordion-collapse.collapse { display: none; }
.accordion-collapse.collapse.show { display: block; }

/* ── Modal (visual structure only — no JS) ─────────────────── */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; display: none; overflow: auto; padding: 1.5rem; background: color-mix(in oklab, var(--cc-ink) 60%, transparent); }
.modal.show { display: flex; align-items: center; justify-content: center; }
.modal-dialog { max-width: 540px; width: 100%; }
.modal-content { background: var(--cc-paper); border-radius: var(--bs-border-radius-lg); border: 1px solid var(--cc-rule); box-shadow: var(--cc-shadow-lg); overflow: hidden; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--cc-rule); }
.modal-title { font-family: var(--cc-font-display); font-size: 1.5rem; margin: 0; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--cc-rule); display: flex; justify-content: flex-end; gap: 0.5rem; }
.btn-close {
  background: none; border: 0; cursor: pointer;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  color: var(--cc-mute); display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1;
}
.btn-close::before { content: '×'; }
.btn-close:hover { background: var(--cc-soft); color: var(--cc-ink); }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  display: flex; flex-direction: column;
  max-width: 350px; width: 100%;
  background: var(--cc-paper);
  border: 1px solid var(--cc-rule);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
}
.toast-header { display: flex; align-items: center; padding: 0.625rem 0.875rem; background: var(--cc-cream); border-bottom: 1px solid var(--cc-rule); font-size: 0.8125rem; }
.toast-header strong { margin-right: auto; font-weight: 600; }
.toast-body { padding: 0.875rem; font-size: 0.9375rem; }

/* ── Tooltip / popover (visual only) ───────────────────────── */
.tooltip { position: absolute; z-index: 1080; font-size: 0.8125rem; }
.tooltip-inner { background: var(--cc-ink); color: var(--cc-paper); padding: 0.375rem 0.625rem; border-radius: 6px; max-width: 220px; }
.popover { position: absolute; z-index: 1070; max-width: 280px; background: var(--cc-paper); border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius); box-shadow: var(--cc-shadow); font-size: 0.875rem; }
.popover-header { padding: 0.625rem 0.875rem; background: var(--cc-cream); border-bottom: 1px solid var(--cc-rule); font-weight: 600; font-size: 0.875rem; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.popover-body { padding: 0.75rem 0.875rem; color: var(--cc-ink); }

/* ── Tables ────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; color: var(--cc-ink); }
.table th, .table td { padding: 0.75rem 0.875rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--cc-rule); }
.table thead th { background: var(--cc-cream); border-bottom: 1px solid var(--cc-rule); border-top: 0; font-family: var(--cc-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); font-weight: 500; }
.table-striped tbody tr:nth-of-type(odd) { background: color-mix(in oklab, var(--cc-cream) 50%, var(--cc-paper)); }
.table-hover tbody tr:hover { background: var(--cc-cream); }
.table-bordered { border: 1px solid var(--cc-rule); }
.table-bordered th, .table-bordered td { border: 1px solid var(--cc-rule); }
.table-borderless th, .table-borderless td { border: 0; }

/* ── Utilities: display ────────────────────────────────────── */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
}

/* ── Utilities: flex ───────────────────────────────────────── */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }

/* ── Utilities: gap, spacing ───────────────────────────────── */
.gap-0 { gap: 0 !important; } .gap-1 { gap: .25rem !important; } .gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } .gap-5 { gap: 2rem !important; }
.gap-6 { gap: 3rem !important; } .gap-7 { gap: 4.5rem !important; } .gap-8 { gap: 6rem !important; }

.m-0 { margin: 0 !important; }   .m-1 { margin: .25rem !important; } .m-2 { margin: .5rem !important; }
.m-3 { margin: 1rem !important; } .m-4 { margin: 1.5rem !important; } .m-5 { margin: 2rem !important; }
.m-6 { margin: 3rem !important; } .m-7 { margin: 4.5rem !important; } .m-8 { margin: 6rem !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 2rem !important; }
.mt-6 { margin-top: 3rem !important; } .mt-7 { margin-top: 4.5rem !important; } .mt-8 { margin-top: 6rem !important; } .mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 2rem !important; }
.mb-6 { margin-bottom: 3rem !important; } .mb-7 { margin-bottom: 4.5rem !important; } .mb-8 { margin-bottom: 6rem !important; } .mb-auto { margin-bottom: auto !important; }
.ms-0 { margin-left: 0 !important; } .ms-1 { margin-left: .25rem !important; } .ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; } .ms-4 { margin-left: 1.5rem !important; } .ms-5 { margin-left: 2rem !important; }
.ms-6 { margin-left: 3rem !important; } .ms-7 { margin-left: 4.5rem !important; } .ms-8 { margin-left: 6rem !important; } .ms-auto { margin-left: auto !important; }
.me-0 { margin-right: 0 !important; } .me-1 { margin-right: .25rem !important; } .me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; } .me-4 { margin-right: 1.5rem !important; } .me-5 { margin-right: 2rem !important; }
.me-6 { margin-right: 3rem !important; } .me-7 { margin-right: 4.5rem !important; } .me-8 { margin-right: 6rem !important; } .me-auto { margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-left:.25rem !important; margin-right:.25rem !important; } .mx-2 { margin-left:.5rem !important; margin-right:.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-4 { margin-left:1.5rem !important; margin-right:1.5rem !important; } .mx-5 { margin-left:2rem !important; margin-right:2rem !important; }
.mx-6 { margin-left:3rem !important; margin-right:3rem !important; } .mx-7 { margin-left:4.5rem !important; margin-right:4.5rem !important; } .mx-8 { margin-left:6rem !important; margin-right:6rem !important; } .mx-auto { margin-left:auto !important; margin-right:auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top:.25rem !important; margin-bottom:.25rem !important; } .my-2 { margin-top:.5rem !important; margin-bottom:.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top:1.5rem !important; margin-bottom:1.5rem !important; } .my-5 { margin-top:2rem !important; margin-bottom:2rem !important; }
.my-6 { margin-top:3rem !important; margin-bottom:3rem !important; } .my-7 { margin-top:4.5rem !important; margin-bottom:4.5rem !important; } .my-8 { margin-top:6rem !important; margin-bottom:6rem !important; }

.p-0 { padding: 0 !important; }   .p-1 { padding: .25rem !important; } .p-2 { padding: .5rem !important; }
.p-3 { padding: 1rem !important; } .p-4 { padding: 1.5rem !important; } .p-5 { padding: 2rem !important; }
.p-6 { padding: 3rem !important; } .p-7 { padding: 4.5rem !important; } .p-8 { padding: 6rem !important; }
.pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: .25rem !important; } .pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pt-5 { padding-top: 2rem !important; }
.pt-6 { padding-top: 3rem !important; } .pt-7 { padding-top: 4.5rem !important; } .pt-8 { padding-top: 6rem !important; }
.pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: .25rem !important; } .pb-2 { padding-bottom: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 2rem !important; }
.pb-6 { padding-bottom: 3rem !important; } .pb-7 { padding-bottom: 4.5rem !important; } .pb-8 { padding-bottom: 6rem !important; }
.ps-0 { padding-left: 0 !important; } .ps-3 { padding-left: 1rem !important; } .ps-4 { padding-left: 1.5rem !important; } .ps-5 { padding-left: 2rem !important; } .ps-6 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; } .pe-3 { padding-right: 1rem !important; } .pe-4 { padding-right: 1.5rem !important; } .pe-5 { padding-right: 2rem !important; } .pe-6 { padding-right: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-2 { padding-left:.5rem !important; padding-right:.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-4 { padding-left:1.5rem !important; padding-right:1.5rem !important; } .px-5 { padding-left:2rem !important; padding-right:2rem !important; }
.px-6 { padding-left:3rem !important; padding-right:3rem !important; } .px-7 { padding-left:4.5rem !important; padding-right:4.5rem !important; } .px-8 { padding-left:6rem !important; padding-right:6rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-2 { padding-top:.5rem !important; padding-bottom:.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top:1.5rem !important; padding-bottom:1.5rem !important; } .py-5 { padding-top:2rem !important; padding-bottom:2rem !important; }
.py-6 { padding-top:3rem !important; padding-bottom:3rem !important; } .py-7 { padding-top:4.5rem !important; padding-bottom:4.5rem !important; } .py-8 { padding-top:6rem !important; padding-bottom:6rem !important; }

/* Shadow xl — extends the elevation ramp without doubling */
.shadow-xl { box-shadow: 0 24px 60px rgba(40,30,20,.12), 0 60px 120px -30px rgba(40,30,20,.18) !important; }

/* ── Utilities: text & color ──────────────────────────────── */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; letter-spacing: 0.06em; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-nowrap { white-space: nowrap !important; }
.text-wrap { white-space: normal !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-light  { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fst-italic { font-style: italic !important; }
.fs-1 { font-size: 2.75rem !important; } .fs-2 { font-size: 2.25rem !important; } .fs-3 { font-size: 1.875rem !important; }
.fs-4 { font-size: 1.5rem !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; }
.font-monospace { font-family: var(--cc-font-mono) !important; }
.font-display { font-family: var(--cc-font-display) !important; }

.text-primary   { color: var(--cc-ink) !important; }
.text-secondary { color: var(--cc-mute) !important; }
.text-success   { color: var(--cc-success) !important; }
.text-danger    { color: var(--cc-danger) !important; }
.text-warning   { color: var(--cc-warning) !important; }
.text-info      { color: var(--cc-info) !important; }
.text-dark      { color: var(--cc-ink) !important; }
.text-light     { color: var(--cc-cream) !important; }
.text-white     { color: #fff !important; }
.text-muted     { color: var(--cc-mute) !important; }
.text-accent    { color: var(--cc-accent) !important; }
.text-body      { color: var(--cc-ink) !important; }

.bg-primary   { background-color: var(--cc-ink) !important; color: var(--cc-paper); }
.bg-secondary { background-color: var(--cc-mute) !important; color: var(--cc-paper); }
.bg-success   { background-color: var(--cc-success) !important; color: var(--cc-paper); }
.bg-danger    { background-color: var(--cc-danger) !important; color: var(--cc-paper); }
.bg-warning   { background-color: var(--cc-warning) !important; color: var(--cc-ink); }
.bg-info      { background-color: var(--cc-info) !important; color: var(--cc-paper); }
.bg-light     { background-color: var(--cc-cream) !important; }
.bg-dark      { background-color: var(--cc-ink) !important; color: var(--cc-paper); }
.bg-white     { background-color: #fff !important; }
.bg-body      { background-color: var(--cc-paper) !important; }
.bg-accent    { background-color: var(--cc-accent-2) !important; color: var(--cc-paper); }
.bg-paper     { background-color: var(--cc-paper) !important; }
.bg-cream     { background-color: var(--cc-cream) !important; }

/* ── Utilities: borders, radius, shadows ──────────────────── */
.border { border: 1px solid var(--cc-rule) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--cc-rule) !important; }
.border-bottom { border-bottom: 1px solid var(--cc-rule) !important; }
.border-start { border-left: 1px solid var(--cc-rule) !important; }
.border-end { border-right: 1px solid var(--cc-rule) !important; }
.border-accent { border-color: var(--cc-accent) !important; }
.border-dark { border-color: var(--cc-ink) !important; }
.rounded { border-radius: var(--bs-border-radius) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--bs-border-radius-sm) !important; }
.rounded-2 { border-radius: var(--bs-border-radius) !important; }
.rounded-3 { border-radius: var(--bs-border-radius-lg) !important; }
.rounded-4 { border-radius: var(--bs-border-radius-xl) !important; }
.rounded-pill { border-radius: 9999px !important; }
.rounded-circle { border-radius: 50% !important; }
.shadow-sm { box-shadow: var(--cc-shadow-sm) !important; }
.shadow    { box-shadow: var(--cc-shadow) !important; }
.shadow-lg { box-shadow: var(--cc-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* ── Utilities: sizing & position ─────────────────────────── */
.w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } .w-auto { width: auto !important; }
.h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; }
.vh-100 { height: 100vh !important; } .vw-100 { width: 100vw !important; }

.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0 !important; } .bottom-0 { bottom: 0 !important; } .start-0 { left: 0 !important; } .end-0 { right: 0 !important; }

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.opacity-0 { opacity: 0 !important; } .opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; } .opacity-75 { opacity: 0.75 !important; } .opacity-100 { opacity: 1 !important; }

.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; }

/* ── Figure ────────────────────────────────────────────────── */
.figure { display: inline-block; margin: 0 0 1rem; }
.figure-img { margin-bottom: 0.5rem; line-height: 1; border-radius: var(--bs-border-radius); }
.figure-caption { font-size: 0.875rem; color: var(--cc-mute); }

/* ── Object fit ────────────────────────────────────────────── */
.object-fit-cover { object-fit: cover !important; }
.object-fit-contain { object-fit: contain !important; }

/* ── Ratio helpers (16:9, 4:3, 1:1, 21:9) ─────────────────── */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ''; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-1x1  { --bs-aspect-ratio: 100%; }
.ratio-4x3  { --bs-aspect-ratio: 75%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }
.ratio-21x9 { --bs-aspect-ratio: 42.857%; }