:root {
  --orange: #F26A1F;
  --orange-hover: #D85A14;
  --navy: #1B2230;
  --green: #3FA34D;
  --bg: #FFFFFF;
  --surface: #F7F6F1;
  --text: #1B2230;
  --muted: #6B7280;
  --border: #E5E3DC;
  --shadow-sm: 0 1px 2px rgba(27, 34, 48, 0.06);
  --shadow-md: 0 2px 8px rgba(27, 34, 48, 0.08), 0 8px 24px rgba(27, 34, 48, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #14181F;
    --text: #EFEFEA;
    --muted: #94A0B0;
    --border: #252A33;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--orange); }
a:hover { color: var(--orange-hover); }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero on root */
.hero {
  text-align: center;
  padding: 14px 24px 32px;
}
.hero picture, .hero img {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  height: auto;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero .tagline {
  margin: 0;
  font-size: 1.1rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
@media (max-width: 520px) {
  .hero { padding-left: 0; padding-right: 0; }
}

/* Section label */
.section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 600;
  text-align: center;
}

/* Portfolio grid - auto-centers when row is partial */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  gap: 24px;
  justify-content: center;
  margin: 0 0 45px;
}

/* App card */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: var(--shadow-sm);
}
.card:hover, .card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange);
  outline: none;
}
.card-image {
  aspect-ratio: 1024/500;
  background: linear-gradient(135deg, var(--bg) 0%, var(--border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.card-platforms {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  background: rgba(27, 34, 48, 0.68);
  border-radius: 6px;
  padding: 4px 6px;
}
.card-image img {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-image .placeholder {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
}
.card-body { padding: 20px 22px 22px; }
.card-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 600;
}
.card-title {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card-tagline {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

/* GitHub-hosted (non-Play) card variant: the tile is a link, with a small action
   row (Download latest / Source) beneath it. Normal cards are unchanged. */
.card-gh .card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card-gh .card-body { padding-bottom: 14px; }
.card-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px 20px;
}
.card-dl {
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 9px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.card-dl:hover, .card-dl:focus-visible { filter: brightness(1.06); transform: translateY(-1px); outline: none; }
/* Release not ready yet: muted, non-interactive stand-in for the Download button. */
.card-dl-pending {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border, rgba(120,120,120,0.4));
  font-weight: 600;
  cursor: default;
}
.card-dl-pending:hover { filter: none; transform: none; }
.card-src {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.card-src:hover, .card-src:focus-visible { color: var(--orange); text-decoration: underline; outline: none; }

/* Flask badge corner accent on cards */
.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.card-badge svg { width: 14px; height: 14px; display: block; }

/* Editorial status pill - top-left, opposite the flask badge. One consistent
   navy pill for all signalling statuses (coming-soon / closed-testing / beta);
   normal and hidden render no pill. */
.card-status {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--navy);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* App page */
.app-hero {
  text-align: center;
  padding: 28px 24px 24px;
}
.app-hero .hero-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 18px;
}
.app-hero .back-link {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}
.app-hero .back-link:hover { color: var(--orange); }

.app-hero .app-identity {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  text-align: left;
}
.app-hero .app-logo {
  display: inline-block;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 22%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.app-hero .app-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
}
.app-hero .app-identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-hero .experiment-id {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 4px;
}
.app-hero h1 {
  font-size: 2.1rem;
  margin: 0;
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.1;
}
.app-hero .tagline {
  font-size: 1.15rem;
  color: var(--text);
  opacity: 0.78;
  margin: 4px auto 0;
  max-width: 540px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .app-hero .hero-row {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  .app-hero .app-identity {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .app-hero h1 { font-size: 1.75rem; }
}
.app-feature {
  margin: 28px auto 0;
  max-width: 900px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.app-feature img { display: block; width: 100%; height: auto; }
.app-feature .placeholder {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-description {
  font-size: 1.05rem;
  max-width: 680px;
  margin: 34px auto;
  padding: 0 8px;
}
.app-description p { margin: 0 0 1em; }

/* Screenshots stage panel */
.stage {
  background: var(--surface);
  margin: 28px 0 34px;
  padding: 8px 0 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stage .section-label { margin-top: 6px; margin-bottom: 12px; }
.stage .screenshots-cf { margin-top: 6px; margin-bottom: 0; }

/* Coverflow screenshots carousel */
.screenshots-cf {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 22px 50% 25px;
  margin: 12px -24px 34px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  user-select: none;
  -webkit-user-select: none;
}
.screenshots-cf::-webkit-scrollbar { display: none; }
/* When JS enhances the carousel, kill native snap entirely - JS handles all settle behavior */
.screenshots-cf.cf-enhanced { scroll-snap-type: none; }

.cf-item {
  flex: 0 0 auto;
  /* Width is intentionally NOT fixed: each item shrink-wraps the image, whose
     height is uniform (below) and width follows its own aspect ratio. So mixed
     dimensions (e.g. portrait phone vs landscape desktop shots) line up by
     height, with width varying per image. */
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform-origin: center center;
  cursor: grab;
  /* noscript fallback: items visible at full size, no coverflow effect */
  opacity: 1;
}
.cf-item:active { cursor: grabbing; }

.cf-item img {
  /* Uniform on-screen height for every screenshot; width auto -> follows the
     image's own aspect ratio. object-fit: contain guarantees no stretch/crop. */
  height: 480px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.1);
  background: var(--surface);
  pointer-events: none;
}

/* When JS is loaded it applies inline transforms each scroll frame; no CSS transition */
.cf-enhanced .cf-item { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .screenshots-cf { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  .screenshots-cf {
    padding: 15px 50% 25px;
    margin: 8px -24px 36px;
  }
  .cf-item img { height: 380px; }
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 34px 0 32px;
}

/* Closed-testing recruitment block (app page, status 'closed-testing' only). A
   bordered callout with a numbered, ordered stepper so the required sequence
   - join group, opt in, install - is unmissable. */
.testing-cta {
  max-width: 640px;
  margin: 34px auto 8px;
  padding: 24px 26px 26px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.testing-cta-title {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.testing-cta-blurb {
  margin: 0 0 22px;
  color: var(--text);
  opacity: 0.85;
  line-height: 1.55;
}
.testing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.testing-step {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
}
.testing-step:last-child { padding-bottom: 0; }
/* Connector line threading the step numbers, reinforcing the sequence. */
.testing-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.testing-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.testing-step-body { padding-top: 3px; }
.testing-step-label {
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.testing-step-meta {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.85rem;
}
.testing-step-note {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}
.testing-btn {
  display: inline-block;
  margin-top: 2px;
  padding: 10px 18px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 10px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.testing-btn:hover, .testing-btn:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #fff;
  outline: none;
}
.play-badge img { height: 56px; width: auto; display: block; }

.web-app-launch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
}
.web-app-launch:hover, .web-app-launch:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  outline: none;
}
.web-app-launch svg { width: 22px; height: 22px; display: block; }
.web-app-launch-text { display: flex; flex-direction: column; line-height: 1.15; }
.web-app-launch-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 600;
}
.web-app-launch-label { font-size: 1rem; font-weight: 700; }

/* GitHub release download button (app page) - primary CTA, mirrors web-app-launch. */
.gh-download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.15s ease, filter 0.15s ease;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
}
.gh-download:hover, .gh-download:focus-visible { transform: translateY(-2px); filter: brightness(1.06); outline: none; }
.gh-download svg { width: 22px; height: 22px; display: block; }
.gh-download-text { display: flex; flex-direction: column; line-height: 1.15; }
.gh-download-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 600;
}
.gh-download-label { font-size: 1rem; font-weight: 700; }
/* Release not ready yet: muted, non-interactive stand-in for the download CTA. */
.gh-download-pending {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border, rgba(120,120,120,0.4));
  box-shadow: none;
  cursor: default;
}
.gh-download-pending:hover { transform: none; filter: none; }

/* Secondary "Source repository" link (app page) - less emphasised than the CTA. */
.app-source-link { text-align: center; margin: -10px 0 14px; font-size: 0.9rem; }
.app-source-link a { color: var(--muted); text-decoration: none; }
.app-source-link a:hover, .app-source-link a:focus-visible { color: var(--orange); text-decoration: underline; outline: none; }

.policy-links {
  text-align: center;
  margin: 24px 0 17px;
  font-size: 0.9rem;
}
.policy-links a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 12px;
}
.policy-links a:hover {
  color: var(--orange);
  text-decoration: underline;
}

/* Policy pages (privacy / tos) - standalone HTML, no Templater */
.policy-page {
  max-width: 720px;
  padding-top: 40px;
}
.policy-page .policy-header {
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.policy-page .back-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.policy-page .back-link:hover { color: var(--orange); }
.policy-page h1 {
  font-size: 2rem;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.15;
}
.policy-page .policy-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.7;
}
.policy-page .policy-meta strong {
  color: var(--text);
  font-weight: 600;
}
.policy-page .policy-meta .sep {
  margin: 0 8px;
  opacity: 0.5;
}
.policy-page h2 {
  font-size: 1.05rem;
  margin: 2.4em 0 0.6em;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.policy-page p,
.policy-page li {
  font-size: 1rem;
  line-height: 1.7;
}
.policy-page ul {
  padding-left: 22px;
  margin: 0.6em 0 1em;
}
.policy-page li { margin-bottom: 4px; }
.policy-page code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 520px) {
  .policy-page { padding-top: 24px; }
  .policy-page h1 { font-size: 1.6rem; }
  .policy-page .policy-meta .sep { display: block; height: 4px; margin: 0; visibility: hidden; }
}

/* About page */
.about-page {
  max-width: 760px;
  padding-top: 32px;
}
.about-page .back-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  margin-bottom: 26px;
}
.about-page .back-link:hover { color: var(--orange); }

.about-hero {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--border);
}
.about-portrait {
  flex-shrink: 0;
  width: 252px;
  height: 252px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero-text { min-width: 0; }
.about-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 8px;
}
.about-hero-text h1 {
  font-size: 2.2rem;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.1;
}
.about-lede {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text);
  opacity: 0.82;
  line-height: 1.5;
}

.about-body { font-size: 1.05rem; }
.about-body p { margin: 0 0 1.15em; }
.about-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1.8em 0 0.6em;
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin: 30px 0 34px;
}
.about-principles .principle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-sm);
}
.about-principles .principle h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.005em;
}
.about-principles .principle p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
}

