/*
 * Plate-bande — the landing page (brand ticket 07).
 *
 * One static page, no build step. The tokens are the app's (app/src/ui/app.css,
 * the Sous-bois direction), copied here so the page never imports the app:
 * a deep-green ground, cream sheets laid on it, Newsreader for what the page
 * says and Figtree for what the visitor does. The fonts are the two OFL
 * packages the app ships, self-hosted beside this file, so a French visitor's
 * IP never reaches a font service.
 *
 * One first screen (brand 04, after 07's pick A): the before-and-after
 * leads, the words and the button under it on a phone, beside it on a desktop.
 */

@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
}

:root {
  /* Spacing, 4-based. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-full: 999px;

  /* Type scale: minor third from 16 px. */
  --step--1: 0.84375rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: 1.75rem;
  --step-4: 2.125rem;
  --step-5: 2.75rem;
  --leading--1: 1.45;
  --leading-0: 1.5;
  --leading-1: 1.4;
  --leading-2: 1.3;
  --leading-3: 1.2;
  --leading-4: 1.12;

  --gutter: 16px;
  --content-max: 34rem;
  --page-max: 72rem;
  --touch: 44px;
  --pill-height: 52px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Sous-bois. */
  --paper: #1f3a2a;
  --surface: #f5f0e4;
  --surface-deep: #ebe5d5;
  --ink: #f3efe3;
  --ink-soft: #b8c3b2;
  --on-surface: #212b1f;
  --on-surface-soft: #5b6656;
  --leaf: #a6c485;
  --leaf-on-surface: #3d5a3a;
  --leaf-soft: #2c4a37;
  --leaf-soft-on-surface: #dfe6d1;
  --primary: #f5f0e4;
  --on-primary: #1f3a2a;
  --accent: #d9a441;
  --accent-wash: #3a4f2e;
  --accent-wash-on-surface: #efe0bd;
  --line: #3d5745;
  --line-on-surface: #d9d1bf;
  --focus: var(--accent);

  --font-display: 'Newsreader Variable', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-text: 'Figtree Variable', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.015em;

  color-scheme: light;
}

/* ---------------------------------------------------------------------- */
/* Skeleton                                                                */
/* ---------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-0);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* French: guillemets with a narrow no-break space inside; hyphenation on. */
:lang(fr) {
  quotes: '«\202F' '\202F»' '“' '”';
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

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

a {
  color: inherit;
}

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

::selection {
  background: var(--accent-wash);
  color: var(--ink);
}

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

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-wrap: pretty;
  hyphens: manual;
  -webkit-hyphens: manual;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h2 {
  font-size: var(--step-3);
  line-height: var(--leading-3);
}

.small {
  font-size: var(--step--1);
  line-height: var(--leading--1);
}

.soft {
  color: var(--ink-soft);
}

.sheet .soft {
  color: var(--on-surface-soft);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius-s);
  z-index: 10;
}
.skip:focus {
  top: var(--gutter);
}

/* ---------------------------------------------------------------------- */
/* Pieces: the pill, the text link, the eyebrow, the « à venir » mark      */
/* ---------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--pill-height);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.pill:active {
  transform: scale(0.985);
}
.pill--small {
  width: auto;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-4);
  font-size: var(--step--1);
}

/* Sous-bois's primary pill is cream; on a cream sheet it takes the leaf fill
   instead, the two inks swapped (7,4 : 1, measured in the app). */
.sheet .pill {
  background: var(--leaf-on-surface);
  color: var(--surface);
}

.textlink {
  display: inline-block;
  min-height: var(--touch);
  padding-block: calc((var(--touch) - 1.45em) / 2);
  color: var(--leaf-on-surface);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
.textlink:hover {
  text-decoration: underline;
}
/* A text link inside a paragraph keeps its 44 px target, but the negative
   margins give back the padding, so its line is no taller than the others
   (07's review, note 2). */
p .textlink {
  margin-block: calc((1.45em - var(--touch)) / 2);
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf-on-surface);
}
.eyebrow--on-green {
  color: var(--leaf);
}

