/* The static site in the carousel's "Synapse Halo" charter (ADR 0029, 0042). Everything comes from
   the site itself: these fonts (Poppins and Caveat, SIL Open Font License 1.1, the licence travels
   inside each file) and the mascot's pictures, next to the pages. Colors: ground #F7F6F2, ink
   #0E1B4D, blue #2D62B0, orange #EA5F0E, grey #4A5578, disc #EEF2F8, rules #DCE4EF and #E6EBF3. */
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2");
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2");
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

@font-face {
  font-family: 'Poppins';
  font-weight: 800;
  font-display: swap;
  src: url("fonts/poppins-800.woff2") format("woff2");
}

@font-face {
  font-family: 'Caveat';
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ground: #f7f6f2;
  --ink: #0e1b4d;
  --blue: #2d62b0;
  --orange: #ea5f0e;
  --grey: #4a5578;
  --disc: #eef2f8;
  --rule: #dce4ef;
  --rule-soft: #e6ebf3;
  --card: #ffffff;
  --hand: 'Caveat', cursive;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.55 'Poppins', 'Liberation Sans', Arial, sans-serif;
}

p,
h1,
h2,
h3,
ol,
ul {
  margin: 0;
  padding: 0;
}

a {
  color: var(--blue);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--orange);
}

.accent {
  color: var(--orange);
}

.swap {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25em 0.15em;
  width: 0.9em;
  height: auto;
}

/* The masthead. */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 2px solid var(--rule);
}

.brand {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.masthead nav a {
  color: var(--ink);
  text-decoration: none;
}

.masthead nav a:hover {
  color: var(--orange);
}

.masthead nav .language {
  color: var(--blue);
}

main {
  max-width: 50rem;
  margin: 0 auto;
  padding: 2rem 1rem 2.5rem;
}

/* The dashed ring and the pale disc behind the mascot. */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 3px dashed var(--rule);
}

.disc {
  position: absolute;
  border-radius: 50%;
  background: var(--disc);
}

/* The home page: the mascot holding its sign, as on the carousel's cover. */
.hero {
  text-align: center;
}

.hero-mascot {
  position: relative;
  width: 306px;
  height: 306px;
  margin: 40px auto 28px;
}

.hero-mascot .ring {
  left: -38px;
  top: -38px;
  width: 382px;
  height: 382px;
}

.hero-mascot .disc {
  inset: 0;
}

.cover-mascot {
  position: absolute;
  left: 0;
  top: 0;
  width: 306px;
}

.sign {
  position: absolute;
  left: 20px;
  top: 200px;
  width: 268px;
  height: 120px;
  text-align: center;
}

.sign-dates {
  margin-top: 18px;
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 700;
}

.underline {
  display: block;
  width: 130px;
  height: 12px;
  margin: 4px auto 0;
  color: var(--orange);
}

.hero .cover-title {
  margin-top: 1.5rem;
}

.cover-title {
  font-size: clamp(2.6rem, 9vw, 4.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.tagline {
  margin-top: 0.9rem;
  color: var(--grey);
  font-weight: 500;
}

.in-progress {
  margin-top: 0.25rem;
  font-family: var(--hand);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--grey);
}

.eyebrow {
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--rule);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue);
}

.latest {
  margin-top: 3rem;
}

