/* ============================================================
   EMAILJAY BRAND STYLESHEET — lessonsinemail.com
   Version: 1.2
   Part A is the shared core. This repo holds the master copy: copy Part A
   unchanged into htmltest.email and email-placeholders.com, and keep each
   site's --primary and page CSS in its own stylesheet.

   v1.2 (matches htmltest.email):
   - Nav brand is plain text ("Lessons in email"); coloured dots removed.
   - Nav links are coloured pill buttons with inline SVG icons
     (.ej-nav__link--<colour>, .ej-nav__icon).
   - Theme toggle icons are inline SVGs (.ej-theme-toggle__moon / __sun).
   - Hidden doodle words turn violet and 75% opaque on hover.
   - Focus ring uses --focus-ring (3:1+ on paper; sky was 2.2:1).
   - New: .ej-doodle-hero, .ej-tool / .ej-tool__section,
     .ej-tool-widget__title, .ej-more, .ej-visually-hidden.

   Part A  Brand core (shared across emailjay sites)
   Part B  Lessons in email components (articles + tools)

   Usage:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/css/emailjay.css">
   <script src="/js/emailjay.js"></script>
   ============================================================ */


/* ============================================================
   PART A — BRAND CORE
   ============================================================ */

/* ─── A.1 DESIGN TOKENS ─── */
:root {
  color-scheme: light;

  /* Brand colours */
  --coral:      #FF9B8E;
  --lemon:      #FFE066;
  --mint:       #7DDBA3;
  --sky:        #7CAEFF;
  --violet:     #B28DFF;
  --bubblegum:  #FF85B3;

  /* Text-safe brand colours (≥4.5:1 on --paper). Pastels are for
     fills and decoration; use these when a brand colour is text. */
  --coral-text:  #B3412F;
  --mint-text:   #18794A;
  --sky-text:    #2A5DB0;
  --violet-text: #6A3FC8;

  /* Site primary — lessonsinemail.com is mint */
  --primary:      var(--mint);
  --primary-text: var(--mint-text);

  /* Neutrals */
  --ink:        #2D2D2D;
  --paper:      #FAFAFA;
  --surface:    #FFFFFF;
  --muted:      #6B6B6B;
  --border:     #E0E0E0;
  --on-pastel:  #2D2D2D; /* text on pastel fills, in every theme */

  /* Semantic aliases */
  --text:       var(--ink);
  --bg:         var(--paper);
  --link:       var(--primary-text);
  --link-hover: var(--coral-text);
  --code-bg:    #F5F2FF;
  --code-border:#E0DAF5;
  --table-stripe: rgba(0,0,0,.03);
  --callout-bg: rgba(124, 174, 255, .08);
  --shadow:     6px 6px 0 var(--ink);
  --focus-ring: var(--sky-text); /* follows dark mode via --sky-text */

  /* 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, Menlo, Consolas, 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;
  --full-width:    1200px;
  --nav-height:    64px;

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

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

/* ─── A.2 DARK MODE ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:          #F0F0F0;
    --paper:        #1A1A2E;
    --surface:      #222238;
    --muted:        #A0A0A0;
    --border:       #3A3A50;
    --code-bg:      #252540;
    --code-border:  #3A3A55;
    --table-stripe: rgba(255,255,255,.04);
    --callout-bg:   rgba(124, 174, 255, .06);
    --doodle-stroke:#F0F0F0;
    --coral-text:   var(--coral);
    --mint-text:    var(--mint);
    --sky-text:     var(--sky);
    --violet-text:  var(--violet);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:          #F0F0F0;
  --paper:        #1A1A2E;
  --surface:      #222238;
  --muted:        #A0A0A0;
  --border:       #3A3A50;
  --code-bg:      #252540;
  --code-border:  #3A3A55;
  --table-stripe: rgba(255,255,255,.04);
  --callout-bg:   rgba(124, 174, 255, .06);
  --doodle-stroke:#F0F0F0;
  --coral-text:   var(--coral);
  --mint-text:    var(--mint);
  --sky-text:     var(--sky);
  --violet-text:  var(--violet);
}

/* ─── A.3 REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

html {
  scroll-padding-top: calc(var(--nav-height) + 1rem);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--ease), color var(--ease);
}

img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

a {
  color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--ease), text-decoration-color var(--ease);
}
a:hover { color: var(--link-hover); }

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

::selection { background: var(--lemon); color: var(--on-pastel); }

.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;
}

mark {
  background: var(--lemon);
  color: var(--on-pastel);
  padding: 0 .3em;
  border-radius: 6px;
  font-weight: 700;
}

small { font-size: var(--text-sm); }
b, strong { font-weight: 800; }

hr {
  border: none;
  border-top: var(--border-w) dashed var(--border);
  margin: var(--space-2xl) 0;
}

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

/* ─── A.5 LAYOUT ─── */
.ej-container {
  width: 100%;
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ej-container--wide {
  max-width: calc(var(--wide-width) + var(--gutter) * 2);
}
.ej-container--full {
  max-width: calc(var(--full-width) + var(--gutter) * 2);
}
.ej-main {
  padding-bottom: var(--space-2xl);
}

/* ─── A.6 NAVIGATION ─── */
.ej-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--ink);
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-height);
  transition: background var(--ease), border-color var(--ease);
}
.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.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ej-nav__links li { margin: 0; }
/* Coloured pill buttons with inline SVG icons */
.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,
.ej-footer__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── A.7 THEME TOGGLE ─── */
.ej-theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: transparent;
  color: var(--ink);
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  line-height: 1;
  transition: transform var(--ease), background var(--ease), color var(--ease);
}
.ej-theme-toggle:hover {
  transform: rotate(20deg) scale(1.1);
  background: var(--lemon);
  color: var(--on-pastel);
}
.ej-theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Icon swap is CSS-only, so the right icon shows before any JS runs */
.ej-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .ej-theme-toggle__sun { display: inline-block; }
:root[data-theme="dark"] .ej-theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ej-theme-toggle__sun { display: inline-block; }
  :root:not([data-theme="light"]) .ej-theme-toggle__moon { display: none; }
}

