:root {
  --fd-refine-ink: #20282d;
  --fd-refine-muted: #627078;
  --fd-refine-line: rgba(39, 61, 72, .16);
  --fd-refine-paper: rgba(248, 251, 250, .9);
  --fd-refine-glass: rgba(237, 246, 248, .78);
  --fd-refine-blue: #1d79a9;
  --fd-refine-accent: #397d98;
  --fd-refine-radius: 8px;
  --fd-refine-shadow: 0 24px 70px rgba(35, 70, 88, .12);
}

/* One visual grammar for the five public chapters. */
.fd-global-header {
  min-height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.fd-global-header nav a,
.fd-global-header .nav-right a {
  position: relative;
}

.fd-global-header nav a::after,
.fd-global-header .nav-right a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .2s ease, transform .25s ease;
}

.fd-global-header nav a:hover::after,
.fd-global-header nav a[aria-current="page"]::after,
.fd-global-header .nav-right a:hover::after,
.fd-global-header .nav-right a[aria-current="page"]::after {
  opacity: .72;
  transform: scaleX(1);
}

button,
select,
textarea,
input,
.link,
.resource,
.audio-picker {
  border-radius: var(--fd-refine-radius);
}

button,
.link,
.resource {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .2s ease;
}

button:hover,
.link:hover,
.resource:hover {
  transform: translateY(-1px);
}

/* Technical radar: keep the editorial hierarchy, remove the warm AI-template tint. */
body:has(.page > .hero) {
  --accent: #2c7898;
  --faint: #d6e0e3;
  background: #eef5f7;
}

.page > .hero {
  background-image:
    linear-gradient(90deg, rgba(231, 243, 248, .83), rgba(236, 246, 249, .58)),
    url("sky-v2/sky-editorial-blue.png") !important;
  background-position: center 42% !important;
  background-size: cover !important;
}

.page > .hero::before {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(213,232,240,.18)) !important;
}

.page > .hero .accent,
.page > .hero .eyebrow,
.page > .hero + .edition .section-kicker,
.page > .hero + .edition .archive-link {
  color: #2c7898 !important;
}

.edition,
.principles,
.page > footer {
  background: #f7f8f5 !important;
}

.item {
  border-radius: 0 !important;
}

.item:hover {
  background: rgba(224, 238, 241, .48) !important;
}

.drawer {
  border-radius: 14px 0 0 14px;
  background: rgba(247, 249, 247, .98) !important;
  box-shadow: -24px 0 72px rgba(27, 51, 62, .2) !important;
}

.drawer .icon-button,
.drawer .ai-button {
  border-radius: 7px !important;
}

.drawer-ai {
  border-radius: 8px;
  background: rgba(223, 238, 242, .56) !important;
}

/* Technical archive: same cool paper and quieter accents as the homepage. */
.fd-page-tech-archive {
  --fd-accent: #28789f;
  --fd-accent-soft: rgba(40, 120, 159, .09);
  --fd-paper: #f5f7f5;
}

.fd-page-tech-archive .fd-editorial-hero::before {
  background: rgba(233, 242, 244, .7) !important;
}

.fd-page-tech-archive .fd-archive-filters {
  gap: 8px;
  padding: 10px 0;
  border: 0;
}

.fd-page-tech-archive .fd-archive-filters button {
  min-height: 62px;
  border: 1px solid var(--fd-refine-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .48);
}

.fd-page-tech-archive .fd-archive-filters button[aria-pressed="true"] {
  box-shadow: inset 0 -2px var(--fd-accent), 0 10px 24px rgba(43, 84, 101, .08);
  background: rgba(229, 240, 242, .9);
}

.fd-page-tech-archive .fd-archive-filters button[aria-pressed="true"],
.fd-page-tech-archive .fd-editorial-kicker,
.fd-page-tech-archive .fd-editorial-archive-link,
.fd-page-tech-archive .fd-entry-category {
  color: var(--fd-accent) !important;
}

.fd-page-tech-archive .fd-reading-drawer {
  border-radius: 14px 0 0 14px;
  background: rgba(247, 249, 247, .985);
}

/* Observation room: a single instrument, not five unrelated dashboards. */
body:has(.frame > main > .stage) {
  --coral: #397d98;
  background: #dce9e8;
}

.frame {
  width: min(1540px, calc(100% - 28px)) !important;
  margin: 14px auto !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 10px;
  background: rgba(239, 246, 245, .9) !important;
  box-shadow: var(--fd-refine-shadow);
}

