/* =========================================================================
   BluKernel Labs
   Cosmic Technical — a deep field, hairline structure, two voices of type.

   Voices
     Newsreader     the cosmic voice. Light, high-contrast, almanac-like.
                    Used only for headlines and the closing line.
     IBM Plex Sans  the machine voice, spoken quietly. All running text.
     IBM Plex Mono  the machine voice, spoken precisely. Labels, indices,
                    statuses, the address itself.

   Colour discipline
     Gold is the core. It appears in exactly three places — the mark, the
     kernel, and the tick that opens each section. Blue is the working
     accent: links, focus, the one lit ring, live status.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Canvas */
  --void:        #05070C;
  --deep:        #090D15;

  /* Ink — contrast ratios measured against --void */
  --paper:       #E7EBF3;   /* 16.8:1  primary text */
  --ash:         #98A3B8;   /*  7.9:1  running text, secondary */
  --dim:         #737E93;   /*  4.9:1  labels, metadata */

  /* Accent */
  --gold:        #D9B26B;   /* 10.1:1 */
  --signal:      #8AB0F0;   /*  9.2:1 */

  /* Structure */
  --hair:        rgba(231, 235, 243, .085);
  --hair-strong: rgba(231, 235, 243, .17);

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-hero:  clamp(2.45rem, 1.4rem + 4.1vw, 4.75rem);
  --t-h2:    clamp(1.95rem, 1.15rem + 3.1vw, 3.6rem);
  --t-h3:    clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  --t-lede:  clamp(1.0625rem, .98rem + .45vw, 1.3125rem);
  --t-body:  clamp(.9375rem, .9rem + .18vw, 1.0625rem);
  --t-mono:  clamp(.6875rem, .66rem + .1vw, .75rem);

  /* Rhythm */
  --shell:   1240px;
  --pad:     clamp(1.25rem, 4vw, 3.5rem);
  --band:    clamp(5rem, 9vw, 10rem);
  --gap:     clamp(2rem, 5.5vw, 5.5rem);

  --ease:    cubic-bezier(.16, .84, .44, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ash);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure, figcaption { margin: 0; }
ul, ol { padding: 0; list-style: none; }
canvas { display: block; }

a { color: inherit; }

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

::selection {
  background: rgba(217, 178, 107, .22);
  color: var(--paper);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--deep);
  border: 1px solid var(--hair-strong);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Ambient layers ----------------------------------------------------- */
.field,
.grid-overlay,
.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.field { width: 100%; height: 100%; }

