/* ─────────────────────────────────────────────────────────────────────────────
   EMAIL CHAOS THEORY — shared shell: tokens, nav, sections, cards, chart.
   All globals are namespaced --ect-* so the hero, the footer and every
   archived issue's scoped CSS keep rendering off their own variables.
   Load AFTER each page's inline <style> block.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* surface + ink — cool porcelain */
  --ect-page:oklch(96.6% 0.006 250);--ect-paper:oklch(99% 0.003 250);--ect-panel:#12151c;
  --ect-ink:oklch(14% 0.014 262);--ect-ink-2:oklch(42% 0.012 255);--ect-ink-3:oklch(58% 0.011 255);
  --ect-line:oklch(90.5% 0.007 250);--ect-line-2:oklch(84% 0.010 250);
  --ect-hi:oklch(100% 0 0 / .92);          /* the light side of every relief */
  --ect-lo:240 24% 16%;                    /* the shadow side, as hsl parts */
  /* accent + data */
  --ect-accent:oklch(52% 0.22 262);--ect-accent-ink:oklch(42% 0.20 262);--ect-accent-wash:oklch(52% 0.22 262 / 0.09);
  --ect-data:oklch(74% 0.045 258);--ect-data-2:oklch(62% 0.075 232);
  --ect-pass:oklch(52% 0.13 150);--ect-warn:oklch(60% 0.15 62);--ect-fail:oklch(50% 0.17 25);
  /* type */
  --ect-serif:'DM Serif Display',Georgia,serif;--ect-sans:'Instrument Sans','Helvetica Neue',Helvetica,sans-serif;--ect-mono:'JetBrains Mono',ui-monospace,monospace;
  --ect-t-display:clamp(2.9rem,5.6vw,5rem);--ect-t-h2:clamp(2.1rem,3.9vw,3.3rem);--ect-t-h3:clamp(1.32rem,1.9vw,1.72rem);
  --ect-t-lede:clamp(1.02rem,1.25vw,1.18rem);--ect-t-body:1rem;--ect-t-sm:0.875rem;--ect-t-micro:0.6rem;
  /* space — 8px grid */
  --ect-s1:8px;--ect-s2:16px;--ect-s3:24px;--ect-s4:32px;--ect-s5:48px;--ect-s6:64px;--ect-s7:96px;--ect-s8:128px;--ect-s9:160px;
  --ect-r:14px;--ect-r-sm:8px;
  /* relief — soft raised / inset, two levels each */
  --ect-e1:0 1px 1px hsl(var(--ect-lo) / .06),0 10px 22px -10px hsl(var(--ect-lo) / .18),inset 0 1px 0 var(--ect-hi);
  --ect-e2:0 2px 3px hsl(var(--ect-lo) / .06),0 26px 44px -16px hsl(var(--ect-lo) / .22),inset 0 1px 0 var(--ect-hi);
  --ect-flat:0 0 0 hsl(var(--ect-lo) / 0),0 2px 6px -6px hsl(var(--ect-lo) / .10),inset 0 1px 0 var(--ect-hi);
  --ect-in1:inset 0 1px 3px hsl(var(--ect-lo) / .10),inset 0 -1px 0 oklch(100% 0 0 / .8);
  --ect-in2:inset 0 2px 6px hsl(var(--ect-lo) / .16),inset 0 -1px 0 oklch(100% 0 0 / .85);
  --ect-ease:cubic-bezier(.2,.7,.3,1);
}

/* Re-point the article tokens inside #content only, so the hero and the footer
   (both outside #content) keep their own values untouched. */
/* Re-point the article tokens inside #content only, so the hero and the footer
   (both outside #content) keep their own values untouched. An atmospheric light
   field sits under everything — viewport-fixed, so it reads the same on a short
   index and a long article. */
