/* Hallmark · genre: modern-minimal · macrostructure: existing academy / workbench / long document · design-system: design.md · designed-as-app */
@import url('./tokens.css');
@import url('./vendor/lenis.css');

html, body { background: var(--color-paper); color: var(--color-ink); overflow-x: clip; }
html { scrollbar-gutter: stable; scroll-padding-top: 5.5rem; }
body { font-family: var(--font-body); }
::selection { background: var(--color-selection); color: var(--color-accent-ink); }
section, header, footer, aside, main, .grid > *, .flex > * { min-width: 0; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; }
[id] { scroll-margin-top: 5.5rem; }

/* Compatibility layer for every existing page, including Alpine class strings. */
[class~="bg-white"], [class~="bg-white/90"], [class~="bg-white/95"],
[class~="bg-white/80"], [class~="bg-white/60"], [class~="bg-white/50"],
[class~="bg-gray-50"], [class~="bg-gray-100"], [class~="bg-gray-50/60"],
[class~="bg-gray-50/50"], [class~="bg-[#f6f4ee]"], [class~="bg-[#fff]"],
[class~="bg-[#ffffff]"] { background-color: var(--color-surface) !important; }
body[class~="bg-[#f6f4ee]"], [class~="bg-[#03040b]"],
main > section, main > header, body > .min-h-screen > header,
[class~="bg-gray-950"], [class~="bg-black"], footer {
  background-color: var(--color-paper) !important;
}
[class~="bg-gray-200"], [class~="bg-gray-300"], [class~="bg-gray-800"],
[class~="bg-gray-900"], [class~="bg-white/10"], [class~="bg-white/15"],
[class~="bg-white/20"] { background-color: var(--color-surface-raised) !important; }
[class~="bg-white/5"], [class~="bg-white/[0.04]"], [class~="bg-white/[0.03]"] {
  background-color: var(--color-surface) !important;
}
[class~="bg-gray-950/90"], [class~="bg-black/95"] { background-color: var(--color-overlay) !important; }
[class~="bg-brand-50"], [class~="bg-brand-100"], [class~="bg-brand-600/10"],
[class~="bg-indigo-50"], [class~="bg-indigo-100"], [class~="bg-blue-50"] {
  background-color: var(--color-accent-soft) !important;
}
[class~="bg-brand-500"], [class~="bg-brand-600"], [class~="bg-brand-700"],
[class~="bg-indigo-600"], [class~="bg-blue-600"], .mx-primary {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-ink) !important;
}
[class~="bg-brand-800"], [class~="bg-brand-900"], [class~="bg-brand-950"] {
  background-color: var(--color-accent-soft) !important;
}
[class*="bg-sky-"], [class*="bg-lime-"], [class*="bg-pink-"],
[class*="bg-orange-"], [class~="bg-[#eef4ff]"] {
  background-color: var(--color-surface) !important;
}
[class~="h-10"][class*="bg-sky-"], [class~="h-10"][class*="bg-lime-"],
[class~="h-10"][class*="bg-pink-"], [class~="h-10"][class*="bg-orange-"] {
  background-color: var(--color-surface-raised) !important;
}
[class*="bg-brand-50/"], [class*="bg-gray-50/"] { background-color: var(--color-surface) !important; }
[class*="bg-emerald-50/"] { background-color: var(--color-success-soft) !important; }
[class~="bg-emerald-300"][href] {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-ink) !important;
}
[class~="text-gray-950"], [class~="text-gray-900"], [class~="text-gray-800"],
[class~="text-black"] { color: var(--color-ink) !important; }
[class~="text-gray-700"], [class~="text-gray-600"], [class~="text-gray-300"] {
  color: var(--color-ink-2) !important;
}
[class~="text-gray-500"], [class~="text-gray-400"], [class~="text-gray-200"] {
  color: var(--color-muted) !important;
}
[class~="text-brand-600"], [class~="text-brand-700"], [class~="text-brand-800"],
[class~="text-brand-500"], [class~="text-indigo-700"], [class~="text-indigo-800"],
[class~="text-blue-600"], [class~="text-blue-700"] { color: var(--color-accent-text) !important; }
[class*="text-sky-"], [class*="text-lime-"], [class*="text-pink-"],
[class*="text-orange-"], [class*="text-cyan-"], [class*="text-purple-"] { color: var(--color-accent-text) !important; }
[class~="bg-brand-600"][class~="text-white"], [class~="bg-brand-700"][class~="text-white"] {
  color: var(--color-accent-ink) !important;
}
[class*="border-gray-"], [class*="border-white/"], [class*="divide-gray-"] > *,
[class*="divide-white/"] > * { border-color: var(--color-rule-soft) !important; }
[class*="ring-gray-"], [class*="ring-white/"] { --tw-ring-color: var(--color-rule); }
[class*="ring-sky-"], [class*="ring-lime-"], [class*="ring-pink-"], [class*="ring-orange-"],
[class*="border-sky-"], [class*="border-lime-"], [class*="border-pink-"], [class*="border-orange-"] { --tw-ring-color: var(--color-rule); border-color: var(--color-rule); }
[class*="ring-brand-"], [class*="border-brand-"] { --tw-ring-color: var(--color-accent-soft); border-color: var(--color-accent-soft); }
[class~="bg-emerald-50"], [class~="bg-green-50"] { background-color: var(--color-success-soft) !important; }
[class~="text-emerald-700"], [class~="text-green-700"] { color: var(--color-success) !important; }
[class~="bg-amber-50"], [class~="bg-yellow-50"] { background-color: var(--color-warning-soft) !important; }
[class~="text-amber-700"], [class~="text-yellow-700"] { color: var(--color-warning) !important; }
[class~="bg-red-50"] { background-color: var(--color-error-soft) !important; }
[class~="text-red-600"], [class~="text-red-700"] { color: var(--color-error) !important; }

