/* Non-critical page components loaded for guide, comparison, hub and legal pages. */

/* Below-the-fold forms, notices, topic lists and footer share this deferred bundle. */
.newsletter-form {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  padding: clamp(var(--space-5), 5vw, var(--space-7));
}

.newsletter-form > :where(h2, h3, p) {
  margin: 0;
}

.newsletter-form .field {
  display: grid;
  gap: var(--space-2);
}

.newsletter-form label {
  color: var(--color-ink);
  font-weight: 600;
}

.newsletter-form input[type="email"],
.newsletter-form input[type="text"],
.newsletter-form textarea,
.newsletter-form select {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
}

.newsletter-form input:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--color-danger);
}

.newsletter-form .field--checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-2);
}

.newsletter-form input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--color-primary);
}

.newsletter-form .hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.newsletter {
  margin-block: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  padding: clamp(var(--space-5), 5vw, var(--space-7));
}

.newsletter > :where(h2, h3, p) {
  margin-block: 0 var(--space-3);
}

.sample-chip {
  display: inline-flex;
  width: fit-content;
  margin-block-start: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  padding: 0.25rem 0.65rem;
  font-size: var(--font-size-xs);
  font-weight: 650;
}

.notice {
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-4);
}

.notice--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.topic-list {
  columns: 1;
  margin: var(--space-4) 0 0;
  padding-inline-start: 1.25rem;
}

.topic-list li + li {
  margin-block-start: var(--space-2);
}

.site-footer {
  margin-block-start: var(--space-9);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  padding-block: var(--space-7);
}

.site-footer nav ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .topic-list {
    columns: 2;
    column-gap: var(--space-7);
    max-width: 60ch;
  }
}

.prose {
  max-width: var(--measure-article);
  font-family: var(--font-family-serif);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.prose > * + * {
  margin-block-start: 1.25em;
}

/* The rendered guide body uses `article-body`; keep the editorial measure identical. */
.article-body {
  max-width: var(--measure-article);
  font-family: var(--font-family-serif);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.article-body > * + * {
  margin-block-start: 1.25em;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  margin-block-start: 2em;
  scroll-margin-top: 6rem;
}

.article-body ul,
.article-body ol {
  padding-inline-start: 1.4em;
}

.guide {
  padding-block-end: var(--space-7);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.page-heading {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-6);
}

.breadcrumbs {
  margin-block-start: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  margin-inline-end: var(--space-2);
  color: var(--color-border-strong);
  content: "/";
}

.prose h2,
.prose h3,
.prose h4 {
  margin-block-start: 2em;
  scroll-margin-top: 6rem;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.4em;
}

.prose blockquote {
  margin-inline: 0;
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-5);
  color: var(--color-ink-muted);
  font-size: var(--font-size-lg);
  font-style: italic;
}

.prose code,
code {
  border-radius: var(--radius-sm);
  padding: 0.1em 0.3em;
  background: var(--color-surface-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* Data boxes and sources */
.data-box {
  margin-block: var(--space-6);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-5);
}

.data-box__eyebrow,
.data-box__note,
.data-box__context-links,
.data-box__comparison {
  margin: 0;
}

.data-box__eyebrow {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  font-weight: 650;
}

.data-box__label-link {
  color: inherit;
  text-decoration-thickness: 0.08em;
}

.data-box__value {
  margin-block: var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  line-height: 1.15;
}

.data-box__note,
.data-box__context-links,
.data-box__comparison {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.sources {
  margin-block-start: var(--space-8);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  font-size: var(--font-size-sm);
}

.sources ol {
  margin: var(--space-4) 0 0;
  padding-inline-start: 1.4em;
}

.sources li + li {
  margin-block-start: var(--space-3);
}

.sources a[href^="#ref-"] {
  margin-inline-start: var(--space-2);
  white-space: nowrap;
}

/* Comparison tables */
.table-scroll {
  position: relative;
  margin-block: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline-start: 10rem;
  scrollbar-color: var(--color-border-strong) transparent;
}

.table-scroll:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.table-scroll::after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.25rem;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--shadow-color), 0.13));
}

