/* ============================================================
   Intermountain Succession Capital
   Shared stylesheet
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper:        #f5f5f3;
  --paper-raised: #fbfbfa;
  --paper-sunk:   #ebebe8;
  --ink:          #16191c;
  --ink-soft:     #3e444a;
  --ink-muted:    #5e6469;
  --line:         #dcdcd7;
  --line-strong:  #c2c2bb;
  --accent:       #35485c;
  --accent-deep:  #253547;
  --accent-tint:  #e5e9ed;
  --focus:        #35485c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #101215;
    --paper-raised: #171a1e;
    --paper-sunk:   #0b0d0f;
    --ink:          #e9eaec;
    --ink-soft:     #b7bbc0;
    --ink-muted:    #878c92;
    --line:         #262a2f;
    --line-strong:  #383d43;
    --accent:       #93b0cc;
    --accent-deep:  #b3c8de;
    --accent-tint:  #1a2129;
    --focus:        #93b0cc;
  }
}

:root[data-theme="dark"] {
  --paper:        #101215;
  --paper-raised: #171a1e;
  --paper-sunk:   #0b0d0f;
  --ink:          #e9eaec;
  --ink-soft:     #b7bbc0;
  --ink-muted:    #878c92;
  --line:         #262a2f;
  --line-strong:  #383d43;
  --accent:       #93b0cc;
  --accent-deep:  #b3c8de;
  --accent-tint:  #1a2129;
  --focus:        #93b0cc;
}

:root[data-theme="light"] {
  --paper:        #f5f5f3;
  --paper-raised: #fbfbfa;
  --paper-sunk:   #ebebe8;
  --ink:          #16191c;
  --ink-soft:     #3e444a;
  --ink-muted:    #5e6469;
  --line:         #dcdcd7;
  --line-strong:  #c2c2bb;
  --accent:       #35485c;
  --accent-deep:  #253547;
  --accent-tint:  #e5e9ed;
  --focus:        #35485c;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

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

/* ---------- Base ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--ink);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-deep); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent-tint); color: var(--ink); }

/* ---------- Layout primitives ---------- */
.u-wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 1.75rem; }
.u-measure { max-width: 62ch; }
.u-measure-wide { max-width: 74ch; }

.u-section { padding-block: 5.5rem; }
.u-section--tight { padding-block: 3.5rem; }
.u-section--sunk { background: var(--paper-sunk); }
.u-section + .u-section { border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .u-section { padding-block: 3.5rem; }
  .u-section--tight { padding-block: 2.5rem; }
}

.u-stack { display: flex; flex-direction: column; }
.u-stack--sm { gap: .7rem; }
.u-stack--md { gap: 1.15rem; }
.u-stack--lg { gap: 2rem; }

/* ---------- Type roles ---------- */
.u-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.u-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.u-label--plain::after { display: none; }

.u-h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); }
.u-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.u-h3 { font-size: 1.14rem; line-height: 1.32; }

.u-lede { font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.6; color: var(--ink-soft); }
.u-body { color: var(--ink-soft); }
.u-small { font-size: .9rem; color: var(--ink-muted); }

.u-prose { color: var(--ink-soft); }
.u-prose p + p { margin-top: 1.1rem; }
.u-prose strong { color: var(--ink); font-weight: 600; }

.u-num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.45rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--paper-raised);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.u-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper-raised); }
.u-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.u-btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.u-btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1080px;
  margin-inline: auto;
  padding: 1rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1;
}
.wordmark:hover { color: var(--ink); }

/* The header sets the firm name as type, so it should read as the same mark the
   footer artwork carries. The logo is set in Montserrat, so this is too: same
   face, light, all caps, widely tracked. Caps plus that much tracking run wide,
   so the size drops to keep the header on one line beside the nav. */
