/* Generated by scripts/build-letters.mjs. Do not edit. */
/* /assets/css/system/hamburger-icon.css */
/* The three-bar icon the mobile nav uses. The full Divi hamburger stylesheet
   is mostly unused animation variants and a source map. */
.et_divi_100_custom_hamburger_menu__icon {
  position: relative;
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0.25rem;
  clear: both;
}
.et_divi_100_custom_hamburger_menu__icon div {
  background: #000;
  width: 100%;
  height: 0.125rem;
  margin: 0.25rem auto;
  border-radius: 10px;
  transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transform-origin: center;
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:after,
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:before {
  width: 100%;
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:first-child {
  transform: translateY(0.375rem) rotate(45deg);
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:not(:first-child):not(:last-child) {
  opacity: 0;
}
.et_divi_100_custom_hamburger_menu__icon.et_divi_100_custom_hamburger_menu__icon--toggled div:last-child {
  transform: translateY(-0.375rem) rotate(-45deg);
}
.et_divi_100_custom_hamburger_menu .mobile_menu_bar:before,
.et_divi_100_custom_hamburger_menu .mobile_menu_bar:after {
  display: none;
}

/* /assets/css/system/tokens.css */
/*
  Design System Tokens (Phase 1)
  - All variables prefixed with --ds-
  - Safe to load globally: variables only (no Divi overrides)

  Breakpoints observed in exported pages (Divi/WP):
  - Desktop: min-width: 981px
  - Tablet: max-width: 980px
  - Phone: max-width: 767px
  - Additional: 600px, 479px, 420px (page-specific)
*/

:root{
  /* ── Page / surface colors ─────────────────────────────── */
  --ds-color-page: #FCF7F4;       /* warm-white page bg */
  --ds-color-surface: #ffffff;    /* cards, inputs — stay crisp white */
  --ds-color-surface-raised: #F6EFEA;
  --ds-color-surface-inset: #EEE5DE;
  --ds-color-surface-tint: rgba(255,255,255,.7);

  /* ── Ink / text ────────────────────────────────────────── */
  --ds-color-text: #27272A;       /* body copy */
  --ds-color-text-strong: #09090B;/* headlines */
  --ds-color-muted: #52525B;      /* secondary */
  --ds-color-faint: #71717A;      /* captions */
  --ds-color-subtle: rgba(0,0,0,.65);
  --ds-color-on-dark: #ffffff;
  --ds-color-on-dark-muted: #A1A1AA;

  /* ── Borders ───────────────────────────────────────────── */
  --ds-color-border: #E2D6CD;     /* hairline on warm bg */
  --ds-color-border-strong: rgba(0,0,0,.18);
  --ds-color-border-on-dark: rgba(255,255,255,.14);

  /* ── Accent (black CTAs) ───────────────────────────────── */
  --ds-color-dark: #000000;
  --ds-color-dark-2: #18181B;
  --ds-color-dark-hover: #1C1C20;
  --ds-color-accent-soft: #E4E4E7;

  /* ── Legacy / functional ───────────────────────────────── */
  --ds-color-link: #2ea3f2;
  --ds-color-accent: #24c8dc;
  --ds-color-focus: rgba(0,0,0,.08);
  --ds-color-danger: #B23A2E;
  --ds-color-success: #2F7D52;

  /* ── Typography ────────────────────────────────────────── */
  /* Alternate Gothic ATF Heavy (Adobe Fonts) — King Kong–style condensed display */
  --ds-font-display: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
  --ds-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-heading: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
  --ds-font-heading-bold: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ds-font-size-body: 17px;
  --ds-line-height-body: 1.5;
  --ds-font-weight-heading: 700; /* Bold in kit today; bump to 800 when Heavy is published */
  --ds-line-height-heading: 0.94; /* King Kong–style tight leading */

  /* Condensed display tracking — tight, but not colliding.
     King Kong uses ~-0.08em; we sit a touch looser for readability. */
  --ds-tracking-h1: -0.05em;
  --ds-tracking-h2: -0.05em;
  --ds-tracking-h3: -0.045em;
  --ds-tracking-h4: -0.035em;
  --ds-tracking-h5: -0.025em;
  --ds-tracking-h6: -0.015em;

  /* Size ramp inspired by King Kong (tempered — not billboard-scale) */
  --ds-size-h1: clamp(2.75rem, 1.2rem + 6vw, 5.5rem);
  --ds-size-h2: clamp(2.125rem, 1rem + 4vw, 3.75rem);
  --ds-size-h3: clamp(1.75rem, 0.9rem + 2.8vw, 3rem);
  --ds-size-h4: clamp(1.375rem, 0.85rem + 1.6vw, 2.25rem);
  --ds-size-h5: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  --ds-size-h6: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);

  /* ── Spacing (8-px grid) ───────────────────────────────── */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-9: 96px;
  --ds-space-10: 128px;

  /* ── Hero clearance (floating nav → first hero content) ──
     #page-container has padding-top:0 and the header floats over the
     page, so every top section must clear the nav itself. This token
     bakes in the floating-nav height (~84px desktop / ~97px tablet+phone)
     plus editorial breathing room, so nav→hero content lands in the
     48–72px (desktop) / 40–56px (tablet) / 32–44px (phone) range.
     Consumed by the shared first-section rule in content-rhythm.css and
     the newsletter hero in pages/newsletter.css. */
  --ds-hero-clearance: 138px;

  /* ── Radius ────────────────────────────────────────────── */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 24px;
  --ds-radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --ds-shadow-xs: 0 1px 2px rgba(9,9,11,.04);
  --ds-shadow-sm: 0 1px 3px rgba(9,9,11,.06), 0 1px 2px rgba(9,9,11,.04);
  --ds-shadow-md: 0 4px 16px rgba(9,9,11,.06);
  --ds-shadow-lg: 0 12px 40px rgba(9,9,11,.10);

  /* ── Component sizing ──────────────────────────────────── */
  --ds-control-h: 36px;
  --ds-control-h-lg: 40px;

  /* ── Motion ────────────────────────────────────────────── */
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-dur-fast: 120ms;
  --ds-dur-base: 200ms;

  /* ── Breakpoints ───────────────────────────────────────── */
  --ds-bp-desktop-min: 981px;
  --ds-bp-tablet-max: 980px;
  --ds-bp-phone-max: 767px;
  --ds-bp-small-max: 479px;
}

/* Desktop: H1 at 80% of the base clamp */
@media (min-width: 981px) {
  :root {
    --ds-size-h1: clamp(2.2rem, 0.96rem + 4.8vw, 4.4rem);
  }
}

/* Phone: nav sits ~13px lower, so trim hero clearance to keep
   nav→content in the 32–44px range and avoid excess blank space. */
@media (max-width: 767px) {
  :root {
    --ds-hero-clearance: 136px;
    --ds-tracking-h1: -0.035em;
    --ds-tracking-h2: -0.035em;
    --ds-tracking-h3: -0.03em;
    --ds-tracking-h4: -0.025em;
    --ds-tracking-h5: -0.015em;
    --ds-tracking-h6: -0.01em;
  }
}

@media (max-width: 479px) {
  :root {
    --ds-tracking-h1: -0.025em;
    --ds-tracking-h2: -0.025em;
    --ds-tracking-h3: -0.02em;
    --ds-tracking-h4: -0.015em;
    --ds-tracking-h5: -0.01em;
    --ds-tracking-h6: 0;
  }
}


/* /assets/css/system/background.css */
/*
  Warm-white page background (#FCF7F4)
  Drop-in: add  to index.css.
  Cards, inputs and selects stay crisp white (--ds-color-surface) so they lift
  off the warm page. Scoped to body / #page-container; no Divi component overrides.
*/
:root{
  --ds-color-page: #FCF7F4; /* warm white page */
}

html,
body,
#page-container{
  background-color: var(--ds-color-page);
}

/* Keep large light section bands consistent with the warm page */
#page-container .et_pb_section.et_pb_section_regular:not([style*="background"]){
  background-color: var(--ds-color-page);
}

