/* =========================================================================
   RIGHTS — navigation, sections, components
   ========================================================================= */

/* ======================================================== navigation ==== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding-top: clamp(16px, 2.1vh, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.nav__row {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.nav__mark,
.nav__pill {
  background: rgba(252, 252, 251, 0.62);
  border: 1px solid rgba(17, 18, 20, 0.055);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  transition: background-color 0.7s var(--ease), border-color 0.7s var(--ease),
              color 0.7s var(--ease);
}

.nav__mark {
  width: 42px; height: 42px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--text);
}
.nav__mark svg { width: 17px; height: 17px; }
.nav__mark svg * { transition: transform 0.9s var(--ease-out); transform-origin: 50% 50%; }
.nav__mark:hover svg { transform: rotate(45deg); }
.nav__mark svg { transition: transform 0.9s var(--ease-out); transform-origin: 50% 50%; }

.nav__pill {
  position: relative;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: stretch;
  padding: 0 5px;
}

.nav__marker {
  position: absolute;
  top: 3px; left: 0;
  height: calc(100% - 6px);
  border-radius: 999px;
  background: rgba(17, 18, 20, 0.055);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.nav.is-dark .nav__marker { background: rgba(255, 255, 255, 0.09); }

.nav__link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 clamp(11px, 1.05vw, 17px);
  font-size: var(--t-nav);
  letter-spacing: -0.012em;
  color: rgba(17, 18, 20, 0.82);
  white-space: nowrap;
  transition: color 0.45s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current='true'] { color: var(--text); }

/* context strip under the pill */
.nav__ctx {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 31px;
  min-width: 270px;
  justify-content: space-between;
  padding: 0 5px 0 16px;
  border-radius: 999px;
  background: rgba(252, 252, 251, 0.42);
  border: 1px solid rgba(17, 18, 20, 0.035);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  transition: background-color 0.7s var(--ease), border-color 0.7s var(--ease),
              opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.nav__ctx-txt {
  font-size: var(--t-micro);
  color: var(--muted);
  letter-spacing: -0.002em;
  white-space: nowrap;
  transition: color 0.7s var(--ease), opacity 0.35s var(--ease),
              filter 0.35s var(--ease);
}
.nav__ctx-cap {
  width: 31px; height: 18px;
  border: 1px solid rgba(22, 117, 232, 0.45);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--blue);
  flex: none;
}
.nav__ctx-cap svg { width: 11px; height: 11px; }
.nav__ctx:hover .nav__ctx-cap { border-color: rgba(22, 117, 232, 0.85); }