/* « à venir »: the same voice, one tone softer, never louder than the words
   it sits beside. It marks what design-tier 64, 65, 150 and 153 still owe. */
.soon {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-wash-on-surface);
  color: var(--on-surface);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                   */
/* ---------------------------------------------------------------------- */

/* Opaque on purpose: the lockup file carries its green ground, which would
   show as a block through a translucent bar over the cream sheets. */
.header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
}
.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-2);
}
.header__mark {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  /* The lockup file carries its clear space as its ground: pull it back so
     the drawing sits on the gutter, and keep the wordmark over 18 px. */
  margin-inline-start: calc(var(--space-4) * -1);
}
.header__lockup {
  height: 60px;
  width: auto;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                      */
/* ---------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-2) var(--space-7);
}
.hero__grid {
  display: grid;
  gap: var(--space-5);
}
.hero__dated {
  font-style: italic;
  font-size: var(--step-0);
  color: var(--ink-soft);
  min-height: 1.5em;
  order: 0;
}
.hero__dated:empty {
  display: none;
}
.hero__words {
  display: grid;
  gap: var(--space-4);
  order: 2;
}
.hero__title {
  font-size: var(--step-4);
  line-height: var(--leading-4);
}
.hero__lead {
  font-size: var(--step-1);
  line-height: var(--leading-1);
  max-width: var(--content-max);
  hyphens: manual;
  -webkit-hyphens: manual;
}
.hero__cta {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  max-width: var(--content-max);
}
.reassure {
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* The photograph first, then the words. */
.hero__pair {
  order: 1;
}

/* The before-and-after: one frame, its caption and its line under it. */
.pair {
  display: grid;
  gap: var(--space-3);
}

/* The hero's frame (brand 13): the images' own 4:3, uncropped, so the house
   the caption names is in frame on a phone too. The « après » sits in flow
   and gives the frame its height before the files load (width and height on
   the img); the « avant » lies over it, clipped from the right to --split.
   The split is the app's gesture (app.css « the hero, and its slider »,
   tickets 116 and 139), moved by slider.mjs: a sideways drag anywhere on the
   picture, an up-or-down one is the page's scroll (pan-y). A mouse drag must
   not also select the pictures. With JS off, --split is this 50 % and the
   range input stays hidden (`[data-slider]` is set by slider.mjs). */
.hero__frame {
  --split: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--leaf-soft);
  isolation: isolate;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.hero__frame[data-slider] {
  cursor: ew-resize;
}
/* The layers take no pointer and cannot be dragged out as a ghost image: a
   mouse drag on them is the frame's, and moves the handle. */
.hero__layer {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.hero__layer--before {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  transition: clip-path var(--dur-fast) var(--ease);
}

/* The handle: a cream line at the split, with a round knob. The transition
   is the layer's, so the two move together; page.css's reduced-motion rule
   (above) zeroes both. */
.hero__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(33, 43, 31, 0.12);
  z-index: 2;
  transition: left var(--dur-fast) var(--ease);
}
.hero__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(33, 43, 31, 0.12);
}

/* The two end pills, « avant » | « après », aria-hidden: the range carries the name. */
.hero__ends {
  position: absolute;
  inset: auto var(--space-3) var(--space-3);
  display: flex;
  justify-content: space-between;
  font-size: var(--step--1);
  pointer-events: none;
  z-index: 2;
}
.hero__ends span {
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--on-surface);
}

/* The handle for a keyboard and a screen reader: a real range input,
   transparent, over the whole frame — focusable, named, moved by the arrow
   keys. Pointers pass through it (116): the frame reads the drag itself.
   When it has focus, the visible handle wears the ring. */