.intro {
  padding: 18px 50px 8px !important;
}

.intro h1 {
  font-size: clamp(34px, 3.7vw, 52px) !important;
}

.switcher {
  width: calc(100% - 100px) !important;
  margin: 0 50px 18px !important;
  gap: 8px;
  border: 0 !important;
  background: transparent !important;
}

.switcher button {
  min-height: 68px !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(45, 67, 72, .17) !important;
  border-radius: 7px;
  background: rgba(250, 251, 247, .62) !important;
  box-shadow: 0 7px 18px rgba(35, 60, 64, .04);
}

.switcher button:hover {
  border-color: rgba(43, 105, 129, .32) !important;
  background: rgba(255,255,255,.82) !important;
}

.switcher button.on {
  border-color: rgba(45, 111, 139, .38) !important;
  background: rgba(232, 243, 244, .94) !important;
  box-shadow: inset 0 -3px #397d98, 0 12px 28px rgba(42, 83, 96, .08) !important;
}

.stage {
  width: calc(100% - 100px) !important;
  margin: 0 50px 34px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 10px;
  box-shadow: 0 22px 55px rgba(29, 59, 68, .14);
}

.piece {
  border-radius: 10px;
}

.piece-head {
  padding: 24px 30px 0 !important;
}

.controls,
.game-ledger,
.poster-editor,
.poster-preview,
.poster-meta,
.brief-editor,
.brief-card {
  border-radius: 8px !important;
}

.game-ledger,
.poster-editor,
.brief-editor {
  background: rgba(247, 249, 246, .84) !important;
  backdrop-filter: blur(14px) saturate(.82);
  box-shadow: 0 18px 44px rgba(20, 40, 46, .14);
}

#sound .controls {
  color: #eef4f1 !important;
  border: 1px solid rgba(239, 247, 244, .25);
  background: #26383a !important;
  backdrop-filter: blur(18px) saturate(.82);
  box-shadow: 0 20px 48px rgba(18, 35, 39, .2);
}

#sound::before {
  filter: saturate(.82) brightness(.76) contrast(1.1) !important;
}

#sound::after {
  background:
    radial-gradient(ellipse at 66% 48%, rgba(12, 34, 40, .14), rgba(12, 29, 34, .34) 66%),
    linear-gradient(90deg, rgba(10, 29, 34, .48), rgba(12, 31, 36, .13) 58%, rgba(8, 24, 30, .36)) !important;
}

.fd-global-header nav a[aria-current="page"],
.switcher button em,
.piece-head p {
  color: #397d98 !important;
}

.fd-global-header nav a[aria-current="page"]::after {
  background: #397d98 !important;
}

#sound .audio-picker,
#sound .action-row button,
#sound .scene-row button {
  border-color: rgba(240, 247, 243, .34) !important;
  background: rgba(249, 251, 248, .08) !important;
  color: #f3f7f4 !important;
}

#sound .action-row .main,
#sound .scene-row button.on {
  border-color: #81aebc !important;
  background: #397d98 !important;
}

#sound .status,
#sound .scene-row span {
  color: rgba(235, 244, 240, .72) !important;
}

.game-stage,
.poster-preview,
.brief-card {
  background: rgba(238, 245, 244, .76) !important;
  backdrop-filter: blur(12px) saturate(.84);
  box-shadow: 0 18px 44px rgba(20, 40, 46, .12);
}

.action-row button,
.scene-row button,
.game-ledger button,
.poster-actions button,
.brief-submit,
.brief-modes button {
  border-radius: 7px !important;
}

.quiet-footer {
  border-radius: 7px;
  background: rgba(245, 249, 247, .72) !important;
}

/* Downloads: product shelf rather than an empty row. */
.fd-products-page {
  max-width: 1320px !important;
  padding: 62px 64px 82px !important;
}

.fd-products-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .55fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 42px;
}

.fd-products-intro h1 {
  margin-bottom: 0 !important;
}

.fd-products-intro p {
  max-width: 430px;
  margin: 0 0 3px;
  color: var(--fd-refine-muted);
}

.fd-product-feature {
  display: grid;
  grid-template-columns: minmax(390px, .9fr) minmax(0, 1.1fr);
  width: 100%;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid rgba(42, 67, 78, .14);
  border-radius: 10px;
  background: rgba(249, 251, 249, .86);
  box-shadow: var(--fd-refine-shadow);
}

