/* Hallmark · genre: editorial · macrostructure: Split Studio · nav: N9 · footer: Ft4
 * theme: studied-DNA (source: url https://www.human.health + custom-03 Ferns & Fathom)
 *   paper  oklch(95.5% 0.012 75) warm parchment · wells oklch(96.5% 0.012 295) cool lilac
 *   accent oklch(50% 0.14 275) softened periwinkle
 *   display: Fraunces · body: Newsreader · data: Space Mono
 *   pillar tints remapped from the source app's severity ramp: Body / Mind
 * tone: technical-austere · audience: prospective users, collaborators, NZ registry
 * enrichment: none (typography only) · studied: yes
 * contrast: pass (40-41, 68 text elements measured, lowest 5.43:1)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * mobile: pass (34, 49, 50-57) · slop: pass (42-45) · icons: pass (30, no icons)
 * gate 38: deviation. Space Mono runs in four slots (register, spec labels,
 *   pillar tracks, colophon) rather than the two the gate allows. It carries one
 *   consistent role, the machine/registry voice, per the Ferns & Fathom data-face
 *   system. Documented rather than silently passed.
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* ---- Reset ------------------------------------------------------------ */

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

html,
body {
  /* clip, never hidden (hidden breaks position: sticky) */
  overflow-x: clip;
}

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

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  padding-inline: max(var(--page-gutter), env(safe-area-inset-left));
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Shared -------------------------------------------------------------- */

.shell {
  max-width: var(--maxw-page);
  margin-inline: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-style: normal; /* headers are roman, always */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  /* long single words (URLs, compounds) must never overflow the display */
  overflow-wrap: anywhere;
  min-width: 0;
}

h2 {
  font-size: var(--text-display-s);
}

h3 {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}

p {
  max-width: var(--measure);
}

a {
  color: inherit;
}

:focus-visible {
  /* never transitioned; the ring must appear instantly */
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-3xs);
  border-radius: var(--radius-xs);
}

.label {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---- N9 · Edge-aligned minimal nav --------------------------------------- */
/* Wordmark hard-left, one affordance hard-right. The space between is the
   design; do not fill it with a link row. */

.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-block: var(--space-lg) var(--space-3xl);
}

.nav__mark {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* C3 · typographic link: a word, an arrow, a hairline underline */
.link {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid var(--color-accent-soft);
  padding-bottom: var(--space-3xs);
  transition: border-color var(--dur-short) var(--ease-out);
}

.link:hover {
  border-bottom-color: var(--color-accent);
}

.link:active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* ---- Hero · H2 Split Diptych 7/5 ----------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-bottom: var(--space-4xl);
}

.hero__title {
  font-size: var(--text-display);
  max-width: 13ch;
}

.hero__lede {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  max-width: var(--measure-narrow);
  color: var(--color-ink-2);
}

/* the proof half: a register, not a marketing panel */
.hero__register {
  align-self: end;
  border-top: var(--rule-fine) solid var(--color-line-2);
  padding-top: var(--space-sm);
}

.register {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  font-family: var(--font-data);
  font-size: var(--text-xs);
}

.register dt {
  color: var(--color-muted);
  white-space: nowrap;
}

.register dd {
  color: var(--color-ink-2);
}

/* ---- Split Studio modules ------------------------------------------------ */
/* Every block divides; direction alternates down the page. Gutter, no rules. */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-block: var(--space-3xl);
}

.split__body p + p {
  margin-top: var(--space-md);
}

.split__aside {
  align-self: start;
}

.split__aside p {
  font-size: var(--text-base);
  color: var(--color-ink-2);
}

.split__heading {
  margin-bottom: var(--space-lg);
}

/* ---- Cool wells ---------------------------------------------------------- */
/* The data-bearing sections sit in a recessed cool band. Full-bleed via
   negative margin on the gutter, never 100vw. */

.well {
  background: var(--color-well);
  border-block: var(--rule-hair) solid var(--color-well-line);
  margin-inline: calc(var(--page-gutter) * -1);
  padding-inline: var(--page-gutter);
  padding-block: var(--space-3xl);
}

.well + .well {
  border-top: none;
}

/* ---- F3 · Tabular spec sheet --------------------------------------------- */

/* Mobile-first: the rows stack, because a two-column table cannot survive a
   320px viewport. The tabular layout returns at 40rem. */

.spec {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-xl);
  text-align: left;
}

.spec,
.spec tbody,
.spec tr,
.spec th,
.spec td {
  display: block;
  width: auto;
}

.spec tr {
  border-top: var(--rule-hair) solid var(--color-well-line);
  padding-block: var(--space-sm);
}