.about-contact {
  margin-top: 40px;
  padding: 26px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.about-contact h2 { margin: 0 0 10px; }
.about-contact p {
  max-width: 520px;
  margin: 0 auto 20px;
  color: var(--text);
  opacity: 0.85;
}
.about-email-btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 28px;
  border-radius: 10px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.about-email-btn:hover, .about-email-btn:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #fff;
  outline: none;
}

@media (max-width: 560px) {
  .about-hero {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .about-portrait { width: 210px; height: 210px; }
  .about-hero-text h1 { font-size: 1.8rem; }
}

.about-mad-scientist {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 40px;
  /* Non-collapsing 2% inset on ALL four sides (padding, unlike a vertical
     margin, does not collapse). This keeps the image inset symmetrically and
     lets the corner pockets sit an equal 2% outside each image edge. */
  padding: 2%;
}
/* Wraps just the photo (+ its coffee-stain overlay) at the photo's own visible
   bounds, so overflow: hidden clips the stain to the photo's edges instead of
   the padded .about-mad-scientist box (which is 2% larger on every side). */
.about-mad-scientist-frame {
  position: relative;
  overflow: hidden;
}
.about-mad-scientist-photo {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%) brightness(1.5) contrast(0.65);
}
/* Photo-book corner pockets at top-left and bottom-right. Each is a right-angle
   triangle whose right-angle vertex snaps into the container's padding-box
   corner - i.e. an equal 2% outside the image's top/left (and bottom/right)
   edges. Legs are 10% of the image (image = 96% of the padding box, so
   9.6% here == 10% of the image). */
