/* Page-level CSS for the ported artboards.
   Everything visual comes from the Classical design system in styles.css —
   this file only carries what the canvas runtime used to do at run time:
   the hover rules that lived in style-hover attributes, the <picture>
   wrapper, and the skip link. No colours, fonts or sizes are invented here. */

/* <picture> must not introduce a box of its own — the artboard styles the
   <img> as a direct child of its <figure>. */
.pic { display: contents; }

/* Keyboard-only jump to the content, styled from the system's tokens. */
.skip-link {
  position: absolute; left: var(--space-2); top: calc(var(--space-2) * -6);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg); color: var(--color-accent-700);
  border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  font-family: var(--font-heading); font-size: 14px; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus-visible { top: var(--space-2); }

/* Reveal targets must stay visible without JavaScript — reveal.js sets the
   hidden start state itself, exactly as the canvas runtime did. */

/* ── WCAG AA corrections to the design system ────────────────────────────────
   styles.css is a verbatim copy of the Classical system, so the places where
   it misses AA are corrected here instead of edited there — one visible list
   of deliberate departures. Each is the smallest change that clears 4.5:1.

   Accent text: --color-accent on the ground is 3.02:1, which the system's own
   readme calls "enough for icons, large text and interface chrome, not for
   body copy". At interface sizes that is not enough, so labels take
   --color-accent-700 (5.97:1). Borders stay --color-accent — they are
   graphics, where 3:1 is the requirement and 3.02 meets it. */
.btn-primary,
.btn-ghost,
.tag-outline,
.card-kicker,
.nav a:hover,
.nav a[aria-current='page'] { color: var(--color-accent-700); }

/* Muted ink: 50%, 55% and 60% of --color-text give 3.15, 3.63 and 4.21:1.
   63% is where AA starts; 65% (4.92:1) leaves a margin and still reads lighter
   than the 70% and 78% tiers the system keeps above it. */
figcaption,
.text-muted,
.card-meta,
.table th { color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* ── Touch targets and legibility under 900px ───────────────────────────────
   The artboards' own mobile rules handle layout; these only make things
   easier to hit and read on a phone. Vertical padding only, so nothing
   shifts horizontally, and nothing here applies on desktop. */
@media (max-width: 900px) {
  /* Nav links set 22px tall and footer links 16px — inside WCAG 2.2's
     spacing exception, but well under the 44px Apple and Material ask for a
     thumb. 22 + 2×11 = 44. Flex items, so the padding is real height. */
  .nav a:not(.btn) { padding-block: 11px; }
  /* The artboard's 10px row-gap was spacing 22px links; the padding does
     that now, and without it the wrapped nav stays under 160px tall. */
  nav.nav { row-gap: 0 !important; }   /* outranks the artboard's own !important rule */
  footer a { padding-block: 12px; }
  .btn { min-height: 44px; }
  /* 11px tags are the smallest text on the site; 12px is the usual floor. */
  .tag { font-size: 12px; }
}

/* ── Hover states lifted from style-hover attributes ─────────────────────── */

.hv-1:hover { color:var(--color-accent-700); }
.hv-2:hover { background:rgba(231,200,138,.14); }
.hv-3:hover { background:rgba(246,243,238,.12); }
.hv-4:hover { background:color-mix(in srgb,var(--color-accent) 6%,transparent); }