.compare-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.compare-table caption {
  margin-bottom: var(--space-3);
  color: var(--color-ink-muted);
  font-family: var(--font-family-serif);
  font-size: var(--font-size-base);
  text-align: left;
}

.compare-table th,
.compare-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  text-align: left;
}

.compare-table thead th {
  position: sticky;
  z-index: 3;
  top: 0;
  background: var(--color-surface-alt);
  color: var(--color-ink);
  font-weight: 700;
  white-space: nowrap;
}

.compare-table thead th:first-child,
.compare-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
}

.compare-table thead th:first-child {
  z-index: 4;
}

.compare-table tbody th[scope="row"] {
  z-index: 1;
  background: var(--color-surface);
  font-weight: 650;
  white-space: nowrap;
}

.compare-table tbody tr:nth-child(even) td,
.compare-table tbody tr:nth-child(even) th[scope="row"] {
  background: var(--color-surface-alt);
}

.compare-table .numeric,
.tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.compare-table thead button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  margin: calc(-1 * var(--space-2)) 0;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: inherit;
  text-align: left;
}

.compare-table thead button:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.sort-icon {
  display: inline-grid;
  width: 0.9rem;
  height: 1rem;
  flex: 0 0 0.9rem;
  place-items: center;
  color: var(--color-ink);
}

.sort-icon::before {
  content: "↕";
  font-size: 0.95rem;
  line-height: 1;
}

th[aria-sort="ascending"] .sort-icon::before {
  content: "↑";
}

th[aria-sort="descending"] .sort-icon::before {
  content: "↓";
}

/* Guide layout and table of contents */
.guide-layout {
  display: block;
}

.toc {
  max-width: min(100%, 80ch);
  margin: var(--space-5) auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  padding: var(--space-4);
}

.toc summary {
  cursor: pointer;
  color: var(--color-ink);
  font-weight: 700;
}

.toc[open] > summary {
  border-block-end: 1px solid var(--color-border);
  padding-block-end: var(--space-3);
}

.toc ol {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-inline-start: 1.25rem;
  font-size: var(--font-size-sm);
}

.toc ol ol {
  display: block;
  margin: var(--space-2) 0 0;
  border-inline-start: 1px solid var(--color-border-strong);
  padding-inline-start: var(--space-3);
  list-style: none;
}

.toc ol ol li + li {
  margin-block-start: var(--space-2);
}

.toc ol ol a {
  color: var(--color-primary);
  font-size: 0.92em;
}

.toc a {
  color: var(--color-ink-muted);
  text-decoration: none;
}

.toc a:hover,
.toc a[aria-current="location"] {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.sample-note {
  color: var(--color-warning);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
}

.reviewed-badge--prominent {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.25rem), 1fr));
  gap: var(--space-5);
}

.topic-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5);
}

.related-topics,
.related-countries,
.country-topic-matrix {
  margin-block: var(--space-7);
}

.related-topics ul,
.related-countries ul {
  columns: 1;
  margin: var(--space-4) 0 0;
  padding-inline-start: 1.25rem;
}

.related-topics li + li,
.related-countries li + li {
  margin-block-start: var(--space-2);
}

.country-topic-matrix .table-scroll {
  margin-block-start: var(--space-4);
}

.sort-label-fallback {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
}

.compare-topic-link {
  font-weight: 700;
}

.newsletter-placeholder {
  margin-block: var(--space-3);
}

@media (min-width: 1024px) {
  .guide-layout.is-enhanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .guide-layout.is-enhanced > .toc.is-enhanced {
    grid-column: 1;
    grid-row: 1;
    margin: var(--space-6) auto 0;
  }

  .toc.is-enhanced {
    position: static;
    width: 100%;
    padding: var(--space-5);
  }

  .toc.is-enhanced > ol {
    display: block;
    columns: 2;
    column-gap: clamp(var(--space-6), 7vw, var(--space-8));
    column-rule: 1px solid var(--color-border);
  }

  .toc.is-enhanced > ol > li {
    break-inside: avoid-column;
    margin-block-end: var(--space-3);
  }

  .guide-layout.is-enhanced > .prose,
  .guide-layout.is-enhanced > article,
  .guide-layout.is-enhanced > .article-body {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: min(100%, 80ch);
    margin-inline: auto;
  }
}

