/* ==========================================================================
   site.css — the chrome every document shares: bar, hero, footer, and the
   components the section rhythm is built from.
   ========================================================================== */

/* ---- bar ----------------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: var(--rule) solid var(--plate);
}
.bar .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .11em;
  font-size: 15px;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; }

.nav { margin-left: auto; display: flex; gap: clamp(10px, 1.6vw, 24px); align-items: center; }
.nav a {
  color: var(--ink3);
  font-size: 14px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.xlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  color: var(--ink3);
  border: var(--rule) solid var(--plate2);
  border-radius: var(--r);
  margin-left: 4px;
}
.xlink:hover { color: var(--ink); border-color: var(--accent); text-decoration: none; }

.navtoggle {
  display: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  background: transparent;
  border: var(--rule) solid var(--plate2);
  color: var(--ink2);
  padding: 7px 11px;
  border-radius: var(--r);
  cursor: pointer;
}

@media (max-width: 900px) {
  /* The nav collapses, so the two controls sit together at the right: the X
     mark takes the auto margin and MENU follows it. Without the explicit
     order the toggle keeps the auto margin from its base rule and is
     stranded in the middle of the bar beside the wordmark. */
  .xlink { margin-left: auto; order: 2; }
  .navtoggle { display: block; margin-left: 8px; order: 3; }
  .nav {
    position: absolute;
    top: 62px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground2);
    border-bottom: var(--rule) solid var(--plate2);
    padding: 6px var(--gut) 14px;
    display: none;
    order: 4;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: var(--rule) solid var(--plate); }
  .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
}

/* ---- hero ---------------------------------------------------------------- */
.hero {
  padding-top: clamp(34px, 5vw, 62px);
  padding-bottom: clamp(34px, 5vw, 66px);
  border-bottom: var(--rule) solid var(--plate);
}
.hero .grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(26px, 4vw, 62px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero .grid { grid-template-columns: minmax(0, 1fr); }
}
.hero h1 { margin-bottom: .34em; }
.hero .claim {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 27px);
  color: var(--accent);
  letter-spacing: -.018em;
  line-height: 1.22;
  margin: 0 0 .8em;
  max-width: 20ch;
}

/* THE SILO. A canvas, sized by its container and drawn at device pixel
   ratio; the aspect ratio is set here because the simulation's own geometry
   decides the shape and the layout must not squash it. */
.silo {
  position: relative;
  background: var(--deep);
  border: var(--rule) solid var(--plate2);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 320px;
}
.silo canvas { display: block; width: 100%; height: 100%; }
.silo .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--ink3);
  background: linear-gradient(to top, var(--deep), transparent);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.silo .caption b { color: var(--ink); font-weight: 500; }
.silo .legend {
  position: absolute;
  top: 12px; left: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink3);
  line-height: 1.7;
  pointer-events: none;
}
.silo .legend i { font-style: normal; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.dot-moving { background: var(--accent-mark); }
.dot-still { background: var(--plate2); }
.dot-ramp {
  width: 34px !important;
  height: 7px !important;
  border-radius: 4px !important;
  background: linear-gradient(to right, var(--plate2), var(--accent-mark));
}
.silo .legend .sub { color: var(--faint); padding-left: 40px; }

/* ---- the CA / status pill ------------------------------------------------ */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink3);
  border: var(--rule) solid var(--plate2);
  background: var(--plate);
  border-radius: 999px;
  padding: 5px 12px;
}
.pill b { color: var(--ink); font-weight: 500; }
.pill.mark { border-color: var(--accent); color: var(--accent); }

/* The section immediately after a hero carries the hero's own bottom padding
   as well as its own, which reads as a hole. */
.hero + section { padding-top: clamp(34px, 5vw, 64px); }

