@font-face {
  font-family: 'AC Narrow Bold';
  src: url('/fonts/NimbusSansNarrow-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'AC Mono';
  src: url('/fonts/NimbusMonoPS-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'AC Sans';
  src: url('/fonts/NimbusSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Ensures native UI (scrollbars, video controls, form controls) renders
     with dark styling instead of the browser's light default — without
     this, the <video> controls bar shows as a light/white strip. */
  color-scheme: dark;

  /* Cooler, darker palette — Monokai/Material inspired, dual accent */
  --bg: #121417;
  --bg-2: #1d2027;
  --bg-3: #252932;
  --fg: #eeeeec;
  --muted: #a8adb8;
  --dim: #767c88;
  --border: rgba(238, 238, 236, 0.08);
  --border-strong: rgba(238, 238, 236, 0.16);

  /* Primary accent — cyan/blue */
  --accent: #66d9ef;
  --accent-hover: #8de6f7;
  --accent-dim: rgba(102, 217, 239, 0.14);
  --accent-border: rgba(102, 217, 239, 0.4);

  /* Secondary accent — pink/magenta */
  --accent2: #f92672;
  --accent2-hover: #ff5c96;
  --accent2-dim: rgba(249, 38, 114, 0.14);
  --accent2-border: rgba(249, 38, 114, 0.4);

  /* Tertiary accent — used sparingly (a status dot, one flourish) */
  --accent3: #a6e22e;
  --accent3-dim: rgba(166, 226, 46, 0.14);

  --link: #66d9ef;
  --link-hover: #8de6f7;

  --mono: 'AC Mono', 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  --sans: 'AC Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'AC Narrow Bold', 'Arial Narrow', sans-serif;

  --radius: 6px;
  --radius-lg: 12px;

  /* Spacing scale — every component's padding/margin/gap should reference
     one of these instead of a hand-picked px value. This is what keeps
     panel padding, card gaps, and section rhythm consistent as pages are
     added; a page that invents its own "32px" here and "24px" there is
     exactly how the width/radius/padding drift happened before. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;

  /* Aliases so existing "night-" scoped styles (Acid Cell hero) keep working unchanged */
  --night-bg: var(--bg);
  --night-ink: var(--fg);
  --night-muted: var(--muted);
  --night-accent: var(--accent);
  --night-accent-dim: var(--accent-dim);
  --night-accent-border: var(--accent-border);
  --night-line: var(--border-strong);
  --night-line-soft: var(--border);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Ambient glow field — gives the glass panels something to blur/refract.
   Dual-hue: cyan top-left, magenta top-right, matching the accent system. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 380px at 8% -6%, rgba(102, 217, 239, 0.14), transparent 65%),
    radial-gradient(620px 460px at 96% 8%, rgba(249, 38, 114, 0.10), transparent 60%),
    radial-gradient(700px 500px at 50% 105%, rgba(166, 226, 46, 0.06), transparent 65%);
  animation: ambient-drift 24s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
  from { opacity: 0.85; transform: translateY(0); }
  to   { opacity: 1; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Glass panel — translucent, blurred, subtly gradient-lit surface */
.glass {
  background:
    linear-gradient(155deg, rgba(238, 238, 236, 0.08), rgba(238, 238, 236, 0.02) 60%),
    rgba(22, 24, 29, 0.5);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(238, 238, 236, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.32);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--link-hover);
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--fg);
  font-weight: 600;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
h3 { font-size: 1.15rem; }
h4 {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

p { margin: 1.1em 0; }
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--accent);
}

pre {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
}

pre code {
  background: none;
  padding: 0;
  color: var(--fg);
}

hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 3rem 0;
}

ul, ol {
  padding-left: 1.5rem;
}

li {
  margin: 0.4em 0;
}

li::marker {
  color: var(--dim);
}

img {
  max-width: 100%;
  border-radius: var(--radius);
}

strong { font-weight: 600; }

/* Layout */
.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* .container--wide is always the OUTER wrapper — the one and only place
   that defines the page's edge gutter (the gap between boxed content and
   the screen edge), at every viewport size. .hero-box / .panel are
   always its DIRECT CHILD, never merged onto the same element as
   .container--wide: as a child they simply fill 100% of its content
   width, so their own padding is purely internal (text breathing room),
   and their outer edge is automatically flush with every other boxed
   element's outer edge, at any screen size, with no extra classes,
   media queries, or per-component margin patches required. This is what
   "nesting works" means here — get the nesting right once, and every
   width/alignment/edge-gutter bug this page has hit becomes structurally
   impossible instead of something to special-case per page. */
