/* ==========================================================================
   DescriptorHub
   Glassmorphism on an aurora field. Light by default, dark when the reader
   asks for it. No framework: the whole file is smaller than a Tailwind build
   and first paint is a ranking factor.
   ========================================================================== */

:root {
  color-scheme: light;

  /* base field */
  --bg:            #eef1fa;
  --bg-2:          #e3e8f7;

  /* glass surfaces */
  --glass:         rgba(255, 255, 255, 0.58);
  --glass-strong:  rgba(255, 255, 255, 0.74);
  --glass-hover:   rgba(255, 255, 255, 0.86);
  --stroke:        rgba(15, 23, 42, 0.1);
  --stroke-strong: rgba(15, 23, 42, 0.18);
  --blur:          18px;

  /* type */
  --text:          #131a30;
  --text-soft:     #47526e;
  --text-faint:    #6b7691;

  /* accents */
  --accent:        #4f46e5;
  --accent-2:      #0891b2;
  --accent-3:      #db2777;
  --accent-ink:    #ffffff;

  --ok:            #16a34a;
  --warn:          #b45309;
  --danger:        #dc2626;

  --radius:        20px;
  --radius-sm:     12px;
  --radius-lg:     28px;

  --shadow:        0 18px 44px -20px rgba(28, 40, 80, 0.35);
  --shadow-lift:   0 30px 64px -24px rgba(28, 40, 80, 0.42);

  --shell:         1180px;
  --shell-wide:    1440px;   /* header: the nav needs more room than prose */
  --reading:       740px;

  --font-sans:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Dark is opt in, chosen with the header toggle. The system preference is
   deliberately not consulted: the site has a light identity, and a reader who
   wants dark asks for it once and the choice is remembered. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #070a16;
  --bg-2:          #0c1124;

  --glass:         rgba(255, 255, 255, 0.055);
  --glass-strong:  rgba(255, 255, 255, 0.085);
  --glass-hover:   rgba(255, 255, 255, 0.11);
  --stroke:        rgba(255, 255, 255, 0.12);
  --stroke-strong: rgba(255, 255, 255, 0.2);

  --text:          #eef1f8;
  --text-soft:     #b3bdd4;
  --text-faint:    #7e8aa6;

  --accent:        #7c8cff;
  --accent-2:      #22d3ee;
  --accent-3:      #f472b6;
  --accent-ink:    #0a0e1c;

  --ok:            #34d399;
  --warn:          #fbbf24;
  --danger:        #fb7185;

  --shadow:        0 18px 50px -18px rgba(0, 0, 0, 0.65);
  --shadow-lift:   0 30px 70px -22px rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.02em; }

p { margin: 0 0 1em; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.sr-only {
  position: absolute; 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; left: -9999px; top: 12px; z-index: 200;
  padding: 10px 18px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.skip-link:focus { left: 16px; }

/* ------------------------------------------------------------- aurora */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-2) 0%, var(--bg) 60%),
    var(--bg);
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.3;            /* light ground; the dark theme lifts this */
  will-change: transform;
}

