/* Hyfa landing page.
   One idea runs through the layout: the page is a single organism read from the surface
   down. A filament grows along the rail as you read, every diagram is hyphae grown
   between real HTML labels, the Hyfa layer appears as soil beneath the protocols, and
   the page ends at the root, in that soil. The visual grammar holds everywhere:
     circles   = identities (root, node, thread)
     squares   = agents and outside parties
     hatching  = data that stays private
     blue ink  = a signature or a verified proof
     vermilion = a refusal, a mismatch or a compromise */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --paper: #E7EAE0;
  --paper-hi: #F3F5EF;
  --paper-lo: #DADFD2;
  --ink: #0F1813;
  --ink-2: #435049;
  --rule: #BFC6B8;
  --edge: #737E76;          /* form and control borders: 3:1 against both papers */
  --hypha: #4E5B53;
  --blue: #1C3DC8;
  --blue-deep: #12298F;
  --blue-wash: rgba(28, 61, 200, 0.10);
  --red: #A8301A;
  --red-wash: rgba(168, 48, 26, 0.10);

  --soil: #17211B;
  --soil-2: #24302A;
  --pale: #C4CDBE;          /* filaments drawn on soil */
  --pale-text: #DCE2D6;
  --blue-light: #A9B9FF;

  --f-sans: "Archivo", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;

  /* Easing, chosen per job rather than one curve everywhere */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* settles: UI responses */
  --ease-grow: cubic-bezier(0.32, 0.72, 0.24, 1);   /* growth: quick start, long tail */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* travel between two points */
  --ease-press: cubic-bezier(0.3, 1.5, 0.6, 1);     /* small overshoot for presses */

  --rail-w: 0px;
  --pad: clamp(20px, 5vw, 64px);
  --gap: clamp(14px, 2vw, 28px);

  --hatch: repeating-linear-gradient(135deg, var(--ink) 0 1.2px, transparent 1.2px 5px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: rgba(28, 61, 200, 0.22); }

h1, h2, h3 {
  margin: 0;
  font-weight: 620;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--f-mono); }

a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 180ms var(--ease-out);
}
.skip:focus { transform: none; color: var(--paper); }

/* ---------- Buttons and links ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-stretch: 92%;
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color 160ms var(--ease-out),
    color 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    transform 220ms var(--ease-press);
}
/* A thin filament grows along the bottom edge on hover. */
.btn::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms var(--ease-grow);
}
.btn:hover::after { transform: scaleX(1); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: 60ms; }
.btn:disabled {
  cursor: not-allowed;
  border-color: var(--edge);
  color: var(--ink-2);
  background: repeating-linear-gradient(135deg, rgba(15, 24, 19, 0.07) 0 1px, transparent 1px 6px);
}
.btn:disabled::after { transform: scaleX(0); }
.btn:disabled:active { transform: none; }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #26332C; color: var(--paper); }
.btn--ink:disabled { background: #59645D; border-color: #59645D; color: var(--paper); }

.btn--line:hover { background: var(--paper-hi); color: var(--ink); }

.btn--revoke { border-color: var(--red); color: var(--red); }
.btn--revoke:hover { background: var(--red-wash); color: var(--red); }

.btn--small { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }

.link-walk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--ink);
  font-weight: 600;
  font-stretch: 92%;
  text-decoration: none;
  background: linear-gradient(var(--ink), var(--ink)) left calc(100% - 10px) / 100% 1.5px no-repeat;
  transition: background-size 300ms var(--ease-grow), color 160ms var(--ease-out);
}
.link-walk::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 300ms var(--ease-press);
}
.link-walk:hover { color: var(--blue); background-size: 0 1.5px; }
.link-walk:hover::after { transform: translateY(1px) rotate(45deg); }
.link-walk:active::after { transform: translateY(4px) rotate(45deg); }

/* ---------- Masthead and rail ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--pad) 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  font-stretch: 78%;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark-glyph { width: 30px; height: 30px; }
.wordmark-glyph path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wordmark-glyph circle { fill: var(--blue); }

.rail { display: none; }

@media (min-width: 1180px) {
  :root { --rail-w: 156px; }

  .masthead { padding-left: 30px; }

  .rail {
    display: block;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--rail-w);
    padding: 118px 0 36px 30px;
  }
  .rail ol {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    list-style: none;
  }
  .rail a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
    padding-left: 26px;
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 500;
    font-stretch: 88%;
    text-decoration: none;
    transition: color 200ms var(--ease-out);
  }
  /* Section nodes on the filament */
  .rail a::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border: 1.5px solid var(--hypha);
    border-radius: 50%;
    background: var(--paper);
    transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 300ms var(--ease-press);
  }
  .rail a:hover { color: var(--ink); }
  .rail a:hover::before { transform: scale(1.3); }
  .rail a.is-passed::before { background: var(--hypha); }
  .rail a[aria-current="true"] { color: var(--ink); font-weight: 650; }
  .rail a[aria-current="true"]::before { background: var(--blue); border-color: var(--blue); transform: scale(1.3); }

  .rail-line {
    position: absolute;
    left: 38px;
    top: 118px;
    width: 12px;
    height: calc(100% - 154px);
    overflow: visible;
  }
}

