/* "Tijd voor een Plan!" statement microsite: Leitmotiv design guideline
   (Communication/Branding/DESIGN.md): near-monochrome, serif headings, sans body,
   hairlines not boxes, one big gesture per page (the dark hero).
   Unlike the event sites: one reading column, no section nav, and every box has sharp corners. */

@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
}

@layer tokens {
  @font-face {
    font-family: "VC Henrietta";
    src: url("henrietta-medium.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Onest";
    src: url("onest-variable.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
  }

  :root {
    --color-ink: #141415;
    --color-text: #27272a;
    --color-graphite: #3c3c3e;
    --color-muted: #4e4e55;
    --color-subtle: #78787d;
    --color-line: #cacace;
    --color-surface-2: #e9e9ec;
    --color-surface: #f4f4f6;
    --color-paper: #ffffff;
    --color-lime: #defb4b;
    --color-orange: #ea8c47;
    --color-link: #0000ee;
    --color-link-visited: #551a8b;

    --font-display: "VC Henrietta", Georgia, serif;
    --font-text: "Onest", system-ui, sans-serif;

    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px;

    --tracking-eyebrow: .2em;
    --rule: 1px solid var(--color-text);
    --hairline: 1px solid var(--color-line);

    --width-page: 960px;
    --width-reading: 720px;
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body {
    background: var(--color-surface);
    color: var(--color-text);
    font: 400 17px/28px var(--font-text);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { color: var(--color-ink); text-wrap: balance; }
  h2 { font: 400 32px/40px var(--font-display); }
  h3 { font: 600 18px/26px var(--font-text); }
  p { text-wrap: pretty; }
  a, a:visited { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
  a:visited { color: var(--color-link-visited); }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
  strong { font-weight: 600; color: var(--color-ink); }
  /* Underline for emphasis (not a link): orange, so it never reads as a blue link */
  u { text-decoration: underline 2px var(--color-orange); text-underline-offset: 4px; text-decoration-skip-ink: auto; }
}

@layer components {
  /* ---------------------------------------------------------------- header: partner logos */
  .site-header {
    max-inline-size: var(--width-page); margin-inline: auto;
    padding: var(--space-6) var(--space-8);
  }
  /* One row, spread across the page width. Each logo gets its own height (--h) so they read as the same size:
     long thin wordmarks lower, compact marks taller. --logo-scale shrinks them all on small screens. */
  .logos {
    --logo-scale: .9;
    list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    & a { display: block; }
  }
  .logo { --h: 32px; block-size: calc(var(--h) * var(--logo-scale)); inline-size: auto; }
  .logo--leitmotiv { --h: 54px; margin-inline-start: calc(-13.5px * var(--logo-scale)); }
  .logo--fossielvrij { --h: 17px; }
  .logo--cil { --h: 42px; }
  .logo--pne { --h: 12px; }
  .logo--aftf { --h: 27.2px; }
  .logo--a19 { --h: 46px; } /* taller: "EUROPE" sits under the mark */

  .page { max-inline-size: var(--width-page); margin-inline: auto; padding-inline: var(--space-8); }

  /* ---------------------------------------------------------------- hero: the one big gesture */
  .hero {
    background: var(--color-text); color: var(--color-surface);
    padding: var(--space-20) var(--space-16) var(--space-12);
    display: grid; gap: var(--space-6);
    border-block-end: 6px solid var(--color-orange);
    & .hero__kicker { font: 600 14px/20px var(--font-text); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-orange); margin-block-end: calc(-1 * var(--space-3)); }
    & h1 { font: 400 88px/92px var(--font-display); color: var(--color-paper); letter-spacing: -.01em; }
    & h1 em { font-style: normal; color: var(--color-orange); }
    & .hero__lead { font: 500 20px/32px var(--font-text); color: var(--color-surface-2); max-inline-size: 62ch; }
  }

  /* ---------------------------------------------------------------- statement body */
  .statement {
    max-inline-size: var(--width-reading); margin-inline: auto;
    padding-block: var(--space-12) var(--space-16);
    display: grid; gap: var(--space-8);
  }
  .prose > * + * { margin-block-start: var(--space-5); }
  .section {
    border-block-start: var(--rule);
    padding-block-start: var(--space-5);
    display: grid; gap: var(--space-5);
  }

  /* Important point: bold, set apart with an orange bar */
  .point {
    font: 600 21px/31px var(--font-text); color: var(--color-ink);
    border-inline-start: 4px solid var(--color-orange);
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
    & .point__rest { font-weight: 500; color: var(--color-text); }
  }

  /* Call to action: lime band across the full screen width, text stays in the reading column */
  .cta {
    background: var(--color-lime); color: var(--color-text);
    box-shadow: 0 0 0 100vmax var(--color-lime); clip-path: inset(0 -100vmax);
    padding-block: var(--space-10);
    display: grid; gap: var(--space-3);
    & .cta__title { font: 400 32px/40px var(--font-display); color: var(--color-ink); }
    & strong { color: var(--color-ink); }
  }

  /* The line that pops */
  .pop {
    font: 400 40px/50px var(--font-display); color: var(--color-ink);
    padding-block: var(--space-4);
    & strong { font-weight: 400; background: linear-gradient(transparent 58%, var(--color-lime) 58%, var(--color-lime) 92%, transparent 92%); padding-inline: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  }

  /* ---------------------------------------------------------------- the demands as a document */
  .charter {
    background: var(--color-paper);
    border: var(--rule);
    box-shadow: 8px 8px 0 var(--color-text);
    margin-inline-end: 8px;
    padding: var(--space-10) var(--space-10) var(--space-8);
    display: grid; gap: var(--space-8);
  }
  .charter__label {
    font: 600 12px/18px var(--font-text); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--color-muted);
  }
  .charter__head {
    display: grid; gap: var(--space-3);
    padding-block-end: var(--space-6); border-block-end: 3px double var(--color-text);
    & h2 { font-size: 30px; line-height: 38px; }
  }
  .demands {
    list-style: none; display: grid;
    & li {
      display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4);
      padding-block: var(--space-5); border-block-end: var(--hairline);
    }
    & li:first-child { padding-block-start: 0; }
    & .demands__num {
      font: 400 40px/40px var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums;
      border-inline-end: 3px solid var(--color-orange); padding-block-start: 2px;
    }
    & h3 { margin-block-end: var(--space-2); }
    & p { color: var(--color-text); }
  }
  .signatories {
    display: grid; gap: var(--space-4);
    & .signatories__list {
      list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8);
    }
    & li {
      font: 500 17px/24px var(--font-text); color: var(--color-ink);
      padding-block: var(--space-3) var(--space-2);
      border-block-end: 1px solid var(--color-text);
    }
  }

  /* ---------------------------------------------------------------- footnote: hover window */
  .fn { position: relative; display: inline; }
  .fn__ref, .fn__ref:visited {
    font: 600 12px/1 var(--font-text); vertical-align: super; text-decoration: none;
    color: var(--color-ink); background: var(--color-lime); padding: 1px 5px; margin-inline-start: 2px;
  }
  .fn__note {
    position: absolute; inset-block-end: 100%; inset-inline-start: 50%; z-index: 5;
    inline-size: min(340px, 80vw); transform: translate(-50%, 4px);
    background: var(--color-text); color: var(--color-surface-2);
    padding: var(--space-3) var(--space-4); margin-block-end: var(--space-2);
    font: 400 14px/21px var(--font-text);
    visibility: hidden; opacity: 0; transition: opacity .15s, transform .15s, visibility 0s .15s;
    & a, & a:visited { color: var(--color-paper); font-weight: 500; }
    & .fn__num { font-weight: 600; color: var(--color-orange); margin-inline-end: var(--space-1); }
    & .fn__url { display: block; font-size: 12px; line-height: 18px; color: var(--color-line); word-break: break-all; margin-block-start: var(--space-1); }
    /* invisible bridge so the cursor can move from the number into the window */
    &::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; block-size: var(--space-3); }
  }
  .fn:hover .fn__note, .fn:focus-within .fn__note {
    visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .15s, transform .15s;
  }

  /* ---------------------------------------------------------------- contact */
  .contact {
    background: var(--color-paper); border: var(--hairline); border-inline-start: 4px solid var(--color-text);
    padding: var(--space-5) var(--space-6);
    display: grid; gap: var(--space-1);
    & .contact__label { font: 600 12px/18px var(--font-text); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-muted); margin-block-end: var(--space-1); }
    & .contact__name { font: 600 19px/28px var(--font-text); color: var(--color-ink); & span { font-weight: 400; color: var(--color-muted); } }
    & .contact__lines { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
  }

  /* ---------------------------------------------------------------- footer */
  .site-footer {
    max-inline-size: var(--width-page); margin-inline: auto;
    padding: 0 var(--space-8) var(--space-16);
    font-size: 14px; line-height: 20px; color: var(--color-muted);
    & p { border-block-start: var(--hairline); padding-block-start: var(--space-4); }
    & a { font-weight: 400; }
  }
}

@layer utilities {
  @media (max-width: 1000px) { .logos { --logo-scale: .78; gap: var(--space-4); } }
  @media (prefers-reduced-motion: reduce) {
    .fn__note, .fn:hover .fn__note { transition: none; }
  }

  @media (max-width: 860px) {
    body { font-size: 16px; line-height: 26px; }
    .site-header { padding: var(--space-4); }
    .logos { --logo-scale: .8; justify-content: center; gap: var(--space-4) var(--space-6); }
    .page { padding-inline: var(--space-4); }
    .hero {
      padding: var(--space-12) var(--space-6) var(--space-8);
      gap: var(--space-4);
      & h1 { font-size: 52px; line-height: 56px; }
      & .hero__lead { font-size: 17px; line-height: 27px; }
    }
    .statement { padding-block: var(--space-8) var(--space-12); gap: var(--space-6); }
    h2 { font-size: 26px; line-height: 32px; }
    .point { font-size: 18px; line-height: 27px; padding-inline-start: var(--space-4); }
    .cta { padding-block: var(--space-8); & .cta__title { font-size: 26px; line-height: 32px; } }
    .pop { font-size: 30px; line-height: 38px; }
    .charter { padding: var(--space-6) var(--space-5); box-shadow: 5px 5px 0 var(--color-text); margin-inline-end: 5px; gap: var(--space-6); }
    .charter__head h2 { font-size: 24px; line-height: 31px; }
    .demands li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); }
    .demands .demands__num { font-size: 30px; line-height: 32px; }
    .signatories .signatories__list { grid-template-columns: minmax(0, 1fr); }
    .fn__note { inset-inline-start: auto; inset-inline-end: -1em; transform: translateY(4px); }
    .fn:hover .fn__note, .fn:focus-within .fn__note { transform: none; }
    .site-footer { padding-inline: var(--space-4); }
  }
}