@charset "utf-8";
/* =====================================================================
   VIVAN LABS LTD  /  penstock.css
   Company number 17061582. Registered in England and Wales.

   NAMING UNIVERSE
   Blocks are named from the vocabulary of water carriage and of the data
   warehouse, because both describe the same job: move a volume from a
   source to a place where it can be measured. Conduit, headrace, penstock,
   weir, strata, manifest, datum, tailrace. BEM throughout, one word per
   block, __ for elements, -- for modifiers. Nothing else.

   CORNER RADIUS SYSTEM
   One token, --edge, set to 0 and never overridden. The art direction is
   flat: no rounding, no shadow, no gradient, no photography. Separation is
   done with hairlines, surface steps and whitespace only.

   COLOUR TOKENS with measured WCAG 2.1 contrast ratios
   --abyss     #0A0D0F   page surface
   --bed       #12171A   raised panel        foam on bed        16.30:1
   --silt      #1B2226   deep panel, stripe  foam on silt       14.55:1
   --seam      #262F34   decorative hairline, never carries meaning alone
   --seam-loud #62727A   interactive border  3.91:1 on abyss (AA non-text)
   --foam      #F0F4F5   primary text        17.60:1 on abyss
   --mist      #A7B4B9   secondary text       9.16:1 on abyss
                                              8.49:1 on bed
                                              7.57:1 on silt
   --turbine   #5FD9C4   accent              11.33:1 on abyss
                                             abyss on turbine 11.33:1
   --flare     #FFC24D   ordinals            12.14:1 on abyss
   Inverted band: --foam surface, --abyss text 17.60:1,
                  --undertow #3A474E secondary 8.65:1
   Every combination used for text clears AA at 4.5:1 and most clear AAA.

   MOTION INVENTORY, four entries, each disabled under
   prefers-reduced-motion: reduce.
   1. .freshet rise, 320ms. Tells the reader the page is a sequence of
      distinct stages rather than one continuous wall of text.
   2. .conduit hairline, 160ms. Separates the fixed bar from the content
      once content has begun to pass underneath it.
   3. .gate fill shift, 120ms. Confirms a control is interactive before it
      is pressed, which colour alone does not do on a dark surface.
   4. .conduit__link marker, 120ms. Makes the hovered or focused nav item
      legible without relying on a colour change of the label text.
   ===================================================================== */

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

:root {
  --abyss: #0A0D0F;
  --bed: #12171A;
  --silt: #1B2226;
  --seam: #262F34;
  --seam-loud: #62727A;
  --foam: #F0F4F5;
  --mist: #A7B4B9;
  --turbine: #5FD9C4;
  --flare: #FFC24D;
  --undertow: #3A474E;

  --edge: 0;

  --sans: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Azeret Mono", "SFMono-Regular", Consolas, monospace;

  --gap-1: 0.5rem;
  --gap-2: 1rem;
  --gap-3: 1.5rem;
  --gap-4: 2.25rem;
  --gap-5: 3.5rem;
  --gap-6: 5rem;
  --gap-7: 7rem;

  --bay: clamp(1.25rem, 4.5vw, 4rem);
  --span: 76rem;
  --span-narrow: 46rem;

  --hair: 1px solid var(--seam);
  --hair-loud: 1px solid var(--seam-loud);
}

/* ---------- 2. Reset and base ---------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--abyss);
  color: var(--foam);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0.003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, table, blockquote {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--turbine);
  outline-offset: 3px;
}

::selection {
  background: var(--turbine);
  color: var(--abyss);
}

/* ---------- 3. Type scale -------------------------------------------- */

.crest {
  font-family: var(--sans);
  line-height: 1.03;
  text-wrap: balance;
  margin: 0;
}

.crest--xl {
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.1rem);
  font-weight: 900;
  letter-spacing: -0.035em;
}

