@layer reset, base, layout, components, responsive, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { font-size: 100%; }
  body, h1, h2, h3, p, ol, ul, figure { margin: 0; }
  ol, ul { padding: 0; }
  img { display: block; max-inline-size: 100%; }
  button, a { font: inherit; }
}

@layer base {
  :root {
    color-scheme: dark light;
    --dark: #121211;
    --dark-field: #1b1b19;
    --light: #ecebe5;
    --light-field: #deddd6;
    --ink-dark: #f1f0e9;
    --body-dark: #d3d1c9;
    --dim-dark: #99978f;
    --rule-dark: #4e4d48;
    --ink-light: #171716;
    --body-light: #35342f;
    --dim-light: #74726a;
    --rule-light: #aaa89f;
    --header-h: 4rem;
    --page-pad: clamp(1.25rem, 5.5vw, 5.5rem);
    --section-pad: clamp(4rem, 8vw, 8rem);
    --gap-1: clamp(0.75rem, 1.2vw, 1.25rem);
    --gap-2: clamp(1.25rem, 2vw, 2.25rem);
    --gap-3: clamp(2rem, 4vw, 4.5rem);
    --body-size: clamp(1rem, 0.88rem + 0.38vw, 1.35rem);
    --micro-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.86rem);
    --claim-size: clamp(2.65rem, 2rem + 3.2vw, 5.1rem);
    --display-size: clamp(3.6rem, 2rem + 5.8vw, 7.7rem);
    --measure: 64ch;
    --wide: 100rem;
    font-family: Arial, Helvetica, sans-serif;
    font-synthesis: none;
  }

  html {
    background: var(--dark);
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
  }

  body {
    min-block-size: 100vh;
    overflow-x: clip;
    color: var(--ink-dark);
    background: var(--dark);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--body-size);
    font-kerning: auto;
    font-variant-ligatures: common-ligatures;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
  }

  a { color: inherit; }

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

  :focus-visible {
    outline: max(2px, 0.12em) solid currentColor;
    outline-offset: 0.28rem;
  }

  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    color: var(--dark);
    background: var(--ink-dark);
    font-size: 0.9rem;
    font-weight: 700;
    transform: translateY(-150%);
  }

  .skip-link:focus { transform: translateY(0); }
}

@layer layout {
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    min-block-size: var(--header-h);
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) auto minmax(15rem, 1fr);
    align-items: center;
    gap: 1.25rem;
    padding-inline: var(--page-pad);
    color: var(--body-dark);
    background: color-mix(in srgb, var(--dark) 96%, transparent);
    border-block-end: 1px solid var(--rule-dark);
    backdrop-filter: blur(14px);
  }

  .site-header__identity {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .chapter-nav {
    min-inline-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chapter {
    --ground: var(--dark);
    --field: var(--dark-field);
    --ink: var(--ink-dark);
    --body-ink: var(--body-dark);
    --dim-ink: var(--dim-dark);
    --rule: var(--rule-dark);
    color: var(--ink);
    background: var(--ground);
  }

  .chapter--light {
    --ground: var(--light);
    --field: var(--light-field);
    --ink: var(--ink-light);
    --body-ink: var(--body-light);
    --dim-ink: var(--dim-light);
    --rule: var(--rule-light);
  }

  .chapter__inner {
    inline-size: min(100%, var(--wide));
    min-block-size: calc(100svh - var(--header-h));
    margin-inline: auto;
    padding: var(--section-pad) var(--page-pad);
    display: flex;
    flex-direction: column;
  }

  .chapter--dense .chapter__inner { min-block-size: auto; }

  .opening-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.8fr);
    grid-template-rows: auto 1fr auto;
    gap: var(--gap-3);
    align-items: end;
  }

  .opening-grid > .eyebrow { grid-column: 1 / -1; align-self: start; }
  .opening-grid > h1 { grid-column: 1; align-self: center; }
  .opening-grid__gloss { grid-column: 2; align-self: center; }
  .opening-grid__base { grid-column: 1 / -1; }

  .premise-layout,
  .ambassador-layout {
    margin-block-start: auto;
    display: grid;
    gap: var(--gap-3);
  }

  .phase-grid,
  .evidence-layout,
  .pilot-layout,
  .readiness-grid,
  .decision-layout {
    display: grid;
    gap: var(--gap-3);
  }

  .phase-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    margin-block-start: auto;
  }

  .evidence-layout {
    grid-template-columns: minmax(18rem, 0.78fr) minmax(28rem, 1.22fr);
    align-items: start;
    margin-block-start: var(--gap-3);
  }

  .pilot-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    margin-block-start: var(--gap-3);
  }

  .readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: auto;
  }

  .decision-layout {
    grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr);
    align-items: end;
    margin-block-start: auto;
  }
}

