/* ==========================================================================
   Ethyos — one-page portal. HTML + CSS only (no JavaScript).
   Desktop (>= 640px viewport) reproduces the 600px-wide mockup card;
   below 640px the card becomes fluid (see the mobile block at the end).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Marigny";
  src: url("../fonts/Marigny-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marigny";
  src: url("../fonts/Marigny-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Golden Hopes";
  src: url("../fonts/GoldenHopes.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --page-top: #333333;
  --page-bottom: #37619B;
  --bg-card: #222222;
  --bg-about: #3A3A3A;
  --bg-chip: #2C2C2C;
  --bg-chip-gallery: #2F3A4A;
  --line: #4A4A4A;
  --footer-bg: #000000;

  --accent: #6FA8F0;
  --accent-light: #8FBCF5;
  --glow: #F16200;

  --text: #FFFFFF;
  --text-soft: #E4E4E4;
  --text-chip: #D6D6D6;
  --text-muted: #9A9A9A;
  --text-faint: #5A5A5A;

  --font: "Marigny", Arial, sans-serif;
  --font-script: "Golden Hopes", "Marigny", Arial, sans-serif;

  --ease: 300ms ease-out;
  --card-border: var(--bg-about);

  color-scheme: dark;
}

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

body {
  margin: 0;
  min-height: 100vh;
  /* propagates to the canvas; fixed => the gradient always spans the viewport */
  background: var(--page-top) linear-gradient(var(--page-top), var(--page-bottom)) no-repeat fixed;
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Card ---------- */
.card {
  width: 600px;
  margin: 90px auto;
  background: var(--bg-card);
  border-radius: 40px;
  overflow: hidden;
  /* overflow: clip keeps the rounded clipping without creating a scroll
     container (scroll-driven animations then use the page scroller). */
  overflow: clip;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

/* ---------- 1. Header ---------- */
.hero {
  position: relative;
  height: 400px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22px; /* title box 314–378 */
  background: var(--bg-card) url("../img/header.jpg") no-repeat;
  /* 960px wide inside 600px, offset (-180px, -91px) => 50% / 37.76% */
  background-size: 160% auto;
  background-position: 50% 37.76%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%; /* 220 → 400 */
  background: linear-gradient(rgba(34, 34, 34, 0), rgba(34, 34, 34, .4));
  pointer-events: none;
}

.hero__title {
  position: relative;
  margin: 0;
  padding-left: .04em; /* balances the trailing letter-spacing */
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--text);
  text-shadow: 0 0 14px var(--glow);
}

/* ---------- 2. Socials ---------- */
.socials {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
}

.socials__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.socials__link {
  display: block;
  transition: translate var(--ease), opacity var(--ease);
}

.socials__link:hover,
.socials__link:focus-visible {
  translate: 0 -3px;
  opacity: .8;
}

/* ---------- 3. Scroll arrow ---------- */
.scroll-arrow {
  position: absolute;
  z-index: 2;
  top: 188px; /* card y = 588, straddles the About boundary */
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
}

.scroll-arrow svg {
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Shared photo card ---------- */
.photo-card {
  position: absolute;
  overflow: hidden;
  border: 6px solid var(--card-border);
  border-radius: 28px;
  background: var(--card-border);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .55);
  transition: box-shadow var(--ease);
  isolation: isolate;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease);
}

.photo-card:hover,
.photo-card:focus-within {
  box-shadow: 0 24px 44px rgba(0, 0, 0, .65);
}

/* ---------- 4. About ---------- */
.about {
  position: relative;
  display: grid;
  grid-template-columns: 250px 326px;
  padding-right: 24px;
  background: var(--bg-about);
}

.about__photos {
  position: relative;
}

.photo-card--1 {
  top: 32px;
  left: 24px;
  width: 180px;
  height: 270px;
  rotate: 3deg;
}

.photo-card--2 {
  z-index: 1;
  top: 214px;
  left: 124px;
  width: 210px;
  height: 200px;
  rotate: -3deg;
}

.about__text {
  position: relative;
  z-index: 2; /* text stays above photo 2 when parallax lifts it */
  padding-top: 40px;
  text-align: center;
}

.about__title {
  margin: 0 0 20px; /* title 40–66, text from 86 */
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}

.about__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}

.about__text p + p {
  margin-top: 1.55em; /* the blank line between both paragraphs */
}

.about__sticker {
  width: 130px;
  height: auto;
  border-radius: 50%;
  margin: 0 6px 0 auto; /* x 440–570, top 238 */
}

