/* ============================================================================
   Pages - article body, case study detail, contact, wikipedia, awards,
   search, 404, legal (light surface), maintenance.
   ========================================================================= */

/* ---------------------------------------------------------------- reading progress */

.read-progress {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: calc(var(--z-header) - 1);
  block-size: 3px;
  background: transparent;
  pointer-events: none;
}

.read-progress__bar {
  block-size: 100%;
  inline-size: 0;
  background: var(--blue-500);
  transition: inline-size 80ms linear;
}

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

.article {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
}

@media (min-width: 1200px) {
  .article {
    grid-template-columns: 240px minmax(0, var(--container-narrow));
    justify-content: center;
    gap: var(--s-11);
  }
}

.article__toc { display: none; }

@media (min-width: 1200px) {
  .article__toc {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-8));
    align-self: start;
    max-block-size: calc(100vh - var(--header-h) - var(--s-11));
    overflow-y: auto;
  }
}

.article__toc-title {
  font-size: 12px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--mist-600);
  margin-block-end: var(--s-4);
}

.article__toc ol { list-style: none; padding: 0; margin: 0; }

.article__toc a {
  display: block;
  padding-block: var(--s-2);
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.4;
  color: var(--mist-400);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.article__toc a:hover,
.article__toc a.is-current {
  color: var(--white);
  border-inline-start-color: var(--blue-500);
}

.article__toc li[data-level="3"] a { padding-inline-start: var(--s-7); }

/* body typography */

.prose {
  font-size: 17px;
  line-height: 1.8;
  color: var(--mist-200);
}

@media (min-width: 992px) { .prose { font-size: 18px; } }

.prose > * + * { margin-block-start: var(--s-5); }

.prose h2 {
  margin-block-start: var(--s-8);
  font-size: clamp(24px, 2.6vw, 34px);
  text-transform: none;
  letter-spacing: -0.015em;
}

.prose h3 {
  margin-block-start: var(--s-8);
  font-size: clamp(20px, 2vw, 24px);
}

.prose h4 { margin-block-start: var(--s-7); }

.prose p { max-inline-size: none; }

.prose ul, .prose ol { padding-inline-start: var(--s-6); }
.prose li { margin-block-end: var(--s-3); }

.prose a {
  color: var(--blue-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover { color: var(--white); }

.prose blockquote {
  margin-block: var(--s-8);
  font-size: clamp(19px, 2vw, 24px);
}

.prose img { border-radius: var(--r-sm); margin-block: var(--s-7); }

.prose figure { margin: var(--s-8) 0; }

.prose figcaption {
  margin-block-start: var(--s-3);
  font-size: 13px;
  color: var(--mist-600);
}

.prose hr { margin-block: var(--s-9); }

.prose table { margin-block: var(--s-7); }

.prose iframe {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  border: 0;
  border-radius: var(--r-sm);
  margin-block: var(--s-7);
}

/* post meta / share / author */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--mist-600);
}

.post-meta__dot { opacity: .5; }

.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-block: 1px solid var(--line);
  margin-block: var(--s-9);
}

.share-row__label {
  font-size: 12px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--mist-600);
  margin-inline-end: var(--s-3);
}

.share-btn {
  display: grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--mist-400);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.share-btn:hover { border-color: var(--line-strong); color: var(--white); }

.author-card {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.author-card__avatar {
  flex-shrink: 0;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--ink-700);
}

.author-card__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- case study */

.cs-hero {
  position: relative;
  min-block-size: 60vh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--s-11)) var(--s-10);
  overflow: hidden;
}

.cs-hero__bg { position: absolute; inset: 0; z-index: 0; }
.cs-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.cs-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, .92) 100%);
}

.cs-hero__inner { position: relative; z-index: 2; inline-size: 100%; }

.cs-body { display: grid; gap: var(--s-8); }