.wordmark__full {
  white-space: nowrap;
  font-family: "Montserrat", "Public Sans", system-ui, sans-serif;
  /* The logo is set in Montserrat Light, but Light at 11px puts every stem under
     a pixel and antialiasing renders it grey — beside the artwork it looked
     washed out. 500 restores the density the logo has at its own size. */
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  /* Tracking adds space after the final letter too; pull it back so the gap to
     the nav matches what the eye sees on the left. */
  margin-right: -.19em;
}
/* On a narrow laptop the name and the five nav links compete for the same row.
   Trim the wordmark first (and the nav gap with it, further down); below 990px
   drop the name altogether and let the mark carry the header alone. Both
   thresholds are measured against Montserrat, which sets wider here than any
   fallback, so a slow or blocked webfont cannot push the nav off the edge. */
@media (max-width: 1080px) {
  .wordmark__full { font-size: .64rem; letter-spacing: .15em; margin-right: -.15em; }
}
@media (max-width: 990px) {
  .wordmark__full { display: none; }
}

/* Two supplied artworks: black line art for light grounds, white for dark.
   Both are in the markup and CSS shows the right one, so the swap follows the
   OS preference and an explicit data-theme equally. */
.logo--light { display: none; }
.logo--dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo--light { display: block; }
  :root:not([data-theme="light"]) .logo--dark  { display: none; }
}
:root[data-theme="dark"] .logo--light { display: block; }
:root[data-theme="dark"] .logo--dark  { display: none; }
:root[data-theme="light"] .logo--light { display: none; }
:root[data-theme="light"] .logo--dark  { display: block; }

/* Header: the mark only. The stacked wordmark sets three lines of type that
   would land at roughly 7px here, so the site's own typography carries the name. */
.logo-mark { height: 33px; width: auto; }
@media (max-width: 520px) { .logo-mark { height: 28px; } }

/* Footer: the full lockup, where there is room for it to read. */
.logo-full { height: 74px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav a {
  font-size: .88rem;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 140ms ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
/* Must sit after the rule above, not with the wordmark block, or source order
   hands the win back to the 1.75rem default. Buys back about 26px across the
   four gaps, which keeps the firm name in the header on narrow laptops. */
@media (max-width: 1080px) { .site-nav { gap: 1.35rem; } }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
}
@media (max-width: 900px) {
  .wordmark__full { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: .5rem 1.75rem 1.25rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding-block: .85rem; border-bottom: 1px solid var(--line); }
}

/* ---------- Hero ---------- */
.hero { padding-block: 5.5rem 4.5rem; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .hero { padding-block: 3rem 2.75rem; } }

/* A page title and the paragraph that answers it are one thought, but the hero's
   bottom padding and the next section's top padding stacked to about 160px —
   enough that the opening line read as a separate, missing section. Close it up,
   and drop the rule with it: at this distance a full-width line divides a heading
   from its own first sentence. Podcast is deliberately excluded — the sunk
   section that follows its hero carries a background and needs the room. */
.hero:not(.hero--feature):has(+ .u-section:not(.u-section--sunk)) {
  padding-block-end: 2rem;
  border-bottom: 0;
}
.hero:not(.hero--feature) + .u-section:not(.u-section--sunk) { padding-block-start: 1.5rem; }
/* On these pages nothing follows the title inside the hero, so its trailing
   margin is 24px of dead space on top of the padding either side of it. */
.hero__title:last-child { margin-bottom: 0; }

/* ---------- Feature hero (home): mountain footage ---------- */
.hero--feature {
  position: relative;
  overflow: hidden;
  padding-block: 7rem 8rem;
  min-block-size: min(72vh, 620px);
  display: flex;
  align-items: center;
}
@media (max-width: 760px) {
  .hero--feature { padding-block: 3.5rem 4.5rem; min-block-size: 0; }
}
.hero--feature > .u-wrap { position: relative; z-index: 1; }

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Poster underneath: what shows before the video loads, on small screens, on
   save-data, and for anyone who prefers reduced motion. Brightness is lifted
   because the copy over it is dark ink. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("media/mountains-poster.jpg") center 42% / cover no-repeat;
  filter: saturate(.62) contrast(1.02) brightness(1.16);
}
.hero__media video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 700ms ease;
  filter: saturate(.62) contrast(1.02) brightness(1.16);
}
.hero__media video.is-ready { opacity: 1; }