.container--wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 600px) {
  .container--wide {
    padding: 0 var(--space-2);
  }
}

/* ============================================================
   Shared page-content components
   ------------------------------------------------------------
   Every page composes its content from these instead of
   redefining hero/panel/card/grid CSS locally. That duplication
   (each page inventing its own padding, radius, and margin) is
   exactly what caused sections to render at inconsistent widths,
   with missing corners, and uneven spacing between pages. This
   is the one place that changes when the look needs to change.

   Acid Cell's "night" hero is a deliberate exception: it's a
   distinct full-bleed visual world for the flagship product, not
   a bug, so it keeps its own scoped styles instead of using
   .hero-box below. Everything else should use these.

   Both .hero-box and .panel are meant to be nested one level inside
   a plain .container--wide div — see the comment above it. Never
   apply .container--wide and .panel/.hero-box to the same element. */

/* Eyebrow — small uppercase mono label above a heading */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.eyebrow-inline {
  display: block;
  margin-bottom: var(--space-3);
}

/* Hero box — the glass, centered, corner-framed intro block at the top
   of a page (homepage, Nucleic Core). */
.hero-box {
  padding: var(--space-11) var(--space-9);
  border-radius: var(--radius-lg);
  text-align: center;
}

.hero-box h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  line-height: 1.05;
}

.hero-sub {
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: var(--space-6);
}

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto var(--space-7);
}

.internal-note {
  margin-top: var(--space-6);
  font-size: 0.82rem;
  color: var(--dim);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.internal-note-inline {
  margin-top: var(--space-4);
  font-size: 0.82rem;
  color: var(--dim);
}

.cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.cta {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  transition: background 0.15s ease;
}

.cta:hover {
  background: var(--accent-hover);
  color: var(--bg);
}

.cta-secondary {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--muted);
}

.cta-secondary:hover {
  color: var(--accent2);
}

/* Panel — the standard stacked content-section box. Width always comes
   from the .container--wide parent; this only ever controls padding,
   radius, and vertical rhythm — never width. Works with or without
   .glass (a non-glass panel just has an invisible background, same
   spacing). This is the single source of truth for that spacing. */
.panel {
  position: relative;
  z-index: 1;
  padding: var(--space-9) var(--space-8);
  border-radius: var(--radius-lg);
  margin: var(--space-6) auto;
}

/* A non-glass panel has no visible surface of its own, so padding just
   indents/floats its content relative to the glass panels around it
   for no visible reason. Its content (grids of glass cards, etc.)
   should flush with the container edges instead; margin still gives
   it its vertical rhythm between neighboring panels. */
.panel:not(.glass) {
  padding: 0;
}

.panel h4 {
  margin-bottom: var(--space-5);
}

.panel > p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
  max-width: 72ch;
}

.panel > p + p {
  margin-top: var(--space-4);
}

.section-intro {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 68ch;
  margin: calc(var(--space-2) * -1) 0 var(--space-6);
}

.section-note {
  margin-top: var(--space-5);
  color: var(--dim);
  font-size: 0.85rem;
  font-style: italic;
}

.pull-quote {
  margin-top: var(--space-6);
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--fg);
}

.tech-note {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--dim);
  font-style: italic;
}

@media (max-width: 600px) {
  .panel { padding: var(--space-7) var(--space-5); }
  .hero-box { padding: var(--space-8) var(--space-6); }
}

