/* ============================================================================
   Draco K9 Academy — base, shell and components.

   Register: premium consumer. The rules that actually produce it —

     1. Air first. Sections are enormous; content is centred in a narrow
        measure. If a screen feels crowded, remove something.
     2. Type carries the page. Headlines are very large and tightly tracked;
        body copy stays small and grey beneath them.
     3. Few words. A heading and one line. Detail lives on the page it belongs
        to, never on the front door.
     4. Blue is only for links and the primary action. Nothing else is blue.
     5. Generous radii, hairline borders, almost no shadow.

   Navigation is a thin translucent top bar, because a centred composition of
   this kind needs the horizontal axis clear. (The left rail belonged to the
   previous direction and is gone.)

   Text does not wrap unless it must: anything atomic is `nowrap`.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
main { flex: 1 0 auto; }

/* --------------------------------------------------------------- header --- */
/* Opaque, not translucent. A 72%-transparent bar let the dark band underneath
   bleed through as it scrolled, which is exactly what made the wordmark fade
   out. It now stays solid and keeps a hairline under it. */
.site-header {
  position: sticky; top: 0; z-index: 80;
  min-height: var(--header-h);
  display: flex; align-items: center;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(19, 27, 43, 0.04), 0 6px 20px -12px rgba(19, 27, 43, 0.20);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 2px rgba(19, 27, 43, 0.06), 0 10px 28px -14px rgba(19, 27, 43, 0.30); }
.site-header .container { display: flex; align-items: center; gap: 2rem; max-width: var(--container-wide); }

/* The wordmark is the loudest thing in the bar, by some distance. */
.brand { --brand-size: 1.16rem;
  display: inline-flex; align-items: center; gap: 0.72rem; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand:hover { color: var(--ink); }
/* Portrait artwork: fix the HEIGHT and let the width follow, or the shield
   gets squashed into a square. */
.brand-mark { height: calc(var(--brand-size, 1.16rem) * 2.48); width: auto; flex: 0 0 auto; display: block;
  /* Ties the shield to the same knob as the wordmark, so the whole lockup
     scales as one thing rather than drifting apart per context. */ }
/* The lockup: DRACO K9 over a wide-tracked ACADEMY, both flush left and both
   ending on the same right edge, so the two lines form one rectangle beside
   the shield.
   The whole thing is driven by --brand-size, and every other value is in `em`
   of it. That matters: the tracking that makes ACADEMY span exactly the width
   of DRACO K9 is a RATIO, so any context that wants a bigger mark (the footer)
   changes one number and the alignment survives. Hard-coding a px size per
   context is what left the footer with mixed-case tracking on a caps wordmark.
   0.795em was measured, not guessed — see the note above .footer-brand. */
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 4px; }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--brand-size, 1.16rem);
  /* Caps want air between them; the negative tracking tuned for "Draco K9"
     made the all-caps setting look jammed. */
  letter-spacing: 0.015em; color: var(--ink); white-space: nowrap;
}
.brand-sub {
  font-size: calc(var(--brand-size, 1.16rem) * 0.535); font-weight: 600;
  letter-spacing: 0.795em;
  margin-right: -0.795em;            /* cancel the trailing letter-space */
  color: var(--grey-500); white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav a {
  color: var(--ink-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; padding: 0.5rem 0.85rem; border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--surface-3); }
.nav a.is-active { color: var(--blue-600); font-weight: 600; background: var(--accent-soft); }
 /* `.nav a` (0,0,1,1) out-specifies `.btn` (0,0,1,0), so without these the
   primary call to action inherits the nav's grey and renders unreadable on
   its own blue fill. This has regressed twice; do not remove it. */
.nav a.btn {
  margin-left: 0.6rem; color: var(--btn-fg);
  padding: 0.6rem 1.35rem; font-weight: 600; font-size: var(--fs-sm);
  background: var(--blue-600);
  box-shadow: 0 1px 2px rgba(23, 60, 166, 0.24), 0 6px 16px -6px rgba(23, 60, 166, 0.45);
}
.nav a.btn:hover {
  color: var(--btn-fg); background: var(--blue-700);
  box-shadow: 0 1px 2px rgba(23, 60, 166, 0.3), 0 10px 22px -6px rgba(23, 60, 166, 0.55);
}
.nav-group { display: none; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--ink); padding: 0.42rem 0.5rem; cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--canvas); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.5rem; margin-left: 0; display: none;
    font-size: var(--fs-body);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.95rem 0; border-bottom: 1px solid var(--line-faint); font-size: 1rem; }
  .nav .btn { margin-top: 1.25rem; justify-content: center; border-bottom: 0; }
  .nav .theme-toggle { justify-content: flex-start; gap: 0.6rem; padding: 0.95rem 0; }
  .nav .theme-toggle .theme-label { display: inline; }
}

