/* Travis Hellstrom — travishellstrom.com */
/* Design tokens */
:root {
  --bg: #F7F4EF;
  --ink: #1E1B16;
  --body-ink: #2B2620;
  --muted: #6F675B;
  --faint: #9A9081;
  --line: #E4DCCC;
  --accent: #8A6D3B;
  --card: #FFFDF9;
  --btn-bg: #1E1B16;
  --btn-fg: #F7F4EF;
  --btn-hover: #3A342B;
}
[data-theme="dark"] {
  --bg: #161310;
  --ink: #EDE7DA;
  --body-ink: #D9D2C3;
  --muted: #A89D8C;
  --faint: #7E7566;
  --line: #2C2721;
  --accent: #C9A96A;
  --card: #211D17;
  --btn-bg: #EDE7DA;
  --btn-fg: #161310;
  --btn-hover: #FFF7E6;
}

/* ── WHITE LOOK (Sep 2026): an optional clean white-and-sky palette a page opts into with
   <html data-look="white">, for apps that want a quieter canvas than the cream (first: /gratitude/,
   the old gratitude.travishellstrom.com look). Night keeps the clock rule and turns near-black.
   The fun modes still win: these only apply while no data-mode is set. ── */
html[data-look="white"]:not([data-mode]) {
  --bg: #FFFFFF;
  --ink: #111111;
  --body-ink: #2E2E2E;
  --muted: #666A70;
  --faint: #9A9EA4;
  --line: #EAEAEA;
  --accent: #0369A1;
  --card: #FFFFFF;
  --btn-bg: #111111;
  --btn-fg: #FFFFFF;
  --btn-hover: #333333;
}
html[data-look="white"][data-theme="dark"]:not([data-mode]) {
  --bg: #0A0A0A;
  --ink: #FFFFFF;
  --body-ink: #D4D4D4;
  --muted: #A0A0A0;
  --faint: #6E6E6E;
  --line: #1F1F1F;
  --accent: #38BDF8;
  --card: #121212;
  --btn-bg: #FFFFFF;
  --btn-fg: #0A0A0A;
  --btn-hover: #E6E6E6;
}

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Lora', serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  transition: background-color .45s, color .45s;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--faint); }

/* View transition */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ── NAV ── */
.nav {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--bg);
}
.nav-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.nav-wordmark {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.nav-links {
  display: flex;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
  align-items: center;
  margin-left: auto;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.theme-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  transition: border-color .15s, color .15s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-icon { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: block; }
/* Palette mode button (JS-injected into .nav-inner) — the mode-menu entry at
   every width. The old in-markup sun/moon toggles were removed from the site
   pages; the first rule hides any straggler so two toggles never show. (The
   .theme-icon sun/moon rules above stay: the desk's own sidebar toggle, which
   sits outside .nav-links, still uses them.) */
.nav-links .theme-toggle { display: none; }
.mode-toggle { position: relative; }
.mode-toggle-ic { display: flex; align-items: center; justify-content: center; }
html[data-mode] .mode-toggle .mode-toggle-ic { display: none; }
/* The wink (class added briefly by main.js): a rotating neon ring in the 80s
   mode's own pink→violet→cyan sweeps the button while the palette crossfades
   to a glowing "80s" and back. All parts idle at opacity 0 otherwise. */
.mode-toggle::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  background: conic-gradient(#ff2ec4, #8f4bff, #00e5ff, #8f4bff, #ff2ec4);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: 0;
  pointer-events: none;
}
.mode-wink-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #ff2ec4;
  text-shadow: 0 0 8px rgba(255, 46, 196, .55);
  opacity: 0;
  pointer-events: none;
}
.mode-toggle.winking .mode-toggle-ic { animation: mode-wink-out 2.4s ease-in-out both; }
.mode-toggle.winking .mode-wink-face { animation: mode-wink-in 2.4s ease-in-out both; }
.mode-toggle.winking::after { animation: mode-wink-ring 2.4s ease-in-out both; }
@keyframes mode-wink-in  { 0%, 18% { opacity: 0; } 32%, 68% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes mode-wink-out { 0%, 18% { opacity: 1; } 32%, 68% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes mode-wink-ring {
  0% { opacity: 0; transform: rotate(0turn); }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; transform: rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  .mode-toggle.winking .mode-toggle-ic,
  .mode-toggle.winking .mode-wink-face,
  .mode-toggle.winking::after { animation: none; }
}
/* The menu button draws its own two lines (the ☰ in the markup is hidden by
   font-size 0), which turn into an ✕ while the menu is open (main.js keeps
   aria-expanded in step). */
.nav-burger {
  display: none;
  position: relative;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0;
  line-height: 1;
  padding: 0;
}
.nav-burger::before, .nav-burger::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.6px;
  margin: -0.8px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-burger::before { transform: translateY(-3.5px); }
.nav-burger::after { transform: translateY(3.5px); }
.nav-burger[aria-expanded="true"]::before { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"]::after { transform: rotate(-45deg); }
/* "Subscribe free" at the foot of the phone menu (main.js adds it; opens the signup dialog). */
.nav-sub { display: none; }
@keyframes nav-sheet { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .nav-burger { display: block; }
  /* The menu: a sheet under the bar, big serif rows you can hit with a thumb. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 40px -30px rgba(20, 17, 13, .45);
    padding: 4px 20px 22px;
    z-index: 50;
  }
  .nav-links.open { display: flex; animation: nav-sheet .26s cubic-bezier(.2,.7,.2,1); }
  .nav-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
  }
  .nav-links a::after { content: '\2192'; font-family: 'Lora', serif; font-size: 16px; color: var(--faint); }
  .nav-links a.active { color: var(--accent); }
  .nav-links .nav-sub {
    display: block;
    margin-top: 20px;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: 'Lora', serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
  }
  .nav-inner { padding: 10px 10px 10px 20px; gap: 0; flex-wrap: nowrap; }
  .nav-brand { gap: 10px; min-width: 0; margin-right: auto; }
  .nav-avatar { width: 36px; height: 36px; }
  .nav-wordmark { font-size: 19px; }
  .nav-brand .nav-wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Phones: plain icons with thumb-sized targets, no rings (after justinwelsh.me).
     The fun modes' own button looks (the ’80s glow) still win. */
  .nav-inner > .theme-toggle, .nav-inner > .search-toggle, .nav-burger {
    flex: none;
    width: 42px;
    height: 42px;
    margin: 0;
    border-color: transparent;
    color: var(--ink);
  }
  .nav-inner > .search-toggle:hover { border-color: transparent; }
  .nav-inner > .theme-toggle:active, .nav-inner > .search-toggle:active, .nav-burger:active { background: var(--line); }
  .nav-inner > .search-toggle svg { width: 18px; height: 18px; }
  .nav-inner > .mode-toggle .mode-toggle-ic svg { width: 19px; height: 19px; }
  .mode-menu { right: 12px; }
}

/* ── FOOTER ── */
.footer {
  border-top: 1px solid var(--line);
  margin-top: 130px;
}
.footer-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: var(--accent); }
.footer-links { display: flex; gap: 22px; }
.footer-social { display: flex; gap: 22px; }

/* ── CONTAINERS ── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.content { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.essay-body { max-width: 820px; margin: 0 auto; padding: 0 32px; }

/* ── SUBSCRIBE ── */
.sub-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sub-form input[type="email"], .sub-form input[type="text"] {
  flex: 1.4;
  min-width: 220px;
  font-size: 16px;
  font-weight: 400;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.sub-form input[type="email"]:focus, .sub-form input[type="text"]:focus { border-color: var(--accent); }
.sub-form input[type="email"].error { border-color: #C0603F; }
.sub-btn {
  font-size: 16px;
  font-weight: 700;
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.sub-btn:hover { background: var(--btn-hover); }
/* ── POST-SUBSCRIBE NAME MODAL ── */
.name-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 17, 13, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: name-modal-fade .18s ease-out;
}
@keyframes name-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.name-modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 48px -20px rgba(20, 17, 13, 0.35);
  animation: name-modal-rise .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes name-modal-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.name-modal-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 10px;
}
.name-modal-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 20px;
}
.name-modal-form { display: flex; flex-direction: column; gap: 14px; }
.name-modal-input {
  font-size: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.name-modal-input:focus { border-color: var(--accent); }
.name-modal-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.name-modal-skip {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
}
.name-modal-skip:hover { color: var(--ink); }
.name-modal-save {
  font-size: 15px;
  font-weight: 700;
  padding: 11px 24px;
  border: none;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background .15s;
}
.name-modal-save:hover { background: var(--btn-hover); }

.sub-success {
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
  margin: 6px 0;
}
.sub-note { font-size: 12px; color: var(--faint); margin-top: 12px; }

/* ── EYEBROW ── */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── HOME HERO ── */
.hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 140px 32px 0;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(42px, 5.5vw, 68px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  min-height: 1.12em;
}
.hero-sub {
  font-size: 20px;
  color: var(--muted);
  line-height: 1.6;
  margin: 28px 0 0;
  max-width: none;
}
.hero .sub-form { max-width: 560px; margin-top: 36px; }

/* Typewriter cursor — out of the flow, so it can never change where the
   headline wraps: mid-type the text breaks exactly where the finished line
   will, instead of the last word dipping to a second line and popping back
   up when the cursor is removed. */
.tw-cursor {
  position: absolute;   /* out of the flow: no width, and no line-break chance mid-word */
  opacity: .55;
  animation: blink .9s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-cursor { animation: none; } }
/* The letters still to come are laid out from the start, just unseen, so the headline's
   line breaks (balanced on phones) are final from the first letter. */
.tw-hide { visibility: hidden; }

/* ── RISE ANIMATION (Home only) ── */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.rise > * {
  animation: rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.rise > :nth-child(1) { animation-delay: .05s; }
.rise > :nth-child(2) { animation-delay: .13s; }
.rise > :nth-child(3) { animation-delay: .21s; }
.rise > :nth-child(4) { animation-delay: .29s; }
.rise > :nth-child(5) { animation-delay: .37s; }
@media (prefers-reduced-motion: reduce) { .rise > * { animation: none; } }

/* ── CARDS / SECTIONS ── */
.section { max-width: 880px; margin: 0 auto; padding: 110px 32px 0; }
.section-center { text-align: center; }
.section-center .sub-form { justify-content: center; margin: 28px auto 0; max-width: 480px; }

.section h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.01em;
  margin: 0;
}
.section h2 em { font-style: italic; }
.section-body {
  font-family: 'Lora', serif;
  font-size: 19px;
  line-height: 1.7;
  color: var(--body-ink);
  margin: 16px 0 0;
  max-width: 620px;
}
.section-link {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  margin-top: 14px;
}
.section-link:hover { color: var(--ink); }

/* Coming Saturday card */
.coming-card { padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.coming-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  text-wrap: balance;
}
.coming-desc {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 600px;
}

/* Upcoming essays (assets/upcoming.js fills [data-upcoming] from /api/upcoming;
   titles and deks only — never the text). Hidden until something is scheduled. */
.upcoming { margin-top: 40px; padding: 24px 26px 22px; border: 1px dashed var(--line); border-radius: 14px; }
.upcoming[hidden] { display: none; }
.upcoming-item { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.upcoming-item > span { display: block; }
.upcoming-item + .upcoming-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.upcoming-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 23px; line-height: 1.25; color: var(--ink); margin: 6px 0 4px; }
.upcoming-arrow { display: inline; color: var(--accent); opacity: .55; transition: opacity .2s, margin .2s; }
.upcoming-item:hover .upcoming-arrow, .upcoming-item:focus-visible .upcoming-arrow { opacity: 1; margin-left: 3px; }
.upcoming-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
.upcoming { transition: border-color .2s; }
.upcoming:hover { border-color: var(--accent); }
.upcoming-foot { font-size: 14.5px; color: var(--muted); margin: 20px 0 0; }
.upcoming-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.upcoming-foot a:hover { color: var(--ink); }

/* Bordered essay teaser (Essays page) */
/* Borderless list entries divided by hairlines — the title carries the
   weight; topic above and meta below stay quiet. */
.essay-teaser {
  border-top: 1px solid var(--line);
  padding: 36px 0 44px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.essay-teaser:first-of-type { margin-top: 48px; }
/* Most recent / By topic tabs shared by /essays/ and /essays/topics/. */
.essay-tabs {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  border-bottom: 1px solid var(--line);
}
.essay-tabs a {
  padding-bottom: 12px;
  margin-bottom: -1px;
  font-size: 15px;
  color: var(--faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.essay-tabs a:hover { color: var(--ink); }
.essay-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.essay-tabs ~ .essay-teaser:first-of-type { border-top: none; margin-top: 16px; }
.essay-teaser-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 29px;
  line-height: 1.22;
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
}
a.essay-teaser-title:hover { color: var(--accent); }
.essay-teaser-title { text-wrap: balance; }
.essay-teaser-meta {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* The essay's dek on index cards — the promise under the title. */
.essay-teaser-dek {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 560px;
  margin: 0;
}
.essay-teaser .sub-form { margin-top: 16px; }

/* ── PAGE HEADERS (inner pages) ── */
.page-header {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 32px 0;
}
.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(38px, 5.5vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}
.page-sub {
  font-size: 18px;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 560px;
}

/* ── ABOUT ── */
.about-hero {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.about-portrait {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 32px;
}
.about-hero h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(38px, 5.5vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.about-body {
  font-family: 'Lora', serif;
  font-size: 19px;
  line-height: 1.8;
  color: var(--body-ink);
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}
.about-body p { margin-top: 24px; }
.about-body p:first-child { margin-top: 32px; }
.about-body h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 22px;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--ink);
}
@media (max-width: 720px) {
  .about-portrait { width: 108px; height: 108px; }
}

/* ── BOOKS ── */
.books-list { margin-top: 48px; display: flex; flex-direction: column; gap: 48px; }
.book-item { display: flex; gap: 32px; align-items: flex-start; }
.book-cover {
  width: 120px;
  flex: none;
  aspect-ratio: 2/3;
  border-radius: 8px;
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 8px;
}
.book-info h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.book-desc { font-size: 16px; color: var(--muted); line-height: 1.6; }
.book-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}
@media (max-width: 560px) {
  .book-item { flex-direction: column; }
  .book-cover { width: 80px; }
}

/* ── RESOURCES ── */
.resource-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 32px;
  margin-top: 32px;
  text-decoration: none;
  display: block;
  transition: border-color .15s;
}
.resource-card:hover { border-color: var(--accent); }
.resource-card h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 20px;
  margin: 8px 0 8px;
}
.resource-card p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.resource-card .card-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}
.past-writing-list { margin-top: 24px; display: flex; flex-direction: column; gap: 0; }
.past-writing-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 20px 4px;
  text-decoration: none;
  color: var(--ink);
  transition: color .15s;
}
.past-writing-item:hover { color: var(--accent); }
.past-writing-item:hover .pwa { color: var(--accent); }
.pwt {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
}
.pwd { font-size: 14px; color: var(--muted); }
.pwa { font-size: 14px; font-weight: 600; color: var(--accent); }

/* ── ESSAY PAGES ── */
.essay-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 80px 32px 0;
}
.essay-eyebrow { margin-bottom: 20px; }
.essay-wrap h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 20px;
  text-wrap: balance;
}
/* Dek — the one-line promise under the title (sits between h1 and byline). */
.essay-dek {
  font-family: 'Lora', serif;
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: -8px 0 22px;
  max-width: 34em;
}