/* Grids — responsive N-up layouts shared by every card collection
   (demos, products, proofs, tracks). */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 760px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Card — base look for a glass card inside a grid. Page-specific label
   spans (eyebrows, tags, platform lines) layer on top of this. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  box-shadow: 0 0 30px var(--accent-dim);
}

.card h2,
.card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  max-width: none;
  flex-grow: 1;
}

.card-link {
  margin-top: var(--space-2);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent);
}

.card-link:hover {
  color: var(--accent-hover);
}

/* Media video — the standard look for a directly embedded, always-
   playable <video>, shared by the journal, Acid Cell, and Studio Jams.
   One shared class keeps every page's video the same shape/border
   instead of each page inventing its own near-identical rule. */
.media-video {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-3);
  display: block;
}

/* Thumbnail index card + lightbox — the shared "click a video thumbnail,
   get a full-content popup with the video full-bleed at top" pattern used
   by the Journal and Studio Jams pages. Deep-linkable via #slug; the
   matching per-page script clones a <template id="tpl-{slug}"> into the
   lightbox and moves its <video> into the unpadded #lightboxMedia slot. */
.entry-card {
  position: relative;
  display: block;
  padding: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.entry-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  box-shadow: 0 0 24px var(--accent-dim);
}

.entry-card .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-2);
  pointer-events: none;
}

.play-badge {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 16, 12, 0.72);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.entry-card-body {
  display: block;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

.entry-card-title {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}

.entry-card-note {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 6, 0.88);
  backdrop-filter: blur(6px);
  padding: 24px;
}

.lightbox.open {
  display: flex;
}

.lightbox-frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
}

.lightbox-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

#lightboxMedia .media-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 55vh;
  object-fit: cover;
  background: #000;
  display: block;
  border-radius: 0;
  margin: 0;
  border: none;
}

/* Media panel — same "video flush to the edges, content below" look as
   the lightbox, but as a regular always-visible panel (no popup), for a
   single video that's just one section of a larger page (Acid Cell's
   "Early build", Stage Router's "In motion", etc). */
.panel.media-panel {
  padding: 0;
  overflow: hidden;
}

.media-panel .media-video {
  width: 100%;
  display: block;
  margin: 0;
  border: none;
  border-radius: 0;
}

.media-panel-body {
  padding: var(--space-9) var(--space-8);
}

@media (max-width: 600px) {
  .media-panel-body {
    padding: var(--space-7) var(--space-5);
  }
}

.lightbox-scroll {
  overflow-y: auto;
  padding: var(--space-8);
}

.lightbox-inner h4 {
  margin-bottom: 0.9rem;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

.lightbox-close:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}

@media (max-width: 600px) {
  .lightbox-close {
    top: -12px;
    right: -12px;
  }
}

/* Night hero — a full-bleed, dark, metaball-lit hero section, shared by
   any page that wants that treatment (originally Acid Cell's; also used
   on the homepage). Pair with <MetaballField /> for the canvas.scope glow
   and, if wanted, <SpiralBackground /> behind it (the section's own
   background is transparent so that shows through). */
.night {
  background: transparent;
  color: var(--night-ink);
  position: relative;
  padding: 72px 24px;
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.night .corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--night-line);
  border-style: solid;
  border-width: 0;
  opacity: 0.9;
}
.night .corner.tl { top: 20px; left: 20px; border-top-width: 1px; border-left-width: 1px; }
.night .corner.tr { top: 20px; right: 20px; border-top-width: 1px; border-right-width: 1px; }
.night .corner.bl { bottom: 20px; left: 20px; border-bottom-width: 1px; border-left-width: 1px; }
.night .corner.br { bottom: 20px; right: 20px; border-bottom-width: 1px; border-right-width: 1px; }

.night canvas.scope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.65;
  pointer-events: none;
}

.night .content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.night .eyebrow {
  font-family: 'AC Mono', var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--night-muted);
  display: block;
  margin-bottom: 1.6rem;
}
.night .eyebrow .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--night-accent);
  margin-right: 8px;
  vertical-align: middle;
}