@media (max-width: 640px) {
  .ej-nav__brand { font-size: 1.3rem; }
  .ej-nav__links { gap: 0.25rem; }
  .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;
  }
}
/* Smallest phones (320px): brand, three icon buttons and the toggle must fit in one row */
@media (max-width: 380px) {
  .ej-nav { gap: var(--space-xs); }
  .ej-nav__brand { font-size: 1rem; }
  .ej-nav__links { gap: 0.2rem; }
  .ej-nav__links a { padding: 4px; }
  .ej-theme-toggle { width: 32px; height: 32px; }
}

/* ─── A.8 TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
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); }
h5 { font-size: var(--text-lg);  margin-top: var(--space-lg);  margin-bottom: var(--space-xs); font-weight: 800; }
h6 { font-size: var(--text-base); margin-top: var(--space-lg); margin-bottom: var(--space-xs); font-weight: 800; }

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

/* Hand-drawn underline accent for headings */
.ej-squiggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5 T30 5 T40 5' fill='none' stroke='%237DDBA3' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 28px 8px;
  padding-bottom: 10px;
}

/* ─── A.9 BUTTONS, PILLS & TAGS ─── */
.ej-btn,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.2;
  padding: 12px 24px;
  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, box-shadow .15s;
}
.ej-btn:hover,
button:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
.ej-btn:active,
button:active { transform: translateY(0); }
button:disabled,
.ej-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  background: transparent;
  color: var(--ink);
}
.ej-btn--sm { font-size: var(--text-sm); padding: 8px 16px; border-width: var(--border-w); border-radius: var(--radius-sm); }

/* Filled variants — always ink text on the pastel */
.ej-btn--coral, .ej-btn--mint, .ej-btn--sky,
.ej-btn--lemon, .ej-btn--violet, .ej-btn--bubblegum { color: var(--on-pastel); border-color: var(--on-pastel); }
.ej-btn--coral  { background: var(--coral); }
.ej-btn--mint   { background: var(--mint); }
.ej-btn--sky    { background: var(--sky); }
.ej-btn--lemon  { background: var(--lemon); }
.ej-btn--violet { background: var(--violet); }
.ej-btn--bubblegum { background: var(--bubblegum); }
.ej-btn--coral:hover, .ej-btn--mint:hover, .ej-btn--sky:hover,
.ej-btn--lemon:hover, .ej-btn--violet:hover, .ej-btn--bubblegum:hover {
  background: var(--on-pastel);
  color: #FAFAFA;
  box-shadow: 4px 4px 0 var(--primary);
}

.ej-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  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;
  color: var(--ink);
  transition: background var(--ease), color var(--ease), transform .15s;
}
.ej-pill i { color: var(--primary-text); transition: color var(--ease); }
.ej-pill:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
.ej-pill:hover i { color: var(--primary); }
.ej-pill mark { padding: 0 .35em; }

.ej-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--ink);
  color: var(--ink);
  background: transparent;
  align-self: flex-start;
}
.ej-tag--coral, .ej-tag--mint, .ej-tag--sky,
.ej-tag--lemon, .ej-tag--violet, .ej-tag--bubblegum { color: var(--on-pastel); border-color: var(--on-pastel); }
.ej-tag--coral  { background: var(--coral); }
.ej-tag--mint   { background: var(--mint); }
.ej-tag--sky    { background: var(--sky); }
.ej-tag--lemon  { background: var(--lemon); }
.ej-tag--violet { background: var(--violet); }
.ej-tag--bubblegum { background: var(--bubblegum); }

/* Arrow link — text link with a nudging arrow */
.ej-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.ej-link-arrow i { transition: transform var(--ease); color: var(--primary-text); }
.ej-link-arrow:hover { color: var(--ink); text-decoration-color: var(--coral); }
.ej-link-arrow:hover i { transform: translateX(4px); }

/* ─── A.10 DOODLE HEADERS ───
   Doodles stroke with currentColor so one `color` change recolours
   every shape. Pastel blobs (.ej-doodle__blob) keep their fill. */
