/* Concept article — the shared template for the three "What is GEA" deep-dives
   (the geatsc compiler, the layout engine, the canvas API). An editorial,
   research-post style: long-form technical prose, real data in CSS charts.
   Full-width like the blog posts. Type, colour, spacing and buttons all come
   from the design tokens / shared component system, so it themes light & dark.
   One stylesheet, three articles. */

.article {
  color: var(--text-base);
  padding-bottom: var(--space-section-md);
  /* code-window surfaces: light in light mode, the site's code-dark in dark */
  --cw-body: light-dark(#f1f1f4, #12141d);
  --cw-bar: light-dark(#e6e7ec, #0d0f17);
  --cw-edge: var(--border-hairline);
}
.article .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
}
@media (min-width: 1100px) { .article .container { padding-inline: 48px; } }

/* full-width like the blog posts — nothing is constrained to a narrow column */
.art-col { max-width: none; }
.art-wide { max-width: none; }

/* ── header ───────────────────────────────────────────────────────────── */
.art-head {
  padding: var(--space-section-sm) 0 var(--s-6);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--s-6);
}
.art-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin: var(--s-3) 0 0;
}
.art-dek {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.art-meta {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.art-meta span { color: var(--text-base); }

/* ── body prose ───────────────────────────────────────────────────────── */
.art-body > * + * { margin-top: var(--s-5); }
.art-h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin-top: var(--space-section-sm);
}
.art-h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin-top: var(--s-6);
}
.art-body p {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-base);
}
.art-body p.art-soft { color: var(--text-muted); }
.art-body strong { color: var(--text-strong); font-weight: 600; }
.art-body a { color: var(--accent-primary); text-decoration: none; }
.art-body a:hover { text-decoration: underline; }
.art-body ul { margin-left: 0; padding-left: 0; list-style: none; }
.art-body ul li {
  position: relative;
  padding: var(--s-1) 0 var(--s-1) 24px;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-base);
  border-top: 1px solid var(--border-hairline);
}
.art-body ul li:first-child { border-top: 0; }
.art-body ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 6px;
  height: 6px;
  background: var(--accent-primary);
}
.art-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--text-strong);
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  padding: 1px 5px;
}

/* ── figures (charts, code) ───────────────────────────────────────────── */
.art-figure { margin: var(--s-6) 0; }
.art-figure figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-tertiary);
}
.art-figure figcaption b { color: var(--text-base); font-weight: 600; }

/* embedded demo video — YouTube, 16:9, full article width */
.art-video { margin: var(--s-6) 0; }
.art-video-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border-hairline);
}
.art-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.art-fig-more { display: block; margin-top: var(--s-1); }

/* images — preserved from the What-is-GEA overview, shown as clean article figures.
   Capped so they don't dominate the full-width column; portrait shots stay compact. */
.art-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 640px);
  max-height: 420px;
  margin-inline: auto;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
}

/* pipeline diagram — the preserved "Code in, native binaries out" SVG */
.pipeline-diagram { width: 100%; max-width: 620px; margin: 0 auto; }
.pl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pl-line { fill: none; stroke: var(--border-divider); stroke-width: 1; opacity: 0.65; }
.pl-node { fill: var(--surface-1); stroke: var(--border-divider); stroke-width: 1; }
.pl-src  { fill: var(--surface-2); }
.pl-comp { fill: light-dark(#ececef, #161928); stroke: var(--accent-primary-2); stroke-width: 1; }
.pl-tgt  { fill: var(--surface-1); }
.pl-stripe { fill: url(#pl-grad); }
.pl-comp-glow { opacity: 0.85; }
.pl-t { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-anchor: middle; }
.pl-t-src  { fill: var(--text-strong); font-weight: 700; font-size: 14px; }
.pl-t-comp { fill: var(--text-strong); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; }
.pl-cap { font-family: var(--font-mono); text-anchor: middle; }
.pl-cap-form { fill: var(--text-faint); font-size: 9px; letter-spacing: 0.02em; }
.pl-cap-art  { fill: var(--text-secondary); font-size: 10px; font-weight: 600; }
.pl-flow { fill: none; stroke: url(#pl-grad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.16 0.84; stroke-dashoffset: 1; opacity: 0.95; animation: pl-pulse 1.3s linear infinite; }
.pl-flow-trunk { animation-delay: 0s; }
.pl-flow-0 { animation-delay: 0.45s; }
.pl-flow-1 { animation-delay: 0.55s; }
.pl-flow-2 { animation-delay: 0.65s; }
.pl-flow-3 { animation-delay: 0.75s; }
@keyframes pl-pulse { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .pl-flow { animation: none; opacity: 0; } }

/* CSS bar charts — real data, no JS, no external lib */
.chart {
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
}
.chart-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  margin-bottom: var(--s-3);
}
.chart-title span { color: var(--text-tertiary); font-weight: 400; }
.chart-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 0;
}
.chart-label { font-size: var(--fs-sm); color: var(--text-muted); }
.chart-track {
  height: 16px;
  background: var(--surface-3);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}
.chart-bar {
  display: block;
  height: 100%;
  background: var(--accent-primary);
}
.chart-bar.is-muted { background: var(--text-faint); }
.chart-bar.is-mint { background: var(--accent-mint); }
.chart-val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  min-width: 56px;
  text-align: right;
}
@media (max-width: 560px) {
  .chart-row { grid-template-columns: 96px 1fr auto; gap: var(--s-1); }
  .chart-label { font-size: var(--fs-xs); }
}

/* big stat figure (e.g. conformance) — hairline-separated cells */
.art-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
.art-stat { background: var(--bg-page); padding: var(--s-4); }
.art-stat-num {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-primary);
}
.art-stat-label {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
@media (max-width: 560px) { .art-stats { grid-template-columns: 1fr; } }

/* ── code windows — a title bar with macOS traffic lights, themed surfaces ── */
.article pre {
  position: relative;
  margin: var(--s-5) 0;
  padding: 44px 18px 16px; /* top room for the window title bar */
  background: var(--cw-body);
  border: 1px solid var(--cw-edge);
  border-radius: 8px;
  overflow-x: auto;
  line-height: var(--lh-mono);
}
.article pre::before { /* the window title bar */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 34px;
  background: var(--cw-bar);
  border-bottom: 1px solid var(--cw-edge);
  border-radius: 7px 7px 0 0;
}
.article pre::after { /* three traffic-light dots */
  content: '';
  position: absolute;
  top: 12px;
  left: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}
.article pre code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--code-text);
  background: none;
  border: 0;
  padding: 0;
}
.article pre .tok-com { color: var(--code-mute); font-style: italic; }
.article pre .tok-kw, .article pre .tok-sel { color: var(--code-kw); }
.article pre .tok-typ, .article pre .tok-fn, .article pre .tok-prop { color: var(--code-type); }
.article pre .tok-str { color: var(--code-str); }
.article pre .tok-num { color: var(--code-num); }

/* a TS→C++ pair is one window: chrome on the wrapper, two plain panes inside */
.art-pair {
  position: relative;
  margin: var(--s-5) 0;
  padding-top: 34px;
  background: var(--cw-body);
  border: 1px solid var(--cw-edge);
  border-radius: 8px;
  overflow: hidden;
}
.art-pair::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 34px;
  background: var(--cw-bar);
  border-bottom: 1px solid var(--cw-edge);
}
.art-pair::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 16px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}
.art-pair pre { /* panes inside the window — drop their own chrome */
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
}
.art-pair pre::before,
.art-pair pre::after { display: none; }
.art-pair-seam {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  padding: 6px 12px;
  background: var(--cw-bar);
  border-block: 1px solid var(--cw-edge);
}

