/* Stux.Dev Services — shared stylesheet
   Layout follows StuxieDev Projects; palette is the main Stux.Dev one (accent #fd6602),
   dark by default with a light theme (system preference, or data-theme on <html>).
   Poppins for headings, Lato for body copy. */

/* Self-hosted (SIL Open Font License), latin subset only, so the site makes
   no third-party requests. See assets/fonts/. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-400-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: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-700-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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-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: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/poppins-800-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;
}

:root {
  --bg: #0d1117;
  --bg-raised: #151b23;
  --bg-card: #161b22;
  --bg-card-hover: #1c232c;
  --border: #2a313c;
  --border-strong: #3a4350;
  --text: #e6edf3;
  --text-muted: #9ba3ad;
  --text-faint: #7d8590;
  --accent: #fd6602;
  --accent-bright: #ff8a3d;
  --accent-pink: #ff9a4d;
  --accent-hover: #ffb27a;
  --on-accent: #111111;
  --accent-soft: rgba(253, 102, 2, 0.14);
  --accent-rgb: 253, 102, 2;
  --accent-grad: linear-gradient(135deg, #ff9a4d 0%, #fd6602 100%);
  --header-bg: rgba(13, 17, 23, 0.8);
  --ok: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --soon: #b98cff;
  --maint: #f0883e;
  --tmpl: #7cb7ff;
  --arch: #a8a2ad;
  --radius: 16px;
  --container: 1120px;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", var(--font-sans);
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: dark;
}

/* Light theme: the system preference unless <html data-theme="dark"> is set, or data-theme="light" */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9;
    --bg-raised: #eef0f3;
    --bg-card: #ffffff;
    --bg-card-hover: #fff8f3;
    --border: #dfe3e8;
    --border-strong: #c8ced6;
    --text: #1f2328;
    --text-muted: #59636e;
    --text-faint: #6e7781;
    --accent-bright: #be4c02;
    --accent-pink: #fd6602;
    --accent-hover: #8f3801;
    --accent-soft: #ffe7d7;
    --accent-grad: linear-gradient(135deg, #fd6602 0%, #be4c02 100%);
    --header-bg: rgba(246, 247, 249, 0.85);
    --ok: #1a7f37;
    --warn: #9a6700;
    --bad: #cf222e;
    --soon: #7b3fc4;
    --maint: #b3470f;
    --tmpl: #0a5fb4;
    --arch: #59636e;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-raised: #eef0f3;
  --bg-card: #ffffff;
  --bg-card-hover: #fff8f3;
  --border: #dfe3e8;
  --border-strong: #c8ced6;
  --text: #1f2328;
  --text-muted: #59636e;
  --text-faint: #6e7781;
  --accent-bright: #be4c02;
  --accent-pink: #fd6602;
  --accent-hover: #8f3801;
  --accent-soft: #ffe7d7;
  --accent-grad: linear-gradient(135deg, #fd6602 0%, #be4c02 100%);
  --header-bg: rgba(246, 247, 249, 0.85);
  --ok: #1a7f37;
  --warn: #9a6700;
  --bad: #cf222e;
  --soon: #7b3fc4;
  --maint: #b3470f;
  --tmpl: #0a5fb4;
  --arch: #59636e;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(80px + var(--banner-h, 0px)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .brand, .btn { font-family: var(--font-display); }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 6px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* The shared site banner (site-banner.css; dev mode, see main.js) in this site's colours. It follows
   the page theme: the system preference, or data-theme on <html>. */
.site-banners {
  --banner-page-bg: var(--bg);
  --banner-text: var(--text);
  --banner-site: #fd6602;
  --banner-site-light: #be4c02;
}

/* Header */
.site-header {
  position: sticky;
  top: var(--banner-h, 0px);
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.brand .brand-sub { color: var(--accent-bright); font-weight: 500; }

.nav-links {
  display: flex;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.nav-links a {
  padding: 6px 12px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--accent-soft); }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.breadcrumb a:hover { color: var(--accent-bright); }
.bc-sep { opacity: 0.5; }
.bc-cur { color: var(--text-muted); }

/* Hero */
.hero {
  position: relative;
  padding: 104px 0 72px;
  text-align: center;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -120px 0 0;
  z-index: -1;
  background:
    radial-gradient(600px 320px at 30% 20%, rgba(var(--accent-rgb), 0.24), transparent 70%),
    radial-gradient(520px 300px at 72% 35%, rgba(255, 170, 80, 0.12), transparent 70%);
  pointer-events: none;
}
.hero .eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.grad {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.08rem;
}
.hero .actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.hero-stats div { text-align: center; }
.hero-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.hero-stats span { font-size: 0.82rem; color: var(--text-faint); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--accent-grad);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.5);
}
.btn-primary:hover { box-shadow: 0 10px 28px -6px rgba(var(--accent-rgb), 0.6); }
.btn-ghost { color: var(--text); background: var(--bg-card); }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Sections */
.section { padding: 72px 0; }
.section-head { margin-bottom: 36px; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.section-head p { color: var(--text-muted); margin: 0; }
.subhead {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 56px 0 20px;
}
.subhead::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.subhead:first-of-type { margin-top: 0; }

/* Project cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.project-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s, transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.project-card:hover {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: var(--bg-card-hover);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -20px rgba(var(--accent-rgb), 0.45);
}
.project-card .project-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Icons: every icon renders into a fixed square box and is scaled with
   object-fit, so non-square or oddly padded source images are never
   stretched or squashed. */
.project-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 14px;
}
/* For icons drawn on a transparent background (no tile of their own). */
.project-card h3 { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.project-card .project-tagline { color: var(--text-faint); font-size: 0.84rem; margin-top: 2px; line-height: 1.4; }
.project-card p.desc { color: var(--text-muted); font-size: 0.93rem; margin: 0; flex-grow: 1; }
.project-card .stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pill {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.project-card .project-links {
  display: flex;
  gap: 18px;
  font-size: 0.86rem;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.project-card .project-links a {
  color: var(--accent-bright);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.project-card .project-links a::after { content: "\2197"; font-size: 0.8em; opacity: 0.7; transition: transform 0.15s; }
.project-card .project-links a:hover { color: var(--accent-hover); }
.project-card .project-links a:hover::after { transform: translate(2px, -2px); }

/* Two cards per row (Featured, More projects) */
.project-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Featured cards: bigger icon and a soft accent border */
.project-card.featured {
  padding: 28px;
  border-color: rgba(var(--accent-rgb), 0.45);
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    var(--bg-card);
}
.project-card.featured .project-icon { width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; }
.project-card.featured h3 { font-size: 1.25rem; }

/* Compact cards for smaller scripts/tools */
.project-grid.compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.project-grid.compact .project-card { padding: 20px; gap: 12px; }
.project-grid.compact .project-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
.project-grid.compact h3 { font-size: 1rem; }
.project-grid.compact p.desc { font-size: 0.88rem; }

.badge-status {
  --c: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: auto;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.badge-status.live { --c: var(--ok); }
.badge-status.archived, .badge-status.discontinued { --c: var(--arch); }

/* About / skills */
.skills-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}
.skill-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.skill-chip:hover { border-color: var(--accent); color: var(--text); }

/* Contact */
.contact-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 28px;
  border-radius: 22px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 70%),
    var(--bg-card);
}
.contact-card h2 { font-size: clamp(1.5rem, 3.5vw, 1.9rem); margin: 0 0 8px; }
.contact-card p { color: var(--text-muted); margin: 0 0 26px; }
.contact-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  margin-top: 40px;
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-faint);
}
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-links a:hover { color: var(--accent-bright); }

/* Brand block "Stux.Dev logo" and "Created with", muted until hovered.
   The logo keeps the same filter functions in every state, so the hover animates smoothly
   (switching the filter off drops the image's layer and snaps). */
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.footer-brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.footer-brand-logo { display: block; height: 28px; width: auto; filter: grayscale(1) brightness(1); opacity: .7;
  transition: filter .2s ease, opacity .2s ease; will-change: filter, opacity; backface-visibility: hidden; transform: translateZ(0); }
.footer-brand a:hover .footer-brand-logo, .footer-brand a:focus-visible .footer-brand-logo { filter: grayscale(0) brightness(1); opacity: 1; }
.footer-brand-sep { color: var(--border); }
.footer-brand-text { color: var(--text-muted); font-weight: 600; transition: color .2s; }
.footer-brand-text:hover, .footer-brand-text:focus-visible { color: var(--text); }
.footer-created { margin: 0; }
.footer-created a { color: var(--text-muted); font-weight: 600; transition: color .2s; }
.footer-created a:hover, .footer-created a:focus-visible { color: var(--text); }
.fc-i, .copy-i { display: inline-flex; vertical-align: -2px; }
.copy-i svg { width: 14px; height: 14px; fill: currentColor; }
/* Created-with icons share a 1em box; heart/coffee are scaled optically so the solid heart is not bigger than the code icon */
.fc-i { vertical-align: -0.125em; }
.fc-i svg { width: 1em; height: 1em; fill: currentColor; }
.fc-love { font-size: 0.85em; }
.fc-code { font-size: 1em; }
.fc-coffee { font-size: 0.95em; }
.fc-love { color: #e5534b; } .fc-code { color: #2da44e; } .fc-coffee { color: #a0703c; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .footer-brand-logo, .footer-brand-text, .footer-created a { transition: none; } }

/* Legal pages */
.page-hero { padding: 56px 0 32px; }
.page-title { font-size: 2rem; margin: 8px 0 10px; }
.page-desc { color: var(--text-muted); max-width: 640px; }

.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.legal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.legal-card:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.legal-card-name { font-family: var(--font-display); font-weight: 600; margin-bottom: 4px; }
.legal-card-desc { color: var(--text-muted); font-size: 0.85rem; }

.prose-page { max-width: 720px; margin: 0 auto; }
.prose-meta { color: var(--text-faint); font-size: 0.82rem; margin-bottom: 28px; }
.prose-body h2 { font-size: 1.25rem; margin: 36px 0 12px; }
.prose-body h2:first-child { margin-top: 0; }
.prose-body p { color: var(--text-muted); }
.prose-body a { color: var(--accent-bright); }
.prose-body a:hover { text-decoration: underline; }

.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 20px;
  margin: 24px 0;
}
.info-card-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.info-card-row.last, .info-card-row:last-child { border-bottom: none; }
.info-card-label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 4px; }
.info-card-value { display: block; color: var(--text-muted); font-size: 0.88rem; }