/* A faint measured grid — the sky, ruled. */
.grid-overlay {
  background-image: linear-gradient(90deg, rgba(231, 235, 243, .032) 1px, transparent 1px);
  background-size: 104px 100%;
  -webkit-mask-image: radial-gradient(125% 85% at 50% -5%, #000 0%, transparent 70%);
          mask-image: radial-gradient(125% 85% at 50% -5%, #000 0%, transparent 70%);
}

.vignette {
  background:
    radial-gradient(85% 55% at 50% -12%, rgba(138, 176, 240, .07), transparent 62%),
    radial-gradient(130% 105% at 50% 45%, transparent 38%, rgba(1, 2, 5, .82) 100%);
}

.masthead, main, .colophon { position: relative; z-index: 1; }

/* --- Shell -------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --- Utility type ------------------------------------------------------- */
.eyebrow,
.rule__label,
.status__inner span,
.cap__meta,
.principle__meta,
.kernel__caption,
.colophon__legal,
.channel__label,
.mark__suffix {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .17em;
  line-height: 1.5;
}

.eyebrow { color: var(--dim); }
.eyebrow .dot { color: var(--gold); margin-inline: .35em; }

/* =========================================================================
   Masthead
   ========================================================================= */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}

.masthead.is-condensed {
  background: rgba(5, 7, 12, .78);
  border-bottom-color: var(--hair);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.mark {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  color: var(--paper);
  text-decoration: none;
}

.mark__glyph {
  align-self: center;
  color: var(--paper);
  flex: none;
  transition: transform .8s var(--ease);
}
.mark:hover .mark__glyph { transform: rotate(60deg); }

.mark__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -.005em;
}

.mark__suffix { color: var(--dim); font-size: .625rem; }

/* --- Navigation --------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.nav a {
  position: relative;
  padding-block: .35rem;
  color: var(--ash);
  font-size: .875rem;
  text-decoration: none;
  transition: color .3s var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}

.nav a:hover,
.nav a.is-here { color: var(--paper); }
.nav a:hover::after,
.nav a.is-here::after { transform: scaleX(1); }

.nav__cta {
  padding: .45rem 1.05rem;
  border: 1px solid var(--hair-strong);
  color: var(--paper) !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { border-color: var(--signal); }

.menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid var(--hair-strong);
  cursor: pointer;
}
.menu__bar {
  display: block;
  width: 15px;
  margin-inline: auto;
  height: 1px;
  background: var(--paper);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.menu[aria-expanded="true"] .menu__bar:first-child { transform: translateY(3px) rotate(45deg); }
.menu[aria-expanded="true"] .menu__bar:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero { padding-top: clamp(6.5rem, 11vh, 8.5rem); }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: var(--gap);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hero__headline {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-weight: 200;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -.021em;
  color: var(--paper);
}

.hero__headline em {
  font-style: italic;
  font-weight: 200;
  color: var(--ash);
}

.hero__lede {
  max-width: 42ch;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: var(--t-lede);
  line-height: 1.62;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: .8rem 1.6rem;
  border: 1px solid var(--hair-strong);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
  transition: border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.btn:hover { border-color: var(--signal); color: var(--signal); }

.btn--primary {
  border-color: rgba(217, 178, 107, .55);
  color: var(--gold);
}
.btn--primary:hover {
  border-color: var(--gold);
  background: rgba(217, 178, 107, .09);
  color: var(--gold);
}

/* --- The kernel --------------------------------------------------------- */
.hero__figure { display: flex; justify-content: center; }

.kernel {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
}

.kernel canvas,
.kernel__static { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Once JS is running the canvas owns the diagram. */
.js .kernel__static { display: none; }

.kernel__caption {
  position: absolute;
  left: 50%;
  bottom: -2.4rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: max-content;
  max-width: 100%;
  color: var(--dim);
  text-align: center;
}
.kernel__caption span { color: var(--gold); }

/* --- Status strip ------------------------------------------------------- */
.status {
  border-block: 1px solid var(--hair);
  background: rgba(9, 13, 21, .4);
}

.status__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 1.1rem;
  color: var(--dim);
}

.status__inner span { position: relative; }

.status__inner span:first-child { color: var(--ash); }

.status__inner span:first-child::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: .7em;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: middle;
  animation: pulse 3.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* =========================================================================
   Sections
   ========================================================================= */
.section { padding-block: var(--band) 0; }

/* The opening rule: a gold tick, a label, and a line to the margin. */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 4rem);
}

.rule::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--gold);
}

.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}

.rule__label { color: var(--ash); }

.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.section__headline {
  font-family: var(--serif);
  font-weight: 200;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--paper);
}

.section__headline em { font-style: italic; color: var(--ash); }

.section__headline--wide { max-width: 18ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.prose { max-width: 46ch; }
.prose p + p { margin-top: 1.2em; }

.prose .pull {
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.1875rem, 1rem + .8vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -.008em;
}

/* --- Capabilities ------------------------------------------------------- */
.capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--hair);
  border-block: 1px solid var(--hair);
}

.cap {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  background: var(--void);
  transition: background-color .45s var(--ease);
}
.cap:hover { background: var(--deep); }

.cap__meta { color: var(--dim); }

.cap__title {
  margin-top: .85rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--paper);
}

.cap__text { margin-top: .7rem; font-size: .9375rem; line-height: 1.62; }

/* --- Principles --------------------------------------------------------- */
.principles { border-top: 1px solid var(--hair); }

.principle {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 8rem;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hair);
}

.principle__index {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--dim);
}

.principle__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--paper);
}

.principle__text { margin-top: .6rem; max-width: 52ch; }

.principle__meta { color: var(--dim); text-align: right; }

/* --- Contact ------------------------------------------------------------
   Three channels, set as a hairline-ruled list. */
.channels {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--hair);
}

