/* ════════════════════════════════════════════════════════════════════
   personalised.health — health-data sovereignty
   Register: clinical, precise, trustworthy. The patient holds the record.
   Aesthetic: a calm clinical chart — warm paper, deep ink, a single
   restrained clinical-teal; consent-ledger motif. System fonts only.
   ════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;
  --paper:#faf9f6;
  --paper-2:#f3f1ea;
  --ink:#1b1c1a;
  --ink-soft:#3a3c39;
  --muted:#6c6f69;
  --rule:#e0ded4;
  --rule-strong:#cfccc0;
  --teal:#0f6b63;          /* clinical accent */
  --teal-ink:#0c534d;
  --teal-wash:#e7f1ef;
  --amber:#9a6b12;         /* "active" state, used sparingly */
  --measure:40rem;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#121311;
    --paper-2:#1a1c19;
    --ink:#eef0ea;
    --ink-soft:#cdcfc8;
    --muted:#9a9d94;
    --rule:#2a2c27;
    --rule-strong:#3a3d37;
    --teal:#5fcabf;
    --teal-ink:#8adfd5;
    --teal-wash:#15211f;
    --amber:#e0b86a;
  }
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* faint clinical grid, drawn with gradients — no external assets */
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--rule) 38%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--rule) 22%, transparent) 1px, transparent 1px);
  background-size:clamp(2rem,6vw,3.5rem) clamp(2rem,6vw,3.5rem);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--teal); color:#fff; padding:.6rem 1rem;
  font-family:var(--sans); font-size:.9rem; border-radius:0 0 .4rem 0;
}
.skip-link:focus{ left:0; }

a{ color:var(--teal-ink); text-underline-offset:.18em; text-decoration-thickness:from-font; }
a:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:2px; }

.wrap, .masthead-inner, .colophon-inner, .colophon-bottom,
main > section{
  width:min(72rem, 100%);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
}

/* ─── Masthead ─────────────────────────────────────────────── */
.masthead{
  border-bottom:1px solid var(--rule);
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(6px);
  position:sticky; top:0; z-index:40;
  padding-block:clamp(.85rem,2vw,1.1rem);
}
.masthead-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wordmark{
  font-family:var(--sans); font-weight:650; letter-spacing:-.02em;
  font-size:clamp(1.1rem,2.6vw,1.4rem); color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:baseline;
}
.wordmark .dot{ color:var(--teal); padding-inline:.02em; }
.wordmark .seg:first-child{ color:var(--ink); }
.masthead-status{
  margin:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--muted); display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.pulse{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 0 color-mix(in oklab, var(--teal) 60%, transparent);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--teal) 55%, transparent); }
  70%{ box-shadow:0 0 0 .5rem transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@media (max-width:30rem){ .masthead-status{ display:none; } }

/* ─── Section scaffolding ──────────────────────────────────── */
main > section{ padding-block:clamp(3.5rem,9vw,6.5rem); }
main > section + section{ border-top:1px solid var(--rule); }

.kicker{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-ink); margin:0 0 .9rem;
}
.eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-ink); margin:0 0 1.2rem;
}
.section-head{ max-width:var(--measure); margin-bottom:clamp(2rem,5vw,3rem); }
.section-head h2{
  font-family:var(--sans); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.6rem,4.5vw,2.6rem); line-height:1.12; margin:0; color:var(--ink);
}

/* ─── Hero ─────────────────────────────────────────────────── */
.hero{ padding-top:clamp(3rem,8vw,5.5rem)!important; }
.hero h1{
  font-family:var(--sans); font-weight:650; letter-spacing:-.035em;
  font-size:clamp(2.5rem,8.5vw,5rem); line-height:.99; margin:0 0 1.4rem;
  max-width:18ch;
}
.hero .lede{
  font-size:clamp(1.15rem,2.4vw,1.4rem); line-height:1.55; max-width:var(--measure);
  color:var(--ink-soft); margin:0 0 1.5rem;
}
.hero .lede strong{ color:var(--ink); font-weight:600; }
.hero-note{
  font-family:var(--sans); font-size:.95rem; color:var(--muted);
  max-width:var(--measure); margin:0;
  border-left:2px solid var(--teal); padding-left:1rem;
}

/* ─── Thesis / principles ──────────────────────────────────── */
.principles{
  display:grid; gap:1px; background:var(--rule);
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
  border:1px solid var(--rule); border-radius:.5rem; overflow:hidden;
}
.principle{ background:var(--paper); padding:clamp(1.5rem,3vw,2rem); }
.p-num{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); margin:0 0 .9rem;
}
.principle h3{
  font-family:var(--sans); font-weight:600; font-size:1.12rem; letter-spacing:-.01em;
  margin:0 0 .6rem; color:var(--ink);
}
.principle p{ margin:0; font-size:.98rem; color:var(--ink-soft); line-height:1.55; }