@media (max-width: 640px) {
  .site-header .container { height: auto; padding: 12px 16px; flex-direction: column; gap: 8px; }
  .nav-links { gap: 2px; flex-wrap: wrap; justify-content: center; }
  .container { padding: 0 16px; }
  .hero { padding: 56px 0 44px; }
  .hero-stats { gap: 28px; }
  .section { padding: 48px 0; }
  .project-grid, .project-grid.compact, .project-grid.two-up { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Discontinued projects: dimmed, with a short note on why */
.project-card.discontinued { background: transparent; border-style: dashed; }
.project-card.discontinued .project-icon { filter: grayscale(0.85); opacity: 0.7; }
.project-card.discontinued h3 { color: var(--text-muted); }
.project-card.discontinued:hover { background: var(--bg-card); }
.project-card.discontinued:hover .project-icon { filter: none; opacity: 1; }
.discontinued-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-faint);
  padding-left: 10px;
  border-left: 2px solid var(--border-strong);
}

/* ── Stux.Dev Services additions ─────────────────────────────────────── */

/* Which company a service belongs to */
.project-card .owner { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bright); }

/* One status badge per card, above the description. Precedence (first wins):
   discontinued, template, maintenance, soon, then the live status from main.js. */
.project-card > .badge-status { align-self: flex-start; margin-left: 0; }
.badge-status { display: inline-flex; align-items: center; gap: 6px; }
.badge-status[hidden] { display: none; }
.badge-status.soon { --c: var(--soon); }
.badge-status.maintenance { --c: var(--maint); }
.badge-status.template { --c: var(--tmpl); }
.badge-status.up { --c: var(--ok); }
.badge-status.degraded { --c: var(--warn); }
.badge-status.down { --c: var(--bad); }
/* Glyphs are the site banner's wrench and rocket (one each), as masks so they take the badge colour.
   Exactly one icon per badge: a glyph for soon/maintenance, the ::before dot for live states, none otherwise. */
