/* ==========================================================================
   Lactoferrin.us.com — design system

   WHO THIS IS FOR
   Two readers, and the design serves both by separating them immediately:
     1. Someone holding a stool test result that says lactoferrin positive,
        worried, reading at 11pm before a gastroenterology appointment.
     2. Someone deciding whether to buy a lactoferrin supplement and confused
        by the label.
   Reader 1 sets the tone. Anxious people need the answer first, in short
   sentences, in large type, from something that does not feel like a clinic.

   DIRECTION: "calm, not clinical."
   Warm stone paper rather than hospital white, deep warm charcoal rather than
   black, and a settled teal accent. Teal because it is the one color in the
   palette that reads as reassurance rather than alarm.

   TYPE: one family, Work Sans, carrying everything from 400 to 800. Weight and
   size do all the work; there is no second face and no monospace. Body copy is
   set larger than is fashionable, because the reader is stressed and may be on
   a phone in a dark room.

   Before changing the typeface, palette or layout system here, read CLAUDE.md
   in the repo. These choices are constrained for reasons that are not visible
   from the CSS, and the constraints are documented there rather than in this
   file, which is served to every visitor.
   ========================================================================== */

@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --paper: #f7f4f1;
  --paper-2: #efe9e4;
  --paper-3: #e5ddd7;
  --ink: #23201d;
  --ink-2: #57504a;
  --ink-3: #837a73;
  --rule: #ded5cd;

  --calm: #1d6b66; /* the reassurance color; text-safe on --paper */
  --calm-soft: #dce9e7;
  --flag: #a4531f; /* "this is for your doctor" callouts, never for alarm */

  --font: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --t-micro: 0.76rem;
  --t-small: 0.9rem;
  /* Body is deliberately large. The reader may be stressed and on a phone. */
  --t-body: clamp(1.06rem, 1rem + 0.3vw, 1.18rem);
  --t-lead: clamp(1.2rem, 1.1rem + 0.5vw, 1.42rem);
  --t-h3: clamp(1.18rem, 1.1rem + 0.4vw, 1.38rem);
  --t-h2: clamp(1.42rem, 1.25rem + 0.9vw, 1.95rem);
  --t-h1: clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --t-answer: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);

  --measure: 38rem;
  --wide: 60rem;
  --gutter: clamp(1.15rem, 0.9rem + 1.5vw, 2rem);

  --radius: 10px; /* softer than the house norm, on purpose */
  --speed: 180ms;
  --ease: cubic-bezier(0.25, 0.7, 0.35, 1);
}

:root[data-theme="dark"] {
  --paper: #191614;
  --paper-2: #221e1b;
  --paper-3: #2c2723;
  --ink: #f0ebe6;
  --ink-2: #c0b7af;
  --ink-3: #8f8780;
  --rule: #3a342f;
  --calm: #6fc4ba;
  --calm-soft: #1f3937;
  --flag: #e0975c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191614;
    --paper-2: #221e1b;
    --paper-3: #2c2723;
    --ink: #f0ebe6;
    --ink-2: #c0b7af;
    --ink-3: #8f8780;
    --rule: #3a342f;
    --calm: #6fc4ba;
    --calm-soft: #1f3937;
    --flag: #e0975c;
  }
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.66;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--calm);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--calm);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* --- Shell ---------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

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

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

.topbar {
  border-bottom: 1px solid var(--rule);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}

.brand {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.brand:hover {
  color: var(--calm);
}

.topnav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: var(--t-small);
  font-weight: 500;
}

.topnav a {
  color: var(--ink-2);
  text-decoration: none;
}

.topnav a:hover,
.topnav a[aria-current="page"] {
  color: var(--calm);
}

main {
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem) 4rem;
}

/* --- Hero + the two doors -------------------------------------------------
   THE SIGNATURE.

   This site has exactly two audiences with almost nothing in common: someone
   frightened by a test result, and someone comparing supplement labels. Most
   health sites bury that split in a nav bar and make both readers hunt. Here it
   IS the front page — two large, plainly labeled doors, in the reader's own
   words rather than the site's taxonomy.
   -------------------------------------------------------------------------- */

.hero__title {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.hero__standfirst {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 1rem 0 0;
  max-width: 36ch;
  text-wrap: pretty;
}

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.door {
  display: block;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.door:hover {
  border-color: var(--calm);
  background: var(--calm-soft);
}

.door__eyebrow {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--calm);
  margin-bottom: 0.65rem;
}

.door__title {
  display: block;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

.door__desc {
  margin: 0.55rem 0 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}

/* --- The answer panel -----------------------------------------------------
   Every page opens with one. The reader gets the answer before they have to
   read anything, which is the entire editorial premise of this site.
   -------------------------------------------------------------------------- */

.answer {
  margin: 1.75rem 0 0;
  padding: 1.4rem 1.5rem;
  background: var(--calm-soft);
  border-radius: var(--radius);
}

.answer__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--calm);
  margin: 0 0 0.6rem;
}

.answer__text {
  margin: 0;
  font-size: var(--t-answer);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

/* "This belongs to your doctor." Used where the honest answer is that the site
   cannot and should not tell them. Warm, never red — the reader is already
   worried and does not need a warning triangle. */
.handoff {
  margin-top: 2rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--flag);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-2);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.handoff strong {
  color: var(--ink);
}

/* --- Article -------------------------------------------------------------- */

.crumbs {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 1.1rem;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--rule);
}

.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--calm);
}

.page-title {
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.standfirst {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0.9rem 0 0;
  text-wrap: pretty;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 1.5rem;
  font-size: var(--t-micro);
  color: var(--ink-3);
}

.byline a {
  color: var(--ink-2);
}

.prose {
  margin-top: 2rem;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.2;
  margin-top: 2.3em;
  margin-bottom: 0.2em;
  text-wrap: balance;
}

.prose h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.8em;
  margin-bottom: 0.2em;
}

.prose p {
  text-wrap: pretty;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 0.45em;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2.5em;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-block: 1.75em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.prose th {
  text-align: left;
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--ink-3);
  white-space: nowrap;
}

.prose td {
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

/* --- Question list (hub index) -------------------------------------------- */

.qlist {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.qlist a {
  display: block;
  padding: 1.15rem 1.3rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--speed) var(--ease);
}

.qlist a:hover {
  border-color: var(--calm);
}

.qlist__q {
  display: block;
  font-weight: 650;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.qlist a:hover .qlist__q {
  color: var(--calm);
}

.qlist__a {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}

.empty-note {
  margin-top: 1.5rem;
  font-size: var(--t-small);
  color: var(--ink-3);
}

/* --- Sources & disclaimer ------------------------------------------------- */

.sources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.sources h2 {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
}

.sources ol {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: 1.3em;
  margin: 0;
}

.sources li + li {
  margin-top: 0.55rem;
}

.disclaimer {
  margin-top: 2rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-3);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
  padding-block: 2.5rem;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: var(--t-small);
}

.site-footer__col a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer__col a:hover {
  color: var(--calm);
  text-decoration: underline;
}

.site-footer__head {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}

.site-footer__blurb {
  margin: 0;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 30ch;
}

.site-footer__legal {
  border-top: 1px solid var(--rule);
  padding-block: 1.1rem;
  font-size: var(--t-micro);
  color: var(--ink-3);
  line-height: 1.6;
}

.notfound {
  padding-block: clamp(2rem, 1.5rem + 4vw, 5rem);
}

/* Lead photo, sitting above the byline. This site answers first, so the photo
   comes after the short answer and never pushes it below the fold. */
.lead-photo {
  margin: 0 0 1.25rem;
}
.lead-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}