/* /assets/css/system/fonts.css */
/*
  Fonts — design system
  Body:     Inter (self-hosted)
  Headings: Alternate Gothic ATF (Adobe Fonts kit fks5kmr — Bold/700 now; add Heavy/800 when available)
  Mono:     JetBrains Mono (self-hosted)
  Instrument Serif kept self-hosted for any legacy italic/display accents.
*/

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif/InstrumentSerif-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif/InstrumentSerif-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
}

/* Self-hosted Inter (SIL Open Font License 1.1) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/inter/InterVariable.woff2") format("woff2");
}

:root {
  --ds-font-display:      "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
  --ds-font-body:         "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-heading:      "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
  --ds-font-heading-bold: "alternate-gothic-atf", "Arial Narrow", Arial, sans-serif;
  --ds-font-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Divi critical CSS still sets Open Sans on body */
body,
body.et_pb_pagebuilder_layout,
.et-db #page-container {
  font-family: var(--ds-font-body) !important;
}

/*
  Body copy weight — Divi critical CSS sets body { font-weight: 500 }.
  Scoped to text modules; excludes eyebrows, buttons, nav, headings.
*/
#page-container .et_pb_text_inner p:not(.ds-eyebrow),
#main-content .et_pb_text_inner p:not(.ds-eyebrow) {
  font-weight: 400;
}

/* Newsletter hero (not inside .et_pb_text_inner) */
#post-newsletter .nl-saasify-lede,
#post-newsletter .nl-saasify-caption {
  font-weight: 400;
}

/*
  Main nav text links — Divi/customizer uses font-weight: 600 on #top-menu a.
  Excludes nav CTA buttons (li.et_pb_button: Download CV, Join the Newsletter).
*/
#page-container #main-header #top-menu > li:not(.et_pb_button) > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current-menu-item > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current_page_item > a {
  font-weight: 400 !important;
}

/* Legacy page CSS that named Figtree, Geist, or Lato explicitly */
#post-newsletter .nl-saasify-headline,
#post-newsletter .nl-saasify-lede,
#post-newsletter .nl-saasify-input,
#post-newsletter .nl-saasify-submit,
#post-newsletter .nl-saasify-caption,
#post-newsletter .nl-saasify-form-error,
#post-newsletter .nl-confirm-title,
#post-newsletter .nl-confirm-lede {
  font-family: var(--ds-font-body) !important;
}

@media screen and (max-width: 980px) {
  /* :before/:after renders the ETModules icon glyph — must NOT override */
  #main-header .et_mobile_menu li a {
    font-family: var(--ds-font-body) !important;
  }
}

.skip-link {
  font-family: var(--ds-font-body) !important;
}

/* /assets/css/system/eyebrows.css */
/*
  Eyebrow / kicker labels — JetBrains Mono, uppercase, spaced
  ElevenLabs / editorial monochrome system.
*/

.ds-eyebrow,
#page-container .ds-eyebrow {
  display: block;
  margin: 0 0 4px;
  color: #c59060;
  font-family: var(--ds-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: none;
}

/* Legacy Divi sup eyebrows */
.hero-cntn sup,
#page-container .hero-cntn sup {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #c59060 !important;
  font-family: var(--ds-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  line-height: 1.35 !important;
}

/* /assets/css/system/page-transitions.css */
/*
  Page transitions — design system
  Ported from details.so:
    1. 0.5s crossfade between pages (cross-document View Transitions), with the
       nav held in place. Those rules live INLINE in partials/head.html, not
       here: Chrome decides whether to transition as the new page first renders,
       and an opt-in in an external stylesheet was sometimes not applied yet,
       so the transition was skipped at random.
    2. Hero text enters with a blur + rise: opacity 0, blur(7px), 20px down
       → resting, 0.9s ease-out-quart, staggered ~100ms per line.
  .ds-enter runs on page load (CSS only, no JS). For scroll-triggered
  content use .ds-reveal (scroll-reveal.css), which shares the same motion.
*/