.badge-ico { display: none; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.badge-status.soon .badge-ico, .badge-status.maintenance .badge-ico { display: inline-block; }
.badge-status.soon .badge-ico { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 14 14'%3E%3Cg transform='rotate%2845 6 6%29'%3E%3Cpath fill-rule='evenodd' d='M6 0c2.9 1.9 3.6 5.2 2.6 8.3H3.4C2.4 5.2 3.1 1.9 6 0zM6 2.9a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 1 0 6 2.9z'/%3E%3Cpath d='M3.2 5.4 1 9.6h2.9zM8.8 5.4 11 9.6H8.1zM4.5 9h3L6 12z'/%3E%3C/g%3E%3C/svg%3E"); }
.badge-status.maintenance .badge-ico { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 14 14'%3E%3Cg transform='rotate%2845 6 6%29'%3E%3Cpath fill-rule='evenodd' d='M6 0a2.9 2.9 0 1 1 0 5.8A2.9 2.9 0 1 1 6 0zM5.05 -0.5h1.9v2.9h-1.9z'/%3E%3Crect x='4.9' y='4.6' width='2.2' height='7.4' rx='1.1'/%3E%3C/g%3E%3C/svg%3E"); }
/* Pulsing dot for live states */
.badge-status.up::before, .badge-status.degraded::before, .badge-status.down::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
}
.badge-status.up::before { animation: badge-pulse 2s ease-out infinite; }
@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .badge-status.up::before { animation: none; } }

/* Status band */
.status-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 24px 28px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-card);
}
.status-band .sb-main { display: flex; align-items: center; gap: 16px; }
.status-band .sb-dot { --c: var(--text-faint); width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.status-band.up .sb-dot { --c: var(--ok); }
.status-band.degraded .sb-dot, .status-band.partial .sb-dot { --c: var(--warn); }
.status-band.down .sb-dot { --c: var(--bad); }
/* Same ring-expands-and-fades pulse as the Online badge dot, coloured by state */
.status-band.up .sb-dot, .status-band.degraded .sb-dot, .status-band.partial .sb-dot, .status-band.down .sb-dot { animation: sb-pulse 2s ease-out infinite; }
@keyframes sb-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) { .status-band .sb-dot { animation: none !important; } }
.status-band h2 { margin: 0; font-size: 1.2rem; }
.status-band p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.9rem; }