/* Without scripts the demos cannot run, so their controls step aside; the copy stays. */
html:not(.js) .tree-controls,
html:not(.js) .rite-foot .fig-actions,
html:not(.js) .tries,
html:not(.js) [data-reveal] { display: none; }

/* Fallback filament for the rail when scripts are off */
html:not(.js) .rail ol { border-left: 1.5px solid var(--rule); margin-left: 8.5px; }
html:not(.js) .rail a { padding-left: 18px; }
html:not(.js) .rail a::before { left: -6px; }

.rail-line path { fill: none; stroke-linecap: round; }
.rail-track { stroke: var(--rule); stroke-width: 1.5; }
.rail-grown { stroke: var(--hypha); stroke-width: 1.5; }

/* Thin filament along the left edge on small screens, purely decorative */
.edge-filament {
  position: fixed;
  z-index: 4;
  left: 0;
  top: 0;
  width: 14px;
  height: 100vh;
  pointer-events: none;
}
.edge-filament path { fill: none; stroke-linecap: round; }
@media (min-width: 1180px) { .edge-filament { display: none; } }

main { margin-left: var(--rail-w); }

/* ---------- Section frame ---------- */

.sec, .hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
.sec > *, .hero > * { grid-column: 1 / -1; min-width: 0; }

h2 {
  font-size: clamp(2.05rem, 1.25rem + 2.9vw, 4.1rem);
  font-stretch: 74%;
  font-weight: 640;
  line-height: 1.03;
  letter-spacing: -0.008em;
  max-width: 17ch;
}
h3 {
  font-size: 1.5rem;
  font-stretch: 84%;
  font-weight: 640;
  line-height: 1.1;
}
.sec p { max-width: 58ch; }

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(28px, 6vh, 72px);
  padding-bottom: clamp(56px, 10vh, 120px);
  row-gap: 28px;
  align-items: start;
}
.hero h1 {
  font-size: clamp(2.6rem, 1.1rem + 4.7vw, 6.3rem);
  font-stretch: 70%;
  font-weight: 650;
  line-height: 0.93;
  letter-spacing: -0.012em;
}
.lede {
  margin-top: 26px;
  max-width: 36em;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.5;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 30px;
}

.colony { position: relative; margin: 0; }

@media (min-width: 900px) {
  .hero { min-height: calc(100svh - 76px); align-items: center; }
  .hero-copy { grid-column: 1 / span 6; align-self: center; }
  .hero h1 { max-width: 15.5ch; }
  .colony { grid-column: 7 / -1; align-self: stretch; min-height: 520px; }
}

/* ---------- Figures: shared ---------- */

figure { margin: 0; }

.stage { position: relative; }
.hy {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.stage > :not(.hy) { position: absolute; z-index: 2; }
.hy path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hy .h-main { stroke: var(--hypha); stroke-width: 1.6; }
.hy .h-br { stroke: var(--hypha); stroke-width: 0.9; opacity: 0.7; }
.hy .h-fine { stroke: var(--hypha); stroke-width: 0.6; opacity: 0.5; }
.hy .h-query { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 3 5; }
.hy .h-proof { stroke: var(--blue); stroke-width: 2.6; }
.hy .h-ask { stroke: var(--ink); stroke-width: 2.2; }
.hy .h-bad { stroke: var(--red); stroke-width: 2.2; }
.hy .h-sig { stroke: var(--blue); stroke-width: 1.8; }
.hy .h-ghost { stroke: var(--hypha); stroke-width: 1.2; stroke-dasharray: 2 6; opacity: 0.7; }
.hy .soil path { stroke: var(--pale); }
.hy circle.h-ring { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.hy circle.h-ring--bad { stroke: var(--red); }

.agent-sq {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink);
  background: var(--paper-hi);
}
.org-dot, .hyfa-dot {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--hatch), var(--paper-hi);
}
.hyfa-dot { position: relative; background: var(--paper-hi); }
.hyfa-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 420ms var(--ease-press);
}
.party-col--hyfa.is-idle .hyfa-dot { border-style: dashed; }
.party-col--hyfa.is-idle .hyfa-dot::after { transform: scale(0); }

.party {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-weight: 600;
  font-stretch: 88%;
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: nowrap;
}

