/* ==========================================================================
   Atypical Resolvers — site.css
   Layout metaphor: an engineering drawing sheet. A ruled spine down the left,
   hairline separators between bands, a title block at the foot.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts

   Self-hosted. No third-party request, which is why style-src and font-src in
   ui/_headers are both 'self' and the privacy page has no font processor to
   name. Files are the Google Fonts latin and latin-ext subsets; regenerate
   with tools/build-fonts.sh if a family or subset changes.

   The two Fallback families carry metric overrides so the swap from fallback
   to webfont does not move the layout. Numbers are measured, not guessed:
   xWidthAvg for both sides is computed by @capsizecss, Archivo against Arial
   and Spectral against Georgia. Only the 400 upright faces are matched, which
   is where nearly all the body copy sits. Azeret Mono has no matched fallback;
   it is confined to small labels where a shift is not worth the guesswork.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/static/fonts/k3kQo8UDI-1M0wlSfdnoLg.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/static/fonts/k3kQo8UDI-1M0wlSfdfoLnnA.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/rnCr-xNNww_2s0amA9M5kng.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/rnCr-xNNww_2s0amA9M3knj-SA.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/rnCs-xNNww_2s0amA9vmtm3BafY.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/rnCs-xNNww_2s0amA9vmtm3PafadWQ.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/rnCt-xNNww_2s0amA9M8onrmTA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/rnCt-xNNww_2s0amA9M8onTmTMuk.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/3XF5ErsiyJsY9O_Gepph-FvtTQgMQUdNekSfrvVR1byb.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Azeret Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/3XF5ErsiyJsY9O_Gepph-FvtTQgMQUdNekSfrvVR27yby5s.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Measured against Arial: size-adjust 102.29%, ascent 85.84%, descent 20.53%. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 102.29%;
  ascent-override: 85.84%;
  descent-override: 20.53%;
  line-gap-override: 0%;
}

/* Measured against Georgia: size-adjust 100.04%, ascent 105.85%, descent 46.28%. */
@font-face {
  font-family: 'Spectral Fallback';
  src: local('Georgia');
  size-adjust: 100.04%;
  ascent-override: 105.85%;
  descent-override: 46.28%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour. Neutrals are tinted toward the mark hue so surfaces and accent
     belong to the same family. Every pairing used for text passes WCAG AA. */
  --paper:        oklch(97.8% 0.005 70);
  --paper-sunk:   oklch(95.5% 0.007 68);
  --paper-deep:   oklch(92.8% 0.009 66);
  --ink:          oklch(20.5% 0.014 55);
  --ink-muted:    oklch(43.5% 0.013 55);
  --ink-faint:    oklch(50.5% 0.012 55);
  --rule:         oklch(87.2% 0.008 62);
  --rule-strong:  oklch(77.5% 0.010 60);
  --mark:         oklch(52.5% 0.176 32);
  --mark-deep:    oklch(45.5% 0.155 32);

  --dark-ink:     oklch(18.5% 0.014 55);
  --dark-paper:   oklch(94.5% 0.006 70);
  --dark-muted:   oklch(73.5% 0.011 62);
  --dark-faint:   oklch(64.0% 0.012 60);
  --dark-rule:    oklch(32.0% 0.013 55);
  --dark-mark:    oklch(70.0% 0.150 34);

  --focus: var(--mark);

  /* Type. Archivo carries structure, Spectral carries the argument,
     Azeret Mono is reserved for indices and instrument labels. */
  --font-display: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text:    'Spectral', 'Spectral Fallback', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  clamp(1.1875rem, 0.45vw + 1.09rem, 1.4375rem);
  --step-2:  clamp(1.5rem,  1.1vw + 1.24rem, 2.125rem);
  --step-3:  clamp(1.9375rem, 2.3vw + 1.4rem, 3rem);
  --step-4:  clamp(2.875rem, 6.2vw + 0.9rem, 5.5rem);

  --leading-tight: 1.06;
  --leading-snug:  1.24;
  --leading-body:  1.62;
  --tracking-label: 0.11em;

  /* Space: 4pt scale. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --band-y:  clamp(3.5rem, 6.5vw, 7rem);
  --gutter:  clamp(1.25rem, 4.5vw, 3.5rem);
  --index-col: 0px;

  /* Layout */
  --sheet-max: 1440px;
  --measure:   66ch;

  --hairline: 1px solid var(--rule);
  --radius: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 700ms;
}