.channel {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: .5rem 1.5rem;
  align-items: baseline;
  padding-block: clamp(1.35rem, 2.4vw, 1.9rem);
  border-bottom: 1px solid var(--hair);
}

.channel__label { color: var(--dim); }

.channel__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  font-family: var(--mono);
  font-size: clamp(1rem, .86rem + .55vw, 1.35rem);
  letter-spacing: -.01em;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.channel__value a {
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 176, 240, .35);
  padding-bottom: .1em;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.channel__value a:hover { color: var(--signal); border-bottom-color: var(--signal); }

/* A postal address is several lines, so it drops out of the flex row. */
.channel__value--address {
  display: block;
  font-size: clamp(.9rem, .85rem + .2vw, 1.0625rem);
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--ash);
}

/* An unfilled channel reads as unfilled — never as a real number. */
.channel__value--empty {
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--dim);
}
.channel__value--empty::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: .9em;
  background: var(--hair-strong);
  vertical-align: middle;
}

.copy {
  padding: .5rem 1rem;
  background: none;
  border: 1px solid var(--hair-strong);
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .17em;
  cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.copy:hover { color: var(--paper); }
.copy.is-done { color: var(--gold); border-color: rgba(217, 178, 107, .5); }

/* Sections pad top only, but the channel list ends on a rule and the
   colophon starts on one — they need air between them. */
.section--contact { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   Colophon
   ========================================================================= */
.colophon {
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--hair);
}

.colophon__line {
  max-width: 20ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--paper);
}

.colophon__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hair);
}

.colophon__legal {
  max-width: 52ch;
  color: var(--dim);
  text-transform: none;
  letter-spacing: .04em;
  line-height: 1.7;
}

/* =========================================================================
   Reveal
   ========================================================================= */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}

/* The hairline is drawn, not faded — it is the page's structural idea. */
.has-reveal .rule::after { transform: scaleX(0); transform-origin: left; }

.has-reveal .rule.is-revealed::after {
  transform: scaleX(1);
  transition: transform .9s var(--ease) 150ms;
}

.has-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity   .75s var(--ease) var(--reveal-delay, 0ms),
    transform .75s var(--ease) var(--reveal-delay, 0ms);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
  .capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }

  .hero__figure { order: 2; margin-top: 1rem; }
  .kernel { width: min(78%, 320px); }
  .kernel__caption { bottom: -2.2rem; }

  .section__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  /* The toggle is only shown when JS can drive it. */
  .js .menu { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--pad) 1.5rem;
    background: rgba(5, 7, 12, .96);
    border-bottom: 1px solid var(--hair);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
  }

  .nav a { padding-block: .95rem; border-bottom: 1px solid var(--hair); font-size: 1rem; }
  .nav a::after { display: none; }

  .nav__cta {
    margin-top: 1.25rem;
    border: 1px solid var(--hair-strong);
    text-align: center;
    padding-block: .9rem;
  }

  .js .nav { display: none; }
  .js.nav-open .nav { display: flex; }

  /* Without JS there is no toggle, so the nav simply flows in the header
     rather than hiding behind a button that cannot open. */
  html:not(.js) .masthead { position: static; background: none; }
  html:not(.js) .masthead__inner { flex-wrap: wrap; padding-bottom: 1rem; }
  html:not(.js) .nav {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem 1.35rem;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  html:not(.js) .nav a { padding-block: .3rem; border: 0; font-size: .9375rem; }
  html:not(.js) .nav__cta { margin-top: 0; padding: .4rem 1rem; }
  html:not(.js) .hero { padding-top: 1.5rem; }

  .principle { grid-template-columns: 3rem minmax(0, 1fr); }
  .principle__meta { grid-column: 2; text-align: left; margin-top: .9rem; }
}