.fig-status {
  margin-top: 14px;
  min-height: 3em;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.fig-status.is-bad { color: var(--red); }
.fig-status.is-good { color: var(--blue); }

.fig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* What a mechanism means for the reader: one plain sentence, marked in proof blue */
.sec .so {
  max-width: 34ch;
  padding-left: 18px;
  border-left: 2.5px solid var(--blue);
  color: var(--ink);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 560;
  font-stretch: 92%;
  line-height: 1.32;
}

/* A decision point: the consequence, then the action that answers it */
.decide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

/* Tells the visitor a figure can be operated */
.prompt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.prompt::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-wash);
  transform: translateY(-1px);
}
.prompt.is-bad { color: var(--red); }
.prompt.is-bad::before { background: var(--red); box-shadow: 0 0 0 4px var(--red-wash); }

/* Signed copies and grant requests travelling along a filament */
.token {
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--blue);
  border-radius: 2px;
  background: var(--paper-hi);
  opacity: 0;
  pointer-events: none;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.token.is-good { background: var(--blue); }
.token.is-bad { border-color: var(--red); background: var(--red); }
.token--grant { border-color: var(--ink); }

/* ---------- Hero colony ---------- */

.colony .stage { height: 100%; min-height: 320px; }

.mk {
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 4px;
  border-radius: 2px;
  background: var(--paper);
  transform: translate(-9px, -50%);
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 86%;
  white-space: nowrap;
}
.mk i {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}
.mk--root i { width: 26px; height: 26px; margin-left: -4px; background: var(--hatch), var(--paper-hi); }
.mk--node i { width: 14px; height: 14px; margin-left: 2px; background: var(--paper-hi); }
.mk--tip i { width: 10px; height: 10px; margin-left: 4px; background: var(--ink); }
.mk--quiet { font-size: 0; padding: 0; background: none; }

.mk[data-a="root"] { --x: 10%; --y: 88%; }
.mk[data-a="n1"]   { --x: 36%; --y: 63%; }
.mk[data-a="n2"]   { --x: 60%; --y: 84%; }
.mk[data-a="t1"]   { --x: 70%; --y: 38%; }
.mk[data-a="t2"]   { --x: 47%; --y: 28%; }
.mk[data-a="t3"]   { --x: 90%; --y: 58%; }
.mk[data-a="t4"]   { --x: 88%; --y: 82%; }
.mk[data-a="t5"]   { --x: 18%; --y: 40%; }

.ask {
  right: 0;
  top: 4%;
  width: min(300px, 62%);
  display: grid;
  gap: 4px;
  padding: 12px 14px 13px;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.9375rem;
  line-height: 1.3;
}
.ask-who {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
}
/* Text in animated figures is revealed by sliding inside a clip, never by fading */
.clip { display: block; overflow: hidden; }
.ask-q, .ask-a { display: block; }
.ask-q { font-weight: 600; font-stretch: 90%; font-size: 1.0625rem; }
.ask-a { color: var(--blue); font-weight: 600; }

.motion-toggle {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 200ms var(--ease-press);
}
.motion-toggle:hover { color: var(--ink); border-color: var(--edge); }
.motion-toggle:active { transform: scale(0.96); }
.motion-toggle svg { width: 16px; height: 16px; }
.motion-toggle path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.motion-toggle .i-play { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: inline; fill: currentColor; }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }

@media (max-width: 899px) {
  .hero { padding-top: 20px; row-gap: 22px; }
  .lede { margin-top: 18px; }
  .hero-actions { margin-top: 20px; gap: 6px 20px; }
  .hero-actions .btn { padding: 0 18px; }
  .colony .stage { height: min(86vw, 380px); min-height: 300px; }
  .mk[data-a="root"] { --x: 6%;  --y: 90%; }
  .mk[data-a="n1"]   { --x: 30%; --y: 70%; }
  .mk[data-a="n2"]   { --x: 58%; --y: 88%; }
  .mk[data-a="t1"]   { --x: 66%; --y: 52%; }
  .mk[data-a="t2"]   { --x: 42%; --y: 46%; }
  .mk[data-a="t3"]   { --x: 90%; --y: 66%; }
  .mk[data-a="t4"]   { --x: 88%; --y: 92%; }
  .mk[data-a="t5"]   { --x: 12%; --y: 56%; }
  .ask { top: 0; width: min(330px, 78%); }
  .motion-toggle { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
}

/* ---------- Problem: one giant question over a single band ---------- */

.sec--problem { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(40px, 4.5vw, 72px); row-gap: clamp(28px, 3.5vw, 48px); }
.sec--problem h2 {
  font-size: clamp(2.4rem, 0.9rem + 5.1vw, 6.8rem);
  font-stretch: 68%;
  line-height: 1;
  letter-spacing: -0.014em;
  max-width: 16ch;
}
.cast .stage { height: 210px; }
.cast .party[data-a="buyer"] { left: 0; top: 18%; }
.cast .party[data-a="seller"] { right: 0; top: 18%; }
.party--unknown { border-style: dashed; border-color: var(--edge); }
.quote {
  left: 50%;
  top: 18%;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-stretch: 90%;
  font-weight: 500;
}
.owner-q {
  right: 7%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1.5px dashed var(--red);
  border-radius: 50%;
  background: var(--paper);
  color: var(--red);
  font-weight: 700;
  font-size: 1.5rem;
}
.problem-body { display: grid; gap: 26px; }
.problem-body .decide { align-items: flex-start; flex-direction: column; }

@media (min-width: 900px) {
  .sec--problem h2 { grid-column: 1 / span 10; }
  .problem-body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: calc(var(--gap) * 2.5);
    align-items: start;
  }
}
@media (max-width: 599px) {
  .cast .stage { height: 250px; }
  .cast .party[data-a="seller"] { top: 0; }
  .cast .party[data-a="buyer"] { top: 46%; }
  .quote { left: 50%; top: 22%; }
  .owner-q { right: 10%; }
}

