/* ============================================================
   EMAILJAY BRAND STYLESHEET
   Version: 1.2 (brief v1.0 + changes below)
   Usage: <link rel="stylesheet" href="/css/emailjay.css">
   Font:  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">

   Changes from brief v1.0 — copy these back to the other sites:
   - Link colours: sky (#7CAEFF) on paper is 2.2:1, so light mode uses darker
     --link / --link-hover shades (5.6:1). Dark mode keeps sky / coral.
   - New --on-pastel token: text on pastel fills (buttons, nav buttons, tags)
     stays dark in dark mode, where --ink turns light.
   - Doodle SVGs are stroked via CSS, not stroke="var(...)" attributes, which
     browsers ignore. The doodle background comes from the container.
   - Nav: coloured dots replaced by coloured link buttons with icons
     (.ej-nav__link--<colour>, .ej-nav__icon).
   - Newsletter: placeholder colour fixed for dark mode; Kit form styles added.
   - New: .ej-more cross-site links bar, .ej-visually-hidden, focus ring.
   - v1.2: hidden doodle words turn violet and 75% opaque on hover (all variants).
   - v1.2: --on-pastel renamed --on-pastel and --primary added, matching lessonsinemail.com;
     new .ej-doodle-hero, .ej-tool / .ej-tool__section and .ej-tool-widget__title.
   ============================================================ */

/* ─── 2.1 DESIGN TOKENS ─── */
:root {
  /* Brand colours */
  --coral:      #FF9B8E;
  --lemon:      #FFE066;
  --mint:       #7DDBA3;
  --sky:        #7CAEFF;
  --violet:     #B28DFF;
  --bubblegum:  #FF85B3;

  /* Neutrals */
  --ink:        #2D2D2D;
  --paper:      #FAFAFA;
  --muted:      #6B6B6B;
  --border:     #E0E0E0;
  --on-pastel:  #2D2D2D;  /* text on pastel fills, in every theme */
  --primary:    var(--coral); /* site colour — each site overrides this in its own CSS */

  /* Semantic aliases */
  --text:       var(--ink);
  --bg:         var(--paper);
  --link:       #2B5FC7;
  --link-hover: #B23F31;
  --code-bg:    #F5F2FF;
  --code-border:#E0DAF5;
  --table-stripe: rgba(0,0,0,.03);
  --callout-bg: rgba(127, 202, 255, .08);
  --focus-ring: #2B5FC7;

  /* Doodle SVG */
  --doodle-stroke:       var(--ink);
  --doodle-stroke-width: 2.2;

  /* Typography */
  --font:         'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.78rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     clamp(1.4rem, 3vw, 2rem);
  --text-3xl:     clamp(1.6rem, 4vw, 2.4rem);
  --text-4xl:     clamp(2.2rem, 6vw, 4.5rem);
  --line-height:  1.65;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --gutter:    clamp(1rem, 4vw, 3rem);
  --content-width: 760px;
  --wide-width:    960px;

  /* Shape */
  --radius:     18px;
  --radius-sm:  10px;
  --radius-pill: 999px;
  --border-w:   2.5px;

  /* Transitions */
  --ease:       .2s ease;
  --ease-slow:  .4s ease;
}

/* ─── 2.2 DARK MODE ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:          #F0F0F0;
    --paper:        #1A1A2E;
    --muted:        #A0A0A0;
    --border:       #3A3A50;
    --link:         var(--sky);
    --link-hover:   var(--coral);
    --code-bg:      #252540;
    --code-border:  #3A3A55;
    --table-stripe: rgba(255,255,255,.04);
    --callout-bg:   rgba(127, 202, 255, .06);
    --focus-ring:   var(--sky);
    --doodle-stroke:#F0F0F0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink:          #F0F0F0;
  --paper:        #1A1A2E;
  --muted:        #A0A0A0;
  --border:       #3A3A50;
  --link:         var(--sky);
  --link-hover:   var(--coral);
  --code-bg:      #252540;
  --code-border:  #3A3A55;
  --table-stripe: rgba(255,255,255,.04);
  --callout-bg:   rgba(127, 202, 255, .06);
  --focus-ring:   var(--sky);
  --doodle-stroke:#F0F0F0;
  color-scheme: dark;
}

/* ─── 2.3 REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── 2.4 RESET & BASE ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--text);
  background: var(--bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color var(--ease); }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ej-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── 2.5 LAYOUT ─── */