.about-mad-scientist::before,
.about-mad-scientist::after {
  content: "";
  position: absolute;
  width: 9.6%;
  aspect-ratio: 1;
  /* The img's CSS filter creates a stacking context that would paint it above
     these pseudo-elements; z-index: 1 keeps the corners in front of the image. */
  z-index: 1;
  background: #b2a176;
}
.about-mad-scientist::before {
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.about-mad-scientist::after {
  bottom: 0;
  right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Coffee stain overlay, hanging off the bottom-left corner. Cropped to the
   photo's own bounds by .about-mad-scientist-frame's overflow: hidden. */
.about-coffee-stain { pointer-events: none;
  position: absolute;
  left: -10.22%;
  bottom: -8.73%;
  width: 88.2%;
  height: auto;
  opacity: 0.375;
  filter: saturate(0.5);
  z-index: 2;
}

/* Second coffee stain, hanging off the top-right corner. Same treatment as
   .about-coffee-stain, cropped to the photo's own bounds. */
.about-coffee-stain-2 { pointer-events: none;
  position: absolute;
  top: -8.73%;
  right: -10.22%;
  width: 132%;
  height: auto;
  opacity: 0.26;
  filter: saturate(0.35);
  z-index: 2;
}

/* Donate button */
.donate-form { display: inline-block; margin: 0; }
.donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.08s ease;
  letter-spacing: 0.01em;
}
.donate-btn:hover { background: var(--orange-hover); color: #fff; }
.donate-btn:active { transform: scale(0.98); }
.donate-btn svg { display: block; }
.donate-prominent .donate-btn { padding: 14px 28px; font-size: 1.05rem; }
.donate-compact .donate-btn {
  padding: 7px 14px;
  font-size: 0.85rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.donate-compact .donate-btn:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding: 40px 24px 32px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.page-app .site-footer { margin-top: 40px; }
.footer-trinity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0 auto 16px;
  color: var(--muted);
}
.footer-trinity svg { width: 19px; height: 19px; display: block; opacity: 0.75; }
.footer-trinity .flask { color: var(--orange); opacity: 1; }
.footer-tagline {
  font-size: 0.82rem;
  color: var(--muted);
  opacity: 0.85;
  margin: 0 0 14px;
  font-style: italic;
}
.site-footer .footer-row {
  margin-bottom: 16px;
}
.site-footer .footer-row a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 10px;
}
.site-footer .footer-row a:hover { color: var(--orange); }
.site-footer .copyright {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 8px;
}
.site-footer .footer-disclaimer {
  font-size: 0.7rem;
  opacity: 0.5;
  margin-top: 10px;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* Hero phone screenshot (app_sleeptracker layout: one prominent shot above the fold) */
.hero-screenshot {
  margin: 24px auto 0;
  text-align: center;
}
.hero-screenshot img {
  max-height: 480px;
  width: auto;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.1);
  display: inline-block;
}
@media (max-width: 640px) {
  .hero-screenshot img { max-height: 380px; }
}

/* Shrunk feature image variant (app_sleeptracker layout: moved below the fold) */
.app-feature--sm {
  max-width: 520px;
}

/* ============================================================
   SleepTracker landing v2 (layouts/app_sleeptracker.php)
   Nocturnal hero + calm, theme-aware card sections. Scoped to
   .page-st / .st-* so it never touches the shared app.php layout.
   ============================================================ */
.page-st .st-topbar { padding: 20px 0 2px; }
.page-st .back-link {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.page-st .back-link:hover { color: var(--orange); }

/* Anchor targets clear the top edge when jumped to via hero CTAs */
#beta, #how-it-works { scroll-margin-top: 24px; }

/* --- Hero: dark nocturnal band, independent of the site light/dark theme --- */
.st-hero {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
  padding: 44px;
  border-radius: 22px;
  background: radial-gradient(130% 150% at 12% 0%, #263056 0%, #171c31 46%, #0b0d16 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  color: #eceffb;
}
.st-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a4afff;
  margin-bottom: 12px;
}
.st-hero-title {
  margin: 0 0 10px;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.st-hero-headline {
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: #eceffb;
}
.st-hero-body {
  margin: 0 0 24px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #b9c1de;
  max-width: 44ch;
}
.st-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.st-btn-primary {
  background: linear-gradient(135deg, #6f5cf0 0%, #4f7bf0 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(79, 123, 240, 0.4);
}
.st-btn-primary:hover, .st-btn-primary:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07);
  color: #fff;
  outline: none;
}
.st-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #eceffb;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.st-btn-ghost:hover, .st-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}
.st-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 0.82rem;
  color: #9aa4c6;
}
.st-trust li { position: relative; }
.st-trust li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #6b74a0;
  transform: translateY(-50%);
}
.st-hero-visual { display: flex; justify-content: center; }
.st-hero-visual img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.st-hero-visual .placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8890b5;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 16px;
}

/* --- Generic landing sections (theme-aware cards) --- */
.st-section { margin: 56px 0; }
.st-section-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.st-section-head h2 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.st-section-head p { margin: 0; color: var(--muted); line-height: 1.55; }

.st-grid { display: grid; gap: 18px; }
.st-grid--2 { grid-template-columns: repeat(2, 1fr); }

.st-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
}
.st-card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.st-card p { margin: 0; color: var(--text); opacity: 0.82; line-height: 1.55; }
.st-card--wide { max-width: 760px; margin: 0 auto; }
.st-card-title { margin: 0 0 10px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }

.st-note {
  text-align: center;
  max-width: 620px;
  margin: 20px auto 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
}
.st-bullets { margin: 14px 0 0; padding-left: 20px; color: var(--text); opacity: 0.82; }
.st-bullets li { margin: 0 0 4px; line-height: 1.5; }

/* Carousel band heading spacing */
.stage .st-section-head { margin-top: 18px; margin-bottom: 6px; }

/* Donate (kept visually secondary) */
.st-donate { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }
.st-donate p { color: var(--muted); margin: 0 auto 18px; max-width: 52ch; line-height: 1.55; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .st-hero { grid-template-columns: 1fr; gap: 30px; padding: 32px 26px; }
  .st-hero-copy { order: 1; }
  .st-hero-visual { order: 2; }
  .st-hero-title { font-size: 2.2rem; }
  .st-hero-headline { font-size: 1.2rem; }
}
@media (max-width: 720px) {
  .st-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .st-hero { padding: 26px 20px; }
  .st-cta-row { flex-direction: column; }
  .st-btn { width: 100%; }
  .st-section { margin: 44px 0; }
}

/* ============================================================
   Lab Notes writeup page (templates/layouts/writeup.php)
   ============================================================ */
.writeup-page {
  max-width: 1080px;
  padding-top: 32px;
}
.writeup-page .back-link {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  margin-bottom: 26px;
}
.writeup-page .back-link:hover { color: var(--orange); }

.writeup-header {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}
.writeup-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin: 0 0 10px;
}
.writeup-header h1 {
  font-size: 2.4rem;
  margin: 0 0 16px;
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.08;
}
.writeup-lede {
  margin: 0;
  font-size: 1.12rem;
  color: var(--text);
  opacity: 0.85;
  line-height: 1.55;
}

.writeup-body { font-size: 1.05rem; }
.writeup-body p { margin: 0 0 1.15em; line-height: 1.7; }

/* Linked table of contents */
.writeup-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px 22px;
  margin: 26px 0 40px;
  box-shadow: var(--shadow-sm);
}
.writeup-toc-title {
  margin: 0 0 12px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.writeup-toc ol {
  margin: 0;
  padding-left: 1.4em;
  counter-reset: none;
}
.writeup-toc li { margin: 6px 0; line-height: 1.4; }
.writeup-toc a {
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid transparent;
}
.writeup-toc a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Sections + anchor offset so TOC jumps clear the top edge */
.writeup-section {
  scroll-margin-top: 24px;
  margin: 0 0 8px;
  padding-top: 8px;
}
.writeup-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 1.9em 0 0.7em;
  padding-top: 1.4em;
  border-top: 1px solid var(--border);
}
.writeup-section:first-of-type h2 { border-top: none; padding-top: 0; }
.writeup-body h3 {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--orange);
  margin: 1.9em 0 0.5em;
}

.writeup-body code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.writeup-code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 1.4em;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.writeup-code code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Figures: real image (rube) + diagram placeholders */
.writeup-figure {
  margin: 30px 0 34px;
  text-align: center;
}
.writeup-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.writeup-figure figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.diagram-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px 24px;
  border: 2px dashed var(--orange);
  border-radius: 12px;
  background: var(--surface);
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* Figure caption link (e.g. "see explanations of what the parts do") */
.writeup-figure-link {
  text-align: center;
  margin: -18px 0 34px;
  font-size: 0.95rem;
}
.writeup-figure-link a {
  font-weight: 600;
  text-decoration: none;
}
.writeup-figure-link a:hover { text-decoration: underline; }

/* Callout box: a bordered aside that pulls one point out of the body flow */
.writeup-callout {
  margin: 0 0 1.6em;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.writeup-callout-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.writeup-callout p:last-child { margin-bottom: 0; }

/* Component breakdown: one card per part, with a "how it talks" list */
.wc-grid {
  display: grid;
  gap: 20px;
  margin: 26px 0 30px;
}
.wc-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 20px;
}
.wc-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.wc-head h3 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.wc-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-role {
  margin: 3px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}
.wc-does {
  margin: 0 0 14px;
  line-height: 1.6;
}
.wc-talks {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.wc-talks-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange);
}
.wc-talks ul {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
}
.wc-talks li {
  line-height: 1.55;
  font-size: 0.95rem;
}
.wc-ep {
  font-weight: 600;
  white-space: nowrap;
}

/* Context-layer: plain bulleted list in body copy */
.writeup-list {
  margin: 0 0 1.3em;
  padding-left: 1.2em;
  display: grid;
  gap: 9px;
}
.writeup-list li { line-height: 1.6; }

/* Context-layer mini-diagram: durable stores feeding a fresh thread */
.ctx-diagram {
  margin: 26px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ctx-node {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 13px 18px;
}
.ctx-node strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ctx-node span {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}
.ctx-node-lead {
  border-left: 3px solid var(--orange);
  max-width: 420px;
}
.ctx-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}
.ctx-arrow span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.ctx-tri {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--orange);
}
.ctx-stores {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.ctx-store {
  border-left: 3px solid var(--green);
  flex: 1 1 240px;
  max-width: 300px;
}
@media (max-width: 520px) {
  .ctx-stores { flex-direction: column; }
}

/* Prompt blocks: short things you type into Claude.ai to drive it */
.writeup-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 6px;
  box-shadow: var(--shadow-sm);
}
.writeup-prompt-chip {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 2px 9px;
}
.writeup-prompt code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}
.writeup-body p.writeup-prompt-desc {
  margin: 0 0 1.3em;
  padding-left: 4px;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Queue mini-diagram: the pending-jobs stack a job gets popped off */
.wq-diagram { margin: 24px 0 30px; }
.wq-stack {
  display: grid;
  gap: 8px;
}
.wq-item {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  line-height: 1.5;
}
.wq-item-top {
  border-left: 3px solid var(--orange);
  font-weight: 600;
}
.wq-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  padding: 2px 8px;
  margin-right: 10px;
  vertical-align: middle;
}
.writeup-body p.wq-note {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
}