/* Editorial in-page media inserted by the SEO image program */
.page-media {
  margin: var(--space-5) auto 0;
  max-width: min(100%, 34rem);
  aspect-ratio: 3 / 2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.page-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Keep the artwork an inline editorial vignette. No floats: floated media
 * pushed grid/table sections below the image and left a large gap in the
 * text column. As a normal block the next section starts immediately after
 * the figure, so every page type stays free of float whitespace. */
.page-media + * {
  clear: none;
}

@media (min-width: 1024px) {
  /* Guide intros keep the editorial metadata in a readable left column while
   * the image anchors the opening block on the right. Notices and article
   * content then resume as full-width rows below the intro. */
  .guide.media-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, min(34rem, 42%));
    column-gap: clamp(var(--space-5), 4vw, var(--space-8));
    align-items: start;
  }

  .guide.media-intro > .kicker {
    grid-column: 1;
    grid-row: 1;
  }

  .guide.media-intro > h1 {
    grid-column: 1;
    grid-row: 2;
  }

  .guide.media-intro > .lead {
    grid-column: 1;
    grid-row: 3;
  }

  .guide.media-intro > .byline {
    grid-column: 1;
    grid-row: 4;
  }

  .guide.media-intro > .page-media {
    grid-column: 2;
    grid-row: 1 / span 4;
    width: 100%;
    margin: 0;
  }

  .guide.media-intro > :is(.notice, .guide-layout) {
    grid-column: 1 / -1;
  }

  /* Collection and comparison headings share their row with the media;
   * breadcrumbs and every subsequent section remain full-width. */
  main.container.media-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, min(34rem, 42%));
    column-gap: clamp(var(--space-5), 4vw, var(--space-8));
    align-items: start;
  }

  main.container.media-intro > .breadcrumbs {
    grid-column: 1 / -1;
  }

  main.container.media-intro > .page-heading {
    grid-column: 1;
    grid-row: 2;
  }

  main.container.media-intro > .page-media {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    margin: 0;
  }

  main.container.media-intro
    > :not(.breadcrumbs):not(.page-heading):not(.page-media) {
    grid-column: 1 / -1;
  }

  /* Informational pages lift the intro out of the prose measure. The first
   * paragraph shares the left intro column; later content returns below it
   * at the existing article measure, including newsletter and source blocks. */
  .info-page.media-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, min(34rem, 42%));
    column-gap: clamp(var(--space-5), 4vw, var(--space-8));
    align-items: start;
    max-width: none;
  }

  .info-page.media-intro > .kicker {
    grid-column: 1;
    grid-row: 1;
  }

  .info-page.media-intro > h1 {
    grid-column: 1;
    grid-row: 2;
  }

  .info-page.media-intro > .page-media {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 100%;
    margin: 0;
  }

  .info-page.media-intro
    > :where(*:not(.kicker):not(h1):not(.page-media)) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: var(--measure-article);
  }

  .info-page.media-intro > .page-media + p {
    grid-column: 1;
    grid-row: 3;
  }
}

/* -------------------------------------------------------------------------
 * Warm Editorial Field Guide content layer
 * ------------------------------------------------------------------------- */

main > section[aria-labelledby="topics-heading"] {
  margin-block: clamp(var(--space-8), 9vw, var(--space-9));
}

main > section[aria-labelledby="topics-heading"] > h2 {
  margin-bottom: clamp(var(--space-5), 4vw, var(--space-7));
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.topic-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(var(--space-5), 4vw, var(--space-8));
  row-gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: topic;
}

.topic-list li {
  position: relative;
  min-height: 5.75rem;
  margin: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
  border-inline-start: 2px dotted color-mix(in srgb, var(--color-accent) 38%, transparent);
  padding: var(--space-5) var(--space-7) var(--space-5) 3.75rem;
  counter-increment: topic;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.topic-list li::before {
  position: absolute;
  top: var(--space-5);
  left: 1rem;
  color: var(--color-accent);
  content: counter(topic, decimal-leading-zero);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.topic-list li::after {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  color: var(--color-accent);
  content: "→";
  font-size: 1.55rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-0.35rem, -50%);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-out);
}