@media (min-width: 992px) {
  .cs-body { grid-template-columns: 3fr 9fr; gap: var(--s-11); align-items: start; }
}

/* Meta rail: sticky column on desktop, horizontal chip row on mobile. */
.cs-rail {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: var(--s-3);
}

.cs-rail::-webkit-scrollbar { display: none; }

@media (min-width: 992px) {
  .cs-rail {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-8));
    flex-direction: column;
    gap: 0;
    overflow: visible;
  }
}

.cs-rail__item { flex-shrink: 0; }

@media (max-width: 991.98px) {
  .cs-rail__item {
    padding: var(--s-3) var(--s-4);
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    white-space: nowrap;
  }
}

@media (min-width: 992px) {
  .cs-rail__item { padding-block: var(--s-4); border-block-end: 1px solid var(--line); }
  .cs-rail__item:first-child { padding-block-start: 0; }
}

.cs-rail__label {
  font-size: 11px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--mist-600);
}

.cs-rail__value { font-size: var(--fs-small); color: var(--white); margin-block-start: 4px; }

.cs-section + .cs-section { margin-block-start: var(--s-10); }

.cs-section__title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tr-h3);
  margin-block-end: var(--s-5);
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--line);
}

.cs-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block: var(--s-9);
}

@media (min-width: 768px) { .cs-results { grid-template-columns: repeat(3, 1fr); } }

.cs-result {
  padding: var(--s-7) var(--s-5);
  background: var(--ink-850);
  text-align: center;
}

.cs-result__value {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue-400);
  font-variant-numeric: tabular-nums;
}

.cs-result__label {
  margin-block-start: var(--s-3);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist-400);
}

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}

@media (min-width: 768px) { .coverage-grid { grid-template-columns: repeat(4, 1fr); } }

.coverage-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: 13px;
  color: var(--mist-400);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.coverage-item:hover { border-color: var(--line-strong); background: var(--ink-850); color: var(--white); }

.cs-nav {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid var(--line);
}

@media (min-width: 768px) { .cs-nav { grid-template-columns: repeat(2, 1fr); } }
.cs-nav__next { text-align: end; }

/* ---------------------------------------------------------------- contact */

.contact-grid { display: grid; gap: var(--s-9); }

@media (min-width: 992px) {
  .contact-grid { grid-template-columns: 7fr 5fr; gap: var(--s-11); align-items: start; }
}

.contact-card {
  padding: var(--s-7);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

@media (min-width: 992px) {
  .contact-card { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-8)); }
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
}

.contact-row:last-of-type { border-block-end: 0; }
.contact-row .ui { color: var(--blue-400); flex-shrink: 0; margin-block-start: 2px; }
.contact-row__label { font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--mist-600); }
.contact-row__value { color: var(--mist-200); font-size: var(--fs-small); margin-block-start: 3px; }
.contact-row__value a { color: var(--mist-200); }
.contact-row__value a:hover { color: var(--blue-400); }

/* Click-to-load map: a static preview, no third-party request until consent. */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-block-start: var(--s-6);
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--ink-800);
}

.map-embed img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .55; }
.map-embed iframe { inline-size: 100%; block-size: 100%; border: 0; }

.map-embed__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--s-3);
  background: rgba(11, 11, 12, .5);
  color: var(--white);
  font-size: var(--fs-small);
}

.map-embed__note {
  margin-block-start: var(--s-3);
  font-size: 12px;
  color: var(--mist-600);
}

/* multi-step form */

.steps {
  display: flex;
  gap: var(--s-2);
  margin-block-end: var(--s-8);
}

.steps__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.steps__bar {
  block-size: 2px;
  background: var(--line);
  overflow: hidden;
}

.steps__bar span {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--blue-500);
  transition: inline-size var(--t-base) var(--ease);
}

.steps__item.is-done .steps__bar span,
.steps__item.is-active .steps__bar span { inline-size: 100%; }

.steps__label {
  display: none;
  font-size: 11px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--mist-600);
}