/* Seasonal overlay button (SeasonalOverlaysLibrary, vendored in assets/js) */
.btn-season { font-family: var(--font-display); }
.btn-season[hidden] { display: none; }
.hero .season-note { margin-top: 14px; font-size: 0.8rem; color: var(--text-faint); }
.hero .season-note a { color: var(--accent-bright); }

.project-card .project-links button {
  font: inherit; font-weight: 700; color: var(--accent-bright); background: none; border: 0; padding: 0; cursor: pointer;
}
.project-card .project-links button:hover { color: var(--accent-hover); }

@media (max-width: 640px) {
  .status-band { padding: 20px; }
}

/* Long names (SeasonalOverlaysLibrary) wrap instead of overflowing, and card links wrap as a row */
.project-card h3 { overflow-wrap: anywhere; }
.project-card .project-top > div { min-width: 0; }
.project-card .project-links { flex-wrap: wrap; row-gap: 8px; }
.project-card .project-links button { white-space: nowrap; }

/* Footer version link (filled from VERSION.md by main.js) */
[data-site-version] { font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Changelogs page (rendered from CHANGELOG.md by changelogs.js) */
.cl-wrap { max-width: 820px; margin: 0 auto; }
.cl-current { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 20px; }
.cl-current:has(#cl-version:empty) { display: none; }
.cl-current #cl-version { font-family: var(--font-mono, Consolas, monospace); color: var(--text); }
.cl-entry { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px 10px; margin: 0 0 14px; }
.cl-entry:first-child { border-color: var(--accent); }
.cl-entry h2 { margin: 0 0 10px; font-size: 1.2rem; font-family: var(--font-mono, Consolas, monospace); letter-spacing: 0; }
.cl-entry:first-child h2::after { content: "Latest"; margin-left: 10px; vertical-align: 2px; font: 700 0.7rem var(--font-sans, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 3px 8px; }
.cl-label { display: inline-block; margin: 6px 0 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; color: var(--cl, #8a8a94); background: color-mix(in srgb, var(--cl, #8a8a94) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cl, #8a8a94) 45%, transparent); }
.cl-label-added { --cl: #2ecc71; }
.cl-label-changed { --cl: #3ba7ff; }
.cl-label-fixed { --cl: #ffa64d; }
.cl-label-removed { --cl: #ff4d4d; }
.cl-label-security { --cl: #b06bff; }
.cl-label-deprecated { --cl: #8a8a94; }
:root[data-theme="light"] .cl-label-added, :root.theme-light .cl-label-added { --cl: #1e8449; }
:root[data-theme="light"] .cl-label-changed, :root.theme-light .cl-label-changed { --cl: #1a6fc0; }
:root[data-theme="light"] .cl-label-fixed, :root.theme-light .cl-label-fixed { --cl: #b8650f; }
:root[data-theme="light"] .cl-label-removed, :root.theme-light .cl-label-removed { --cl: #c62828; }
:root[data-theme="light"] .cl-label-security, :root.theme-light .cl-label-security { --cl: #7b3fc4; }
:root[data-theme="light"] .cl-label-deprecated, :root.theme-light .cl-label-deprecated { --cl: #5f5f68; }
.cl-list { margin: 0 0 10px; padding-left: 1.2em; color: var(--text-muted); font-size: 0.95rem; }
.cl-list li { margin: 0 0 6px; overflow-wrap: anywhere; }
.cl-list code, .cl-msg code { font-family: var(--font-mono, Consolas, monospace); font-size: 0.88em; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.cl-list a, .cl-msg a { color: var(--accent-bright, var(--text)); text-decoration: underline; }
.cl-list strong { color: var(--text); }
.cl-h4 { margin: 10px 0 6px; font-size: 0.95rem; }
.cl-msg { color: var(--text-muted); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cl-label-added { --cl: #1e8449; }
  :root:not([data-theme="dark"]) .cl-label-changed { --cl: #1a6fc0; }
  :root:not([data-theme="dark"]) .cl-label-fixed { --cl: #b8650f; }
  :root:not([data-theme="dark"]) .cl-label-removed { --cl: #c62828; }
  :root:not([data-theme="dark"]) .cl-label-security { --cl: #7b3fc4; }
  :root:not([data-theme="dark"]) .cl-label-deprecated { --cl: #5f5f68; }
}