.topic-list li:hover,
.topic-list li:focus-within {
  background: var(--color-surface-alt);
}

.topic-list li:hover::after,
.topic-list li:focus-within::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.topic-list a {
  display: block;
  max-width: 38ch;
  color: var(--color-primary);
  font-family: var(--font-family-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.55rem);
  font-weight: 600;
  line-height: 1.28;
  text-decoration: none;
}

.topic-list a:visited {
  color: var(--color-primary);
}

.topic-list a:hover {
  color: var(--color-primary-hover);
}

/* Source-backed sign-up panel, shared by the home and newsletter pages. */
.newsletter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block: clamp(var(--space-8), 9vw, var(--space-9));
  border: 1px solid color-mix(in srgb, var(--color-on-band) 18%, transparent);
  border-radius: 1rem;
  background-color: var(--color-band);
  background-image: radial-gradient(circle, var(--color-band-pattern) 1px, transparent 1.3px);
  background-position: 1rem 1rem;
  background-size: 24px 24px;
  box-shadow: 0 12px 28px rgba(var(--shadow-color), 0.14);
  color: var(--color-on-band);
  padding: clamp(var(--space-6), 7vw, var(--space-8));
}

.newsletter::after {
  position: absolute;
  z-index: -1;
  top: 1.5rem;
  right: -2rem;
  width: clamp(9rem, 22vw, 16rem);
  height: clamp(8rem, 25vw, 18rem);
  border: 3px dotted color-mix(in srgb, var(--color-accent) 86%, transparent);
  border-left-color: transparent;
  border-radius: 52% 48% 58% 42%;
  content: "";
  opacity: 0.78;
  pointer-events: none;
  transform: rotate(22deg);
}

.newsletter > :where(h2, h3) {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--space-3);
  color: var(--color-on-band);
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.05;
}

.newsletter > p:not(.newsletter-placeholder) {
  position: relative;
  z-index: 1;
  max-width: 52ch;
  margin: 0 0 var(--space-5);
  color: var(--color-on-band-muted);
  font-family: var(--font-family-serif);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.45;
}

.newsletter-form {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.newsletter-form label {
  color: var(--color-on-band);
}

.newsletter-form input[type="email"],
.newsletter-form input[type="text"],
.newsletter-form textarea,
.newsletter-form select {
  border-color: color-mix(in srgb, var(--color-on-band) 54%, var(--color-border));
  border-radius: 0.55rem;
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--space-3) var(--space-4);
}

.newsletter-form input:disabled,
.newsletter-form button:disabled {
  opacity: 1;
}

.newsletter-form input[type="checkbox"] {
  accent-color: var(--color-accent);
}

.newsletter-form .field--checkbox label {
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.newsletter-form .field--checkbox a,
.newsletter-form .field--checkbox a:visited {
  color: var(--color-on-band);
}

.newsletter-form .btn--primary {
  align-self: start;
  justify-self: start;
  min-width: 8.5rem;
  margin-top: var(--space-2);
  width: fit-content;
}

.newsletter :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--color-on-band);
}

.newsletter-placeholder {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  margin: 0 0 var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-on-band) 35%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-on-band) 8%, transparent);
  color: var(--color-on-band-muted);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.site-footer {
  margin: clamp(var(--space-7), 8vw, var(--space-9)) clamp(var(--space-3), 3vw, var(--space-6)) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-surface-alt);
  padding-block: clamp(var(--space-5), 4vw, var(--space-7));
}

.site-footer .container {
  display: grid;
  gap: var(--space-5);
}

.site-footer nav {
  justify-content: flex-start;
  gap: var(--space-2) var(--space-5);
}

.site-footer nav a {
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.site-footer .container > p {
  margin: 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.topic-grid,
.topic-card {
  gap: var(--space-5);
}

.topic-card {
  border-color: var(--color-border);
  border-radius: 0.65rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .topic-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .container {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .site-footer nav {
    justify-content: flex-end;
  }

  .site-footer .container > p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479px) {
  .newsletter::after {
    right: -5rem;
    opacity: 0.45;
  }

  .newsletter-form .field--checkbox {
    grid-template-columns: auto minmax(0, 1fr);
  }
}