#content{--bg:oklch(96.6% 0.006 250);--paper:oklch(99% 0.003 250);--border:oklch(90.5% 0.007 250);--mid:oklch(49% 0.012 255);position:relative;background-color:oklch(96.6% 0.006 250);background-image:radial-gradient(58% 42% at 10% 4%,oklch(70% 0.15 252 / .13),transparent 64%),radial-gradient(52% 38% at 92% 18%,oklch(78% 0.13 302 / .11),transparent 66%),radial-gradient(64% 44% at 46% 66%,oklch(86% 0.11 76 / .12),transparent 68%),radial-gradient(48% 34% at 8% 92%,oklch(74% 0.13 214 / .10),transparent 64%);background-attachment:fixed;background-repeat:no-repeat}
body{background:oklch(96.6% 0.006 250)}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
#site-header.ect-nav{position:fixed;top:0;left:0;right:0;z-index:400;display:flex;align-items:center;justify-content:space-between;gap:var(--ect-s4);padding:0.95rem clamp(1.25rem,3.2vw,2.4rem);pointer-events:auto;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;transition:background .28s var(--ect-ease),border-color .28s var(--ect-ease),padding .28s var(--ect-ease)}
#site-header.ect-nav.ect-nav--solid{background:oklch(96.6% 0.006 250 / .82);backdrop-filter:blur(22px) saturate(1.5);border-bottom-color:var(--ect-line);padding-top:0.7rem;padding-bottom:0.7rem;box-shadow:0 1px 0 var(--ect-hi),0 10px 24px -18px hsl(var(--ect-lo) / .35)}
.ect-wordmark{display:flex;align-items:baseline;gap:0.6rem;text-decoration:none}
.ect-wordmark-name{font-family:var(--ect-serif);font-size:1.02rem;letter-spacing:-0.012em;color:oklch(97% 0.01 86);transition:color .28s var(--ect-ease)}
.ect-wordmark-meta{font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.2em;text-transform:uppercase;color:oklch(66% 0.02 262);transition:color .28s var(--ect-ease)}
.ect-nav--solid .ect-wordmark-name{color:var(--ect-ink)}
.ect-nav--solid .ect-wordmark-meta{color:var(--ect-accent)}
.ect-navlinks{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem)}
.ect-navlinks a{font-family:var(--ect-mono);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:oklch(72% 0.01 80);text-decoration:none;transition:color .18s var(--ect-ease)}
.ect-navlinks a:hover{color:oklch(99% 0.01 86)}
.ect-nav--solid .ect-navlinks a{color:var(--ect-ink-2)}
.ect-nav--solid .ect-navlinks a:hover{color:var(--ect-accent)}
.ect-navlinks a.ect-nav-cta{border:1px solid oklch(62% 0.01 80 / .5);border-radius:999px;padding:0.42rem 0.85rem}
.ect-nav--solid .ect-navlinks a.ect-nav-cta{border-color:var(--ect-line-2);color:var(--ect-ink)}
.ect-nav--solid .ect-navlinks a.ect-nav-cta:hover{border-color:var(--ect-accent);color:var(--ect-accent)}
.ect-navlinks a:focus-visible,.ect-wordmark:focus-visible{outline:1px dotted currentColor;outline-offset:4px}
@media (max-width:560px){.ect-navlinks a.ect-nav-hide{display:none}}