.fd-product-visual {
  position: relative;
  margin: 0;
  min-height: 440px;
  overflow: hidden;
  background: #dce9e9;
}

.fd-product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.fd-product-visual::after {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 5px;
  content: "";
  pointer-events: none;
}

.fd-product-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(42px, 5vw, 74px);
}

.fd-product-index {
  color: var(--fd-refine-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.fd-product-copy h2 {
  margin: 18px 0 16px;
  font: 500 clamp(42px, 4.5vw, 62px)/1 Georgia, "Noto Serif SC", serif;
}

.fd-product-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--fd-refine-muted);
  font-size: 15px;
  line-height: 1.9;
}

.fd-product-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 34px 0;
  background: var(--fd-refine-line);
}

.fd-product-facts span {
  min-height: 74px;
  padding: 15px;
  background: rgba(247,250,249,.96);
  color: var(--fd-refine-muted);
  font-size: 11px;
}

.fd-product-facts b {
  display: block;
  margin-bottom: 6px;
  color: var(--fd-refine-ink);
  font-size: 10px;
  letter-spacing: .1em;
}

.fd-product-actions {
  display: flex;
  gap: 10px;
}

.fd-product-actions .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  padding: 0 20px;
  text-decoration: none;
}

.fd-product-actions .primary {
  background: var(--fd-refine-ink);
  color: #fff;
}

/* Field notes: a readable route with tactile, restrained surfaces. */
.notes-page {
  width: min(1740px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
  padding: 64px 56px 92px !important;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: rgba(245, 249, 248, .52) !important;
  box-shadow: none;
  backdrop-filter: blur(2px) saturate(.92);
}

.notes-hero,
.notes-layout {
  width: min(100%, 1520px);
  margin-inline: auto;
}

.notes-layout {
  grid-template-columns: 270px minmax(0, 1fr) !important;
  gap: 64px !important;
}

.lesson-nav {
  border-radius: 8px;
  background: rgba(246, 249, 247, .64);
  backdrop-filter: blur(12px);
}

.lesson-nav a {
  border-radius: 6px;
}

.lesson-nav a:hover {
  background: rgba(224, 238, 240, .68);
}

.lesson-step {
  margin-bottom: 14px;
  padding: 28px 30px !important;
  border: 1px solid rgba(48, 72, 80, .12) !important;
  border-radius: 8px;
  background: rgba(249, 251, 248, .74);
  box-shadow: 0 12px 28px rgba(40, 70, 78, .05);
}

.resource {
  border: 1px solid rgba(42, 85, 101, .2) !important;
  background: rgba(230, 241, 242, .58) !important;
}

.checklist {
  overflow: hidden;
  border: 1px solid rgba(43, 69, 78, .16) !important;
  border-radius: 9px;
  background: rgba(248, 250, 247, .82) !important;
  box-shadow: 0 18px 42px rgba(36, 66, 74, .08);
}

.checklist label {
  border-radius: 6px;
}

@media (max-width: 820px) {
  .frame,
  .notes-page {
    width: 100% !important;
    margin: 0 !important;
    padding: 42px 20px 62px !important;
    border: 0;
    border-radius: 0;
  }

  .notes-hero,
  .notes-layout {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .intro { padding: 24px 20px 10px !important; }
  body:has(.frame > main > .stage) main {
    width: 100% !important;
    padding: 24px 18px 36px !important;
  }
  .switcher { width: 100% !important; margin: 0 0 16px !important; }
  .stage { width: 100% !important; margin: 0 0 26px !important; }
  .fd-products-page { padding: 42px 20px 62px !important; }
  .fd-products-intro,
  .fd-product-feature { grid-template-columns: 1fr; }
  .fd-products-intro { gap: 16px; }
  .fd-product-visual { min-height: 280px; }
  .fd-product-copy { padding: 34px 26px 40px; }
}

@media (max-width: 560px) {
  .switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  .switcher button,
  .switcher button + button {
    min-width: 0 !important;
    min-height: 74px !important;
    padding: 13px 14px !important;
    border-left: 1px solid rgba(45, 67, 72, .17) !important;
  }

  .switcher button b {
    font-size: 17px !important;
    white-space: nowrap;
  }

  .switcher button small {
    font-size: 7px !important;
  }

  .switcher button:last-child { grid-column: 1 / -1; }
  .fd-product-facts { grid-template-columns: 1fr; }
  .fd-product-actions { flex-direction: column; }
  .lesson-step { padding: 24px 20px !important; }
}