.ej-container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ej-container--wide {
  max-width: var(--wide-width);
}

/* ─── 2.6 NAVIGATION ─── */
.ej-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--ink);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 64px;
}
.ej-nav__brand {
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.ej-nav__brand:hover { color: var(--ink); }
.ej-nav__links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ej-nav__links li { margin: 0; }
/* Coloured link buttons with icons (replaces the brief's coloured dots) */
.ej-nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--on-pastel);
  background: var(--paper);
  font-weight: 800;
  font-size: var(--text-sm);
  padding: 5px 12px;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-pill);
  transition: transform .15s, box-shadow var(--ease);
}
.ej-nav__links a:hover {
  color: var(--on-pastel);
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.ej-nav__links a[aria-current="page"] {
  box-shadow: 3px 3px 0 var(--ink);
}
.ej-nav__link--coral     { background: var(--coral) !important; }
.ej-nav__link--mint      { background: var(--mint) !important; }
.ej-nav__link--sky       { background: var(--sky) !important; }
.ej-nav__link--lemon     { background: var(--lemon) !important; }
.ej-nav__link--violet    { background: var(--violet) !important; }
.ej-nav__link--bubblegum { background: var(--bubblegum) !important; }
.ej-nav__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile nav: icon-only buttons, labels kept for screen readers */
@media (max-width: 600px) {
  .ej-nav { gap: var(--space-sm); }
  .ej-nav__brand { font-size: 1.15rem; }
  .ej-nav__links { gap: 0.4rem; }
  .ej-nav__links a { padding: 6px; }
  .ej-nav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ─── 2.7 TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: var(--text-4xl); margin-bottom: var(--space-md); }
h2 { font-size: var(--text-3xl); margin-top: var(--space-3xl); margin-bottom: var(--space-md); }
h3 { font-size: var(--text-2xl); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
h4 { font-size: var(--text-xl);  margin-top: var(--space-xl);  margin-bottom: var(--space-sm); }

p {
  margin-bottom: var(--space-lg);
  max-width: 65ch;
}

strong { font-weight: 800; }

/* ─── 2.8 BUTTONS & PILLS ─── */
.ej-btn {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 800;
  padding: 12px 28px;
  border-radius: var(--radius);
  border: 3px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), transform .15s;
}
.ej-btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
/* Filled variant — pass a colour. Text stays dark on pastel in both themes. */
.ej-btn--coral  { background: var(--coral);  color: var(--on-pastel); }
.ej-btn--mint   { background: var(--mint);   color: var(--on-pastel); }
.ej-btn--sky    { background: var(--sky);    color: var(--on-pastel); }
.ej-btn--lemon  { background: var(--lemon);  color: var(--on-pastel); }
.ej-btn--violet { background: var(--violet); color: var(--on-pastel); }
.ej-btn--bubblegum { background: var(--bubblegum); color: var(--on-pastel); }

.ej-pill {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--ink);
  background: transparent;
  transition: background var(--ease), color var(--ease), transform .15s;
  cursor: default;
}
.ej-pill:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

.ej-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--ink);
}

/* ─── 2.9 DOODLE HEADERS ─── */
.ej-doodle-header {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--ink);
  background: var(--paper);
  cursor: crosshair;
}
.ej-doodle-header svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Stroke set here rather than via SVG attributes so it follows dark mode */
.ej-doodle-header svg :is(path, circle, rect, line, polyline, polygon, ellipse) {
  fill: none;
  stroke: var(--doodle-stroke);
  stroke-width: var(--doodle-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--ease-slow), fill var(--ease-slow);
}
.ej-doodle-header svg text {
  fill: var(--doodle-stroke);
  transition: fill var(--ease-slow), opacity var(--ease-slow);
}
/* Hidden easter-egg words: revealed in violet on hover, whatever the header's colour.
   CSS opacity overrides the opacity="0.04" attribute on the <text> elements. */
