/* ═══════════════════════════════════════════════════════════════════════════
   Saviora — "The two-minute consultation"

   The page is set as a journal article: a mono rail carrying section numbers,
   a serif measure for the argument, hairline rules between sections, and one
   figure. Every colour and face is doing a named job — the apparatus (labels,
   numbers, captions) is mono, the argument is serif, the headings are the one
   grotesque. One dark surface, Figure 1, and one warm colour inside it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Sampled from the Saviora mark: the navy figure, the teal wings and cross,
     the azure wings. Nothing on this page is coloured outside that set. */
  --navy:    #003A84;
  --navy-2:  #0B4FA8;
  --teal:    #00A090;
  --azure:   #0090D8;

  /* Surfaces — a cool light ground the mark sits on without a box around it. */
  --paper:   #EEF4F7;
  --sheet:   #FFFFFF;
  --rule:    #D2E0E8;

  --ink:     #0C2340;
  --ink-2:   #46617A;
  --ink-3:   #8AA0B2;

  /* Figure 1. The only dark surface on the page — the mark's own navy. */
  --slate:   #062243;
  --chalk:   #CFE1F0;
  --chalk-2: #7E9CB8;
  --tick:    #1E4470;
  --tick-5:  #2C5C8E;

  /* The measured band in Figure 1, and nothing else on this page. Teal on
     navy is the mark's own contrast. */
  --accent:  #19C9B4;

  --display: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Source Serif 4', 'Noto Serif Devanagari', Georgia, serif;
  --deva:    'Noto Serif Devanagari', 'Source Serif 4', serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --gutter: 22px;
  --rail:   172px;
  --radius: 3px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, figcaption, fieldset, legend, ol, ul, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
cite { font-style: italic; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
}

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 1px;
}
::selection { background: #CDEBE7; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--navy); color: var(--sheet);
  padding: 10px 16px; font: 500 13px/1 var(--mono); text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

/* Anchor targets clear the section rule above them. */
[id] { scroll-margin-top: 78px; }

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The spine: a mono rail carrying the section number, then the column the
   argument is set in. Everything on the page sits on it. */
.spine {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: 44px;
}
.rail { padding-top: 0.5em; }
.num {
  display: inline-block;
  min-width: 1.4em;
  color: var(--navy);
  font-weight: 500;
}

/* Sections. `.block` is unruled (abstract, key points); `.sec` carries the
   hairline that separates one numbered section from the next. */
.sec {
  margin-top: clamp(30px, 3.4vw, 46px);
  padding-top: clamp(28px, 3.2vw, 42px);
  border-top: 1px solid var(--rule);
}

/* ── Type ──────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: normal;
  text-wrap: balance;
}
.display-xl { font-size: clamp(2.4rem, 5.4vw, 4.25rem); line-height: 0.98; }
.display-m  { font-size: clamp(1.55rem, 2.8vw, 2.125rem); line-height: 1.1; letter-spacing: -0.025em; }
.display-s  { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.18; letter-spacing: -0.02em; }

/* The apparatus register: mono, small, tracked out. Section numbers, figure
   furniture, field labels — the vocabulary of a printed report. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: normal;
}
.label-chalk { color: var(--chalk-2); }

.prose > p + p { margin-top: 1.1em; }
.prose p { max-width: 66ch; }
.prose h2 { margin-bottom: 0.7em; }
.prose em { font-style: italic; }

/* Superscript reference markers. Mono so they read as apparatus, not text. */
/* `vertical-align: super` is measured against the PARENT's font size, so the
   raise has to be set on the <sup> itself — zeroing its font-size first would
   zero the raise with it. line-height:0 keeps it out of the line box. */
.cite {
  vertical-align: super;
  font-size: 10px;
  line-height: 0;
  padding-left: 1px;
}
.cite a {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: normal;
  color: var(--navy);
  text-decoration: none;
}
.cite a:hover { color: var(--ink); text-decoration: underline; }

.hi {
  display: block;
  font-family: var(--deva);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 0.3em;
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 58px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.mark { height: 26px; width: auto; flex: none; }
.wordmark {
  font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.015em;
}
.masthead-cta {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  transition: color .12s ease;
}
.masthead-cta:hover { color: var(--ink); }

/* ── Title block ───────────────────────────────────────────────────────── */

.titleblock { padding-block: clamp(32px, 4.4vw, 56px) 0; }
.kicker { margin-bottom: clamp(14px, 1.8vw, 20px); }
.standfirst {
  margin-top: clamp(14px, 1.8vw, 20px);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
}
.byline { margin-top: clamp(14px, 1.8vw, 20px); }
.byline a { color: var(--navy); text-decoration: none; border-bottom: 1px solid currentColor; }
.byline a:hover { color: var(--ink); }

/* ── Findings ──────────────────────────────────────────────────────────────
   Two columns on desktop: the evidence should read at a glance, not as a
   scroll. An odd last item spans the full width rather than leaving a hole. */

.findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
  counter-reset: find;
  font-size: 15.5px;
  line-height: 1.5;
}
.findings li { counter-increment: find; position: relative; padding-left: 26px; }
.findings li::before {
  content: counter(find);
  position: absolute; left: 0; top: 0.15em;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  font-variant-numeric: normal;
  color: var(--teal);
}
.findings li:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 74ch; }
.findings strong { font-weight: 600; }

