/* Landing page for https://knz.github.io/co2-booklet/
 *
 * Hand-written, no framework and no third-party request: the page is the
 * target of a printed QR code, so it has to load fast on mobile data and
 * keep working for years without a dependency going stale.
 *
 * Ink, greys and the CO2 bands are the same values as the print material
 * (shared/style.typ, shared/facts.typ). The print accent colour is not
 * used for the page chrome.
 */

/* --- Fonts ------------------------------------------------------------
 * Nunito (SIL OFL, see fonts/OFL.txt), Latin subset, one variable file for
 * all weights. Rounded terminals give the page a friendlier voice than a
 * neutral grotesque; a reader took the earlier, more institutional look for
 * a government template (changelog/20260921-landing-official-look-feedback.md).
 * Headings use the same family at 800.
 */
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1d2a33;
  /* The page chrome is ink on white. Colour is left to the CO2 bands and
     to the illustrations inside the two publications. */
  --accent: #1d2a33;
  --paper: #ffffff;
  --mist: #eef1f2;
  --muted: #5b6770;
  --rule: #c9d3d8;
  --green: #3f9b5c;
  --amber: #f0c233;
  --red: #d4493f;

  --measure: 36rem;
  --gutter: 1.25rem;

  --sans: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: var(--sans);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: 'tnum' 1;
}

/* --- Language gate and language sections -------------------------------
 * Without JavaScript nothing is hidden: the gate is dropped and both
 * language sections are shown one after the other, so the page still
 * works. With JavaScript the gate is shown until a language is chosen.
 */
html:not(.js) .gate {
  display: none;
}

html.js .page {
  display: none;
}

html.js[data-lang] .gate {
  display: none;
}

html.js[data-lang] .page {
  display: block;
}

html.js[data-lang='nl'] .lang[lang='en'],
html.js[data-lang='en'] .lang[lang='nl'] {
  display: none;
}

/* The one piece of motion on the page: content arriving after the visitor
 * chooses a language. app.js adds .chose, so this answers an action and
 * never plays on its own — a returning visitor who lands straight on the
 * content gets no animation. Dropped for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js.chose[data-lang] .page {
    animation: arrive 0.18s ease-out both;
  }
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
}

/* --- Gate -------------------------------------------------------------- */

.gate {
  min-height: 100svh;
  min-height: 100vh;
  background: var(--accent);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem var(--gutter) 0;
}

.gate__inner {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gate__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 9.5vw, 3.1rem);
  line-height: 1.06;
  margin: 0 0 2.5rem;
  letter-spacing: -0.01em;
}

.gate__title span {
  display: block;
}

.gate__title span + span {
  color: #aebbc3;
}

.gate__choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gate__button {
  flex: 1 1 10rem;
  display: block;
  padding: 1rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 2rem;
  font: inherit;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.gate__button:hover {
  background: #dfe5e8;
  border-color: #dfe5e8;
}

.gate__button:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

/* Who is behind the page, stated before the visitor goes any further. */
.gate__sender {
  margin: 2rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #c3ced4;
}

.gate__sender span {
  display: block;
}

/* Signature strip: the CO2 bands, the object the whole project is about. */
.gate__bands {
  display: flex;
  height: 0.6rem;
  margin-top: 2.5rem;
}

.gate__bands span {
  flex: 1;
}

.gate__bands span:nth-child(1) {
  background: var(--green);
  flex-grow: 20.6;
}
.gate__bands span:nth-child(2) {
  background: var(--amber);
  flex-grow: 26.5;
}
.gate__bands span:nth-child(3) {
  background: var(--red);
  flex-grow: 52.9;
}

/* --- Page chrome ------------------------------------------------------- */

/* No bar: the wordmark and the sender line sit on the page itself. */

.topbar__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1rem var(--gutter) 0.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.wordmark {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  /* On a narrow phone the name breaks after the comma, as on the gate,
     instead of leaving one word on the second line. */
  text-wrap: balance;
  color: var(--accent);
}

/* The CO2 bands again, as a small mark next to the name. */
.wordmark::before {
  content: '';
  flex: none;
  width: 1.5rem;
  height: 0.6rem;
  /* Sits on the first line when the name wraps on a narrow phone. */
  margin-top: 0.33rem;
  border-radius: 0.3rem;
  background: linear-gradient(
    90deg,
    var(--green) 0 33%,
    var(--amber) 33% 66%,
    var(--red) 66%
  );
}

.sender {
  font-size: 0.8125rem;
  color: var(--muted);
}

.langswitch {
  flex: none;
  display: flex;
  gap: 0.35rem;
  font-size: 0.9375rem;
}

.langswitch a {
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid transparent;
}

.langswitch a:hover {
  text-decoration: underline;
}

.langswitch a[aria-current='true'] {
  background: var(--accent);
  color: #fff;
}

.langswitch a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 7.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* Tight under the h1: a deck line follows it on both language sections.
     .gate__title sets its own margin, so the gate is unaffected. */
  margin: 1.25rem 0 0.4rem;
}

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.15;
  margin: 2.75rem 0 0.75rem;
}

p {
  margin: 0 0 1rem;
}

/* The deck carries the second half of the headline idea: what the CO₂
   number stands for. The h1 says why to measure, the deck says what the
   measurement represents, the lede explains the mechanism. Sized between
   the two so the three read as one descending statement. */