.ej-doodle-header:hover svg text {
  fill: var(--violet);
  opacity: 0.75;
}
/* Hover colour variants */
.ej-doodle-header--coral:hover svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke: var(--coral); }
.ej-doodle-header--mint:hover svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke: var(--mint); }
.ej-doodle-header--sky:hover svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke: var(--sky); }
.ej-doodle-header--violet:hover svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke: var(--violet); }
.ej-doodle-header--bubblegum:hover svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke: var(--bubblegum); }
.ej-doodle-header--lemon:hover svg :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke: var(--lemon); }

/* ─── 2.9b DOODLE HERO (title card over a doodle header) ─── */
/* <header class="ej-doodle-hero">
     <div class="ej-doodle-header ej-doodle-header--coral"><svg …></svg></div>
     <div class="ej-doodle-hero__title"><div class="ej-doodle-hero__card"><h1>…</h1><p>…</p></div></div>
   </header>
   The SVG uses viewBox="0 0 1200 170" preserveAspectRatio="xMidYMid slice", so narrow
   screens show the middle of the drawing. */
.ej-doodle-hero {
  position: relative;
  margin: var(--space-lg) 0;
}
.ej-doodle-hero .ej-doodle-header { height: 170px; }
.ej-doodle-hero .ej-doodle-header svg { height: 100%; }
.ej-doodle-hero__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  pointer-events: none;
}
.ej-doodle-hero__card {
  pointer-events: auto;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--primary);
  padding: var(--space-sm) var(--space-xl);
  text-align: center;
}
.ej-doodle-hero__card h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0;
}
.ej-doodle-hero__card p {
  margin: 0 auto;
  font-weight: 700;
  color: var(--muted);
}
@media (max-width: 600px) {
  .ej-doodle-hero .ej-doodle-header { height: 140px; }
  .ej-doodle-hero__card { padding: var(--space-sm) var(--space-md); }
}

/* ─── 2.10 ARTICLE LAYOUT ─── */
.ej-article {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--gutter) var(--space-3xl);
}
.ej-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-xl);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.ej-article__meta time { font-weight: 700; }

/* ─── 2.11 TABLE OF CONTENTS ─── */
.ej-toc {
  background: var(--callout-bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-2xl);
}
.ej-toc__title {
  font-size: var(--text-base);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}
.ej-toc ol {
  padding-left: var(--space-lg);
}
.ej-toc li {
  margin-bottom: var(--space-xs);
}
.ej-toc a {
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--ease);
}
.ej-toc a:hover {
  color: var(--link);
}

/* ─── 2.12 CODE BLOCKS ─── */
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--code-border);
}

pre {
  background: var(--code-bg);
  border: var(--border-w) solid var(--code-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  overflow-x: auto;
  margin-bottom: var(--space-xl);
  line-height: 1.5;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
}

/* ─── 2.13 INTERACTIVE CODE EDITOR ─── */
.ej-editor {
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}
.ej-editor__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-xs);
  font-weight: 700;
}
.ej-editor__toolbar button {
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.ej-editor__toolbar button:hover {
  background: var(--paper);
  color: var(--ink);
}
.ej-editor__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 200px;
}
.ej-editor__code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-md);
  background: var(--code-bg);
  border: none;
  resize: vertical;
  outline: none;
  line-height: 1.5;
  border-right: var(--border-w) solid var(--border);
}
.ej-editor__preview {
  padding: var(--space-md);
  background: white;
  overflow: auto;
}
@media (max-width: 600px) {
  .ej-editor__panes {
    grid-template-columns: 1fr;
  }
  .ej-editor__code {
    border-right: none;
    border-bottom: var(--border-w) solid var(--border);
    min-height: 120px;
  }
}

/* ─── 2.14 DATA TABLES ─── */
.ej-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
thead {
  background: var(--ink);
  color: var(--paper);
}
th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 800;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
td {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
}
tbody tr:nth-child(even) {
  background: var(--table-stripe);
}
tbody tr:hover {
  background: var(--callout-bg);
}