/* ── Figure 1 ──────────────────────────────────────────────────────────── */

.figure { margin-top: clamp(24px, 2.8vw, 34px); }

.panel {
  background: var(--slate);
  border-radius: var(--radius);
  padding: 24px clamp(18px, 2.6vw, 30px) 20px;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}

.ruler { width: 100%; height: clamp(74px, 8.4vw, 104px); }
.ruler line, .ruler path { vector-effect: non-scaling-stroke; }
.ticks line { stroke-width: 1; }
.ticks .t  { stroke: var(--tick); }
.ticks .t5 { stroke: var(--tick-5); }
.ticks .m  { stroke: var(--chalk-2); stroke-width: 1.5; }
.ticks .ta { stroke: var(--accent); }

.band rect { fill: var(--accent); opacity: .12; }
.band path { fill: none; stroke: var(--accent); stroke-width: 1.2; }

.panel-foot { position: relative; height: 50px; margin-top: 2px; }
.min {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--chalk-2); font-variant-numeric: normal;
}
.min-last { right: 0; left: auto; transform: none; }
.band-note {
  position: absolute; left: 0; top: 26px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}

.figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 78ch;
}
.fignum { color: var(--ink); margin-right: 0.6em; }

/* ── Pull quote ────────────────────────────────────────────────────────── */

.pullquote {
  margin-top: 0;
  padding-left: 22px;
  border-left: 2px solid var(--navy);
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  font-family: var(--display);
  font-weight: 500;
  font-variant-numeric: normal;
  max-width: 34ch;
}

/* The line that says what Saviora is, after the three commitments. Set in the
   display face so it closes the section rather than trailing off as body copy,
   but lighter than the pullquote, which opens it. */
.closing {
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 44ch;
}

/* ── Tenets ────────────────────────────────────────────────────────────── */

