/* ==========================================================================
   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;    /* the text column */
  --aside:         260px;    /* the article sidebar */
  --gutter:        40px;
  /* Reading column + sidebar + gutter. Every band of an article page uses
     this, so the header, body, related posts and footer share one left edge. */
  --article-shell: calc(var(--reading) + var(--aside) + var(--gutter));

  --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,
.article-layout,
.related .shell {
  width: min(100% - 32px, var(--article-shell));
  margin-inline: auto;
}

/* Cap the prose, not the container: capping the container moved the whole
   header inward and broke alignment with the body below it. */
.article-head .breadcrumbs,
.article-head .article-title,
.article-head .article-standfirst,
.article-head .byline { 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;
  /* 1fr rather than a fixed reading width: the container already constrains it,
     and this keeps the column fluid between breakpoints. */
  grid-template-columns: minmax(0, 1fr) var(--aside);
  gap: var(--gutter);
  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; }
}

/* --------------------------------------------------------- error pages */

.error-panel {
  padding: 48px 44px;
  text-align: center;
}
.error-panel h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin-bottom: 14px;
}
.error-panel p {
  color: var(--text-soft);
  max-width: 48ch;
  margin-inline: auto;
  font-size: 1.04rem;
}
.error-panel .hero-actions { justify-content: center; }

.error-code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 10px;
  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;
}

.error-search {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 26px auto 22px;
}
.error-search input {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  color: var(--text);
  font: inherit;
}
.error-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 560px) {
  .error-panel { padding: 34px 24px; }
  .error-search { flex-direction: column; }
}

/* ---------------------------------------------------- card thumbnails */

/* Only cards that actually carry a thumbnail lose their padding; the category
   tiles on the homepage reuse .card without one and keep theirs. */
.card:has(.card-media) { padding: 0; }

.card-media {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 30% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(70% 70% at 80% 85%, color-mix(in srgb, var(--accent-3) 38%, transparent), transparent 70%),
    var(--glass-strong);
  border-bottom: 1px solid var(--stroke);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.card:hover .card-media img { transform: scale(1.045); }

.card-media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--text) 22%, transparent);
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 20px 24px 24px;
}

@media (prefers-reduced-motion: reduce) {
  .card-media img, .card:hover .card-media img { transition: none; transform: none; }
}

@media (max-width: 560px) {
  .card-body { padding: 18px 20px 20px; }
}

/* ------------------------------------------------- focus reading mode */

.read-mode-toggle { gap: 7px; }
.read-mode-toggle .icon-exit { display: none; }

/* Everything that is not the article itself steps aside. The class goes on the
   root element so it applies whether or not the Fullscreen API was available. */
:root[data-reading="on"] .site-header,
:root[data-reading="on"] .site-footer,
:root[data-reading="on"] .article-side,
:root[data-reading="on"] .related,
:root[data-reading="on"] .breadcrumbs,
:root[data-reading="on"] .messages { display: none; }

:root[data-reading="on"] .article-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* A slightly wider measure and larger type, since nothing competes with it. */
:root[data-reading="on"] .article-head .shell,
:root[data-reading="on"] .article-layout {
  width: min(100% - 32px, 820px);
}
:root[data-reading="on"] .article-head .article-title,
:root[data-reading="on"] .article-head .article-standfirst,
:root[data-reading="on"] .article-head .byline { max-width: none; }

:root[data-reading="on"] .article-head { padding-top: 34px; }
:root[data-reading="on"] .prose { font-size: 18.4px; line-height: 1.82; }

:root[data-reading="on"] .read-mode-toggle .icon-enter { display: none; }
:root[data-reading="on"] .read-mode-toggle .icon-exit { display: inline; }

/* The aurora is decoration; keep it, but quieten it while reading. */
:root[data-reading="on"] .blob { opacity: 0.14; }

/* Real fullscreen paints the root element's own background, which is
   transparent by default, so set it explicitly or the page goes black. */
:root:fullscreen { background: var(--bg); overflow-y: auto; }
:root:fullscreen body { background: transparent; }

.read-mode-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-soft);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.read-mode-hint[data-visible="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .read-mode-hint { transition: none; }
}

/* ---------------------------------------------------------- mouse glow */

/* Sits above the aurora but below everything readable, so it lights the page
   without ever washing out text. */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  will-change: transform;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 12%, transparent) 42%,
    transparent 68%
  );
}
.cursor-glow[data-active="true"] { opacity: 1; }

:root[data-theme="dark"] .cursor-glow {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 16%, transparent) 42%,
    transparent 68%
  );
}

/* The glass panels catch the light too: a soft spotlight tracks the pointer
   across whichever card it is over. Kept low so body text stays legible. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent-2) 16%, transparent),
    transparent 62%
  );
}
.card:hover::after { opacity: 1; }

:root[data-theme="dark"] .card::after {
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent-2) 20%, transparent),
    transparent 62%
  );
}

/* Card content must sit above the spotlight layer. */
.card > * { position: relative; z-index: 1; }