/* ─── How it works — consent ledger ────────────────────────── */
.ledger{ list-style:none; margin:0 0 clamp(2.5rem,6vw,4rem); padding:0; max-width:52rem; }
.ledger-row{
  display:grid; grid-template-columns:7.5rem 1fr; gap:clamp(1rem,3vw,2rem);
  padding:clamp(1.4rem,3vw,1.9rem) 0; border-top:1px solid var(--rule);
  position:relative;
}
.ledger-row:last-child{ border-bottom:1px solid var(--rule); }
.ledger-step{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-ink); align-self:start; padding-top:.2rem;
  display:inline-flex; align-items:center; gap:.6rem;
}
.ledger-step::before{
  content:""; width:.55rem; height:.55rem; border-radius:50%;
  border:2px solid var(--teal); background:var(--paper); flex:none;
}
.ledger-body h3{
  font-family:var(--sans); font-weight:600; font-size:1.18rem; letter-spacing:-.01em;
  margin:0 0 .4rem; color:var(--ink);
}
.ledger-body p{ margin:0; color:var(--ink-soft); max-width:42ch; }
@media (max-width:34rem){
  .ledger-row{ grid-template-columns:1fr; gap:.6rem; }
  .ledger-step{ padding-top:0; }
}

/* consent receipt card */
.receipt{ margin:0; max-width:32rem; }
.receipt-card{
  background:var(--paper-2);
  border:1px solid var(--rule-strong); border-radius:.65rem;
  padding:clamp(1.25rem,3vw,1.6rem);
  box-shadow:0 1px 0 var(--rule), 0 18px 40px -28px color-mix(in oklab, var(--ink) 50%, transparent);
}
.receipt-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px dashed var(--rule-strong);
}
.receipt-label{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.receipt-state{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-ink); background:var(--teal-wash);
  padding:.2rem .5rem; border-radius:1rem; border:1px solid color-mix(in oklab, var(--teal) 30%, transparent);
}
.receipt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.4rem; margin:0; }
.receipt-grid div{ min-width:0; }
.receipt-grid dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.18rem; }
.receipt-grid dd{ margin:0; font-family:var(--sans); font-size:.95rem; font-weight:500; color:var(--ink); }
.receipt-foot{
  margin:1rem 0 0; padding-top:.85rem; border-top:1px dashed var(--rule-strong);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--muted);
}
.receipt figcaption{ font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:.9rem; }
@media (max-width:24rem){ .receipt-grid{ grid-template-columns:1fr; } }

/* ─── Audience ─────────────────────────────────────────────── */
.aud-grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem,1fr));
}
.aud-card{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:.55rem;
  padding:clamp(1.4rem,3vw,1.9rem); border-top:3px solid var(--teal);
}
.aud-card h3{
  font-family:var(--sans); font-weight:600; font-size:1.2rem; letter-spacing:-.01em;
  margin:0 0 .55rem; color:var(--ink);
}
.aud-card p{ margin:0; font-size:.98rem; color:var(--ink-soft); }

/* ─── Stance / pull quote ──────────────────────────────────── */
.stance{ text-align:center; }
.stance blockquote{
  margin:0 auto; max-width:34rem;
}
.stance blockquote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,4.5vw,2.4rem); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); margin:0;
}

/* ─── Footer ───────────────────────────────────────────────── */
.colophon{
  border-top:1px solid var(--rule-strong);
  background:var(--paper-2);
  padding-block:clamp(2.5rem,6vw,4rem);
}
.colophon-inner{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1.4fr 1fr; }
@media (max-width:38rem){ .colophon-inner{ grid-template-columns:1fr; } }
.wordmark--foot{ font-size:1.15rem; margin:0 0 .8rem; }
.wordmark--foot .seg{ color:var(--ink); }
.wordmark--foot .dot{ color:var(--teal); }
.colophon-line{ margin:0; color:var(--muted); max-width:34ch; font-size:.98rem; }
.col-h{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .9rem;
}
.colophon-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.colophon-nav li{ font-size:.92rem; color:var(--muted); }
.colophon-nav a{ font-family:var(--sans); font-weight:550; color:var(--ink); text-decoration:none; }
.colophon-nav a:hover{ color:var(--teal-ink); text-decoration:underline; }
.colophon-bottom{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  margin-top:clamp(2rem,5vw,3rem); padding-top:1.5rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--muted);
}

/* ─── Reveals (CSS scroll-driven; visible by default) ──────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
    @keyframes reveal-in{
      from{ opacity:0; transform:translateY(1.1rem); }
      to{ opacity:1; transform:none; }
    }
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
}