.blob-a {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  top: -12vw; left: -8vw;
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.blob-b {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  top: 12vh; right: -10vw;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 68%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.blob-c {
  width: 38vw; height: 38vw; min-width: 280px; min-height: 280px;
  bottom: -14vw; left: 24vw;
  background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%);
  opacity: 0.34;
  animation: drift-c 38s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(7vw, 5vh, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-6vw, 8vh, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(5vw, -7vh, 0) scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------- glass */

.glass {
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* A hairline of light along the top edge sells the glass. */
.glass-sheen { position: relative; overflow: hidden; }
.glass-sheen::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  opacity: 0;              /* a white sheen only reads on a dark surface */
}

/* Attribute selectors outrank the base rules above regardless of order. */
:root[data-theme="dark"] .glass-sheen::before { opacity: 0.6; }
:root[data-theme="dark"] .blob { opacity: 0.5; }
:root[data-theme="dark"] .blob-c { opacity: 0.34; }

.shell {
  width: min(100% - 32px, var(--shell));
  margin-inline: auto;
}

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  padding: 14px 0;
}

/* The header carries more than the reading column can hold. */
.site-header .shell,
.mobile-nav { width: min(100% - 32px, var(--shell-wide)); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 10px 14px 10px 16px;
  border-radius: 999px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px -6px var(--accent);
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand-accent { color: var(--accent-2); }

.site-nav {
  display: flex;
  gap: 4px;
  min-width: 0;
  margin-inline: auto;
  font-size: 14.5px;
  font-weight: 500;
}
/* Safety net: if the links ever exceed the space, clip them rather than let
   them paint underneath the search field and buttons. */
.site-nav { overflow: hidden; }

.site-nav a {
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--text-soft);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.site-nav a:hover { background: var(--glass-hover); color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.search-mini {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
}
.search-mini input {
  width: 118px;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 14px; outline: none;
}
.search-mini input::placeholder { color: var(--text-faint); }
.search-mini button {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  cursor: pointer;
  transition: transform .18s ease;
}
.search-mini button:hover { transform: scale(1.08); }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 38px; padding: 0 10px;
  border: 1px solid var(--stroke); border-radius: 12px;
  background: var(--glass-strong); cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  width: min(100% - 32px, var(--shell));
  margin: 10px auto 0;
  padding: 10px;
}
.mobile-nav a {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-soft); font-weight: 500;
}
.mobile-nav a:hover { background: var(--glass-hover); color: var(--text); }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-sm { padding: 8px 16px; font-size: 14px; }

.btn-primary {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px -10px var(--accent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--accent); }

.btn-ghost {
  color: var(--text);
  background: var(--glass-strong);
  border-color: var(--stroke);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--glass-hover); border-color: var(--stroke-strong); }

/* ------------------------------------------------------------ messages */

.messages { margin-top: 18px; display: grid; gap: 10px; }
.alert { padding: 14px 18px; font-size: 15px; border-radius: var(--radius-sm); }
.alert-success { border-left: 3px solid var(--ok); }
.alert-info    { border-left: 3px solid var(--accent-2); }
.alert-error   { border-left: 3px solid var(--danger); }
.alert-warning { border-left: 3px solid var(--warn); }

/* --------------------------------------------------------------- hero */

.hero { padding: 64px 0 32px; }
.hero-inner { max-width: 720px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  font-size: 13px; font-weight: 500; color: var(--text-soft);
  backdrop-filter: blur(10px);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero p { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--text-soft); max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* -------------------------------------------------------- section head */

.section {
  padding: 40px 0;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
}
.section-head p { color: var(--text-soft); margin: 6px 0 0; font-size: 15px; }
.section-link { color: var(--accent-2); font-weight: 600; font-size: 14.5px; }
.section-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------ featured */

.featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-lg);
}
.featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 14px;
}
.featured-body h2 a:hover { color: var(--accent-2); }
.featured-body p { color: var(--text-soft); font-size: 16.5px; }

.featured-visual {
  position: relative;
  min-height: 300px;
  background:
    radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(80% 70% at 80% 80%, color-mix(in srgb, var(--accent-3) 45%, transparent), transparent 70%),
    var(--glass-strong);
  border-left: 1px solid var(--stroke);
}
.featured-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.featured-visual .glyph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: -0.05em;
}

/* --------------------------------------------------------------- grid */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.card {
  display: flex; flex-direction: column;
  padding: 24px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  background: var(--glass-hover);
  border-color: var(--stroke-strong);
  box-shadow: var(--shadow-lift);
}

.card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 12.5px; color: var(--text-faint);
}

.pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  transition: background .18s ease;
}
.pill:hover { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.pill-muted {
  background: var(--glass-strong);
  border-color: var(--stroke);
  color: var(--text-soft);
  font-weight: 500;
}

.card h3 {
  font-size: 1.16rem;
  line-height: 1.32;
  margin-bottom: 10px;
}
.card h3 a { transition: color .18s ease; }
.card:hover h3 a { color: var(--accent-2); }

.card p { color: var(--text-soft); font-size: 14.6px; margin-bottom: 18px; }

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--stroke);
  font-size: 13px; color: var(--text-faint);
}
.read-more { color: var(--accent-2); font-weight: 600; }
.card:hover .read-more { text-decoration: underline; }

/* ------------------------------------------------------------- article */

.article-head { padding: 44px 0 26px; }
.article-head .shell { max-width: var(--reading); }

.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-bottom: 18px;
  font-size: 13px; color: var(--text-faint);
}
.breadcrumbs a:hover { color: var(--accent-2); }
.breadcrumbs .sep { opacity: .5; }

.article-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.05rem);
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

.article-standfirst { font-size: 1.14rem; color: var(--text-soft); margin-bottom: 24px; }

.byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px;
  font-size: 13.6px; color: var(--text-soft);
}
.byline .avatar {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: var(--accent-ink); font-weight: 700; font-size: 14px;
}
.byline .sep { opacity: .4; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--reading)) 260px;
  gap: 40px;
  justify-content: center;
  padding-bottom: 60px;
}