/* No pointer to follow, or the reader asked for less movement. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
  .card::after { display: none; }
}

/* ------------------------------------------------------------- sharing */

.share {
  margin-top: 40px;
  padding: 22px 26px 24px;
}
.share-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.share-row { display: flex; flex-wrap: wrap; gap: 9px; }
.share-row:empty { display: none; }
.share-row-js:not(:empty) { margin-top: 9px; }

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--glass-strong);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.share-btn:hover {
  background: var(--glass-hover);
  border-color: var(--stroke-strong);
  color: var(--text);
  transform: translateY(-1px);
}
.share-btn svg { flex-shrink: 0; }

/* Each network keeps its own colour on hover so the row is scannable. */
.share-btn[data-network="x"]:hover        { color: #0f1419; border-color: #0f1419; }
.share-btn[data-network="linkedin"]:hover { color: #0a66c2; border-color: #0a66c2; }
.share-btn[data-network="facebook"]:hover { color: #1877f2; border-color: #1877f2; }
.share-btn[data-network="whatsapp"]:hover { color: #1da851; border-color: #1da851; }

:root[data-theme="dark"] .share-btn[data-network="x"]:hover { color: #e7e9ea; border-color: #e7e9ea; }

.share-btn[data-copied="true"] {
  color: var(--ok);
  border-color: var(--ok);
}

@media (max-width: 560px) {
  .share { padding: 18px 20px 20px; }
  .share-btn span { display: none; }
  .share-btn { padding: 10px 13px; }
  .share-btn[data-network="native"] span,
  .share-btn[data-network="copy"] span { display: inline; }
}

/* ---------------------------------------------------------- quick view */

.quick-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 500;
  transition: color .18s ease;
}
.quick-view:hover { color: var(--accent-2); }

.qv-dialog {
  width: min(100% - 32px, 680px);
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--shadow-lift);
  color: var(--text);
  overflow: hidden;
}
.qv-dialog::backdrop {
  background: rgba(8, 12, 28, 0.55);
  backdrop-filter: blur(4px);
}

/* Opening animation, skipped when the reader asked for less movement. */
.qv-dialog[open] { animation: qv-in .26s cubic-bezier(.2,.8,.3,1); }
@keyframes qv-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qv-dialog[open] { animation: none; }
}

.qv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--glass-strong);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.qv-close:hover { background: var(--glass-hover); transform: rotate(90deg); }

.qv-content { max-height: inherit; overflow-y: auto; }

.qv-media { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--stroke); }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }

.qv-body { padding: 24px 28px 28px; }
.qv-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin: 10px 0 12px;
}
.qv-standfirst { color: var(--text-soft); font-size: 15.5px; }

.qv-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  margin: 22px 0 10px;
}
.qv-sections { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: 14.6px; }
.qv-sections li { margin-bottom: 6px; }

.qv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--stroke);
}
.qv-facts dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.qv-facts dd { margin: 3px 0 0; font-weight: 600; font-size: 14.5px; }

.qv-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.qv-loading { padding: 40px; text-align: center; color: var(--text-soft); }

@media (max-width: 560px) {
  .qv-body { padding: 20px 20px 24px; }
  .quick-view span:not(.sr-only) { display: none; }
}

/* Four across on the homepage rows. auto-fill with a smaller minimum would
   give four only at some widths; this asks for four and lets them shrink. */
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) { .card-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .card-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Tighter type in a narrower card. */
.card-grid-4 .card h3 { font-size: 1.05rem; }
.card-grid-4 .card p { font-size: 14px; }
.card-grid-4 .card-body { padding: 16px 18px 18px; }

/* ------------------------------------------------- shorter cards */

/* The 3:2 thumbnail plus an unbounded excerpt made a tall card, and in a four
   column row the text wrapped to five or six lines. Shallower image, clamped
   text, tighter spacing. */

.card-media { aspect-ratio: 16 / 9; }

.card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.card-body > p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}

.card-meta { margin-bottom: 10px; row-gap: 4px; }
.card-foot { padding-top: 11px; }

/* Narrower columns get less room, so trim a line rather than let the row grow. */
.card-grid-4 .card-body > p {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.card-grid-4 .card-media { aspect-ratio: 16 / 10; }

/* The byline reads left to right as attribution then metadata; the control
   belongs at the far end rather than in the middle of that sentence. */
.read-mode-toggle { margin-left: auto; }

.byline-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.byline-views svg { opacity: .75; }

@media (max-width: 560px) {
  /* Wrapped onto its own line, auto margin would strand it mid-row. */
  .read-mode-toggle { margin-left: 0; }
}