:root {
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes ds-enter {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.ds-enter {
  animation: ds-enter 0.9s var(--ease-out-quart) 0.06s backwards;
}

/* Stagger ladder (details.so: title .16s, subtitle .26s, supporting .36s) */
.ds-enter-d1 { animation-delay: 0.16s; }
.ds-enter-d2 { animation-delay: 0.26s; }
.ds-enter-d3 { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .ds-enter {
    animation: none;
  }
}

/* /assets/css/system/headings.css */
/*
  Site-wide heading typography
  Alternate Gothic ATF Heavy (King Kong–style) + Inter body + JetBrains Mono eyebrows.
  Loads its own dependencies so it works as a standalone <link>.
*/











/* ── Base heading reset → Alternate Gothic ATF Heavy, all caps ───────────────
   High-specificity selectors (no :where) so Divi Figtree/Geist can't win. */
#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6,
#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6,
.et-db #page-container h1,
.et-db #page-container h2,
.et-db #page-container h3,
.et-db #page-container h4,
.et-db #page-container h5,
.et-db #page-container h6,
#et-boc h1,
#et-boc h2,
#et-boc h3,
#et-boc h4,
#et-boc h5,
#et-boc h6 {
  font-family: var(--ds-font-display) !important;
  font-weight: var(--ds-font-weight-heading, 800) !important;
  text-transform: uppercase !important;
  line-height: var(--ds-line-height-heading, 0.94) !important;
  color: var(--ds-color-text-strong) !important;
}

#page-container h1,
#main-content h1,
.et-db #page-container h1,
#et-boc h1 {
  font-size: var(--ds-size-h1) !important;
  letter-spacing: var(--ds-tracking-h1) !important;
  text-wrap: balance;
}

#page-container h2,
#main-content h2,
.et-db #page-container h2,
#et-boc h2 {
  font-size: var(--ds-size-h2) !important;
  letter-spacing: var(--ds-tracking-h2) !important;
}

#page-container h3,
#main-content h3,
.et-db #page-container h3,
#et-boc h3 {
  font-size: var(--ds-size-h3) !important;
  letter-spacing: var(--ds-tracking-h3) !important;
}

#page-container h4,
#main-content h4,
.et-db #page-container h4,
#et-boc h4 {
  font-size: var(--ds-size-h4) !important;
  letter-spacing: var(--ds-tracking-h4) !important;
}

#page-container h5,
#main-content h5,
.et-db #page-container h5,
#et-boc h5 {
  font-size: var(--ds-size-h5) !important;
  letter-spacing: var(--ds-tracking-h5) !important;
}

#page-container h6,
#main-content h6,
.et-db #page-container h6,
#et-boc h6 {
  font-size: var(--ds-size-h6) !important;
  letter-spacing: var(--ds-tracking-h6) !important;
}

/* Tighten heading → body gap site-wide. Kept em-relative but trimmed from
   0.5em so large display titles don't open up an oversized gap (e.g. a 46px
   case-card title now sits ~16px above its description instead of ~23px). */
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6 {
  margin-bottom: 0.35em !important;
}

/* The signature move: italic <em> inside headings */
#page-container h1 em,
#page-container h2 em,
#page-container h3 em,
#page-container h4 em,
#page-container h5 em,
#page-container h6 em,
#main-content h1 em,
#main-content h2 em,
#main-content h3 em,
#main-content h4 em,
#main-content h5 em,
#main-content h6 em {
  font-style: italic;
  color: inherit;
}

/* Override legacy .brand-color spans inside headings → follow heading token */
#page-container h1 span.brand-color,
#page-container h2 span.brand-color,
#page-container h3 span.brand-color,
#page-container h4 span.brand-color,
#page-container h5 span.brand-color,
#page-container h6 span.brand-color,
#page-container h1 span.brand-color2,
#page-container h2 span.brand-color2,
#page-container h3 span.brand-color2,
#page-container h4 span.brand-color2,
#page-container h5 span.brand-color2,
#page-container h6 span.brand-color2 {
  color: inherit !important;
}

/* ── Body font override (Divi critical CSS sets Open Sans) ─────────────────── */
body,
body.et_pb_pagebuilder_layout,
.et-db #page-container {
  font-family: var(--ds-font-body) !important;
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
  color: var(--ds-color-text);
  -webkit-font-smoothing: antialiased;
}

/* Body copy weight */
#page-container .et_pb_text_inner p:not(.ds-eyebrow),
#main-content .et_pb_text_inner p:not(.ds-eyebrow) {
  font-weight: 400;
  font-size: var(--ds-font-size-body);
  line-height: var(--ds-line-height-body);
}

/* ── Nav links ──────────────────────────────────────────────────────────────── */
#page-container #main-header #top-menu > li:not(.et_pb_button) > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current-menu-item > a,
#page-container #main-header #top-menu > li:not(.et_pb_button).current_page_item > a {
  font-family: var(--ds-font-body) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--ds-color-muted) !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: color var(--ds-dur-fast) var(--ds-ease-out);
}
#page-container #main-header #top-menu > li:not(.et_pb_button) > a:hover {
  color: var(--ds-color-text-strong) !important;
  text-decoration: none !important;
}
#page-container #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a:hover,
#page-container #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a:focus-visible {
  background: #efe7dd;
}

/* Horizontal padding used to come from the Divi customizer. Letters no longer
   load that file, so the links collapsed together and the dark CTA lost its pill. */
#page-container #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a {
  padding: 10px 12px !important;
  border-radius: 999px;
}

/* ── Header bar ─────────────────────────────────────────────────────────────── */
body.et_fixed_nav.et_show_nav #page-container {
  padding-top: 0 !important;
}

/* Fixed from the first paint. Homepage used to wait for the deferred Divi
   sheet to set this, so the in-flow menu pushed the whole page, then jumped. */
body.et_fixed_nav #page-container #main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  background-color: transparent !important;
}

/* Header is transparent — matches production */
#main-header,
#page-container #main-header {
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ── Floating container — exact production values ────────────────────────────
   Matches customizer: top: 2em, glass rgba(255,255,255,0.3), border-radius: 10px
   Logo left, nav right via flex + margin-left: auto on #et-top-navigation. */
#main-header .et_menu_container,
#page-container #main-header .et_menu_container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  position: relative !important;
  margin-left: auto !important;
  margin-right: auto !important;
  top: 2em !important;
  box-sizing: border-box !important;
  width: 90% !important;
  max-width: 1100px !important;
  padding: 8px 8px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  color: black !important;
  border: transparent !important;
  z-index: 999 !important;
  border-radius: 10px !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease !important;
}

/* Scrolled/fixed state: matches production */
#main-header.et-fixed-header .et_menu_container,
#page-container #main-header.et-fixed-header .et_menu_container {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
}

#page-container #main-header .logo_helper {
  display: none !important;
}

/* Logo: pull back into flex flow so it occupies space on the left */
#main-header .logo_container,
#page-container #main-header .logo_container {
  position: relative !important;
  top: auto !important;
  width: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}

/* Nav: push to right side of pill */
#main-header #et-top-navigation,
#page-container #main-header #et-top-navigation {
  margin-left: auto !important;
}