.ej-doodle-header {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 3px solid var(--ink);
  background: var(--bg);
  cursor: crosshair;
  margin: var(--space-xl) 0 var(--space-lg);
}
.ej-doodle-header svg {
  display: block;
  width: 100%;
  height: clamp(130px, 23vw, 220px);
  color: var(--doodle-stroke);
  transition: color var(--ease-slow);
}
.ej-doodle-header svg .ej-doodle__ink {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--doodle-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ej-doodle-header svg .ej-doodle__ink .ej-doodle__solid { fill: currentColor; }
.ej-doodle-header svg .ej-doodle__ink text { fill: none; stroke: currentColor; }
.ej-doodle-header svg .ej-doodle__egg {
  fill: currentColor;
  stroke: none;
  opacity: .04;
  font-family: var(--font);
  font-weight: 900;
  transition: opacity var(--ease-slow);
}
/* Hidden words are revealed in violet, whatever the header's colour */
.ej-doodle-header:hover svg .ej-doodle__egg { fill: var(--violet); opacity: .75; }
.ej-doodle-header svg .ej-doodle__blob { opacity: .55; transition: opacity var(--ease-slow); }
.ej-doodle-header:hover svg .ej-doodle__blob { opacity: .25; }

.ej-doodle-header--coral:hover svg     { color: var(--coral); }
.ej-doodle-header--mint:hover svg      { color: var(--mint); }
.ej-doodle-header--sky:hover svg       { color: var(--sky); }
.ej-doodle-header--violet:hover svg    { color: var(--violet); }
.ej-doodle-header--bubblegum:hover svg { color: var(--bubblegum); }
.ej-doodle-header--lemon:hover svg     { color: var(--lemon); }

.ej-doodle__fill--coral     { fill: var(--coral); }
.ej-doodle__fill--mint      { fill: var(--mint); }
.ej-doodle__fill--sky       { fill: var(--sky); }
.ej-doodle__fill--violet    { fill: var(--violet); }
.ej-doodle__fill--bubblegum { fill: var(--bubblegum); }
.ej-doodle__fill--lemon     { fill: var(--lemon); }

/* ─── A.11 HERO ─── */
.ej-hero {
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 3rem);
}
.ej-hero h1 { margin-bottom: var(--space-md); }
.ej-hero p {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  max-width: 46ch;
  margin: 0 auto var(--space-md);
  font-weight: 600;
  color: var(--muted);
}
.ej-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-md);
}
.ej-hero__byline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--muted);
}
.ej-hero__byline a { color: var(--ink); text-decoration-color: var(--primary); }
.ej-hero__byline a:hover { color: var(--link-hover); }
.ej-hero__media { display: inline-block; margin: var(--space-lg) auto 0; }
.ej-hero__media img { max-width: min(100%, 520px); margin: 0 auto; }
.ej-hero .ej-hero__meta { margin-top: var(--space-md); }

/* ─── A.12 MASTHEAD (compact site strip used above articles) ─── */
.ej-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .25rem .75rem;
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.ej-masthead p { margin: 0; max-width: none; }
.ej-masthead__title { font-weight: 900; color: var(--ink); font-size: var(--text-base); }
.ej-masthead__title a { color: inherit; text-decoration: none; }
.ej-masthead a { color: var(--ink); text-decoration-color: var(--primary); }
.ej-masthead a:hover { color: var(--link-hover); }
.ej-masthead > * + *::before {
  content: "•";
  color: var(--primary-text);
  margin-right: .75rem;
}

/* ─── A.12b DOODLE HERO (title card over a doodle header) ─── */
/* <header class="ej-doodle-hero">
     <div class="ej-doodle-header ej-doodle-header--mint"><svg viewBox="0 0 1200 170" preserveAspectRatio="xMidYMid slice" …></svg></div>
     <div class="ej-doodle-hero__title"><div class="ej-doodle-hero__card"><h1>…</h1><p>…</p></div></div>
   </header>
   Narrow screens show the middle of the drawing, behind the card. */
/* The doodle and the title share one grid cell, so a title that wraps
   (long names, narrow screens) grows the hero instead of spilling out. */
.ej-doodle-hero {
  position: relative;
  margin: var(--space-lg) 0;
  display: grid;
}
.ej-doodle-hero > .ej-doodle-header,
.ej-doodle-hero > .ej-doodle-hero__title { grid-area: 1 / 1; }
.ej-doodle-hero .ej-doodle-header { min-height: 170px; margin: 0; }
.ej-doodle-hero .ej-doodle-header svg { position: absolute; inset: 0; height: 100%; }
.ej-doodle-hero__title {
  position: relative;
  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 { min-height: 140px; }
  .ej-doodle-hero__card { padding: var(--space-sm) var(--space-md); }
}

/* ─── A.13 ARTICLE LAYOUT ─── */
.ej-article {
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-3xl);
}
.ej-article__head {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-xl) 0 var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: var(--border-w) dashed var(--border);
}
.ej-article__head h1 { margin: 0; }
.ej-article__head p { font-size: var(--text-lg); font-weight: 600; color: var(--muted); margin: 0; }
.ej-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.ej-article__meta time { font-weight: 700; }
.ej-article__head .ej-article__meta { margin-top: var(--space-md); }

@media (min-width: 760px) {
  .ej-article__head--sticker { grid-template-columns: 220px 1fr; }
}

/* Sticker — a tilted, bordered illustration */
.ej-sticker {
  display: block;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(-6deg);
  transition: transform var(--ease), box-shadow var(--ease);
  max-width: 220px;
  background: #212121;
}
.ej-sticker--right { transform: rotate(6deg); }
.ej-sticker:hover { transform: rotate(-2deg) scale(1.03); box-shadow: 8px 8px 0 var(--primary); }
.ej-sticker--right:hover { transform: rotate(2deg) scale(1.03); }