/* dark theme for the floating instrument */
.nav.is-dark .nav__mark,
.nav.is-dark .nav__pill {
  background: rgba(20, 21, 24, 0.5);
  border-color: rgba(255, 255, 255, 0.085);
  color: var(--on-dark);
}
.nav.is-dark .nav__link { color: rgba(255, 255, 255, 0.7); }
.nav.is-dark .nav__link:hover,
.nav.is-dark .nav__link[aria-current='true'] { color: #fff; }
.nav.is-dark .nav__ctx {
  background: rgba(20, 21, 24, 0.3);
  border-color: rgba(255, 255, 255, 0.07);
}
.nav.is-dark .nav__ctx-txt { color: rgba(255, 255, 255, 0.42); }

/* over the blue band the instrument reads as tinted glass */
.nav.is-blue .nav__mark,
.nav.is-blue .nav__pill {
  background: rgba(255, 255, 255, 0.17);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.nav.is-blue .nav__link { color: rgba(255, 255, 255, 0.82); }
.nav.is-blue .nav__link:hover { color: #fff; }
.nav.is-blue .nav__marker { background: rgba(255, 255, 255, 0.16); }
.nav.is-blue .nav__ctx {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.16);
}
.nav.is-blue .nav__ctx-txt { color: rgba(255, 255, 255, 0.72); }
.nav.is-blue .nav__ctx-cap { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.nav__ctx.is-hidden { opacity: 0; transform: translateY(-4px); pointer-events: none; }

/* --------------------------------------------------- left edge mark ----- */

.side-mark {
  position: fixed;
  left: clamp(14px, 4.1vw, 68px);
  top: 50%;
  z-index: 70;
  width: 34px; height: 23px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  display: grid; place-items: center;
  transform: translateY(-50%) scale(0.7);
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease-out),
              background-color 0.5s var(--ease);
}
.side-mark svg { width: 13px; height: 13px; }
.side-mark.is-on { opacity: 1; transform: translateY(-50%) scale(1); }
.side-mark:hover { background: var(--blue-deep); }

/* =========================================================== section ==== */

.section {
  position: relative;
  padding-block: clamp(100px, 13.5vh, 186px);
}
.section--tall { padding-block: clamp(128px, 18vh, 252px); }
/* a second dark block continues the same field — it does not restart it */
.section--ink-2 { padding-block: clamp(66px, 8vh, 118px) clamp(100px, 13.5vh, 186px); }
.section--light { background: var(--paper-2); }
.section--ink { background: var(--ink); }
.section--ink-2 { background: var(--ink-2); }

.seam { position: relative; }

/* ------------------------------------------------- 01 · the statement --- */

.statement__label { padding-top: 0.35em; }
.statement__body { max-width: 21.5em; }
.statement__body .stmt + .stmt { margin-top: 0.95em; }
.statement__tail {
  margin-top: clamp(30px, 3.6vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 30px);
  align-items: flex-start;
}
.statement__support {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--text-soft);
  max-width: 27em;
}

/* ------------------------------------------------------ 02 · network --- */

.lede { margin-bottom: clamp(48px, 6.4vw, 104px); }
.lede__a { display: block; font-size: var(--t-body); color: var(--on-dark); }
.lede__b { display: block; font-size: var(--t-body); color: var(--blue); }
.section--light .lede__a { color: var(--text); }

.rows { border-top: 1px solid var(--hairline-dark-2); }
.section--light .rows { border-top-color: var(--hairline-2); }

.row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
  padding-block: clamp(20px, 2.5vw, 38px);
  border-bottom: 1px solid var(--hairline-dark-2);
}
.section--light .row { border-bottom-color: var(--hairline-2); }
.row__label { grid-column: 2; }
.row__label .index { display: block; }
.row__label .label { display: block; margin-top: 2px; }
.row__title {
  grid-column: 3 / 6;
  font-size: var(--t-stmt);
  font-weight: 300;
  letter-spacing: -0.024em;
  line-height: 1.2;
}
.row__title em {
  font-style: normal;
  color: var(--on-dark-muted);
}
.section--light .row__title em { color: var(--muted); }

/* claim line + metrics */
.claimline {
  margin-top: clamp(64px, 8vw, 130px);
  font-size: var(--t-stmt);
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -0.024em;
  max-width: 18em;
}
.claimline > span { display: block; }
.claimline > span:last-child { color: var(--on-dark-soft); }

.metrics {
  margin-top: clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 30px;
}
.metric { }
.metric:nth-child(1) { grid-column: 3; }
.metric:nth-child(2) { grid-column: 4; }
.metric:nth-child(3) { grid-column: 5; }
.metric__tick {
  display: block;
  width: 9px; height: 1px;
  background: var(--on-dark-muted);
  margin-bottom: 12px;
}
.metric__value {
  display: block;
  margin-top: 8px;
  font-size: clamp(20px, 1.74vw, 29px);
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.metrics__note {
  grid-column: 3 / 6;
  font-size: var(--t-micro);
  color: var(--on-dark-muted);
  letter-spacing: 0.005em;
  margin-top: 4px;
}

/* lexicon */
.lexicon {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 30px;
  padding-top: clamp(46px, 5.6vw, 92px);
  border-top: 1px solid var(--hairline-dark-2);
  margin-top: clamp(46px, 5.6vw, 92px);
}
.lexicon__label { grid-column: 2; }
.lexicon > .lex:nth-child(2) { grid-column: 3; }
.lexicon > .lex:nth-child(3) { grid-column: 4; }
.lexicon > .lex:nth-child(4) { grid-column: 5; }
.lex__term {
  font-size: var(--t-body);
  color: var(--blue);
  letter-spacing: -0.01em;
}
.lex__term sup { font-size: 0.66em; top: -0.5em; position: relative; }
.lex__def {
  margin-top: 14px;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 13ch;
}

/* -------------------------------------------- 04 · rights protocol ------ */

.protocol__head {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 26px;
  margin-bottom: clamp(56px, 7vw, 112px);
}
.protocol__label { grid-column: 2; }
.protocol__statement { grid-column: 3 / 6; max-width: 14em; }
.protocol__statement .stmt > span { display: block; }
.protocol__statement .stmt > span:last-child { color: var(--on-dark-soft); }

.states { border-top: 1px solid var(--hairline-dark-2); }
.state {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: baseline;
  padding-block: clamp(22px, 2.6vw, 40px);
  border-bottom: 1px solid var(--hairline-dark-2);
  transition: background-color 0.6s var(--ease);
}
.state__index { grid-column: 2; }
.state__caps {
  grid-column: 3;
  font-size: var(--t-lead);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: color 0.5s var(--ease);
}
.state__body {
  grid-column: 4 / 6;
  font-size: var(--t-meta);
  color: var(--on-dark-soft);
  line-height: 1.5;
  max-width: 34ch;
}
.state:hover .state__caps { color: var(--blue); }

/* record specimen + narrow editorial columns */
.protocol__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(40px, 5vw, 70px);
  padding-top: clamp(56px, 7vw, 112px);
}
.protocol__note { grid-column: 3; }
.protocol__note h3 {
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: -0.012em;
  margin-bottom: 16px;
}
.protocol__note p + p { margin-top: 1.1em; }