.takeaways { padding: 22px 26px; margin-bottom: 30px; }
.takeaways h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-2); margin-bottom: 12px; }
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { margin-bottom: 8px; color: var(--text-soft); }

/* ---- prose ---- */

.prose { font-size: 17.2px; line-height: 1.78; color: var(--text-soft); }
.prose > :first-child { margin-top: 0; }

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.62rem;
  color: var(--text);
  margin: 2.1em 0 .6em;
  scroll-margin-top: 90px;
}
.prose h3 {
  font-size: 1.24rem;
  color: var(--text);
  margin: 1.7em 0 .5em;
  scroll-margin-top: 90px;
}
.prose h4 { font-size: 1.06rem; color: var(--text); margin: 1.5em 0 .4em; }

.prose p { margin: 0 0 1.25em; }
.prose strong { color: var(--text); font-weight: 600; }

.prose a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.prose a:hover { text-decoration-color: var(--accent-2); }

.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--accent); }

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 1.06em;
  font-style: italic;
}

.prose code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .89em;
  color: var(--text);
}
.prose pre {
  margin: 1.5em 0;
  padding: 18px 20px;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--stroke);
}
.prose pre code { padding: 0; border: 0; background: none; }

.prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 15.2px;
}
.prose table :is(th, td) {
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke);
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  color: var(--text);
  font-weight: 600;
  background: var(--glass-strong);
  border-bottom-color: var(--stroke-strong);
}
.prose tbody tr:hover { background: var(--glass); }

/* Tables and code must be the only things allowed to scroll sideways. */
.table-scroll { overflow-x: auto; }

.prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--stroke); }

.prose img { border-radius: var(--radius-sm); margin: 1.6em 0; }

/* The generator appends a Sources section; make it read as an apparatus. */
.prose h2#sources ~ ol { font-size: 14.6px; }

/* ---- FAQ ---- */

.faq { margin-top: 48px; }
.faq h2 { font-family: var(--font-display); font-size: 1.62rem; margin-bottom: 18px; }
.faq details {
  padding: 4px 22px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
}
.faq summary {
  padding: 16px 0;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px; font-weight: 400; color: var(--accent-2);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; margin: 0; color: var(--text-soft); }

/* ---- sidebar ---- */

.article-side { position: sticky; top: 92px; align-self: start; display: grid; gap: 20px; }
.side-card { padding: 20px 22px; }
.side-card h2 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); margin-bottom: 14px;
}
.side-card ol { margin: 0; padding-left: 18px; font-size: 14px; }
.side-card ol li { margin-bottom: 9px; }
.side-card ol a { color: var(--text-soft); }
.side-card ol a:hover { color: var(--accent-2); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- related ---- */

.related { padding: 50px 0 70px; border-top: 1px solid var(--stroke); }

/* ------------------------------------------------------------- listing */

.page-head { padding: 52px 0 10px; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  margin-bottom: 12px;
}
.page-head p { color: var(--text-soft); max-width: 62ch; font-size: 1.04rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.empty {
  padding: 56px 32px;
  text-align: center;
  color: var(--text-soft);
}
.empty h2 { font-family: var(--font-display); color: var(--text); margin-bottom: 10px; }

/* ---------------------------------------------------------- pagination */

.pagination {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  margin: 46px 0 10px;
}
.pagination a, .pagination span {
  min-width: 42px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 14.4px; font-weight: 500;
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  color: var(--text-soft);
  transition: background .18s ease, color .18s ease;
}
.pagination a:hover { background: var(--glass-hover); color: var(--text); }
.pagination .current {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 700;
}
.pagination .gap { background: none; border: 0; color: var(--text-faint); }

/* --------------------------------------------------------------- forms */

.form-panel { padding: 34px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.field .help { font-size: 13px; color: var(--text-faint); margin-top: 6px; }
.field .errorlist {
  margin: 8px 0 0; padding: 0; list-style: none;
  font-size: 13.4px; color: var(--danger);
}

.field :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea, select) {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit; font-size: 15.2px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field :is(input, textarea)::placeholder { color: var(--text-faint); }
.field textarea { resize: vertical; min-height: 96px; }
.field select option { background: var(--bg-2); color: var(--text); }

/* The honeypot must be unreachable for people but present for bots. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------- stats */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat { padding: 20px 22px; }
.stat .n {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 700; color: var(--text);
  line-height: 1.1;
}
.stat .l { font-size: 13px; color: var(--text-faint); margin-top: 4px; }

/* -------------------------------------------------------------- footer */

.site-footer { padding: 30px 0 26px; margin-top: 30px; }

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
  padding: 38px 40px;
}
.footer-brand strong { font-family: var(--font-display); font-size: 1.3rem; }
.footer-brand p { color: var(--text-soft); font-size: 14.4px; margin-top: 10px; max-width: 34ch; }

.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-faint); margin: 0 0 4px;
}
.footer-col a { color: var(--text-soft); font-size: 14.4px; }
.footer-col a:hover { color: var(--accent-2); }