@media (min-width: 62rem) {
  :root { --index-col: clamp(5.25rem, 8.5vw, 8.5rem); }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper-deep);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--mark); color: var(--paper); }

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: 0;
  z-index: 60;
  transform: translateY(-140%);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step--1);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Sheet and bands
   -------------------------------------------------------------------------- */

.sheet {
  max-width: var(--sheet-max);
  margin-inline: auto;
  background: var(--paper);
  border-inline: var(--hairline);
}

/* The spine: one continuous hairline at the index/body boundary. Bands with
   their own background (the dark one) paint over it and redraw it themselves. */
main {
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 1px 100%;
  background-position: calc(var(--gutter) + var(--index-col) - 1px) 0;
  background-repeat: no-repeat;
}

.band {
  position: relative;
  display: grid;
  grid-template-columns: var(--index-col) minmax(0, 1fr);
  padding-inline: var(--gutter);
  padding-block: var(--band-y);
  border-top: var(--hairline);
}
.band:first-child { border-top: 0; }

.band__index { grid-column: 1; }
.band__body  { grid-column: 2; padding-left: 0; }

@media (min-width: 62rem) {
  .band__body { padding-left: var(--space-xl); }
}

.idx {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.idx::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--mark);
}

/* On narrow screens the spine collapses and the index sits above the band. */
@media (max-width: 61.99rem) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .band__index { grid-column: 1; margin-bottom: var(--space-md); }
  .band__body  { grid-column: 1; }
  main { background-image: none; }
}

.band__head { margin-bottom: var(--space-xl); }

.kicker {
  font-family: var(--font-display);
  font-size: var(--step--2);
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  font-stretch: 102%;
  line-height: var(--leading-snug);
  letter-spacing: -0.018em;
  max-width: 25ch;
  text-wrap: balance;
}

.section-lede {
  margin-top: var(--space-md);
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: var(--hairline);
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-inline: var(--gutter);
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  margin-right: auto;
  padding-block: var(--space-2xs);
}
.wordmark__mark { overflow: visible; }
.wordmark__base { stroke: var(--ink); stroke-width: 2; fill: none; }
.wordmark__spike {
  stroke: var(--mark);
  stroke-width: 2;
  fill: none;
  stroke-linejoin: miter;
  transition: transform var(--dur) var(--ease-out);
  transform-origin: 15px 12.5px;
}
.wordmark:hover .wordmark__spike { transform: scaleY(1.28); }

.wordmark__text {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur-fast) linear;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.45rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current] { color: var(--ink); }
.nav__link[aria-current]::after { background: var(--mark); transform: scaleX(1); }

.nav__contact { display: none; }

.masthead__cta { flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.25rem;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 20px; }
.nav-toggle__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .nav-toggle { display: inline-flex; }
  /* Scoped so it outranks the later .btn display rule. */
  .masthead__row .masthead__cta { display: none; }
  .nav__contact { display: block; }

  /* An overlay panel, so only opacity and transform animate. `visibility`
     keeps the collapsed links out of the tab order. */
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                border-color var(--dur) linear,
                visibility 0s linear var(--dur);
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    border-bottom-color: var(--rule);
    transition-delay: 0s;
  }
  .nav__list { display: block; padding-inline: var(--gutter); }
  .nav__list > li { border-top: var(--hairline); }
  .nav__link {
    display: block;
    padding-block: var(--space-sm);
    font-size: 1.0625rem;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current] { color: var(--mark); }
}

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear,
              border-color var(--dur-fast) linear;
}
.btn--lg { padding: 0.9rem 1.6rem; font-size: 1rem; }

