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

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

  body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-page);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    line-height: 1.6;
  }

  body > main { flex: 1; }

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

  /* The hidden attribute wins over the display set above */
  [hidden] { display: none !important; }

  h1, h2, h3 { color: var(--color-blue-dark); line-height: 1.25; font-weight: bold; }
  h1 { font-size: var(--text-x-large); margin: 0 0 var(--space); }
  h2 { font-size: var(--text-large); margin: var(--space-double) 0 var(--space-half); }

  a { color: var(--color-blue); }
  a:hover { color: var(--color-blue-dark); }

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

@layer components {
  .button {
    display: inline-block;
    padding: 0.6em 1.4em;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-button);
    color: var(--color-button-text);
    font: inherit;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }

  .button:hover { background: color-mix(in srgb, var(--color-button) 75%, black); color: var(--color-button-text); }

  .prose { max-width: var(--content-width); }
  /* Centred, whatever its size: a medium or small photo, or a large one
     narrower than the text, such as a portrait */
  .prose img { margin: var(--space) auto; border-radius: var(--radius); }
  .prose__video { display: block; width: 100%; margin-block: var(--space); border-radius: var(--radius); background: var(--color-ink); }

  /* Display sizes chosen in the editor (K.5) */
  .prose__image-link { display: block; }
  .prose__image--medium { width: 66%; }
  .prose__image--small { width: 40%; }
  .prose ul { padding-inline-start: 1.2em; }

  /* A word of the glossary: its definition in a bubble, as long as the
     pointer stays on it (review 6.5) */
  .glossary-term {
    position: relative;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  .glossary-term:hover::after,
  .glossary-term:focus-visible::after {
    content: attr(data-definition);
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    z-index: 30;
    translate: -50% 0;
    inline-size: max-content;
    max-inline-size: min(20rem, 80vw);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    background: var(--color-ink);
    color: var(--color-white);
    font-size: var(--text-small);
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    text-align: start;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
    box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.2);
  }

  /* Lines pushed right with : :: ::: (no bullet) */
  .prose__indent { display: block; }
  .prose__indent--1 { padding-inline-start: 1.5em; }
  .prose__indent--2 { padding-inline-start: 3em; }
  .prose__indent--3 { padding-inline-start: 4.5em; }

  @media (max-width: 40rem) {
    .prose__indent--1 { padding-inline-start: 1em; }
    .prose__indent--2 { padding-inline-start: 2em; }
    .prose__indent--3 { padding-inline-start: 3em; }
  }

  .prose__color--1 { color: var(--text-color-1); }
  .prose__color--2 { color: var(--text-color-2); }
  .prose__color--3 { color: var(--text-color-3); }
  .prose__color--4 { color: var(--text-color-4); }
  .prose__color--5 { color: var(--text-color-5); }
  .prose__color--6 { color: var(--text-color-6); }

  /* A photo or a video on half the width, the text flowing beside (review 6.3);
     on a phone it takes the whole width, there is no room for text beside.
     Margin included, each takes exactly half: a left one and a right one sit
     side by side on the same line. */
  .prose::after { content: ""; display: table; clear: both; }

  @media (min-width: 40rem) {
    .prose__image-link--left, .prose__video.prose__image--left {
      float: left;
      width: calc(50% - var(--space));
      margin: 0 var(--space) var(--space-half) 0;
    }

    .prose__image-link--right, .prose__video.prose__image--right {
      float: right;
      width: calc(50% - var(--space));
      margin: 0 0 var(--space-half) var(--space);
    }

    .prose__image-link--left img, .prose__image-link--right img { width: 100%; margin: 0; }
  }
}