:root{
  color-scheme: dark light;
  --bg:#0E1014; --text:#E6E7EB; --text-secondary:#B9BEC6;
  --ink:#14161A; --accent-amber:#FFBA55; --accent-silver:#CFD6DF;
  --border-subtle:rgba(255,255,255,.18); --card:rgba(255,255,255,.04);
  --focus:#EFB863; --link:#AFC6FF; --maxw:72ch;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#E9DCC4; --text:#14161A; --text-secondary:#3E3E3E;
    --border-subtle:rgba(182,163,128,0.45); --card:#F8F3E8; --link: #DCA137;}
    body{
    background-image:
      radial-gradient(circle at 20% 25%, rgba(255,255,255,0.25), transparent 60%),
      radial-gradient(circle at 80% 70%, rgba(240,220,190,0.25), transparent 70%);
    background-blend-mode: multiply;
  }
  a.anchor-link {
    opacity: 0.3;
    transition: opacity 0.2s;
  }
  a.anchor-link:hover {
    opacity: 0.8;
  }
}

/* Dark Mode — Night parchment */
@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
      radial-gradient(circle at 85% 75%, rgba(200, 170, 120, 0.08), transparent 70%);
    background-blend-mode: overlay;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--link)}
h1,h2,h3{font-family:"EB Garamond","Cormorant Garamond",ui-serif,Georgia,serif}
h1{font-size:2rem;margin:0 0 .5rem} h2{font-size:1.375rem;margin:2rem 0 .5rem}
h3{font-size:1.125rem;margin:1.25rem 0 .25rem} p{margin:.75rem 0}
.intro{color:var(--text-secondary)}
header{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;
  border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--bg);z-index:10}
header .brand{display:flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none;font-weight:600}
header nav{margin-left:auto;display:flex;gap:.9rem;flex-wrap:wrap}
header nav a{padding:.3rem .5rem;border-radius:.35rem;text-decoration:none;color:inherit;opacity:.8}
header nav a.active,header nav a:hover,header nav a:focus{opacity:1;background:var(--card);outline:none}
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--card);padding:.5rem;border-radius:.3rem}
main{width:min(1100px,100% - 2rem);margin:2rem auto;}
.hero{padding:2rem;border:1px solid var(--border-subtle);border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);}
.lead{font-size:1.125rem;color:var(--text-secondary)}
.cta,.secondary-cta{display:inline-block;margin-right:.5rem;padding:.6rem .9rem;border-radius:.5rem;text-decoration:none;border:1px solid var(--border-subtle)}
.cta{background:var(--card)} .cta:focus,.secondary-cta:focus{outline:3px solid var(--focus);outline-offset:2px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;list-style:none;padding:0;margin:1rem 0}
.cards li{padding:1rem;border:1px solid var(--border-subtle);border-radius:.8rem;background:var(--card)}
footer{margin:4rem auto 2rem;text-align:center;color:var(--text-secondary)}
.si-badge{font-size:.8rem;letter-spacing:.03em;color:var(--text-secondary);
  border:1px solid var(--border-subtle);border-radius:4px;padding:.15em .4em;
  background:rgba(255,255,255,.05);margin-left:.5rem;transition:background .3s}
.si-badge:hover,.si-badge:focus{background:rgba(255,255,255,.12)}
.page-toc ul{list-style:disc;padding-left:1.2rem}
.archive-list{list-style:none;padding:0}
.archive-list li{padding:.5rem 0;border-bottom:1px dashed var(--border-subtle)}
.note{color:var(--text-secondary);font-style:italic}
a,button,[role="button"],input,select,textarea:focus{outline:3px solid var(--focus);outline-offset:2px}


/* ── Clio Creed · Text hierarchy & rhythm (LIGHT) ───────────── */
@media (prefers-color-scheme: light) {
  :root { --cc-ink:#2E281F; }                /* warmer ink on parchment */

  /* 1) Hero title: a touch larger + relaxed tracking */
  .hero h1{
    font-size: clamp(2.4rem, 2.2vw + 1.6rem, 3.2rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
  }

  /* 2) Lead line under title */
  .hero .lead{ color: var(--cc-ink); line-height: 1.55; }

  /* 3) Section headers (your h2s) — quiet authority */
  main h2{
    font-variant-caps: small-caps;
    letter-spacing: 0.15em;
    font-weight: 600;
    line-height: 1.2;
    margin-block: 1.25rem 0.5rem;
  }

  /* 4) Tenet cards: titles ease; body breathes */
  .cards li h3{ font-weight: 600; line-height: 1.25; }
  .cards li p{ line-height: 1.6; color: var(--cc-ink); }

  /* 5) Global reading rhythm */
  body{ line-height: 1.6; }

  /* 6) Spacing polish */
  .section{ margin-block: clamp(1.75rem, 2.2vw, 2.5rem); }
  .cards{ gap: 1rem 1.25rem; }
  .cards li{ padding: 0.9rem 1rem; }   /* fixed: target items, not .cards */

  /* 7) Links: minimal motion, crisper underline */
  a{ text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
}