@layer components {
  .site-mark {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ink-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-mark__dot {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
  }

  .site-header__meta {
    color: var(--dim-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .chapter-nav a {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    display: grid;
    place-items: center;
    color: var(--dim-dark);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-block-end: 2px solid transparent;
  }

  .chapter-nav a:hover { color: var(--ink-dark); }
  .chapter-nav a[aria-current="location"] {
    color: var(--ink-dark);
    border-block-end-color: currentColor;
  }

  .read-progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 1px;
    overflow: hidden;
  }

  .read-progress span {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: var(--ink-dark);
    transform: scaleX(0);
    transform-origin: left center;
  }

  .eyebrow,
  .micro-label,
  .apparatus,
  .opening-grid__base,
  .decision-setup,
  .site-footer {
    font-size: var(--micro-size);
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .eyebrow { color: var(--dim-ink); }

  .apparatus {
    display: grid;
    grid-template-columns: auto 0.6rem 1fr;
    align-items: start;
    gap: 1rem;
    padding-block-end: 1.25rem;
    color: var(--body-ink);
    border-block-end: 1px solid var(--rule);
  }

  .apparatus > p { min-inline-size: 0; overflow-wrap: anywhere; }
  .apparatus p:last-child { color: var(--dim-ink); }
  .apparatus > span {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    margin-block-start: 0.08rem;
    border-radius: 50%;
    background: currentColor;
  }

  h1,
  .claim {
    max-inline-size: 17ch;
    color: var(--ink);
    font-weight: 900;
    letter-spacing: -0.052em;
    line-height: 0.92;
    text-wrap: balance;
    text-transform: uppercase;
  }

  h1 { font-size: var(--display-size); }
  .claim {
    margin-block-start: clamp(2.4rem, 5vw, 5.5rem);
    font-size: var(--claim-size);
  }

  .opening-grid__gloss {
    max-inline-size: 28ch;
    color: var(--body-ink);
    font-size: clamp(1.25rem, 1.05rem + 0.65vw, 1.8rem);
    line-height: 1.25;
  }

  .opening-grid__base {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block-start: 1.2rem;
    color: var(--body-ink);
    border-block-start: 1px solid var(--rule);
  }

  .prose-block {
    max-inline-size: 44rem;
    color: var(--body-ink);
    display: grid;
    gap: 1.15rem;
  }

  .prose-block--wide { max-inline-size: 66rem; }
  .micro-label { color: var(--dim-ink); }

  .step-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
  }

  .step-grid li {
    min-block-size: 12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rule);
  }

  .step-grid span {
    color: var(--dim-ink);
    font-size: var(--micro-size);
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .step-grid strong,
  .chapter-close,
  .qualified-close,
  .component-grid li,
  .process strong,
  .measurement-layout__preferred {
    color: var(--ink);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-transform: uppercase;
  }

  .chapter-close {
    margin-block-start: var(--gap-3);
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--rule);
  }

  .phase {
    min-block-size: clamp(24rem, 50vh, 35rem);
    padding: clamp(1.5rem, 3vw, 3.25rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
  }

  .phase--lead {
    color: var(--light);
    background: var(--ink-light);
  }

  .phase--follow {
    color: var(--ink-light);
    background: var(--light-field);
  }

  .phase .micro-label { color: currentColor; opacity: 0.62; }
  .phase h3 {
    max-inline-size: 16ch;
    margin-block-end: 1rem;
    font-size: clamp(2.25rem, 1.8rem + 2vw, 4.2rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.95;
    text-transform: uppercase;
  }

  .phase p:last-child {
    max-inline-size: 34rem;
    font-size: var(--body-size);
    line-height: 1.35;
  }

  .evidence-layout__copy {
    display: grid;
    gap: 1.25rem;
    color: var(--body-ink);
  }

  .square-list {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    color: var(--body-ink);
  }

  .square-list--roomy { gap: 1rem; }
  .square-list li {
    display: grid;
    grid-template-columns: 0.65rem 1fr;
    gap: 0.75rem;
    align-items: start;
  }

  .square-list li::before {
    content: "";
    inline-size: 0.45rem;
    block-size: 0.45rem;
    margin-block-start: 0.47em;
    background: var(--ink);
  }

  .qualified-close {
    margin-block-start: 0.5rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rule);
  }

  .product-evidence { min-inline-size: 0; }
  .product-grid {
    margin-block: 0.9rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(11rem, 22vw, 20rem));
    gap: 0.5rem;
  }

  .product-grid img {
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    object-fit: cover;
    background: #efeee9;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
  }

  .product-grid img:nth-child(1),
  .product-grid img:nth-child(2) {
    grid-column: span 3;
    object-fit: contain;
  }

  .product-grid img:nth-child(n + 3) { grid-column: span 2; }

  .product-evidence > p {
    max-inline-size: 68ch;
    color: var(--dim-ink);
    font-size: var(--micro-size);
    line-height: 1.4;
  }

  .process {
    display: grid;
    align-content: start;
    gap: 1rem;
    color: var(--body-ink);
  }

  .process ol {
    list-style: none;
    border-block: 1px solid var(--rule);
  }

  .process li {
    min-block-size: 5rem;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    align-items: center;
    gap: 1rem;
  }

  .process li + li { border-block-start: 1px solid var(--rule); }
  .process span {
    color: var(--dim-ink);
    font-size: var(--micro-size);
    font-weight: 800;
    letter-spacing: 0.13em;
  }

  .component-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--rule);
  }

  .component-grid li {
    min-block-size: 8rem;
    display: flex;
    align-items: center;
    padding-block: 1rem;
    padding-inline-end: 1.5rem;
  }

  .component-grid li:nth-child(n + 4) { border-block-start: 1px solid var(--rule); }

  .readiness-grid > section {
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rule);
  }

  .readiness-grid h3,
  .term-table h3 {
    margin-block-end: 1.5rem;
    color: var(--ink);
    font-size: var(--body-size);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-transform: uppercase;
  }

  .term-table {
    margin-block-start: var(--gap-3);
    border-block-start: 1px solid var(--rule);
  }

  .term-table section {
    display: grid;
    grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--gap-3);
    align-items: center;
    padding-block: clamp(1.75rem, 3vw, 3.5rem);
    border-block-end: 1px solid var(--rule);
  }

  .term-table h3 { margin: 0; }
  .term-table p { max-inline-size: var(--measure); color: var(--body-ink); }

  .footnote {
    max-inline-size: 90ch;
    margin-block-start: 1.25rem;
    color: var(--dim-ink);
    font-size: var(--micro-size);
    line-height: 1.45;
  }

  .measurement-layout {
    margin-block-start: var(--gap-3);
    display: grid;
    gap: 1.25rem;
    color: var(--body-ink);
  }

  .measurement-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--rule);
  }

  .measurement-grid li {
    min-block-size: 5.4rem;
    display: flex;
    align-items: center;
    padding-block: 1rem;
    padding-inline-end: 1.5rem;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.2;
    border-block-end: 1px solid var(--rule);
  }

  .measurement-grid li:nth-last-child(-n + 3) { border-block-end: 0; }
  .measurement-layout__preferred { color: var(--ink); }
  .measurement-layout > p:last-child { max-inline-size: 66rem; }

  .decision-setup {
    margin-block-start: clamp(2.4rem, 5vw, 5.5rem);
    color: var(--body-ink);
  }

  .fit-list {
    margin-block-start: 1rem;
    list-style: none;
    display: grid;
    gap: 0.75rem;
    color: var(--body-ink);
  }

  .fit-list li {
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--rule);
  }

  .decision-layout__question { grid-column: 2; grid-row: 1; }
  .decision-layout__questions { grid-column: 1; grid-row: 1; }

  .decision-layout__question .claim {
    max-inline-size: 14ch;
    margin: 0;
  }

  .decision-layout__question > p {
    max-inline-size: 32rem;
    margin-block-start: 2rem;
    margin-inline-start: auto;
    padding-block-start: 1rem;
    color: var(--body-ink);
    border-block-start: 1px solid var(--rule);
  }

  .site-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem var(--page-pad);
    color: var(--dim-dark);
    background: var(--dark);
    border-block-start: 1px solid var(--rule-dark);
  }
}

