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

/* 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: space-between;
  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;
}
.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; }
.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 40px;
  height: 34px;
  cursor: pointer;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  padding: 0;
}
@media (max-width: 720px) {
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 10px 32px 18px;
    z-index: 50;
  }
  .nav-links.open { display: flex; }
}

/* ── 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;
}
.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: 13px; color: var(--faint); margin-top: 14px; }

/* ── 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 */
.tw-cursor {
  opacity: .55;
  animation: blink .9s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-cursor { animation: none; } }

/* ── 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;
}
.coming-desc {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 600px;
}

/* Bordered essay teaser (Essays page) */
.essay-teaser {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.essay-teaser .eyebrow { margin-bottom: 4px; }
.essay-teaser-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
}
.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(38px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 0 20px;
}

/* ── 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; }
.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%; }
.essay-side-fine { font-size: 12.5px; color: var(--faint); margin: 12px 0 0; }
@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; } }

.essay-topic-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 18px;
  display: block;
}
.essay-signoff {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.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;
}

/* ── ROTATING READER QUOTE (sidebar) ── */
.essay-side-quote {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  min-height: 60px;
}
.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.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: 600;
}
.essay-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}
.essay-content {
  font-family: 'Lora', serif;
  font-size: 21px;
  line-height: 1.75;
  color: var(--body-ink);
}
.essay-content p { margin-bottom: 28px; }
.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 blockquote {
  border-left: 3px solid var(--muted);
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--muted);
}
.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);
}
.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; }
}

/* ── 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: linear-gradient(180deg, #08032a 0%, #170944 40%, #3d0e63 72%, #8f1f7e 100%) fixed;
}
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"] 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: linear-gradient(180deg, #cde3ee 0%, #dfeadf 55%, #e7efdb 100%) fixed;
}
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 fill=%22%234a3b28%22%3E%3Crect x=%2242%22 y=%2260%22 width=%225%22 height=%2228%22 rx=%222%22/%3E%3Crect x=%2254%22 y=%2262%22 width=%225%22 height=%2226%22 rx=%222%22/%3E%3Crect x=%2276%22 y=%2262%22 width=%225%22 height=%2226%22 rx=%222%22/%3E%3Crect x=%2287%22 y=%2260%22 width=%225%22 height=%2228%22 rx=%222%22/%3E%3Cpath d=%22M36 66 Q32 52 44 50 C46 40 58 40 61 49 C63 40 75 40 78 49 Q90 49 93 58 Q95 64 90 67 L40 68 Q36 68 36 66 Z%22/%3E%3Cpath d=%22M88 60 Q95 56 97 44 Q98 35 104 32 L104 27 Q104 24 107 24 Q109 24 109 27 L110 31 Q118 31 121 35 Q122 38 118 38 L110 39 Q108 40 107 44 Q106 58 97 64 Z%22/%3E%3Cpath d=%22M37 56 Q31 59 32 67%22 fill=%22none%22 stroke=%22%234a3b28%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: camel-walk 150s linear infinite;
}
@keyframes camel-walk {
  0%    { transform: translateX(-16vw) scaleX(1); }
  49.9% { transform: translateX(106vw) scaleX(1); }
  50%   { transform: translateX(106vw) scaleX(-1); }
  99.9% { transform: translateX(-16vw) scaleX(-1); }
  100%  { transform: translateX(-16vw) scaleX(1); }
}
@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; }
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 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: linear-gradient(180deg, #cfe7ff 0%, #eaf5ff 55%, #f6fbff 100%) fixed;
}
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: linear-gradient(180deg, #d0905c 0%, #e2ae83 45%, #f0d3b5 100%) fixed;
}
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"]::after { /* Phobos and Deimos */
  content: '';
  position: fixed;
  top: 7vh;
  right: 8vw;
  width: 140px; height: 70px;
  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 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");
  background-size: contain;
  background-repeat: no-repeat;
}
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; }
}