/* Solid surfaces and accents; no multicolour gradients or diffuse glow. */
[class*="bg-gradient"], [class*="bg-[radial-gradient"], [class*="bg-[linear-gradient"] {
  background-image: none !important;
  background-color: var(--color-surface) !important;
}
[class*="bg-gradient-to-t"][class*="absolute"] { background-color: var(--color-media-shade) !important; }
[class*="bg-clip-text"], .text-gradient-accent, .accent-script {
  background: none !important; color: var(--color-accent-text) !important;
  -webkit-text-fill-color: var(--color-accent-text);
}
.accent-script { font-family: var(--font-outlier); }
.mx-background-glow { display: none !important; }
main > section[class], main > header[class], footer[class] { background-color: var(--color-paper) !important; }
.mx-scallop { background: var(--color-paper); }
.mx-flow-lines { opacity: 1; }
.mx-flow-lines path { stroke: var(--color-ink); }
.mx-flow-lines circle { fill: var(--color-ink); }
.mx-ribbon { opacity: 0.5; }
.mx-ribbon use { stroke: var(--color-surface-raised); }
.mx-ribbon text { fill: var(--color-accent-text); }
.mx-solid-line path { stroke: var(--color-accent-text); }

.mx-card-tilt { transform: rotate(var(--tilt, 0deg)); box-shadow: none; transition: transform var(--dur-medium) var(--ease-out); }
.group:hover .mx-card-tilt { transform: rotate(0deg) translateY(-3px); box-shadow: none; }