/* ---- stat row ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--plate2);
  border: var(--rule) solid var(--plate2);
  border-radius: var(--r);
  overflow: hidden;
}
.stat { background: var(--ground2); padding: 18px 20px; min-width: 0; }
.stat .v {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.7vw, 31px);
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.stat .k {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.4;
}

/* ---- before / after ------------------------------------------------------ */
.ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2.5vw, 32px); }
.ba > div { min-width: 0; }
.ba h3 { margin-bottom: .7em; }
.ba .tagline {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .8em;
  display: block;
}
.ba ul { margin: 0; padding: 0; list-style: none; }
.ba li {
  padding: .55em 0 .55em 22px;
  border-bottom: var(--rule) dotted var(--plate2);
  position: relative;
  font-size: 15px;
  color: var(--ink2);
}
.ba li::before {
  content: '';
  position: absolute;
  left: 2px; top: 1.02em;
  width: 9px; height: var(--rule);
  background: var(--faint);
}
.ba .after li::before { background: var(--accent); }

/* ---- feature cards ------------------------------------------------------- */
.card { min-width: 0; }
.card h3 { margin-bottom: .4em; }
.card .term {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: .7em;
}
.card p { font-size: 15.5px; color: var(--ink2); }
.card ul { margin: 1em 0 0; padding: 0; list-style: none; }
.card li {
  font-size: 14px;
  color: var(--ink3);
  padding: .38em 0 .38em 18px;
  position: relative;
}
.card li::before {
  content: '';
  position: absolute; left: 0; top: .95em;
  width: 7px; height: var(--rule);
  background: var(--accent);
}

/* ---- numbered steps ------------------------------------------------------ */
.steps { display: grid; gap: 1px; background: var(--plate2); border: var(--rule) solid var(--plate2); border-radius: var(--r); overflow: hidden; }
.step { background: var(--ground2); padding: clamp(18px, 2.2vw, 26px); min-width: 0; }
.step .n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--accent);
  display: block;
  margin-bottom: .6em;
}
.step h3 { font-size: 19px; margin-bottom: .35em; }
.step p { font-size: 15px; color: var(--ink2); margin: 0; }
@media (min-width: 720px) { .steps.four { grid-template-columns: repeat(4, 1fr); } .steps.three { grid-template-columns: repeat(3, 1fr); } }

/* ---- FAQ ----------------------------------------------------------------- */
/* A question set in a 1180px measure reads as a banner, not a question. */
.faq { max-width: 880px; }
.faq details {
  border-bottom: var(--rule) solid var(--plate2);
  padding: .2em 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: .95em 34px .95em 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: 6px; top: .82em;
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--accent);
  line-height: 1;
}
.faq details[open] summary::after { content: '–'; }
.faq .a { padding: 0 0 1.2em; color: var(--ink2); font-size: 15.5px; }
.faq .a p { max-width: 62ch; }

/* ---- notes and callouts -------------------------------------------------- */
.note {
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  padding: 14px 18px;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 15px;
  color: var(--ink2);
}
.note.arrest { border-left-color: var(--oxide); background: var(--oxide-wash); }
.note.measured { border-left-color: var(--vent); background: var(--vent-wash); }
.note b { color: var(--ink); }
.note p { max-width: 64ch; }

.unbuilt {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oxide);
  border: var(--rule) solid var(--oxide);
  border-radius: var(--r-sm);
  padding: .2em .5em;
  vertical-align: .15em;
}

/* ---- footer -------------------------------------------------------------- */
.foot {
  border-top: var(--rule) solid var(--plate);
  background: var(--ground2);
  padding-block: clamp(38px, 5vw, 62px) 30px;
  margin-top: var(--step);
}
.foot .cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
}
@media (max-width: 820px) { .foot .cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.foot h4 { margin-bottom: 1em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .5em; }
.foot li a { color: var(--ink3); font-size: 14.5px; }
.foot li a:hover { color: var(--ink); }
.foot .state {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink3);
  border: var(--rule) solid var(--plate2);
  border-radius: 999px;
  padding: 5px 12px;
}
.foot .state:hover { color: var(--ink); text-decoration: none; border-color: var(--accent); }
.legal {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 20px;
  border-top: var(--rule) solid var(--plate);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--faint);
}
.legal p { margin: 0; max-width: none; }