/* ---------- Layer: a soil cross-section ---------- */

.sec--layer { padding-block: clamp(40px, 5vw, 64px) clamp(48px, 5.5vw, 80px); row-gap: 32px; align-items: end; }
.layer-copy { display: grid; gap: 22px; }
.strata .stage { display: grid; }
.strata .stage > .band { position: relative; z-index: auto; }
.band {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
}
.band > span:first-child { position: relative; z-index: 3; flex: 0 0 auto; min-width: 9.5em; padding-right: 6px; background: var(--paper); }
.band--product { min-height: 96px; color: var(--ink); font-weight: 600; }
.agents { display: flex; flex: 1; justify-content: space-around; }
.agents .agent-sq { width: 20px; height: 20px; position: relative; z-index: 3; }
.band--hyfa {
  min-height: clamp(130px, 14vw, 180px);
  align-items: flex-end;
  padding: 16px 18px;
  border-top: 0;
  background: var(--soil);
  color: var(--pale-text);
}
.band--hyfa > span:first-child {
  background: none;
  color: var(--pale-text);
  font-weight: 700;
  font-stretch: 76%;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  line-height: 1;
}
@media (min-width: 900px) {
  .sec--layer h2 { grid-column: 1 / span 6; }
  .layer-copy { grid-column: 8 / -1; }
}

/* ---------- Root: the identity tree ---------- */

.sec--root { padding-block: clamp(48px, 5.5vw, 80px); row-gap: 36px; }
.root-copy { display: grid; gap: 18px; align-content: start; }
.root-copy h2 { margin-bottom: 8px; }

.tree .prompt { min-height: 3em; margin-bottom: 10px; }
.tree-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 18px;
}
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px; }
.seg-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font-weight: 600;
  font-stretch: 92%;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.seg-btn + .seg-btn { border-left: 1.5px solid var(--ink); }