/* ─── A.14 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 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--text-base);
  font-weight: 900;
  margin-bottom: var(--space-sm);
}
.ej-toc__title i { color: var(--primary-text); }
.ej-toc ol {
  padding-left: var(--space-lg);
  margin-bottom: 0;
}
.ej-toc li { margin-bottom: var(--space-xs); }
.ej-toc a {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--ease);
}
.ej-toc a:hover {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--primary);
}
@media (min-width: 640px) {
  .ej-toc--columns ol { columns: 2; column-gap: var(--space-2xl); }
  .ej-toc--columns li { break-inside: avoid; }
}

/* ─── A.15 CODE ─── */
code, kbd, samp {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--code-border);
  overflow-wrap: anywhere;
}
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;
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  overflow-wrap: normal;
}
pre code mark { background: var(--lemon); color: var(--on-pastel); padding: 0 .15em; border-radius: 4px; }
.ej-code-comment { color: var(--muted); }

/* ─── A.16 DATA TABLES ─── */
.ej-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius);
  border: var(--border-w) solid var(--ink);
  background: var(--surface);
}
.ej-table-wrap--compact { max-width: 520px; margin-left: auto; margin-right: auto; }
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); }
.ej-table-caption {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  margin: calc(var(--space-md) * -1) auto var(--space-xl);
}
.ej-table-title {
  text-align: center;
  margin-bottom: var(--space-md);
}

/* ─── A.17 BLOCKQUOTES ─── */
blockquote {
  position: relative;
  border-left: 4px solid var(--violet);
  padding: var(--space-md) var(--space-lg) var(--space-md) 3.25rem;
  margin: 0 0 var(--space-xl);
  background: var(--callout-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  font-style: italic;
  font-size: var(--text-lg);
}
blockquote::before {
  content: "\201C";
  position: absolute;
  left: 1rem;
  top: .1rem;
  font-size: 3rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  color: var(--violet-text);
}
blockquote p:last-child { margin-bottom: 0; }

/* ─── A.18 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 {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: var(--border-w) solid var(--on-pastel);
  color: var(--on-pastel);
  font-size: 1rem;
  line-height: 1;
}
.ej-callout__body > :last-child { margin-bottom: 0; }
.ej-callout__title { display: block; font-size: var(--text-lg); font-weight: 900; margin: 0 0 var(--space-xs); }

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

/* ─── A.19 INTERACTIVE TOOL WIDGETS ─── */
.ej-tool-widget {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-2xl) 0;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ej-tool-widget__header {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-sm) var(--space-lg);
  font-weight: 800;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.ej-tool-widget__header h2,
.ej-tool-widget__header h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: var(--text-xl);
  color: var(--paper);
}
.ej-tool-widget__header i { color: var(--primary); }
.ej-tool-widget__dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.ej-tool-widget__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.ej-tool-widget__dots span:nth-child(2) { background: var(--lemon); }
.ej-tool-widget__dots span:nth-child(3) { background: var(--mint); }
.ej-tool-widget__body { padding: var(--space-lg); }
.ej-tool-widget__body > :last-child { margin-bottom: 0; }
.ej-tool-widget__body label {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
}
.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);
}

/* Small heading in a widget's ink title bar (beats the larger header h2 style) */
.ej-tool-widget__header .ej-tool-widget__title {
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0;
  margin: 0;
  color: var(--paper);
}

/* ─── A.19b ONE-BOX TOOL ─── */
/* Several 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><div class="ej-tool-widget__body">…</div></section>
     <section class="ej-tool__section">…</section>
   </form> */
.ej-tool {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin: var(--space-2xl) 0;
}
.ej-tool__section + .ej-tool__section {
  border-top: 3px solid var(--ink);
}

/* ─── A.20 FORM CONTROLS ─── */
input, select, textarea {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text);
}
input[type="text"],
input[type="url"],
input[type="email"],
input[type="search"],
input[type="number"],
select,
textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color var(--ease), box-shadow var(--ease);
}
input[type="text"]:hover,
input[type="url"]:hover,
input[type="email"]:hover,
select:hover,
textarea:hover { border-color: var(--muted); }
input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(124,174,255,.3);
}
select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1.5 2 L7 8 L12.5 2' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
label { font-weight: 700; }
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--mint-text);
  width: 1.15rem;
  height: 1.15rem;
  cursor: pointer;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { cursor: not-allowed; opacity: .5; }
input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 56px;
  height: 44px;
  padding: 3px;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-pill);
  outline-offset: 6px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--mint);
  border: var(--border-w) solid var(--on-pastel);
  border-radius: 50%;
  transition: transform var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--mint);
  border: var(--border-w) solid var(--on-pastel);
  border-radius: 50%;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
::placeholder { color: var(--muted); opacity: .8; }

/* ─── A.21 IMAGES & CAPTIONS ─── */
figure { margin: 0 0 var(--space-xl); }
figure img,
.ej-img {
  border-radius: var(--radius);
  border: var(--border-w) solid var(--ink);
}
figcaption {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  margin-top: var(--space-sm);
  text-align: center;
}
/* Images drawn for a light background (black line art) keep a
   white card behind them so they read in dark mode too. */
.ej-img--panel {
  background: #FFFFFF;
  padding: var(--space-md);
  margin-left: auto;
  margin-right: auto;
}
.ej-img--shadow { box-shadow: var(--shadow); }