/* ----------------------------------------------------------- typography --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  margin: 0 0 0.5em;
  text-wrap: pretty;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.024em; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.012em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Links are never underlined. Emphasis comes from colour and weight. */
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: none; }

strong { font-weight: 600; color: var(--ink); }
small  { font-size: var(--fs-sm); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.88em; }

.display { font-size: var(--fs-display); line-height: 1.03; letter-spacing: -0.038em; font-weight: 700; }
.lead    { font-size: var(--fs-lead); color: var(--ink-muted); line-height: 1.4; letter-spacing: -0.01em; }
.muted   { color: var(--ink-muted); }
.faint   { color: var(--ink-faint); }
.small   { font-size: var(--fs-sm); }
.xs      { font-size: var(--fs-xs); }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }
.tnum    { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); color: var(--blue);
  margin: 0 0 1rem; white-space: nowrap;
}

/* --------------------------------------------------------------- layout --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: var(--container-narrow); }
.container.wide   { max-width: var(--container-wide); }

.section     { padding-block: var(--sec-y); }
.section.sm  { padding-block: var(--sec-y-sm); }
.section.alt { background: var(--canvas-alt); }
.section.ruled { border-top: 1px solid var(--line); }
.section.tight-top { padding-top: var(--sec-y-sm); }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 0.85rem; } .gap-3 { gap: 1.35rem; } .gap-4 { gap: 2rem; }
.grow { flex: 1 1 auto; min-width: 0; }

.grid { display: grid; gap: 1.25rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Centred by default in this register. */
.section-head { margin: 0 auto 2rem; max-width: 40ch; text-align: center; }
.section-head p { color: var(--ink-muted); font-size: var(--fs-lead); margin: 0; }
.section-head.left { margin-inline: 0; text-align: left; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--canvas);
  padding: 0.7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------- buttons --- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: 0.75rem 1.35rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { --btn-bg: var(--accent-hover); color: var(--btn-fg); }

.btn.secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn.secondary:hover { --btn-bg: var(--surface-3); --btn-bd: var(--line-strong); }
.btn.ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn.ghost:hover { --btn-bg: var(--surface-3); }
.btn.on-accent { --btn-bg: var(--canvas); --btn-fg: var(--ink); }
.btn.danger  { --btn-bg: var(--bad); --btn-fg: #fff; }
.btn.success { --btn-bg: var(--ok); --btn-fg: #fff; }

.btn.lg { font-size: 0.92rem; padding: 0.78rem 1.5rem; }
.btn.sm { font-size: var(--fs-xs); padding: 0.42rem 0.95rem; }
.btn.block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.4; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.section-head + .btn-row, .btn-row.center { justify-content: center; }

/* The blue chevron link. The other half of this register's action language. */
.link-action {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--fs-lead); font-weight: 400; color: var(--accent-text);
  text-decoration: none; white-space: nowrap;
}
.link-action:hover { color: var(--accent-hover); }
.link-action .icon { width: 0.85em; height: 0.85em; stroke-width: 2.2; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-xs);
}

