/* Demo kit: base. Reset, accessibility helpers, reveal, reader overlay.
   Every demo links this first, then menu.css, then its own stylesheet.
   Theme it with custom properties on :root in the demo's own CSS. Nothing here sets a colour, a font or a
   radius that a demo cannot override, and nothing here draws a header. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.dm-lock, html.rd-lock { overflow: hidden; }
body { margin: 0; }
img, video, canvas, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: max(16px, 1em); }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; }

/* Anything a menu link or tab can land on stops below a fixed header. Set --hdr-h in the demo. */
section[id], [data-anchor], [role="tabpanel"][id] { scroll-margin-top: var(--hdr-h, 0px); }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; padding: 12px 18px; background: #fff; color: #000; border-radius: 999px; font: 600 15px/1 system-ui, sans-serif; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* Reveal: a scroll sweep in kit.js adds .in. No JS and the noscript rule in the template shows everything. */
.rv { opacity: 0; transform: translateY(var(--rv-y, 18px)); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--rv-d, 0s); }
.rv.in { opacity: 1; transform: none; }

/* Hero video: the kit only attaches sources when the viewport, motion and data settings allow it. */
[data-hero-video] { opacity: 0; transition: opacity .9s ease; }
[data-hero-video].is-playing { opacity: 1; }
.vt { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .42); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vt svg { width: 16px; height: 16px; fill: currentColor; }
.vt[aria-pressed="true"] .vt-pause, .vt:not([aria-pressed="true"]) .vt-play { display: none; }
.vt[hidden] { display: none !important; }

/* Horizontal drag scroller (data-hscroll). Touch scrolls natively; a mouse can drag. */
[data-hscroll] { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
[data-hscroll]::-webkit-scrollbar { display: none; }
[data-hscroll].is-drag { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
[data-hscroll].is-drag a, [data-hscroll].is-drag button { pointer-events: none; }

/* Reader: the kit builds this overlay the first time a [data-read] link is used. */
.rd { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); visibility: hidden; pointer-events: none; }
.rd[data-open] { visibility: visible; pointer-events: auto; }
.rd__scrim { position: absolute; inset: 0; background: var(--rd-scrim, rgba(8, 10, 12, .7)); opacity: 0; transition: opacity .35s ease; }
.rd[data-open] .rd__scrim { opacity: 1; }
.rd__sheet { position: relative; width: min(760px, 100%); max-height: min(88vh, 100%); overflow: auto; overscroll-behavior: contain; padding: clamp(28px, 5vw, 64px); background: var(--rd-bg, #fff); color: var(--rd-ink, #111); border-radius: var(--rd-radius, 20px); transform: translateY(24px); opacity: 0; transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .35s ease; }
.rd[data-open] .rd__sheet { transform: none; opacity: 1; }
.rd__close { position: absolute; top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 22px); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 0; background: var(--rd-close-bg, rgba(255, 255, 255, .92)); color: var(--rd-close-ink, #111); box-shadow: 0 4px 20px rgba(0, 0, 0, .25); }
.rd__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rd__scrim, .rd__sheet, [data-hero-video] { transition: none; }
  .rv { opacity: 1; transform: none; }
}