/* ─── 2.15 BLOCKQUOTES ─── */
blockquote {
  border-left: 4px solid var(--violet);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  background: var(--callout-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  font-style: italic;
}

/* ─── 2.16 CALLOUT / TIP BOXES ─── */
.ej-callout {
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.ej-callout__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.ej-callout__body p:last-child { margin-bottom: 0; }

.ej-callout--tip    { border-left: 4px solid var(--mint);   background: rgba(125,219,163,.08); }
.ej-callout--warn   { border-left: 4px solid var(--lemon);  background: rgba(255,224,102,.08); }
.ej-callout--danger  { border-left: 4px solid var(--coral);  background: rgba(255,155,142,.08); }
.ej-callout--info    { border-left: 4px solid var(--sky);    background: rgba(124,174,255,.08); }
.ej-callout--note    { border-left: 4px solid var(--violet); background: rgba(178,141,255,.08); }

/* ─── 2.17 INTERACTIVE TOOL WIDGETS ─── */
.ej-tool-widget {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}
.ej-tool-widget__header {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  font-weight: 800;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ej-tool-widget__body {
  padding: var(--space-lg);
}
.ej-tool-widget__body label {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
}
.ej-tool-widget__body input,
.ej-tool-widget__body select,
.ej-tool-widget__body textarea {
  font-family: var(--font);
  font-size: var(--text-base);
  padding: 10px 14px;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  margin-bottom: var(--space-md);
  transition: border-color var(--ease);
}
.ej-tool-widget__body input:focus,
.ej-tool-widget__body select:focus,
.ej-tool-widget__body textarea:focus {
  outline: none;
  border-color: var(--sky);
}
.ej-tool-widget__output {
  background: var(--code-bg);
  border: var(--border-w) solid var(--code-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  margin-top: var(--space-md);
}

/* Heading inside a widget's ink title bar */
.ej-tool-widget__title {
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0;
  margin: 0;
  color: var(--paper);
}

/* ─── 2.17b ONE-BOX TOOL ─── */
/* Several widget sections in one bordered box; each section's ink title bar is the divider.
   <form class="ej-tool">
     <section class="ej-tool__section"><div class="ej-tool-widget__header"><h2 class="ej-tool-widget__title">…</h2></div>…</section>
     <section class="ej-tool__section">…</section>
   </form> */
.ej-tool {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  margin-bottom: var(--space-xl);
}
.ej-tool__section + .ej-tool__section {
  border-top: 3px solid var(--ink);
}

/* ─── 2.18 IMAGES & CAPTIONS ─── */
figure {
  margin-bottom: var(--space-xl);
}
figure img {
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border);
}
figcaption {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  margin-top: var(--space-sm);
  text-align: center;
}

/* ─── 2.19 NEWSLETTER SIGNUP ─── */
.ej-newsletter {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-2xl);
  margin: var(--space-3xl) 0;
  text-align: center;
}
.ej-newsletter h2,
.ej-newsletter h3 {
  font-size: var(--text-2xl);
  margin-top: 0;
  margin-bottom: var(--space-sm);
  color: var(--paper);
}
.ej-newsletter p {
  margin: 0 auto var(--space-lg);
  opacity: 0.8;
  max-width: 45ch;
}
.ej-newsletter form {
  max-width: 400px;
  margin: 0 auto;
}
.ej-newsletter .ej-newsletter__fields {
  display: flex;
  gap: var(--space-sm);
}
.ej-newsletter input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  padding: 12px 16px;
  border: 3px solid var(--paper);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
}
.ej-newsletter input[type="email"]::placeholder {
  color: var(--paper);
  opacity: .6;
}
.ej-newsletter button {
  position: relative;
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 800;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 3px solid var(--paper);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s;
}
.ej-newsletter button:hover {
  transform: translateY(-2px);
}
@media (max-width: 480px) {
  .ej-newsletter { padding: var(--space-xl) var(--space-lg); }
  .ej-newsletter .ej-newsletter__fields { flex-direction: column; }
}

/* Kit (ConvertKit) form internals, replacing Kit's own stylesheet */
.ej-newsletter .formkit-alert {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--on-pastel);
}
.ej-newsletter .formkit-alert:empty { display: none; }
.ej-newsletter .formkit-field { flex: 1; min-width: 0; display: flex; }
.ej-newsletter .formkit-field input { width: 100%; }
.ej-newsletter .formkit-alert-error   { background: var(--coral); }
.ej-newsletter .formkit-alert-success { background: var(--mint); }
.ej-newsletter .formkit-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 0;
  overflow: hidden;
  opacity: 0;
}
.ej-newsletter .formkit-spinner > div {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: ej-bounce 1.4s infinite ease-in-out both;
}
.ej-newsletter .formkit-spinner > div:nth-child(1) { animation-delay: -0.32s; }
.ej-newsletter .formkit-spinner > div:nth-child(2) { animation-delay: -0.16s; }
.ej-newsletter button[data-active] .formkit-spinner { width: 100%; opacity: 1; }
.ej-newsletter button[data-active] .formkit-spinner ~ span { opacity: 0; }
@keyframes ej-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ─── 2.20 FOOTER ─── */
.ej-footer {
  border-top: var(--border-w) solid var(--ink);
  padding: var(--space-xl) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.ej-footer p { margin: 0; max-width: none; }
.ej-footer a {
  color: var(--muted);
  transition: color var(--ease);
}
.ej-footer a:hover { color: var(--ink); }

@media (max-width: 480px) {
  .ej-footer {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
}

/* ─── 2.20b MORE FROM BAR (cross-site links) ─── */
/* Add a site: copy one <li> in the .ej-more__list. */
.ej-more {
  border-top: var(--border-w) solid var(--ink);
  padding: var(--space-xl) var(--gutter);
}
.ej-more__title {
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 var(--space-md);
}
.ej-more__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}
.ej-more__list li { margin: 0; }
.ej-more__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-md);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--ease), box-shadow var(--ease);
}
.ej-more__link:hover {
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 5px 5px 0 var(--ink);
}
.ej-more__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--on-pastel);
}
.ej-more__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ej-more__name { display: block; font-weight: 800; line-height: 1.3; }
.ej-more__desc { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--muted); line-height: 1.4; }
.ej-more__icon--coral     { background: var(--coral); }
.ej-more__icon--mint      { background: var(--mint); }
.ej-more__icon--sky       { background: var(--sky); }
.ej-more__icon--lemon     { background: var(--lemon); }
.ej-more__icon--violet    { background: var(--violet); }
.ej-more__icon--bubblegum { background: var(--bubblegum); }