/* ---------------------------------------------------------------- cards --- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
.card.pad-lg { padding: 2.25rem; }
.card.flush  { padding: 0; overflow: hidden; }
.card.quiet  { background: var(--surface-2); }

a.card { text-decoration: none; color: inherit; display: block; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.card:hover { border-color: var(--line-strong); transform: translateY(-2px); color: inherit; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.card-head h3, .card-head h2 { margin: 0; }
.card-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; }
.panel-head .ph-right { margin-left: auto; font-weight: 400; color: var(--ink-muted); }
.panel-body { padding: 1.75rem 1.5rem; }
.panel-body.flush { padding: 0; }

/* --------------------------------------------------------------- badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-xs); font-weight: 500;
  padding: 0.22rem 0.7rem; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-muted);
  border: 1px solid transparent; white-space: nowrap;
}
.badge.ok      { background: var(--ok-soft);   color: var(--ok-text); }
.badge.warn    { background: var(--warn-soft); color: var(--warn-text); }
.badge.bad     { background: var(--bad-soft);  color: var(--bad-text); }
.badge.info    { background: var(--info-soft); color: var(--info-text); }
.badge.accent  { background: var(--accent-soft); color: var(--accent-text); }
.badge.outline { background: transparent; border-color: var(--line-strong); color: var(--ink-muted); }
.badge.lg { font-size: var(--fs-sm); padding: 0.3rem 0.85rem; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ------------------------------------------------------------- progress --- */
.meter { --meter-h: 4px; height: var(--meter-h); background: var(--inset); border-radius: var(--r-pill); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--blue); border-radius: inherit; transition: width 600ms var(--ease); }
.meter.ok > span { background: var(--ok); }
.meter.sm { --meter-h: 3px; }
.meter.lg { --meter-h: 8px; }

.meter-row { display: flex; align-items: center; gap: 1rem; }
.meter-row .meter { flex: 1 1 auto; }
.meter-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); font-size: var(--fs-sm); flex: 0 0 auto; white-space: nowrap; }

.ring { --pct: 0; --size: 116px; width: var(--size); height: var(--size); position: relative; flex: 0 0 auto; }
.ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--pct) * 1%), var(--inset) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 7px), #000 calc(50% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(50% - 7px), #000 calc(50% - 6px));
}
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-label b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.ring-label span { display: block; font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 0.3rem; white-space: nowrap; }

.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat span { font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; }

/* ---------------------------------------------------------------- forms --- */
label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.field { margin-bottom: 1.25rem; }
.field .hint { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 0.4rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%; font-family: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 0.75rem 0.95rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--accent-ring); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1.25rem; }

.check { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 400; color: var(--ink-body); font-size: var(--fs-sm); }
.check input { width: auto; margin-top: 0.22rem; accent-color: var(--blue); flex: 0 0 auto; }

.segmented { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.segmented label {
  flex: 1 1 0; margin: 0; text-align: center; cursor: pointer; white-space: nowrap;
  padding: 0.55rem 0.4rem; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-muted); background: var(--surface); border-right: 1px solid var(--line);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented label:last-child { border-right: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--blue); color: #fff; font-weight: 600; }
.segmented label:hover:not(:has(input:checked)) { background: var(--surface-3); color: var(--ink); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }

/* --------------------------------------------------------------- alerts --- */
.alert {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1rem 1.25rem; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-sm); color: var(--ink-body); margin-bottom: 1.5rem;
}
.alert strong { display: block; margin-bottom: 0.15rem; }
.alert.ok   { background: var(--ok-soft);   border-color: transparent; }
.alert.warn { background: var(--warn-soft); border-color: transparent; }
.alert.bad  { background: var(--bad-soft);  border-color: transparent; }
.alert.info { background: var(--info-soft); border-color: transparent; }
/* An accent-blue link on the pale blue alert ground is only just legible; the
   deeper blue keeps it clearly a link and clearly readable. */