.btn--primary { background: var(--mark); color: var(--paper); }
.btn--primary:hover { background: var(--mark-deep); }
.btn--primary:active { background: var(--mark-deep); }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover { color: var(--mark); border-bottom-color: var(--mark); }
.link-arrow:hover::after { transform: translateX(4px); }

.link-underline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.link-underline:hover { color: var(--mark); text-decoration-color: var(--mark); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.band--hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 6vw, 6rem); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  font-stretch: 100%;
  line-height: var(--leading-tight);
  letter-spacing: -0.033em;
  max-width: 15ch;
  text-wrap: balance;
}

/* The one element permitted to ignore the spine. */
@media (min-width: 62rem) {
  .band--hero .hero__title { margin-left: calc(var(--space-xl) * -1); }
}

.hero__lead {
  margin-top: var(--space-lg);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.48;
  color: var(--ink);
  text-wrap: pretty;
}

.hero__sub {
  margin-top: var(--space-sm);
  max-width: 46ch;
  font-size: var(--step-0);
  color: var(--ink-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 1.25rem; }
.hero__meta span:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 0.75em;
  background: var(--rule-strong);
}

/* Two-up grid on small screens: wrapping an inline list leaves a dangling rule. */
@media (max-width: 33.99rem) {
  .hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
  .hero__meta span::after { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero diagram
   -------------------------------------------------------------------------- */

.diagram { margin-top: clamp(2.5rem, 5vw, 4rem); }

.diagram__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Gantt grammar, because it is the one schedule notation every engineering
   buyer already reads. Both schedules share one time axis and one committed
   date, so the comparison the page is making is the one the eye makes. */
.dg-axis line { stroke: var(--rule-strong); stroke-width: 1; }
.dg-axis path { stroke: var(--rule-strong); stroke-width: 1; fill: none; }

.dg-deadline {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* Sequential lanes, waiting on each other. Light, because they are the foil. */
.dg-bar      { fill: var(--rule-strong); }
/* The schedule that holds: shorter phases, nothing queued behind a handover. */
.dg-bar--own { fill: var(--ink); }

/* Red still marks the fault: the handoff gaps, and the release they push past
   the committed date. The overrun needs no label, because the two schedules
   run against one clock and the eye reads the difference. */
.dg-seams rect { fill: var(--mark); }

.dg-milestone        { fill: var(--ink); }
.dg-milestone--late  { fill: var(--mark); }

/* Label sizes are in viewBox units, so they shrink with the drawing. Step them
   up on narrow screens to hold the rendered size near 11px throughout. */
.dg-label {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-faint);
}
.dg-label--strong { fill: var(--ink); }

/* Column headings sit one step down from the row labels so "Infrastructure"
   clears its column. Below the small breakpoint there is no room for them at
   a readable size, so they drop; broken-versus-unbroken still reads without
   them, and the caption names the four layers. */
.dg-label--col { display: none; }

@media (min-width: 34rem) {
  .dg-label { font-size: 20px; }
  .dg-label--col { display: inline; font-size: 14px; }
}
@media (min-width: 62rem) {
  .dg-label { font-size: 12px; letter-spacing: 0.09em; }
  .dg-label--col { font-size: 10px; letter-spacing: 0.07em; }
}

.diagram__caption {
  margin-top: var(--space-md);
  max-width: 62ch;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   8. Situations
   -------------------------------------------------------------------------- */

.situations { border-top: var(--hairline); }

.situation__row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  padding-inline: var(--space-sm);
  margin-inline: calc(var(--space-sm) * -1);
  border-bottom: var(--hairline);
}

.situation__no {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-faint);
  padding-top: 0.45em;
  font-variant-numeric: tabular-nums;
}

.situation__claim {
  display: block;
  font-size: var(--step-1);
  line-height: 1.36;
  color: var(--ink);
  text-wrap: pretty;
}

.situation__detail {
  display: block;
  margin-top: var(--space-2xs);
  max-width: 64ch;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   9. Capabilities
   -------------------------------------------------------------------------- */

/* Two columns, never three: four items in a three-up grid orphans the last. */
.quadrants {
  display: grid;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: var(--space-xl);
}
@media (min-width: 46rem) {
  .quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.quadrant { border-top: 1px solid var(--ink); padding-top: var(--space-md); }

.quadrant__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  font-stretch: 102%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.quadrant__note {
  margin-top: var(--space-2xs);
  font-style: italic;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 34ch;
}

.quadrant__list { margin-top: var(--space-md); display: grid; gap: 0.55rem; }
.quadrant__list li {
  display: grid;
  grid-template-columns: 0.875rem 1fr;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink);
}
.quadrant__list li::before {
  content: "";
  height: 1px;
  background: var(--rule-strong);
  transform: translateY(-0.35em);
}

/* --------------------------------------------------------------------------
   10. Approach (dark band)
   -------------------------------------------------------------------------- */

.band--dark {
  background: var(--dark-ink);
  color: var(--dark-paper);
  border-top-color: var(--dark-ink);
  --focus: var(--dark-mark);
}
.band--dark .kicker       { color: var(--dark-faint); }
.band--dark .section-lede { color: var(--dark-muted); }
.band--dark .idx          { color: var(--dark-faint); }
.band--dark .idx::before  { background: var(--dark-mark); }

/* Redraw the spine inside the dark band. */
@media (min-width: 62rem) {
  .band--dark::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) + var(--index-col) - 1px);
    width: 1px;
    background: var(--dark-rule);
  }
}

.stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-xl) clamp(1.75rem, 3.5vw, 3rem);
}

.stage { border-top: 1px solid var(--dark-rule); padding-top: var(--space-md); }
.stage--last { border-top-color: var(--dark-mark); }

.stage__no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--dark-faint);
}
.stage--last .stage__no { color: var(--dark-mark); }

.stage__title {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  font-stretch: 102%;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.stage__body {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  line-height: 1.68;
  color: var(--dark-muted);
}

/* --------------------------------------------------------------------------
   11. About
   -------------------------------------------------------------------------- */

.about { display: grid; gap: var(--space-xl); }

@media (min-width: 55rem) {
  .about {
    grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 0.85fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.about__prose { display: grid; gap: var(--space-md); max-width: var(--measure); }
.about__prose p { color: var(--ink-muted); text-wrap: pretty; }
.about__first { font-size: var(--step-1); line-height: 1.5; color: var(--ink) !important; }

.spec__list { border-top: 1px solid var(--ink); }
.spec__row {
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-sm);
  border-bottom: var(--hairline);
}
.spec__row dt {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.spec__row dd {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */

.band--contact { background: var(--paper-sunk); }

.contact { display: grid; gap: var(--space-xl); }

@media (min-width: 55rem) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

.contact__intro .section-title { max-width: 16ch; }
.contact__aside {
  margin-top: var(--space-md);
  max-width: 42ch;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
/* The address is the whole call to action, so it gets the strong rule the spec
   block uses rather than a panel. */
.reach {
  align-self: start;
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink);
}

.reach__key {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.reach__addr {
  margin-top: var(--space-xs);
  font-size: var(--step-1);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.reach__btn { margin-top: var(--space-lg); }

.reach__note {
  margin-top: var(--space-md);
  max-width: 34ch;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   13. Document pages (privacy)
   -------------------------------------------------------------------------- */

.doc { display: grid; gap: var(--space-md); max-width: var(--measure); }
.doc p { color: var(--ink-muted); text-wrap: pretty; }
.doc h3 {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
}
.doc ul { display: grid; gap: 0.5rem; }
.doc ul li {
  display: grid;
  grid-template-columns: 0.875rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}
.doc ul li::before {
  content: "";
  height: 1px;
  background: var(--rule-strong);
  transform: translateY(-0.35em);
}
.doc__meta {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  color: var(--ink-faint) !important;
}

.band--confirm { min-height: 52vh; align-content: center; }

/* --------------------------------------------------------------------------
   14. Colophon and title block
   -------------------------------------------------------------------------- */

.colophon { border-top: 1px solid var(--ink); background: var(--paper); }

.titleblock {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-bottom: var(--hairline);
}
@media (min-width: 48rem) {
  .titleblock { grid-template-columns: 1.6fr 1.2fr 0.8fr; }
  .titleblock__cell--note { grid-column: 1 / -1; }
}

.titleblock__cell {
  background: var(--paper);
  padding: var(--space-md) var(--gutter);
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
}
.titleblock__cell p { font-size: var(--step--1); color: var(--ink-muted); }

.titleblock__key {
  font-family: var(--font-display);
  font-size: 0.625rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint) !important;
  margin-bottom: var(--space-2xs);
}

.titleblock__brand {
  font-family: var(--font-display);
  font-size: 1.375rem !important;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink) !important;
  line-height: 1.15;
}
.titleblock__tag { font-style: italic; }
.titleblock__mono {
  font-family: var(--font-mono);
  font-size: var(--step--2) !important;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.lore { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.lore__text {
  font-size: var(--step--1);
  color: var(--ink);
  transition: opacity 160ms linear;
}
.lore__text.is-swapping { opacity: 0; }
.lore__toggle {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline dotted;
  text-underline-offset: 0.28em;
  cursor: pointer;
}
.lore__toggle:hover { color: var(--mark); }

.colophon__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-md) var(--gutter);
  font-size: var(--step--2);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  .js [data-anim].is-in { opacity: 1; transform: none; }

  /* One orchestrated entrance for the hero rather than scattered effects. */
  .js .hero__title   { transition-delay: 0ms; }
  .js .hero__lead    { transition-delay: 90ms; }
  .js .hero__sub     { transition-delay: 180ms; }
  .js .hero__actions { transition-delay: 270ms; }
  .js .hero__meta    { transition-delay: 360ms; }

  /* Both schedules run against one clock. Every bar grows at the same rate,
     3.5ms per viewBox unit, so how long a bar takes to draw is how long that
     phase takes. Delay is the bar's start on the axis, duration is its width.
     That is what makes the comparison legible without a slip label: the two
     rows start together and the lower one is finished while the upper one is
     still drawing. Keep the numbers in step with the SVG geometry. */
  .dg-axis, .dg-deadline, .dg-labels {
    opacity: 0;
    animation: dg-fade 600ms var(--ease-out) forwards;
  }
  .dg-deadline { animation-delay: 300ms; }
  .dg-labels   { animation-delay: 460ms; }

  .dg-seams rect, .dg-milestone {
    opacity: 0;
    animation: dg-fade 420ms var(--ease-out) forwards;
  }
  .dg-seams rect:nth-child(1) { animation-delay: 1436ms; }
  .dg-seams rect:nth-child(2) { animation-delay: 2066ms; }
  .dg-group--practice .dg-milestone { animation-delay: 2129ms; }
  .dg-group--typical  .dg-milestone { animation-delay: 2727ms; }

  /* Bars grow left to right like a schedule filling in. Linear, because an
     ease would break the constant rate the whole comparison rests on. */
  .dg-bar {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation: dg-grow linear forwards;
  }
  .dg-group--typical  .dg-bar:nth-of-type(1) { animation-delay: 620ms;  animation-duration: 788ms; }
  .dg-group--typical  .dg-bar:nth-of-type(2) { animation-delay: 1530ms; animation-duration: 508ms; }
  .dg-group--typical  .dg-bar:nth-of-type(3) { animation-delay: 2160ms; animation-duration: 518ms; }
  .dg-group--practice .dg-bar:nth-of-type(1) { animation-delay: 620ms;  animation-duration: 595ms; }
  .dg-group--practice .dg-bar:nth-of-type(2) { animation-delay: 1215ms; animation-duration: 403ms; }
  .dg-group--practice .dg-bar:nth-of-type(3) { animation-delay: 620ms;  animation-duration: 1460ms; }
}

@keyframes dg-grow { to { transform: scaleX(1); } }
@keyframes dg-fade { to { opacity: 1; } }

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