.night h1 {
  font-family: 'AC Narrow Bold', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 3.9rem);
  letter-spacing: 0.005em;
  line-height: 0.94;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--night-ink);
}

.night .lede {
  font-family: 'AC Sans', var(--sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--night-muted);
  max-width: 46ch;
  margin: 0 auto 2.4rem;
}

.night .status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin: 0 auto 2.4rem;
}
.night .status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'AC Mono', var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--night-ink);
}
.night .status-item .led {
  width: 5px; height: 5px;
  border-radius: 50%;
  border: 1px solid var(--night-accent);
  background: transparent;
}
.night .status-item.core .led { background: var(--accent3); border-color: var(--accent3); }

.night .cta-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.night .cta {
  font-family: 'AC Mono', var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 24px;
  border: 1px solid var(--night-accent);
  background: var(--night-accent);
  color: var(--night-bg);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  border-radius: var(--radius);
}
.night .cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--night-bg); }
.night .cta-secondary {
  font-family: 'AC Sans', var(--sans);
  font-size: 0.9rem;
  color: var(--night-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.night .cta-secondary:hover { color: var(--night-ink); border-bottom-color: var(--night-muted); }

.night .demo-disclaimer {
  margin: 1.1rem auto 0;
  font-size: 0.8rem;
  color: var(--night-muted);
  max-width: 46ch;
}

.night .foot-line {
  position: relative;
  z-index: 1;
  margin-top: 3.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--night-line-soft);
  font-family: 'AC Mono', var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--night-muted);
}

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

/* Tag pill */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--accent-border);
  color: var(--accent);
  background: var(--accent-dim);
  letter-spacing: 0.04em;
}

/* Corner registration marks — the site's shared technical motif.
   Apply to a `position: relative` container. */
.corner-frame {
  position: relative;
}
.corner-frame .corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--border-strong);
  border-style: solid;
  border-width: 0;
  opacity: 0.9;
  pointer-events: none;
}
.corner-frame .corner.tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.corner-frame .corner.tr { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
.corner-frame .corner.bl { bottom: 16px; left: 16px; border-bottom-width: 1px; border-left-width: 1px; }
.corner-frame .corner.br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }

/* Maturity status labels — shared vocabulary across product/tech pages:
   what's actually playable vs. an engineering build vs. a physical
   prototype vs. a direction that isn't implemented yet. */
.status-playable { color: var(--accent3); }
.status-build { color: var(--accent); }
.status-prototype { color: var(--accent2); }
.status-direction { color: var(--dim); }

/* Large title inside a demo/track card — the "ACID CELL", "MONO SYNTH"
   style treatment, shared by the homepage demo cards and Studio Jams
   track list. */
.demo-name {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--fg);
}

/* Small maturity/category tag — shared across homepage demo cards and the
   Technology page's product proof cards */
.demo-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 2px;
  display: block;
}

/* Feature/status tables — shared across the Acid Cell and Technology pages */
.feature-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
}

.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.feature-table th,
.feature-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.feature-table td:nth-child(2),
.feature-table th:nth-child(2) {
  white-space: normal;
}

.feature-table thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
}

.feature-table tbody tr:last-child td {
  border-bottom: none;
}

.feature-table tbody td:first-child {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
}

.feature-table tbody td:nth-child(2) {
  color: var(--muted);
}

.feature-table tbody td:last-child {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Article prose */
.prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5rem 0;
  padding: 0.75rem 1.25rem;
  background: var(--accent-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--muted);
}

/* Section index list */
.entry-list {
  list-style: none;
  padding: 0;
}

.entry-list li {
  margin: 0;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.entry-list li:first-child {
  border-top: 1px solid var(--border);
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.entry-date {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dim);
}

.entry-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  display: block;
  margin-bottom: 0.25rem;
}

.entry-title:hover {
  color: var(--accent);
}

.entry-desc {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 600px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.3rem; }
  .container { padding: 0 16px; }
}