/* ── SECTION SHELL ───────────────────────────────────────────────────────── */
.ect-sec{position:relative;background:transparent;padding:var(--ect-s7) clamp(1.25rem,3.2vw,2.4rem)}
.ect-sec--issues{padding-top:var(--ect-s4);padding-bottom:var(--ect-s7)}
.ect-sec--data{border-top:1px solid var(--ect-line);padding-bottom:var(--ect-s8)}
.ect-wrap{max-width:84rem;margin:0 auto}
.ect-wrap--narrow{max-width:68rem}
.ect-sec-head{max-width:44rem;margin-bottom:var(--ect-s6)}
/* section label — a small tactile chip, not a debug line */
.ect-status{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--ect-sans);font-size:0.8rem;font-weight:450;letter-spacing:0.002em;text-transform:none;color:var(--ect-ink-3);margin:0 0 var(--ect-s3);padding:0.44rem 0.85rem;border-radius:999px;background:var(--ect-page);box-shadow:var(--ect-in1)}
.ect-status-key{color:var(--ect-ink);font-weight:500}
.ect-status-dot{width:6px;height:6px;border-radius:50%;background:var(--ect-pass);box-shadow:0 0 0 3px oklch(52% 0.13 150 / .16);flex-shrink:0}
.ect-status-rule{display:none}
.ect-sec-title{font-family:var(--ect-serif);font-size:var(--ect-t-h2);line-height:1.02;letter-spacing:-0.026em;color:var(--ect-ink);margin:0 0 var(--ect-s2)}
.ect-sec-lede{font-family:var(--ect-sans);font-size:var(--ect-t-lede);line-height:1.62;color:var(--ect-ink-2);max-width:36rem;margin:0;text-wrap:pretty}

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.ect-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:var(--ect-s3)}
.ect-card{position:relative;display:flex;flex-direction:column;background:var(--ect-paper);border:1px solid oklch(94% 0.005 250);border-radius:var(--ect-r);box-shadow:var(--ect-e1);text-decoration:none;color:inherit;overflow:hidden;transition:transform .2s var(--ect-ease),box-shadow .2s var(--ect-ease),border-color .2s var(--ect-ease)}
.ect-card:hover{transform:translateY(-4px);box-shadow:var(--ect-e2);border-color:oklch(92% 0.006 250)}
.ect-card:active{transform:translateY(-1px);box-shadow:var(--ect-in1)}
.ect-card:focus-visible{outline:2px solid var(--ect-accent);outline-offset:3px}
.ect-card--feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);margin-bottom:var(--ect-s3)}
/* header-style metadata row */
.ect-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem 0.7rem;padding:0.7rem 1.15rem;border-bottom:1px solid var(--ect-line);font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.1em;text-transform:uppercase;background:oklch(97.4% 0.005 250);box-shadow:inset 0 -1px 0 var(--ect-hi)}
.ect-meta-k{color:oklch(68% 0.008 250)}
.ect-meta-v{color:var(--ect-ink-2);margin-right:0.35rem}
.ect-meta-sp{flex:1}
.ect-meta--inset{margin:-0.35rem -0.35rem 1.6rem;border:none;border-radius:999px;background:var(--ect-page);box-shadow:var(--ect-in1)}
.ect-tag{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.14em;text-transform:uppercase;border:1px solid var(--ect-line-2);border-radius:999px;padding:0.22rem 0.55rem;color:var(--ect-ink-2)}
.ect-tag--interactive{border-color:oklch(52% 0.22 262 / .38);color:var(--ect-accent-ink);background:var(--ect-accent-wash)}
.ect-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--ect-accent);flex-shrink:0}
.ect-tag--interactive .ect-tag-dot{animation:ect-live 2.2s ease-in-out infinite}
@keyframes ect-live{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.ect-card-body{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.4rem 1.35rem}
.ect-card--feature .ect-card-body{padding:clamp(1.8rem,3vw,2.9rem) clamp(1.8rem,3vw,2.9rem) clamp(1.6rem,2.4vw,2.2rem)}
.ect-kicker{font-family:var(--ect-mono);font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ect-accent);margin:0 0 var(--ect-s2)}
.ect-card-title{font-family:var(--ect-serif);font-size:var(--ect-t-h3);line-height:1.08;letter-spacing:-0.018em;color:var(--ect-ink);margin:0 0 0.7rem;transition:color .16s var(--ect-ease)}
.ect-card--feature .ect-card-title{font-size:var(--ect-t-display);line-height:0.96;letter-spacing:-0.032em;margin-bottom:1.1rem;max-width:22ch}
.ect-card:hover .ect-card-title{color:var(--ect-accent)}
.ect-card-dek{font-family:var(--ect-sans);font-size:var(--ect-t-sm);line-height:1.62;color:var(--ect-ink-2);margin:0 0 var(--ect-s3);text-wrap:pretty}
.ect-card--feature .ect-card-dek{font-size:var(--ect-t-lede);line-height:1.6;max-width:38ch;margin-bottom:var(--ect-s4)}
.ect-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ect-s2);margin-top:auto;padding-top:var(--ect-s2);border-top:1px solid var(--ect-line)}
.ect-byline{font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--ect-ink-3)}
.ect-cta{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.16em;text-transform:uppercase;color:var(--ect-accent);white-space:nowrap}
.ect-cta-arr{display:inline-block;transition:transform .16s var(--ect-ease)}
.ect-card:hover .ect-cta-arr{transform:translateX(4px)}
@media (max-width:960px){.ect-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ect-card--feature{grid-template-columns:minmax(0,1fr)}}

@media (max-width:620px){.ect-cards{grid-template-columns:minmax(0,1fr)}}
/* ── FEATURE FRAGMENT (live issue only) ─────────────────────────────────────
   A premium panel tied to whatever the current issue is. Swap by changing
   data-fragment on .ect-panel; archive cards carry no fragment at all.
   ───────────────────────────────────────────────────────────────────────── */
