/* =============================================================================
   Secondary pages: /about/, /privacy/, and 404.

   The home page is a narrative — every section has its own composition and
   earns its own stylesheet. These pages are the opposite: they exist to be
   READ, or to get someone unstuck. One column, generous measure, no motion
   that competes with the text.

   Everything here reuses the home page's tokens, so a change to the type scale
   or the palette reaches these pages without anyone remembering to come back.
   ========================================================================== */

/* --------------------------------------------------------------- page head */

.page-head {
  padding-block: var(--s-9) var(--s-7);
  border-block-end: var(--border-strong);
}

.page-head__lead {
  max-inline-size: 46rem;
  margin-block-start: var(--s-5);
}

/* Reading measure. Long-form legal and narrative text needs a shorter line
   than the marketing sections, which are deliberately wide and sparse. */
.page-body {
  padding-block: var(--s-8);
}

.page-prose {
  max-inline-size: 42rem;
}

.page-prose > * + * {
  margin-block-start: var(--s-5);
}

.page-prose h2 {
  font-size: var(--t-headline);
  line-height: 1.2;
  margin-block-start: var(--s-8);
}

.page-prose h2:first-child {
  margin-block-start: 0;
}

.page-prose h3 {
  font-size: var(--t-small);
  font-weight: 600;
  margin-block-start: var(--s-6);
}

.page-prose ul,
.page-prose ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-inline-start: var(--s-5);
}

.page-prose li {
  padding-inline-start: var(--s-2);
}

.page-prose ul li {
  list-style: square;
}

.page-prose ol li {
  list-style: decimal;
}

/* A definition row: the term on the left, what it means on the right. Used for
   the data table in the privacy policy, where a plain list would bury the
   thing people actually scan for. */
.page-defs {
  display: grid;
  gap: 0;
  margin-block-start: var(--s-5);
  border-block-start: var(--border);
}

.page-defs__row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: var(--s-4) var(--s-6);
  padding-block: var(--s-4);
  border-block-end: var(--border);
}

.page-defs__term {
  color: var(--c-ink);
  font-weight: 500;
}

.page-defs__value {
  color: var(--c-muted);
}

@media (max-width: 700px) {
  .page-defs__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
}

/* ------------------------------------------------------------ legal clauses */

/*
 * A numbered clause, with the number hanging in the margin.
 *
 * The privacy policy cross-references itself by number — "addressed at clause
 * 3", "the rights set out at clause 11" — so the numbers have to be findable
 * by eye rather than buried at the start of a paragraph. An <ol> cannot do
 * this: the numbering is two-level and fixed by the document, not by position,
 * so it is written out and the marker is a real element.
 */
.clause {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
}

.clause__n {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
}

/* A clause whose body is a list or a table rather than a sentence: the number
   still hangs, but the content sets its own rhythm. */
.clause__body > * + * {
  margin-block-start: var(--s-4);
}

/* Sub-points inside a clause are lettered in the source, (a) to (g). */
.page-prose ol.alpha li {
  list-style: lower-alpha;
}

@media (max-width: 700px) {
  .clause {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--s-3);
  }
}

/* -------------------------------------------------------- unresolved slots */

/*
 * A fact nobody has supplied yet.
 *
 * Deliberately loud. The rest of this project marks missing IMAGES with a
 * dashed box you cannot miss; missing FACTS on a legal page deserve the same
 * treatment, because the failure mode — publishing a privacy policy that says
 * "[company name]" — is worse than a missing photograph and much easier to
 * skim past. tools/audit.py counts these and prints them, so they cannot be
 * forgotten quietly.
 */
.todo {
  display: inline;
  padding: 0.1em 0.45em;
  border: 1px dashed var(--c-clay);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c-clay) 12%, transparent);
  color: var(--c-clay);
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-style: normal;
}

/* ------------------------------------------------------------------- team */

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-6);
  margin-block-start: var(--s-7);
}

.team__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.team__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-panel);
}

.team__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.team__name {
  font-size: var(--t-headline);
  line-height: 1.15;
}

.team__role {
  color: var(--c-accent-deep);
}

.team__note {
  color: var(--c-muted);
  font-size: var(--t-small);
}

/* ------------------------------------------------------------------ 404 */

/*
 * The dark ground is the same one the closing section uses, so a wrong URL
 * still lands somewhere that looks like the site rather than like a server.
 */
.notfound {
  display: flex;
  align-items: center;
  min-block-size: calc(100vh - var(--pin-top) - 12rem);
  padding-block: var(--s-9);
}

/* No `inline-size` here. This element also carries .shell, which sets its own
   width as `min(100% - gutters, max)` — restating the width wiped out both the
   gutter and the centring, and the whole page sat flush against the viewport
   edge. */
.notfound__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s-8) clamp(var(--s-6), 6vw, var(--s-9));
  align-items: center;
}

.notfound__code {
  font-family: var(--font-mono);
  color: var(--c-accent);
}

.notfound__lead {
  margin-block-start: var(--s-5);
  max-inline-size: 34rem;
}

.notfound__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block-start: var(--s-7);
  border-block-start: var(--border-strong);
}

.notfound__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: var(--border);
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start var(--d-base) var(--e-out);
}

.notfound__link:hover,
.notfound__link:focus-visible {
  padding-inline-start: var(--s-3);
}

.notfound__link .btn__arrow {
  color: var(--c-accent);
}

/* The broken wire: the hero's convergence, failing. Two segments reach for
   each other across a gap that never closes — the page's own visual language
   saying "this connection does not exist" without a word of copy. */
.notfound__art {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 20rem;
}

.notfound__wire {
  stroke: var(--c-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  opacity: 0.55;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: notfound-draw 1400ms var(--e-out) forwards;
  animation-delay: var(--at, 0ms);
}

.notfound__node {
  fill: var(--c-accent);
  opacity: 0;
  animation: notfound-arrive 600ms var(--e-out) forwards;
  animation-delay: var(--at, 0ms);
}

/* The gap between the two reaching ends. It pulses, and never closes. */
.notfound__gap {
  fill: none;
  stroke: var(--c-clay);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
  opacity: 0;
  animation: notfound-gap 2600ms var(--e-in-out) 1500ms infinite;
}

@keyframes notfound-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes notfound-arrive {
  to {
    opacity: 1;
  }
}

@keyframes notfound-gap {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.85;
  }
}

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

  /* The artwork is the first thing that goes: on a phone the reader wants the
     links, not a diagram about their absence. */
  .notfound__art {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notfound__wire {
    stroke-dashoffset: 0;
    animation: none;
  }

  .notfound__node {
    opacity: 1;
    animation: none;
  }

  .notfound__gap {
    opacity: 0.55;
    animation: none;
  }
}