.copyright {
  width: min(100% - 32px, var(--shell));
  margin: 22px auto 0;
  text-align: center;
  font-size: 13px; color: var(--text-faint);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-side { position: static; grid-row: 3; }
  .featured { grid-template-columns: 1fr; }
  .featured-visual { min-height: 200px; border-left: 0; border-top: 1px solid var(--stroke); grid-row: 1; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* The header degrades in stages. With six categories plus "All articles" the
   nav outgrows the bar well above the old single 860px breakpoint, and the
   search field and call to action were being pushed off the right edge. Drop
   the least important element at each step instead. */

/* Five category links plus the brand, search, theme toggle and call to action
   need roughly 1330px. Below that the nav folds into the menu button, which
   also carries the search field, rather than being squeezed until it overlaps. */

/* Just above the collapse point the links sit close to the edge, so tighten
   them first and keep a comfortable margin rather than trusting a few pixels. */
@media (max-width: 1560px) {
  .site-nav { gap: 2px; font-size: 13.6px; }
  .site-nav a { padding: 8px 10px; }
  .search-mini input { width: 96px; }
}

@media (max-width: 1400px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav[data-open="true"] { display: flex; }
  .header-inner { border-radius: var(--radius); }
  /* Push the actions right, so the menu button sits at the far edge. */
  .header-actions { margin-inline-start: auto; }
}

@media (max-width: 720px) {
  .search-mini { display: none; }
}

@media (max-width: 860px) {
  .hero { padding: 44px 0 24px; }
  .featured-body { padding: 28px; }
  .form-panel { padding: 24px; }
}

@media (max-width: 560px) {
  .header-actions .btn { display: none; }
  .footer-inner { grid-template-columns: 1fr; padding: 28px 24px; }
  .card-grid { grid-template-columns: 1fr; }
  .prose { font-size: 16.6px; }
}

/* Backdrop-filter is unsupported on some older browsers; without a fallback
   the glass panels render as near-invisible washes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, 0.93); --glass-strong: #fff; }
  :root[data-theme="dark"] { --glass: rgba(16, 22, 44, 0.86); --glass-strong: rgba(16, 22, 44, 0.93); }
}

@media print {
  .aurora, .site-header, .site-footer, .article-side, .related { display: none; }
  body { background: #fff; color: #000; }
  .glass { background: none; border: 0; box-shadow: none; }
}

/* Heading anchors, added by site.js. Invisible until the heading is hovered. */
.heading-anchor {
  margin-left: .4em;
  color: var(--accent);
  opacity: 0;
  font-weight: 400;
  text-decoration: none;
  transition: opacity .15s ease;
}
.prose :is(h2, h3):hover .heading-anchor,
.heading-anchor:focus-visible { opacity: .75; }

.hero-img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  margin-bottom: 30px;
}

/* ------------------------------------------------------- theme toggle */

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-soft);
  cursor: pointer;
  overflow: hidden;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover {
  background: var(--glass-hover);
  border-color: var(--stroke-strong);
  color: var(--text);
  transform: rotate(18deg);
}

/* Both icons are stacked; only the one for the *target* theme is shown, so the
   button always advertises what it will do rather than what is on screen. */
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 18px; height: 18px;
  transition: opacity .25s ease, transform .35s ease;
}
.theme-toggle .icon-moon { opacity: 1;  transform: rotate(0) scale(1); }
.theme-toggle .icon-sun  { opacity: 0;  transform: rotate(90deg) scale(.4); }

:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0) scale(1); }

/* The toggle lives in the mobile menu too, as a full-width row. */
.mobile-nav .theme-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 12px;
}
.mobile-nav .theme-row span { color: var(--text-soft); font-weight: 500; }

/* ---- circular reveal ----
   The new theme is clipped to a circle grown from the button. Without these
   resets the browser cross-fades the two snapshots and the circle is invisible
   underneath. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .theme-toggle:hover { transform: none; }
  .theme-toggle svg { transition: none; }
}