.alert a { color: var(--blue-800); font-weight: 600; }
.alert a:hover { color: var(--blue-900); }
.alert-icon { flex: 0 0 auto; margin-top: 0.1rem; }

/* --------------------------------------------------------------- tables --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line-faint); }
table.data thead th { background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------- empty state --- */
.empty { text-align: center; padding: 3.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); color: var(--ink-muted); }
.empty h3 { color: var(--ink); margin-bottom: 0.5rem; }
.empty p { max-width: 46ch; margin-inline: auto; }
.empty .btn-row { justify-content: center; margin-top: 1.6rem; }
.empty-icon { color: var(--ink-faint); margin: 0 auto 1.1rem; }

/* ---------------------------------------------------------------- prose --- */
.prose { font-size: 1.06rem; line-height: 1.72; color: var(--ink-body); }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { margin-top: 2.2em; margin-bottom: 0.5em; }
.prose h3 { margin-top: 1.9em; margin-bottom: 0.45em; }
.prose ul, .prose ol { padding-left: 1.35em; margin-block: 1.2em; }
.prose li + li { margin-top: 0.55em; }
.prose li::marker { color: var(--ink-faint); }
.prose blockquote { margin: 1.9em 0; padding: 0.2em 0 0.2em 1.3em; border-left: 3px solid var(--line-strong); color: var(--ink-muted); }
.prose img { border-radius: var(--r-lg); margin-block: 2em; }
.prose a { font-weight: 500; }

/* ----------------------------------------------------------------- misc --- */
.divider { height: 1px; background: var(--line); margin-block: 3rem; }
.breadcrumb { font-size: var(--fs-xs); color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.breadcrumb a { color: var(--ink-muted); white-space: nowrap; }
.breadcrumb .sep { opacity: 0.5; }

.avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--surface-3); border: 1px solid var(--line); }
.avatar.lg { width: 64px; height: 64px; }
.avatar.xl { width: 96px; height: 96px; }
.avatar-fallback { display: grid; place-content: center; font-family: var(--font-display); font-weight: 700; color: var(--ink-muted); background: var(--surface-3); }

.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; stroke-width: 1.7; }
.icon-lg { width: 1.5em; height: 1.5em; }

.theme-toggle { background: none; border: 0; color: var(--ink); opacity: 0.85; cursor: pointer; padding: 0.3rem; display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-size: var(--fs-xs); }
.theme-toggle:hover { opacity: 1; }
.theme-label { display: none; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
}

/* --------------------------------------------------------------- footer --- */
.site-footer { background: var(--grey-900); color: #aab6cc; margin-top: auto; padding-block: 3rem 1.75rem; }
.site-footer .container { max-width: var(--container-wide); }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* One knob. Both lines scale together, so ACADEMY stays flush with DRACO K9
   here exactly as it does in the header — do NOT re-declare font-size or
   letter-spacing on .brand-name below, that is what broke the alignment. */
.footer-brand .brand { --brand-size: 1.28rem; }
.footer-brand .brand-name { color: #ffffff; }
.footer-brand .brand-sub { color: var(--blue-300); }
.footer-tag { margin: 1rem 0 1.25rem; font-size: var(--fs-sm); color: #8f9db6; max-width: 34ch; }

.site-footer h4 {
  font-size: var(--fs-xs); font-weight: 700; color: #ffffff;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; white-space: nowrap;
}
.site-footer a { color: #aab6cc; font-size: var(--fs-sm); }
.site-footer a:hover { color: #ffffff; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }

.social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social-row span {
  display: inline-grid; place-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255,255,255,0.08); color: #d5dded;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-row span:hover { background: var(--blue-600); color: #fff; }
.social-icon { width: 17px; height: 17px; display: block; }

.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  font-size: var(--fs-xs); color: #7d8aa3;
}
.footer-bottom a { font-size: var(--fs-xs); }
.footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }