/* ===========================================================================
   Injective Engineering — Ghost theme
   Tokens taken directly from the Injective brand styleguide
   (website/injective-com: app/assets/css/styles.css + tailwind.config.js).

   Typography: ABC Whyte for everything, ABC Whyte Mono for code.
   No serif in post content.
   =========================================================================== */

/* --- 1. Brand tokens ----------------------------------------------------- */

:root {
  /* Primary */
  --inj-ocean: #4d3dff;
  --inj-ocean-tint: #5359f9;
  --inj-snow: #eeefff;
  --inj-snow-tint: #d7dbff;
  --inj-space-gray: #121212;
  --inj-black: #000;
  --inj-white: #fff;

  /* Secondary — Midnight */
  --inj-midnight-900: #0b182b;
  --inj-midnight-800: #182e4b;
  --inj-midnight-700: #193d6d;

  /* Tertiary */
  --inj-lime: #ceffc8;
  --inj-lemon: #e8ff5f;
  --inj-coral: #ffa36e;
  --inj-sand: #d5c498;
  --inj-forest: #144e1a;
  --inj-turquoise: #026585;
  --inj-eggplant: #611447;
  --inj-cinnamon: #7a4515;

  /* Shades — Sky */
  --inj-sky-50: #fcfdff;
  --inj-sky-100: #ebf0ff;
  --inj-sky-200: #d4e0ff;
  --inj-sky-300: #c2d3ff;
  --inj-sky-400: #aac2ff;
  --inj-sky-500: #87a7f3;
  --inj-sky-600: #6c91e7;
  --inj-sky-700: #4669b9;
  --inj-sky-800: #314b87;
  --inj-sky-900: #182e4b;

  /* Shades — Grey */
  --inj-grey-100: #f8f9fa;
  --inj-grey-200: #eeeff1;
  --inj-grey-300: #dbdde1;
  --inj-grey-400: #c5c8cd;
  --inj-grey-500: #a5abb6;
  --inj-grey-600: #7e838c;
  --inj-grey-700: #676c75;
  --inj-grey-800: #51545b;
  --inj-grey-900: #3b3e43;

  /* Dark surfaces */
  --inj-surface-dark: #121212;
  --inj-surface-dark-active: #202020;
  --inj-stroke-dark: #282828;
  --inj-stroke-dark-active: #404040;

  /* --- Typefaces ------------------------------------------------------- */
  --font-sans: 'ABC Whyte', 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'ABC Whyte Mono', ui-monospace, SFMono-Regular, 'SF Mono',
    Menlo, Consolas, 'Liberation Mono', monospace;
  --font-serif: 'ABC Marist Variable', 'Iowan Old Style', Georgia,
    ui-serif, serif;

  /* Body and display both resolve to sans. Two things can override:
     - Ghost's built-in font picker (Design > Brand) sets --gh-font-body and
       --gh-font-heading, which win when an admin chooses a font there.
     - The theme's own "Display typeface" setting adds .display-serif to
       <body>, which repoints display headings only, never body copy. */
  --font-body: var(--gh-font-body, var(--font-sans));
  --font-display: var(--gh-font-heading, var(--font-sans));
  --font-ui: var(--gh-font-body, var(--font-sans));

  /* --- Spacing scale (styleguide 4px base) ----------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-11: 72px;
  --space-12: 80px;
  --space-14: 96px;
  --space-17: 120px;

  /* --- Radii (styleguide) ---------------------------------------------- */
  --radius-xs: 4px;
  --radius-s: 16px;
  --radius-m: 24px;
  --radius-l: 32px;

  /* --- Layout ---------------------------------------------------------- */
  --header-height: 72px;

  /* ONE content width, used by every element on every template: prose,
     headings, tables, code, callouts, cards, header and footer. Changing
     --measure moves the whole site in step. --container is just --measure
     plus the gutter padding, so page chrome aligns with content. */
  --measure: 1040px;
  --container: 1136px;

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.24s;
}

/* --- 2. Semantic theme: light (default) ---------------------------------- */

:root {
  --bg: var(--inj-snow);
  --bg-raised: var(--inj-white);
  --bg-sunken: var(--inj-sky-100);
  --bg-code: var(--inj-midnight-900);
  --bg-code-inline: var(--inj-sky-200);

  --text: var(--inj-midnight-900);
  --text-muted: var(--inj-grey-700);
  --text-faint: var(--inj-grey-600);
  --text-on-accent: var(--inj-white);
  --text-code: var(--inj-sky-100);

  --stroke: var(--inj-sky-200);
  --stroke-strong: var(--inj-sky-300);

  --accent: var(--ghost-accent-color, var(--inj-ocean));
  --link: var(--accent);
  --link-hover: var(--inj-midnight-900);
  --selection-bg: var(--inj-sky-300);
  --selection-text: var(--inj-midnight-900);

  --shadow-card: 0 1px 2px rgba(11, 24, 43, 0.04),
    0 8px 24px -12px rgba(11, 24, 43, 0.12);
  color-scheme: light;
}

/* --- 3. Semantic theme: dark -------------------------------------------- */

/* Auto: follow the OS unless the admin forced Light. */
@media (prefers-color-scheme: dark) {
  :root:not(.scheme-light) {
    --bg: var(--inj-space-gray);
    --bg-raised: #181818;
    --bg-sunken: var(--inj-black);
    --bg-code: #0a0a0a;
    --bg-code-inline: #202020;

    --text: var(--inj-snow);
    --text-muted: var(--inj-grey-500);
    --text-faint: var(--inj-grey-600);
    --text-on-accent: var(--inj-white);
    --text-code: var(--inj-sky-100);

    --stroke: var(--inj-stroke-dark);
    --stroke-strong: var(--inj-stroke-dark-active);

    /* Ocean fails contrast as text on #121212 — links lift to Sky 400,
       Ocean stays for fills where text sits on top of it. */
    --accent: var(--ghost-accent-color, var(--inj-ocean));
    --link: var(--inj-sky-400);
    --link-hover: var(--inj-white);
    --selection-bg: var(--inj-midnight-700);
    --selection-text: var(--inj-white);

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4),
      0 8px 24px -12px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

/* Forced dark, regardless of OS. */
:root.scheme-dark {
  --bg: var(--inj-space-gray);
  --bg-raised: #181818;
  --bg-sunken: var(--inj-black);
  --bg-code: #0a0a0a;
  --bg-code-inline: #202020;

  --text: var(--inj-snow);
  --text-muted: var(--inj-grey-500);
  --text-faint: var(--inj-grey-600);
  --text-on-accent: var(--inj-white);
  --text-code: var(--inj-sky-100);

  --stroke: var(--inj-stroke-dark);
  --stroke-strong: var(--inj-stroke-dark-active);

  --accent: var(--ghost-accent-color, var(--inj-ocean));
  --link: var(--inj-sky-400);
  --link-hover: var(--inj-white);
  --selection-bg: var(--inj-midnight-700);
  --selection-text: var(--inj-white);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 24px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Opt-in serif display headings (theme setting). Body copy is never serif. */
body.display-serif {
  --font-display: var(--gh-font-heading, var(--font-serif));
}

/* --- 4. Reset and base --------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-5));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--stroke);
  margin: var(--space-10) 0;
}

/* Headings default to the display face at tight tracking, per styleguide. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* --- 5. Utilities -------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-8);
  }
}

.measure {
  max-width: var(--measure);
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-xs);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--text-on-accent);
}

/* Monospaced eyebrow label — styleguide label-mono-3 */
.label-mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.site-main {
  flex: 1 0 auto;
  padding-bottom: var(--space-17);
}

/* --- 6. Site header ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--stroke);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--bg);
  }
}

.site-header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  flex-shrink: 0;
}

.site-brand:hover {
  color: var(--text);
  opacity: 0.72;
}

.site-brand-mark {
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}

.site-brand-logo {
  max-height: 28px;
  width: auto;
}

.site-brand-text {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.site-brand-text em {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 400;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
}

.nav-list a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.nav-list a:hover,
.nav-list .nav-current a {
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius-xs);
  color: var(--text);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }
body.nav-open .nav-toggle .icon-menu { display: none; }

@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    background: var(--bg);
    border-bottom: 1px solid var(--stroke);
    padding: var(--space-5);
    margin-left: 0;
    display: none;
  }
  body.nav-open .site-nav {
    display: flex;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .nav-list a {
    font-size: 1.125rem;
    color: var(--text);
  }
}

/* --- 7. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  color: var(--text-on-accent);
  opacity: 0.88;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke-strong);
}

.btn-secondary:hover {
  color: var(--text);
  border-color: var(--text);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-xs);
  border-color: var(--stroke-strong);
  background: transparent;
  color: var(--text-muted);
}

.btn-icon:hover {
  color: var(--text);
  border-color: var(--text);
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

/* --- 8. Page intro (index / tag / author) -------------------------------- */

.page-intro {
  padding-block: var(--space-14) var(--space-10);
  border-bottom: 1px solid var(--stroke);
  margin-bottom: var(--space-12);
}

.page-intro-inner {
  max-width: 100%;
}

.page-intro h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}

.page-intro-description {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.page-intro-meta {
  margin-top: var(--space-5);
}

.author-intro {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.author-intro-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* --- 9. Featured post ---------------------------------------------------- */

.featured {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--stroke);
}

.featured-link {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  color: var(--text);
}

.featured-link:hover {
  color: var(--text);
}

@media (min-width: 900px) {
  .featured-link {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-10);
  }
}

.featured-image {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-m);
  border: 1px solid var(--stroke);
  background: var(--bg-sunken);
  transition: transform var(--dur) var(--ease);
}

.featured-link:hover .featured-image {
  transform: translate3d(0, -4px, 0);
}

.featured-title {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  letter-spacing: -0.03em;
  margin-block: var(--space-4) var(--space-4);
}

.featured-link:hover .featured-title {
  color: var(--accent);
}

.featured-excerpt {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* --- 10. Post feed ------------------------------------------------------- */

.feed-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--stroke);
}

.post-feed {
  list-style: none;
}

/* 10a. List layout — the default. Reads like an index, not a card wall. */
.feed-list {
  display: flex;
  flex-direction: column;
}

.feed-list .post-card {
  border-bottom: 1px solid var(--stroke);
}

.feed-list .post-card-link {
  display: grid;
  gap: var(--space-2) var(--space-8);
  padding-block: var(--space-7);
  color: var(--text);
  align-items: start;
}

@media (min-width: 900px) {
  .feed-list .post-card-link {
    grid-template-columns: 148px minmax(0, 1fr) 200px;
  }
  .feed-list .post-card-meta-lead {
    padding-top: 6px;
  }
}

@media (max-width: 899px) {
  .feed-list .post-card-image-wrap {
    display: none;
  }
}

.feed-list .post-card-link:hover {
  color: var(--text);
}

.feed-list .post-card-title {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.feed-list .post-card-link:hover .post-card-title {
  color: var(--accent);
}

.feed-list .post-card-excerpt {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-list .post-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-s);
  border: 1px solid var(--stroke);
  transition: transform var(--dur) var(--ease);
}

.feed-list .post-card-link:hover .post-card-image {
  transform: translate3d(0, -4px, 0);
}

/* 10b. Grid layout — opt-in via theme setting. */
.feed-grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.feed-grid .post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-4);
  color: var(--text);
}

.feed-grid .post-card-link:hover {
  color: var(--text);
}

.feed-grid .post-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-s);
  border: 1px solid var(--stroke);
  background: var(--bg-sunken);
  transition: transform var(--dur) var(--ease);
}

.feed-grid .post-card-link:hover .post-card-image {
  transform: translate3d(0, -4px, 0);
}

.feed-grid .post-card-title {
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.feed-grid .post-card-link:hover .post-card-title {
  color: var(--accent);
}

.feed-grid .post-card-excerpt {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Shared card meta */
.post-card-meta,
.post-card-meta-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.post-card-footer {
  margin-top: auto;
  padding-top: var(--space-4);
}

.meta-dot::before {
  content: '·';
  margin-right: var(--space-2);
  color: var(--text-faint);
}

/* Featured posts are promoted to the shelf on page 1, so they are not
   repeated in the index list there. Ghost's {{post_class}} supplies .featured;
   body_class supplies .paged on page 2 onwards. The shelf's own list carries
   .post-feed-featured and is exempt. */
body.home-template:not(.paged)
  .post-feed:not(.post-feed-featured)
  .post-card.featured {
  display: none;
}

/* --- 11. Tags ------------------------------------------------------------ */

.tag-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px var(--space-3) 4px;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  color: var(--text-muted);
  background: transparent;
}

a.tag-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.tag-pill-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

a.tag-pill-accent:hover {
  color: var(--text-on-accent);
  opacity: 0.88;
}

/* --- 12. Pagination ------------------------------------------------------ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--stroke);
}

.pagination-number {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-inline: auto;
}

/* --- 13. Empty state ----------------------------------------------------- */

.empty-state {
  padding-block: var(--space-14);
  text-align: center;
  color: var(--text-muted);
}

.empty-state h2 {
  color: var(--text);
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}

/* --- 14. Post header ----------------------------------------------------- */

.post-header {
  padding-block: var(--space-12) var(--space-8);
}

.post-header-inner {
  max-width: 100%;
}

.post-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.post-title {
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-5);
}

.post-excerpt {
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: var(--space-7);
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--stroke);
}

.post-byline-avatars {
  display: flex;
  align-items: center;
}

.post-byline-avatars img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg);
  margin-left: -8px;
}

.post-byline-avatars img:first-child {
  margin-left: 0;
}

.post-byline-text {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.post-byline-text a {
  color: var(--text);
}

.post-byline-text a:hover {
  color: var(--accent);
}

.post-hero {
  margin-block: var(--space-6) var(--space-12);
}

.post-hero figure {
  margin: 0;
}

.post-hero img {
  width: 100%;
  max-height: 72vh;
  object-fit: cover;
  border-radius: var(--radius-m);
  border: 1px solid var(--stroke);
}

.post-hero figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--text-faint);
  text-align: center;
}

/* --- 15. Post content (prose) -------------------------------------------- */

/* 20px / 34px are both styleguide tokens (body-4 size, lineHeight-34).
   The larger size keeps line length sane now that prose fills --measure. */
.post-content {
  font-size: 1.25rem;
  line-height: 1.7;
}

/* Every direct child is constrained to the reading measure and centred.
   Koenig wide/full cards break out of it below. */
.post-content > * {
  max-width: var(--measure);
  margin-inline: auto;
}

.post-content > * + * {
  margin-top: var(--space-6);
}

.post-content p {
  overflow-wrap: break-word;
}

.post-content a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
}

.post-content a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-top: var(--space-11);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.post-content h2 {
  font-size: 1.875rem;
  letter-spacing: -0.025em;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--stroke);
}

.post-content h3 {
  font-size: 1.4375rem;
  letter-spacing: -0.02em;
}

.post-content h4 {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.post-content h5,
.post-content h6 {
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-content strong {
  font-weight: 500;
  color: var(--text);
}

.post-content ul,
.post-content ol {
  padding-left: var(--space-6);
}

.post-content li + li {
  margin-top: var(--space-2);
}

.post-content li > ul,
.post-content li > ol {
  margin-top: var(--space-2);
  max-width: none;
}

.post-content li::marker {
  color: var(--text-faint);
}

.post-content blockquote {
  padding-left: var(--space-5);
  border-left: 3px solid var(--accent);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.post-content blockquote p + p {
  margin-top: var(--space-4);
}

/* Only the UA's horizontal figure margin is reset. Setting `margin: 0` here
   would out-specify `.post-content > * + *` (0,1,1 beats 0,1,0) and strip the
   flow rhythm from every figure-based Koenig card: image, bookmark, gallery,
   embed and code. They would sit flush against the paragraph above. */
.post-content figure {
  margin-inline: 0;
  margin-bottom: 0;
}

/* Nested figures are not direct children, so they never pick up the flow
   rule and keep the UA's top margin unless it is cleared here. */
.post-content figure figure {
  margin-top: 0;
}

.post-content figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}

.post-content img,
.post-content video {
  width: 100%;
  border-radius: var(--radius-s);
}

.post-content abbr {
  text-decoration: underline dotted;
  cursor: help;
}

.post-content mark {
  background: var(--inj-lemon);
  color: var(--inj-midnight-900);
  padding: 1px 3px;
  border-radius: var(--radius-xs);
}

/* --- 16. Code ------------------------------------------------------------ */

.post-content :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-code-inline);
  color: var(--text);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  word-break: break-word;
}

.post-content pre {
  background: var(--bg-code);
  color: var(--text-code);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.65;
  padding: var(--space-5);
  border-radius: var(--radius-s);
  border: 1px solid var(--stroke);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}

.post-content pre code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
  border: 0;
  color: inherit;
  white-space: pre;
}

.kg-code-card pre {
  margin: 0;
}

/* --- 17. Tables ---------------------------------------------------------- */

.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
}

.table-wrap table {
  border: 0;
}

.post-content th,
.post-content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}

.post-content th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg-sunken);
  white-space: nowrap;
}

.post-content tbody tr:last-child td {
  border-bottom: 0;
}

/* --- 18. Koenig editor cards --------------------------------------------- */

/* The editor's "wide" and "full" card widths are both pinned to --measure,
   so a card an author widened still lines up with the prose, the tables and
   the code around it. Nothing in post content is ever a different width. */
.post-content .kg-width-wide,
.post-content .kg-width-full {
  max-width: var(--measure);
}

.post-content .kg-width-full img,
.post-content .kg-width-full video {
  border-radius: var(--radius-s);
}

/* Image + gallery */
.kg-image-card img,
.kg-gallery-card img {
  border-radius: var(--radius-s);
}

.kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kg-gallery-row {
  display: flex;
  gap: var(--space-3);
}

.kg-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Callout */
.kg-callout-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-s);
  border: 1px solid var(--stroke);
  background: var(--bg-sunken);
  font-size: 1rem;
  line-height: 1.6;
}

.kg-callout-card .kg-callout-emoji {
  font-size: 1.25rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.kg-callout-card-accent {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--bg));
}

/* Blockquote card (large) */
.kg-blockquote-alt {
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  border: 0;
  padding: 0;
}

/* Bookmark */
.kg-bookmark-card a.kg-bookmark-container {
  display: flex;
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--bg-raised);
  transition: border-color var(--dur) var(--ease);
}

.kg-bookmark-card a.kg-bookmark-container:hover {
  border-color: var(--accent);
  color: var(--text);
}

.kg-bookmark-content {
  flex: 1 1 240px;
  padding: var(--space-5);
  min-width: 0;
}

.kg-bookmark-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.kg-bookmark-description {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kg-bookmark-metadata {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
}

.kg-bookmark-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.kg-bookmark-thumbnail {
  flex: 0 1 240px;
  min-height: 160px;
}

.kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Embeds */
.kg-embed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kg-embed-card iframe {
  max-width: 100%;
  border-radius: var(--radius-s);
}

/* Buttons card */
.kg-button-card a.kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: var(--space-4) var(--space-6);
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-on-accent);
  text-decoration: none;
}

.kg-button-card a.kg-btn:hover {
  color: var(--text-on-accent);
  opacity: 0.88;
}

/* Toggle */
.kg-toggle-card {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  padding: var(--space-5);
  background: var(--bg-raised);
}

.kg-toggle-heading h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  margin: 0;
}

.kg-toggle-content {
  font-size: 1rem;
  color: var(--text-muted);
}

/* Header card */
.kg-header-card {
  border-radius: var(--radius-m);
}

.kg-header-card h2.kg-header-card-header {
  font-family: var(--font-display);
}

/* Product / NFT / file / audio cards inherit Ghost card_assets styling;
   these overrides only re-point the borders and radii to brand values. */
.kg-product-card-container,
.kg-nft-card a.kg-nft-card-container,
.kg-file-card-container,
.kg-audio-card {
  border-color: var(--stroke);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
}

/* --- 19. Syntax highlighting (Prism, Injective palette) ------------------ */

/* Code sits on a dark surface in BOTH schemes, so one token palette serves
   light and dark alike. Every colour is a styleguide value, and every one
   clears 4.5:1 against the lighter of the two code backgrounds (Midnight 900).

   Role            Colour              Token
   keyword         Sky 300  #C2D3FF    func, return, if, pragma
   function        Sky 400  #AAC2FF    call sites and declarations
   type/builtin    Coral    #FFA36E    error, uint256, struct names
   string          Lime     #CEFFC8    string and char literals
   number/bool     Lemon    #E8FF5F    numeric and boolean constants
   operator        Grey 300 #DBDDE1    = + -> :=
   punctuation     Grey 500 #A5ABB6    braces, parens, commas
   comment         Grey 600 #7E838C    italic                             */

.post-content pre[class*='language-'],
.post-content code[class*='language-'] {
  background: var(--bg-code);
  color: var(--text-code);
  font-family: var(--font-mono);
  text-shadow: none;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--inj-grey-600);
  font-style: italic;
}

.token.punctuation {
  color: var(--inj-grey-500);
}

.token.operator,
.token.entity,
.token.url {
  color: var(--inj-grey-300);
}

.token.keyword,
.token.atrule,
.token.rule,
.token.selector,
.token.important {
  color: var(--inj-sky-300);
  font-weight: 500;
}

.token.function,
.token.function-name,
.token.class-name,
.token.maybe-class-name {
  color: var(--inj-sky-400);
}

.token.builtin,
.token.tag,
.token.property,
.token.attr-name,
.token.variable,
.token.symbol,
.token.parameter {
  color: var(--inj-coral);
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.template-string {
  color: var(--inj-lime);
}

.token.number,
.token.boolean,
.token.constant,
.token.unit {
  color: var(--inj-lemon);
}

/* Diffs read by colour, so they get the semantic pair. */
.token.inserted,
.token.inserted-sign {
  color: var(--inj-lime);
}

.token.deleted,
.token.deleted-sign {
  color: var(--inj-coral);
}

.token.namespace {
  opacity: 0.7;
}

.token.bold {
  font-weight: 700;
}

.token.italic {
  font-style: italic;
}

/* Language label on the corner of a highlighted block. */
.code-wrap[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: var(--space-3);
  left: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inj-grey-600);
  pointer-events: none;
}

/* Make room for the label so it never collides with the first line. */
.code-wrap[data-lang] > pre {
  padding-top: var(--space-8);
}

/* --- 20. Reading progress ------------------------------------------------ */

.reading-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}

/* --- 21. Table of contents ----------------------------------------------- */

/* The TOC must never narrow the content column. It is taken out of flow and
   parked in the right-hand gutter, so prose, code and tables all keep the
   exact same --measure width whether a post has a TOC or not. It only
   appears once the gutter is genuinely wide enough to hold it. */

.post-toc {
  display: none;
}

.post-wrap {
  position: relative;
}

/* The rail only appears once both gutters can hold it, so the content column
   stays centred: --measure (1040) + 2 x (24 gap + 200 rail) = 1488.
   Below this the post is a single clean column and the TOC is not rendered.
   Content width is identical either way, which is the point.
   To get the rail on narrower screens, lower --measure. */
@media (min-width: 1500px) {
  .post-toc:not([hidden]) {
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% + var(--space-5));
    width: 200px;
    height: 100%;
  }

  .post-toc-inner {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    max-height: calc(100vh - var(--header-height) - var(--space-12));
    overflow-y: auto;
    padding-left: var(--space-5);
    border-left: 1px solid var(--stroke);
    scrollbar-width: thin;
  }

  .post-toc-title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--space-4);
  }

  .post-toc ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .post-toc a {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-muted);
    display: block;
  }

  .post-toc a:hover {
    color: var(--text);
  }

  .post-toc .toc-h3 {
    padding-left: var(--space-4);
  }

  .post-toc a.is-active {
    color: var(--accent);
  }
}

/* --- 22. Post footer ----------------------------------------------------- */

.post-footer {
  margin: var(--space-12) auto 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--stroke);
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.author-box {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
}

.author-box + .author-box {
  margin-top: var(--space-4);
}

.author-box-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-box-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
}

.author-box-name:hover {
  color: var(--accent);
}

.author-box-bio {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.author-box-links {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* --- 23. Read next ------------------------------------------------------- */

.read-next {
  margin-top: var(--space-17);
  padding-top: var(--space-10);
  border-top: 1px solid var(--stroke);
}

.read-next-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-6);
}

/* --- 24. Subscribe CTA --------------------------------------------------- */

.subscribe {
  margin-top: var(--space-17);
  padding: var(--space-10);
  border-radius: var(--radius-m);
  background: var(--inj-midnight-900);
  color: var(--inj-snow);
  text-align: center;
}

.subscribe-inner {
  max-width: 560px;
  margin-inline: auto;
}

.subscribe h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
  color: var(--inj-snow);
}

.subscribe p {
  color: var(--inj-sky-300);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-bottom: var(--space-6);
}

.subscribe-form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.subscribe-form input[type='email'] {
  flex: 1 1 260px;
  min-width: 0;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  border: 1px solid var(--inj-midnight-700);
  background: var(--inj-black);
  color: var(--inj-snow);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}

.subscribe-form input[type='email']::placeholder {
  color: var(--inj-grey-600);
}