/* Scrim weighted left so the copy stays legible while the valley and the right
   hand peaks remain visible. These stops were set by measuring text contrast
   against sampled frames, not by eye. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 95%, transparent) 48%,
      color-mix(in srgb, var(--paper) 56%, transparent) 74%,
      color-mix(in srgb, var(--paper) 20%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--paper) 60%, transparent) 0%,
      color-mix(in srgb, var(--paper) 10%, transparent) 28%,
      color-mix(in srgb, var(--paper) 10%, transparent) 68%,
      var(--paper) 100%);
}
@media (max-width: 860px) {
  /* Copy runs full width here, so protect it from above rather than the side. */
  .hero__media::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--paper) 95%, transparent) 0%,
      color-mix(in srgb, var(--paper) 86%, transparent) 36%,
      color-mix(in srgb, var(--paper) 30%, transparent) 68%,
      var(--paper) 100%);
  }
}
.hero__kicker {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.35rem;
}
.hero__title { margin-bottom: 1.5rem; }
.hero__sub { margin-bottom: 1rem; }
/* Whichever paragraph is last carries the gap to the buttons, so the spacing
   holds whether the hero has one paragraph or several. */
.hero__sub:last-of-type { margin-bottom: 2.2rem; }
/* The feed URL sits under the platform buttons as a quieter alternative to them,
   so it wants less air than the gap above the buttons themselves. */
.hero__feed { margin-top: 1.4rem; }