.seg-btn:hover { background: var(--paper-hi); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg-btn:focus-visible { outline-offset: -5px; }
.seg-btn[aria-pressed="true"]:focus-visible { outline-color: var(--paper); }

.tree-stage { height: 440px; }
.tn {
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out);
}
.tn i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper-hi);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.tn b {
  padding: 1px 4px;
  background: var(--paper);
  font-weight: 600;
  font-stretch: 88%;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.tn--root i { width: 30px; height: 30px; background: var(--hatch), var(--paper-hi); }
.tn--thread i { width: 11px; height: 11px; background: var(--ink); }
.tn--root { transform: translate(-15px, -50%); }
.tn--thread { transform: translate(-6px, -50%); }

.tn[data-a="root"]    { --x: 4%;  --y: 50%; }
.tn[data-a="sales"]   { --x: 44%; --y: 30%; }
.tn[data-a="billing"] { --x: 44%; --y: 74%; }
.tn[data-a="t1"]      { --x: 80%; --y: 10%; }
.tn[data-a="t2"]      { --x: 80%; --y: 36%; }
.tn[data-a="t3"]      { --x: 80%; --y: 64%; }
.tn[data-a="t4"]      { --x: 80%; --y: 90%; }

/* Outsider's view: links vanish, threads drift apart, labels become bare identifiers */
.tree-stage .hy { transition: opacity 500ms var(--ease-out); }
.tree-stage[data-view="outsider"] .hy { opacity: 0.08; }
.tree-stage[data-view="outsider"] .tn--root,
.tree-stage[data-view="outsider"] .tn--node { opacity: 0.1; }
.tree-stage[data-view="outsider"] .tn--root b,
.tree-stage[data-view="outsider"] .tn--node b { visibility: hidden; }
.tree-stage[data-view="outsider"] .tn--thread b { font-family: var(--f-mono); font-size: 0.8125rem; font-weight: 500; }
.tree-stage[data-view="outsider"] .tn[data-a="t1"] { transform: translate(-6px, -50%) translate(-40px, 14px); }
.tree-stage[data-view="outsider"] .tn[data-a="t2"] { transform: translate(-6px, -50%) translate(-170px, 26px); }
.tree-stage[data-view="outsider"] .tn[data-a="t3"] { transform: translate(-6px, -50%) translate(-70px, -30px); }
.tree-stage[data-view="outsider"] .tn[data-a="t4"] { transform: translate(-6px, -50%) translate(-240px, -10px); }

/* Compromised node: vermilion, and only its own threads go with it */
.tree-stage.is-breached .tn[data-a="billing"] i,
.tree-stage.is-breached .tn[data-a="t3"] i,
.tree-stage.is-breached .tn[data-a="t4"] i { border-color: var(--red); background: var(--red); }
.tree-stage.is-breached .tn[data-a="billing"] b,
.tree-stage.is-breached .tn[data-a="t3"] b,
.tree-stage.is-breached .tn[data-a="t4"] b { color: var(--red); text-decoration: line-through; text-decoration-thickness: 1.5px; }

@media (min-width: 900px) {
  .root-copy { grid-column: 1 / span 4; }
  .tree { grid-column: 6 / -1; }
}
@media (max-width: 599px) {
  .tree-stage { height: 400px; }
  .tn { flex-direction: column; gap: 6px; }
  .tn, .tn--root, .tn--thread { transform: translate(-50%, -12px); }
  .tn b { white-space: normal; text-align: center; max-width: 7.5em; line-height: 1.15; font-size: 0.875rem; }
  .tn[data-a="root"]    { --x: 50%; --y: 6%; }
  .tn[data-a="sales"]   { --x: 25%; --y: 38%; }
  .tn[data-a="billing"] { --x: 75%; --y: 38%; }
  .tn[data-a="t1"]      { --x: 12%; --y: 74%; }
  .tn[data-a="t2"]      { --x: 37%; --y: 84%; }
  .tn[data-a="t3"]      { --x: 63%; --y: 74%; }
  .tn[data-a="t4"]      { --x: 88%; --y: 84%; }
  .tree-stage[data-view="outsider"] .tn[data-a="t1"] { transform: translate(-50%, -12px) translate(8px, -60px); }
  .tree-stage[data-view="outsider"] .tn[data-a="t2"] { transform: translate(-50%, -12px) translate(-6px, -170px); }
  .tree-stage[data-view="outsider"] .tn[data-a="t3"] { transform: translate(-50%, -12px) translate(10px, -14px); }
  .tree-stage[data-view="outsider"] .tn[data-a="t4"] { transform: translate(-50%, -12px) translate(-12px, -230px); }
}

/* ---------- Control: the chain ---------- */

.sec--control { padding-block: clamp(40px, 5vw, 76px); row-gap: 28px; }
.control-copy { display: grid; gap: 22px; align-content: start; }
.chain .stage { height: 470px; }
.link {
  left: var(--x);
  top: var(--y);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 10px;
  transform: translate(-8px, -50%);
  background: var(--paper);
  padding-right: 6px;
}
.link b { font-weight: 640; font-stretch: 86%; font-size: 1.125rem; line-height: 1.15; }
.link span { grid-column: 2; color: var(--ink-2); font-size: 0.875rem; }
.link--member b { font-size: 1.375rem; }
.link[data-a="member"] { --x: 6%; --y: 9%; }
.link[data-a="ctrl"]   { --x: 20%; --y: 50%; }
.link[data-a="agent"]  { --x: 8%; --y: 90%; }

.claims {
  right: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}
.claims { top: 2%; }
.claims.is-inherited { top: 76%; }
.claims li {
  justify-self: start;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper-hi);
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.3;
}
.claims.is-inherited li { border-color: var(--blue); color: var(--blue); background: var(--paper); }
/* The member's own evidence, sealed: same chips, hatched, with the wording withheld */
.claims--origin li { position: relative; visibility: hidden; }
.claims--origin li::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  visibility: visible;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--hatch), var(--paper-hi);
}

