/* ==========================================================================
   /research/: "The research we built on", the sources page of Reach Your
   Kid. Mockup v3 (Upgrading campiagn/pages/ui/mockups/sources-page--v3--*,
   approved by the founder 12.10.2026), by the handover
   pages/ui/prompt--migration--sources-page.md.

   The mockup's three frames are its classes vp-m, vp-t and vp-d; here they
   are the phone base and the min-width 768 and 1024 queries, with the
   mockup's sizes in rem. The language is the hub's: its colours, the
   "‹ Reach Your Kid" back link, the white button, 44 for every touch target.
   Every state change is instant: nothing here changes over time.
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-medium.woff2") format("woff2");
}

:root {
  /* the hub's palette (its tokens.css), and the mockup's tints of the ink */
  --c-cream: #fff3e0;
  --c-ink: #341f12;
  --c-brown: #705747;
  --c-ochre: #997024;
  --c-white: #ffffff;
  --c-hair: rgba(52, 31, 18, 0.1);
  --c-rule: rgba(52, 31, 18, 0.22);
  --c-detail: rgba(52, 31, 18, 0.82);
  --c-mute: rgba(52, 31, 18, 0.68);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tap: 2.75rem;                 /* 44: every touch target */
  --bar: 3.5rem;                  /* 56: the fixed bar */
  --radius-btn: 12px;

  /* phone, 390: column 330. Below 390 the gutter tracks the viewport, as the
     hub's does, so the column keeps its share on a 320 phone. */
  --gutter: clamp(1.25rem, 7.6923vw, 1.875rem);
  --col: 40rem;
  --bar-col: 40rem;

  --fs-h1: 2.1875rem;             /* 35 */
  --lh-h1: 1.3;
  --fs-intro: 1.0625rem;          /* 17 */
  --fs-h2: 1.375rem;              /* 22 */
  --fs-work: 1.125rem;            /* 18 */
  --fs-text: 0.875rem;            /* 14: details, "In the program", "Open link" */
  --fs-doi: 0.78125rem;           /* 12.5 */
  --fs-no: 0.8125rem;             /* 13 */

  --head-pt: 2.5rem;              /* 40 */
  --head-pb: 0.25rem;
  --intro-mt: 0.75rem;
  --grp-pt: 3rem;                 /* 48 */
  --h2-pb: 0.75rem;
  --en-pt: 1.375rem;              /* 22 */
  --en-pb: 1.5rem;                /* 24 */
  --d-mt: 0.375rem;
  --where-mt: 0.625rem;
  --rev-pt: 1.75rem;              /* 28 */
  --btn-w: 100%;
  --btn-mt: 1.25rem;
  --btn-mb: 3.5rem;               /* 56 */
  --logo-h: 0.8125rem;            /* 13, in the bar from 768 */
}

@media (min-width: 768px) {
  :root {
    /* tablet, 768-1023: the hub's one 640 column; the bar spans up to 960 */
    --gutter: 2.5rem;
    --bar-col: 60rem;
    --fs-h1: 2.5rem;              /* 40 */
    --lh-h1: 1.25;
    --fs-intro: 1.125rem;         /* 18 */
    --fs-h2: 1.4375rem;           /* 23 */
    --fs-work: 1.1875rem;         /* 19 */
    --fs-text: 0.9375rem;         /* 15 */
    --head-pt: 3.5rem;            /* 56 */
    --head-pb: 0.375rem;
    --intro-mt: 0.875rem;
    --grp-pt: 3.5rem;
    --en-pt: 1.5rem;
    --en-pb: 1.625rem;
    --btn-w: 17.5rem;             /* 280 */
    --btn-mt: 1.5rem;
    --btn-mb: 4.5rem;             /* 72 */
  }
}

@media (min-width: 1024px) {
  :root {
    /* desktop: a 720 column, the bar in the hub's 1120 field */
    --gutter: 5rem;
    --col: 45rem;
    --bar-col: 70rem;
    --fs-h1: 2.75rem;             /* 44 */
    --lh-h1: 1.2;
    --fs-intro: 1.1875rem;        /* 19 */
    --fs-h2: 1.5rem;              /* 24 */
    --h2-pb: 0.875rem;
    --fs-work: 1.25rem;           /* 20 */
    --fs-doi: 0.8125rem;          /* 13 */
    --fs-no: 0.875rem;            /* 14 */
    --head-pt: 4.5rem;            /* 72 */
    --head-pb: 0.5rem;
    --intro-mt: 1rem;
    --grp-pt: 4rem;
    --en-pt: 1.625rem;
    --en-pb: 1.75rem;
    --d-mt: 0.5rem;
    --where-mt: 0.75rem;
    --rev-pt: 2.25rem;
    --btn-mb: 5.5rem;             /* 88 */
    --logo-h: 0.9375rem;          /* 15 */
  }
}

/* -------------------------------- base --------------------------------- */

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