.crest--l {
  font-size: clamp(1.95rem, 1.3rem + 2.7vw, 3.15rem);
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

.crest--m {
  font-size: clamp(1.4rem, 1.15rem + 1.15vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.crest--s {
  font-size: clamp(1.08rem, 1.02rem + 0.3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.watermark {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--turbine);
}

.watermark--mist { color: var(--mist); }
.watermark--flare { color: var(--flare); }

.hush {
  color: var(--mist);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.hush--wide { max-width: 42rem; }

.lift { color: var(--foam); font-weight: 500; }

.thread {
  color: var(--turbine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.thread:hover { text-decoration-thickness: 3px; }

.tbc {
  display: inline;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--abyss);
  background: var(--flare);
  padding: 0.15em 0.45em;
  border-radius: var(--edge);
}

/* ---------- 4. Structure --------------------------------------------- */

.penstock {
  width: 100%;
  max-width: var(--span);
  margin: 0 auto;
  padding-inline: var(--bay);
}

.penstock--narrow { max-width: var(--span-narrow); }

.bypass {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--turbine);
  color: var(--abyss);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.4rem;
  border-radius: var(--edge);
}

.bypass:focus {
  left: 0;
  top: 0;
}

main { display: block; }

/* ---------- 5. Conduit, the masthead --------------------------------- */

.conduit {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--abyss);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms linear;
}

.conduit--seamed { border-bottom-color: var(--seam); }

@media (prefers-reduced-motion: reduce) {
  .conduit { transition: none; }
}

.conduit__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.conduit__mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--foam);
}

.conduit__glyph { flex: none; }

.conduit__wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

.conduit__trade {
  display: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mist);
  padding-left: 0.7rem;
  border-left: var(--hair);
  line-height: 1.2;
}

.conduit__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: var(--hair-loud);
  border-radius: var(--edge);
  color: var(--foam);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
}

.conduit__nav { display: none; }

.conduit__nav--open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bed);
  border-top: var(--hair);
  border-bottom: var(--hair);
  padding: var(--gap-2) var(--bay) var(--gap-3);
}

.conduit__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.conduit__list li { border-bottom: var(--hair); }
.conduit__list li:last-child { border-bottom: 0; padding-top: var(--gap-2); }

.conduit__link {
  display: block;
  position: relative;
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foam);
  padding: 0.95rem 0;
}

.conduit__link::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--turbine);
  transform: translateY(-50%);
  transition: height 120ms linear;
}

.conduit__link:hover::before,
.conduit__link:focus-visible::before,
.conduit__link[aria-current="page"]::before { height: 1.05rem; }

.conduit__link[aria-current="page"] { color: var(--turbine); }

@media (prefers-reduced-motion: reduce) {
  .conduit__link::before { transition: none; }
}

@media (min-width: 62rem) {
  .conduit__toggle { display: none; }
  .conduit__trade { display: block; }

  .conduit__nav {
    display: block;
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .conduit__list {
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
  }

  .conduit__list li { border-bottom: 0; }
  .conduit__list li:last-child { padding-top: 0; }

  .conduit__link { padding: 0.5rem 0; }

  .conduit__link::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: -0.1rem;
    width: auto;
    height: 0;
    transform: none;
    transition: height 120ms linear;
  }

  .conduit__link:hover::before,
  .conduit__link:focus-visible::before,
  .conduit__link[aria-current="page"]::before { height: 2px; }
}

/* ---------- 6. Gate, the control ------------------------------------- */

.gate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: var(--edge);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.35rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear,
              border-color 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .gate { transition: none; }
}

.gate--prime {
  background: var(--turbine);
  color: var(--abyss);
}

.gate--prime:hover,
.gate--prime:focus-visible {
  background: var(--foam);
  color: var(--abyss);
}

.gate--line {
  background: transparent;
  color: var(--foam);
  border-color: var(--seam-loud);
}

.gate--line:hover,
.gate--line:focus-visible {
  border-color: var(--turbine);
  color: var(--turbine);
}

.gate--dark {
  background: var(--abyss);
  color: var(--foam);
}

.gate--dark:hover,
.gate--dark:focus-visible {
  background: var(--undertow);
  color: var(--foam);
}

.gate--slim { padding: 0.6rem 0.95rem; font-size: 0.7rem; }

.gate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- 7. Freshet, the reveal ----------------------------------- */

.no-js .freshet { opacity: 1; transform: none; }

.js .freshet {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}

.js .freshet--risen {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .freshet { opacity: 1; transform: none; transition: none; }
}

/* ---------- 8. Headrace, layout family A ----------------------------- */
/*  Full bleed asymmetric opening. A monospace rail on the left carries the
    register facts, an oversized sans display column carries the claim.
    Used once per page and never repeated as an inner section.            */