/* ─── 2.21 LISTS ─── */
ul, ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-lg);
}
li {
  margin-bottom: var(--space-xs);
}
li::marker {
  color: var(--violet);
  font-weight: 800;
}

/* ─── 2.22 CARD GRID (for tools/articles listing) ─── */
.ej-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}
.ej-card {
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  padding: var(--space-lg);
  transition: transform var(--ease), box-shadow var(--ease);
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.ej-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--ink);
}
.ej-card__title {
  font-size: var(--text-lg);
  font-weight: 800;
  margin-bottom: var(--space-sm);
}
.ej-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
}

/* ─── 2.23 HERO SECTION ─── */
.ej-hero {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2rem, 5vw, 4rem);
}
.ej-hero h1 {
  margin-bottom: var(--space-md);
}
.ej-hero p {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  max-width: 42ch;
  margin: 0 auto;
  font-weight: 600;
  opacity: 0.75;
}

/* ─── SITE BANNER (under the nav) ─── */
.ej-banner {
  background: var(--lemon);
  color: var(--on-pastel);
  border-bottom: var(--border-w) solid var(--ink);
  padding: var(--space-sm) var(--gutter);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
}
.ej-banner p { margin: 0; max-width: none; }
.ej-banner a { color: var(--on-pastel); text-decoration: underline; overflow-wrap: anywhere; }
.ej-banner a:hover { color: var(--on-pastel); text-decoration-thickness: 2px; }

/* ─── 2.24 SKIP LINK (accessibility) ─── */
.ej-skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 800;
  z-index: 200;
  text-decoration: none;
}
.ej-skip-link:focus {
  top: var(--space-sm);
  color: var(--paper);
}

/* ─── 2.25 DARK MODE TOGGLE ─── */
.ej-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 4px;
  border-radius: 50%;
  transition: transform var(--ease);
  line-height: 1;
}
.ej-theme-toggle:hover {
  transform: rotate(20deg) scale(1.15);
}