@media (min-width: 900px) {
  .chain { grid-column: 1 / span 6; grid-row: 1 / span 3; }
  .sec--control h2, .control-copy { grid-column: 8 / -1; }
  .sec--control h2 { align-self: end; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .claims { right: auto; left: 48%; }
}
@media (max-width: 599px) {
  .chain .stage { height: 560px; }
  .link[data-a="member"] { --x: 4%; --y: 4%; }
  .link[data-a="ctrl"]   { --x: 16%; --y: 48%; }
  .link[data-a="agent"]  { --x: 4%; --y: 72%; }
  .claims { right: auto; left: 30%; top: 12%; }
  .claims.is-inherited { top: 79%; }
}

/* ---------- Ceremony: a wide stage, steps in a row beneath ---------- */

.sec--ceremony { padding-block: clamp(48px, 5.5vw, 88px); row-gap: 30px; }
.sec--ceremony h2 { max-width: 15ch; }
.rite .stage { height: 380px; }
.party-col {
  left: var(--x);
  top: var(--y);
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translate(-50%, -20px);
  text-align: center;
}
.party-col b { padding: 0 4px; background: var(--paper); font-weight: 640; font-stretch: 86%; font-size: 1.125rem; }
.party-col[data-a="subj"] { --x: 12%; --y: 12%; }
.party-col[data-a="att"]  { --x: 88%; --y: 12%; }
.party-col[data-a="hyfa"] { --x: 50%; --y: 76%; }
.party-col .org-dot, .party-col .hyfa-dot { width: 40px; height: 40px; }
.digest {
  padding: 3px 6px;
  border-radius: 2px;
  background: var(--paper-hi);
  font-size: 0.75rem;
  font-stretch: 85%;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.digest.is-bad { color: var(--red); background: #F1DED8; }
.digest.is-good { color: var(--blue); background: #E2E7FA; }
.rite-verdict { display: block; font-weight: 650; color: var(--blue); }
/* The evidence travels as a sealed, hatched packet: private data, never read in transit */
.packet {
  left: 0;
  top: 0;
  width: 34px;
  height: 22px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--hatch), var(--paper-hi);
  opacity: 0;
}
.rite-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 6px;
}
.rite-foot .fig-status { margin: 0; min-height: 0; flex: 1 1 18em; }
.rite-foot .prompt { flex: 0 0 auto; }

.steps { list-style: none; counter-reset: step; display: grid; gap: 4px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 10px 0 10px 46px;
  color: var(--ink-2);
  transition: color 260ms var(--ease-out);
}
.steps li b { color: var(--ink); font-weight: 650; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 9px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-weight: 650;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), border-color 260ms var(--ease-out), transform 360ms var(--ease-press);
}
.steps li.is-active { color: var(--ink); }
.steps li.is-active::before { background: var(--blue); border-color: var(--blue); color: #FFF; transform: scale(1.12); }
.steps li.is-done::before { background: var(--ink); color: var(--paper); }
.steps li.is-stopped { color: var(--ink); }
.steps li.is-stopped::before { background: var(--red); border-color: var(--red); color: #FFF; }

@media (min-width: 900px) {
  .sec--ceremony h2 { grid-column: 1 / span 8; }
  .ceremony-so { grid-column: 1 / span 7; }
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gap);
    padding-top: 22px;
    border-top: 1.5px solid var(--ink);
  }
  .steps li { padding: 46px 0 0; font-size: 0.9875rem; }
  .steps li::before { top: 0; }
}
@media (max-width: 599px) {
  .rite .stage { height: 360px; }
  .party-col[data-a="subj"] { --x: 20%; }
  .party-col[data-a="att"]  { --x: 80%; }
}

/* ---------- Proofs: an instrument panel ---------- */

.sec--proofs { padding-block: clamp(48px, 5.5vw, 80px); row-gap: 26px; }
.proofs-intro { display: grid; gap: 22px; }
.sec--proofs h2 { max-width: 20ch; }
.console {
  display: grid;
  gap: 22px;
  padding: clamp(16px, 2.4vw, 28px);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--paper-hi);
}
.questions { display: grid; gap: 10px; align-content: start; }
.q {
  position: relative;
  min-height: 56px;
  padding: 12px 16px 12px 44px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  text-align: left;
  font-weight: 600;
  font-stretch: 90%;
  font-size: 1.0625rem;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 220ms var(--ease-press);
}
.q::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transition: background-color 200ms var(--ease-out), transform 300ms var(--ease-press);
}
.q:hover { background: #FFF; }
.q:hover::before { transform: scale(1.2); }
.q:active { transform: translateY(1px); }
.q[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.q[aria-pressed="true"]::before { background: var(--blue-light); border-color: var(--blue-light); }

.exchange { display: grid; gap: 16px; align-content: start; }
.exchange .stage {
  height: 168px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
}
.exchange .party { top: 22px; }
.exchange .party[data-a="asker"] { left: 16px; }
.exchange .party[data-a="prover"] { right: 16px; }
@media (max-width: 599px) {
  .exchange .stage { height: 200px; }
  .exchange .party[data-a="prover"] { top: 74px; right: 12px; }
  .exchange .party[data-a="asker"] { left: 12px; }
}
.verdict {
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: block;
  font-weight: 650;
  font-stretch: 90%;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--ink-2);
}
.verdict.is-good { color: var(--blue); }
.verdict.is-bad { color: var(--red); }

.vault { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vault > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.vault dt { font-size: 0.875rem; color: var(--ink-2); font-weight: 500; }
.vault dd { position: relative; min-height: 22px; }
.seal {
  position: absolute;
  inset: 3px 0;
  background: var(--hatch);
  opacity: 0.5;
  transition: opacity 500ms var(--ease-out);
}
.open { display: none; font-weight: 650; }
.vault > div.is-used { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.vault > div.is-refused { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.vault > div.is-open .seal { opacity: 0; }
.vault > div.is-open .open { display: inline; }
.reveal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--ink-2); }

@media (min-width: 900px) {
  .sec--proofs h2 { grid-column: 1 / span 9; }
  .proofs-intro { grid-column: 1 / span 7; }
  .console { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(20px, 3vw, 40px); }
}

/* ---------- Grants: figure first on wide screens ---------- */

.sec--grants { padding-block: clamp(48px, 5.5vw, 80px); row-gap: 30px; }
.grants-copy { display: grid; gap: 18px; align-content: start; }
.dev-flag { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 650; }
.grant { display: grid; gap: 16px; align-content: start; }
.grant-card {
  position: relative;
  padding: 16px 18px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--paper-hi);
  overflow: hidden;
}
.grant-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-weight: 700; font-stretch: 80%; font-size: 1.25rem; }
.grant-head span { font-weight: 500; font-stretch: 92%; font-size: 0.9375rem; color: var(--ink-2); }
.grant-card dl { display: grid; margin-top: 12px; }
.grant-card dl > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.grant-card dt { color: var(--ink-2); font-size: 0.9375rem; }
.grant-card dd { align-self: center; font-family: var(--f-mono); font-size: 0.8125rem; font-stretch: 92%; font-weight: 500; }
.grant-void {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 56%;
  height: 2px;
  background: var(--red);
  transform: rotate(-3deg) scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-grow);
}
.grant-card.is-void .grant-void { transform: rotate(-3deg) scaleX(1); }
/* A revoked grant stays fully legible: its terms are struck through, not faded */
.grant-card.is-void dd { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }

.grant .stage { height: 96px; }
.grant .party { top: 50%; transform: translateY(-50%); }
.grant .party[data-a="g-agent"] { left: 0; }
.grant .party[data-a="g-vendor"] { right: 0; }
.tries { display: flex; flex-wrap: wrap; gap: 10px; }
.grant .fig-status { margin-top: 0; min-height: 1.5em; }
.grant .prompt { margin-top: 2px; }
.decide--after { padding-top: 18px; border-top: 1px solid var(--rule); }

@media (min-width: 900px) {
  .grant { grid-column: 1 / span 6; grid-row: 1; }
  .grants-copy { grid-column: 8 / -1; grid-row: 1; padding-top: 8px; }
}

/* ---------- Reuse ---------- */

.sec--reuse { padding-block: clamp(40px, 5vw, 76px); row-gap: 26px; }
.reuse-copy { display: grid; gap: 22px; }
.reuse .stage { height: 290px; }
.reuse .party[data-a="r-agent"] { left: 0; top: 50%; transform: translateY(-50%); }
.deals {
  left: 27%;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  align-content: space-evenly;
  list-style: none;
}
.deal {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
}
.deal b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding-right: 6px;
  background: var(--paper);
  font-weight: 600;
  font-stretch: 88%;
  font-size: 1rem;
}
/* The whole bar is what Tessling's side cannot see for itself; blue is what is proven,
   the hatching left over is what is still taken on faith. */
.bar {
  position: relative;
  height: 30px;
  border: 1px solid var(--edge);
  background: var(--hatch), var(--paper-hi);
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform-origin: left center;
  transform: scaleX(var(--p));
}
.bar-proven {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #FFF;
  font-size: 0.9375rem;
  font-weight: 650;
}
.bar-faith { color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.deal[data-a="b1"] { --p: 0.34; }
.deal[data-a="b2"] { --p: 0.6; }
.deal[data-a="b3"] { --p: 0.84; }

@media (min-width: 900px) {
  .sec--reuse h2 { grid-column: 3 / span 8; }
  .reuse-copy { grid-column: 3 / span 7; }
}
@media (max-width: 599px) {
  .reuse .stage { height: 340px; }
  .reuse .party[data-a="r-agent"] { top: 0; transform: none; }
  .deals { left: 30px; top: 52px; }
  .deal { grid-template-columns: minmax(0, 1fr) auto; }
  .deal b { grid-column: 1 / -1; }
}

/* ---------- Rules ---------- */

.sec--rules { padding-block: clamp(48px, 5.5vw, 80px); row-gap: 30px; }
.rules { list-style: none; display: grid; }
.rules li {
  position: relative;
  padding: 22px 0 22px 40px;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.4;
  color: var(--ink-2);
}
.rules li b {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 650;
  font-stretch: 80%;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  line-height: 1.1;
}
/* Each rule hangs off the filament as a small fork */
.rules li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 30px;
  width: 18px;
  height: 18px;
  border-left: 1.5px solid var(--hypha);
  border-bottom: 1.5px solid var(--hypha);
  border-bottom-left-radius: 14px;
}
@media (min-width: 900px) {
  .sec--rules h2 { grid-column: 1 / span 4; align-self: start; position: sticky; top: 40px; }
  .rules { grid-column: 5 / -1; }
}