/* anchors (#s1 … #s14) land below the fixed bar */
html { scroll-padding-top: calc(var(--bar) + 0.75rem); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font: 400 1rem / 1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
}

/* ------------------------------ the bar -------------------------------- */

.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--bar);
  background: var(--c-cream);
  box-shadow: 0 1px 0 var(--c-hair);
}
.bar__in {
  width: min(100% - 2 * var(--gutter), var(--bar-col));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* the hub's "‹ Reach Your Kid": a 44 target, a line that never wraps */
.backlink {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--tap);
  font-weight: 500;
  line-height: 1;
  color: var(--c-ochre);
  text-decoration: none;
  white-space: nowrap;
}
.backlink .icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* the logo joins the bar from 768 */
.bar__logo { display: none; height: var(--logo-h); width: auto; flex: none; }
@media (min-width: 768px) {
  .bar__logo { display: block; }
}

/* ------------------------------ the page -------------------------------- */

main { padding-top: var(--bar); }

.head { padding: var(--head-pt) 0 var(--head-pb); }
h1 {
  font: 500 var(--fs-h1) / var(--lh-h1) var(--font);
  color: var(--c-ochre);
  text-wrap: balance;
}
.intro {
  margin-top: var(--intro-mt);
  font-size: var(--fs-intro);
  line-height: 1.55;
  color: var(--c-brown);
  text-wrap: pretty;
}

/* three groups, with air and a rule under the name */
.grp { padding-top: var(--grp-pt); }
.grp h2 {
  padding-bottom: var(--h2-pb);
  border-bottom: 1px solid var(--c-rule);
  font: 500 var(--fs-h2) / 1.3 var(--font);
  color: var(--c-ochre);
  text-wrap: balance;
}

/* an entry: number · the work · authors, year, publication · In the program
   · Open link and the address */
.en {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  padding: var(--en-pt) 0 var(--en-pb);
  border-bottom: 1px solid var(--c-hair);
}
.en .no {
  padding-top: 0.1875rem;
  font: 500 var(--fs-no) / 1.6 var(--font);
  color: var(--c-ochre);
  font-variant-numeric: tabular-nums;
}
.work + .work { margin-top: 0.875rem; }
.en .t {
  font: 500 var(--fs-work) / 1.35 var(--font);
  text-wrap: pretty;
}
.en .d {
  margin-top: var(--d-mt);
  font-size: var(--fs-text);
  line-height: 1.55;
  color: var(--c-detail);
  text-wrap: pretty;
}
.en .where {
  margin-top: var(--where-mt);
  font-size: var(--fs-text);
  line-height: 1.5;
  color: var(--c-mute);
}
.en .where b { font-weight: 500; color: var(--c-ink); }
.en .src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.625rem;
  margin-top: 0.375rem;
}
/* a 44 target on a line of 24: the rest hangs into the gaps around it */
.en .open {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--tap);
  margin-block: -0.625rem;
  font-weight: 500;
  font-size: var(--fs-text);
  line-height: 1;
  color: var(--c-ochre);
  text-decoration: none;
}
.en .ext { width: 0.9375rem; height: 0.9375rem; }
.en .doi {
  font-size: var(--fs-doi);
  line-height: 1.5;
  color: var(--c-mute);
  overflow-wrap: anywhere;
}

/* desktop: the number stands outside the column's left edge */
@media (min-width: 1024px) {
  .en { grid-template-columns: minmax(0, 1fr); position: relative; }
  .en .no {
    position: absolute;
    left: -3rem;
    top: 1.8125rem;
    width: 2rem;
    text-align: right;
  }
}

/* -------------------------------- the end -------------------------------- */

.rev {
  padding-top: var(--rev-pt);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-mute);
}

/* the hub's white button */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: var(--btn-w);
  min-height: var(--tap);
  margin: var(--btn-mt) 0 var(--btn-mb);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-btn);
  background: var(--c-white);
  color: var(--c-ink);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.btn .icon { width: 1.25rem; height: 1.25rem; margin-left: -0.25rem; }

@media (hover: hover) {
  .backlink:hover span,
  .en .open:hover span { text-decoration: underline; }
  .foot__nav a:hover { text-decoration: underline; }
}

/* ------------------------------- footer --------------------------------- */

.foot { padding: 1.75rem 0; background: var(--c-white); }
.foot__in {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}
.foot__logo { height: 0.875rem; width: auto; }
/* The links keep the mockup's lines, and each gets a 44 target that hangs
   above and below its line. On a phone they wrap onto two lines; those are
   23 apart instead of the mockup's 4, so the targets do not overlap. */
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4375rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-block: calc((var(--tap) - 1.5em) / -2);
  color: var(--c-brown);
  text-decoration: none;
}
@media (min-width: 768px) {
  .foot__in { flex-direction: row; justify-content: space-between; align-items: center; }
}