.headrace {
  border-bottom: var(--hair);
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.headrace__inner {
  display: grid;
  gap: var(--gap-4);
}

.headrace__rail {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding-top: 0.4rem;
}

.headrace__fact {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--mist);
  padding-left: 0.85rem;
  border-left: 2px solid var(--seam);
}

.headrace__fact b {
  display: block;
  font-weight: 700;
  color: var(--foam);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  margin-bottom: 0.2rem;
}

.headrace__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.headrace__brief {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem);
  line-height: 1.6;
  color: var(--mist);
  max-width: 40rem;
}

.headrace__brief strong { color: var(--foam); font-weight: 500; }

.headrace__acts { margin-top: var(--gap-2); }

@media (min-width: 55rem) {
  .headrace__inner {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.35fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

/* ---------- 9. Notice, a stated position ----------------------------- */

.notice {
  border: var(--hair);
  border-left: 3px solid var(--flare);
  background: var(--bed);
  border-radius: var(--edge);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.notice--calm { border-left-color: var(--turbine); }

.notice p { color: var(--mist); font-size: 1rem; line-height: 1.7; }
.notice p strong { color: var(--foam); font-weight: 500; }

/* ---------- 10. Strata, layout family B ------------------------------ */
/*  Full width horizontal tier bands, deepest layer last. Not a card grid:
    each tier is a rule separated row that spans the measure, with a fixed
    ordinal gutter, a label column and a prose column.                    */

.strata { padding-block: clamp(3rem, 7vw, 5.5rem); border-bottom: var(--hair); }

.strata__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  max-width: 44rem;
  margin-bottom: var(--gap-4);
}

.strata__set { border-top: var(--hair); }

.strata__tier {
  display: grid;
  gap: 0.6rem var(--gap-3);
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-bottom: var(--hair);
}

.strata__depth {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--flare);
}

.strata__label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.strata__prose { color: var(--mist); font-size: 1rem; line-height: 1.7; }

.strata__prose + .strata__prose { margin-top: 0.6rem; }

@media (min-width: 52rem) {
  .strata__tier {
    grid-template-columns: 4.5rem minmax(9rem, 14rem) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- 11. Weir, layout family C -------------------------------- */
/*  A single inverted full bleed band carrying one sentence. Deliberately
    the only light surface on the site, so it lands as a stop.            */

.weir {
  background: var(--foam);
  color: var(--abyss);
  padding-block: clamp(3rem, 8vw, 6rem);
}

.weir__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  max-width: 54rem;
}

.weir__claim {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.weir__foot {
  color: var(--undertow);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 42rem;
}

.weir__stamp {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--undertow);
}

.weir .gate--dark:focus-visible { outline-color: var(--undertow); }

/* ---------- 12. Channel, layout family D ----------------------------- */
/*  Asymmetric split: a sticky anchor column that holds still while the
    flow column scrolls past it. Text only, no imagery anywhere on site.  */

.channel {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: var(--hair);
}

.channel__inner { display: grid; gap: var(--gap-4); }

.channel__anchor {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.channel__flow { display: flex; flex-direction: column; }

.channel__entry {
  padding-block: var(--gap-3);
  border-top: var(--hair);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.channel__entry:last-child { border-bottom: var(--hair); }

.channel__tag {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--turbine);
}

.channel__entry p { color: var(--mist); font-size: 1rem; line-height: 1.7; }

@media (min-width: 56rem) {
  .channel__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .channel__anchor { position: sticky; top: 6.5rem; }
}

/* ---------- 13. Instrument, layout family E -------------------------- */
/*  A single vertical hairline spine with ordinals hung off it. One column
    only, so it never reads as a card set.                                */

.instrument {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: var(--hair);
  background: var(--bed);
}

.instrument__head {
  max-width: 44rem;
  margin-bottom: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.instrument__spine {
  border-left: var(--hair);
  padding-left: clamp(1.25rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 52rem;
}

.instrument__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.instrument__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.25rem, 4vw, 2.75rem) - 1px);
  top: 0.55rem;
  width: clamp(0.7rem, 2vw, 1.4rem);
  height: 2px;
  background: var(--turbine);
}

.instrument__ord {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--flare);
}

.instrument__gist { color: var(--mist); font-size: 1rem; line-height: 1.7; }

/* ---------- 14. Manifest, layout family F ---------------------------- */
/*  Genuine tabular data in a genuine table, scrollable on narrow screens
    so the page body itself never scrolls sideways.                       */

.manifest {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: var(--hair);
}

.manifest__head {
  max-width: 46rem;
  margin-bottom: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.manifest__scroll {
  overflow-x: auto;
  border: var(--hair);
  border-radius: var(--edge);
}

.manifest__table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.94rem;
  line-height: 1.6;
}

.manifest__table caption {
  text-align: left;
  padding: 1rem 1.1rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--mist);
  border-bottom: var(--hair);
  background: var(--silt);
}