/* ---------- Teams ---------- */

.sec--teams { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 6vw, 88px); row-gap: 30px; }
.team { display: grid; gap: 14px; align-content: start; }
.team ul { list-style: none; display: grid; gap: 12px; }
.team li { position: relative; max-width: 46ch; padding-left: 26px; }
.team li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 12px;
  height: 1.5px;
  background: var(--ink);
}
@media (min-width: 900px) {
  .sec--teams h2 { grid-column: 1 / span 8; max-width: 22ch; }
  .team:nth-of-type(1) { grid-column: 1 / span 6; }
  .team:nth-of-type(2) { grid-column: 7 / span 6; padding-top: 48px; }
}

/* ---------- Access: the root, down in the soil ---------- */

.sec--access, .foot {
  --side: max(0px, (100vw - var(--rail-w) - 1400px) / 2);
  background: var(--soil);
  color: var(--pale-text);
  /* carry the soil to the window's right edge and left to the rail at any width */
  box-shadow: 0 0 0 100vmax var(--soil);
  clip-path: inset(0 -100vmax 0 calc(-1 * var(--side)));
}
.sec--access { padding-block: clamp(80px, 10vw, 150px) clamp(72px, 8vw, 120px); row-gap: 32px; }
.sec--access h2 { color: #F2F5EE; }
.sec--access :focus-visible, .foot :focus-visible { outline-color: var(--blue-light); }
.access-copy { display: grid; gap: 18px; align-content: start; }
.access-copy p { color: var(--pale-text); }
.access-panel { position: relative; color: var(--ink); }
.access-panel :focus-visible { outline-color: var(--blue); }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px var(--gap);
  padding: clamp(18px, 3vw, 32px);
  border-radius: 3px;
  background: var(--paper-hi);
}
.form-key { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.875rem; }
.form-key span, .req { color: var(--red); font-weight: 700; }
.field { display: grid; gap: 6px; align-content: start; }
.field--wide, .form-foot { grid-column: 1 / -1; }
.field label { font-weight: 600; font-stretch: 92%; font-size: 0.9375rem; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1.5px solid var(--edge);
  border-radius: 3px;
  background: #FBFCF9;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 160ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 116px; }
.field select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(-45deg, transparent 50%, var(--ink) 50% calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-size: 7px 7px, 7px 7px;
  background-position: calc(100% - 22px) 52%, calc(100% - 15px) 52%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
  background-color: #FFF;
}
.field input:disabled, .field textarea:disabled, .field select:disabled { opacity: 0.55; cursor: not-allowed; }
.field-err { display: none; color: var(--red); font-size: 0.875rem; font-weight: 600; }
.field.is-invalid input { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }
.field.is-invalid .field-err { display: block; }

.form-foot { display: grid; gap: 14px; justify-items: start; }
.btn--send { min-width: 15em; }
.btn--send.is-sending::after { animation: sending 1.1s var(--ease-in-out) infinite; }
@keyframes sending {
  0% { transform: scaleX(0); transform-origin: left center; }
  50% { transform: scaleX(1); transform-origin: left center; }
  50.01% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
.form-error {
  padding: 10px 14px;
  border-left: 3px solid var(--red);
  background: var(--red-wash);
  color: var(--red);
  font-weight: 600;
}
.form-error a { color: var(--red); }

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-done {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 3px;
  background: var(--paper-hi);
}
.form-done:focus { outline: none; }
.form-done:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.done-glyph { width: 120px; height: 60px; overflow: visible; }
.done-glyph path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1 1.02;
  animation: done-grow 1.1s var(--ease-grow) both;
}
.done-glyph circle { fill: var(--blue); animation: done-dot 400ms 900ms var(--ease-press) both; transform-box: fill-box; transform-origin: center; }
@keyframes done-grow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes done-dot { from { transform: scale(0); } to { transform: scale(1); } }
.done-h { font-weight: 650; font-stretch: 78%; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; }

@media (min-width: 900px) {
  .access-copy { grid-column: 1 / span 5; }
  .access-panel { grid-column: 6 / -1; }
}
@media (max-width: 599px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .btn--send { width: 100%; }
}

/* ---------- Footer ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  max-width: 1400px;
  margin-left: calc(var(--rail-w) + var(--side));
  padding: 22px var(--pad) 36px;
  border-top: 1px solid var(--soil-2);
}
.foot-mark { color: #F2F5EE; font-weight: 700; font-stretch: 78%; font-size: 1.25rem; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-light); }
.foot a:hover { color: #FFF; }

/* ---------- Small screens: room for the edge filament ---------- */

@media (max-width: 1179px) {
  .hero, .sec, .masthead, .foot { padding-left: calc(var(--pad) + 8px); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn--send.is-sending::after { animation: none; transform: scaleX(1); }
}