.record {
  grid-column: 4 / 6;
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
  padding: 18px 20px 20px;
  max-width: 330px;
}
.record__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-dark-2);
  margin-bottom: 4px;
}
.record__dot {
  width: 5px; height: 5px; border-radius: 999px; background: var(--blue);
  box-shadow: 0 0 0 3px rgba(22, 117, 232, 0.16);
}
.record__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px;
  padding-block: 9px;
}
.record__key {
  font-size: var(--t-micro);
  color: var(--on-dark-muted);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.record__val {
  font-size: var(--t-meta);
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.record__val.is-accent { color: var(--blue); }
.record__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-dark-2);
  font-size: var(--t-micro);
  color: var(--on-dark-muted);
  letter-spacing: 0.005em;
}

/* --------------------------------------------------- 05 · blue band ----- */

.band {
  background: var(--blue);
  color: #fff;
  min-height: min(78svh, 720px);
  display: flex;
  align-items: center;
  padding-block: clamp(90px, 12vh, 150px);
  overflow: hidden;
  position: relative;
}
.band__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 22px;
  width: 100%;
  align-items: start;
}
.band__index { grid-column: 2; justify-self: end; padding-right: clamp(10px, 1.6vw, 26px); }
.band .index { color: rgba(255, 255, 255, 0.5); }
.band__body { grid-column: 3 / 6; }
.band__title {
  font-size: var(--t-title);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.03em;
}
.band__title > span { display: block; }
.band__sub {
  margin-top: clamp(16px, 1.7vw, 26px);
  font-size: var(--t-meta);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  max-width: 28ch;
}
.band__cta { margin-top: clamp(34px, 4vw, 62px); }
.band .action { color: #fff; font-size: var(--t-lead); }
.band .action__cap { width: 30px; height: 18px; border-color: rgba(255,255,255,0.55); }
.band .action__cap svg { width: 10px; height: 10px; }

/* --------------------------------------------- 06 · institutional ------- */

.pair {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(46px, 6vw, 84px);
}
.pair__item { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(14px, 1.5vw, 24px); }
.pair__item:nth-of-type(1) { grid-column: 2 / 4; }
.pair__item:nth-of-type(2) { grid-column: 4 / 6; }
.pair__num { color: var(--blue); opacity: 0.6; padding-top: 0.45em; }
.pair__title {
  font-size: var(--t-stmt);
  font-weight: 300;
  letter-spacing: -0.024em;
  line-height: 1.2;
}
.pair__lines {
  margin-top: 18px;
  font-size: var(--t-meta);
  line-height: 1.7;
  color: var(--text-soft);
}
.pair__link { margin-top: clamp(20px, 2.2vw, 32px); }

.between {
  margin-top: clamp(56px, 6.5vw, 108px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 26px;
  padding-top: clamp(34px, 4vw, 62px);
  border-top: 1px solid var(--hairline-2);
}
.between__label { grid-column: 2; }
.between__body { grid-column: 3 / 6; }
.sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 7px;
  margin-top: 16px;
}
.sector {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--t-meta);
  color: var(--text-soft);
  letter-spacing: -0.003em;
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease);
}
.sector:hover { border-color: rgba(17,18,20,0.28); color: var(--text); }
/* reserved: verified institutional logos drop in here */
.partners-logos:empty { display: none; }