/* ---------- Two-column split ---------- */
.cols { display: grid; gap: 2.5rem 3.5rem; }
.cols--split { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.cols--even { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 880px) {
  .cols--split, .cols--even { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
}

/* ---------- Characteristic list (the screen) ---------- */
.traits { display: flex; flex-direction: column; gap: .9rem; max-width: 62ch; }
.traits li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
}
.traits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Sector list (typographic, not cards) ---------- */
.sectors { border-top: 1px solid var(--line-strong); margin-top: 2.5rem; }
.sector {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: .6rem 3rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.sector h3 { font-size: 1.1rem; }
.sector p { color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 760px) {
  .sector { grid-template-columns: minmax(0,1fr); gap: .4rem; padding-block: 1.25rem; }
}

/* ---------- Criteria table ---------- */
.criteria { border-top: 1px solid var(--line); }
.criteria__row {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  gap: .4rem 1.75rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.criteria__key {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.criteria__val { color: var(--ink); }
@media (max-width: 620px) {
  .criteria__row { grid-template-columns: minmax(0,1fr); padding-block: .9rem; }
}

/* ---------- Concepts (deliberately not a matched grid) ---------- */
.concepts { display: flex; flex-direction: column; gap: 2.25rem; }
.concept { display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,1.5fr); gap: .5rem 3rem; }
.concept h3 { font-size: 1.12rem; }
.concept p { color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 760px) {
  .concept { grid-template-columns: minmax(0,1fr); gap: .35rem; }
}

/* ---------- Avoid list ---------- */
.avoid { display: flex; flex-direction: column; gap: .8rem; max-width: 62ch; }
.avoid li { color: var(--ink-soft); padding-left: 1.5rem; position: relative; }
.avoid li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 1px;
  background: var(--line-strong);
}

/* ---------- Pull quote ---------- */
.pull {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.22rem, 2.2vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 1.4rem;
  margin-block: 1.6rem;
}

/* ---------- Bio ---------- */
/* Source artwork is 400px square, so the display size is capped rather than
   stretched to the column — an upscaled headshot looks worse than a small one. */
.bio-portrait {
  display: block;
  inline-size: 100%;
  max-inline-size: 320px;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 30%;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* ---------- Advisors (structure only; not published yet) ---------- */
.advisor { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-strong); }
.advisor__role { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.advisor__name { font-family: "Newsreader", Georgia, serif; font-size: 1.12rem; }
.advisor p { font-size: .94rem; color: var(--ink-soft); }

/* ---------- Podcast ---------- */
.featured { display: grid; grid-template-columns: minmax(0,240px) minmax(0,1fr); gap: 2.25rem; align-items: start; }
@media (max-width: 760px) { .featured { grid-template-columns: minmax(0,1fr); gap: 1.4rem; } }
.featured__artlink { display: block; }
.featured__art, .featured__art--empty {
  width: 100%; aspect-ratio: 1; height: auto;
  border-radius: 2px; border: 1px solid var(--line);
  background: var(--paper-sunk); object-fit: cover;
}
.featured__body { display: flex; flex-direction: column; gap: .85rem; }
.featured__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.featured__title a { color: var(--ink); text-decoration: none; }
.featured__title a:hover { color: var(--accent); text-decoration: underline; }
.featured__blurb { color: var(--ink-soft); max-width: 60ch; }
.featured__player { width: 100%; max-width: 34rem; }

.episodes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2.25rem 2rem; }
@media (max-width: 900px) { .episodes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .episodes { grid-template-columns: minmax(0,1fr); gap: 1.75rem; } }
.episode { display: flex; flex-direction: column; gap: .8rem; }
.episode__artlink { display: block; }
.episode__art, .episode__art--empty {
  width: 100%; aspect-ratio: 1; height: auto;
  border-radius: 2px; border: 1px solid var(--line);
  background: var(--paper-sunk); object-fit: cover;
  transition: opacity 140ms ease;
}
.episode__artlink:hover .episode__art { opacity: .88; }
.episode__body { display: flex; flex-direction: column; gap: .4rem; }
.episode__meta {
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.episode__title { font-size: 1.05rem; line-height: 1.32; }
.episode__title a { color: var(--ink); text-decoration: none; }
.episode__title a:hover { color: var(--accent); text-decoration: underline; }
.episode__blurb { font-size: .92rem; color: var(--ink-soft); }

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label {
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted);
}
.field input, .field textarea {
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: .72rem .85rem;
  color: var(--ink);
  font-size: .98rem;
}
.field textarea { resize: vertical; min-height: 8rem; }
.form .u-btn { align-self: flex-start; }
.form .u-btn:disabled { opacity: .6; cursor: default; }

.form-status {
  font-size: .93rem;
  padding: .7rem .9rem;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--ink-soft);
}
.form-status.is-ok  { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }
.form-status.is-bad { border-color: #b4453c; color: var(--ink); background: color-mix(in srgb, #b4453c 12%, var(--paper-raised)); }

.contact-list { display: flex; flex-direction: column; gap: .5rem; }
/* The email address is one unbreakable string and is wider than a phone column
   at 375px, so let it wrap rather than push the page sideways. */
.contact-list a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--accent); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .12em .4em;
  word-break: break-all;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--paper-sunk); padding-block: 3rem 2.25rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: minmax(0,1fr); gap: 1.75rem; } }
.site-footer h4 {
  font-family: "Public Sans", sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: .9rem;
}
.site-footer ul { display: flex; flex-direction: column; gap: .6rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--accent); }
.site-footer__base {
  padding-top: 1.75rem;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  font-size: .84rem; color: var(--ink-muted);
}

/* ---------- Build-time placeholder marker ---------- */
.todo {
  display: inline-block;
  font-family: "Public Sans", sans-serif;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a5a12; background: #fbf0da; border: 1px solid #e3c489;
  border-radius: 2px; padding: .1rem .4rem;
  margin-left: .5rem; vertical-align: .15em; white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .todo { color: #f0c67d; background: #2e2413; border-color: #574325; }
}
:root[data-theme="dark"] .todo { color: #f0c67d; background: #2e2413; border-color: #574325; }