.about__text .about__gallery-text {
  margin-top: 16px; /* top 380 */
  line-height: 1.5;
  text-align: right;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 34px;
  margin: 10px 4px 0 auto; /* top 432, right edge 572 as in the mockup (spec: 576) */
  padding: 0 16px 0 18px;
  border: 2px solid var(--accent);
  border-radius: 17px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--ease);
}

.btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.btn:hover,
.btn:focus-visible {
  background-color: rgba(111, 168, 240, .18);
}

/* ---------- 5. Next conventions ---------- */
.next__title {
  margin: 0;
  padding: 30px 0 24px; /* title top 496, cards top 544 */
  background: var(--bg-about);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

.next__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 140px);
  justify-content: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The About background stops 66px into the 140px cards (y = 1210),
     so the cards straddle the boundary at any card size. */
  background: linear-gradient(var(--bg-about) 47.142857%, transparent 47.142857%);
}

.con-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow var(--ease);
}

.con-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease);
}

.con-card::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
  pointer-events: none;
}

.con-card__label {
  position: absolute;
  z-index: 1;
  left: 6px;
  right: 6px;
  bottom: 15px; /* label top at y = 112 inside the card */
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
}

.con-card--nfc {
  background: #1F3A63;
}

.con-card--nfc img {
  /* 120x120 at (10, 4), contained */
  inset: 2.857143% auto auto 7.142857%;
  width: 85.714286%;
  height: 85.714286%;
  object-fit: contain;
}

.con-card--fauntastic {
  background: #2A2440;
}

.con-card--dogcitane {
  background: #2E3A2A;
}

.con-card:hover,
.con-card:focus-visible {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .55);
}

/* ---------- 6. Last conventions ---------- */
.last {
  padding-top: 88px; /* cards end 1284, title 1372 */
}

.last__title {
  position: relative;
  z-index: 1;
  margin: 0 0 -12px; /* box top 1384: the title sits over its edge */
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

.last__box {
  position: relative;
  margin: 0 40px;
  padding: 44px 24px 20px;
  border-radius: 16px;
  background: var(--bg-about);
}

.year-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.last__box > .year-row:first-child {
  padding-top: 4px;
}

.year-row__year {
  flex: none;
  width: 56px;
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: var(--accent);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 15px;
  background: var(--bg-chip);
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  color: var(--text-chip);
  white-space: nowrap;
}

.chip--gallery {
  /* 1.5px border, padding reduced by 1.5px: same 26px height as plain chips */
  padding: 5.5px 10.5px;
  border: 1.5px solid var(--accent);
  background: var(--bg-chip-gallery);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--ease);
}

.chip--gallery:hover,
.chip--gallery:focus-visible {
  background: #36507A;
}

.cam {
  flex: none;
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* Footer row of the box: legend (left, in flow) + summary (right, positioned
   on the same line). The <details> stays in flow between the 2024 row and the
   legend, so the revealed 2023 row appears above the legend row. */
.legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-top: 16px;
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  color: var(--text-muted);
}

.older ~ .legend {
  padding-right: 130px; /* keeps clear of the summary when enabled */
}

.legend .cam {
  stroke: var(--text-muted);
}