/* ─── A.22 NEWSLETTER SIGNUP ─── */
.ej-newsletter {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-2xl) var(--space-xl);
  margin: var(--space-3xl) 0 var(--space-2xl);
  text-align: center;
  overflow: hidden;
}
.ej-newsletter::before,
.ej-newsletter::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ej-newsletter::before { width: 140px; height: 140px; background: var(--mint); opacity: .25; top: -50px; left: -40px; }
.ej-newsletter::after  { width: 90px;  height: 90px;  background: var(--coral); opacity: .25; bottom: -30px; right: 8%; }
.ej-newsletter > * { position: relative; }
.ej-newsletter__icon {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--lemon);
  color: var(--on-pastel);
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
  transform: rotate(-8deg);
}
.ej-newsletter__title,
.ej-newsletter h2,
.ej-newsletter h3 {
  font-size: var(--text-2xl);
  font-weight: 900;
  margin: 0 0 var(--space-sm);
  color: var(--paper);
}
.ej-newsletter p {
  margin: 0 auto var(--space-lg);
  opacity: 0.85;
  max-width: 48ch;
  font-weight: 600;
}
.ej-newsletter form {
  max-width: 460px;
  margin: 0 auto;
}
.ej-newsletter .formkit-fields {
  display: flex;
  gap: var(--space-sm);
}
.ej-newsletter .formkit-field { flex: 1; }
.ej-newsletter .formkit-input,
.ej-newsletter input[type="email"] {
  width: 100%;
  height: 100%;
  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 .formkit-input:focus,
.ej-newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(125,219,163,.35);
}
.ej-newsletter .formkit-input::placeholder,
.ej-newsletter input[type="email"]::placeholder {
  color: var(--paper);
  opacity: .6;
}
.ej-newsletter .formkit-submit,
.ej-newsletter button[type="submit"] {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 800;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 3px solid var(--mint);
  background: var(--mint);
  color: var(--on-pastel);
  cursor: pointer;
}
.ej-newsletter .formkit-submit:hover,
.ej-newsletter button[type="submit"]:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  transform: translateY(-2px);
}
.ej-newsletter .formkit-spinner { display: none; }
.ej-newsletter .formkit-submit[data-active] .formkit-spinner { display: inline-flex; gap: 3px; }
.ej-newsletter .formkit-spinner > div { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ej-newsletter .formkit-alert { list-style: none; padding: 0; margin: 0 0 var(--space-sm); }
.ej-newsletter .formkit-alert:empty { display: none; }
.ej-newsletter .formkit-alert-error li {
  background: var(--coral);
  color: var(--on-pastel);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font-weight: 700;
}
.ej-newsletter .formkit-alert-success {
  background: var(--mint);
  color: var(--on-pastel);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-weight: 800;
}
.ej-newsletter .formkit-powered-by-convertkit-container { margin-top: var(--space-md); }
.ej-newsletter .formkit-powered-by-convertkit { color: var(--paper); opacity: .6; font-size: var(--text-xs); }
@media (max-width: 480px) {
  .ej-newsletter { padding: var(--space-xl) var(--space-lg); }
  .ej-newsletter .formkit-fields { flex-direction: column; }
}

/* ─── A.23 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);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.ej-footer p { margin: 0; max-width: none; }
.ej-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.ej-footer__links,
.ej-icon-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ej-footer__links li,
.ej-icon-links li { margin: 0; }
.ej-icon-links li::marker { content: none; }
.ej-footer__links a,
.ej-icon-links a {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: var(--border-w) solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--ease), color var(--ease), transform .15s;
}
.ej-footer__links a:hover,
.ej-icon-links a:hover {
  background: var(--lemon);
  color: var(--on-pastel);
  transform: translateY(-2px) rotate(-8deg);
}
.ej-icon-links a { width: 46px; height: 46px; font-size: 1.2rem; }
.ej-icon-links { margin-top: var(--space-md); }
@media (max-width: 480px) {
  .ej-footer {
    flex-direction: column;
    text-align: center;
  }
}

/* ─── A.23b MORE FROM BAR (cross-site links) ─── */
/* Each site lists the others and leaves itself out. Add a site: copy one <li> on every site. */
.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__list li::marker { content: none; }
.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); }

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

/* ─── A.25 CARD GRID ─── */
.ej-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}
.ej-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  padding: var(--space-lg);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--ease), box-shadow var(--ease);
}
a.ej-card:hover,
.ej-card:hover,
.ej-card:focus-within {
  color: var(--ink);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.ej-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--on-pastel);
  background: var(--primary);
  color: var(--on-pastel);
  font-size: 1.15rem;
  transform: rotate(-6deg);
  transition: transform var(--ease);
}
.ej-card:hover .ej-card__icon { transform: rotate(6deg) scale(1.08); }
.ej-card__title {
  font-size: var(--text-lg);
  font-weight: 900;
  margin: 0;
  line-height: 1.25;
}
.ej-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
  margin: 0;
  flex: 1;
}
.ej-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.ej-card__media {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-sm);
  border-bottom: var(--border-w) solid var(--ink);
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--code-bg);
}
.ej-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--ease-slow);
}
.ej-card:hover .ej-card__media img { transform: scale(1.04); }