input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select {
  background-color: var(--color-surface-raised); border-color: var(--color-rule) !important;
  color: var(--color-ink); border-radius: var(--radius-input);
}
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { background-color: var(--color-surface-raised); border-color: var(--color-rule); color: var(--color-accent); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--color-accent); }
input::file-selector-button { background: var(--color-surface-hover); color: var(--color-ink); border: var(--rule-width) solid var(--color-rule); }
.prose { --tw-prose-body: var(--color-ink-2); --tw-prose-headings: var(--color-ink); --tw-prose-links: var(--color-accent-text); --tw-prose-bold: var(--color-ink); --tw-prose-counters: var(--color-muted); --tw-prose-bullets: var(--color-muted); --tw-prose-hr: var(--color-rule); --tw-prose-quotes: var(--color-ink); --tw-prose-quote-borders: var(--color-rule); --tw-prose-captions: var(--color-muted); --tw-prose-code: var(--color-ink); --tw-prose-pre-code: var(--color-ink-2); --tw-prose-pre-bg: var(--color-surface); --tw-prose-th-borders: var(--color-rule); --tw-prose-td-borders: var(--color-rule-soft); }
.prose a { color: var(--color-accent-text); }
.prose pre, code { font-family: var(--font-mono); }
button, a { -webkit-tap-highlight-color: transparent; }
button, a[class*="rounded"] { transition-property: color, background-color, border-color, opacity, transform; transition-duration: var(--dur-short); transition-timing-function: var(--ease-out); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus) !important; outline-offset: 4px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:active:not(:disabled), a[class*="rounded"]:active { transform: translateY(1px); }
@media (hover:hover) {
  [class~="hover:bg-white/10"]:hover, [class~="hover:bg-white/20"]:hover,
  [class~="hover:bg-gray-50"]:hover, [class~="hover:bg-gray-100"]:hover,
  [class~="hover:bg-white/5"]:hover { background-color: var(--color-surface-hover) !important; }
  [class~="bg-brand-600"]:hover, [class~="bg-brand-700"]:hover, .mx-primary:hover { background-color: var(--color-accent-hover) !important; }
  [class~="hover:text-gray-900"]:hover, [class~="hover:text-gray-800"]:hover { color: var(--color-ink) !important; }
  [class*="hover:bg-sky-"]:hover, [class*="hover:bg-lime-"]:hover,
  [class*="hover:bg-pink-"]:hover, [class*="hover:bg-orange-"]:hover { background-color: var(--color-surface-hover) !important; }
}
.site-nav { background: var(--color-paper) !important; border-color: var(--color-rule-soft) !important; }
.site-nav a { white-space: nowrap; }
.nav-pill { background: var(--color-accent-soft) !important; transition: left var(--dur-short) var(--ease-out), width var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.mx-collapse { transition: grid-template-rows var(--dur-medium) var(--ease-out); }
.mx-collapse:not(.is-open):not(.mx-hover-panel) > * { visibility: hidden; }
.mx-collapse.is-open > *, .group:hover .mx-hover-panel > * { visibility: visible; }
.mx-collapse.is-open { transition: grid-template-rows var(--dur-medium) var(--ease-out); }
.mx-primary, button[class*="rounded-full"], a[class*="rounded-full"] { white-space: nowrap; }
.mx-primary { color: var(--color-accent-ink) !important; }
svg[aria-hidden="true"][class*="text-amber-"] { color: var(--color-accent-text) !important; }
.mx-marquee-control { font-size: var(--text-small); color: var(--color-ink-2); background: var(--color-surface); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); }
.marquee-row { animation-duration: 80s !important; animation-play-state: paused; }
.marquee-row.mx-in-view { animation-play-state: running; }
.marquee-row:hover, .marquee-row:focus-within, .mx-gallery-paused .marquee-row { animation-play-state: paused; }
.mx-video-modal { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.mx-video-modal iframe { pointer-events: auto !important; }
.mx-scroll-progress { position: fixed; inset: 0 auto auto 0; width: 100%; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; z-index: 45; }
#page-loader { background: var(--color-accent); box-shadow: none; z-index: 50; }
/* Scroll polish owns first-visit reveals; content stays visible if JS fails. */
html.mx-js .reveal, html.mx-js .reveal-group > *, html.mx-js [data-split], html.mx-js main h2, html.mx-js main p.text-lg, html.mx-js main p.text-xl { opacity: 1; }

@media (max-width:1023px) {
  .site-nav .mx-desktop-nav, .site-nav .mx-desktop-actions { display: none !important; }
  .site-nav .mx-menu-trigger { display: flex !important; }
  .site-nav .mx-mobile-nav { display: block !important; }
  .site-nav .mx-mobile-nav.hidden { display: none !important; }
}
@media (min-width:1024px) {
  .site-nav .mx-menu-trigger, .site-nav .mx-mobile-nav { display: none !important; }
}
@media (max-width:767px) {
  main h1[data-split] { font-size: clamp(2.25rem, 8vw, 3.4rem); }
  [data-script] .whitespace-nowrap { white-space: normal; overflow-wrap: anywhere; }
  .mx-lesson-actions { width: 100%; }
  .mx-lesson-actions > div, .mx-lesson-actions form, .mx-lesson-actions button { width: 100%; }
  .mx-lesson-actions button { justify-content: center; }
  .mx-course-dock a { white-space: nowrap; }
  .mx-course-dock { bottom: max(1rem, env(safe-area-inset-bottom)); }
}
@media (max-width:374px) {
  .site-nav a > span > span { font-size: 0.95rem; }
  [data-script] { font-size: clamp(1.875rem, 10vw, 2.4rem); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .marquee-row { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print { html, body { color: var(--color-ink); background: var(--color-paper); } .mx-scroll-progress, .mx-marquee-control { display: none; } }