.tenets {
  margin-top: clamp(22px, 2.6vw, 30px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 34px;
}
.tenet {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.tenet-head {
  font-family: var(--display); font-weight: 500;
  font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 9px;
}

/* ── Correspondence / form ─────────────────────────────────────────────── */

.signup { max-width: 660px; }
.signup-lead { margin-top: 11px; color: var(--ink-2); max-width: 52ch; }

/* Name and email share a row — the form is four controls, not a column. */
.field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 17px;
}

.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.form { margin-top: clamp(20px, 2.4vw, 28px); padding: clamp(20px, 2.8vw, 28px); }

.seg-row { margin-bottom: 21px; }
.field-label { display: block; margin-bottom: 6px; }

.field {
  width: 100%;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper);
  padding: 11px 12px;
  font: 400 16px/1.4 var(--serif);
  color: var(--ink);
  transition: border-color .12s ease;
}
.field::placeholder { color: var(--ink-3); }
.field:hover { border-color: var(--ink-3); }
.field:focus { border-color: var(--azure); }
.field.bad { border-color: #B3261E; }

/* Segmented choice. Native radios do the keyboard work; the labels are the
   visible control. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 7px 13px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  color: var(--ink-2); cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.seg label:hover { border-color: var(--ink-3); color: var(--ink); }
.seg input:checked + label { background: var(--navy); border-color: var(--navy); color: var(--sheet); }
.seg input:focus-visible + label { outline: 2px solid var(--navy); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 13px 22px;
  font: 500 15px/1 var(--display); letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--navy); border-color: var(--navy); color: var(--sheet); }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-wide { width: 100%; padding-block: 15px; }

.form-msg { font-size: 14.5px; line-height: 1.5; color: #B3261E; margin-bottom: 13px; }
.form-msg:empty { display: none; }
.fine { margin-top: 13px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.done { margin-top: clamp(26px, 3.4vw, 36px); padding: clamp(24px, 3.4vw, 34px); }
.done-mark { height: 42px; width: auto; margin-bottom: 14px; }
.done p { margin-top: 9px; color: var(--ink-2); max-width: 42ch; }

/* ── References ────────────────────────────────────────────────────────── */

.refs {
  margin-top: clamp(14px, 1.8vw, 20px);
  counter-reset: ref;
  font-size: 14.5px;
  line-height: 1.55;
}
.refs li {
  counter-increment: ref;
  position: relative;
  padding: 7px 8px 7px 34px;
  max-width: 82ch;
  border-radius: var(--radius);
  transition: background-color .3s ease;
}
.refs li::before {
  content: counter(ref) ".";
  position: absolute; left: 8px; top: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--ink-3); font-variant-numeric: normal;
}
/* Clicking a superscript lands here and lights the row it landed on. */
.refs li:target { background: #DCEAF5; }
.refs li:target::before { color: var(--navy); }

.doi { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); word-break: break-word; }
.doi:hover { color: var(--navy); border-bottom-color: currentColor; }


/* ── Footer ────────────────────────────────────────────────────────────── */

.foot { margin-top: clamp(36px, 4.2vw, 56px); border-top: 1px solid var(--rule); }
.foot-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 66px; flex-wrap: wrap;
}
.foot-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
}
.foot-brand .mark { height: 20px; }

/* ── Motion ────────────────────────────────────────────────────────────────
   The whole inventory: a load sequence on the title block, Figure 1 drawing
   itself when it comes into view, and colour on hover. Nothing else moves. */

.js [data-rvl] { opacity: 0; transform: translateY(10px); }
.js [data-rvl].in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}

/* The rule draws left to right; the measured band and its labels land after. */
.js .figure .ticks { clip-path: inset(0 100% 0 0); }
.js .figure.in .ticks {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s cubic-bezier(.25,.6,.3,1) .15s;
}
.js .figure .band,
.js .figure .panel-foot { opacity: 0; }
.js .figure.in .band,
.js .figure.in .panel-foot { opacity: 1; transition: opacity .5s ease 1.1s; }

/* Section hairlines draw in, once. */
.js .sec { border-top-color: transparent; }
.js .sec.seen { border-top-color: var(--rule); transition: border-top-color .7s ease; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .refs { columns: 2; column-gap: 40px; }
  .refs li { break-inside: avoid; max-width: none; }
}

@media (max-width: 640px) {
  .findings, .field-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .spine { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .rail { padding-top: 0; }
  .num { min-width: 0; margin-right: 0.3em; }
  .tenets { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tenet + .tenet { margin-top: 24px; }
}

/* Below 640px, 300 second-marks collapse into a solid block. Drop to the
   five-second marks so the rule still reads as a rule. */
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .ticks .t:not(.t5) { display: none; }
  .band rect { opacity: .2; }
  .panel-foot { height: 54px; }
  .band-note { font-size: 10px; letter-spacing: .06em; }
  .masthead-cta { font-size: 10px; }
  .pullquote { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Render the finished state, not a fast version of the animation. */
  .js [data-rvl],
  .js .figure .band,
  .js .figure .panel-foot { opacity: 1 !important; transform: none !important; }
  .js .figure .ticks { clip-path: none !important; }
  .js .sec { border-top-color: var(--rule) !important; }
}