.older__toggle {
  position: absolute;
  right: 24px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 12px;
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  color: var(--accent-light);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.older__toggle::-webkit-details-marker,
.older__toggle::marker {
  display: none;
  content: "";
}

.older__toggle:hover .older__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.older__chevron {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transition: rotate var(--ease);
}

.older[open] .older__chevron {
  rotate: 180deg;
}

.older[open] .older__label--closed,
.older:not([open]) .older__label--open {
  display: none;
}

/* ---------- 7. Sleepy area ----------
   Everything is laid out in % / cqi of a 600x408 box (card y 1702–2110), so
   the collage scales as one piece on small screens. */
.sleepy {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 600 / 408;
}

.sleepy__lineart {
  position: absolute;
  left: 13.666667%;  /* x 82 */
  top: 24.019608%;   /* y 1800 */
  width: 28.333333%; /* 170 */
  height: auto;
  rotate: 8deg;
  transform-origin: 0 0; /* mockup coordinates = top-left corner, rotation about it */
}

.sleepy__arrow {
  position: absolute;
  left: 37%;        /* x 222 */
  top: 9.313725%;   /* y 1740 */
  width: 15%;       /* 90 */
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

.photo-card--sleepy {
  --card-border: var(--bg-card);
  /* Image area 200x300 at (334, 1750) — the mockup's final nudge, 8px below
     the spec's 1742 — with the 6px border drawn outside it: 212x312 at (328, 1744). */
  left: 54.666667%;
  top: 10.294118%;
  width: 35.333333%;
  height: 76.470588%;
  border-radius: min(28px, 4.666667cqi);
  rotate: -4deg;
  transform-origin: 0 0;
}

.sleepy__caption {
  position: absolute;
  z-index: 1;
  left: 59.666667%; /* x 358 (spec 352; matched to the mockup) */
  top: 77.45098%;   /* y 2018 */
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 38px;
  font-size: 6.333333cqi;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  rotate: -10deg;
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- 8. Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 16px 32px;
  background: var(--footer-bg);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}

.footer__nav a {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
}

.footer__nav a:hover,
.footer__nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__credit {
  margin: 0;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  color: var(--text-faint);
}

/* ==========================================================================
   Motion (progressive enhancement, CSS only)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .photo-card:hover img,
  .photo-card:focus-within img,
  .con-card:hover img,
  .con-card:focus-visible img {
    transform: scale(1.06);
  }
}

/* Parallax: each element slides between two vertical offsets as it scrolls
   through the viewport. Offset 0 = the mockup position. Back layers drift
   down (they lag behind the page), front layers move up (they overtake it). */
@keyframes parallax {
  from {
    translate: 0 var(--parallax-from, 0px);
  }
  to {
    translate: 0 var(--parallax-to, 0px);
  }
}

/* Hero photo slides down inside its frame (37.76% = mockup framing). */
@keyframes hero-bg {
  from {
    background-position-y: 37.76%;
  }
  to {
    background-position-y: 2%;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* `animation` resets animation-timeline/-range: keep them after it. */
    .parallax,
    .sleepy__caption {
      animation: parallax linear both;
      animation-timeline: view();
    }

    /* About: continuous parallax over the whole time each element is on
       screen. Photo 2 never rises above its mockup position (the text line
       just above it), and stays clear of the "Next conventions" title below. */
    .photo-card--1 { --parallax-from: -24px; --parallax-to: 100px; } /* back  */
    .photo-card--2 { --parallax-from: 70px;  --parallax-to: 0px; }   /* front */
    .about__sticker { --parallax-from: 14px; --parallax-to: -6px; }

    /* Header: the photo lags behind the page (classic hero parallax) and the
       title drifts up, as the hero scrolls out of view. */
    .hero {
      animation: hero-bg linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    .hero__title {
      animation: parallax linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      --parallax-from: 0px;
      --parallax-to: -60px;
    }

    /* Sleepy collage sits at the very bottom of the page, where the scroll
       ends before its own view() range could. It shares the section's
       timeline and settles into the mockup layout once the whole section
       has entered (i.e. before the footer shows up), at any viewport height.
       Amounts in cqi of the section so the collage scales as one piece; the
       caption rides with the photo it is written on. */
    .sleepy {
      view-timeline: --sleepy block;
    }

    .sleepy__lineart,
    .photo-card--sleepy,
    .sleepy__caption {
      animation-timeline: --sleepy;
      animation-range: entry 0% entry 100%;
    }

    .sleepy__lineart { --parallax-from: -14cqi; }                      /* back  */
    .photo-card--sleepy,
    .sleepy__caption { --parallax-from: 24cqi; }                       /* front */
  }

  @media (prefers-reduced-motion: no-preference) and (max-width: 639.98px) {
    /* Narrower About column: less room around the photos. */
    .photo-card--1 { --parallax-from: -24px; --parallax-to: 26px; }
    .photo-card--2 { --parallax-from: 30px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Mobile (< 640px viewport)
   ========================================================================== */
@media (max-width: 639.98px) {
  /* Full-bleed: on a phone the card *is* the page (no gradient, no rounded
     corners, no shadow). The canvas takes the card colour so overscroll /
     rubber-banding never reveals the desktop gradient. */
  body {
    background: var(--bg-card);
  }

  .card {
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Header: same framing (image at 160% width), shorter, so that header +
     socials stay well above the fold (≈ 370px at 375px wide). */
  .hero {
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 240px;
    max-height: 70svh; /* landscape phones: socials stay reachable */
    padding-bottom: 18px;
  }

  .hero__title {
    font-size: clamp(40px, 13vw, 64px);
  }

  .socials {
    height: 120px;
  }

  .socials__list {
    gap: clamp(4px, 3vw, 20px);
  }

  /* Every icon gets a ≥ 48x48 tap target, the glyph stays ~36px. */
  .socials__link {
    display: grid;
    place-items: center;
    min-width: 48px;
    min-height: 48px;
    padding: 4px;
  }

  .socials__link img {
    width: auto;
    height: clamp(30px, 9.6vw, 40px);
  }

  /* 44x44 tap target, arrow drawn at the same spot (straddles the About edge). */
  .scroll-arrow {
    top: 96px;
    left: calc(50% - 22px);
    width: 44px;
    height: 44px;
    padding: 12px;
  }

  /* About: a compact side-by-side collage (portrait + overlapping landscape,
     same tilt / border / shadow as desktop) about half the height of the old
     stacked pair, then the text. */
  .about {
    display: block;
    padding: 28px 20px 0;
  }

  .about__photos {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 340 / 215;
    margin: 0 auto;
  }

  .photo-card {
    border-width: 5px;
    border-radius: 20px;
  }

  .photo-card--1 {
    top: 3%;
    left: 4%;
    width: 46%;
    height: 86%;
  }

  .photo-card--2 {
    top: 20%;
    left: 38%;
    width: 58%;
    height: 70%;
  }

  /* Text: readable measure, then the sticker sits beside the gallery
     call-to-action (as on desktop) instead of on its own row. */
  .about__text {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    column-gap: 16px;
    max-width: 460px;
    margin: 0 auto;
    padding-top: 22px;
  }

  .about__text > * {
    grid-column: 1 / -1;
  }

  .about__title {
    margin-bottom: 16px;
  }

  .about__text p {
    font-size: 15px;
    text-wrap: balance; /* no "networks ^^" orphan line */
  }

  .about__sticker {
    grid-column: 2;
    grid-row: span 2;
    align-self: center;
    width: 104px;
    height: auto;
    margin: 20px 0 0;
  }

  .about__text .about__gallery-text {
    grid-column: 3;
    align-self: end;
    margin-top: 20px;
    text-align: left;
  }

  .btn {
    grid-column: 3;
    align-self: start;
    height: 42px;
    margin: 10px 0 0;
    padding: 0 18px 0 20px;
    border-radius: 21px;
    font-size: 14px;
  }

  .next__title {
    padding: 32px 16px 20px;
    font-size: 22px;
  }

  .next__list {
    grid-template-columns: repeat(3, minmax(0, 140px));
    gap: 8px;
    padding: 0 12px;
  }

  /* Each card is a size container: the label scales with the card and
     always stays on one line ("NordicFuzzCon '27" ≈ 8.9 × font-size). */
  .con-card {
    container-type: inline-size;
    border-radius: 14px;
  }

  .con-card__label {
    left: 4px;
    right: 4px;
    bottom: 10cqi;
    font-size: min(13px, 10cqi);
    white-space: nowrap;
  }

  .last {
    padding-top: 56px;
  }

  .last__title {
    font-size: 22px;
    margin-bottom: -11px;
  }

  .last__box {
    margin: 0 12px;
    padding: 38px 14px 16px;
  }

  .year-row {
    gap: 10px;
  }

  .year-row__year {
    width: 46px;
    font-size: 17px;
  }

  /* Slightly taller chips (30px) with more row spacing: the gallery chips
     are links and need a comfortable, unambiguous tap target. */
  .chips {
    gap: 8px 6px;
  }

  .chip {
    padding: 9px 12px;
  }

  .chip--gallery {
    padding: 7.5px 10.5px;
  }

  .older ~ .legend {
    padding-right: 120px;
  }

  /* Same visual position, but a 44px-tall hit area anchored in the corner. */
  .older__toggle {
    right: 0;
    bottom: 0;
    height: auto;
    padding: 16px 14px;
  }

  .photo-card--sleepy {
    border-width: 4px;
  }

  /* The collage scales as one piece; capped so it stays a closing accent
     rather than a full screen on larger phones / small tablets. */
  .sleepy {
    max-width: 460px;
    margin: 8px auto 0;
  }

  .footer {
    gap: 8px;
    padding: 18px 16px 24px;
  }

  /* Footer links: 44px-tall tap targets. */
  .footer__nav {
    gap: 0 12px;
  }

  .footer__nav a {
    padding: 15px 6px;
    font-size: 14px;
  }
}

/* Narrow phones: the five footer links don't fit on one line, so lay them
   out as a balanced 3 + 2 grid instead of 4 + a lone orphan. */
@media (max-width: 479.98px) {
  .footer__nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    width: 100%;
    max-width: 300px;
  }

  .footer__nav a {
    grid-column: span 2;
    text-align: center;
  }

  .footer__nav a:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

/* Small phones (< 400px): the 56px year column leaves the chips ~260px and
   long names wrap one per line, so the year becomes a heading above its
   chips, which then use the full width of the box. */
@media (max-width: 399.98px) {
  .year-row {
    display: block;
    padding: 12px 0 14px;
  }

  .year-row__year {
    width: auto;
    margin-bottom: 8px;
    line-height: 20px;
  }
}