/* ============================================================
   MontageJS — "The Stack"  ·  clean technical-magazine theme
   Midnight-indigo ink · electric-cyan + warm-coral accents
   ============================================================ */

:root {
  --paper:      #F4F2EC;
  --paper-2:    #FBFAF6;
  --panel:      #FFFFFF;
  --ink:        #141726;
  --ink-2:      #3A3E52;
  --muted:      #6A6E82;
  --faint:      #8A8E9E;
  --line:       #E4E0D2;
  --line-2:     #D8D3C4;
  --rule:       #141726;

  --link:       #145EA8;
  --link-hover: #1E7FCE;
  --cyan:       #3FC7E0;
  --coral:      #E07A5A;

  --code-bg:    #0D1020;
  --code-bar:   #151933;
  --code-line:  #262B45;
  --code-text:  #C9CEE6;

  /* section accents */
  --acc-javascript: #1E8BA8;
  --acc-frameworks: #C25A38;
  --acc-frontend:   #3F9683;
  --acc-platform:   #A07A20;
  --acc-learning:   #8A5AC0;

  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "Public Sans", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1280px;
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
::selection { background: var(--cyan); color: var(--ink); }
code, pre, kbd { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 44px; }
[id] { scroll-margin-top: 92px; }
.mono-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Site header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,246,.9);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: flex-start; padding-block: 18px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand .mark { width: 11px; height: 22px; background: var(--ink); border-radius: 2px; display: inline-block; }
.brand .word { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: var(--ink); }
.brand .word b { color: var(--link); font-weight: 700; }
.site-nav { display: flex; gap: 26px; font-weight: 600; font-size: 15px; flex-wrap: wrap; margin-left: auto; }
.site-nav a { color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); border-bottom: 2px solid var(--coral); padding-bottom: 3px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer;
}
.btn:hover { background: #23283f; color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: rgba(20,23,38,.06); color: var(--ink); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; padding: 0; flex-shrink: 0; }
.theme-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle:hover { border-color: var(--link); color: var(--link); }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--paper-2); margin-top: 64px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-block: 30px; }
.site-foot .word { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); }
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14.5px; }
.foot-nav a { color: var(--muted); }
.foot-nav a:hover { color: var(--ink); }
.site-foot .mono-label { color: var(--faint); }