.ect-panel{position:relative;min-height:100%;overflow:hidden;background:radial-gradient(120% 90% at 78% 8%,oklch(30% 0.09 262) 0%,oklch(17% 0.04 262) 42%,#0d1016 100%);border-left:1px solid oklch(26% 0.03 262)}
.ect-panel::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,oklch(100% 0 0 / .022) 3px 4px);pointer-events:none}
@media (max-width:960px){.ect-panel{border-left:none;border-top:1px solid oklch(26% 0.03 262);min-height:19rem}}
.ect-frag{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:1.35rem 1.45rem 1.4rem;font-family:var(--ect-mono)}
.ect-frag-top{display:flex;align-items:center;justify-content:space-between;gap:0.7rem;font-size:var(--ect-t-micro);letter-spacing:0.2em;text-transform:uppercase;color:oklch(72% 0.05 262)}
.ect-frag-live{display:inline-flex;align-items:center;gap:0.38rem;color:oklch(82% 0.13 152)}
.ect-frag-live::before{content:'';width:5px;height:5px;border-radius:50%;background:oklch(76% 0.16 152);box-shadow:0 0 8px oklch(76% 0.16 152);animation:ect-live 2.2s ease-in-out infinite}
.ect-frag-face{margin:auto 0 0;padding:1.4rem 0 0.5rem;font-size:clamp(1.05rem,2vw,1.42rem);line-height:1.24;letter-spacing:0.16em;color:oklch(94% 0.03 262);text-shadow:0 0 20px oklch(62% 0.18 262 / .6);white-space:pre;text-align:center}
.ect-frag-name{font-size:var(--ect-t-micro);letter-spacing:0.28em;text-transform:uppercase;color:oklch(72% 0.10 262);text-align:center;margin:0.55rem 0 auto}
.ect-frag-line{font-size:0.66rem;line-height:1.65;color:oklch(80% 0.02 262);margin:1.1rem 0 0;padding-top:0.9rem;border-top:1px dotted oklch(34% 0.04 262)}
.ect-frag-turns{display:flex;align-items:center;gap:4px;margin-top:0.85rem}
.ect-frag-turn{flex:1;height:3px;border-radius:2px;background:oklch(30% 0.03 262);transition:background .5s var(--ect-ease)}
.ect-frag-turn.is-on{background:linear-gradient(90deg,oklch(62% 0.18 262),oklch(74% 0.12 200))}
.ect-frag-foot{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;margin-top:0.72rem;font-size:0.53rem;letter-spacing:0.18em;text-transform:uppercase;color:oklch(60% 0.03 262)}