@media (max-width: 620px) {
  .capabilities { grid-template-columns: minmax(0, 1fr); }
  .channel { grid-template-columns: minmax(0, 1fr); }

  .colophon__foot { flex-direction: column; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .has-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* --- Document pages ------------------------------------------------------
   Policies, contact and about. Long-form text in the same deep field: hairline
   structure, mono labels, gold only on the section index. Built to be navigated
   and cited rather than scrolled, so clauses are numbered.
   ------------------------------------------------------------------------ */
.doc {
  position: relative;
  z-index: 1;
  padding-block: clamp(7rem, 12vh, 9.5rem) clamp(3rem, 6vw, 5rem);
  counter-reset: sec;
}
.doc__shell { width: min(100% - (2 * var(--pad)), 46rem); margin-inline: auto; }

.doc__title {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: .9rem 0 0;
}
.doc__meta {
  font-family: var(--mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--dim);
  margin: 1.1rem 0 0;
}
.doc__meta::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--gold);
  margin-right: .8em;
  vertical-align: middle;
}
.doc__lede {
  color: var(--ash);
  font-size: var(--t-lede);
  line-height: 1.55;
  margin: 1.4rem 0 0;
}

.doc h2 {
  counter-increment: sec;
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.35;
  color: var(--paper);
  margin: 3rem 0 .6rem;
  scroll-margin-top: 6rem;
}
.doc h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--gold);
  margin-right: .8em;
}
.doc h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  color: var(--paper);
  margin: 1.7rem 0 .35rem;
}
.doc p { margin: 0; }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 1.05em; }
.doc ul { margin: .8rem 0 0; padding-left: 1.15rem; display: grid; gap: .5rem; }
.doc li { color: var(--ash); }
.doc li::marker { color: var(--hair-strong); }
.doc strong { color: var(--paper); font-weight: 400; }
.doc a { color: var(--signal); text-decoration: none; border-bottom: 1px solid rgba(138,176,240,.32); }
.doc a:hover { border-bottom-color: var(--signal); }

/* Section index. */
.doc__toc { margin-top: 2.5rem; padding: 1.2rem 1.35rem; border: 1px solid var(--hair); background: var(--deep); }
.doc__toc p {
  font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase;
  letter-spacing: .17em; color: var(--dim); margin-bottom: .8rem;
}
.doc__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; counter-reset: toc; }
.doc__toc li { counter-increment: toc; display: flex; gap: .75rem; line-height: 1.45; }
.doc__toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-mono); color: var(--gold);
  flex: none; padding-top: .18rem;
}
.doc__toc a { border-bottom: 0; color: var(--ash); }
.doc__toc a:hover { color: var(--paper); }

/* A statement meant to be read, not skimmed past. */
.doc__note { margin: 1.2rem 0; padding: 1rem 1.2rem; border-left: 2px solid var(--gold); background: var(--deep); }
.doc__note > :first-child { margin-top: 0; }

/* Term, then what it means. */
.doc__defs { margin-top: .9rem; padding: 0; list-style: none; display: grid; gap: .85rem; }
.doc__defs li { padding-left: 1rem; border-left: 1px solid var(--hair); }
.doc__defs b { display: block; color: var(--paper); font-weight: 400; }

/* Records: addresses, officers, particulars. */
.doc__card { margin-top: 1.1rem; padding: 1.2rem 1.35rem; border: 1px solid var(--hair); background: var(--deep); }
.doc__card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; }
.doc__card dt {
  font-family: var(--mono); font-size: var(--t-mono); text-transform: uppercase;
  letter-spacing: .14em; color: var(--dim); padding-top: .22rem;
}
.doc__card dd { margin: 0; color: var(--paper); line-height: 1.6; }

.doc__pages {
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  font-family: var(--mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: .14em;
}
.doc__pages a { color: var(--dim); border-bottom: 0; }
.doc__pages a:hover { color: var(--gold); }
.doc__back { display: inline-block; margin-top: 1.6rem; color: var(--dim); border-bottom: 0; }
.doc__back:hover { color: var(--gold); }

@media (max-width: 620px) {
  .doc__card dl { grid-template-columns: 1fr; gap: .15rem; }
  .doc__card dd { margin-bottom: .7rem; }
  .doc__card dd:last-of-type { margin-bottom: 0; }
}

/* Company and legal links in the colophon. */
.colophon__links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .17em;
}
.colophon__links a { color: var(--dim); text-decoration: none; }
.colophon__links a:hover { color: var(--gold); }
.colophon__legal a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--hair-strong); }
.colophon__legal a:hover { color: var(--gold); }