/* Stux.Design Services — shared stylesheet
   Layout follows StuxieDev Projects; palette is Stux.Design magenta #e71081 (the logo's
   colour) with a lighter #ff6fbd tint for text on dark. Poppins for headings, Lato for body
   copy. The Stux.Design twist is the designer's artboard: a layout grid, rulers, a selection
   box and crop marks (see "Artboard" at the end). */

/* 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: #110c0f;
  --bg-raised: #181116;
  --bg-card: #1c141a;
  --bg-card-hover: #251a22;
  --border: #33232e;
  --border-strong: #4a3141;
  --text: #f7eef3;
  --text-muted: #c0adb8;
  --text-faint: #8f7987;
  --accent: #e71081;
  --accent-bright: #ff6fbd;
  --accent-pink: #e71081;
  --accent-soft: rgba(231, 16, 129, 0.14);
  --accent-grad: linear-gradient(135deg, #ff6fbd 0%, #e71081 100%);
  --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;
}

* { box-sizing: border-box; }

html { color-scheme: dark; 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: #fff; }

: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. The site
   is dark-only, so main.js marks <html> .theme-dark and the banner keeps its dark accents. */
.site-banners {
  --banner-page-bg: var(--bg);
  --banner-text: var(--text);
  --banner-site: var(--accent-bright);
  --banner-site-light: var(--accent-bright);
}

/* Header */
.site-header {
  position: sticky;
  top: var(--banner-h, 0px);
  z-index: 20;
  background: rgba(17, 12, 15, 0.8);
  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(231, 16, 129, 0.28), transparent 70%),
    radial-gradient(520px 300px at 72% 35%, rgba(255, 111, 189, 0.16), 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(231, 16, 129, 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: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px -8px rgba(255, 111, 189, 0.5);
}
.btn-primary:hover { box-shadow: 0 10px 28px -6px rgba(255, 111, 189, 0.6); }
.btn-ghost { color: var(--text); background: rgba(255, 255, 255, 0.02); }
.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(231, 16, 129, 0.7);
  background: var(--bg-card-hover);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -20px rgba(231, 16, 129, 0.55);
}
.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: #ffb3dc; }
.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(231, 16, 129, 0.45);
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(231, 16, 129, 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 {
  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;
}
.badge-status.live { background: rgba(52, 211, 153, 0.1); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
.badge-status.building { background: rgba(240, 180, 41, 0.1); color: #f0b429; border: 1px solid rgba(240, 180, 41, 0.3); }
.badge-status.archived, .badge-status.discontinued { background: rgba(156, 160, 172, 0.1); color: #a8a2ad; border: 1px solid rgba(156, 160, 172, 0.3); }

/* 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(231, 16, 129, 0.4);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(231, 16, 129, 0.22), 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.Design 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.Design 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 { background: rgba(185, 140, 255, 0.12); color: #b98cff; border: 1px solid rgba(185, 140, 255, 0.35); }
.badge-status.maintenance { background: rgba(240, 136, 62, 0.12); color: #f0883e; border: 1px solid rgba(240, 136, 62, 0.35); }
.badge-status.template { background: rgba(96, 165, 250, 0.1); color: #7cb7ff; border: 1px solid rgba(96, 165, 250, 0.3); }
.badge-status.up { background: rgba(52, 211, 153, 0.1); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
.badge-status.degraded { background: rgba(240, 180, 41, 0.1); color: #f0b429; border: 1px solid rgba(240, 180, 41, 0.3); }
.badge-status.down { background: rgba(255, 107, 97, 0.1); color: #ff6b61; border: 1px solid rgba(255, 107, 97, 0.35); }
/* 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 rgba(52, 211, 153, 0.55); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
@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 { --pulse: 138, 125, 125; width: 14px; height: 14px; border-radius: 50%; background: var(--text-faint); flex: none; box-shadow: 0 0 0 0 rgba(var(--pulse), 0.5); }
.status-band.up .sb-dot { --pulse: 52, 211, 153; background: #34d399; }
.status-band.degraded .sb-dot, .status-band.partial .sb-dot { --pulse: 240, 180, 41; background: #f0b429; }
.status-band.down .sb-dot { --pulse: 255, 107, 97; background: #ff6b61; }
/* 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 rgba(var(--pulse), 0.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(var(--pulse), 0); }
}
@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, from Stux.Design) */
.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: #ffb3dc; }

@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: #fff; 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); }

/* Artboard: the Stux.Design twist. The hero sits on a faint layout grid with ruler ticks along
   its top and left edges, the highlighted words get a selection box with handles, and a strip of
   swatches shows the brand colours the studio has drawn. Cards get crop marks on hover. */
.hero.artboard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(231, 16, 129, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 16, 129, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 75% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}
.ruler { position: absolute; z-index: -1; pointer-events: none; opacity: 0.55; }
.ruler-top {
  top: 0; left: 0; right: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 111, 189, 0.55) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255, 111, 189, 0.3) 0 1px, transparent 1px 12px);
  background-size: 100% 14px, 100% 6px;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(231, 16, 129, 0.25);
}
.ruler-left {
  top: 0; bottom: 0; left: 0; width: 14px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 111, 189, 0.55) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(180deg, rgba(255, 111, 189, 0.3) 0 1px, transparent 1px 12px);
  background-size: 14px 100%, 6px 100%;
  background-repeat: no-repeat;
  border-right: 1px solid rgba(231, 16, 129, 0.25);
}
.selection {
  position: relative;
  display: inline-block;
  padding: 0 0.18em;
  outline: 1.5px dashed rgba(255, 111, 189, 0.7);
  outline-offset: 4px;
}
.selection .handle {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--bg);
  border: 1.5px solid var(--accent-bright);
}
.selection .handle.tl { top: -9px; left: -9px; }
.selection .handle.tr { top: -9px; right: -9px; }
.selection .handle.bl { bottom: -9px; left: -9px; }
.selection .handle.br { bottom: -9px; right: -9px; }
.swatches {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px auto 0;
  max-width: 560px;
}
.swatch {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.15s;
  cursor: default;
}
.swatch.is-ours { outline: 1.5px solid var(--accent-bright); outline-offset: 3px; }
.swatch > span {
  position: absolute;
  left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.swatch:hover, .swatch:focus-visible { transform: translateY(-2px); }
.swatch:hover > span, .swatch:focus-visible > span { opacity: 1; }
.project-card::before, .project-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.project-card::before { top: -7px; left: -7px; border-top: 1.5px solid var(--accent-bright); border-left: 1.5px solid var(--accent-bright); }
.project-card::after { bottom: -7px; right: -7px; border-bottom: 1.5px solid var(--accent-bright); border-right: 1.5px solid var(--accent-bright); }
.project-card:hover::before, .project-card:hover::after { opacity: 1; }
@media (max-width: 560px) {
  .ruler-left { display: none; }
  .swatch { width: 28px; height: 28px; }
}