/* Wordmark */

#main-header .logo_container a {
  font-family: var(--ds-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  font-size: 16px !important;
}

#main-header #logo {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  height: 23px !important;
  max-height: 23px !important;
  width: auto !important;
  padding: 0 16px 0 0 !important;
}

/* ── Eyebrow / kicker global override ────────────────────────────────────── */
/* Note: eyebrows.css is imported above — this layer upgrades to mono */
.ds-eyebrow,
#page-container .ds-eyebrow,
.hero-cntn sup,
#page-container .hero-cntn sup {
  font-family: var(--ds-font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #c59060 !important;
  line-height: 1.35 !important;
}

/* ── .ds- typography utilities aligned to new tokens ─────────────────────── */
.ds-hero-title {
  font-family: var(--ds-font-display) !important;
  font-weight: var(--ds-font-weight-heading, 800) !important;
  letter-spacing: var(--ds-tracking-h1) !important;
  text-transform: uppercase !important;
  line-height: var(--ds-line-height-heading, 0.94);
  color: var(--ds-color-text-strong);
  font-size: var(--ds-size-h1);
}

.ds-page-title {
  font-family: var(--ds-font-display) !important;
  font-weight: var(--ds-font-weight-heading, 800) !important;
  letter-spacing: var(--ds-tracking-h2) !important;
  text-transform: uppercase !important;
  line-height: var(--ds-line-height-heading, 0.94);
  color: var(--ds-color-text-strong);
  font-size: clamp(2rem, 4vw, 4rem);
}

.ds-section-title {
  font-family: var(--ds-font-display) !important;
  font-weight: var(--ds-font-weight-heading, 800) !important;
  letter-spacing: var(--ds-tracking-h3) !important;
  text-transform: uppercase !important;
  line-height: var(--ds-line-height-heading, 0.94);
  color: var(--ds-color-text-strong);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}

/* ── Newsletter font override ─────────────────────────────────────────────── */
/* Newsletter headlines follow display heading treatment */
#post-newsletter .nl-saasify-headline,
#post-newsletter .nl-confirm-title {
  font-family: var(--ds-font-display) !important;
  font-weight: var(--ds-font-weight-heading, 800) !important;
  letter-spacing: var(--ds-tracking-h1) !important;
  text-transform: uppercase !important;
}
/* Body / UI elements use Inter */
#post-newsletter .nl-saasify-lede,
#post-newsletter .nl-saasify-input,
#post-newsletter .nl-saasify-submit,
#post-newsletter .nl-saasify-caption,
#post-newsletter .nl-saasify-form-error,
#post-newsletter .nl-confirm-lede {
  font-family: var(--ds-font-body) !important;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media screen and (max-width: 980px) {
  /* mobile_menu_bar:before/:after renders the ETModules icon glyph — must NOT
     override font-family or the hamburger icon disappears */
  #main-header .et_mobile_menu li a {
    font-family: var(--ds-font-body) !important;
  }

  .et_header_style_left #logo {
    max-width: 90% !important;
  }
}

.skip-link {
  font-family: var(--ds-font-body) !important;
}

/* ── Global link color (override Divi #2ea3f2 default) ───────────────────── */
#page-container a:not(.site-footer *):not([class*="et_pb_button"]):not(.ds-btn):not(.ds-btn-primary):not(.ds-btn-secondary):not(.workshop-card__cta):not(.pr-seat-header__cta):not(.pr-bento-cta__btn):not(.pr-hero__cta):not(.pr-ticket__cta) {
  color: inherit;
}
#page-container a:not(.site-footer *):not([class*="et_pb_button"]):not(.ds-btn):not(.ds-btn-primary):not(.ds-btn-secondary):not(.workshop-card__cta):not(.pr-seat-header__cta):not(.pr-bento-cta__btn):not(.pr-hero__cta):not(.pr-ticket__cta):hover {
  color: var(--ds-color-text-strong, #09090B);
}

/* ── Nav CTA buttons (pill primary / secondary) ───────────────────────────── */
/* Primary — Join the Newsletter */
#page-container #main-header #top-menu li.et_pb_button:not(.et_pb_button_secondary),
#page-container #main-header #top-menu li.menu-item-54 {
  background-color: #000000 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
#page-container #main-header #top-menu li.et_pb_button:not(.et_pb_button_secondary) a,
#page-container #main-header #top-menu li.menu-item-54 a {
  color: #ffffff !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}
#page-container #main-header #top-menu li.et_pb_button:not(.et_pb_button_secondary):hover,
#page-container #main-header #top-menu li.menu-item-54:hover {
  background-color: #18181B !important;
}

/* Secondary — Download CV */
#page-container #main-header #top-menu li.et_pb_button.et_pb_button_secondary,
#page-container #main-header #top-menu li.menu-item-53 {
  background-color: #ffffff !important;
  border: 1px solid var(--ds-color-border, #E2D6CD) !important;
  box-shadow: none !important;
}
#page-container #main-header #top-menu li.et_pb_button.et_pb_button_secondary a,
#page-container #main-header #top-menu li.menu-item-53 a {
  color: var(--ds-color-text-strong, #09090B) !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
#page-container #main-header #top-menu li.et_pb_button.et_pb_button_secondary:hover,
#page-container #main-header #top-menu li.menu-item-53:hover {
  background-color: var(--ds-color-surface-raised, #F6EFEA) !important;
}

/* Mobile nav shape has to exist before the deferred Divi sheet arrives.
   Otherwise the full link row paints in document flow and then collapses. */
@media (max-width: 980px) {
  body.et_fixed_nav #main-header #top-menu {
    display: none !important;
  }
  body.et_fixed_nav #main-header #et_mobile_nav_menu {
    display: block !important;
  }
  body.et_fixed_nav.et_header_style_left #main-header .logo_container {
    padding: 0 5% !important;
  }
  body.et_fixed_nav #main-header #et-top-navigation {
    padding-right: 5% !important;
  }
  body.et_fixed_nav #main-header .mobile_menu_bar {
    margin: 0.5em 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 981px) {
  body.et_fixed_nav #main-header #et_mobile_nav_menu {
    display: none !important;
  }
}

/* Footer wordmark is an SVG. Late CSS was flipping height to auto and
   Lighthouse scored the resulting body shift. Reserve the final box. */
.site-footer__wordmark {
  width: 83px !important;
  height: 24px !important;
  max-width: 83px !important;
  aspect-ratio: 69 / 20;
}