/* ---------- Hero (homepage flagship) ---------- */
.hero { border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; }
.hero-copy { padding: 64px 44px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.hero-kicker { color: var(--link); margin-bottom: 20px; }
.hero h1 { font-size: clamp(38px, 5vw, 62px); margin: 0 0 20px; text-wrap: balance; }
.hero .dek { font-size: 21px; line-height: 1.55; color: var(--ink-2); margin: 0 0 26px; max-width: 30em; text-wrap: pretty; }
.hero-meta { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); flex-wrap: wrap; }
.hero-meta .by { color: var(--ink); font-weight: 600; }
.hero-media { position: relative; min-height: 460px; background: #E9E5D8; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; font-family: var(--mono); font-size: 12.5px; color: #DCE6F2; background: linear-gradient(0deg, rgba(9,11,22,.85), transparent); }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
kbd.chip { background: var(--line); border-radius: 5px; padding: 2px 7px; font-size: 12.5px; color: var(--ink-2); }
.hero code, .dek code { font-family: var(--mono); font-size: .82em; background: #E9E5D8; padding: 1px 6px; border-radius: 4px; }

/* ---------- Section headers ---------- */
.band { padding-block: 52px; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.band-head h2 { font-size: 28px; margin: 0; }
.band-head .kick { color: var(--link); margin-bottom: 6px; }
.band-head a { font-family: var(--mono); font-size: 13px; }

/* ---------- Featured cards (even height) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(20,23,38,.4); }
.card .thumb { aspect-ratio: 16 / 10; background: #E9E5D8; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card .tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; }
.card h3 { font-size: 22px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { font-family: var(--mono); font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.tag.javascript { color: var(--acc-javascript); }
.tag.frameworks { color: var(--acc-frameworks); }
.tag.frontend { color: var(--acc-frontend); }
.tag.platform { color: var(--acc-platform); }
.tag.learning { color: var(--acc-learning); }

/* list-style feed (secondary) */
.feed-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.feed-item { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.feed-item .n { font-family: var(--mono); font-size: 13px; color: var(--faint); }
.feed-item h3 { font-size: 20px; margin: 0 0 4px; }
.feed-item .sub { font-size: 15px; color: var(--muted); margin: 0; }
.feed-item { transition: background .12s ease; }
.feed-item:hover { background: rgba(20,23,38,.03); }
.feed-item:hover h3 { color: var(--link); }
.feed-item .rt { font-family: var(--mono); font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.more-toggle { display: none; }
.more-list { display: none; }
.more-toggle:checked ~ .more-list { display: grid; }
.more-label { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; cursor: pointer; font-family: var(--mono); font-size: 13px; color: var(--link); }
.more-label .lbl-less { display: none; }
.more-toggle:checked ~ .more-label .lbl-more { display: none; }
.more-toggle:checked ~ .more-label .lbl-less { display: inline; }

/* ---------- WHICH ONE WHEN (signature) ---------- */
.wow { background: var(--paper-2); border-block: 1px solid var(--line); }
.wow-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px; }
.wow-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wow-filter { font-family: var(--mono); font-size: 12.5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.wow-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wow-table { width: 100%; border-collapse: collapse; }
.wow-table th, .wow-table td { text-align: left; padding: 15px 14px; border-top: 1px solid var(--line); vertical-align: top; font-size: 15.5px; }
.wow-table thead th { border-top: none; border-bottom: 2px solid var(--rule); font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.wow-table thead th .arw { opacity: .35; }
.wow-table thead th[aria-sort="ascending"] .arw::after { content: " ↑"; opacity: 1; }
.wow-table thead th[aria-sort="descending"] .arw::after { content: " ↓"; opacity: 1; }
.wow-pair { font-family: var(--serif); font-weight: 700; font-size: 17px; white-space: nowrap; }
.wow-pair .vs { color: var(--faint); font-family: var(--sans); font-weight: 400; font-size: 13px; margin: 0 6px; }
.wow-pick { color: var(--ink-2); }
.wow-pick b { color: var(--ink); font-weight: 600; }
.tag-pill { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 5px; background: rgba(63,199,224,.16); color: #0F7F97; margin-right: 4px; }

/* ---------- Code panel (signature) ---------- */
.codecard { border-radius: 14px; overflow: hidden; border: 1px solid var(--code-line); background: var(--code-bg); display: flex; flex-direction: column; }
.codecard .bar { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: var(--code-bar); border-bottom: 1px solid var(--code-line); }
.codecard .fname { font-family: var(--mono); font-size: 12.5px; color: #8FA9C9; display: flex; align-items: center; gap: 8px; }
.codecard .dots { display: flex; gap: 6px; }
.codecard .dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.codecard .dots i:nth-child(1){ background: var(--coral); } .codecard .dots i:nth-child(2){ background: var(--cyan); } .codecard .dots i:nth-child(3){ background: #4A5182; }
.copy-btn { font-family: var(--mono); font-size: 11.5px; color: var(--ink); background: var(--cyan); border: none; padding: 6px 13px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.copy-btn:hover { filter: brightness(1.06); }
.copy-btn.copied { background: #6AC4B0; }
.codecard pre { margin: 0; padding: 20px; font-size: 14px; line-height: 1.7; color: var(--code-text); overflow: auto; }
.codecard.tall pre { flex: 1; }
/* token colors */
.tok-com { color: #6E7391; font-style: italic; }
.tok-key { color: #FF8A73; }
.tok-str { color: #6FD3C6; }
.tok-fn  { color: #3FC7E0; }
.tok-num { color: #E4B678; }
.tok-typ { color: #E4B678; }
.tok-cls { color: #7FB2F0; }

/* ---------- Tribute panel ---------- */
.tribute { border-radius: 14px; border: 1px solid var(--line); background: var(--panel); padding: 28px; display: flex; flex-direction: column; }
.tribute .kick { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--link); margin-bottom: 12px; text-transform: uppercase; }
.tribute h3 { font-size: 24px; margin: 0 0 12px; }
.tribute p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.tribute p:last-of-type { color: var(--muted); font-size: 14.5px; }
.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; }

/* ---------- Sponsor strip ("The colophon") ---------- */
.colophon { background: var(--ink); color: #C9CEE6; }
.colophon .wrap { padding-block: 40px; }
.colophon .kick { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--cyan); text-transform: uppercase; }
.colophon h2 { color: var(--paper); font-size: 24px; margin: 8px 0 4px; }
.colophon .lede { color: #9AA0B8; font-size: 15px; margin: 0 0 24px; max-width: 60ch; }
.sponsor-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sponsor { flex: 0 0 calc((100% - 60px) / 6); display: flex; align-items: center; justify-content: center; background: #0D1020; border: 1px solid #262B45; border-radius: 10px; aspect-ratio: 16 / 7; overflow: hidden; padding: 12px; transition: border-color .12s ease, transform .12s ease; }
.sponsor:hover { transform: translateY(-2px); }
.sponsor img { max-width: 100%; max-height: 100%; object-fit: contain; opacity:1; }
.sponsor:hover { border-color: #3a4467; }
.sponsor-blurb { display: none; }

/* ============================================================
   ARTICLE / POST
   ============================================================ */
.post-hero { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.post-hero .wrap { padding-block: 44px 40px; }
.post-crumbs { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 22px; }
.post-crumbs a { color: var(--muted); } .post-crumbs a:hover { color: var(--ink); }
.post-tag { font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
.post-hero h1 { font-size: clamp(34px, 4.6vw, 56px); margin: 12px 0 16px; max-width: 20ch; text-wrap: balance; }
.post-hero .dek { font-size: 21px; line-height: 1.5; color: var(--ink-2); margin: 0 0 22px; max-width: 46ch; text-wrap: pretty; }
.post-meta { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); flex-wrap: wrap; }
.post-meta .by { color: var(--ink); font-weight: 600; }
.post-figure-lead { margin: 0; }
.post-figure-lead img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
.post-figure-lead figcaption { font-size: 14px; color: var(--muted); padding: 10px 44px; max-width: var(--maxw); margin: 0 auto; }

/* article layout: wide measure, breakout figures */
.article-wrap { max-width: 1160px; margin: 0 auto; padding-inline: 44px; }
.article-body {
  max-width: var(--measure);
  margin: 48px 0 0;
  padding-inline: 0;
  font-size: 20px;
  line-height: 1.72;
  color: var(--ink);
}
.article-body > * { margin-inline: auto; }
.article-body p, .article-body ul, .article-body ol, .article-body h2, .article-body h3, .article-body .note { max-width: var(--measure); }
.article-body p { margin: 0 0 1.35em; text-wrap: pretty; }
.article-body h2 { font-size: 30px; margin: 2em 0 .6em; padding-top: .3em; }
.article-body h2 .secno { font-family: var(--mono); font-size: 15px; color: var(--coral); font-weight: 500; margin-right: 12px; letter-spacing: 0; }
.article-body h3 { font-size: 23px; margin: 1.6em 0 .5em; }
.article-body ul, .article-body ol { padding-left: 1.2em; margin: 0 0 1.35em; }
.article-body li { margin-bottom: .5em; }
.article-body a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(20,94,168,.35); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--link); }
.article-body strong { font-weight: 700; }
.article-body > p:first-of-type::first-letter,
.article-body .lead + p::first-letter { }
.article-body .drop::first-letter {
  font-family: var(--serif); font-weight: 700; float: left; font-size: 4.2em; line-height: .82; padding: 6px 12px 0 0; color: var(--ink);
}
.article-body code {
  font-family: var(--mono); font-size: .82em; background: #E9E5D8; padding: 1px 6px; border-radius: 4px; color: #43310f;
}
.article-body pre { max-width: 900px; }
.article-body .codecard { margin: 0 auto 1.6em; max-width: 900px; }
.article-body .codecard code { background: none; padding: 0; color: inherit; }

/* ---------- palette: text/structure ---------- */
.lead { font-family: var(--serif); font-size: 25px; line-height: 1.4; color: var(--ink); margin: 0 0 1.1em; font-weight: 500; }
.pullquote { border: none; margin: 1.6em auto; max-width: 900px; padding: 0; }
.pullquote p { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.18; color: var(--ink); margin: 0; text-wrap: balance; border-left: 4px solid var(--coral); padding-left: 26px; }
.blockquote { margin: 1.6em auto; max-width: var(--measure); padding: 4px 0 4px 26px; border-left: 3px solid var(--line-2); }
.blockquote p { font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--ink-2); margin: 0 0 .4em; }
.blockquote cite { font-family: var(--mono); font-size: 13px; color: var(--muted); font-style: normal; }
.callout { background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 10px; padding: 20px 24px; margin: 1.6em auto; max-width: var(--measure); }
.callout p { margin: 0; font-size: 17px; color: var(--ink-2); }
.callout p + p { margin-top: .6em; }
.note { font-size: 16px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 1.6em auto; }
.note::before { content: "Note — "; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--coral); }

/* ---------- palette: data/comparison ---------- */
.versus, .datatable { width: 100%; border-collapse: collapse; margin: 1.6em auto; max-width: 900px; font-size: 16px; }
.versus caption, .datatable caption { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: left; margin-bottom: 10px; }
.versus th, .versus td, .datatable th, .datatable td { padding: 13px 15px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.datatable thead th, .versus thead th { background: var(--paper-2); font-family: var(--sans); font-weight: 700; font-size: 14px; }
.datatable tbody tr:nth-child(even) { background: rgba(20,23,38,.02); }
.versus tbody th { background: var(--ink); color: var(--paper); font-family: var(--serif); font-size: 17px; width: 1%; white-space: nowrap; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 1.6em auto; max-width: 900px; }
.statblock { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1; color: var(--ink); }
.stat-num .u { font-size: 22px; color: var(--coral); }
.stat-label { font-size: 14px; color: var(--muted); line-height: 1.35; }
.timeline { list-style: none; margin: 1.6em auto; max-width: var(--measure); padding: 0; border-left: 2px solid var(--line-2); }
.timeline li { position: relative; padding: 0 0 24px 26px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--coral); }
.timeline .t-when { display: block; font-family: var(--mono); font-size: 13px; color: var(--link); margin-bottom: 3px; }
.timeline .t-what { display: block; font-size: 17px; color: var(--ink-2); }

/* ---------- palette: charts ---------- */
.chart { margin: 1.8em auto; max-width: 900px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; }
.chart .bar-rect { fill: var(--link); }
.chart .bar-rect.alt { fill: var(--coral); }
.chart .bar-label { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }
.chart .bar-val { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.chart .axis { stroke: var(--line-2); stroke-width: 1; }
.chart .line-path { fill: none; stroke: var(--link); stroke-width: 2.5; }
.chart .line-area { fill: rgba(20,94,168,.08); }
.chart .dot { fill: var(--coral); }
.chart .grid { stroke: var(--line); stroke-width: 1; }

/* ---------- palette: media/figures ---------- */
.article-figure { margin: 1.8em auto; max-width: 1000px; }
.article-figure img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.article-figure figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; max-width: var(--measure); }
.article-figure.breakout { max-width: 1160px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.8em auto; max-width: 1000px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.gallery figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.map-figure { margin: 1.8em auto; max-width: 1000px; }
.map-figure .map-slot { aspect-ratio: 16/9; background: repeating-linear-gradient(45deg, #ECE8DC, #ECE8DC 12px, #E9E5D8 12px, #E9E5D8 24px); border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--faint); font-family: var(--mono); font-size: 13px; }
.map-figure .map-slot::after { content: "Map"; }
.map-figure figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* ---------- palette: cards/references ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 1.8em auto; max-width: 1000px; }
.profile-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.profile-card .p-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.profile-card.no-photo::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--cyan), var(--link)); margin-bottom: 12px; }
.profile-card h3 { font-size: 19px; margin: 0 0 2px; }
.profile-card .p-role { font-family: var(--mono); font-size: 12.5px; color: var(--coral); margin: 0 0 10px; }
.profile-card p { font-size: 15px; color: var(--ink-2); margin: 0 0 10px; }
.profile-card .p-links a { font-size: 14px; margin-right: 12px; }
.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 1.8em auto; max-width: 1000px; }
.org-card { display: flex; flex-direction: column; gap: 3px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.org-card:hover { border-color: var(--link); }
.org-logo { width: 32px; height: 32px; border-radius: 7px; margin-bottom: 6px; }
.org-card.no-logo .org-logo { background: var(--line); }
.org-name { font-weight: 700; font-size: 16px; color: var(--ink); font-family: var(--serif); }
.org-host { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.entity-ref { font-weight: 600; white-space: nowrap; }
.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 1em 0 0; }
.further-grid a { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: block; color: var(--ink); }
.further-grid a:hover { border-color: var(--link); transform: translateY(-2px); }

/* related block */
.related { border-top: 2px solid var(--rule); margin: 56px auto 0; max-width: 1000px; padding-top: 28px; }
.related h2 { font-size: 22px; margin: 0 0 16px; }
.related-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.related-links a { display: block; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.related-links a:hover { border-color: var(--link); transform: translateY(-2px); }
.related-links .r-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--coral); display: block; margin-bottom: 6px; }
.related-links .r-title { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); }

/* ---------- category / index pages ---------- */
.cat-hero { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.cat-hero .wrap { padding-block: 56px; }
.cat-hero .secno { font-family: var(--mono); font-size: 13px; color: var(--link); }
.cat-hero h1 { font-size: clamp(40px, 6vw, 68px); margin: 10px 0 14px; }
.cat-hero .blurb { font-size: 22px; color: var(--ink-2); max-width: 40ch; margin: 0; }
.cat-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.cat-list li { border-bottom: 1px solid var(--line); }
.cat-list a { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 26px 0; color: var(--ink); }
.cat-list a:hover .cl-title { color: var(--link); }
.cat-list .cl-title { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0 0 6px; }
.cat-list .cl-sub { font-size: 16px; color: var(--muted); margin: 0; max-width: 60ch; }
.cat-list .cl-rt { font-family: var(--mono); font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.cat-thumb { width: 150px; aspect-ratio: 16/10; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }

/* sections hub */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.hub-card { border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.hub-card:hover { border-color: var(--link); transform: translateY(-3px); }
.hub-card .secno { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.hub-card h2 { font-size: 26px; margin: 0; }
.hub-card p { margin: 0; color: var(--muted); font-size: 16px; }
.hub-card .cnt { font-family: var(--mono); font-size: 12.5px; color: var(--link); margin-top: auto; }

/* simple page (about/contact/404) */
.page-hero { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.page-hero .wrap { padding-block: 56px; }
.page-hero h1 { font-size: clamp(38px, 5vw, 60px); margin: 0 0 12px; }
.page-hero .dek { font-size: 21px; color: var(--ink-2); max-width: 46ch; margin: 0; }
.prose { max-width: var(--measure); margin: 44px auto 0; padding-inline: 0; font-size: 19px; line-height: 1.7; }
.prose h2 { font-size: 26px; margin: 1.6em 0 .5em; }
.prose p { margin: 0 0 1.2em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; list-style: none; padding: 0; }
.contact-methods li { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.contact-methods .cm-head { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 6px; }
.contact-methods svg { width: 20px; height: 20px; stroke: var(--link); fill: none; stroke-width: 1.7; }
.notfound { text-align: center; padding: 100px 44px; }
.notfound .big { font-family: var(--mono); font-size: 90px; color: var(--coral); line-height: 1; }
.notfound h1 { font-size: 40px; margin: 16px 0 12px; }
.notfound p { color: var(--muted); font-size: 19px; margin: 0 0 28px; }

/* styleguide */
.sg-section { padding-block: 40px; border-bottom: 1px solid var(--line); }
.sg-section > h2 { font-size: 30px; margin: 0 0 6px; }
.sg-section > .sg-note { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0 0 24px; }
.sg-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.sg-swatch { width: 120px; }
.sg-swatch .chip { height: 64px; border-radius: 10px; border: 1px solid var(--line); }
.sg-swatch .lab { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 6px; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .wrap, .article-wrap, .cat-hero .wrap, .post-hero .wrap { padding-inline: 22px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { border-right: none; border-bottom: 1px solid var(--line); padding: 40px 22px; }
  .hero-media { min-height: 300px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .sponsor { flex-basis: calc((100% - 24px) / 3); }
  .article-body { font-size: 18.5px; padding-inline: 0; }
  .post-figure-lead figcaption { padding-inline: 22px; }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-head .wrap { flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
  .site-head .btn { margin-left: auto; }
  .site-head.nav-open .site-nav { display: flex; flex-direction: column; gap: 0; order: 5; width: 100%; margin-top: 6px; border-top: 1px solid var(--line); }
  .site-head.nav-open .site-nav a { padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 17px; }
  .site-head.nav-open .site-nav a.active { border-bottom: 1px solid var(--line); padding-bottom: 15px; }
}
/* ⚠️ the closing brace above was MISSING: the 900px block never closed, so every rule from here to
   the end of the file — dark mode, the sponsor contrast fix, the colophon sponsor layout, the blurb
   rows — sat inside @media (max-width:900px) and never applied on desktop. Restored where the
   responsive section obviously ends, before the 560px block opens. */
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .sponsor { flex-basis: calc((100% - 12px) / 2); }
  .band-head { flex-direction: column; align-items: flex-start; }
  .feed-item { grid-template-columns: auto 1fr; }
  .feed-item .rt { grid-column: 2; }
  .pullquote p { font-size: 24px; }
  .cat-list a { grid-template-columns: 1fr; }
  .cat-thumb { display: none; }
  .stat-num { font-size: 34px; }
  .wow-table thead { display: none; }
  .wow-table, .wow-table tbody, .wow-table tr, .wow-table td { display: block; width: 100%; }
  .wow-table td { border: none; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .wow-table tr { border-bottom: 2px solid var(--rule); padding: 12px 0; }
  .wow-table td::before { content: attr(data-h); font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--faint); display: block; }
}

/* ============================================================
   DARK MODE
   ============================================================ */
:root[data-theme="dark"] {
  --paper: #10131F; --paper-2: #161A2A; --panel: #171B2C;
  --ink: #E7E9F2; --ink-2: #B7BDD6; --muted: #99A0B8; --faint: #6E7391;
  --line: #272C48; --line-2: #31375A; --rule: #3A4066;
  --link: #5CC7E6; --link-hover: #8BDDEF;
  --acc-javascript: #3FC7E0; --acc-frameworks: #F0906F; --acc-frontend: #6AC4B0; --acc-platform: #D6B255; --acc-learning: #BB93E4;
}
[data-theme="dark"] .site-head { background: rgba(16,19,31,.9); }
[data-theme="dark"] .hero-media, [data-theme="dark"] .card .thumb, [data-theme="dark"] .cat-thumb { background: #0E1120; }
[data-theme="dark"] .article-body code, [data-theme="dark"] .hero code, [data-theme="dark"] .dek code { background: rgba(63,199,224,.14); color: #BCE7F2; }
[data-theme="dark"] .tag-pill { background: rgba(63,199,224,.16); color: #7FE0F0; }
[data-theme="dark"] .datatable tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
[data-theme="dark"] .datatable thead th, [data-theme="dark"] .versus thead th { background: #1B2038; }
[data-theme="dark"] .versus tbody th { background: #1E2340; color: #E7E9F2; }
[data-theme="dark"] .map-figure .map-slot { background: repeating-linear-gradient(45deg, #141828, #141828 12px, #171C2E 12px, #171C2E 24px); }
[data-theme="dark"] .colophon { background: #0B0E18; border-top: 1px solid var(--line); }
[data-theme="dark"] .colophon h2 { color: #E7E9F2; }
[data-theme="dark"] .feed-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .chart .line-area { fill: rgba(92,199,230,.12); }
[data-theme="dark"] .btn { background: var(--cyan); border-color: var(--cyan); color: #0E1120; }
[data-theme="dark"] .btn:hover { background: #6FDCEE; color: #0E1120; }
[data-theme="dark"] .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
[data-theme="dark"] .btn.ghost:hover { background: rgba(255,255,255,.06); color: var(--ink); }

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* colophon: show sponsor blurbs (match the fleet — visible descriptions) */
.colophon .sponsor{flex:0 0 calc((100% - 45px)/4)!important;flex-direction:column;gap:8px;align-items:center;justify-content:flex-start}
.colophon .sponsor img{object-fit:contain}
.colophon .sponsor-blurb{display:block!important;font-size:12.5px;color:#9AA0B8;text-align:center;margin-top:2px}
@media(max-width:820px){.colophon .sponsor{flex:0 0 calc((100% - 15px)/2)!important}}
/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
/* ⚠️ RETIRED: this used to force color:rgb(27,125,223)!important on every blurb. It was a contrast
   "lift" computed from an INHERITED LINK BLUE — the colophon rule above said `line-color`, which is not
   a property, so the blurb never got its grey and took the anchor's --link colour instead. Operator:
   "font of money blurbs is blue for no reason". The blurb now takes this build's own secondary-copy
   colour for the ground it sits on: var(--muted), as Design uses for .card p, and #9AA0B8 on the dark
   colophon, as Design uses for .lede. Both measured at or above 4.5:1 on their actual grounds. */
.sponsor-blurb.sponsor-blurb{color:var(--muted)!important;opacity:1!important}
.colophon .sponsor-blurb.sponsor-blurb{color:#9AA0B8!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-strip .sponsor.sponsor img{height:44px!important}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 410px of tier across
   10 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 832px (90 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body p, .article-body ul, .article-body ol, .article-body h2, .article-body h3, .article-body .note) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article div.article-body{--measure:min(76.982ch, 100%)!important}
}
/* op-article-width:end */

/* op-money-readable: the colophon tiles are Design's logo plates — aspect-ratio 16/7 with overflow:hidden —
   and "colophon: show sponsor blurbs" above put a blurb in them. At 1024 a plate is ~98px tall: the blurb's
   second line was sliced through the middle. With overflow visible the 16/7 ratio stays wherever the copy
   fits and a plate grows only as much as its copy needs (the ratio's content minimum). */
.colophon .sponsor-strip .sponsor{overflow:visible!important}
/* op-money-readable:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-strip 5 rows at 900). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-hover-pad */
.feed-item{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span > img.cat-thumb,
  a.card > div.thumb > img,
  article > figure.post-figure-lead > img,
  div.hero-grid > figure.hero-media > img){height:auto}
/* op-img-dims:end */
@media (max-width:719px){.wow-panel.wow-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}}