.latest > h2 {
  margin-top: 1.25rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.latest > h2 a {
  color: var(--ink);
  text-decoration: none;
}

/* The head of a period page. */
.period-head h1 {
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hand {
  margin-top: 0.4rem;
  font-family: var(--hand);
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 700;
}

.period-head .underline {
  margin: 0.2rem 0 0;
}

/* An article, as a page of the carousel. */
.articles {
  margin-top: 1.75rem;
  list-style: none;
}

.article {
  margin-bottom: 1.75rem;
  padding: 1.6rem 1.6rem 1.4rem;
  background: var(--card);
  border: 2px solid var(--rule-soft);
  border-radius: 28px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.pill {
  padding: 0.15rem 0.8rem;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 700;
}

.pill-rank {
  background: var(--ink);
  color: #ffffff;
}

.pill-source {
  background: #ffffff;
  border: 2px solid var(--rule);
  font-weight: 600;
}

.hand-date {
  font-family: var(--hand);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--grey);
}

.article-body {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  margin-top: 1.25rem;
}

.avatar {
  position: relative;
  flex: none;
  width: 150px;
  height: 150px;
  margin: 18px 0 0 18px;
}

.avatar .ring {
  left: -18px;
  top: -18px;
  width: 186px;
  height: 186px;
}

.avatar .disc {
  inset: 0;
}

.avatar-image {
  position: absolute;
  left: 50%;
  top: 4px;
  height: 142px;
  transform: translateX(-50%);
}

.article-text {
  min-width: 0;
}

.kind {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}

.hook {
  margin-top: 0.35rem;
  font-size: 1.55rem;
  line-height: 1.26;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stroke {
  display: block;
  margin-top: 0.6rem;
  color: var(--orange);
}

.points {
  margin-top: 1rem;
  list-style: none;
}

.point {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
  padding: 0.75rem 1.1rem 0.75rem 0.95rem;
  border-radius: 20px;
  background: var(--ground);
  border: 2px solid var(--rule-soft);
}

.point p {
  font-weight: 500;
  line-height: 1.45;
}

.neuron {
  flex: none;
  margin-top: 0.05rem;
}

.neuron-orange {
  color: var(--orange);
}

.neuron-blue {
  color: var(--blue);
}

.source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding: 0.8rem 0.8rem 0.8rem 1.4rem;
  border-radius: 24px;
  background: #ffffff;
  border: 2px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

a.source-card:hover {
  border-color: var(--orange);
  color: var(--ink);
}

.source-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.source-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--blue);
}

.source-title {
  font-weight: 600;
  line-height: 1.35;
}

.domain {
  font-size: 0.85rem;
  color: var(--grey);
}

.arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
}

/* A week with a selection (ADR 0043): the selection, then the other articles, more discreet. */
.chosen,
.also {
  margin-top: 1.75rem;
}

.briefs {
  margin-top: 1rem;
  list-style: none;
}

.brief {
  padding: 0.9rem 0;
  border-bottom: 2px solid var(--rule-soft);
}

.brief .meta {
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--grey);
}

.brief .hand-date {
  font-size: 1.15rem;
}

.brief-hook {
  margin-top: 0.2rem;
  font-weight: 600;
  line-height: 1.4;
}

.brief-link {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
}

/* Lists of periods, as the carousel's table of contents. */
.archive {
  margin-top: 3rem;
}

.archive .columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 1.25rem;
}

.archive h2 {
  font-size: 1.2rem;
  font-weight: 800;
}

.toc {
  margin-top: 0.75rem;
  list-style: none;
}

.period-head + .toc {
  margin-top: 1.5rem;
  border-top: 2px solid var(--rule);
}

.toc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 2px solid var(--rule-soft);
}

.toc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.toc-meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}

.toc-headline {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.toc-headline:hover {
  color: var(--orange);
}

.see-all {
  margin-top: 0.75rem;
  font-weight: 600;
}

.empty {
  margin-top: 2rem;
  text-align: center;
  color: var(--grey);
}

.notice {
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  border-top: 2px solid var(--rule);
  font-size: 0.85rem;
  color: var(--grey);
}

.root {
  padding-top: 20vh;
  text-align: center;
}

/* The parking page, until the site is launched: the mascot holds "coming soon", then the site's
   short name, the whole in the middle of the screen. */
.parking {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  text-align: center;
}

.parking .hero-mascot {
  margin: 0 auto;
}

.parking .sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.parking .sign-dates {
  margin-top: 0;
  font-size: 58px;
}

.parking .cover-title {
  margin-top: 3.5rem;
}

.languages {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  list-style: none;
  font-size: 1.2rem;
  font-weight: 600;
}

/* On a phone, the mascot goes above the text of an article. */
@media (max-width: 560px) {
  .hero-mascot .ring {
    left: -20px;
    top: -20px;
    width: 346px;
    height: 346px;
  }

  .article {
    padding: 1.25rem 1.1rem 1.1rem;
  }

  .article-body {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  .article-text {
    align-self: stretch;
  }

  .hook {
    font-size: 1.35rem;
  }
}