.deck {
  font-size: 1.3125rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 0.9rem;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.55;
}

a {
  color: var(--accent);
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- The scale --------------------------------------------------------
 * A linear ppm axis from 400 to 2100, so the bands sit where they belong
 * instead of being three equal blocks. Percentages are (ppm-400)/1700.
 * The band names live in the legend below, not inside the segments:
 * white on amber would not have enough contrast to read.
 */

.scale {
  margin: 1.5rem 0 1.25rem;
}

.scale__above {
  position: relative;
  height: 2.5rem;
}

.scale__pin {
  position: absolute;
  bottom: 0;
  left: 35.3%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.scale__pin b {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.scale__pin::after {
  content: '';
  display: block;
  width: 2px;
  height: 0.6rem;
  margin: 0.15rem auto 0;
  background: var(--ink);
}

.scale__bar {
  display: flex;
  height: 2.25rem;
  border-radius: 1.125rem;
  overflow: hidden;
}

.scale__bar span {
  display: block;
}

.scale__bar span:nth-child(1) {
  background: var(--green);
  flex-grow: 20.6;
}
.scale__bar span:nth-child(2) {
  background: var(--amber);
  flex-grow: 26.5;
}
.scale__bar span:nth-child(3) {
  background: var(--red);
  flex-grow: 52.9;
}

.scale__ticks {
  position: relative;
  height: 1.4rem;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.scale__ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.scale__ticks .t1200 {
  left: 47.1%;
}

.scale__ticks span:first-child {
  left: 0;
  transform: none;
}

.scale__ticks span:last-child {
  left: auto;
  right: 0;
  transform: none;
}

.legend {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.legend li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.15rem 0;
}

.legend i {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  transform: translateY(0.1rem);
}

.legend .is-good {
  background: var(--green);
}
.legend .is-fair {
  background: var(--amber);
}
.legend .is-high {
  background: var(--red);
}

.legend b {
  font-weight: 600;
}

.legend span {
  color: var(--muted);
}

.levels {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.levels li {
  margin-bottom: 0.3rem;
}

/* --- The two publications ----------------------------------------------
 * Booklet and infographic are both A5 portrait, so the two thumbnails are
 * the same size and neither outweighs the other. No box around an entry:
 * the hairline is the edge of the sheet of paper, not a card. The width
 * cap keeps the pair a preview on a wide screen, not a second hero.
 */

/* The deck links here; keep the heading clear of the viewport edge. */
h2[id] {
  scroll-margin-top: 1rem;
}

.pubs {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 13rem));
  gap: 1.25rem;
}

.pubs a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pubs img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--paper);
}

.pubs b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.15;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.pubs a:hover b {
  text-decoration-thickness: 2px;
}

.pubs span {
  display: block;
  margin: 0.3rem 0 0.2rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.pubs em {
  display: block;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--muted);
}

/* --- The "why now" sheet -------------------------------------------------
 *
 * One document, set as a row: thumbnail left, name and description right.
 * It uses the same parts as .pubs (hairline sheet edge, underlined name,
 * muted file note) at a smaller size, so it reads as a third document
 * without competing with the equal pair below it. The row holds on a
 * phone too: the thumbnail is narrow enough to leave the text a column.
 */

.sheet {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  max-width: 27.25rem; /* the width of the .pubs pair */
  margin: 1rem 0;
  color: inherit;
  text-decoration: none;
}

.sheet img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 0.35rem;
  background: var(--paper);
}

.sheet__text,
.sheet__text > * {
  display: block;
}

.sheet b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.15;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.sheet:hover b {
  text-decoration-thickness: 2px;
}

.sheet__text > span {
  margin: 0.3rem 0 0.2rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.sheet em {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--muted);
}

/* --- The one boxed element on the page --------------------------------- */

.measure-it {
  background: var(--mist);
  border-radius: 1rem;
  padding: 1.25rem 1.4rem 0.5rem;
  margin: 2rem 0;
}

.measure-it h2 {
  margin-top: 0;
  font-size: 1.3125rem;
}

/* Detail still to be decided: the same placeholder the printed sheet
   carries, so page and print say the same thing. */
.tbd {
  background: #fff0a8;
  padding: 0 0.15rem;
}

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

.foot {
  margin-top: 3.5rem;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--mist);
  padding: 2rem 0 2.5rem;
}

.foot h2 {
  margin-top: 0;
  font-size: 1.1875rem;
}

.foot ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
}

.foot li {
  margin-bottom: 0.3rem;
}

.foot a {
  overflow-wrap: anywhere;
}

.colophon {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

.colophon + .colophon {
  margin-top: 0.6rem;
}

/* The question "who is behind this?" is the part a doubtful reader looks
   for, so it stands out from the rest of the small print. */
.colophon b {
  font-weight: 600;
  color: var(--ink);
}

/* --- Sources page ------------------------------------------------------ */

/* Deliberately unnumbered. The booklet numbers its citations 1..57 in
 * order of first use; numbering this list too would invite a reader to
 * match "12" in the booklet against "12" here, and they are not the same
 * list. A hanging indent separates the entries instead. */
.refs {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.refs li {
  padding-left: 1.5rem;
  text-indent: -1.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.refs cite {
  font-style: italic;
}

.refs a {
  overflow-wrap: anywhere;
}

.back {
  display: inline-block;
  margin: 1.5rem 0 0;
}