/* /assets/css/system/nav-standalone.css */
/*
  Standalone nav — design system
  The shared nav (partials/header.html) was built for Divi pages, which load
  Divi's base theme CSS. Hand-built pages (About, Letters) don't, so this file
  reproduces that base layer. Add `ds-standalone-nav` to <body> to use it, along
  with the Divi body classes the customizer CSS keys off (et_header_style_left,
  et_button_no_icon, etc.). Measured to match /resume/ to the pixel at 375-1440px.
*/

/* ── Nav — base positioning Divi normally provides via theme CSS ──────────── */

body.ds-standalone-nav #main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  background: transparent;
}

/*
  The floating "glass pill" look lives in critical.css (.et_menu_container:
  display:flex; width:90%; top:2em — logo left, nav right). But critical.css
  only restyles the nav; it relies on Divi's BASE nav layout (inline theme CSS
  on full Divi pages) for the fundamentals: centering the pill, laying the menu
  items out horizontally, and showing the hamburger only on mobile. This
  hand-built page never loaded that base layer, so the menu stacked vertically,
  the mobile hamburger showed on desktop, and the pill sat flush left/top.
  The rules below reproduce that base layer (scoped to this page's header) so
  the nav matches the home page. critical.css's !important rules still win for
  the pill styling itself.
*/

/*
  Divi's theme options set a custom button icon — the glyph is literally "$"
  (et-divi-customizer-global.min.css: `.et_pb_button:after{content:'$'}`).
  Full Divi pages hide it via `.et_button_no_icon .et_pb_button:after{display:none}`,
  which ships in Divi's inline reset. This hand-built page has the
  `et_button_no_icon` body class but never loads that reset, so the "$" leaked
  out after every .et_pb_button — most visibly the "Join the Newsletter" nav
  button. Reproduce the suppression so the nav matches the other pages. */
body.ds-standalone-nav .et_pb_button::after,
body.ds-standalone-nav .et_pb_button::before {
  content: none !important;
  display: none !important;
}

/* Pill: relative positioning makes critical.css's `top: 2em` apply, and auto
   margins center its 90% width. */
body.ds-standalone-nav #main-header,
body.ds-standalone-nav #main-header *,
body.ds-standalone-nav #main-header *::before,
body.ds-standalone-nav #main-header *::after {
  box-sizing: border-box;
}

body.ds-standalone-nav #main-header .container.et_menu_container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/*
  Logo. Divi's base CSS centers the wordmark with an inline-block helper span
  and a 23px header line-height; on full Divi pages common.js also sizes it.
  This page loads neither, so reproduce the result (23px tall, centered). */
body.ds-standalone-nav #main-header {
  line-height: 23px;
}

body.ds-standalone-nav #main-header span.logo_helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

body.ds-standalone-nav #main-header #logo {
  display: inline-block;
  vertical-align: middle;
  height: 23px !important;
  max-height: none !important;
  width: auto !important;
  margin-bottom: 0;
}

/* Desktop (≥981px): reproduce Divi's base nav layout exactly (inline-block
   items, line-height 0 on the list, 1em on items) so this page's nav matches
   every other page to the pixel. The link padding (10px 12px) comes from the
   customizer CSS this page does load. Measured against /resume/ at 1280px. */
@media all and (min-width: 981px) {
  /* The customizer pads #et-top-navigation and its links by 15px on desktop;
     Divi's common.js normally cancels that. Zero the wrapper padding here. */
  body.ds-standalone-nav #main-header #et-top-navigation {
    display: block;
    float: right;
    padding: 0 !important;
    font-weight: 600;
  }

  body.ds-standalone-nav #main-header #top-menu-nav {
    display: block;
    float: left;
    line-height: 0;
  }

  body.ds-standalone-nav #main-header #top-menu {
    display: block;
    float: left;
    line-height: 0;
    /* Reset the browser's default <ul> margin and padding-inline-start, which
       Divi's base CSS zeroes on full pages. */
    margin: 0;
    padding: 0;
  }

  body.ds-standalone-nav #main-header #top-menu li {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 14px;
    line-height: 1em;
  }

  body.ds-standalone-nav #main-header #top-menu a {
    display: block;
    position: relative;
    text-decoration: none;
  }

  /* Plain links: 10px 12px matches the homepage. The customizer used to
     supply the horizontal 12px; letters no longer load that file. */
  body.ds-standalone-nav #main-header #top-menu > li:not(.et_pb_button):not(.site-nav-workshop) > a {
    padding: 10px 12px !important;
  }

  /* Join the Newsletter pill: Divi core sets .et_pb_button line-height:1.7em
     (≈23.8px), which gives the button its full height. This page doesn't load
     that base, so the pill rendered flat (22px vs 32px on other pages). */
  body.ds-standalone-nav #main-header #top-menu li.et_pb_button > a {
    line-height: 1.7em;
  }

  /* Hamburger hidden on desktop */
  body.ds-standalone-nav #main-header #et_mobile_nav_menu {
    display: none;
  }
}

/* Mobile (≤980px): swap the menu for the hamburger (matches Divi's breakpoint) */
@media all and (max-width: 980px) {
  body.ds-standalone-nav.et_header_style_left #main-header .logo_container {
    padding: 0 5%;
  }

  body.ds-standalone-nav #main-header #top-menu {
    display: none;
  }

  body.ds-standalone-nav #main-header #et_mobile_nav_menu {
    display: block;
  }

  /* The customizer insets the hamburger with 5% right padding. */
  body.ds-standalone-nav #main-header #et-top-navigation {
    padding-right: 5%;
  }

  body.ds-standalone-nav #main-header .mobile_menu_bar {
    position: relative;
    display: block;
    line-height: 0;
    /* .5em matches the customizer, which is what makes the closed pill 63px tall. */
    margin: 0.5em 0;
    padding-bottom: 0;
  }

  body.ds-standalone-nav #main-header .mobile_nav .select_page {
    display: none;
  }
}

/* letters above the fold */
/* ─────────────────────────────────────────────────────────────────────────────
   Letters — /letters/ index + /letters/<slug>/ posts
   Layout and rhythm follow letters.thedankoe.com (measured at 1440px):
     index  1100px feature panel (400px tall), 4-up "Most popular" cards,
            600px latest column + 320px sidebar, 17/24 bold section labels
     post   728px column, title right under the nav, 18/24 subtitle 12px below,
            36px avatar byline 20px below, divider bar, body 19/30.4 (1.6),
            20px between paragraphs, section heads 26px above / 16px below
   Type and colour come from the design system (tokens.css, headings.css).
───────────────────────────────────────────────────────────────────────────── */