.manifest__table th,
.manifest__table td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 1.1rem;
  border-bottom: var(--hair);
}

.manifest__table thead th {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--turbine);
  background: var(--silt);
  white-space: nowrap;
}

.manifest__table tbody th {
  font-weight: 700;
  color: var(--foam);
  width: 15rem;
}

.manifest__table td { color: var(--mist); }

.manifest__table tbody tr:last-child th,
.manifest__table tbody tr:last-child td { border-bottom: 0; }

.manifest__note {
  margin-top: var(--gap-3);
  color: var(--mist);
  font-size: 0.94rem;
  line-height: 1.7;
  max-width: 46rem;
}

.manifest__note strong { color: var(--foam); font-weight: 500; }

/* ---------- 15. Datum, layout family G ------------------------------- */
/*  Two column definition rows. Question on the left, plain answer on the
    right, hairline between. Used for the disclosures we owe a reader.    */

.datum {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: var(--hair);
}

.datum__head {
  max-width: 44rem;
  margin-bottom: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.datum__list { border-top: var(--hair); }

.datum__row {
  display: grid;
  gap: 0.5rem var(--gap-4);
  padding-block: var(--gap-3);
  border-bottom: var(--hair);
}

.datum__term {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--foam);
  margin: 0;
}

.datum__def {
  margin: 0;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.7;
}

@media (min-width: 52rem) {
  .datum__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
}

/* ---------- 16. Catchment, layout family H --------------------------- */
/*  Contact only. One wide main column of routes, one narrow aside of
    statutory detail, uneven split so it does not read as two cards.      */

.catchment { padding-block: clamp(3rem, 7vw, 5rem); border-bottom: var(--hair); }

.catchment__inner { display: grid; gap: var(--gap-4); }

.catchment__main { display: flex; flex-direction: column; gap: var(--gap-3); }

.catchment__route {
  border-top: var(--hair);
  padding-top: var(--gap-3);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.catchment__route:last-child { border-bottom: var(--hair); padding-bottom: var(--gap-3); }

.catchment__route p { color: var(--mist); font-size: 1rem; line-height: 1.7; }

.catchment__aside {
  background: var(--bed);
  border: var(--hair);
  border-radius: var(--edge);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.catchment__aside address {
  font-style: normal;
  color: var(--mist);
  font-size: 0.98rem;
  line-height: 1.7;
}

.catchment__aside dl { display: flex; flex-direction: column; gap: 0.8rem; }

.catchment__aside dt {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 0.2rem;
}

.catchment__aside dd { color: var(--foam); font-size: 0.98rem; line-height: 1.6; }

@media (min-width: 56rem) {
  .catchment__inner {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
}

/* ---------- 17. Charter, the legal document -------------------------- */

.charter { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.charter__mast {
  border-bottom: var(--hair);
  padding-bottom: var(--gap-4);
  margin-bottom: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.charter__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  color: var(--mist);
}

.charter__meta b { color: var(--foam); font-weight: 700; }

.charter__toc {
  background: var(--bed);
  border: var(--hair);
  border-radius: var(--edge);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  margin-bottom: var(--gap-5);
}

.charter__toc h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turbine);
  margin-bottom: var(--gap-2);
}

.charter__toc ol {
  display: grid;
  gap: 0.15rem;
  counter-reset: none;
}

.charter__toc a {
  display: block;
  padding: 0.35rem 0;
  color: var(--mist);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.charter__toc a:hover,
.charter__toc a:focus-visible { color: var(--turbine); }

.charter__toc a b {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--foam);
  display: inline-block;
  min-width: 2.2rem;
}

@media (min-width: 46rem) {
  .charter__toc ol { grid-template-columns: 1fr 1fr; gap: 0.15rem 2rem; }
}

.charter__part {
  padding-top: var(--gap-4);
  margin-top: var(--gap-4);
  border-top: var(--hair);
  scroll-margin-top: 6rem;
}

.charter__part:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.charter__num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--flare);
  display: block;
  margin-bottom: 0.5rem;
}