/* Colour accents for cards */
.ej-card--coral     .ej-card__icon { background: var(--coral); }
.ej-card--mint      .ej-card__icon { background: var(--mint); }
.ej-card--sky       .ej-card__icon { background: var(--sky); }
.ej-card--violet    .ej-card__icon { background: var(--violet); }
.ej-card--lemon     .ej-card__icon { background: var(--lemon); }
.ej-card--bubblegum .ej-card__icon { background: var(--bubblegum); }
.ej-card--coral:hover     { box-shadow: 6px 6px 0 var(--coral); }
.ej-card--mint:hover      { box-shadow: 6px 6px 0 var(--mint); }
.ej-card--sky:hover       { box-shadow: 6px 6px 0 var(--sky); }
.ej-card--violet:hover    { box-shadow: 6px 6px 0 var(--violet); }
.ej-card--lemon:hover     { box-shadow: 6px 6px 0 var(--lemon); }
.ej-card--bubblegum:hover { box-shadow: 6px 6px 0 var(--bubblegum); }

/* Whole-card link: stretch the card's main link over the card */
.ej-card__link { color: inherit; text-decoration: none; }
.ej-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ej-card__link:hover { color: inherit; }

/* ─── A.26 SECTION HEADING ─── */
.ej-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-3xl) 0 var(--space-lg);
}
.ej-section-head h2 { margin: 0; }
.ej-section-head__art {
  flex-shrink: 0;
  width: 84px;
  transform: rotate(-10deg);
  transition: transform var(--ease);
}
.ej-section-head:hover .ej-section-head__art { transform: rotate(-2deg) scale(1.05); }
.ej-section-head__rule {
  flex: 1;
  height: 0;
  border-top: var(--border-w) dashed var(--border);
}

/* White line art on transparent — invert to ink in light mode */
.ej-art--light-lines { filter: invert(1); }
:root[data-theme="dark"] .ej-art--light-lines { filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ej-art--light-lines { filter: none; }
}

/* ─── 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; }

/* ─── A.27 SKIP LINK ─── */
.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);
}

/* ─── A.28 FEATURE GRID ─── */
.ej-feature-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-xl);
}
.ej-feature-grid li {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--ease), box-shadow var(--ease);
}
.ej-feature-grid li:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--primary); }
.ej-feature-grid li::marker { content: none; }
.ej-feature-grid i { color: var(--primary-text); font-size: 1.2rem; }
.ej-feature-grid strong { display: block; font-weight: 900; }
.ej-feature-grid span { color: var(--muted); font-size: var(--text-sm); font-weight: 600; }

/* ─── A.29 LINK LIST (icon links) ─── */
.ej-link-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.ej-link-list li { margin: 0; }
.ej-link-list li::marker { content: none; }
.ej-link-list a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 18px;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--ease), color var(--ease), transform .15s;
}
.ej-link-list a:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* Resource list — external links with arrow */
.ej-resource-list { list-style: none; padding: 0; }
.ej-resource-list li {
  margin: 0 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  gap: .75rem;
  align-items: baseline;
}
.ej-resource-list li::marker { content: none; }
.ej-resource-list i { color: var(--primary-text); flex-shrink: 0; }
.ej-resource-list a { font-weight: 700; }


/* ============================================================
   PART B — LESSONS IN EMAIL COMPONENTS
   Shared by article pages and their stand-alone tool pages.
   ============================================================ */

/* ─── B.0 PAGE HEADERS ───
   Home, tools index and tool pages: .ej-doodle-hero holds the <h1> card;
   any byline / actions sit in .ej-hero underneath. Eggs sit at the left and
   right edges of the drawing so the card never covers them. */
.ej-doodle-hero__card { max-width: 32rem; }
/* Titles here are longer than htmltest's, so the card type is a touch smaller */
.ej-doodle-hero__card h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.ej-doodle-hero__card p { font-size: var(--text-sm); line-height: 1.45; margin-top: var(--space-xs); }
.ej-doodle-hero + .ej-hero { padding-top: var(--space-sm); }

/* ─── B.1 FULL-BLEED LIVE CODE EDITOR ───
   Class names are hooks for articles/custom-js/code-editor.js. */
.editor-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: 0 var(--gutter);
}
.code-editor-container {
  display: flex;
  max-width: 1000px;
  margin: 0 auto var(--space-2xl);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #1e1e1e;
}
.editor-panel {
  width: 60%;
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.preview-panel {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  flex: 1;
  border-left: 3px solid var(--ink);
}
.resizer {
  width: 6px;
  background: #2D2D2D;
  cursor: col-resize;
  position: relative;
  transition: background var(--ease);
}
.resizer:hover { background: #444; }
.resizer:active { background: var(--mint); }
.resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 30px;
  background: #777;
  border-radius: 1px;
}
.panel-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #2D2D2D;
  color: #FAFAFA;
  padding: 10px 16px;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.panel-header::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 14px 0 0 var(--lemon), 28px 0 0 var(--coral);
  margin-right: 30px;
}
.preview-panel .panel-header {
  background: var(--mint);
  color: var(--on-pastel);
  border-bottom: var(--border-w) solid var(--on-pastel);
}
.preview-panel .panel-header::before {
  background: var(--on-pastel);
  box-shadow: none;
  margin-right: 0;
  border-radius: 2px;
  width: 8px; height: 8px;
  animation: ej-pulse 1.6s ease-in-out infinite;
}
@keyframes ej-pulse { 50% { opacity: .25; } }
.toolbar {
  background: #252526;
  padding: 8px 16px;
  border-bottom: 1px solid #333;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--text-xs);
}
.toolbar .btn {
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid #FAFAFA;
  background: transparent;
  color: #FAFAFA;
}
.toolbar .btn:hover { background: var(--coral); border-color: var(--coral); color: var(--on-pastel); }
.toolbar .status {
  margin-left: auto;
  color: #A0A0A0;
  font-weight: 700;
}
.toolbar .status::before { content: "\25CF  "; color: var(--mint); }
.editor-container {
  flex: 1;
  position: relative;
}
.CodeMirror {
  height: 100% !important;
  min-height: 260px;
  font-size: 14px;
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}
.preview-frame {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: none;
  background: white;
  display: block;
}
.resizing, .resizing * { user-select: none; }

