/* Project cases are unnumbered implementation studies. Keep them outside chapter geometry. */
.project-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #facc15;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.project-eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.project-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 0; }
.project-chip {
  padding: 6px 9px;
  border: 1px solid #2b394f;
  border-radius: 999px;
  background: rgba(12, 18, 29, .86);
  color: #aeb9c8;
  font-size: 10px;
}
.project-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.project-action {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #344259;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e7edf5;
  background: rgba(10, 16, 26, .88);
  font-size: 12px;
  font-weight: 800;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.project-action.primary { border-color: #ffe36a; background: #facc15; color: #17130a; }
.project-action:hover, .project-action:focus-visible { transform: none; border-color: #facc15; background: #20200e; color: #fff4a8; }
.project-action.primary:hover, .project-action.primary:focus-visible { background: #ffe36a; color: #17130a; }

/* Landing placement: Featured Case Studies -> Project Case -> Latest Briefing. */
body[data-page="home"] .project-showcase {
  padding: 0 0 92px;
  border-top: 0;
  background-color: var(--landing-band-light, #111315) !important;
  background-image:
    linear-gradient(rgba(92, 108, 116, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 108, 116, .14) 1px, transparent 1px) !important;
  background-position: center top !important;
  background-size: 84px 84px !important;
}
body[data-page="home"] .project-showcase-card {
  position: relative;
  isolation: isolate;
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background: #0f1623;
}
body[data-page="home"] .project-showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 1px solid #2b323c;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .2s ease;
}
body[data-page="home"] .project-showcase-card:hover::after,
body[data-page="home"] .project-showcase-card:focus-within::after {
  border-color: #5c5125;
}
body[data-page="home"] .project-showcase-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px;
}
body[data-page="home"] .project-showcase h2 { margin: 14px 0 12px; text-align: left; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; }
body[data-page="home"] .project-showcase p { max-width: 520px; margin: 0; color: #9aa7b9; font-size: 14px; line-height: 1.8; }
body[data-page="home"] .project-name { display: block; margin-top: 16px; color: #e6edf6; font-size: 13px; font-weight: 800; }
body[data-page="home"] .project-showcase-art { position: relative; min-height: 420px; overflow: hidden; background: #0f1623; }
body[data-page="home"] .project-showcase-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0f1623 0%, rgba(15, 22, 35, .78) 14%, rgba(15, 22, 35, .08) 56%, rgba(15, 22, 35, .15) 100%);
  pointer-events: none;
}
body[data-page="home"] .project-showcase-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(.68) brightness(.72) contrast(1.06); }
body[data-page="home"] .foot-col a { display: block; margin: 5px 0; color: #748399; font-size: 9px; }
body[data-page="home"] .foot-col a:hover, body[data-page="home"] .foot-col a:focus-visible { color: #facc15; }

/* Roadmap discovery is not a chapter card and never carries a number. */
.roadmap-project-banner {
  position: relative;
  min-height: 174px;
  margin-top: 28px;
  padding: 26px 30px;
  overflow: hidden;
  border: 1px solid rgba(250, 204, 21, .27);
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  background: #0c121c;
}
.roadmap-project-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 11, 18, .98) 0%, rgba(7, 11, 18, .9) 50%, rgba(7, 11, 18, .36) 100%), var(--project-art) right center / 58% auto no-repeat;
  opacity: .84;
  pointer-events: none;
}
.roadmap-project-copy, .roadmap-project-banner .project-action { position: relative; z-index: 1; }
.roadmap-project-banner h2 { margin: 8px 0 6px; font-size: 25px; }
.roadmap-project-banner p { max-width: 700px; margin: 0; color: #8e9bad; font-size: 12px; }

/* Generated contextual card inside seven related learning articles. */
.article-project-case {
  margin: 42px 0;
  padding: 26px;
  border: 1px solid rgba(250, 204, 21, .28);
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  background: #0c121c;
}
.article-project-case h2 { margin: 8px 0 7px; font-size: 22px; }
.article-project-case p { margin: 0; color: #9ba8ba; font-size: 13px; line-height: 1.7; }
.article-project-case .project-action { white-space: nowrap; }

/* Standalone project page. */
body[data-page="project"] { margin: 0; color: #f8fafc; background: #080b12; line-height: 1.68; letter-spacing: -.02em; }
body[data-page="project"] .project-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
body[data-page="project"] .atlas-global-header {
  height: 82px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  background: rgba(7, 9, 15, .92);
  backdrop-filter: blur(18px);
}
body[data-page="project"] .atlas-global-header .wrap { width: min(1280px, calc(100% - 40px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
body[data-page="project"] .brand { display: flex; align-items: center; gap: 12px; color: #f8fafc; font-size: 18px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
body[data-page="project"] .brand-mark { position: relative; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: #facc15; }
body[data-page="project"] .brand-mark::before, body[data-page="project"] .brand-mark::after { content: ""; position: absolute; border: 2px solid #17110a; border-radius: 5px; }
body[data-page="project"] .brand-mark::before { inset: 7px 14px 7px 6px; }
body[data-page="project"] .brand-mark::after { inset: 7px 6px 7px 18px; }
body[data-page="project"] .brand-title small { display: block; margin-top: -2px; color: #a3a3a3; font-size: 9px; font-weight: 600; letter-spacing: .18em; }
body[data-page="project"] .atlas-global-header .nav { display: flex; align-items: center; gap: 30px; color: #b7c0ce; font-size: 13px; }
body[data-page="project"] .atlas-global-header .nav a:hover { color: #fff; }
body[data-page="project"] .header-actions { display: flex; align-items: center; gap: 12px; }
body[data-page="project"] .search { width: 205px; height: 40px; padding: 0 13px; border: 1px solid #243044; border-radius: 11px; display: flex; align-items: center; gap: 9px; background: #0b1019; color: #6f7c90; font-size: 12px; cursor: pointer; }
body[data-page="project"] .search-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="project"] .kbd { margin-left: auto; padding: 2px 6px; border: 1px solid #344057; border-radius: 5px; font-size: 9px; }
body[data-page="project"] .header-actions .btn { height: 42px; padding: 0 18px; border: 1px solid #ffe66d; border-radius: 11px; display: inline-flex; align-items: center; background: #facc15; color: #17130a; font-size: 13px; font-weight: 800; }
.project-breadcrumb { padding: 22px 0 0; color: #77859a; font-size: 11px; }
.project-breadcrumb a:hover { color: #facc15; }
.project-hero { padding: 42px 0 36px; }
.project-hero-grid { min-height: 560px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 42px; }
.project-hero h1 { margin: 16px 0; font-size: clamp(42px, 6vw, 76px); line-height: 1.04; letter-spacing: -.06em; }
.project-hero .lead { max-width: 620px; margin: 0; color: #a2adbc; font-size: 17px; }
.project-verification { margin-top: 22px; color: #76869b; font-size: 11px; }
.project-verification code { color: #d7dfeb; }
.project-cover { margin: 0; overflow: hidden; border: 1px solid #2a374a; border-radius: 24px; background: #07101a; }
.project-cover img { width: 100%; height: auto; display: block; filter: saturate(.85) brightness(.8); }
.project-cover figcaption { padding: 12px 16px; border-top: 1px solid #263246; color: #8794a7; font-size: 10px; }
.project-local-nav { position: sticky; top: 82px; z-index: 40; border-top: 1px solid #1d2838; border-bottom: 1px solid #1d2838; background: rgba(8, 11, 18, .94); backdrop-filter: blur(14px); }
.project-local-nav .project-wrap { min-height: 58px; display: flex; align-items: center; gap: 9px; overflow-x: auto; scrollbar-width: thin; }
.project-local-nav a { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; color: #8f9caf; font-size: 11px; }
.project-local-nav a:hover, .project-local-nav a:focus-visible { background: #22200f; color: #fff2a6; }
.project-section { padding: 78px 0; border-bottom: 1px solid rgba(255, 255, 255, .055); scroll-margin-top: 152px; }
.project-section-head { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; margin-bottom: 34px; }
.project-section h2 { margin: 0; font-size: 34px; line-height: 1.2; }
.project-section-intro { margin: 0; color: #9ba7b8; font-size: 15px; }
.evidence-grid, .failure-grid, .related-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.evidence-card, .failure-card, .related-project-card { padding: 22px; border: 1px solid #253247; border-radius: 16px; background: #0d141f; }
.evidence-label { display: inline-flex; padding: 5px 8px; border: 1px solid #334158; border-radius: 999px; color: #9fadc0; font-size: 9px; font-weight: 800; }
.evidence-label.fact { border-color: #2f6f9c; color: #8cd5ff; }
.evidence-label.interpretation { border-color: #76641c; color: #ffe36a; }
.evidence-label.alternative { border-color: #66549b; color: #cbb8ff; }
.evidence-card h3, .failure-card h3, .related-project-card h3 { margin: 14px 0 8px; font-size: 17px; }
.evidence-card p, .failure-card p, .related-project-card p { margin: 0; color: #95a2b3; font-size: 12px; }
.evidence-card a { display: inline-flex; margin-top: 14px; color: #d7e2ef; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.architecture-panel { padding: 24px; overflow-x: auto; border: 1px solid #263347; border-radius: 18px; background: #09101a; }
.architecture-panel svg { display: block; min-width: 820px; width: 100%; height: auto; }
.architecture-description { margin: 18px 0 0; color: #9aa7b8; font-size: 13px; }
.flow-list { counter-reset: flow; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.flow-list li { counter-increment: flow; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 18px; border: 1px solid #263347; border-radius: 14px; background: #0c131e; }
.flow-list li::before { content: counter(flow, decimal-leading-zero); width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #facc15; color: #17130a; font: 800 11px ui-monospace, monospace; }
.flow-list b { display: block; margin-bottom: 3px; }
.flow-list span { color: #94a1b3; font-size: 12px; }
.tradeoff-table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid #263347; border-radius: 14px; }
.tradeoff-table th, .tradeoff-table td { padding: 14px; border-bottom: 1px solid #263347; text-align: left; vertical-align: top; font-size: 12px; }
.tradeoff-table th { color: #f3f6fa; background: #111927; }
.tradeoff-table td { color: #97a4b5; }
.tradeoff-table tr:last-child td { border-bottom: 0; }
.related-project-card { display: flex; flex-direction: column; }
.related-project-card a { margin-top: auto; padding-top: 18px; color: #facc15; font-size: 11px; font-weight: 800; }
.project-source-note { margin-top: 28px; padding: 20px; border-left: 3px solid #facc15; background: #111609; color: #aeb8c6; font-size: 12px; }
.project-footer { padding: 42px 0 28px; background: #06080c; color: #7d8999; font-size: 11px; }
.project-footer-main { display: flex; justify-content: space-between; align-items: start; gap: 32px; }
.project-footer-main strong { color: #f8fafc; font-size: 15px; }
.project-footer-main p { max-width: 620px; margin: 8px 0 0; }
.project-footer-links { display: flex; flex-wrap: wrap; gap: 12px; }
.project-footer-links a:hover { color: #facc15; }
body[data-page="project"] .site-legal-links { width: min(1180px, calc(100% - 40px)); margin: 28px auto 0; padding-top: 20px; border-top: 1px solid #1f2938; display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 1100px) {
  body[data-page="home"] .project-showcase-card { grid-template-columns: 1fr; }
  body[data-page="home"] .project-showcase-art { min-height: 360px; order: -1; }
  body[data-page="home"] .project-showcase-art::after { background: linear-gradient(180deg, rgba(11, 17, 27, .05), #0b111b); }
  body[data-page="project"] .atlas-global-header .nav { display: none; position: fixed; top: 82px; left: 20px; right: 20px; padding: 14px; border: 1px solid #29364a; border-radius: 14px; flex-direction: column; align-items: stretch; background: #0b111b; }
  body[data-page="project"] .atlas-global-header .nav.is-open { display: flex; }
  body[data-page="project"] .mobile-menu-toggle { display: inline-flex; }
  body[data-page="project"] .search { display: none; }
  .project-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .project-cover { order: -1; }
}
@media (max-width: 760px) {
  body[data-page="home"] .project-showcase { padding: 0 0 64px; }
  body[data-page="home"] .project-showcase-copy { padding: 28px 22px 30px; }
  body[data-page="home"] .project-showcase-art { min-height: 250px; }
  body[data-page="home"] .project-showcase h2 { font-size: 34px; }
  .project-actions, .project-action { width: 100%; }
  .roadmap-project-banner, .article-project-case { grid-template-columns: 1fr; padding: 22px; }
  .project-hero { padding-top: 28px; }
  .project-hero h1 { font-size: 48px; }
  .project-section { padding: 58px 0; }
  .project-section-head { grid-template-columns: 1fr; gap: 12px; }
  .evidence-grid, .failure-grid, .related-project-grid { grid-template-columns: 1fr; }
  .tradeoff-table { display: block; overflow-x: auto; white-space: normal; }
  .project-footer-main { flex-direction: column; }
}
@media (max-width: 560px) {
  body[data-page="project"] .project-wrap, body[data-page="project"] .atlas-global-header .wrap { width: calc(100% - 28px); }
  body[data-page="project"] .brand { font-size: 14px; }
  body[data-page="project"] .brand-mark { width: 30px; height: 30px; }
  body[data-page="project"] .header-actions .btn { display: none; }
  .project-hero h1 { font-size: 40px; }
  .project-hero .lead { font-size: 15px; }
  .project-local-nav { top: 82px; }
  .project-section h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-action { transition: none; }
}