.charter__body { display: flex; flex-direction: column; gap: var(--gap-2); }

.charter__body h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--foam);
  margin-top: var(--gap-2);
}

.charter__body h4 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--turbine);
  margin-top: var(--gap-2);
}

.charter__body p { color: var(--mist); font-size: 1rem; line-height: 1.72; }

.charter__body p strong,
.charter__body li strong { color: var(--foam); font-weight: 500; }

.charter__body > h2 { margin-bottom: 0.35rem; }

.charter__bullets {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.15rem;
  list-style: disc;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.72;
}

.charter__bullets li::marker { color: var(--turbine); }

.charter__ordered {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.35rem;
  list-style: decimal;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.72;
}

.charter__ordered li::marker {
  color: var(--flare);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
}

.charter__back {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
  align-self: flex-start;
  margin-top: 0.4rem;
  border-bottom: 1px solid var(--seam-loud);
  padding-bottom: 0.15rem;
}

.charter__back:hover,
.charter__back:focus-visible { color: var(--turbine); border-bottom-color: var(--turbine); }

/*  Role marker. Every downstream part of the privacy notice is stamped
    with the capacity in which VIVAN LABS LTD acts, because the duties are
    different and a reader should not have to infer which one applies.
    Colour is doubled by the wording inside the stamp, never colour alone. */

.charter__role {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abyss);
  background: var(--turbine);
  padding: 0.28rem 0.6rem;
  border-radius: var(--edge);
}

.charter__role--processor { background: var(--flare); }
.charter__role--both { background: var(--foam); }

.charter .manifest__scroll { margin-block: var(--gap-2); }

.manifest__table--wide { min-width: 62rem; }
.manifest__table--wide tbody th { width: 11rem; }
.manifest__table--wide th,
.manifest__table--wide td { font-size: 0.88rem; padding: 0.8rem 0.9rem; }

/* ---------- 18. Tailrace, the footer --------------------------------- */

.tailrace {
  background: var(--bed);
  border-top: var(--hair);
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--gap-3);
}

.tailrace__cols {
  display: grid;
  gap: var(--gap-4);
  padding-bottom: var(--gap-4);
  border-bottom: var(--hair);
}

.tailrace__col { display: flex; flex-direction: column; gap: 0.7rem; }

.tailrace__col h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--turbine);
  margin-bottom: 0.15rem;
}

.tailrace__list { display: flex; flex-direction: column; gap: 0.55rem; }

.tailrace__list a {
  color: var(--mist);
  text-decoration: none;
  font-size: 0.96rem;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
}

.tailrace__list a:hover,
.tailrace__list a:focus-visible {
  color: var(--foam);
  border-bottom-color: var(--turbine);
}

.tailrace__col address {
  font-style: normal;
  color: var(--mist);
  font-size: 0.96rem;
  line-height: 1.7;
}

.tailrace__statutory {
  padding-top: var(--gap-3);
  color: var(--mist);
  font-size: 0.875rem;
  line-height: 1.75;
  max-width: 60rem;
}

.tailrace__statutory strong { color: var(--foam); font-weight: 500; }

.tailrace__statutory a { color: var(--mist); }

.tailrace__foot {
  margin-top: var(--gap-2);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  color: var(--mist);
}

@media (min-width: 46rem) {
  .tailrace__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
  .tailrace__cols { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* ---------- 19. Odds and ends ---------------------------------------- */

.sink {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-bottom: var(--hair);
}

.sink__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  align-items: flex-start;
  max-width: 46rem;
}

.spillway {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}

.spillway li {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mist);
  border: var(--hair);
  border-radius: var(--edge);
  padding: 0.4rem 0.7rem;
}

.plainlist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.7;
  padding-left: 1.15rem;
  list-style: disc;
}

.plainlist li::marker { color: var(--turbine); }

@media print {
  .conduit, .bypass, .gate-row, .charter__back { display: none; }
  body { background: #FFFFFF; color: #000000; }
}