@media (max-width: 700px) {
  .code-editor-container { flex-direction: column; }
  .editor-panel { width: 100%; }
  .preview-panel { border-left: none; border-top: 3px solid var(--ink); }
  .resizer { display: none; }
}

/* ─── B.2 MSO-COMMENT CREATOR ─── */
.mso-tool h4,
.version-selector h4 { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.version-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.version-selector h4 { width: 100%; }
.version-selector > div {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .5rem;
  padding: 6px 14px 6px 10px;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--bg);
  transition: background var(--ease), transform .15s;
}
.version-selector > div:hover { transform: translateY(-2px); }
.version-selector > div:has(input:checked) { background: var(--mint); color: var(--on-pastel); border-color: var(--on-pastel); }
.version-selector > div:has(input:disabled) { opacity: .45; }
.version-selector label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
}
.version-selector input[type="checkbox"] { margin: 0; accent-color: var(--on-pastel); }
.version-selector input[type="checkbox"]:disabled + label { opacity: .5; cursor: not-allowed; }

.toggle-container { margin: var(--space-lg) 0; }
.toggle-wrapper { position: relative; display: inline-block; }
.toggle-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-label {
  display: block;
  position: relative;
  width: 220px;
  height: 44px;
  background-color: var(--coral);
  border: var(--border-w) solid var(--on-pastel);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .3s ease;
  user-select: none;
  margin: 0;
}
.toggle-checkbox:focus-visible + .toggle-label { outline: 3px solid var(--sky); outline-offset: 3px; }
.toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 31px;
  height: 31px;
  background-color: #FFFFFF;
  border: var(--border-w) solid var(--on-pastel);
  border-radius: 50%;
  transition: transform .3s ease;
}
.toggle-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--on-pastel);
  transition: opacity .3s ease;
  text-transform: uppercase;
  white-space: nowrap;
}
.toggle-text.hide { left: 48px; opacity: 1; }
.toggle-text.show { left: 18px; opacity: 0; }
.toggle-checkbox:checked + .toggle-label { background-color: var(--mint); }
.toggle-checkbox:checked + .toggle-label .toggle-slider { transform: translateX(176px); }
.toggle-checkbox:checked + .toggle-label .toggle-text.hide { opacity: 0; }
.toggle-checkbox:checked + .toggle-label .toggle-text.show { opacity: 1; }

.mso-tool pre { margin-bottom: var(--space-md); min-height: 4.5rem; }