/* ------------------------------------------------------ 07 · research --- */

.research {
  margin-top: clamp(72px, 9vw, 150px);
  padding-top: clamp(40px, 5vw, 78px);
  border-top: 1px solid var(--hairline-dark-2);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(34px, 4vw, 56px);
}
.research__label { grid-column: 2; }
.research__head { grid-column: 2; }
.research__title {
  font-size: var(--t-stmt);
  font-weight: 300;
  letter-spacing: -0.024em;
  line-height: 1.2;
  max-width: 9em;
}
.research__title em { font-style: normal; color: var(--on-dark-muted); }
.research__link { margin-top: 20px; }
.research__col { grid-column: 3; }
.research__col h4 {
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: -0.012em;
  margin-bottom: 18px;
}
.research__col p + p { margin-top: 1.15em; }
.research__aside { grid-column: 5; }
.research__aside .metaitem__tick { margin-bottom: 14px; }

/* ============================================================= footer === */

.footer {
  background: var(--ink);
  color: var(--on-dark);
  padding-top: clamp(64px, 8vh, 120px);
  padding-bottom: clamp(28px, 4vh, 48px);
  min-height: min(84svh, 760px);
  display: flex;
  flex-direction: column;
}
.footer__main {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(44px, 6vh, 78px);
  flex: 1;
}
.footer__wordmark {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  align-self: start;
}
.fgroup { display: contents; }
.fgroup__label { grid-column: 4; }
.fgroup__label .index { display: block; }
.fgroup__label .label { display: block; margin-top: 2px; color: var(--on-dark-soft); }
.fgroup__links { grid-column: 5; }
.fgroup__links li + li { margin-top: 0.12em; }
.fgroup__links a,
.fgroup__links button {
  font-size: var(--t-link);
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1.24;
  color: rgba(255, 255, 255, 0.88);
  display: inline-block;
  transition: color 0.4s var(--ease), transform 0.5s var(--ease-out);
}
.fgroup__links a:hover,
.fgroup__links button:hover { color: #fff; transform: translateX(3px); }

.footer__group-2 .fgroup__label { grid-column: 4; grid-row: 2; }
.footer__group-2 .fgroup__links { grid-column: 5; grid-row: 2; }

.footer__bottom {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 18px;
  align-items: end;
  padding-top: clamp(48px, 7vh, 90px);
}
.footer__mark {
  grid-column: 1;
  color: rgba(255, 255, 255, 0.16);
}
.footer__mark svg { width: 34px; height: 34px; }
.footer__legal {
  grid-column: 4 / 6;
  display: flex;
  gap: clamp(16px, 2vw, 34px);
  flex-wrap: wrap;
}
.footer__legal a {
  font-size: var(--t-micro);
  color: var(--on-dark-muted);
  transition: color 0.4s var(--ease);
}
.footer__legal a:hover { color: var(--on-dark-soft); }
.footer__locale {
  grid-column: 5;
  justify-self: end;
  font-size: var(--t-micro);
  color: var(--on-dark-muted);
}
.footer__tagline {
  grid-column: 2 / 4;
  font-size: var(--t-micro);
  color: var(--on-dark-muted);
}

/* ======================================================== claim sheet === */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
}
.sheet.is-open { visibility: visible; }

.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(250, 250, 248, 0.72);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.sheet.is-open .sheet__scrim { opacity: 1; }

.sheet__panel {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.75s var(--ease-out);
}
.sheet.is-open .sheet__panel { opacity: 1; transform: none; }