/* ── ESSAY LAYOUT: main column + sticky sidebar (Justin Welsh-style) ── */
.essay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 32px 96px;
  align-items: start;
}
.essay-main { min-width: 0; }
.essay-main .essay-wrap { max-width: none; margin: 0; padding: 0; }
.essay-side { min-width: 0; }
/* Reading: once you scroll into the piece the sidebar fades back; hover or tab into it and it
   comes right back (main.js READING sets html.side-dim). */
.essay-side-sticky { transition: opacity .6s ease; }
html.side-dim .essay-side-sticky { opacity: .18; }
html.side-dim .essay-side-sticky:hover, html.side-dim .essay-side-sticky:focus-within { opacity: 1; transition-duration: .25s; }
.essay-side-sticky {
  position: sticky;
  top: 96px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 0 0 32px;
}
.essay-side-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.essay-side-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 12px;
}
.essay-side-title em { font-style: italic; }
.essay-side .sub-form { flex-direction: column; gap: 10px; }
.essay-side .sub-form input { width: 100%; }
.essay-side .sub-btn { width: 100%; font-weight: 500; }
.essay-side-fine { font-size: 12px; color: var(--faint); margin: 24px 0 0; }
/* The supporting line under the sidebar headline (main.js adds it when a page
   doesn't carry one), after justinwelsh.me's "Join 200,000+ readers…". */
.essay-side-sub { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0 0 22px; }
@media (max-width: 900px) {
  .essay-layout { grid-template-columns: 1fr; gap: 8px; padding: 64px 32px 64px; }
  .essay-side-sticky { position: static; margin-top: 48px; border-left: 0; border-top: 1px solid var(--line); padding: 32px 0 0; }
}

/* ── TITLE REVEAL ANIMATION ── */
.title-reveal {
  animation: title-reveal-clip 0.85s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes title-reveal-clip {
  from { clip-path: inset(-12px 100% -12px 0); }
  to { clip-path: inset(-12px 0 -12px 0); }
}
@media (prefers-reduced-motion: reduce) { .title-reveal { animation: none; } }

/* Topic label — sits above the title on essay pages and index cards,
   faint on purpose so it never competes with the title. Each topic links
   to its section on /essays/topics/. */
.essay-topic-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin: 0 0 16px;
}
.essay-teaser .essay-topic-tag { margin: 0; }
.essay-topic-tag a { color: inherit; text-decoration: none; }
.essay-topic-tag a:hover { color: var(--accent); }
/* No rule above the signature — a letter flows straight into its sign-off;
   the divider before the reply invite below does the separating. */
.essay-signoff {
  margin-top: 56px;
}
.essay-signoff img { width: 110px; height: auto; opacity: 0.85; }

/* ── READER REPLY INVITE ── */
.essay-reply-invite {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.essay-reply-question {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
}
.essay-reply-note {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
}
.essay-reply-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.essay-reply-note a:hover { color: var(--accent); }

/* ── ROTATING READER QUOTE (sidebar) ── */
/* Set off by a small centered dot, not a full rule (after justinwelsh.me). */
.essay-side-quote {
  margin-top: 30px;
  min-height: 60px;
}
.essay-side-quote::before {
  content: "";
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--faint);
  margin: 0 auto 30px;
}
.essay-side-quote-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body-ink);
  margin: 0 0 8px;
}
.essay-side-quote-author {
  font-size: 13px;
  color: var(--faint);
  margin: 0;
}
.essay-side-quote-on { color: var(--muted); font-style: italic; text-decoration: none; border-bottom: 1px solid var(--line); }
.essay-side-quote-on:hover { color: var(--accent); }
.essay-side-quote.is-loading { opacity: 0; }
.essay-side-quote.is-ready { opacity: 1; transition: opacity .3s ease; }
.essay-byline {
  font-size: 15px;
  color: var(--muted);
  margin-top: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.essay-byline em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--faint);
}
.essay-byline span:first-child {
  color: var(--ink);
  font-weight: 500;
}
/* Byline name links (e.g. to /about/) stay plain — no underline. */
.essay-byline a { color: inherit; text-decoration: none; }
.essay-byline a:hover { color: var(--accent); }
.essay-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}
.essay-content {
  font-family: 'Lora', serif;
  font-size: 19px;
  line-height: 1.62;
  color: var(--body-ink);
}
.essay-content p { margin-bottom: 18px; }
.essay-content p:last-child { margin-bottom: 0; }
.essay-content strong { font-weight: 700; color: var(--ink); }
.essay-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.essay-content a:hover { color: var(--accent); }
.essay-content h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 48px 0 16px;
  color: var(--ink);
}
.essay-content ul, .essay-content ol { margin: 0 0 28px; padding-left: 26px; }
.essay-content ul { list-style: disc; }
.essay-content ol { list-style: decimal; }
.essay-content li { margin-bottom: 10px; }
.essay-content li::marker { color: var(--accent); }
.essay-content blockquote {
  border-left: 3px solid var(--muted);
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--muted);
}
/* Pictures in an essay (uploaded from the desk, Oct 2026): full column
   width, the caption small and centered under it. */
.essay-content .essay-figure { margin: 36px 0; }
.essay-content .essay-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.essay-content .essay-figure figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  color: var(--muted);
  text-align: center;
}
/* A slideshow: two or more picture lines in one block (Oct 2026, for the
   Virginia Blueprint slides in "The Worst Speech of My Life"). Swipe or
   scroll works with no script; main.js adds the arrows and the "3 / 10". */
.essay-slides { margin: 36px 0; }
.essay-slides-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
  border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line);
  scrollbar-width: none;
}
.essay-slides-track::-webkit-scrollbar { display: none; }
.essay-slides-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.essay-slides-track img {
  flex: 0 0 100%; width: 100%; max-width: 100%; height: auto; margin: 0;
  aspect-ratio: 16 / 9; object-fit: contain; scroll-snap-align: center; border-radius: 0;
}
.essay-slides-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.essay-slides-bar button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.essay-slides-bar button:disabled { opacity: .35; cursor: default; }
.essay-slides-count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.essay-slides figcaption { margin-top: 8px; font-size: 15px; line-height: 1.5; font-style: italic; color: var(--muted); text-align: center; }
/* flow-root keeps the drop cap inside its own paragraph: a one-line opener
   no longer lets the cap hang into the next paragraph. */
.essay-content .essay-first-p { display: flow-root; }
.essay-content .essay-first-p:first-letter {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(44px, 5.5vw, 58px);
  line-height: 0.9;
  float: left;
  margin: 6px 10px -4px -1px;
  color: var(--ink);
}
/* One-line opener: a raised initial on the sentence's baseline (main.js). */
.essay-content .essay-first-p.essay-first-p--one:first-letter {
  float: none;
  font-size: 2.4em;
  line-height: 1;
  margin: 0 1px 0 0;
}
.essay-sub-section { margin-top: 40px; }
.essay-sub-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  font-family: 'Lora', serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 12px;
}
.essay-sub-section ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.essay-sub-section ul li a {
  color: var(--accent);
  font-size: 17px;
  font-family: 'Playfair Display', serif;
}
.essay-footer {
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding-top: 60px;
  text-align: center;
}
.essay-footer h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 26px;
  margin-bottom: 8px;
}
.essay-footer p { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.essay-footer .sub-form { justify-content: center; max-width: 420px; margin: 0 auto; }

/* ── VALUES EXERCISE ── */
.values-wrap { max-width: 820px; margin: 0 auto; padding: 80px 32px 0; }
.step-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 32px 0;
}
.step-pill {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  cursor: default;
  transition: background .15s, color .15s, border-color .15s;
  background: transparent;
  color: var(--muted);
}
.step-pill.active {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}
.step-pill.done {
  background: var(--card);
  color: var(--accent);
  border-color: var(--accent);
  cursor: pointer;
}
.step-pill.locked { opacity: .4; cursor: not-allowed; }

.chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}
@keyframes chipPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: transform .15s, border-color .15s, background .15s, color .15s;
  user-select: none;
}
.chip:hover { transform: translateY(-2px); border-color: var(--accent); }
.chip:active { transform: scale(.93); }
.chip.on {
  background: var(--accent);
  color: var(--btn-fg);
  border-color: var(--accent);
}
[data-theme="dark"] .chip.on { color: var(--ink); }
.chip.on.popping {
  animation: chipPop .35s cubic-bezier(.34,1.56,.64,1);
}

.values-counter {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 16px;
}
.values-nav {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.btn-primary {
  font-size: 16px;
  font-weight: 700;
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-secondary {
  font-size: 15px;
  font-weight: 600;
  padding: 13px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.btn-secondary:hover { color: var(--ink); border-color: var(--muted); }

.add-own {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.add-own input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  outline: none;
}
.add-own button {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Results */
.values-results { margin-top: 40px; }
.result-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  opacity: 0;
}
.result-item.risen { opacity: 1; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.result-num {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  width: 32px;
  flex: none;
}
.result-label {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
}

.email-values-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 32px;
  margin-top: 48px;
  text-align: center;
}
.email-values-box h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 8px;
}
.email-values-box p { font-size: 15px; color: var(--muted); margin-bottom: 20px; }
.email-values-box .sub-form { justify-content: center; }

/* Canvas for confetti */
#confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ── WRITING DESK ── */
.desk-layout { display: flex; min-height: 100vh; }
.desk-sidebar {
  width: 230px;
  flex: none;
  border-right: 1px solid var(--line);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.desk-logo {
  padding: 0 10px 20px;
}
.desk-logo span {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 19px;
  display: block;
}
.desk-logo small { font-size: 13px; color: var(--faint); }
.desk-nav-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.desk-nav-btn:hover { background: var(--card); color: var(--ink); }
.desk-nav-btn.active { background: var(--card); color: var(--ink); }
.desk-nav-count { float: right; font-weight: 400; color: var(--faint); }
.desk-footer {
  margin-top: auto;
  padding: 16px 10px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.desk-main { flex: 1; min-width: 0; padding: 44px 48px 80px; }
.desk-h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 36px;
  margin: 0;
}

/* Draft list */
.draft-list { display: flex; flex-direction: column; margin-top: 24px; }
.draft-item {
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 22px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  width: 100%;
  transition: background .1s;
}
.draft-item:hover { background: var(--card); }
.draft-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.badge-scheduled { background: #C9A96A22; color: var(--accent); }
.badge-draft { background: var(--line); color: var(--muted); }
.draft-date { font-size: 13px; color: var(--faint); }
.draft-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  text-align: left;
}
.draft-excerpt { font-size: 15px; color: var(--muted); text-align: left; }

/* Editor */
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.editor-actions { display: flex; gap: 10px; align-items: center; }
.editor-save-state { font-size: 13px; color: var(--faint); }
.btn-outline {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.editor-title {
  width: 100%;
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: none;
  background: none;
  color: var(--ink);
  outline: none;
  padding: 0;
  margin-bottom: 20px;
}
.editor-title::placeholder { color: var(--faint); }
.editor-body {
  width: 100%;
  font-family: 'Lora', serif;
  font-size: 19px;
  line-height: 1.8;
  border: none;
  background: none;
  color: var(--body-ink);
  outline: none;
  resize: vertical;
  min-height: 400px;
  padding: 0;
}
.editor-word-count { font-size: 13px; color: var(--faint); margin-top: 8px; }

/* Stats cards */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.stat-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  background: var(--card);
}
.stat-card .stat-label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.stat-card .stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 600;
}
.stat-card .stat-sub { font-size: 13px; color: var(--accent); margin-top: 4px; }

/* Saturday schedule */
.saturday-list { display: flex; flex-direction: column; margin-top: 24px; }
.saturday-row {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 20px 4px;
}
.saturday-cal {
  width: 76px;
  flex: none;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 0;
  background: var(--card);
}
.saturday-cal .cal-month {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}
.saturday-cal .cal-day {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 24px;
}
.saturday-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 19px;
  margin: 0;
}
.saturday-note { font-size: 14px; color: var(--faint); margin: 4px 0 0; }

/* ── RESPONSIVE UTILITIES ── */
@media (max-width: 720px) {
  .hero, .section, .page-header, .about-grid { padding-left: 20px; padding-right: 20px; }
  .content, .essay-wrap, .values-wrap { padding-left: 20px; padding-right: 20px; }
  .desk-main { padding: 24px 20px 60px; }
  .desk-sidebar { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ── ON A PHONE (Sep 30 2026, Travis passing on Evan: "most people will read the newsletter on
   mobile … easy to read, delightful, engaging, easy to read the next post, easy to subscribe",
   after justinwelsh.me on a phone). Wider text (20px gutters instead of 32), calmer spacing,
   full-width signup forms, a centered footer, the latest essay as one tappable card, and the
   reading pieces main.js adds (below): the progress line, Share, Read next, the signup nudge
   and the signup dialog. ── */
a, button, summary, label { -webkit-tap-highlight-color: rgba(138, 109, 59, .14); }
.page-main { max-width: 880px; margin: 0 auto; padding: 80px 32px 0; }
@media (max-width: 720px) {
  .essay-layout { padding: 40px 20px 24px; }
  /* Hub pages whose <main> carries its own inline 32px padding (/about/, /speeches/, /letters/ …). */
  main[style*=" 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .about-body { font-size: 18.5px; line-height: 1.72; }
  .page-main { padding: 48px 20px 0; }
  .wrap, .essay-body { padding-left: 20px; padding-right: 20px; }
  .essay-content { font-size: 18.5px; line-height: 1.72; }
  .essay-content p { margin-bottom: 20px; }
  .essay-divider { margin: 32px 0; }
  .essay-byline { font-size: 14.5px; row-gap: 2px; }
  /* A dated byline drops "By Travis Hellstrom ·" on a phone, so it stays one line (his name and
     face are in the bar right above): "September 26, 2026 · 3 min read · Issue #3". */
  .essay-byline:has(time) > span:first-child, .essay-byline:has(time) > span:first-child + span { display: none; }
  .essay-signoff { margin-top: 44px; }
  .hero { padding-top: 64px; }
  .hero h1 { font-size: 44px; text-wrap: balance; }
  .hero-sub { font-size: 19px; margin-top: 20px; }
  .hero .sub-form { margin-top: 28px; }
  .section { padding-top: 80px; }
  .section-body { font-size: 18px; }
  .page-header { padding-top: 48px; }
  .essay-teaser { padding: 28px 0 32px; gap: 8px; }
  .essay-teaser-title { font-size: 26px; }
  .coming-card {
    position: relative;
    margin-top: 14px;
    padding: 22px 22px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    transition: transform .15s;
  }
  .coming-card .section-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .coming-card:active { transform: scale(.985); }
  .footer { margin-top: 80px; }
  .footer-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 36px 20px calc(40px + env(safe-area-inset-bottom));
  }
  .footer-links, .footer-social { justify-content: center; flex-wrap: wrap; gap: 4px 26px; }
  .footer-inner a { display: inline-block; padding: 6px 0; }
}
@media (max-width: 560px) {
  /* Signup forms: the email field and the button stack full width, 52px tall, easy to hit. */
  .sub-form { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .sub-form input[type="email"], .sub-form input[type="text"] {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none !important;
    height: 52px;
    padding: 0 20px;
  }
  .sub-form .sub-btn { width: 100%; height: 52px; padding: 0 24px; }
  .section-center .sub-form { max-width: none; }
}
.sub-btn:active, .share-btn:active, .sub-nudge-go:active { transform: scale(.97); }

/* Reading progress: a thin gold line across the top of the screen on every long read (main.js). */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 55;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
/* On a phone the top bar slides away while you read down and comes back when you scroll up. */
.nav { transition: transform .32s cubic-bezier(.2,.7,.2,1); }
html.nav-tucked .nav { transform: translateY(-101%); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* Share (main.js, /essays/ pages): the phone's own share sheet; copies the link elsewhere. */
.essay-share { margin-top: 32px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .12s;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-btn svg { flex: none; }

/* Read next (main.js, /essays/ pages): read from /essays/, the newest essay you haven't
   finished first. A child of .essay-layout, so it sits under the essay in the main column
   on a computer, and after the signup card on a phone. */
.essay-layout > .read-next { grid-column: 1; min-width: 0; }
.rn-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.rn-card {
  position: relative;
  display: block;
  padding: 26px 24px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.rn-card:hover { color: var(--ink); border-color: var(--faint); box-shadow: 0 18px 36px -24px rgba(20, 17, 13, .45); transform: translateY(-2px); }
.rn-card:active { transform: scale(.985); }
.rn-topic {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.rn-title { display: block; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 27px; line-height: 1.2; text-wrap: balance; }
.rn-dek { display: block; font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
.rn-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.rn-go { font-weight: 700; color: var(--accent); white-space: nowrap; }
.rn-list { list-style: none; margin: 8px 0 0; }
.rn-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.rn-list a:hover { color: var(--accent); }
.rn-list-title { font-family: 'Playfair Display', serif; font-size: 19px; line-height: 1.3; }
.rn-list-meta { flex: none; font-size: 13px; color: var(--faint); white-space: nowrap; }
.rn-list .is-read .rn-list-meta::before, .essay-teaser-meta .is-read-tag::before { content: '\2713\00a0'; color: var(--accent); }
.rn-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--muted);
}
.rn-all { font-weight: 700; color: var(--accent); white-space: nowrap; }
.rn-all:hover { color: var(--ink); }
.essay-teaser-meta .is-read-tag { color: var(--accent); }
/* The homepage's short list under the latest essay (same data, main.js). */
.home-more { margin-top: 28px; }
.home-more[hidden] { display: none; }

/* The end of an essay on a phone: one signup card, then Read next. */
@media (max-width: 900px) {
  .is-essay .essay-side .side-late { display: none; }
  .is-essay .essay-side-sticky.side-swapped .side-default { display: block; }
  .is-essay .essay-side-sticky, .is-essay .essay-footer {
    margin-top: 56px;
    padding: 34px 22px 28px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--card);
    text-align: center;
  }
  .is-essay .essay-side-title { font-size: 28px; }
  .is-essay .essay-footer h3 { font-size: 26px; line-height: 1.25; }
  .is-essay .essay-side .sub-form, .is-essay .essay-footer .sub-form { max-width: 420px; margin: 0 auto; }
  .is-essay .essay-side-fine { margin-top: 16px; }
  .is-essay .essay-layout > .read-next { margin-top: 56px; }
  /* Past writing carries its own signup at the foot of the article: never a second one. */
  .is-essay .essay-layout:has(.essay-main form.sub-form) > .essay-side { display: none; }
  /* Subscribers go straight from the essay to Read next. */
  .is-essay.is-subscribed .essay-side { display: none; }
}
@media (min-width: 901px) { .essay-layout > .read-next { margin-top: 8px; } }
.is-essay.is-subscribed .essay-footer:has(.sub-known) { display: none; }

/* The signup nudge (main.js): phones only, once, halfway through an essay; ✕ keeps it away
   for two weeks, and subscribers never see it. Tapping Subscribe opens the dialog below. */
.sub-nudge {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 6px 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 22px 44px -18px rgba(20, 17, 13, .5), 0 6px 16px -10px rgba(20, 17, 13, .25);
  transform: translateY(calc(100% + 40px));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.sub-nudge.in { transform: none; }
.sub-nudge img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.sub-nudge-main { flex: 1; min-width: 0; }
.sub-nudge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.sub-nudge-have, .sub-have {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sub-nudge-have { font-size: 13.5px; padding: 8px 0; }
.sub-nudge-have:hover, .sub-have:hover { color: var(--ink); }
.essay-side .essay-side-fine.sub-have-p { margin-top: 6px; }
.sub-note.sub-have-p { margin-top: 10px; }
.sub-nudge-text { min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.sub-nudge-text b { display: block; font-family: 'Playfair Display', serif; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.sub-nudge-go {
  flex: none;
  padding: 11px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s;
}
.sub-nudge-x {
  flex: none;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--faint);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  margin-top: -6px;
}
@media (min-width: 901px) { .sub-nudge { display: none; } }
@media (prefers-reduced-motion: reduce) { .sub-nudge { transition: none; } }

/* The signup dialog (the nudge's Subscribe, the phone menu's Subscribe free). It sits high on
   the screen so the keyboard never covers the email field. */
.sub-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(9vh, 48px) 16px 16px;
  background: rgba(20, 17, 13, .5);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  animation: name-modal-fade .18s ease-out;
}
.sub-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 34px 24px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 30px 60px -24px rgba(20, 17, 13, .5);
  animation: name-modal-rise .26s cubic-bezier(.2,.7,.2,1);
}
.sub-dialog-face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; }
.sub-dialog-title { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 27px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; text-wrap: balance; }
.sub-dialog-title em { font-style: italic; }
.sub-dialog-eyebrow { display: block; margin: 0 0 8px; }
.sub-dialog-body a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sub-dialog-body a:hover { color: var(--ink); }
.sub-dialog-body { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 0 0 22px; }
.sub-dialog .sub-form { flex-direction: column; align-items: stretch; }
.sub-dialog .sub-form input[type="email"] { flex: none; width: 100%; min-width: 0; height: 52px; padding: 0 20px; }
.sub-dialog .sub-btn { width: 100%; height: 52px; }
.sub-dialog .sub-note { margin-top: 14px; }
.sub-dialog-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--faint);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.sub-dialog-x:hover { color: var(--ink); }

/* ── SIDEBAR CTA SWAP ("before you go…") ── */
.side-late { display: none; }
.side-swapped .side-default { display: none; }
.side-swapped .side-late { display: block; animation: side-swap-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes side-swap-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .side-swapped .side-late { animation: none; } }
.side-late-text { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.side-late a.sub-btn { display: block; text-align: center; width: 100%; text-decoration: none; }
.side-swap-trigger { display: block; height: 1px; }
/* Sticky rails need a full-height track to travel in (align-items:start otherwise
   collapses the aside to content height and the sidebar scrolls away) */
.essay-layout .essay-side { align-self: stretch; }

/* ── BEFORE-YOU-GO CTA — quiet ghost pill, not a full black button ── */
.side-late a.sub-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  box-shadow: none;
}
.side-late a.sub-btn:hover { background: none; border-color: var(--accent); color: var(--accent); }

/* ── 📼 80s MODE ─────────────────────────────────────────────
   Third look, toggled by the tape button main.js injects into the
   nav (localStorage "travis-80s", html[data-mode="80s"]). Token
   override + chrome only; Monoton/VT323 are injected on demand by
   main.js so normal visitors never load them. The movies page
   layers its own page-local flourishes on top. */
html[data-mode="80s"] {
  --bg: #140a3c;
  --ink: #efe9ff;
  --body-ink: #d9d0ff;
  --muted: #b3a4ea;
  --faint: #8d7fc9;
  --line: rgba(255, 46, 196, .4);
  --accent: #00e5ff;
  --card: #1b0d4b;
  --btn-bg: #ff2ec4;
  --btn-fg: #140a3c;
  --btn-hover: #00e5ff;
  background: #08032a;
}
html[data-mode="80s"] body { background: transparent; }
html[data-mode="80s"] body::before { /* synth grid floor */
  content: '';
  position: fixed;
  left: -40vw; right: -40vw; bottom: -14vh;
  height: 46vh;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 46, 196, .5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 46, 196, .5) 2px, transparent 2px);
  background-size: 64px 46px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom;
  opacity: .45;
}
html[data-mode="80s"] body::after { /* CRT scanlines */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
  opacity: .45;
}
html[data-mode="80s"]::after { /* the DeLorean — cruises the grid floor with twin
  fire trails and a neon underglow, then hits 88 and time-jumps off the page */
  content: '';
  position: fixed;
  bottom: 1.4vh;
  left: 0;
  width: 150px; height: 52px;
  pointer-events: none;
  /* Above page content (unlike the camel's -1) so cards can't hide it,
     below the nav (z 50+), menus, and the scanline overlay (9990). */
  z-index: 5;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 110%22%3E%3Cpath d=%22M2 90 L32 87 L23 92 L50 89 L40 94 L58 92%22 fill=%22none%22 stroke=%22%23ffb300%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8 101 L36 99 L28 103 L54 100%22 fill=%22none%22 stroke=%22%23ff5e00%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cg stroke=%22%231c1e24%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22%3E%3Crect x=%2272%22 y=%2230%22 width=%225%22 height=%2215%22 fill=%22%238a8f99%22/%3E%3Crect x=%2268%22 y=%2220%22 width=%2213%22 height=%2211%22 rx=%222%22 fill=%22%23e8eaee%22/%3E%3Crect x=%2271%22 y=%2213%22 width=%227%22 height=%228%22 rx=%222%22 fill=%22%23c7ccd3%22/%3E%3Cpath d=%22M66 46 L46 33 L44 48 L66 54 Z%22 fill=%22%232b2e34%22/%3E%3Crect x=%2250%22 y=%2272%22 width=%2212%22 height=%225%22 rx=%222%22 fill=%22%238a8f99%22/%3E%3Crect x=%2250%22 y=%2280%22 width=%2212%22 height=%225%22 rx=%222%22 fill=%22%238a8f99%22/%3E%3Cpath d=%22M62 84 L62 52 L120 42 L152 30 L186 28 L206 44 L288 50 L303 55 L306 62 L306 78 Q306 84 298 84 Z%22 fill=%22%23d6d9de%22/%3E%3Cpath d=%22M130 42 L148 34 M137 43 L155 35 M144 44 L162 36%22 fill=%22none%22 stroke-width=%222%22/%3E%3Cpath d=%22M232 49 L233 78%22 fill=%22none%22 stroke-width=%222%22/%3E%3Crect x=%2264%22 y=%2244%22 width=%2260%22 height=%2222%22 rx=%224%22 fill=%22%2333363d%22/%3E%3Crect x=%2270%22 y=%2248%22 width=%2242%22 height=%224%22 rx=%222%22 fill=%22%2346b34f%22 stroke-width=%221.5%22/%3E%3Crect x=%2270%22 y=%2255%22 width=%2242%22 height=%224%22 rx=%222%22 fill=%22%2346b34f%22 stroke-width=%221.5%22/%3E%3Crect x=%22115%22 y=%2248%22 width=%226%22 height=%226%22 fill=%22%23f5c400%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22118%22 cy=%2260%22 r=%222.2%22 fill=%22%23e0312e%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M66 66 C80 78 110 84 142 82%22 fill=%22none%22 stroke=%22%23c7ccd3%22 stroke-width=%225%22/%3E%3Cpath d=%22M66 66 C80 78 110 84 142 82%22 fill=%22none%22 stroke=%22%231c1e24%22 stroke-width=%221%22 opacity=%22.4%22/%3E%3Cpath d=%22M154 33 L184 31 L204 45 L154 45 Z%22 fill=%22%23cfeef7%22/%3E%3Cpath d=%22M170 32 L160 45 L167 45 L177 32 Z%22 fill=%22%23ffffff%22 stroke=%22none%22 opacity=%22.85%22/%3E%3Crect x=%22203%22 y=%2238%22 width=%227%22 height=%225%22 rx=%221.5%22 fill=%22%232b2e34%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M152 47 L232 49%22 fill=%22none%22 stroke-width=%222%22/%3E%3Cpath d=%22M198 49 L216 76%22 fill=%22none%22 stroke-width=%222%22/%3E%3Cpath d=%22M222 56 L234 57%22 fill=%22none%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M62 72 L306 72 L306 78 Q306 84 298 84 L62 84 Z%22 fill=%22%23b9bec7%22 stroke=%22none%22/%3E%3Crect x=%22142%22 y=%2279%22 width=%22128%22 height=%226%22 rx=%222%22 fill=%22%235b6068%22 stroke-width=%221.5%22/%3E%3Crect x=%22286%22 y=%2254%22 width=%2216%22 height=%227%22 rx=%221.5%22 fill=%22%23f2a93b%22 stroke-width=%222%22/%3E%3Cpath d=%22M294 54 L294 61%22 stroke-width=%221.5%22/%3E%3Crect x=%22296%22 y=%2264%22 width=%2210%22 height=%225%22 rx=%221.5%22 fill=%22%235b6068%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22281%22 cy=%2258%22 r=%221.8%22 fill=%22%23e0642e%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%22118%22 cy=%2286%22 r=%2220%22 fill=%22%23ffffff%22/%3E%3Ccircle cx=%22118%22 cy=%2286%22 r=%2213%22 fill=%22none%22 stroke=%22%23d3272e%22 stroke-width=%225%22/%3E%3Ccircle cx=%22118%22 cy=%2286%22 r=%226.5%22 fill=%22%23b9bec7%22/%3E%3Ccircle cx=%22252%22 cy=%2286%22 r=%2220%22 fill=%22%23ffffff%22/%3E%3Ccircle cx=%22252%22 cy=%2286%22 r=%2213%22 fill=%22none%22 stroke=%22%23d3272e%22 stroke-width=%225%22/%3E%3Ccircle cx=%22252%22 cy=%2286%22 r=%226.5%22 fill=%22%23b9bec7%22/%3E%3C/g%3E%3Crect x=%22140%22 y=%22103%22 width=%22100%22 height=%224%22 rx=%222%22 fill=%22%23ff2ec4%22 opacity=%22.85%22/%3E%3Crect x=%22118%22 y=%22107%22 width=%22150%22 height=%223%22 rx=%221.5%22 fill=%22%2300e5ff%22 opacity=%22.55%22/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 46, 196, .5));
}
/* One drive per visit: main.js adds .delorean-run (sessionStorage-gated) the
   first time 80s mode is on in a tab; the car crosses once, hits 88, and is
   gone until the next visit. */
html[data-mode="80s"].delorean-run::after { animation: delorean-88 14s linear 2s 1 both; }
@keyframes delorean-88 {
  0%   { transform: translateX(-40vw) scaleX(1); opacity: 1; }
  86%  { transform: translateX(62vw) scaleX(1); opacity: 1; }
  91%  { transform: translateX(76vw) scaleX(1.8); opacity: 1; }
  95%  { transform: translateX(94vw) scaleX(2.6); opacity: 0; }
  100% { transform: translateX(94vw) scaleX(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mode="80s"].delorean-run::after { animation: none; }
}
html[data-mode="80s"] body h1 {
  font-family: 'Monoton', cursive;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1.3;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 46, 196, .85), 0 0 28px rgba(255, 46, 196, .5), 0 0 60px rgba(122, 31, 255, .4);
}
html[data-mode="80s"] body .essay-wrap h1 { font-size: clamp(24px, 4vw, 44px); line-height: 1.34; }
html[data-mode="80s"] h2 { color: #ffe9fa; text-shadow: 0 0 8px rgba(255, 46, 196, .5), 0 0 22px rgba(255, 46, 196, .28); }
html[data-mode="80s"] .nav { border-bottom-color: rgba(255, 46, 196, .5); }
html[data-mode="80s"] .nav-wordmark { color: #fff; text-shadow: 0 0 10px rgba(255, 46, 196, .75), 0 0 26px rgba(255, 46, 196, .35); }
html[data-mode="80s"] .sub-btn { box-shadow: 0 0 16px rgba(255, 46, 196, .5); }
html[data-mode="80s"] .sub-btn:hover { box-shadow: 0 0 18px rgba(0, 229, 255, .65); }
html[data-mode="80s"] .side-late a.sub-btn { box-shadow: none; }

/* The tape-deck toggle button (injected by main.js next to the moon) */
.mode-80s-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  min-width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
  transition: border-color .15s, color .15s, box-shadow .2s;
}
.mode-80s-toggle:hover { color: var(--ink); border-color: var(--muted); }
html[data-mode="80s"] .mode-80s-toggle { color: #fff; border-color: #ff2ec4; box-shadow: 0 0 12px rgba(255, 46, 196, .55); }
html[data-mode="80s"] .essay-signoff img, html[data-mode="80s"] img[src*="signature"] { filter: invert(1) hue-rotate(180deg) opacity(.9); }

/* ── SITE SEARCH (overlay injected by main.js; 🔍 in nav, Cmd/Ctrl+K) ── */
.search-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color .15s, color .15s;
}
.search-toggle:hover { color: var(--ink); border-color: var(--muted); }
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 20px 40px;
  background: rgba(15, 12, 8, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.search-overlay.open { display: flex; }
body.search-lock { overflow: hidden; }
.search-panel {
  width: 100%;
  max-width: 640px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.search-input {
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font-family: 'Lora', serif;
  font-size: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.search-results { overflow-y: auto; padding: 8px 8px 12px; }
.sr { display: block; padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.sr:hover { background: var(--bg); color: var(--ink); }
.sr-name { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16.5px; display: block; }
.sr-snip { font-size: 14px; color: var(--muted); line-height: 1.55; display: block; margin-top: 3px; }
.sr-quote .sr-snip { color: var(--ink); font-size: 14.5px; margin-top: 0; }
.sr-meta { font-size: 11.5px; color: var(--accent); font-weight: 700; letter-spacing: .9px; text-transform: uppercase; display: block; margin-top: 6px; }
.sr-group { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); padding: 12px 14px 4px; margin: 0; }
.search-results mark { background: none; color: var(--accent); font-weight: 700; }
.search-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 15px; margin: 0; }
html[data-mode="80s"] .search-panel { box-shadow: 0 0 34px rgba(255, 46, 196, .35), 0 30px 80px -20px rgba(0, 0, 0, .6); }

/* Deep links from search land on an individual quote */
.q { scroll-margin-top: 130px; }
.q:target {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 6px;
}

/* ── 🐫 MONGOLIA MODE — calm steppe: soft palette, hills + ger scene,
      and a Bactrian camel ambling across the bottom of the page ── */
html[data-mode="mongolia"] {
  --bg: #e4eee6;
  --ink: #2c3323;
  --body-ink: #3a4230;
  --muted: #5f6b52;
  --faint: #8a947c;
  --line: #cbd8bd;
  --accent: #a86f2f;
  --card: #f4f8ee;
  --btn-bg: #41552f;
  --btn-fg: #f4f8ee;
  --btn-hover: #587244;
  background: #cde3ee;
}
html[data-mode="mongolia"] body { background: transparent; }
html[data-mode="mongolia"] body::before {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 38vh;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 420%22%3E%3Cstyle%3E.puff%7Btransform-box:fill-box%3Btransform-origin:center%3Banimation:rise 7s linear infinite%3Bopacity:0%7D.p2%7Banimation-delay:2.3s%7D.p3%7Banimation-delay:4.6s%7D%40keyframes rise%7B0%25%7Btransform:translate(0,0) scale(.45)%3Bopacity:.65%7D70%25%7Bopacity:.4%7D100%25%7Btransform:translate(14px,-58px) scale(1.7)%3Bopacity:0%7D%7D.moto%7Banimation:ride 70s linear infinite%7D%40keyframes ride%7B0%25%7Btransform:translateX(-100px)%7D5%25%7Btransform:translateX(-100px)%7D26%25%7Btransform:translateX(1700px)%7D100%25%7Btransform:translateX(1700px)%7D%7D%40media (prefers-reduced-motion:reduce)%7B.puff%7Banimation:none%3Bopacity:.35%3Btransform:translate(6px,-16px) scale(1)%7D.moto%7Banimation:none%3Btransform:translateX(1700px)%7D%7D%3C/style%3E%3Cpath d=%22M0 252 Q200 196 420 238 T900 228 T1350 242 T1600 228 L1600 420 L0 420 Z%22 fill=%22%23c2d6de%22 opacity=%220.55%22/%3E%3Cpath d=%22M0 302 Q300 244 640 288 T1200 288 T1600 278 L1600 420 L0 420 Z%22 fill=%22%23cfdfb2%22/%3E%3Cpath d=%22M0 362 Q380 302 800 348 T1600 342 L1600 420 L0 420 Z%22 fill=%22%23b7d096%22/%3E%3Cg transform=%22translate(1060 292)%22%3E%3Cpolygon points=%220,26 46,4 92,26%22 fill=%22%23efe8d5%22 stroke=%22%23c9c0a8%22 stroke-width=%222%22/%3E%3Crect x=%2242%22 y=%220%22 width=%228%22 height=%226%22 fill=%22%23b9ae90%22/%3E%3Crect x=%224%22 y=%2226%22 width=%2284%22 height=%2222%22 rx=%222%22 fill=%22%23f7f3e8%22 stroke=%22%23c9c0a8%22 stroke-width=%222%22/%3E%3Cline x1=%224%22 y1=%2234%22 x2=%2288%22 y2=%2234%22 stroke=%22%23d8cfb6%22 stroke-width=%221.5%22/%3E%3Crect x=%2238%22 y=%2230%22 width=%2216%22 height=%2218%22 rx=%221%22 fill=%22%238a4b2f%22/%3E%3C/g%3E%3Cg%3E%3Ccircle class=%22puff%22 cx=%221106%22 cy=%22286%22 r=%228.5%22 fill=%22%23c9c0aa%22/%3E%3Ccircle class=%22puff p2%22 cx=%221106%22 cy=%22286%22 r=%228.5%22 fill=%22%23c9c0aa%22/%3E%3Ccircle class=%22puff p3%22 cx=%221106%22 cy=%22286%22 r=%228.5%22 fill=%22%23c9c0aa%22/%3E%3C/g%3E%3Cellipse cx=%22330%22 cy=%22365%22 rx=%2210%22 ry=%226%22 fill=%22%23f6f3ea%22/%3E%3Cellipse cx=%22352%22 cy=%22372%22 rx=%229%22 ry=%225.5%22 fill=%22%23f2efe4%22/%3E%3Cellipse cx=%22300%22 cy=%22373%22 rx=%228%22 ry=%225%22 fill=%22%23f6f3ea%22/%3E%3Cg class=%22moto%22%3E%3Cg transform=%22translate(0 330) scale(.78)%22%3E%3Cellipse cx=%226%22 cy=%2239%22 rx=%2215%22 ry=%223%22 fill=%22%23b9ae90%22 opacity=%22.35%22/%3E%3Cg fill=%22%234a3b28%22%3E%3Ccircle cx=%2216%22 cy=%2238%22 r=%227%22 fill=%22none%22 stroke=%22%234a3b28%22 stroke-width=%223%22/%3E%3Ccircle cx=%2258%22 cy=%2238%22 r=%227%22 fill=%22none%22 stroke=%22%234a3b28%22 stroke-width=%223%22/%3E%3Cpath d=%22M16 38 L26 29 L44 29 L52 33 L58 38 L50 40 L24 40 Z%22/%3E%3Crect x=%2223%22 y=%2225%22 width=%2215%22 height=%226%22 rx=%223%22/%3E%3Cpath d=%22M47 22 L51 21 L60 37 L56 39 Z%22/%3E%3Cpath d=%22M44 21 L50 18 L52 21 L46 24 Z%22/%3E%3Cpath d=%22M30 26 Q28 14 37 11 Q43 9 45 15 L47 20 Q39 22 34 25 Z%22/%3E%3Ccircle cx=%2242.5%22 cy=%227%22 r=%224.6%22/%3E%3Cpath d=%22M41 14 L50 20 L48 23 L38 18 Z%22/%3E%3Cpath d=%22M31 26 L36 33 L42 33 L40 37 L31 37 Q27 32 29 27 Z%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
html[data-mode="mongolia"] body::after {
  content: '';
  position: fixed;
  bottom: 3.5vh;
  left: 0;
  width: 86px; height: 62px;
  pointer-events: none;
  z-index: -1;
  opacity: .92;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 140 100%22%3E%3Cg stroke=%22%232a2015%22 stroke-width=%223%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M39 52 C33 55 30 61 31 66%22 fill=%22none%22 stroke-width=%223.5%22/%3E%3Cellipse cx=%2231%22 cy=%2268%22 rx=%224%22 ry=%225%22 fill=%22%23b9854d%22 stroke-width=%222.5%22/%3E%3Crect x=%2242%22 y=%2262%22 width=%229%22 height=%2228%22 rx=%223.5%22 fill=%22%23b9854d%22/%3E%3Crect x=%2240%22 y=%2286%22 width=%2212%22 height=%228%22 rx=%222.5%22 fill=%22%238a5f2f%22/%3E%3Crect x=%2284%22 y=%2262%22 width=%229%22 height=%2228%22 rx=%223.5%22 fill=%22%23b9854d%22/%3E%3Crect x=%2282%22 y=%2286%22 width=%2212%22 height=%228%22 rx=%222.5%22 fill=%22%238a5f2f%22/%3E%3Cpath d=%22M42 70 C34 64 34 54 38 47 C38 36 42 30 47 29 C47 25 52 24 54 27 C56 23 61 23 63 27 C66 25 69 28 68 31 C71 34 72 40 72 45 C73 47 73 47 74 45 C74 38 76 32 80 30 C80 26 85 24 87 27 C89 23 94 24 95 28 C98 27 100 30 99 33 C101 36 102 41 102 46 C105 53 104 62 96 68 C86 75 52 76 42 70 Z%22 fill=%22%23d9a566%22/%3E%3Cellipse cx=%2266%22 cy=%2270%22 rx=%2222%22 ry=%224.5%22 fill=%22%23ecc998%22 stroke=%22none%22/%3E%3Crect x=%2254%22 y=%2264%22 width=%229%22 height=%2229%22 rx=%223.5%22 fill=%22%23d9a566%22/%3E%3Crect x=%2252%22 y=%2289%22 width=%2212%22 height=%228%22 rx=%222.5%22 fill=%22%238a5f2f%22/%3E%3Cpath d=%22M84 56 C93 56 101 60 102 66 C102 70 100 74 97 84 L89 82 C91 74 92 70 92 68 C92 63 88 60 83 60 Z%22 fill=%22%23d9a566%22/%3E%3Crect x=%2287%22 y=%2281%22 width=%2212%22 height=%228%22 rx=%222.5%22 fill=%22%238a5f2f%22 transform=%22rotate(10 93 85)%22/%3E%3Cpath d=%22M90 62 C90 46 96 32 106 24 L122 32 C113 42 111 52 111 64 Z%22 fill=%22%23d9a566%22/%3E%3Cpath d=%22M91 64 C89 59 94 55 98 58 C100 54 106 56 105 61 C108 62 107 66 104 66 Z%22 fill=%22%23d9a566%22 stroke-width=%222.5%22/%3E%3Cellipse cx=%22115%22 cy=%2224%22 rx=%2214%22 ry=%2211.5%22 fill=%22%23d9a566%22/%3E%3Cellipse cx=%22127%22 cy=%2229%22 rx=%229.5%22 ry=%228%22 fill=%22%23ecc998%22/%3E%3Cpath d=%22M103 15 C100 10 105 6 108 9 C110 11 109 15 106 17 Z%22 fill=%22%23d9a566%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M108 14 C107 8 113 6 115 10 C117 5 123 8 121 13 Z%22 fill=%22%23b9854d%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M133 31 Q130 35 125 34%22 fill=%22none%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22131%22 cy=%2226%22 r=%221.4%22 fill=%22%232a2015%22 stroke=%22none%22/%3E%3C/g%3E%3Ccircle cx=%22117%22 cy=%2222%22 r=%223.4%22 fill=%22%23201a12%22/%3E%3Ccircle cx=%22118.3%22 cy=%2220.8%22 r=%221.2%22 fill=%22%23fff%22/%3E%3Cellipse cx=%22121%22 cy=%2229%22 rx=%223%22 ry=%222%22 fill=%22%23efad99%22/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: camel-walk 360s linear infinite;
}
/* Mostly at rest so it doesn't tug the eye while reading: amble in,
   stand a couple of minutes, amble off, long gap before the next pass */
@keyframes camel-walk {
  0%   { transform: translateX(-16vw); }
  13%  { transform: translateX(22vw); }
  40%  { transform: translateX(22vw); }
  68%  { transform: translateX(104vw); }
  100% { transform: translateX(104vw); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mode="mongolia"] body::after { animation: none; left: auto; right: 10vw; transform: scaleX(-1); }
}
html[data-mode="mongolia"] .nav { background: rgba(228, 238, 230, .92); }
html[data-mode="mongolia"]::before { /* drifting clouds */
  content: '';
  position: fixed;
  top: 0;
  left: -1600px;
  width: calc(100vw + 3200px);
  height: 36vh;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 340%22%3E%3Cg fill=%22%23ffffff%22%3E%3Cg transform=%22translate(60 60)%22 opacity=%22.72%22%3E%3Cellipse cx=%2234%22 cy=%2216%22 rx=%2234%22 ry=%2212%22/%3E%3Cellipse cx=%2260%22 cy=%229%22 rx=%2222%22 ry=%2210%22/%3E%3Cellipse cx=%2212%22 cy=%2210%22 rx=%2215%22 ry=%228%22/%3E%3C/g%3E%3Cg transform=%22translate(520 130)%22 opacity=%22.55%22%3E%3Cellipse cx=%2226%22 cy=%2212%22 rx=%2226%22 ry=%229%22/%3E%3Cellipse cx=%2245%22 cy=%226%22 rx=%2216%22 ry=%227%22/%3E%3C/g%3E%3Cg transform=%22translate(950 40)%22 opacity=%22.8%22%3E%3Cellipse cx=%2240%22 cy=%2218%22 rx=%2240%22 ry=%2213%22/%3E%3Cellipse cx=%2270%22 cy=%2210%22 rx=%2224%22 ry=%2211%22/%3E%3Cellipse cx=%2216%22 cy=%2211%22 rx=%2217%22 ry=%229%22/%3E%3C/g%3E%3Cg transform=%22translate(1330 150)%22 opacity=%22.5%22%3E%3Cellipse cx=%2222%22 cy=%2210%22 rx=%2222%22 ry=%228%22/%3E%3Cellipse cx=%2238%22 cy=%225%22 rx=%2213%22 ry=%226%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1600px auto;
  background-position: left 12px;
  animation: mn-clouds 240s linear infinite;
}
@keyframes mn-clouds { from { transform: translateX(0); } to { transform: translateX(1600px); } }
@media (prefers-reduced-motion: reduce) { html[data-mode="mongolia"]::before { animation: none; } }

/* ── MODE MENU (opened by the nav sun/moon button; injected by main.js) ── */
.mode-face { display: none; font-size: 15px; line-height: 1; }
.mode-face.is-80s { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; }
.mode-face.is-apple, .mode-menu .mm-ic.mm-apple, .apple-face.is-apple { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-size: 17px; color: var(--ink); }
.mode-face.is-apple { margin-top: -2px; }
html[data-mode] .theme-toggle .theme-icon { display: none !important; }
html[data-mode] .mode-face { display: block; }
html[data-mode="80s"] .theme-toggle { color: #fff; border-color: #ff2ec4; box-shadow: 0 0 12px rgba(255, 46, 196, .55); }
.mode-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 32px;
  z-index: 60;
  min-width: 172px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .35);
  padding: 6px;
  display: none;
}
.mode-menu.open { display: block; }
.mode-menu-head {
  margin: 2px 0 4px;
  padding: 4px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.mode-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.mode-menu button:hover { background: var(--bg); }
.mode-menu .mm-ic { width: 22px; display: flex; justify-content: center; color: var(--muted); font-size: 14px; flex: none; }
.mode-menu .mm-80s { font-size: 10px; font-weight: 800; letter-spacing: .3px; }
.mode-menu .mm-on::after { content: '\2713'; margin-left: auto; color: var(--accent); font-weight: 700; }

/* ── 🧱 LEGO MODE — bright bricks, a green baseplate, brick clouds,
      and a minifigure out for a stroll ── */
html[data-mode="lego"] {
  --bg: #eef6ff;
  --ink: #1d2440;
  --body-ink: #2a3252;
  --muted: #52608a;
  --faint: #8290b4;
  --line: #c9d9ef;
  --accent: #d01012;
  --card: #ffffff;
  --btn-bg: #ffd500;
  --btn-fg: #1d2440;
  --btn-hover: #ffe23d;
  background: #cfe7ff;
}
html[data-mode="lego"] body { background: transparent; }
html[data-mode="lego"] body::before {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34vh;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 420%22%3E%3Crect x=%220%22 y=%22308%22 width=%221600%22 height=%22112%22 fill=%22%232f9e41%22/%3E%3Cg fill=%22%233cb452%22%3E%3Cellipse cx=%2240%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22110%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22180%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22250%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22320%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22390%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22460%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22530%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22600%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22670%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22740%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22810%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22880%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22950%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221020%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221090%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221160%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221230%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221300%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221370%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221440%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221510%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221580%22 cy=%22316%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%2275%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22145%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22215%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22285%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22355%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22425%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22495%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22565%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22635%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22705%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22775%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22845%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22915%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%22985%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221055%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221125%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221195%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221265%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221335%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221405%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221475%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3Cellipse cx=%221545%22 cy=%22356%22 rx=%2222%22 ry=%227%22/%3E%3C/g%3E%3Cg%3E%3Crect x=%221180%22 y=%22258%22 width=%22150%22 height=%2250%22 rx=%223%22 fill=%22%23d01012%22/%3E%3Cellipse cx=%221205%22 cy=%22258%22 rx=%2214%22 ry=%225%22 fill=%22%23e33d3f%22/%3E%3Cellipse cx=%221242%22 cy=%22258%22 rx=%2214%22 ry=%225%22 fill=%22%23e33d3f%22/%3E%3Cellipse cx=%221279%22 cy=%22258%22 rx=%2214%22 ry=%225%22 fill=%22%23e33d3f%22/%3E%3Cellipse cx=%221316%22 cy=%22258%22 rx=%2214%22 ry=%225%22 fill=%22%23e33d3f%22/%3E%3Crect x=%221210%22 y=%22208%22 width=%2276%22 height=%2250%22 rx=%223%22 fill=%22%230055bf%22/%3E%3Cellipse cx=%221229%22 cy=%22208%22 rx=%2214%22 ry=%225%22 fill=%22%232e77d0%22/%3E%3Cellipse cx=%221267%22 cy=%22208%22 rx=%2214%22 ry=%225%22 fill=%22%232e77d0%22/%3E%3Crect x=%221228%22 y=%22170%22 width=%2240%22 height=%2238%22 rx=%223%22 fill=%22%23ffd500%22/%3E%3Cellipse cx=%221248%22 cy=%22170%22 rx=%2213%22 ry=%225%22 fill=%22%23ffe23d%22/%3E%3Crect x=%22150%22 y=%22270%22 width=%22112%22 height=%2238%22 rx=%223%22 fill=%22%23ff8c00%22/%3E%3Cellipse cx=%22173%22 cy=%22270%22 rx=%2213%22 ry=%225%22 fill=%22%23ffa733%22/%3E%3Cellipse cx=%22206%22 cy=%22270%22 rx=%2213%22 ry=%225%22 fill=%22%23ffa733%22/%3E%3Cellipse cx=%22239%22 cy=%22270%22 rx=%2213%22 ry=%225%22 fill=%22%23ffa733%22/%3E%3Crect x=%22420%22 y=%22282%22 width=%2256%22 height=%2226%22 rx=%223%22 fill=%22%230055bf%22/%3E%3Cellipse cx=%22434%22 cy=%22282%22 rx=%2211%22 ry=%224.5%22 fill=%22%232e77d0%22/%3E%3Cellipse cx=%22462%22 cy=%22282%22 rx=%2211%22 ry=%224.5%22 fill=%22%232e77d0%22/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
html[data-mode="lego"] body::after {
  content: '';
  position: fixed;
  bottom: 2.5vh;
  left: 0;
  width: 62px; height: 84px;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 90 120%22%3E%3Cg stroke=%22%2300000022%22 stroke-width=%221%22%3E%3Crect x=%2236%22 y=%226%22 width=%2218%22 height=%227%22 rx=%222%22 fill=%22%23ffd500%22/%3E%3Crect x=%2228%22 y=%2213%22 width=%2234%22 height=%2226%22 rx=%229%22 fill=%22%23ffd500%22/%3E%3Ccircle cx=%2238%22 cy=%2224%22 r=%222.6%22 fill=%22%23222%22/%3E%3Ccircle cx=%2252%22 cy=%2224%22 r=%222.6%22 fill=%22%23222%22/%3E%3Cpath d=%22M37 31 Q45 37 53 31%22 fill=%22none%22 stroke=%22%23222%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M31 41 L59 41 L64 68 L26 68 Z%22 fill=%22%23d01012%22/%3E%3Cpath d=%22M31 43 L20 58 L26 62 L34 50 Z%22 fill=%22%23d01012%22/%3E%3Cpath d=%22M59 43 L70 58 L64 62 L56 50 Z%22 fill=%22%23d01012%22/%3E%3Ccircle cx=%2222%22 cy=%2262%22 r=%225.5%22 fill=%22%23ffd500%22/%3E%3Ccircle cx=%2268%22 cy=%2262%22 r=%225.5%22 fill=%22%23ffd500%22/%3E%3Crect x=%2226%22 y=%2268%22 width=%2238%22 height=%229%22 fill=%22%231d2440%22/%3E%3Crect x=%2227%22 y=%2277%22 width=%2217%22 height=%2228%22 fill=%22%230055bf%22/%3E%3Crect x=%2246%22 y=%2277%22 width=%2217%22 height=%2228%22 fill=%22%230055bf%22/%3E%3Crect x=%2224%22 y=%22105%22 width=%2220%22 height=%229%22 fill=%22%230055bf%22/%3E%3Crect x=%2246%22 y=%22105%22 width=%2220%22 height=%229%22 fill=%22%230055bf%22/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: minifig-walk 130s linear infinite;
}
@keyframes minifig-walk {
  0%    { transform: translateX(-12vw) scaleX(1); }
  49.9% { transform: translateX(108vw) scaleX(1); }
  50%   { transform: translateX(108vw) scaleX(-1); }
  99.9% { transform: translateX(-12vw) scaleX(-1); }
  100%  { transform: translateX(-12vw) scaleX(1); }
}
html[data-mode="lego"]::before { /* brick clouds */
  content: '';
  position: fixed;
  top: 0;
  left: -1600px;
  width: calc(100vw + 3200px);
  height: 32vh;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 300%22%3E%3Cg fill=%22%23ffffff%22 opacity=%22.85%22%3E%3Cg transform=%22translate(120 60)%22%3E%3Crect x=%220%22 y=%2222%22 width=%22150%22 height=%2230%22 rx=%228%22/%3E%3Crect x=%2224%22 y=%220%22 width=%2276%22 height=%2230%22 rx=%228%22/%3E%3Cellipse cx=%2242%22 cy=%220%22 rx=%2210%22 ry=%224%22 fill=%22%23f0f4f8%22/%3E%3Cellipse cx=%2280%22 cy=%220%22 rx=%2210%22 ry=%224%22 fill=%22%23f0f4f8%22/%3E%3Cellipse cx=%2224%22 cy=%2222%22 rx=%2210%22 ry=%224%22 fill=%22%23f0f4f8%22/%3E%3Cellipse cx=%22124%22 cy=%2222%22 rx=%2210%22 ry=%224%22 fill=%22%23f0f4f8%22/%3E%3C/g%3E%3Cg transform=%22translate(820 120)%22 opacity=%22.8%22%3E%3Crect x=%220%22 y=%2218%22 width=%22110%22 height=%2226%22 rx=%227%22/%3E%3Crect x=%2220%22 y=%220%22 width=%2256%22 height=%2224%22 rx=%227%22/%3E%3Cellipse cx=%2236%22 cy=%220%22 rx=%229%22 ry=%223.5%22 fill=%22%23f0f4f8%22/%3E%3Cellipse cx=%2262%22 cy=%220%22 rx=%229%22 ry=%223.5%22 fill=%22%23f0f4f8%22/%3E%3C/g%3E%3Cg transform=%22translate(1300 50)%22 opacity=%22.9%22%3E%3Crect x=%220%22 y=%2220%22 width=%22120%22 height=%2228%22 rx=%227%22/%3E%3Crect x=%2230%22 y=%220%22 width=%2260%22 height=%2226%22 rx=%227%22/%3E%3Cellipse cx=%2246%22 cy=%220%22 rx=%229%22 ry=%223.5%22 fill=%22%23f0f4f8%22/%3E%3Cellipse cx=%2274%22 cy=%220%22 rx=%229%22 ry=%223.5%22 fill=%22%23f0f4f8%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1600px auto;
  background-position: left 14px;
  animation: mn-clouds 300s linear infinite;
}
html[data-mode="lego"] body h1 {
  font-family: 'Titan One', sans-serif;
  font-weight: 400;
  color: #ffd500;
  -webkit-text-stroke: 2px #d01012;
  text-shadow: 3px 4px 0 rgba(29, 36, 64, .3);
  letter-spacing: 1px;
}
html[data-mode="lego"] .sub-btn { border-radius: 10px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 rgba(29, 36, 64, .25); }
html[data-mode="lego"] .nav { background: rgba(238, 246, 255, .93); }

/* ── 🚀 MARS MODE — butterscotch sky, rust dunes, a dome habitat,
      a Starship that launches and lands, and a Cybertruck driving by ── */
html[data-mode="mars"] {
  --bg: #f3e0cd;
  --ink: #38220f;
  --body-ink: #4a2f1a;
  --muted: #7d5a3e;
  --faint: #a8815f;
  --line: #e3c5a4;
  --accent: #b5431f;
  --card: #faefe2;
  --btn-bg: #1f2023;
  --btn-fg: #f3e0cd;
  --btn-hover: #3a3d42;
  background: #d0905c;
}
html[data-mode="mars"] body { background: transparent; }
html[data-mode="mars"] body::before {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 40vh;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 420%22%3E%3Cstyle%3E.ship%7Banimation:launch 90s linear infinite%7D.flame%7Bopacity:0%3Banimation:burn 90s linear infinite%7D%40keyframes launch%7B0%25,72%25%7Btransform:translateY(0)%7D79%25%7Btransform:translateY(-620px)%7D86%25%7Btransform:translateY(-620px)%7D93%25,100%25%7Btransform:translateY(0)%7D%7D%40keyframes burn%7B0%25,71.5%25%7Bopacity:0%7D72.5%25,79%25%7Bopacity:1%7D79.5%25,85.5%25%7Bopacity:0%7D86%25,93%25%7Bopacity:1%7D94%25,100%25%7Bopacity:0%7D%7D%40media (prefers-reduced-motion:reduce)%7B.ship,.flame%7Banimation:none%7D%7D%3C/style%3E%3Cpath d=%22M0 290 Q300 230 620 280 T1200 275 T1600 265 L1600 420 L0 420 Z%22 fill=%22%23d08a55%22/%3E%3Cpath d=%22M0 350 Q380 290 800 340 T1600 335 L1600 420 L0 420 Z%22 fill=%22%23b96e3c%22/%3E%3Cellipse cx=%22420%22 cy=%22378%22 rx=%2246%22 ry=%2210%22 fill=%22%23a55f30%22/%3E%3Cellipse cx=%22420%22 cy=%22376%22 rx=%2246%22 ry=%229%22 fill=%22%23c07845%22/%3E%3Cellipse cx=%221350%22 cy=%22392%22 rx=%2230%22 ry=%227%22 fill=%22%23a55f30%22/%3E%3Cellipse cx=%221350%22 cy=%22390%22 rx=%2230%22 ry=%226%22 fill=%22%23c07845%22/%3E%3Cg transform=%22translate(880 302)%22%3E%3Cpath d=%22M0 48 Q0 6 48 6 Q96 6 96 48 Z%22 fill=%22%23ffffff55%22 stroke=%22%23ffffffaa%22 stroke-width=%222%22/%3E%3Crect x=%2240%22 y=%2230%22 width=%2216%22 height=%2218%22 fill=%22%237c4a26%22/%3E%3C/g%3E%3Cg transform=%22translate(1130 148)%22%3E%3Cg class=%22ship%22%3E%3Cpath d=%22M45 40 Q60 6 75 40 L75 200 L45 200 Z%22 fill=%22%23cfd2d6%22/%3E%3Cpath d=%22M45 40 Q60 6 75 40 L75 200 L62 200 L62 34 Z%22 fill=%22%23bfc3c8%22/%3E%3Cpath d=%22M45 55 L30 85 L45 85 Z%22 fill=%22%239ba1a8%22/%3E%3Cpath d=%22M75 55 L90 85 L75 85 Z%22 fill=%22%23b8bdc3%22/%3E%3Cpath d=%22M45 165 L24 205 L45 205 Z%22 fill=%22%239ba1a8%22/%3E%3Cpath d=%22M75 165 L96 205 L75 205 Z%22 fill=%22%23b8bdc3%22/%3E%3Ccircle cx=%2255%22 cy=%2270%22 r=%222.5%22 fill=%22%235c6167%22/%3E%3Ccircle cx=%2255%22 cy=%2290%22 r=%222.5%22 fill=%22%235c6167%22/%3E%3Ccircle cx=%2255%22 cy=%22110%22 r=%222.5%22 fill=%22%235c6167%22/%3E%3Cg class=%22flame%22%3E%3Cpath d=%22M50 206 Q60 244 70 206 Q65 222 60 226 Q55 222 50 206 Z%22 fill=%22%23ff9d2e%22/%3E%3Cpath d=%22M55 206 Q60 228 65 206 Z%22 fill=%22%23ffe08a%22/%3E%3C/g%3E%3C/g%3E%3Crect x=%2240%22 y=%22200%22 width=%2240%22 height=%227%22 rx=%222%22 fill=%22%236a7076%22/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
html[data-mode="mars"] body::after {
  content: '';
  position: fixed;
  bottom: 3vh;
  left: 0;
  width: 110px; height: 48px;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 70%22%3E%3Cg%3E%3Cpath d=%22M6 44 L64 16 L120 30 L152 40 L150 52 L10 52 Z%22 fill=%22%23b8bdc2%22/%3E%3Cpath d=%22M64 16 L120 30 L98 30 L60 21 Z%22 fill=%22%238f959b%22/%3E%3Ccircle cx=%2242%22 cy=%2252%22 r=%2212%22 fill=%22%2323262a%22/%3E%3Ccircle cx=%2242%22 cy=%2252%22 r=%225%22 fill=%22%236a7076%22/%3E%3Ccircle cx=%22118%22 cy=%2252%22 r=%2212%22 fill=%22%2323262a%22/%3E%3Ccircle cx=%22118%22 cy=%2252%22 r=%225%22 fill=%22%236a7076%22/%3E%3Cellipse cx=%2280%22 cy=%2266%22 rx=%2260%22 ry=%224%22 fill=%22%2300000022%22/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: cybertruck-drive 80s linear infinite;
}
@keyframes cybertruck-drive {
  0%    { transform: translateX(-14vw) scaleX(1); }
  49.9% { transform: translateX(110vw) scaleX(1); }
  50%   { transform: translateX(110vw) scaleX(-1); }
  99.9% { transform: translateX(-14vw) scaleX(-1); }
  100%  { transform: translateX(-14vw) scaleX(1); }
}
html[data-mode="mars"]::before { /* drifting dust */
  content: '';
  position: fixed;
  top: 0;
  left: -1600px;
  width: calc(100vw + 3200px);
  height: 34vh;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 300%22%3E%3Cg fill=%22%23e8c39d%22%3E%3Cellipse cx=%22200%22 cy=%2280%22 rx=%22120%22 ry=%2214%22 opacity=%22.4%22/%3E%3Cellipse cx=%22700%22 cy=%22150%22 rx=%22160%22 ry=%2212%22 opacity=%22.3%22/%3E%3Cellipse cx=%221250%22 cy=%2260%22 rx=%22140%22 ry=%2213%22 opacity=%22.35%22/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1600px auto;
  animation: mn-clouds 320s linear infinite;
}
html[data-mode="mars"] body h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink);
}
html[data-mode="mars"] .nav { background: rgba(243, 224, 205, .93); }
@media (prefers-reduced-motion: reduce) {
  html[data-mode="lego"] body::after { animation: none; left: auto; right: 14vw; }
  html[data-mode="mars"] body::after { animation: none; left: auto; right: 16vw; transform: scaleX(-1); }
  html[data-mode="lego"]::before, html[data-mode="mars"]::before { animation: none; }
}

/* ── MODE SKY — one true-fixed gradient layer behind every scene.
      (background-attachment: fixed is unreliable on iOS, so gradients
      live on this main.js-injected div instead of <html>.) ── */
.mode-sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
html[data-mode="80s"] .mode-sky { background: linear-gradient(180deg, #08032a 0%, #170944 40%, #3d0e63 72%, #8f1f7e 100%); }
html[data-mode="mongolia"] .mode-sky { background: linear-gradient(180deg, #cde3ee 0%, #dfeadf 55%, #e7efdb 100%); }
html[data-mode="lego"] .mode-sky { background: linear-gradient(180deg, #cfe7ff 0%, #eaf5ff 55%, #f6fbff 100%); }
html[data-mode="mars"] .mode-sky {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 140 70%22%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%2213%22 fill=%22%23c9b8a6%22 opacity=%22.7%22/%3E%3Ccircle cx=%2226%22 cy=%2227%22 r=%223%22 fill=%22%23b3a08c%22 opacity=%22.8%22/%3E%3Ccircle cx=%22110%22 cy=%2218%22 r=%226%22 fill=%22%23c9b8a6%22 opacity=%22.55%22/%3E%3C/svg%3E"), linear-gradient(180deg, #d0905c 0%, #e2ae83 45%, #f0d3b5 100%);
  background-repeat: no-repeat;
  background-position: calc(100% - 8vw) 7vh, center;
  background-size: 140px 70px, 100% 100%;
}

/* ── QUOTE LIBRARY: in-page search (assets/quote-search.js) ── */
.qs { margin: 0 0 26px; }
.qs-label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--card); color: var(--faint); cursor: text; transition: border-color .15s; }
.qs-label:focus-within { border-color: var(--accent); color: var(--accent); }
.qs-input { border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); width: 100%; min-width: 0; padding: 0; }
.qs-input::placeholder { color: var(--faint); }
.qs-status { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 8px 0 0 4px; }
.qs-status:empty { display: none; }
.qs-status button, .qs-status a { background: none; border: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
mark.qs-hit { background: color-mix(in srgb, var(--accent) 24%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.qs-mobile { display: none; max-width: 780px; margin: 40px auto 0; padding: 0 32px; }
@media (max-width: 900px) { .qs-mobile { display: block; } body.qs-searching .q-toc { display: none; } }
@media (max-width: 720px) { .qs-mobile { padding: 0 20px; } }
.q-side-nav a.qs-empty { opacity: .35; }
.q-main [hidden] { display: none !important; }

/* ── FIREFLIES (the Fireflies mode's lights; main.js builds the layer the first time the mode is on) ──
   Sits behind the page like .mode-sky; shown only in Fireflies mode. */
.fireflies { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
html[data-mode="fireflies"] .fireflies { display: block; }
.fireflies i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #EAF29A;
  box-shadow: 0 0 6px 2px rgba(226, 238, 130, .55), 0 0 14px 4px rgba(226, 238, 130, .18);
  opacity: 0;
  animation: ff-drift var(--drift, 26s) ease-in-out infinite alternate, ff-blink var(--blink, 5s) ease-in-out infinite;
}
@keyframes ff-drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 40px), var(--dy, -30px)); } }
@keyframes ff-blink { 0%, 100% { opacity: 0; } 45% { opacity: 0; } 60% { opacity: .6; } 75% { opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .fireflies { display: none !important; } }

/* ── FIREFLIES MODE (Sep 2026: its own vibe instead of a random night surprise) ──
   Always the night palette (main.js sets data-theme="dark" for display only), a deep
   sky, a quiet meadow and treeline along the bottom, and the .fireflies layer. */
html[data-mode="fireflies"] body { background: transparent; }
html[data-mode="fireflies"] .mode-sky { background: linear-gradient(180deg, #0b0f14 0%, #111719 55%, #141c17 100%); }
html[data-mode="fireflies"] .nav { background: rgba(14, 19, 20, .9); }
html[data-mode="fireflies"] body::before {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 20vh;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='none'%3E%3Cpath d='M0 118 C180 92 330 104 470 96 C640 86 760 112 930 104 C1110 95 1260 80 1410 92 C1500 99 1560 94 1600 90 V220 H0 Z' fill='%23101812'/%3E%3Cg fill='%23101812'%3E%3Cpath d='M1188 96 L1206 40 L1224 96 Z'/%3E%3Cpath d='M1216 98 L1238 22 L1260 98 Z'/%3E%3Cpath d='M1252 96 L1268 52 L1284 96 Z'/%3E%3Cpath d='M262 104 L280 58 L298 104 Z'/%3E%3C/g%3E%3Cpath d='M0 150 C200 132 380 146 560 140 C760 133 930 154 1120 147 C1300 140 1450 132 1600 138 V220 H0 Z' fill='%230a100c'/%3E%3Cg stroke='%230a100c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M120 142 l-4 -14 M126 142 l2 -16 M132 142 l6 -12'/%3E%3Cpath d='M700 138 l-5 -13 M706 138 l1 -17 M712 138 l6 -11'/%3E%3Cpath d='M1380 136 l-4 -14 M1386 136 l2 -15 M1392 136 l5 -12'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


/* ──  APPLE MODE (Sep 28, 2026, Travis's call: "call it Apple with the apple symbol … use Steve Jobs's
      favorite fonts to match the look of apple.com"). apple.com's palette (white with #f5f5f7 tiles, #1d1d1f
      ink, #0066cc links, #0071e3 pill buttons; black at night, by the same 7pm–7am clock), a frosted-glass nav,
      and Apple's own type: San Francisco for everything (the system font on Apple devices; Inter, its closest
      free cut, everywhere else, loaded by main.js only there) and Garamond for quotations, after Apple Garamond,
      the company's typeface from the first Macintosh through "Think different." Anything marked .keep-font keeps
      its own type (the /author-visits/ chalkboard, the /ai-adoption/ chart), .apple-serif joins the quotations
      in Garamond (the /gratitude/ question); code stays monospace. main.js keeps
      this mode off /desk/, and shows the Apple logo (U+F8FF) only on Apple devices, a 🍎 elsewhere. ── */
html[data-mode="apple"] {
  --apple-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  --apple-serif: "EB Garamond", Garamond, Georgia, serif;
  --bg: #FFFFFF;
  --ink: #1D1D1F;
  --body-ink: #1D1D1F;
  --muted: #6E6E73;
  --faint: #86868B;
  --line: #D2D2D7;
  --accent: #0066CC;
  --card: #F5F5F7;
  --btn-bg: #0071E3;
  --btn-fg: #FFFFFF;
  --btn-hover: #0077ED;
}
html[data-mode="apple"][data-theme="dark"] {
  --bg: #000000;
  --ink: #F5F5F7;
  --body-ink: #E8E8ED;
  --muted: #A1A1A6;
  --faint: #86868B;
  --line: #424245;
  --accent: #2997FF;
  --card: #1D1D1F;
  --btn-bg: #0071E3;
  --btn-fg: #FFFFFF;
  --btn-hover: #0077ED;
}
html[data-mode="apple"] body { letter-spacing: -.01em; }
html[data-mode="apple"] body,
html[data-mode="apple"] body *:not(code, pre, kbd, samp, .keep-font, .keep-font *) {
  font-family: var(--apple-sans) !important;
}
html[data-mode="apple"] body :not(.keep-font, .keep-font *)::first-letter,
html[data-mode="apple"] body :not(.keep-font, .keep-font *)::before,
html[data-mode="apple"] body :not(.keep-font, .keep-font *)::after { font-family: inherit !important; }
html[data-mode="apple"] body :is(blockquote, .q, .apple-serif):not(.keep-font *),
html[data-mode="apple"] body :is(blockquote, .q, .apple-serif) *:not(code, .keep-font *) {
  font-family: var(--apple-serif) !important;
  letter-spacing: 0;
}
html[data-mode="apple"] body :is(h1, h2, h3, .nav-wordmark) { font-weight: 600; letter-spacing: -.02em; }
html[data-mode="apple"] body h4 { font-weight: 600; }
html[data-mode="apple"] .nav {
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(0, 0, 0, .08);
}
html[data-mode="apple"][data-theme="dark"] .nav { background: rgba(22, 22, 23, .8); border-bottom-color: rgba(255, 255, 255, .1); }
html[data-mode="apple"] .nav-links a { font-weight: 500; }
html[data-mode="apple"] .sub-btn { font-weight: 500; }
html[data-mode="apple"] ::selection { background: rgba(0, 113, 227, .22); }

/* "You're subscribed" line that replaces signup forms for known subscribers (main.js). */
.sub-known { font-size: 15px; font-weight: 500; }
.sub-notyou { background: none; border: 0; padding: 0; margin-left: 4px; font: inherit; font-size: 13px; color: var(--faint); text-decoration: underline; cursor: pointer; }
.sub-notyou:hover { color: var(--muted); }
.sub-form[hidden], .sub-note[hidden], .essay-side-fine[hidden] { display: none !important; }

/* ── THINK DIFFERENT ODE (main.js thinkDifferent(): shown when Apple is picked). A black 1997 poster wall:
      a public-domain portrait in black and white (assets/think-different/, 900×1125), the rainbow logo on
      Apple devices and "Think different." in Garamond squeezed like Apple Garamond, the Crazy Ones lines
      fading in, then Steve Jobs's own reading on a button. Keeps its own fonts (.keep-font). ── */
.td-ode {
  --td-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 32px; overflow-y: auto;
  background: #000; color: #f5f5f7;
  font-family: "EB Garamond", Garamond, Georgia, serif; letter-spacing: 0;
  animation: td-fade .7s ease both;
}
.td-ode.td-out { animation: td-gone .42s ease both; }
.td-ode:focus { outline: none; }
@keyframes td-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes td-gone { to { opacity: 0; } }
.td-in { display: flex; align-items: center; gap: clamp(28px, 6vw, 76px); width: 100%; max-width: 1040px; margin: auto; }
.td-poster { flex: none; width: min(40vw, 420px); margin: 0; animation: td-fade 1.1s ease .15s both; }
.td-frame { position: relative; overflow: hidden; background: #111; aspect-ratio: 4 / 5; }
.td-frame::after { /* a soft shade in the corner so "Think different." reads on light photos too */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 30% at 100% 100%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 55%, transparent 80%);
}
.td-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.td-mark { position: absolute; z-index: 1; right: 16px; bottom: 14px; display: flex; align-items: flex-end; gap: 7px; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.td-tag { display: inline-block; font-size: 22px; line-height: 1; letter-spacing: -.01em; transform: scaleX(.84); transform-origin: right bottom; margin-left: -18px; }
.td-logo {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 22px; line-height: 1;
  background: linear-gradient(180deg, #61BB46 0 17%, #FDB827 17% 34%, #F5821F 34% 51%, #E03A3E 51% 67%, #963D97 67% 83%, #009DDC 83% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.td-poster figcaption { margin-top: 12px; font-family: var(--td-sans); font-size: 13px; font-weight: 500; color: #d2d2d7; }
.td-poster figcaption span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: #86868b; }
.td-poster figcaption span { line-height: 1.45; }
.td-poster figcaption span a { color: inherit; text-decoration: underline; text-decoration-color: #424245; text-underline-offset: 2px; }
.td-poster .td-go-to { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; }
.td-poster .td-go-to a { color: #2997ff; text-decoration: none; }
.td-poster .td-go-to a::after { content: ' \203A'; }
.td-poster .td-go-to a:hover { text-decoration: underline; }
.td-words { flex: 1 1 auto; max-width: 520px; }
.td-line { margin: 0 0 10px; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.32; opacity: 0; animation: td-rise .9s ease both; animation-delay: var(--d, 0s); }
.td-first { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; font-weight: 500; margin-bottom: 20px; }
.td-last { margin-top: 20px; font-style: italic; color: #fff; }
@keyframes td-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.td-foot { margin: 20px 0 0; font-family: var(--td-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #86868b; opacity: 0; animation: td-rise .9s ease both; animation-delay: var(--d, 0s); }
.td-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; opacity: 0; animation: td-rise .9s ease both; animation-delay: var(--d, 0s); }
.td-acts.td-now { opacity: 1; animation: none; justify-content: center; }
.td-acts button, .td-acts a { font-family: var(--td-sans); font-size: 15px; font-weight: 500; line-height: 1.2; border-radius: 980px; padding: 11px 20px; cursor: pointer; text-decoration: none; }
.td-play { background: #f5f5f7; color: #000; border: 0; }
.td-play:hover { background: #fff; }
.td-go { background: none; color: #f5f5f7; border: 1px solid #424245; }
.td-go:hover { border-color: #86868b; }
.td-ode .td-more { color: #2997ff; padding-left: 6px; padding-right: 6px; }
.td-ode .td-more:hover { color: #2997ff; text-decoration: underline; }
.td-ode .td-more::after { content: ' \203A'; }
.td-x { position: fixed; top: 16px; right: 18px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: #86868b; font-size: 18px; cursor: pointer; }
.td-x:hover { color: #f5f5f7; background: #1d1d1f; }
.td-ode :focus-visible { outline: 2px solid #2997ff; outline-offset: 3px; }
.td-watch { flex-direction: column; gap: 18px; }
.td-video { width: min(92vw, 960px, calc((100vh - 220px) * 16 / 9)); aspect-ratio: 16 / 9; background: #111; }
.td-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.td-vcap { margin: 0; max-width: 640px; text-align: center; font-family: var(--td-sans); font-size: 14px; line-height: 1.5; color: #a1a1a6; }
@media (max-width: 760px) {
  .td-ode { align-items: flex-start; padding: 60px 24px 40px; }
  .td-in { flex-direction: column; align-items: stretch; gap: 26px; }
  .td-poster { width: min(100%, 360px); align-self: center; }
  .td-tag, .td-logo { font-size: 19px; }
  .td-watch { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .td-ode, .td-poster, .td-line, .td-foot, .td-acts { animation: none !important; opacity: 1 !important; }
}