/* ─── B.3 COLOUR CONTRAST CHECKER ─── */
.input-selction {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--space-md);
}
.input-group {
  background: var(--bg);
  padding: var(--space-lg);
  border-radius: var(--radius);
  border: var(--border-w) solid var(--border);
  margin: var(--space-sm) 0;
  transition: border-color var(--ease);
}
.input-group:focus-within { border-color: var(--sky); }
.input-group label {
  display: block;
  font-weight: 800;
  margin-bottom: var(--space-sm);
  font-size: var(--text-base);
  color: var(--ink);
}
.color-input-wrapper {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
.preview-section {
  background: var(--code-bg);
  padding: var(--space-lg);
  border-radius: var(--radius);
  margin: var(--space-md) 0 var(--space-lg);
  border: var(--border-w) solid var(--code-border);
}
.preview-box {
  padding: var(--space-xl);
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: var(--space-md);
  border: 3px solid var(--ink);
  transition: background-color var(--ease), color var(--ease);
}
.preview-text { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.preview-large { font-size: 24px; font-weight: 900; }
.contrast-ratio {
  background: var(--surface);
  padding: var(--space-md);
  border-radius: var(--radius);
  text-align: center;
  border: var(--border-w) dashed var(--border);
}
.ratio-value {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}
.ratio-label {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-md);
}
.result-box {
  position: relative;
  padding: var(--space-md);
  border-radius: var(--radius);
  text-align: center;
  border: var(--border-w) solid var(--on-pastel);
  color: var(--on-pastel);
  background: var(--border);
  overflow: hidden;
  transition: transform var(--ease), background var(--ease);
}
.result-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: left .5s ease;
}
.result-box:hover::before { left: 100%; }
.result-box.pass { background: var(--mint); transform: rotate(-1deg); }
.result-box.fail { background: var(--coral); }
.result-box.pass:nth-child(even) { transform: rotate(1deg); }
.result-title { font-weight: 800; font-size: var(--text-sm); margin-bottom: 4px; }
.result-status { font-size: var(--text-xl); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.result-status::before { margin-right: .35rem; }
.result-box.pass .result-status::before { content: "\2714"; }
.result-box.fail .result-status::before { content: "\2716"; }
.result-ratio { font-size: var(--text-xs); font-weight: 700; margin-top: 4px; }

/* ─── B.4 CORS CHECKER ─── */
.form-group { margin-bottom: var(--space-md); }
#corsForm .input-group { background: none; border: none; padding: 0; margin: 0 0 var(--space-md); }
.input-container {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}
.input-container input { flex: 1; }
.check-btn { white-space: nowrap; min-width: 140px; }
.check-btn .loading {
  display: none;
  align-items: center;
  gap: .5rem;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ej-spin 1s linear infinite;
}
@keyframes ej-spin { to { transform: rotate(360deg); } }
.result {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  border: var(--border-w) solid var(--on-pastel);
  color: var(--on-pastel);
  font-weight: 600;
  display: none;
}
.result.success { background: var(--mint); }
.result.error   { background: var(--coral); }
.result.warning { background: var(--lemon); }
.result-icon { font-size: 1.1em; margin-right: .5rem; }
@media (max-width: 640px) {
  .input-container { flex-direction: column; }
  .check-btn { min-width: auto; }
}

/* ─── B.5 FONT / X-HEIGHT COMPARISON ─── */
.font-comparison-tool { max-width: 100%; }
.font-comparison-tool .controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.font-comparison-tool .controls > br { display: none; }
.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.control-group label { font-weight: 800; font-size: var(--text-sm); margin: 0; }
.custom-font-section {
  grid-column: 1 / -1;
  margin-top: var(--space-xs);
  padding: var(--space-md);
  border: var(--border-w) dashed var(--border);
  border-radius: var(--radius);
}
.add-font-btn { align-self: flex-start; font-size: var(--text-sm); padding: 8px 18px; border-width: var(--border-w); border-radius: var(--radius-sm); }
.add-font-btn::before { content: "\2b"; font-weight: 900; }
.display-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  font-weight: 800;
  font-size: var(--text-sm);
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
  margin: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--mint);
  border: var(--border-w) solid var(--on-pastel);
  transition: .3s;
  border-radius: var(--radius-pill);
}
.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  top: 3px;
  background-color: #FFFFFF;
  border: 2px solid var(--on-pastel);
  transition: .3s;
  border-radius: 50%;
}
input:checked + .slider { background-color: var(--violet); }
input:checked + .slider:before { transform: translateX(25px); }
.toggle-switch input:focus-visible + .slider { outline: 3px solid var(--sky); outline-offset: 3px; }

/* The comparison canvas stays white so the tool's fixed ink colours read in any theme */
.comparison-display {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 2rem;
  min-height: 200px;
  overflow: hidden;
  transition: all .3s ease;
  background: #FFFFFF;
  color: #2D2D2D;
}
.comparison-display.expanded { min-height: auto; padding: 1rem 2rem; }
.baseline {
  position: absolute;
  left: 2rem;
  right: 4rem;
  bottom: 5rem;
  height: 2px;
  background: #E5533D;
  opacity: .8;
  z-index: 10;
  transition: all .3s ease;
}
.baseline::after {
  content: 'baseline';
  position: absolute;
  right: -62px;
  top: -10px;
  color: #B3412F;
  font-size: .75rem;
  font-weight: 800;
}
.x-height-line {
  position: absolute;
  left: 2rem;
  right: 4rem;
  bottom: 7rem;
  height: 2px;
  background: #18794A;
  opacity: .8;
  z-index: 10;
  transition: all .3s ease;
}
.x-height-line::after {
  content: 'x-height';
  position: absolute;
  right: -62px;
  top: -10px;
  color: #18794A;
  font-size: .75rem;
  font-weight: 800;
}
.expanded .baseline,
.expanded .x-height-line { display: none; }
.font-overlay {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 5rem;
  font-size: 3rem;
  line-height: 1;
  transform-origin: left baseline;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  transition: all .3s ease;
}
.expanded .font-overlay {
  position: relative;
  left: 0;
  right: 0;
  bottom: auto;
  margin: 1rem 0;
  opacity: 1 !important;
  display: block;
}
.font-overlay:nth-child(3) { opacity: .9; color: #1f2937; }
.font-overlay:nth-child(4) { opacity: .8; color: #3730a3; }
.font-overlay:nth-child(5) { opacity: .7; color: #059669; }
.font-overlay:nth-child(6) { opacity: .6; color: #dc2626; }
.font-overlay:nth-child(7) { opacity: .5; color: #7c2d12; }
.font-legend {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 4px 14px;
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--bg);
}
.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--ink);
}
.error-message {
  color: var(--coral-text);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-top: var(--space-xs);
}
@media (max-width: 600px) {
  .comparison-display { padding: 1rem; }
  .font-overlay { font-size: 2rem; left: 1rem; right: 1rem; }
  .baseline, .x-height-line { left: 1rem; right: 4.5rem; }
}

/* ─── B.6 CAN I EMAIL EMBEDS ─── */
.ej-embed .ej-tool-widget__body { padding: var(--space-md); background: var(--surface); }
.ej-embed iframe {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: 26.25rem;
  border: none;
  margin: 0 auto;
}
.ej-embed { box-shadow: none; margin: var(--space-lg) 0 var(--space-xl); }