.sheet__top {
  position: sticky; top: 0;
  background: linear-gradient(var(--paper) 72%, rgba(250,250,248,0));
  padding-top: clamp(22px, 3.4vh, 40px);
  padding-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  z-index: 2;
}
.sheet__title { font-size: var(--t-meta); color: var(--muted); }
.sheet__title strong { font-weight: 500; color: var(--text); letter-spacing: -0.04em; }
.sheet__close {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-meta); color: var(--muted);
  transition: color 0.4s var(--ease);
}
.sheet__close:hover { color: var(--text); }
.sheet__close span:last-child {
  width: 31px; height: 18px; border: 1px solid currentColor; border-radius: 999px;
  display: grid; place-items: center;
}
.sheet__close svg { width: 10px; height: 10px; }

.sheet__progress {
  display: flex; gap: 4px;
  margin-top: 6px;
}
.sheet__progress i {
  width: 22px; height: 1px; background: var(--hairline);
  transition: background-color 0.5s var(--ease);
}
.sheet__progress i.is-on { background: var(--blue); }

.sheet__body {
  padding-bottom: clamp(60px, 12vh, 140px);
  padding-top: clamp(40px, 9vh, 110px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 30px;
}
.step { display: none; grid-column: 1 / 6; }
.step.is-active { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: var(--col-gap); row-gap: 28px; }
.step__label { grid-column: 2; }
.step__main { grid-column: 3 / 6; max-width: 38em; }
.step__title {
  font-size: var(--t-title);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.16;
}
.step__caption { margin-top: 12px; font-size: var(--t-meta); color: var(--muted); }
.step__fields { margin-top: clamp(28px, 3.4vw, 48px); }

.choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.choice {
  display: inline-flex; align-items: center; height: 36px; padding: 0 17px;
  border: 1px solid var(--hairline); border-radius: 999px;
  font-size: var(--t-meta); color: var(--text-soft);
  transition: all 0.4s var(--ease);
}
.choice:hover { border-color: rgba(17,18,20,0.3); color: var(--text); }
.choice[aria-pressed='true'] {
  border-color: var(--blue); color: var(--blue);
  background: rgba(22, 117, 232, 0.05);
}

.state-choice {
  display: grid;
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid var(--hairline-2);
}
.state-opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
  text-align: left;
  width: 100%;
  padding-block: 18px;
  border-bottom: 1px solid var(--hairline-2);
  transition: opacity 0.4s var(--ease);
}
.state-opt__caps {
  font-size: var(--t-lead); font-weight: 300; letter-spacing: 0.04em;
  transition: color 0.4s var(--ease);
}
.state-opt__body { font-size: var(--t-meta); color: var(--muted); }
.state-opt__tick {
  width: 6px; height: 6px; border-radius: 999px;
  border: 1px solid var(--hairline);
  transition: all 0.4s var(--ease);
  align-self: center;
}
.state-opt:hover .state-opt__caps { color: var(--blue); }
.state-opt[aria-pressed='true'] .state-opt__caps { color: var(--blue); }
.state-opt[aria-pressed='true'] .state-opt__tick { background: var(--blue); border-color: var(--blue); }

.field { border-bottom: 1px solid var(--hairline); padding-bottom: 10px; margin-top: 26px; }
.field label {
  display: block; font-size: var(--t-micro); color: var(--muted);
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 9px;
}
.field input {
  width: 100%; border: 0; background: none; padding: 0;
  font-size: var(--t-lead); font-weight: 300; letter-spacing: -0.016em;
  color: var(--text);
}
.field input::placeholder { color: rgba(17,18,20,0.22); }
.field input:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--blue); }

.step__nav {
  margin-top: clamp(36px, 4.4vw, 62px);
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 38px);
}
.ghost {
  font-size: var(--t-meta); color: var(--muted);
  transition: color 0.4s var(--ease);
}
.ghost:hover { color: var(--text); }
.step__note {
  margin-top: clamp(30px, 4vh, 54px);
  font-size: var(--t-micro);
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.6;
}