.hero__drag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.hero__drag::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
}
.hero__drag::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
}
.hero__frame:not([data-slider]) .hero__drag {
  display: none;
}
.hero__drag:focus-visible ~ .hero__handle,
.hero__drag:focus-visible ~ .hero__handle::after {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* The placeholder mark: a cream panel on the photograph (03: the mark sits
   on a panel, never bare on a picture). Written by page.js. */
.shot__mark {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--on-surface);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
}
.pair__caption {
  font-style: italic;
  font-size: var(--step-1);
  line-height: var(--leading-1);
  color: var(--ink);
}
.pair__credit {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: var(--content-max);
}

/* ---------------------------------------------------------------------- */
/* Sheets and sections                                                      */
/* ---------------------------------------------------------------------- */

.sheet {
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding-block: var(--space-2) var(--space-6);
}
.sheet + .sheet,
.price + .sheet {
  border-radius: var(--radius-l);
}
.section {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-7);
  max-width: calc(var(--content-max) + 2 * var(--gutter));
}
.section > p,
.section > dl,
.section > ol,
.section > ul,
.section > table {
  max-width: var(--content-max);
}
.section__cta {
  max-width: var(--content-max);
  padding-top: var(--space-2);
}
.sheet .section + .section {
  border-top: 1px solid var(--line-on-surface);
}

/* Steps: numbered because the copy numbers them. */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-2);
}
.step {
  display: grid;
  gap: var(--space-1);
}
.step__title {
  font-size: var(--step-2);
  line-height: var(--leading-2);
}
.step__num {
  color: var(--leaf-on-surface);
}

/* What you receive. */
.offers {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.offer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-deep);
}
.offer__title {
  font-size: var(--step-0);
  line-height: var(--leading-0);
  font-weight: 400;
}
.offer__list {
  padding-inline-start: 1.2em;
  display: grid;
  gap: var(--space-1);
}

/* Price, on the green. */
.price {
  color: var(--ink);
}
.tiles {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--space-2) 0;
  margin-inline: calc(var(--space-2) * -1);
  width: calc(100% + 2 * var(--space-2));
  table-layout: fixed;
}
.tiles th,
.tiles td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--on-surface);
  font-weight: 400;
}
.tiles thead th {
  padding-top: var(--space-4);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--display-weight);
}
.tiles tbody tr:last-child td {
  padding-bottom: var(--space-4);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  color: var(--on-surface-soft);
  font-size: var(--step--1);
  line-height: var(--leading--1);
}
.tiles__amounts td {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tiles__amounts strong {
  font-weight: var(--display-weight);
}
.soon--on-tile {
  background: var(--accent-wash-on-surface);
}
.price__anchor {
  font-size: var(--step-1);
  line-height: var(--leading-1);
  font-family: var(--font-display);
  letter-spacing: var(--display-tracking);
}
.price__anchor sup {
  font-size: 0.6em;
  line-height: 0;
}

/* The questions, as an open list: the answers are the page's own words,
   nothing is folded. */
.faq {
  display: grid;
  gap: 0;
  padding-top: var(--space-2);
}
.faq dt {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: var(--step-1);
  line-height: var(--leading-1);
  padding-top: var(--space-4);
}
.faq dd {
  padding-block: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line-on-surface);
}
.faq dd:last-child {
  border-bottom: 0;
}

/* Last call. */
.last__inner {
  justify-items: start;
}
.last h2 {
  font-size: var(--step-4);
  line-height: var(--leading-4);
}
.last .hero__cta {
  width: 100%;
}

/* Footer. */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-4) calc(var(--space-6) + var(--safe-bottom));
  color: var(--ink-soft);
}
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-4);
}
.footer__links li {
  display: flex;
  align-items: center;
}
/* The « · » between the links only where the footer holds on one line: on a
   phone it wraps, and a line must not start with one (07's review, note 3). */
@media (min-width: 48em) {
  .footer__links {
    column-gap: var(--space-2);
  }
  .footer__links li + li::before {
    content: '·';
    margin-inline-end: var(--space-2);
  }
}
.footer__links a,
.footer__name {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  min-width: var(--touch);
  padding-inline: var(--space-1);
  font-size: var(--step--1);
  text-decoration: none;
}
.footer__links a:hover {
  text-decoration: underline;
}
.footer__name {
  color: var(--ink);
  font-size: var(--step-1);
  font-style: italic;
}