.letters-page #page-container {
  background: var(--ds-color-page);
}

.letters,
.letter {
  --letters-gold: #c59060;
  --letters-measure: 728px;
  --letters-wide: 1100px;
  --letters-main: 600px;
  --letters-side: 320px;
  box-sizing: border-box;
  padding: 120px 24px 96px;
}

/* Section label: "Most popular", "Latest", "Keep reading" */
#page-container .letters-label {
  margin: 0;
  font-family: var(--ds-font-body) !important;
  font-size: 17px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal;
  color: var(--ds-color-text-strong) !important;
}

.letters-list__meta,
.letters-feature__eyebrow {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-faint);
}

/* ── Typographic tile (fallback when a letter has no cover) ───────────────── */
.letters-tile {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding: 10px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-dark);
  color: var(--ds-color-on-dark);
  font-family: var(--ds-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}
.letters-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(197, 144, 96, 0.55), transparent 60%);
}
.letters-tile span { position: relative; }
.letters-tile--kickoffs::before { background: radial-gradient(120% 90% at 0% 0%, rgba(245, 217, 176, 0.45), transparent 65%); }
.letters-tile--ai-workflow::before { background: radial-gradient(120% 90% at 50% 0%, rgba(36, 200, 220, 0.35), transparent 60%); }
.letters-tile--career::before { background: radial-gradient(120% 90% at 100% 100%, rgba(197, 144, 96, 0.45), transparent 60%); }

/* ── Index: topic chips ──────────────────────────────────────────── */
.letters-chips {
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  padding-right: 32px;
}
.letters-chips::-webkit-scrollbar { display: none; }
.letters-chips button {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ds-color-surface-inset);
  font: 600 14px/1 var(--ds-font-body);
  color: var(--ds-color-text-strong);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.letters-chips button:hover { background: #E4D9D0; }
.letters-chips button[aria-selected="true"] {
  background: var(--ds-color-text-strong);
  color: #fff;
}
.letters-chips__divider {
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--ds-color-border);
}
.letters-empty {
  padding: 32px 0;
  color: var(--ds-color-muted);
}

/* ── Index: feature panel (1100 x 400, text bottom-left over the art) ─────── */
.letters-feature {
  position: relative;
  display: block;
  max-width: var(--letters-wide);
  height: 400px;
  margin: 0 auto 48px;
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  background: var(--ds-color-dark);
  color: var(--ds-color-on-dark);
  text-decoration: none;
  isolation: isolate;
}
.letters-feature__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  padding: 0;
  z-index: -1;
}
.letters-feature__art.letters-tile span { display: none; }
/* Cover image: sits on the right so the drawing never runs under the text */
img.letters-feature__art {
  left: auto;
  right: 0;
  width: 56%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.letters-feature:has(img.letters-feature__art)::after { display: none; }
.letters-feature:has(img.letters-feature__art) .letters-feature__text { width: min(440px, calc(100% - 96px)); }
.letters-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
}
.letters-feature__text {
  position: absolute;
  left: 48px;
  bottom: 48px;
  width: min(520px, calc(100% - 96px));
  display: flex;
  flex-direction: column;
}
.letters-feature__eyebrow {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}
.letters-feature__title {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-font-weight-heading, 700);
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}
.letters-feature__sub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.75);
}
.letters-feature__cta {
  color: #ffffff;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.letters-feature__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-font-body);
  font-size: 16px;
  letter-spacing: 0;
  transition: transform 0.2s ease;
}
.letters-feature:hover .letters-feature__arrow { transform: translateX(3px); }

/* ── Index: most popular (4-up, title + 60px thumb) ───────────────────────── */
.letters-popular {
  max-width: var(--letters-wide);
  margin: 0 auto 64px;
}
.letters-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.letters-viewall {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-color-muted);
  text-decoration: none;
}
.letters-viewall:hover { color: var(--ds-color-text-strong); }
.letters-popular__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.letters-popular__grid a {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.letters-popular__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.letters-popular__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ds-color-text-strong);
}
.letters-popular__grid a:hover .letters-popular__title { text-decoration: underline; text-underline-offset: 3px; }
.letters-popular__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  border-radius: var(--ds-radius-lg, 16px);
  transition: transform 0.35s ease;
}
.letters-popular__grid a:hover .letters-popular__thumb { transform: scale(0.98); }
.letters-popular__thumb.letters-tile span { display: none; }
.letters-popular__cat {
  font-size: 13px;
  line-height: 18px;
  color: var(--ds-color-muted);
}

/* ── Index: latest (600) + sidebar (320) ──────────────────────────────────── */
.letters-columns {
  max-width: calc(var(--letters-main) + var(--letters-side) + 32px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, var(--letters-main)) var(--letters-side);
  gap: 32px;
  align-items: start;
}
.letters-latest__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ds-color-border);
}
.letters-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.letters-tabs button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  font: 600 13px/20px var(--ds-font-body);
  color: var(--ds-color-muted);
  cursor: pointer;
}
.letters-tabs button[aria-selected="true"] {
  background: var(--ds-color-surface-inset);
  color: var(--ds-color-text-strong);
}
.letters-sidebar {
  position: sticky;
  top: 112px;
}
.letters-solo {
  max-width: var(--letters-measure);
  margin: 0 auto;
}
.letters-sidebar .letter-signup,
.letters-solo .letter-signup { margin: 0; }

/* ── Shared list (latest, related): 19/26 title, 15/20 dek, 160x107 thumb ─── */
.letters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.letters-list__item {
  border-bottom: 1px solid var(--ds-color-border);
}
.letters-list__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  text-decoration: none;
  color: inherit;
}
.letters-list__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.letters-list__title {
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ds-color-text-strong);
}
.letters-list__link:hover .letters-list__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.letters-list__sub {
  font-size: 15px;
  line-height: 20px;
  color: var(--ds-color-muted);
}
.letters-list__meta { margin-top: 4px; }
.letters-list__thumb {
  width: 160px;
  height: 107px;
  object-fit: cover;
}