.done { }
.done__mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--blue); color: #fff;
  display: grid; place-items: center; margin-bottom: 30px;
}
.done__mark svg { width: 13px; height: 13px; }
.done__summary {
  margin-top: clamp(28px, 3.4vw, 46px);
  border-top: 1px solid var(--hairline-2);
}
.done__row {
  display: flex; justify-content: space-between; gap: 20px;
  padding-block: 12px; border-bottom: 1px solid var(--hairline-2);
}
.done__row dt { font-size: var(--t-micro); color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.done__row dd { font-size: var(--t-meta); margin: 0; }

/* ======================================================== responsive ==== */

@media (max-width: 1080px) {
  .metric:nth-child(1) { grid-column: 2; }
  .metric:nth-child(2) { grid-column: 3; }
  .metric:nth-child(3) { grid-column: 4; }
  .metrics__note { grid-column: 2 / 6; }
  .lex:nth-of-type(1) { grid-column: 2; }
  .lex:nth-of-type(2) { grid-column: 3; }
  .lex:nth-of-type(3) { grid-column: 4; }
  .lexicon__label { grid-column: 1 / 6; }
  .research__col { grid-column: 3 / 5; }
  .research__aside { grid-column: 5; }
}

@media (max-width: 860px) {
  :root { --col-gap: 14px; }

  .grid, .row, .metrics, .lexicon, .protocol__head, .state,
  .protocol__grid, .band__inner, .pair, .between,
  .research, .footer__main, .footer__bottom,
  .sheet__body, .step.is-active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* the five column placement classes lose their meaning here */
  .c2, .c3, .c4, .c5, .c2-3, .c3-4, .c3-5, .c2-5 { grid-column: 1 / -1; }

  /* everything collapses to a two column field; labels sit above content */
  .statement__label, .row__label, .lexicon__label, .protocol__label,
  .state__index, .band__index, .between__label, .masthead__label,
  .research__label, .research__head, .step__label {
    grid-column: 1 / 3 !important;
    justify-self: start !important;
    padding-right: 0 !important;
  }
  .statement__body, .row__title, .protocol__statement, .band__body,
  .between__body, .step__main {
    grid-column: 1 / 3 !important;
  }
  .row { row-gap: 10px; }
  .row__label { display: flex; align-items: baseline; gap: 10px; }
  .row__label .label { margin-top: 0; }

  .state { row-gap: 8px; }
  .state__index { display: flex; }
  .state__caps { grid-column: 1 / 3; }
  .state__body { grid-column: 1 / 3; max-width: none; }

  .metric:nth-child(1) { grid-column: 1; }
  .metric:nth-child(2) { grid-column: 2; }
  .metric:nth-child(3) { grid-column: 1; }
  .lexicon > .lex:nth-child(2) { grid-column: 1; }
  .lexicon > .lex:nth-child(3) { grid-column: 2; }
  .lexicon > .lex:nth-child(4) { grid-column: 1; }
  .metrics__note { grid-column: 1 / 3; }

  .protocol__note { grid-column: 1 / 3; }
  .record { grid-column: 1 / 3; max-width: none; }

  .pair__item:nth-of-type(1), .pair__item:nth-of-type(2) { grid-column: 1 / 3; }

  .research__col { grid-column: 1 / 3; }
  .research__aside { grid-column: 1 / 3; }
  .research__col p, .meta-p, .research__aside .meta-p { max-width: 46ch; }


  .footer__wordmark { grid-column: 1 / 3; grid-row: auto; }
  .fgroup__label { grid-column: 1; }
  .fgroup__links { grid-column: 2; }
  .footer__group-2 .fgroup__label { grid-column: 1; grid-row: auto; }
  .footer__group-2 .fgroup__links { grid-column: 2; grid-row: auto; }
  .footer__mark { grid-column: 1 / 3; }
  .footer__tagline { grid-column: 1 / 3; }
  .footer__legal { grid-column: 1 / 3; }
  .footer__locale { grid-column: 1 / 3; justify-self: start; }

  .side-mark { display: none; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }

  .nav { padding-top: 12px; }
  .nav__row { gap: 7px; }
  .nav__mark { width: 32px; height: 32px; }
  .nav__pill { height: 32px; }
  .nav__link { padding: 0 9px; font-size: 12.5px; letter-spacing: -0.02em; }
  .nav__ctx { display: none; }



  .metrics { row-gap: 26px; }
  .band { min-height: 76svh; }
  .footer { min-height: auto; }
  .footer__main { row-gap: 42px; }


  .sheet__body { padding-top: 34px; }
}

/* very wide screens: hold the field, never let type stretch */
@media (min-width: 1900px) {
  .frame { max-width: var(--frame); }
}