@media (min-width: 768px) { .steps__label { display: block; } }

.steps__item.is-active .steps__label { color: var(--white); }

.steps-counter {
  display: block;
  margin-block-end: var(--s-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tr-index);
  color: var(--mist-600);
}

@media (min-width: 768px) { .steps-counter { display: none; } }

/* Without JS every step is visible and the form posts in one go. Steps only
   collapse once multistep.js marks the form .is-enhanced. */
.step { display: block; }
.step + .step { margin-block-start: var(--s-9); }

.is-enhanced .step { display: none; }
.is-enhanced .step + .step { margin-block-start: 0; }
.is-enhanced .step.is-active { display: block; }

/* Step navigation is inert without JS, so it is not shown there. */
.step-nav [data-step-next],
.step-nav [data-step-back] { display: none; }

.is-enhanced .step-nav [data-step-next],
.is-enhanced .step-nav [data-step-back] { display: inline-flex; }

/* The real submit lives on the last step; when enhanced it shows only there. */
.is-enhanced .step:not(.is-active) [type="submit"] { display: none; }

.step__title { margin-block-end: var(--s-6); }

.step-nav {
  display: flex;
  gap: var(--s-3);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--line);
}

.step-nav .btn { flex: 1; }

@media (min-width: 576px) {
  .step-nav { justify-content: space-between; }
  .step-nav .btn { flex: 0 0 auto; }
}

/* success panel */

.form-success {
  padding: var(--s-8);
  border: 1px solid var(--ok);
  border-radius: var(--r-sm);
  background: var(--ink-850);
}

.form-success__steps { list-style: none; padding: 0; margin: var(--s-6) 0 0; counter-reset: fs; }

.form-success__steps li {
  position: relative;
  counter-increment: fs;
  padding-inline-start: var(--s-8);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line);
  color: var(--mist-400);
  font-size: var(--fs-small);
}

.form-success__steps li::before {
  content: "0" counter(fs);
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  color: var(--blue-500);
}

/* ---------------------------------------------------------------- wikipedia */

.eligibility {
  padding: var(--s-7);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.eligibility__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--line);
}

.eligibility__q p { margin: 0; font-size: var(--fs-small); color: var(--mist-200); flex: 1 1 260px; }

.eligibility__answers { display: flex; gap: var(--s-2); flex-shrink: 0; }

.eligibility__result {
  margin-block-start: var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--line-strong);
  border-inline-start: 2px solid var(--blue-500);
  border-radius: var(--r-xs);
  background: var(--ink-800);
}

.eligibility__result[hidden] { display: none; }

/* The compliance note is mandatory and prominent - never fine print. */
.compliance-note {
  padding: var(--s-7);
  border: 1px solid var(--blue-500);
  border-radius: var(--r-sm);
  background: rgba(46, 107, 255, .07);
}

.compliance-note__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-h4);
  color: var(--white);
  margin-block-end: var(--s-4);
}

.compliance-note__title .ui { color: var(--blue-400); }
.compliance-note p { color: var(--mist-200); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- awards catalogue */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-block: 1px solid var(--line);
  margin-block-end: var(--s-8);
}

.filter-bar .select { inline-size: auto; min-inline-size: 180px; flex: 1 1 180px; }

.award-card__deadline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mist-400);
}

.award-card__deadline.is-soon { color: var(--blue-400); }

/* credibility stack diagram */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-inline-size: 520px;
}

.stack__layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--ink-800);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.stack__layer:hover { border-color: var(--blue-500); background: rgba(46, 107, 255, .06); }
.stack__layer-name { font-size: var(--fs-small); font-weight: 600; color: var(--white); }
.stack__layer-note { font-size: 13px; color: var(--mist-600); text-align: end; }

/* ---------------------------------------------------------------- search */

.search-form {
  display: flex;
  gap: var(--s-3);
  max-inline-size: 640px;
}