/* ── Post: header ─────────────────────────────────────────────────────────── */
.letter__article,
.letters-related {
  max-width: var(--letters-measure);
  margin: 0 auto;
}
.letter__header {
  padding-top: 0;
}
#page-container .letter__title {
  margin: 0;
  font-size: 44px !important;
  line-height: 1.02 !important;
}
#page-container .letter__subtitle {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--ds-color-muted);
}
.letter__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.letter__byline p {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.letter__byline a {
  color: var(--ds-color-text-strong);
  text-decoration: none;
}
.letter__byline a:hover { text-decoration: underline; }
.letter__byline time { color: var(--ds-color-faint); }
.letter__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}
.letter__avatar--lg { width: 56px; height: 56px; }
.letter__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-top: 16px;
  border-top: 1px solid var(--ds-color-border);
  border-bottom: 1px solid var(--ds-color-border);
  font-size: 13px;
  color: var(--ds-color-faint);
}
.letter__bar a {
  color: var(--ds-color-muted);
  text-decoration: none;
}
.letter__bar a:hover { color: var(--ds-color-text-strong); }
.letter__share {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-pill);
  background: transparent;
  font: 500 13px var(--ds-font-body);
  color: var(--ds-color-text-strong);
  cursor: pointer;
}
.letter__share:hover { background: var(--ds-color-surface-raised); }
.letter__cover {
  width: 100%;
  height: auto;
  margin-top: 24px;
  border-radius: var(--ds-radius-md);
}

/* ── Post: in-this-letter ─────────────────────────────────────────────────── */
.letter-toc {
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--ds-color-surface-raised);
  border-radius: var(--ds-radius-md);
}
.letter-toc__label {
  margin: 0 0 6px;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-color-faint);
}
.letter-toc ol {
  margin: 0;
  padding-left: 1.2em;
}
.letter-toc li { margin: 2px 0; font-size: 15px; line-height: 24px; }
.letter-toc a { color: var(--ds-color-text); text-decoration: none; }
.letter-toc a:hover { text-decoration: underline; }

/* ── Post: body (19px / 30.4px, 20px paragraph gap) ───────────────────────── */
.letter__body {
  padding-top: 32px;
}
#page-container .letter__body p,
#page-container .letter__body li {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ds-color-text);
}
.letter__body p { margin: 0 0 20px; }
.letter__body ul,
.letter__body ol { margin: 0 0 20px; padding-left: 32px; }
.letter__body li { margin: 8px 0 0; }
.letter__body li:first-child { margin-top: 0; }
.letter__body strong { color: var(--ds-color-text-strong); font-weight: 700; }
.letter__body a {
  color: var(--ds-color-text-strong);
  text-decoration: underline;
  text-decoration-color: var(--letters-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Body headings: sentence case in the body face, close to the text they introduce
   (more space above than below, so each heading groups with its own section). */
#page-container .letter__body h2,
#page-container .letter__body h3 {
  padding: 0 !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.015em !important;
  color: var(--ds-color-text-strong);
  scroll-margin-top: 112px;
}
#page-container .letter__body h2 {
  margin: 56px 0 12px !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
}
#page-container .letter__body h3 {
  margin: 36px 0 8px !important;
  font-size: 21px !important;
  line-height: 1.35 !important;
}
#page-container .letter__body h2 + h3 { margin-top: 16px !important; }
.letter__body blockquote {
  margin: 20px 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--letters-gold);
}
.letter__body blockquote p { color: var(--ds-color-text-strong) !important; }
.letter__body hr {
  border: 0;
  border-top: 1px solid var(--ds-color-border);
  margin: 40px 0;
}
.letter__body code {
  font-family: var(--ds-font-mono);
  font-size: 0.85em;
  background: var(--ds-color-surface-inset);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
/* Code block: Tailark Quartz "Code Demo 4", dark theme, matched 1:1 to
   tailark.com/view/code-demo-4?theme=dark (card, editor, tab shape, vesper tokens).
   Markup from scripts/build-letters.mjs, behaviour in /assets/js/code-block.js */
.cb {
  --cb-card: #0b0b0d;
  --cb-editor: #0e0e10;
  --cb-line: rgba(255, 255, 255, 0.07);
  --cb-ring: rgba(255, 255, 255, 0.075);
  --cb-fg: #ffffff;
  --cb-fg-75: rgba(255, 255, 255, 0.75);
  --cb-hover: rgba(255, 255, 255, 0.05);
  --cb-icon: #e17100;     /* amber-600 */
  --cb-orange: #ffc799;   /* vesper keys, numbers */
  --cb-mint: #99ffe4;     /* vesper strings */
  --cb-muted: #a0a0a0;    /* vesper punctuation */
  --cb-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  position: relative;
  margin: 32px 0;
  padding: 0 4px 4px;
  overflow: hidden;
  background: var(--cb-card);
  color: var(--cb-fg);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--cb-ring), 0 10px 15px -3px rgba(0, 0, 0, 0.094), 0 4px 6px -4px rgba(0, 0, 0, 0.094);
  color-scheme: dark;
}