/* The sticky button, phone only. `hidden` is set and cleared by page.js. */
.sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 6;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + var(--safe-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.sticky[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* Wider screens                                                            */
/* ---------------------------------------------------------------------- */

@media (min-width: 48em) {
  .sticky {
    display: none;
  }
  .pill {
    width: auto;
    min-width: 16rem;
  }
  .hero__cta {
    justify-items: start;
  }
  .reassure {
    text-align: left;
  }
  .hero {
    padding-block: var(--space-6) var(--space-8);
  }
  .hero__title {
    font-size: var(--step-5);
    line-height: var(--leading-4);
  }
  h2 {
    font-size: var(--step-4);
  }
  /* The sections sit in a centred 60 rem column; the hero alone uses the
     page's full 72 rem. */
  .sheet .section,
  .price .section,
  .last .section {
    max-width: 60rem;
    margin-inline: auto;
    padding-block: var(--space-8);
  }
  /* The three steps share two rows (subgrid), so a title that wraps to two
     lines does not push its body below the others' (07's review, note 1). */
  .steps {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-5);
  }
  .step {
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .offers {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .section,
  .section > p,
  .section > dl,
  .section > ol,
  .section > ul,
  .section > table,
  .section__cta {
    max-width: none;
  }
  .section > h2 {
    max-width: 24ch;
  }
  .section > p,
  .faq {
    max-width: 40rem;
  }
  .tiles {
    max-width: 44rem;
  }
  .last__inner {
    justify-items: start;
  }

  /* At desktop: the photograph on the left, the words on the right. */
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    grid-template-areas:
      'pair dated'
      'pair words';
    grid-template-rows: auto 1fr;
    column-gap: var(--space-8);
    align-items: start;
  }
  .hero__dated {
    grid-area: dated;
  }
  .hero__words {
    grid-area: words;
    align-self: center;
  }
  .hero__pair {
    grid-area: pair;
  }
}

/* ---------------------------------------------------------------------- */
/* The legal pages (design-tier 21): confidentialite/ and conditions/.      */
/* ---------------------------------------------------------------------- */

.legal .sheet {
  border-radius: 0;
}
.legal h1 {
  font-size: var(--step-4);
  line-height: var(--leading-4);
}
.legal h2 {
  font-size: var(--step-2);
  line-height: var(--leading-2);
}
.legal h3 {
  font-size: var(--step-1);
  line-height: var(--leading-1);
  margin-bottom: calc(-1 * var(--space-2));
}
.legal .section {
  gap: var(--space-3);
  padding-block: var(--space-5);
}
.legal ul {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
}
.legal .textlink {
  min-height: 0;
  padding-block: 0;
  margin-block: 0;
  text-decoration: underline;
}
/* What only the owner can fill in: seen at a glance, never mistaken for the text. */
.legal .todo {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  background: var(--accent-wash-on-surface);
  border-inline-start: 4px solid var(--accent);
  font-weight: 600;
}
.legal .quote {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--leaf-on-surface);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-1);
}
/* The contents after « En bref », and the publisher's identity: plain text, no new token. */
.legal__toc {
  display: grid;
  gap: var(--space-2);
}
.legal__toc ul {
  gap: var(--space-1);
}
.legal .nowrap {
  white-space: nowrap;
}
.legal__facts {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}
.legal__facts dt {
  font-weight: 600;
}
.legal__facts dd {
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}
.footer__links a[aria-current='page'] {
  color: var(--ink);
}

/* « Nos sources » (brand 04): sources/, written by app/scripts/sources-page.ts. */
.sources .sources__list {
  list-style: none;
  padding-inline-start: 0;
  gap: var(--space-5);
}
.sources .source {
  display: grid;
  gap: var(--space-1);
  overflow-wrap: anywhere;
}
.sources .source h3 {
  margin: 0;
}