@layer responsive {
  @media (max-width: 70rem) {
    :root { --header-h: 6.8rem; }

    .site-header {
      grid-template-columns: 1fr;
      grid-template-rows: 3.2rem 3.5rem;
      gap: 0;
      padding-inline: var(--page-pad);
    }

    .chapter-nav {
      inline-size: calc(100% + (2 * var(--page-pad)));
      margin-inline: calc(-1 * var(--page-pad));
      padding-inline: var(--page-pad);
      justify-content: flex-start;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      border-block-start: 1px solid var(--rule-dark);
    }

    .chapter-nav::-webkit-scrollbar { display: none; }
    .site-header__meta { margin-inline-start: auto; }

    .opening-grid {
      grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.8fr);
    }

    .evidence-layout,
    .pilot-layout,
    .decision-layout { grid-template-columns: 1fr; }

    .evidence-layout { gap: 3.5rem; }
    .decision-layout__question,
    .decision-layout__questions { grid-column: 1; grid-row: auto; }
    .decision-layout__question > p { margin-inline-start: 0; }
    .decision-layout__questions { margin-block-start: 2.5rem; }
  }

  @media (max-width: 50rem) {
    :root {
      --page-pad: clamp(1.15rem, 5vw, 2rem);
      --section-pad: clamp(3.5rem, 13vw, 5.5rem);
      --claim-size: clamp(2.35rem, 1.7rem + 3.2vw, 3.35rem);
      --display-size: clamp(3rem, 2.2rem + 4vw, 4.3rem);
    }

    .chapter__inner,
    .chapter--dense .chapter__inner { min-block-size: auto; }

    .chapter__inner { padding-block: var(--section-pad); }
    .chapter--opening .chapter__inner { min-block-size: calc(100svh - var(--header-h)); }

    .opening-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr auto auto;
      align-items: start;
      gap: 2.5rem;
    }

    .opening-grid > h1,
    .opening-grid__gloss,
    .opening-grid__base { grid-column: 1; }
    .opening-grid > h1 { align-self: center; }
    .opening-grid__gloss { align-self: end; }

    .phase-grid,
    .readiness-grid { grid-template-columns: 1fr; }
    .phase { min-block-size: 21rem; }

    .step-grid,
    .component-grid,
    .measurement-grid { grid-template-columns: 1fr; }

    .step-grid { gap: 0; }
    .step-grid li {
      min-block-size: 9rem;
      padding-block: 1rem;
    }

    .step-grid li + li { border-block-start: 1px solid var(--rule); }
    .component-grid li { min-block-size: 6.5rem; }
    .component-grid li:nth-child(n + 2) { border-block-start: 1px solid var(--rule); }
    .measurement-grid li:nth-last-child(-n + 3) { border-block-end: 1px solid var(--rule); }
    .measurement-grid li:last-child { border-block-end: 0; }

    .term-table section { grid-template-columns: 1fr; gap: 1rem; }
    .term-table h3 { margin: 0; }

    .readiness-grid > section + section { margin-block-start: 2rem; }
    .chapter-close { margin-block-start: 2.5rem; }

    .product-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, clamp(10rem, 44vw, 16rem));
    }

    .product-grid img:nth-child(1),
    .product-grid img:nth-child(2),
    .product-grid img:nth-child(n + 3) { grid-column: span 1; }
    .product-grid img:last-child { grid-column: 1 / -1; }
  }

  @media (max-width: 31rem) {
    .site-header__meta { display: none; }
    .opening-grid__base,
    .site-footer { flex-direction: column; }
    .apparatus { grid-template-columns: auto 0.55rem; justify-content: start; }
    .apparatus p:last-child { grid-column: 1 / -1; margin-block-start: 0.35rem; }
    .phase { padding: 1.35rem; }
    .product-grid { grid-template-rows: repeat(3, clamp(9rem, 45vw, 12rem)); }
  }

  @media (pointer: coarse) {
    .chapter-nav a { min-inline-size: 2.75rem; min-block-size: 2.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media print {
    .site-header, .skip-link { display: none; }
    .chapter { break-before: page; }
    .chapter:first-child { break-before: auto; }
    .chapter__inner { min-block-size: 100vh; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}