/* Tab bar: 40px tall, the active tab drops 1px over the editor's top border */
.cb-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 40px;
}
.cb-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100%;
  min-width: 0;
  flex: 1;
}
.cb .cb-tab,
.cb .cb-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--cb-fg-75);
  font-family: var(--cb-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.cb .cb-tab {
  height: 36px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.cb .cb-tab:first-child { border-top-left-radius: 14px; }
.cb .cb-tab__icon { flex: none; color: var(--cb-icon); }
.cb .cb-tab[aria-selected="false"]:hover,
.cb .cb-tab[aria-selected="false"]:focus-visible {
  background: var(--cb-hover);
  border-radius: 10px;
  height: 32px;
  margin-bottom: 3px;
}
.cb .cb-tab[aria-selected="true"] {
  z-index: 1;
  background: var(--cb-editor);
  border-color: var(--cb-line);
}
/* Concave corners where the active tab flows into the editor */
.cb .cb-tab[aria-selected="true"]::before,
.cb .cb-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.cb .cb-tab[aria-selected="true"]::after {
  right: -17px;
  background: radial-gradient(circle at 100% 0, var(--cb-card) 15px, var(--cb-line) 15px, var(--cb-line) 16px, var(--cb-editor) 16.5px);
}
.cb .cb-tab[aria-selected="true"]::before {
  left: -17px;
  background: radial-gradient(circle at 0 0, var(--cb-card) 15px, var(--cb-line) 15px, var(--cb-line) 16px, var(--cb-editor) 16.5px);
}
.cb .cb-tab[aria-selected="true"]:first-child::before {
  left: -1px;
  bottom: -16px;
  border-left: 1px solid var(--cb-line);
  background: var(--cb-editor);
}

.cb .cb-copy {
  flex: none;
  height: 32px;
  margin-bottom: 4px;
  border-radius: 10px;
}
.cb .cb-copy:hover,
.cb .cb-copy:focus-visible { background: var(--cb-hover); color: var(--cb-fg); }
.cb-copy__done { display: none; }
.cb.is-copied .cb-copy { color: var(--cb-mint); }
.cb.is-copied .cb-copy__icon { display: none; }
.cb.is-copied .cb-copy__done { display: block; }
.cb .cb-tab:focus-visible,
.cb .cb-copy:focus-visible,
.cb-scroll:focus-visible { box-shadow: 0 0 0 2px var(--ds-color-focus, #2563eb); }

/* Editor: h-96 max, scrolls inside, fades at an edge only while there's more */
.cb-panel {
  position: relative;
  background: var(--cb-editor);
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  overflow: hidden;
}
.cb.is-first-active .cb-panel { border-top-left-radius: 0; }
.cb-panel[hidden] { display: none; }
.cb-scroll {
  max-height: 384px;
  overflow: auto;
  outline: none;
  scrollbar-width: none;
  --cb-fade-top: #000;
  --cb-fade-bottom: #000;
  -webkit-mask-image: linear-gradient(to bottom, var(--cb-fade-top), #000 20%, #000 80%, var(--cb-fade-bottom));
  mask-image: linear-gradient(to bottom, var(--cb-fade-top), #000 20%, #000 80%, var(--cb-fade-bottom));
}
.cb-scroll::-webkit-scrollbar { display: none; }
.cb-scroll.fade-top { --cb-fade-top: transparent; }
.cb-scroll.fade-bottom { --cb-fade-bottom: transparent; }

.letter__body .cb-pre {
  margin: 0;
  padding: 8px 8px 8px;
  background: none;
  color: var(--cb-fg);
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-family: var(--cb-mono);
  font-size: 13px;
  line-height: 17px;
  white-space: pre;
  counter-reset: cb-line;
  tab-size: 4;
}
.letter__body .cb-pre code {
  display: block;
  min-width: max-content;
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border-radius: 0;
}
.cb-line {
  display: grid;
  grid-template-columns: 48px 1fr;
  min-height: 17px;
}
.cb-line::before {
  counter-increment: cb-line;
  content: counter(cb-line);
  width: 24px;
  font-size: 12px;
  text-align: right;
  opacity: 0.35;
  user-select: none;
  -webkit-user-select: none;
}
.cb-tok-head { color: var(--cb-orange); }
.cb-tok-key { color: var(--cb-orange); }
.cb-tok-ph { color: var(--cb-mint); }
.cb-tok-mark { color: var(--cb-muted); }
.cb-tok-strong { font-weight: 500; }

/* Table: Tailark Mist "Features 1", matched to oss.tailark.com/view/mist-features-1.
   Gray tray (foreground/5, 24px radius) > white faux-browser card > fully gridded table. */
.letter-table {
  --lt-ink: #09090b;
  --lt-grid: #e4e4e7;
  margin: 32px 0 40px;
}
.letter-table__card {
  position: relative;
  padding: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px #fff,
    0 0 0 1px rgba(9, 9, 11, 0.05),
    0 2px 6px -2px rgba(9, 9, 11, 0.04),
    0 16px 40px -16px rgba(9, 9, 11, 0.12);
}
.letter-table__dots {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}
.letter-table__dots span {
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  background: #f4f4f5;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 999px;
}
.letter-table__scroll { overflow-x: auto; }
.letter__body .letter-table table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--lt-ink);
  font-family: var(--ds-font-body);
  font-size: 14px;
  line-height: 20px;
}
.letter__body .letter-table th,
.letter__body .letter-table td {
  text-align: left;
  vertical-align: middle;
  border: 1px solid var(--lt-grid);
}
.letter__body .letter-table thead { background: #f6efe9; } /* warm, between --ds-color-page and --ds-color-surface-inset */
.letter__body .letter-table th {
  padding: 12px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lt-ink);
  background: none;
}
.letter__body .letter-table td { padding: 8px; }
.letter__body .letter-table td strong { font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .letters-popular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}

@media (max-width: 980px) {
  .letters,
  .letter { padding-top: 120px; }
  .letters-columns { grid-template-columns: minmax(0, 1fr); max-width: var(--letters-main); gap: 48px; }
  .letters-sidebar { position: static; }
}

@media (max-width: 720px) {
  .letters,
  .letter { padding: 112px 16px 72px; }
  .letters-feature { height: 360px; }
  /* With a cover: drawing on top, text below it, nothing overlapping */
  .letters-feature:has(img.letters-feature__art) { height: auto; }
  img.letters-feature__art {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .letters-feature:has(img.letters-feature__art) .letters-feature__text {
    position: static;
    width: auto;
    padding: 0 24px 28px;
  }
  .letters-feature__text { left: 24px; bottom: 24px; width: calc(100% - 48px); }
  .letters-feature__title { font-size: 32px; }
  .letters-popular__grid { grid-template-columns: minmax(0, 1fr); }
  .letters-list__link { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; padding: 20px 0; }
  .letters-list__thumb { width: 96px; height: 64px; }
  .letters-list__title { font-size: 17px; line-height: 24px; }
  #page-container .letter__title { font-size: 36px !important; }
  #page-container .letter__subtitle { font-size: 17px; }
  #page-container .letter__body p,
  #page-container .letter__body li { font-size: 18px; }
  #page-container .letter__body h2 { font-size: 24px !important; margin-top: 44px !important; }
  #page-container .letter__body h3 { font-size: 19px !important; }
  .letter-table__card { padding: 16px; }
  .letter-table__dots { margin-bottom: 16px; }
  .letter__body .letter-table th,
  .letter__body .letter-table td { min-width: 150px; }
  .letter__body .cb-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .letter__body .cb-pre code { min-width: 0; }
  .cb-line { grid-template-columns: 36px 1fr; }
  .cb .cb-copy__label { display: none; }
  .cb .cb-copy { padding: 0 10px; }
  .letter-signup,
  .letter-cta { padding: 22px; }
}