/* Shell command block: light token colouring for the headless run command */
.writeup-code-sh code .tok-cmd { color: var(--green); font-weight: 600; }
.writeup-code-sh code .tok-flag { color: var(--orange); }
.writeup-code-sh code .tok-str { color: var(--muted); }

/* Host options: card grid of places you can run the agent */
.ho-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0 30px;
}
.ho-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px 14px;
}
.ho-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.ho-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 4px;
}
.writeup-body p.ho-desc {
  margin: 0 0 10px;
  line-height: 1.55;
  font-size: 0.95rem;
}
.writeup-body p.ho-note {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.writeup-backlink {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.writeup-backlink a {
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

@media (max-width: 520px) {
  .writeup-page { padding-top: 24px; }
  .writeup-header h1 { font-size: 1.9rem; }
  .writeup-lede { font-size: 1.02rem; }
  .writeup-body h2 { font-size: 1.3rem; }
}

/* ============================================================
   Writeup: section-per-page shell + sticky sidebar nav
   ============================================================ */
.writeup-shell {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.writeup-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 760px;
}

/* Landing hero image */
.writeup-hero {
  margin: 0 0 30px;
}
.writeup-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

/* Sticky left sidebar nav */
.writeup-nav {
  flex: 0 0 224px;
  width: 224px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
  font-size: 0.9rem;
}
.writeup-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}
.writeup-nav li { margin: 0; }
.writeup-nav a {
  display: block;
  padding: 8px 14px;
  margin-left: -1px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.writeup-nav a:hover { color: var(--orange); }
.writeup-nav a.is-current {
  color: var(--orange);
  font-weight: 600;
  border-left-color: var(--orange);
}

/* Mobile dropdown toggle (checkbox hack, no JS). Hidden on desktop. */
.writeup-nav-check { display: none; }
.writeup-nav-toggle { display: none; }

/* Prev / next between sections */
.writeup-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.writeup-pn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48%;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease;
}
.writeup-pn:hover { border-color: var(--orange); }
.writeup-next { text-align: right; margin-left: auto; }
.writeup-pn-dir {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.writeup-pn-label { font-size: 0.95rem; line-height: 1.3; }
.writeup-pn-spacer { flex: 0 0 auto; }

@media (max-width: 860px) {
  .writeup-shell { flex-direction: column; gap: 0; }
  .writeup-nav {
    position: static;
    width: auto;
    flex-basis: auto;
    margin-bottom: 30px;
    font-size: 0.95rem;
  }
  .writeup-nav-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    padding: 12px 46px 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    user-select: none;
  }
  .writeup-nav-toggle::after {
    content: "\25BC";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--muted);
  }
  .writeup-nav-toggle-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .writeup-nav-toggle-current { font-weight: 600; color: var(--text); }
  .writeup-nav ul {
    display: none;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .writeup-nav-check:checked ~ .writeup-nav ul { display: block; }
  .writeup-nav a {
    padding: 11px 16px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border);
  }
  .writeup-nav li:last-child a { border-bottom: none; }
}

/* CCSwitchboard writeup: GitHub source links.
   Primary "View on GitHub" CTA near the top of the overview, and a smaller
   persistent "GitHub repo" link under the sticky sidebar nav. */
.writeup-gh-cta { margin: 0 0 30px; }
.writeup-gh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
  transition: transform 0.15s ease, filter 0.15s ease;
}
.writeup-gh-btn:hover, .writeup-gh-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  outline: none;
}
.writeup-gh-btn svg { width: 22px; height: 22px; display: block; fill: currentColor; }

.writeup-nav-gh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 6px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.15s ease;
}
.writeup-nav-gh:hover, .writeup-nav-gh:focus-visible { color: var(--orange); outline: none; }
.writeup-nav-gh svg { width: 16px; height: 16px; display: block; fill: currentColor; }

@media (max-width: 860px) {
  /* Redundant with the "View source on GitHub" button in the main column. */
  .writeup-nav-gh { display: none !important; }
}