/* ── THE BLOOM (generative data visualization) ───────────────────────────── */
.ect-sec--bloom{--bl-w1:oklch(72% 0.13 250 / .30);--bl-w2:oklch(84% 0.09 78 / .26);--bl-w3:oklch(74% 0.11 305 / .20);--bl-accent:oklch(52% 0.22 262);padding-top:var(--ect-s7);padding-bottom:var(--ect-s5);border-top:none}
/* soften the cut where the dark hero meets the page */
.ect-sec--bloom::before{content:'';position:absolute;top:0;left:0;right:0;height:7rem;pointer-events:none;background:linear-gradient(180deg,oklch(22% 0.025 262 / .085),transparent)}
.ect-bl-head{position:relative;max-width:46rem;margin:0 auto var(--ect-s4);text-align:center}
.ect-bl-head .ect-status{justify-content:center}
.ect-bl-title{font-family:var(--ect-serif);font-size:clamp(2.6rem,5.6vw,4.9rem);line-height:0.98;letter-spacing:-0.032em;color:var(--ect-ink);margin:0 0 var(--ect-s2);text-wrap:balance}
.ect-bl-lede{font-family:var(--ect-sans);font-size:var(--ect-t-lede);line-height:1.66;color:var(--ect-ink-2);margin:0 auto;max-width:34rem;text-wrap:pretty}
.ect-bl-stage{max-width:88rem;margin:0 auto}
.ect-bl-canvas{position:relative;width:100%;aspect-ratio:16/6.9;min-height:20rem;max-height:33rem;overflow:hidden;border-radius:var(--ect-r);box-shadow:var(--ect-in1);background:radial-gradient(75% 105% at 14% 112%,var(--bl-w1),transparent 76%),radial-gradient(70% 95% at 86% 108%,var(--bl-w2),transparent 78%),radial-gradient(95% 125% at 50% 130%,var(--bl-w3),transparent 74%)}
.ect-bl-canvas canvas{display:block;position:absolute;inset:0}
.ect-bl-under{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--ect-s4);align-items:start;margin-top:var(--ect-s4);padding-top:var(--ect-s3);border-top:2px solid transparent;border-image:linear-gradient(180deg,var(--ect-line) 0 50%,var(--ect-hi) 50% 100%) 1}
.ect-bl-name{font-family:var(--ect-serif);font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2;letter-spacing:-0.014em;color:var(--ect-ink);margin:0 0 0.4rem}
.ect-bl-note{font-family:var(--ect-sans);font-size:var(--ect-t-sm);line-height:1.6;color:var(--ect-ink-2);margin:0;max-width:46ch;text-wrap:pretty}
.ect-bl-controls{display:flex;flex-direction:column;gap:0.6rem;align-items:flex-end;min-width:0}
.ect-bl-sets{display:inline-flex;flex-wrap:nowrap;gap:2px;padding:4px;border-radius:999px;background:var(--ect-page);box-shadow:var(--ect-in1)}
.ect-bl-set{appearance:none;background:transparent;border:none;padding:0.42rem 0.8rem;border-radius:999px;cursor:pointer;white-space:nowrap;font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.12em;text-transform:uppercase;color:var(--ect-ink-3);transition:color .2s var(--ect-ease),background .2s var(--ect-ease),box-shadow .2s var(--ect-ease)}
.ect-bl-set:hover{color:var(--ect-ink-2)}
.ect-bl-set[aria-selected="true"]{color:var(--ect-ink);background:var(--ect-paper);box-shadow:var(--ect-e1)}
.ect-bl-palettes{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--ect-page);box-shadow:var(--ect-in1)}
.ect-bl-pal{appearance:none;background:transparent;border:none;padding:0.34rem 0.62rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:0.34rem;white-space:nowrap;font-family:var(--ect-mono);font-size:0.53rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ect-ink-3);transition:color .2s var(--ect-ease),background .2s var(--ect-ease),box-shadow .2s var(--ect-ease)}
.ect-bl-pal:hover{color:var(--ect-ink-2)}
.ect-bl-pal[aria-selected="true"]{color:var(--ect-ink);background:var(--ect-paper);box-shadow:var(--ect-e1)}
.ect-bl-dot{width:7px;height:7px;border-radius:50%;opacity:0.5;transition:opacity .2s var(--ect-ease),box-shadow .2s var(--ect-ease)}
.ect-bl-pal[aria-selected="true"] .ect-bl-dot{opacity:1;box-shadow:0 0 0 2px oklch(100% 0 0),0 0 0 3px currentColor}
.ect-bl-set:focus-visible,.ect-bl-pal:focus-visible{outline:1px dotted var(--bl-accent);outline-offset:3px}
@media (max-width:700px){.ect-bl-under{grid-template-columns:minmax(0,1fr)}.ect-bl-controls{align-items:flex-start}.ect-bl-sets,.ect-bl-palettes{justify-content:flex-start}}

/* ── ARCHIVE DIVIDER ─────────────────────────────────────────────────────── */
.ect-divider{display:flex;align-items:center;gap:var(--ect-s2);margin:var(--ect-s5) 0 var(--ect-s3)}
.ect-divider-lbl{font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--ect-ink-2);white-space:nowrap;padding:0.36rem 0.7rem;border-radius:999px;background:var(--ect-page);box-shadow:var(--ect-in1)}
.ect-divider-rule{flex:1;height:2px;border-radius:1px;background:linear-gradient(180deg,var(--ect-line) 0 1px,var(--ect-hi) 1px 2px)}
.ect-divider-count{font-family:var(--ect-mono);font-size:var(--ect-t-micro);letter-spacing:0.14em;text-transform:uppercase;color:oklch(70% 0.010 78)}

.ect-source{font-family:var(--ect-sans);font-size:0.7rem;letter-spacing:0;text-transform:none;color:var(--ect-ink-3);margin:var(--ect-s2) 0 0;line-height:1.5;max-width:60ch;opacity:0.85}

/* ── SCROLL REVEAL ───────────────────────────────────────────────────────── */
.ect-rise{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ect-ease),transform .5s var(--ect-ease)}
.ect-rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ect-rise{opacity:1;transform:none;transition:none}
  .ect-card,.ect-card:hover{transition:none;transform:none}
  .ect-tag--interactive .ect-tag-dot,.ect-frag-live::before{animation:none}
  .ect-frag-turn,#site-header.ect-nav{transition:none}
}