.subscribe-form input[type='email']:focus-visible {
  outline-color: var(--inj-sky-400);
  border-color: var(--inj-sky-400);
}

.subscribe-message {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  min-height: 1em;
}

.subscribe-message .success { color: var(--inj-lime); }
.subscribe-message .error { color: var(--inj-coral); }

/* Ghost's members script adds .loading / .success / .error to the form. */
.subscribe-form .subscribe-message {
  flex: 1 1 100%;
}

.subscribe-form .message-success,
.subscribe-form .message-error { display: none; }
.subscribe-form.success .message-success { display: block; }
.subscribe-form.error .message-error { display: block; }
.subscribe-form.loading .btn-primary { opacity: 0.6; pointer-events: none; }
.subscribe-form.success input[type='email'] { opacity: 0.5; }

/* Inline icons inside buttons. */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-icon svg {
  width: 18px;
  height: 18px;
}

/* --- 25. Site footer ----------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--stroke);
  padding-block: var(--space-8);
  margin-top: auto;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
}

.site-footer a {
  color: var(--text-muted);
}

.site-footer a:hover {
  color: var(--text);
}

.site-footer-copyright {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- 26. Error page ------------------------------------------------------ */

.error-page {
  padding-block: var(--space-17);
  text-align: center;
}

.error-code {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 2rem + 6vw, 6rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.error-message {
  margin-block: var(--space-5) var(--space-8);
  font-size: 1.25rem;
  color: var(--text-muted);
}

/* --- 27. Print ----------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .subscribe,
  .read-next,
  .post-toc,
  .reading-progress {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .post-content > * {
    max-width: none;
  }

  .post-content a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  .post-content pre {
    background: #f4f4f4;
    color: #000;
    white-space: pre-wrap;
    border: 1px solid #ccc;
  }
}

/* --- 28. Paywall --------------------------------------------------------- */

.paywall {
  margin: var(--space-10) auto 0;
  padding: var(--space-8);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-m);
  background: var(--bg-raised);
  text-align: center;
  position: relative;
}

/* Fade the truncated content into the paywall. */
.paywall::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-14));
  height: var(--space-14);
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.paywall h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  margin-block: var(--space-3) var(--space-4);
}

.paywall-text {
  color: var(--text-muted);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.paywall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* --- 29. Code copy button ------------------------------------------------ */

/* main.js wraps every <pre> so the button can anchor to it. The wrapper
   inherits the width budget the <pre> itself would have had. */
.code-wrap {
  position: relative;
}

.post-content > .code-wrap {
  max-width: var(--measure);
  margin-inline: auto;
}

.code-copy {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px var(--space-3);
  border-radius: var(--radius-xs);
  border: 1px solid var(--inj-stroke-dark-active);
  background: var(--inj-surface-dark-active);
  color: var(--inj-grey-400);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.code-wrap:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

.code-copy:hover {
  color: var(--inj-snow);
  border-color: var(--inj-grey-600);
}

.code-copy.is-copied {
  color: var(--inj-lime);
  border-color: var(--inj-lime);
  opacity: 1;
}

/* Touch devices have no hover, so keep it visible. */
@media (hover: none) {
  .code-copy {
    opacity: 1;
  }
}

/* A page with its title and feature image hidden still needs breathing room
   below the sticky header. */
.page-bare {
  padding-top: var(--space-12);
}

.error-details {
  margin: var(--space-10) auto 0;
  text-align: left;
}

.error-details pre {
  margin-top: var(--space-4);
  background: var(--bg-code);
  color: var(--text-code);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: var(--space-4);
  border-radius: var(--radius-s);
  overflow-x: auto;
}

/* --- 30. Colour scheme toggle -------------------------------------------- */

/* Three states, cycling System -> Light -> Dark. The page starts on System,
   which means it follows the reader's OS preference until they choose
   otherwise. The choice persists in localStorage. */

.scheme-toggle svg {
  display: none;
}

html:not([data-scheme-pref]) .scheme-toggle .icon-system,
html[data-scheme-pref='system'] .scheme-toggle .icon-system,
html[data-scheme-pref='light'] .scheme-toggle .icon-sun,
html[data-scheme-pref='dark'] .scheme-toggle .icon-moon {
  display: block;
}

/* No JS means no toggle. The page still follows the OS preference. */
html.no-js .scheme-toggle {
  display: none;
}