/* J2000 homepage. Colors and fonts are set once, in :root; the rest only
   uses them. Every text color reaches a contrast of 4.5 or more on the
   ground (WCAG AA). */

@font-face {
  font-family: "Lato";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lato-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lato-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Raleway";
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/raleway-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

:root {
  --ground: #161412;  /* warm black, no blue */
  --line:   #2e2925;  /* separators */
  --text:   #ece5dc;
  --muted:  #a99f94;  /* descriptions */
  --faint:  #8a8076;  /* addresses, labels */
  --accent: #e5b393;  /* peach, on hover and focus only */

  --sans:    "Lato", ui-sans-serif, system-ui, sans-serif;
  --display: "Raleway", "Lato", ui-sans-serif, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  color-scheme: dark;
}


/* Page */

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3rem;
}

a {
  color: inherit;
  text-decoration: none;
}

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

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


/* Header: the title, and in the corner the logo above the language switch,
   both on the same vertical axis. The top of the logo is on the top of the title's capitals, the baseline of
   the switch on the baseline of the title. The numbers come from the metrics
   of the fonts, in em: Raleway has an ascent of 0.94, a descent of 0.234 and
   capitals of 0.71, so in a line of height 1 its capitals start 0.143 below
   the top of the line and its baseline is 0.853 below it; IBM Plex Mono has
   an ascent of 1.025 and a descent of 0.275, so in a line of height 1 its
   baseline is 0.875 below the top. */

header {
  --title: clamp(2.5rem, 12vw, 5rem);
  --lang: 0.8125rem;                  /* size of the language switch */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

/* The disc goes a little beyond the title, above and below; its negative
   margins keep the line's height, on which the corner's alignment is
   computed. Its ratio is that of the discs (192 by 190): the disc arrives
   after the page, and its place is kept until then, so the title does not
   move */
.brand {
  display: flex;
  align-items: center;
  gap: calc(var(--title) * 0.3);
}

.disc {
  display: block;
  height: calc(var(--title) * 1.25);
  width: auto;
  aspect-ratio: 192 / 190;
  margin: calc(var(--title) * -0.125) 0;
}

h1 {
  margin: 0;
  font: 300 var(--title)/1 var(--display);
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
}

.corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--title) * 0.143);
}

/* The logo is a mask: its color comes from the palette, not from the file */
.inrae {
  width: calc(var(--title) * 1.3);
  aspect-ratio: 392.45 / 102.23;
  margin-bottom: calc(var(--title) * (0.71 - 1.3 * 102.23 / 392.45) - 0.875 * var(--lang));
  background: var(--text);
  -webkit-mask: url("/inrae.svg") no-repeat right center / contain;
  mask: url("/inrae.svg") no-repeat right center / contain;
}

.inrae:hover {
  background: var(--accent);
}

.lang {
  font: var(--lang)/1 var(--mono);
  color: var(--faint);
  white-space: nowrap;
}

/* The smallest phones (320 pixels): a smaller switch and gap, so that the
   header fits on one line */
@media (max-width: 21rem) {
  header {
    --lang: 0.6875rem;
    gap: 0.5rem;
  }
}

.lang a:hover {
  color: var(--accent);
}

.lang [aria-current] {
  color: var(--text);
}

.intro {
  max-width: 36em;
  margin: 2.5rem 0 0;
  font-size: 1.125rem;
}

.intro p {
  margin: 0;
}

.intro p + p {
  margin-top: 1em;
}


/* Sections: one line per resource */

section {
  margin-top: 3.5rem;
}

h2 {
  margin: 0 0 0.75rem;
  font: 400 0.8125rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.links {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.links li {
  border-top: 1px solid var(--line);
}

.links a {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  grid-template-areas:
    "name what  arrow"
    "name where arrow";
  column-gap: 1.25rem;
  padding: 0.9rem 0;
}

.name {
  grid-area: name;
  font-weight: 700;
}

.what {
  grid-area: what;
  color: var(--muted);
}

.where {
  grid-area: where;
  font: 0.8125rem var(--mono);
  color: var(--faint);
  overflow-wrap: anywhere;
}

/* The arrow is decoration: the empty alternative hides it from screen readers */
.links a::after {
  content: "→";
  content: "→" / "";
  grid-area: arrow;
  align-self: center;
  color: var(--faint);
  transition: transform 0.15s;
}

.links a:hover .name,
.links a:hover::after {
  color: var(--accent);
}

.links a:hover::after {
  transform: translateX(0.25rem);
}

.pending {
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--faint);
}

@media (max-width: 34rem) {
  .links a {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name  arrow"
      "what  arrow"
      "where arrow";
  }
}

@media (prefers-reduced-motion: reduce) {
  .links a::after {
    transition: none;
  }
}


/* Legal notice: plain paragraphs */

.prose section p {
  max-width: 40em;
  margin: 0;
  color: var(--muted);
}

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


/* Footer */

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 4.5rem;
  font: 0.8125rem var(--mono);
  color: var(--faint);
}

footer a,
.intro a,
.prose a {
  border-bottom: 1px solid var(--line);
}

footer a:hover,
.intro a:hover,
.prose a:hover {
  color: var(--accent);
  border-color: var(--accent);
}