/* ── pull-quote / callout ─────────────────────────────────────────────── */
.art-callout {
  margin: var(--s-6) 0;
  padding: 4px 0 4px var(--s-4);
  border-left: 2px solid var(--accent-primary);
}
.art-callout p {
  font-size: var(--fs-2xl);
  line-height: var(--lh-base);
  color: var(--text-strong);
  font-weight: 500;
}

/* ── closing CTA ──────────────────────────────────────────────────────── */
.art-cta {
  margin-top: var(--space-section-sm);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-hairline);
}
.art-cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* buttons mirror the canonical component system (components.css):
   secondary = hairline outline filling on hover, primary = filled indigo */
.art-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-sans);
  font-size: var(--fs-base-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-strong);
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.art-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-strong); }
.art-btn span { transition: transform var(--t-base); }
.art-btn:hover span { transform: translateX(3px); }
.art-btn-primary { color: #fff; background: var(--accent-primary); border-color: var(--accent-primary); }
.art-btn-primary:hover { color: #fff; background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); }
/* the CTA sits inside .art-body, whose generic `a { color: accent }` rule would
   otherwise recolour the buttons (invisible primary) — re-assert with a higher-
   specificity selector so the button colours win */
.art-body a.art-btn { color: var(--text-strong); text-decoration: none; }
.art-body a.art-btn:hover { color: var(--text-strong); }
.art-body a.art-btn-primary,
.art-body a.art-btn-primary:hover { color: #fff; }

/* image & diagram captions sit centred, aligned under their centred figure */
.art-figure:has(img) figcaption,
.art-figure:has(.pipeline-diagram) figcaption { text-align: center; }

/* alternating image / text rows — photos sit beside the prose (left, then right,
   then left …) instead of stacked & centred, which saves a lot of vertical space */
.art-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
  margin: var(--space-section-sm) 0;
}
.art-split-text > * + * { margin-top: var(--s-4); }
.art-split-text .art-h2 { margin-top: 0; }
.art-split-media { margin: 0; }
.art-split-media figcaption { text-align: center; }
.art-split.is-reverse .art-split-media { order: 2; } /* image on the right */
@media (max-width: 760px) {
  .art-split { grid-template-columns: 1fr; gap: var(--s-4); }
  .art-split.is-reverse .art-split-media { order: 0; } /* image back on top */
}

/* principles — a hairline matrix (the "table" layout on the overview) */
.art-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: var(--s-6) 0;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
.art-principle { background: var(--bg-page); padding: var(--s-4); }
.art-principle-n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
}
.art-principle-title {
  margin-top: var(--s-1);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-strong);
}
.art-principle-body {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
@media (max-width: 560px) { .art-principles { grid-template-columns: 1fr; } }

/* ── Contact page — reuses this article system (pageCss = concept.css). The two
   contact paths reuse the .art-stats hairline grid; these scoped rules make the
   cells behave as mailto links and lay them out two-up. Token-driven, themes
   light & dark, sharp corners. ── */
.contact .contact-paths { grid-template-columns: 1fr 1fr; }
.contact .contact-path {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  text-decoration: none;
  transition: background var(--t-base);
}
.contact .contact-path:hover { background: var(--surface-2); }
.contact .contact-path-kind {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
}
.contact .contact-path-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  color: var(--text-strong);
}
.contact .contact-path-mail {
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.contact .contact-path:hover .contact-path-mail { color: var(--accent-primary); }
/* collapse to one column on mobile — needs .contact specificity to beat the
   2-up override above (the inherited .art-stats 1fr media rule alone can't) */
@media (max-width: 560px) { .contact .contact-paths { grid-template-columns: 1fr; } }