.spec tr:last-child {
  border-bottom: var(--rule-hair) solid var(--color-well-line);
}

.spec th {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  padding: 0 0 var(--space-3xs);
}

.spec td {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  padding: 0;
}

.spec .spec__note {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (min-width: 40rem) {
  .spec {
    display: table;
    width: 100%;
  }

  .spec tbody {
    display: table-row-group;
  }

  .spec tr {
    display: table-row;
    padding-block: 0;
    border: none;
  }

  .spec th,
  .spec td {
    display: table-cell;
    border-top: var(--rule-hair) solid var(--color-well-line);
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
    vertical-align: baseline;
  }

  .spec tr:last-child th,
  .spec tr:last-child td {
    border-bottom: var(--rule-hair) solid var(--color-well-line);
  }

  .spec th {
    width: 12rem;
    padding-right: var(--space-md);
  }

  .spec .spec__note {
    display: inline;
  }
}

/* ---- Pillars ------------------------------------------------------------- */
/* The tint IS the taxonomy. Body and Mind each own one; neither is decorative,
   and no third tint exists because there is no third pillar. */

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.pillar {
  padding: var(--space-lg);
  border: var(--rule-hair) solid;
  border-radius: var(--radius-sm);
}

.pillar[data-pillar="body"] {
  background: var(--pillar-body);
  border-color: var(--pillar-body-line);
}

.pillar[data-pillar="mind"] {
  background: var(--pillar-mind);
  border-color: var(--pillar-mind-line);
}

.pillar__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.pillar[data-pillar="body"] .pillar__name {
  color: var(--pillar-body-ink);
}

.pillar[data-pillar="mind"] .pillar__name {
  color: var(--pillar-mind-ink);
}

.pillar__body {
  margin-top: var(--space-2xs);
  font-size: var(--text-base);
  color: var(--color-ink);
  max-width: none;
}

.pillar__tracks {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink-2);
}

.pillar[data-pillar="body"] .pillar__tracks {
  border-top-color: var(--pillar-body-line);
}

.pillar[data-pillar="mind"] .pillar__tracks {
  border-top-color: var(--pillar-mind-line);
}

/* ---- Principles ---------------------------------------------------------- */

.principles {
  margin-top: var(--space-xl);
  list-style: none;
  display: grid;
  gap: var(--space-lg);
}

.principle {
  display: grid;
  align-content: start; /* claim and gloss stay paired; rows do not stretch */
  gap: var(--space-3xs);
  padding-left: var(--space-md);
  border-left: var(--rule-fine) solid var(--color-line);
  max-width: var(--measure);
}

.principle__claim {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
}

.principle__gloss {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  max-width: none;
}

/* ---- Contact ------------------------------------------------------------- */

.contact {
  max-width: var(--maxw-page);
  margin-inline: auto;
  padding-block: var(--space-4xl) var(--space-3xl);
}

.contact__address {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-style: normal;
  line-height: var(--lh-snug);
}

.contact__address a {
  text-decoration: none;
  border-bottom: var(--rule-fine) solid var(--color-accent-soft);
  transition: border-color var(--dur-short) var(--ease-out);
}

.contact__address a:hover {
  border-bottom-color: var(--color-accent);
}

.contact__address a:active {
  color: var(--color-accent);
}

/* ---- Ft4 · Dense typographic colophon ------------------------------------ */

.colophon {
  max-width: var(--maxw-page);
  margin-inline: auto;
  border-top: var(--rule-hair) solid var(--color-line);
  padding-block: var(--space-lg) var(--space-2xl);
  padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom));
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: var(--color-muted);
}

.colophon p {
  max-width: 68ch;
}

.colophon a {
  color: var(--color-muted);
  text-decoration-color: var(--color-line-2);
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.colophon a:hover,
.colophon a:active {
  color: var(--color-accent);
}

.nav__mark:hover,
.nav__mark:active {
  color: var(--color-accent);
}

/* ---- Motion -------------------------------------------------------------- */
/* One orchestrated entrance, on the hero halves only. Nothing else on the
   page animates on scroll; the content is simply there. */

@media (prefers-reduced-motion: no-preference) {
  .hero > * {
    animation: rise var(--dur-long) var(--ease-out) both;
  }

  .hero > *:nth-child(2) {
    animation-delay: 90ms;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Breakpoints --------------------------------------------------------- */

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

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-3xl);
    align-items: end;
  }

  .split {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-3xl);
  }

  /* alternation: every other module flips the diptych */
  .split.-flip .split__body {
    order: 2;
  }

  .split.-flip {
    grid-template-columns: 5fr 7fr;
  }

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-xl);
  }
}