.search-form .input { flex: 1; }
.search-form .btn { inline-size: auto; flex-shrink: 0; }

.search-group + .search-group { margin-block-start: var(--s-10); }

.search-group__title {
  font-size: 12px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--mist-600);
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s-5);
}

.search-result {
  display: block;
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--line);
}

.search-result__title { font-size: var(--fs-h4); color: var(--white); margin-block-end: var(--s-2); }
.search-result__text { font-size: var(--fs-small); color: var(--mist-400); margin: 0; }
.search-result:hover .search-result__title { color: var(--blue-400); }

/* ---------------------------------------------------------------- 404 / 500 */

.error-page {
  min-block-size: 80vh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + var(--s-11)) var(--s-11);
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: clamp(80px, 18vw, 220px);
  font-weight: 500;
  line-height: 1;
  color: var(--blue-500);
  letter-spacing: -0.04em;
}

.error-page__title { margin-block: var(--s-6) var(--s-5); }
.error-page__text { color: var(--mist-400); max-inline-size: 52ch; }

/* ---------------------------------------------------------------- maintenance */

.maintenance {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-8) var(--gutter);
  background: var(--ink-900);
}

/* ---------------------------------------------------------------- legal (light) */

body.is-light {
  background: var(--paper);
  color: var(--ink-on-paper);
  -webkit-font-smoothing: auto;
}

body.is-light .site-main { background: var(--paper); }

.legal {
  padding-block: var(--s-11);
}

.legal__grid { display: grid; gap: var(--s-9); }

@media (min-width: 1200px) {
  .legal__grid { grid-template-columns: 240px minmax(0, var(--container-narrow)); justify-content: center; gap: var(--s-11); }
}

.legal__toc { display: none; }

@media (min-width: 1200px) {
  .legal__toc {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-8));
    align-self: start;
  }
}

.legal__toc a {
  display: block;
  padding-block: var(--s-2);
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid var(--line-dark);
  font-size: 13px;
  color: var(--muted-on-paper);
}

.legal__toc a:hover { color: var(--ink-on-paper); border-inline-start-color: var(--blue-500); }

.legal__updated {
  font-size: 13px;
  color: var(--muted-on-paper);
  padding-block-end: var(--s-6);
  border-block-end: 1px solid var(--line-dark);
  margin-block-end: var(--s-8);
}

.legal .prose { color: var(--ink-on-paper); counter-reset: legal-section; }
.legal .prose h2 {
  color: var(--ink-on-paper);
  font-size: 24px;
  margin-block-start: var(--s-9);
  counter-increment: legal-section;
}

.legal .prose h2::before {
  content: counter(legal-section) ". ";
  color: var(--blue-500);
  font-family: var(--font-mono);
  font-size: .8em;
}

.legal .prose h3 { color: var(--ink-on-paper); font-size: 19px; }
.legal .prose a { color: var(--blue-600); }
.legal .prose blockquote { border-inline-start-color: var(--blue-500); color: var(--muted-on-paper); }
.legal .prose table th { color: var(--muted-on-paper); }
.legal .prose table td { color: var(--ink-on-paper); }
.legal .prose th, .legal .prose td { border-block-end-color: var(--line-dark); }

.legal-banner {
  padding: var(--s-5) var(--s-6);
  margin-block-end: var(--s-8);
  border: 1px solid var(--warn);
  border-radius: var(--r-sm);
  background: #FFF8EC;
  color: #6B4A05;
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------- sitemap page */

.sitemap-grid { display: grid; gap: var(--s-9); }

@media (min-width: 768px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }

.sitemap-col h2 {
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s-4);
}

.sitemap-col ul { list-style: none; padding: 0; margin: 0; }
.sitemap-col li { margin-block-end: var(--s-3); }
.sitemap-col a { color: var(--mist-400); font-size: var(--fs-small); }
.sitemap-col a:hover { color: var(--white); }