/* ═══════════════════════════════════════════════════════════════
   SOTERIAS — /method
   Page-specific components only. Tokens, type, buttons, nav and
   footer all come from site.css; nothing is redefined here.
   ═══════════════════════════════════════════════════════════════ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══ Hero ═══ */
.m-hero { padding-top: clamp(7rem, 15vh, 10rem); }
.m-hero h1 { margin-bottom: var(--s-6); }
.m-hero .lead { max-width: 46rem; margin-bottom: var(--s-8); }

.m-facts {
  display: grid; grid-template-columns: repeat(4, auto);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  justify-content: start;
  padding-block: var(--s-6);
  border-block: 1px solid var(--line-paper-2);
  margin-bottom: var(--s-6);
}
.m-facts dt {
  font-family: var(--f-display); font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--ink); line-height: 1;
}
.m-facts dd {
  font-family: var(--f-doc); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: .45rem;
}
.m-note { font-size: .9375rem; color: var(--ink-soft); max-width: 44rem; line-height: 1.7; }

@media (max-width: 620px) {
  .m-facts { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
}

/* ═══ How to read ═══ */
.m-howto h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.m-howto-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.m-howto-grid > div { border-top: 1px solid var(--line-paper-2); padding-top: var(--s-4); }
.m-howto-label {
  font-family: var(--f-doc); font-size: .72rem; letter-spacing: .16em;
  /* Darker than --aegean: the brand blue measures 4.31:1 on paper-shade,
     just under the 4.5 floor at this size. */
  text-transform: uppercase; color: #2A5FA6; margin-bottom: .6rem;
}
.m-howto-grid p:not(.m-howto-label) { font-size: .9375rem; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 820px) { .m-howto-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ═══ The stage ledger ═══
   A single hairline runs the length of the list: the pipeline is a
   sequence, and the rule is the only thing that says so. */
.m-ledger { position: relative; display: grid; gap: 0; }
.m-ledger::before {
  content: ""; position: absolute; top: .5rem; bottom: 3rem;
  left: 3.5rem; width: 1px; background: var(--line-paper-2);
}
.m-stage {
  display: grid; grid-template-columns: 7rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-paper);
}
.m-stage:first-child { border-top: 0; }

.m-stage-rail { position: relative; display: grid; gap: .4rem; align-content: start; justify-items: start; }
.m-stage-no {
  position: relative; z-index: 1;
  font-family: var(--f-display); font-size: 1.6rem; color: var(--ink);
  letter-spacing: .04em;
  background: var(--paper); padding-right: .6rem;
}
.m-stage-folder {
  font-family: var(--f-doc); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper); padding-right: .6rem;
}

.m-stage-body h3 { margin-bottom: .6rem; }
.m-stage-purpose { font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.7; max-width: 58ch; margin-bottom: var(--s-6); }

.m-stage-meta { display: grid; gap: .55rem; margin-bottom: var(--s-6); }
.m-stage-meta > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; }
.m-stage-meta dt {
  font-family: var(--f-doc); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.m-stage-meta dd { font-size: .875rem; color: var(--ink); line-height: 1.65; }

/* The gate: the auditor's half of the stage, given its own surface. */
.m-gate {
  background: var(--ink-plate); color: var(--paper-on-ink);
  border-radius: 2px; padding: 1.1rem 1.3rem;
  max-width: 56rem;
}
.m-gate-id {
  font-family: var(--f-doc); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--soft-on-ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  margin-bottom: .6rem;
}
.m-gate-cp {
  font-weight: 700; color: var(--azure-2);
  border: 1px solid var(--line-ink); border-radius: 2px;
  padding: .18rem .45rem;
}
.m-gate-src {
  font-size: .62rem; letter-spacing: .12em;
  padding: .18rem .45rem; border-radius: 2px;
}
.m-gate-src[data-src="verbatim"] { color: #9FE3C4; border: 1px solid #2F5E49; }
.m-gate-src[data-src="derived"]  { color: #E0C070; border: 1px solid #6B5726; }
.m-gate-q {
  font-family: var(--f-display); font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5; color: #DCE6F4;
}
.m-gate-q::before { content: "\201C"; color: var(--gilt-2); }
.m-gate-q::after  { content: "\201D"; color: var(--gilt-2); }

@media (max-width: 720px) {
  .m-ledger::before { display: none; }
  .m-stage { grid-template-columns: 1fr; gap: var(--s-4); }
  .m-stage-rail { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: .8rem; }
  .m-stage-meta > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ═══ The clocks ═══ */
.m-table-wrap { overflow-x: auto; border: 1px solid var(--line-ink); border-radius: 2px; }
.m-clocks-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.m-clocks-table th {
  text-align: left; font-family: var(--f-doc); font-weight: 700;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--soft-on-ink);
  padding: .9rem 1.1rem; background: var(--ink-plate-2);
  border-bottom: 1px solid var(--line-ink);
}
.m-clocks-table td {
  padding: .8rem 1.1rem; font-size: .9rem;
  color: var(--paper-on-ink); border-bottom: 1px solid var(--line-ink);
  vertical-align: top;
}
.m-clocks-table tr:last-child td { border-bottom: 0; }
.m-clocks-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
.m-val { font-family: var(--f-doc); font-size: .84rem; color: #DCE6F4; white-space: nowrap; }
.m-src { font-family: var(--f-doc); font-size: .74rem; letter-spacing: .04em; color: var(--soft-on-ink); white-space: nowrap; }
.m-flag {
  display: inline-block; margin-left: .5rem;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: #E0C070; border: 1px solid #6B5726; border-radius: 2px;
  padding: .12rem .4rem; white-space: nowrap;
}
.m-clocks-note {
  margin-top: var(--s-6); font-size: .9rem; color: var(--soft-on-ink);
  line-height: 1.7; max-width: 52rem;
}
@media (max-width: 560px) { .m-val { white-space: normal; } }

/* ═══ Routing ═══ */
.m-routing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-paper-2);
  border: 1px solid var(--line-paper-2); border-radius: 2px;
}
.m-route { background: var(--paper-high); padding: clamp(1.3rem, 3vw, 1.9rem); }
.m-route p:not(.m-route-verdict) { font-size: .9375rem; color: var(--ink-soft); line-height: 1.7; }
.m-route b { color: var(--ink); font-weight: 600; }
.m-route-verdict {
  font-family: var(--f-doc); font-weight: 700; font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: .7rem;
  display: inline-flex; align-items: center; gap: .45rem;
}
.m-route-deny .m-route-verdict { color: var(--sev-critical); }
.m-route-deny .m-route-verdict::before { content: "\2715"; font-size: .8rem; }
.m-route-allow .m-route-verdict { color: var(--sev-recomm); }
.m-route-allow .m-route-verdict::before { content: "\2713"; font-size: .8rem; }
.m-routing-note {
  margin-top: var(--s-6); font-size: .9rem; color: var(--ink-soft);
  line-height: 1.7; max-width: 54rem;
}
@media (max-width: 820px) { .m-routing-grid { grid-template-columns: 1fr; } }

/* ═══ Back to the rules ═══ */
.m-rules-link h2 { margin-bottom: var(--s-4); }
.m-rules-link p { font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.7; max-width: 50rem; margin-bottom: var(--s-6); }