@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Bruno+Ace&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

:root {
  --paper: #c9cbc6;
  --paper-light: #e9e9e2;
  --ink: #141414;
  --muted: #454845;
  --line: #989b95;
  --green: #56c785;
  --green-soft: #a7ddbf;
  --blue: #244db5;
  /* Legacy names keep the base stylesheet in the same blue/green palette. */
  --orange: var(--green);
  --yellow: var(--green-soft);
}

body {
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  line-height: 1.55;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(20,20,20,.075) .7px, transparent .8px), linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.025));
  background-size: 7px 7px, 100% 100%;
}
::selection { background: var(--yellow); color: var(--ink); }
.skip-link { background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); font-weight: 800; }

/* A typographic masthead: no decorative header graphics. */
.site-header {
  border-bottom: 3px solid var(--ink);
  background-color: #afb5ae;
  background-image:
    radial-gradient(rgba(20, 20, 20, .12) .6px, transparent .9px),
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 48%, rgba(20, 20, 20, .04));
  background-size: 6px 6px, 100% 100%;
}
.topline {
  width: 100%; min-height: 40px; padding-inline: max(36px, calc((100vw - var(--max)) / 2));
  background: var(--ink); color: var(--paper-light); border: 0;
  font-size: 10px; letter-spacing: .11em;
}
.topline a { color: var(--yellow); }
.eyebrow, .lead-image::before, .article-category, .topic-index, .filter-label, .archive-count {
  font-family: "Silkscreen", "DM Mono", monospace;
  letter-spacing: -.025em;
}
.eyebrow { font-size: 11px; }
.article-category { font-size: 11px; }
.masthead { min-height: 160px; }
.brand {
  display: inline-block;
  font: 900 clamp(60px, 7.2vw, 94px)/1 "Bruno Ace", "Trebuchet MS", sans-serif;
  font-synthesis: weight;
  -webkit-text-stroke: .03em currentColor;
  letter-spacing: -.055em; transform: translateY(4px);
  animation: td-logo-boot .85s steps(10, end) both, td-logo-glitch 6s steps(1, end) infinite;
}
.brand span { display: none; }
.brand::after {
  content: "";
  display: inline-block;
  width: clamp(20px, .45em, 40px);
  height: clamp(6px, .11em, 10px);
  margin-left: .09em;
  vertical-align: -.04em;
  background: var(--green);
  box-shadow: 0 3px 0 var(--ink);
  animation: td-logo-cursor 1.35s steps(1, end) infinite;
}
.brand:hover, .brand:focus-visible { text-shadow: 2px 0 var(--blue), -2px 0 var(--green); }
@keyframes td-logo-boot {
  0% { clip-path: inset(0 100% 0 0); opacity: .75; }
  75% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes td-logo-glitch {
  0%, 87.9%, 92%, 100% { text-shadow: none; }
  88% { text-shadow: 6px 0 var(--blue), -6px 0 var(--green); }
  89% { text-shadow: -7px 1px var(--blue), 5px -1px var(--green); }
  89.8% { text-shadow: none; }
  90.4% { text-shadow: 7px -1px var(--blue), -5px 1px var(--green); }
  91.3% { text-shadow: -4px 0 var(--blue), 6px 0 var(--green); }
}
@keyframes td-logo-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .15; }
}
.masthead p {
  padding: 14px 0 14px 19px; border-left: 3px solid var(--ink);
  font-weight: 500; line-height: 1.6; color: var(--blue);
}
.nav-band { border-block: 3px solid var(--ink); background: var(--blue); }
.nav-inner { min-height: 59px; }
.nav-inner nav a {
  border-right: 2px solid var(--ink); font: 700 11px/1 "DM Mono", monospace;
  letter-spacing: .05em; padding-inline: 23px; color: white;
}
.nav-inner nav a:first-child { border-left: 2px solid var(--ink); }
.nav-inner nav a:hover, .nav-inner nav a[aria-current] { background: var(--green); color: var(--ink); }
.header-search { align-self: stretch; min-width: 240px; padding-inline: 14px 4px; border-left: 3px solid var(--ink); background: var(--paper-light); }
.header-search input { font-family: "DM Mono", monospace; font-size: 11px; }
.header-search button { font-weight: 900; }

/* The cover story borrows the scale of a 1970s magazine, but keeps one clear action. */
.lead {
  grid-template-columns: 45% 55%; margin-top: 42px; margin-bottom: 76px;
  padding: 0; border: 3px solid var(--ink); background: var(--paper-light);
  box-shadow: 12px 12px 0 var(--blue);
}
.lead-copy { padding: clamp(30px, 3.7vw, 55px); border-right: 3px solid var(--ink); }
.lead .eyebrow, .page-hero .eyebrow {
  width: 100%; display: flex; align-items: center; padding-bottom: 13px;
  border-bottom: 2px solid var(--ink); font-weight: 500; color: var(--ink);
}
.accent-square { width: 11px; height: 11px; flex: 0 0 auto; background: var(--orange); border: 1px solid var(--ink); }
.lead h1 {
  margin-top: 18px; font-size: clamp(60px, 6.9vw, 100px); font-weight: 700;
  line-height: .88; letter-spacing: -.055em;
}
.lead-dek { font-size: clamp(18px, 1.55vw, 23px); font-weight: 500; line-height: 1.36; }
.meta { width: 100%; padding-top: 13px; border-top: 1px solid var(--ink); color: var(--ink); }
.button-primary, .button-outline {
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  font: 800 11px/1.2 "Libre Franklin", sans-serif;
  transition: transform .14s, box-shadow .14s, background .14s, color .14s;
}
.button-primary { background: var(--orange); }
.button-primary:hover, .button-outline:hover {
  transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink);
  background: var(--yellow); color: var(--ink);
}
.lead-image { position: relative; margin: 0; overflow: hidden; background: var(--blue); }
.lead-image::before {
  content: "TD / FIELD NOTE 01"; position: absolute; z-index: 2; top: 18px; left: 18px;
  padding: 8px 10px; border: 2px solid var(--ink); background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink); font: 700 11px/1 "Silkscreen", "DM Mono", monospace;
}
.lead-image img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; filter: contrast(1.07) saturate(.84); }
.lead-image figcaption {
  position: absolute; right: 22px; bottom: 22px; left: 22px; z-index: 2;
  width: fit-content; max-width: calc(100% - 44px); padding: 10px 13px;
  border: 2px solid var(--ink); background: var(--paper-light);
  box-shadow: 4px 4px 0 var(--orange); color: var(--ink);
}

.signal-strip { border-block: 3px solid var(--ink); background: var(--orange); }
.signal-strip .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.signal-strip span:nth-child(2) { background: var(--blue); color: white; }
.signal-strip span {
  display: grid; place-items: center; min-height: 58px; padding: 10px;
  border-right: 2px solid var(--ink); font: 400 clamp(23px, 2.5vw, 38px)/.9 "League Gothic", Impact, sans-serif;
  letter-spacing: .05em; text-align: center;
}
.signal-strip span:first-child { border-left: 2px solid var(--ink); }

/* The article index stays scan-friendly; thick rules give it the old print rhythm. */
.section-top { margin-bottom: 37px; }
.section-top .eyebrow, .editorial-copy .eyebrow { color: var(--blue); }
.section-top h2 {
  font: 400 clamp(64px, 6.9vw, 98px)/.84 "League Gothic", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .015em;
}
.text-link { border-bottom: 3px solid var(--ink); font-family: "DM Mono", monospace; font-size: 11px; }
.text-link:hover { color: var(--blue); border-color: var(--blue); }
.article-list { border: 3px solid var(--ink); background: var(--paper-light); }
.article-row {
  grid-template-columns: 20% 1fr 135px; align-items: center; gap: 24px;
  padding: 24px 26px; border-bottom: 2px solid var(--ink); background: var(--paper-light);
  transition: background .14s;
}
.article-row:nth-child(even) { background: #dde0d9; }
.article-row:hover { background: var(--yellow); }
.article-row:last-child { border-bottom: 0; }
.article-category {
  width: fit-content; max-width: 100%; padding: 7px 9px; border: 1px solid var(--ink);
  background: var(--blue); color: white; box-shadow: 3px 3px 0 var(--ink);
  font-size: 11px; line-height: 1.25;
}
.article-row h3 { font-size: clamp(25px, 2.2vw, 33px); font-weight: 700; }
.article-row p { color: var(--muted); }
.row-end { align-self: stretch; align-items: center; color: var(--ink); }
.row-end span { display: grid; place-items: center; width: 33px; height: 33px; border: 2px solid var(--ink); background: var(--orange); }

/* Brighter editorial cards restore the prior graphic confidence. */
.topic-section { border-block: 4px solid var(--ink); background: var(--ink); }
.topic-section .section-top .eyebrow { color: var(--yellow); }
.topic-section .section-top h2 { color: var(--yellow); }
.topic-section .section-intro { color: var(--paper-light); }
.topic-grid { gap: 20px; border: 0; }
.topic-card {
  min-height: 300px; padding: 23px; border: 3px solid var(--ink);
  background: var(--paper-light); color: var(--ink); box-shadow: 7px 7px 0 var(--orange);
  transition: transform .14s, box-shadow .14s, background .14s;
}
.topic-card:nth-child(2) { box-shadow: 7px 7px 0 var(--yellow); }
.topic-card:nth-child(3) { box-shadow: 7px 7px 0 var(--blue); }
.topic-card:nth-child(4) { box-shadow: 7px 7px 0 var(--orange); }
.topic-card:hover { transform: translate(5px, 5px); box-shadow: 2px 2px 0 var(--orange); background: var(--yellow); }
.topic-card .topic-index { display: inline-block; width: fit-content; padding: 6px 8px; border: 2px solid var(--ink); background: var(--orange); color: var(--ink); }
.topic-card h3 { font-weight: 700; margin-top: 44px; }
.topic-card p { color: var(--muted); }
.topic-card .topic-arrow { color: var(--ink); }
.bottom-link { color: var(--paper-light); border-color: var(--paper-light); }

.editorial { gap: 8%; }
.editorial figure { border: 3px solid var(--ink); background: var(--paper-light); box-shadow: 10px 10px 0 var(--orange); }
.editorial figure img { filter: contrast(1.06) saturate(.88); }
.editorial figcaption { padding: 10px 13px; border-top: 2px solid var(--ink); color: var(--ink); }
.editorial-copy { padding-left: 20px; border-left: 4px solid var(--blue); }
.editorial h2 { font-size: clamp(50px, 4.9vw, 74px); font-weight: 700; line-height: .93; }
.editorial-copy>p:not(.eyebrow) { font-size: 21px; }
.button-outline { background: var(--yellow); }

/* A single strong back-page, not an ornamental dashboard. */
.closing { border-block: 4px solid var(--ink); background: var(--blue); color: white; }
.closing-inner { padding-block: 65px; }
.closing .eyebrow { color: var(--yellow); }
.closing h2 {
  max-width: 790px; color: var(--yellow);
  font: 400 clamp(68px, 7.2vw, 112px)/.83 "League Gothic", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .015em;
}
.closing p:not(.eyebrow) { font-size: 19px; }
.closing .button-primary { background: var(--orange); color: var(--ink); }
.site-footer { border-top: 0; background: var(--paper-light); color: var(--ink); }
.footer-brand { font: 900 clamp(30px, 3.1vw, 41px)/1.1 "Bruno Ace", "Trebuchet MS", sans-serif; font-synthesis: weight; -webkit-text-stroke: .03em currentColor; letter-spacing: -.055em; }
.footer-main p { color: var(--muted); }
.footer-main nav a, .footer-bottom a { color: var(--ink); }
.footer-bottom { border-top: 3px solid var(--ink); color: var(--muted); }

/* The same language extends to browse, topic and about pages. */
.page-hero { padding-block: 67px 49px; border-bottom: 4px solid var(--ink); }
.page-hero .eyebrow { max-width: 530px; }
.page-hero h1 { max-width: 1050px; font-weight: 700; font-size: clamp(65px, 7.6vw, 113px); line-height: .89; }
.page-hero>p:last-child { max-width: 780px; font-size: 22px; }
.archive-tools { padding-block: 30px; border-bottom: 3px solid var(--ink); }
.archive-search { min-width: min(100%, 400px); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--blue); }
.archive-search button { background: var(--orange); color: var(--ink); }
.filter-button { padding: 10px 12px; border: 2px solid var(--ink); background: var(--paper-light); box-shadow: 2px 2px 0 var(--ink); }
.filter-button:hover, .filter-button.active { background: var(--yellow); color: var(--ink); }
.archive-count { margin-block: 21px; color: var(--ink); }
.archive-list .article-row { grid-template-columns: 22% 1fr 40px; }
.archive-list .row-end { font-size: 24px; font-weight: 700; }
.topic-page-list { gap: 24px; }
.topic-entry { position: relative; border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--blue); }
.topic-entry:nth-child(even) { box-shadow: 7px 7px 0 var(--orange); }
.topic-entry::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--orange); border-bottom: 2px solid var(--ink); }
.topic-entry:nth-child(even)::before { background: var(--yellow); }
.topic-entry h2 { font-weight: 700; font-size: 43px; }
.topic-entry .topic-index { color: var(--blue); }
.topic-entry>a { border-bottom-width: 3px; }
.topic-entry>a:hover { color: var(--blue); border-color: var(--blue); }
.about-aside { align-self: start; padding: 18px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 6px 6px 0 var(--blue); }
.about-aside p { margin-top: 0; }
.about-article h2 { font-weight: 700; border-bottom: 3px solid var(--ink); padding-bottom: 9px; }

/* Reading and interface text use one consistent technical mono face. */
.topline, .masthead p, .nav-inner nav a, .header-search input,
.meta, .row-end, figcaption, .topic-meta, .footer-bottom,
.text-link, .button-primary, .button-outline, .filter-button,
.about-aside p, .topic-meta a, .archive-search button,
.lead-dek, .section-intro, .editorial-copy > p:not(.eyebrow),
.closing p:not(.eyebrow), .footer-main p, .page-hero > p:last-child,
.topic-entry p, .about-article p, .empty-state {
  font-family: "IBM Plex Mono", monospace;
}
.lead-dek { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.section-intro, .closing p:not(.eyebrow), .page-hero > p:last-child { font-size: 16px; line-height: 1.55; }
.editorial-copy > p:not(.eyebrow), .topic-entry p, .about-article p { font-size: 16px; line-height: 1.65; }
.footer-main p { font-size: 13px; line-height: 1.6; }

/* Audiowide brings the retro-tech voice to every editorial heading. */
.lead h1,
.page-hero h1,
.section-top h2,
.article-row h3,
.topic-card h3,
.editorial h2,
.closing h2,
.topic-entry h2,
.about-article h2,
h1, h2, h3, h4, h5, h6 {
  font-family: "Audiowide", "Trebuchet MS", sans-serif;
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
}
.lead h1 { font-size: clamp(44px, 4.3vw, 62px); line-height: 1.08; letter-spacing: -.055em; }
.page-hero h1 { font-size: clamp(49px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -.055em; }
.section-top h2 { font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -.06em; }
.article-row h3 { font-size: clamp(20px, 1.95vw, 27px); line-height: 1.18; letter-spacing: -.04em; }
.topic-card h3 { font-size: 24px; line-height: 1.16; letter-spacing: -.045em; }
.editorial h2 { font-size: clamp(42px, 4.2vw, 60px); line-height: 1.07; letter-spacing: -.055em; }
.closing h2 { font-size: clamp(49px, 5.7vw, 78px); line-height: 1.04; letter-spacing: -.06em; }
.topic-entry h2, .about-article h2 { font-size: 34px; line-height: 1.18; letter-spacing: -.045em; }

@media (max-width: 1000px) {
  .masthead { min-height: 132px; }
  .brand { font-size: clamp(52px, 6.4vw, 74px); }
  .lead { grid-template-columns: 47% 53%; }
  .lead-copy { padding: 30px; }
  .lead h1 { font-size: clamp(42px, 5.7vw, 57px); }
  .article-row { grid-template-columns: 23% 1fr 95px; }
}
@media (max-width: 700px) {
  .topline { min-height: 37px; padding-inline: 18px; }
  .topline span { max-width: none; }
  .masthead { min-height: 100px; }
  .brand { font-size: clamp(36px, 9.5vw, 47px); transform: translateY(2px); }
  .nav-inner { min-height: 0; }
  .nav-inner nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
  .nav-inner nav a {
    grid-column: span 2; min-height: 48px; padding-inline: 4px;
    justify-content: center; border-bottom: 2px solid var(--ink);
    font-size: 10px; text-align: center; white-space: normal;
  }
  .nav-inner nav a:nth-child(n+4) { grid-column: span 3; }
  .nav-inner nav a:last-child { display: flex; }
  .nav-inner nav a:first-child { border-left: 2px solid var(--ink); }
  .header-search { min-width: 0; border-left: 0; border-top: 3px solid var(--ink); padding-inline: 12px; }
  .lead { display: flex; flex-direction: column; margin-top: 22px; margin-bottom: 54px; box-shadow: 7px 7px 0 var(--blue); }
  .lead-copy { padding: 25px; border-right: 0; border-bottom: 3px solid var(--ink); }
  .lead h1 { font-size: clamp(36px, 9.5vw, 51px); }
  .lead-dek { font-size: 16px; }
  .lead-image { margin: 0; }
  .lead-image img { min-height: 0; height: auto; aspect-ratio: 1.12; }
  .signal-strip .wrap { width: 100%; }
  .signal-strip span { min-height: 54px; font-size: clamp(16px, 5vw, 24px); border-right: 1px solid var(--ink); padding-inline: 5px; }
  .signal-strip span:first-child { border-left: 0; }
  .section-top h2 { font-size: clamp(35px, 8vw, 48px); }
  .article-row, .archive-list .article-row { grid-template-columns: 1fr 34px; gap: 12px; padding: 20px; }
  .article-category { grid-column: 1 / -1; }
  .article-row h3 { font-size: 22px; }
  .row-end, .archive-list .row-end { grid-column: 2; grid-row: 2; }
  .topic-grid { grid-template-columns: repeat(2, 1fr); gap: 17px; }
  .topic-card { min-height: 270px; padding: 16px; box-shadow: 5px 5px 0 var(--orange); }
  .topic-card h3 { font-size: 21px; margin-top: 28px; }
  .editorial-copy { padding-left: 17px; }
  .editorial h2 { font-size: clamp(37px, 8vw, 48px); }
  .closing h2 { font-size: clamp(42px, 9vw, 55px); }
  .page-hero h1 { font-size: clamp(39px, 9vw, 59px); }
  .page-hero>p:last-child { font-size: 16px; }
  .topic-page-list { gap: 18px; }
  .topic-entry h2 { font-size: 29px; }
}
@media (max-width: 430px) {
  .brand { font-size: clamp(32px, 9.2vw, 40px); }
  .signal-strip span { font-size: 17px; }
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card { min-height: 210px; }
  .topic-card h3 { margin-top: 22px; }
  .section-top h2 { font-size: 35px; }
  .editorial h2 { font-size: 37px; }
  .closing h2 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .brand, .brand::after { animation: none !important; }
}

/* Illustrated subject cards keep the print texture large and legible. */
.topic-card {
  min-height: 0;
  padding: 0 0 20px;
  overflow: hidden;
}
.topic-card-image {
  width: 100%;
  aspect-ratio: 1.3;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-bottom: 3px solid var(--ink);
  filter: contrast(1.04) saturate(.88);
}
.topic-card .topic-index { margin: 18px 18px 0; }
.topic-card h3 { margin: 16px 18px 12px; }
.topic-card p { margin: 0 18px 52px; }
.topic-card .topic-arrow { right: 18px; bottom: 12px; }

/* Mobile navigation is enhanced only after its button is in place. */
.menu-toggle { display: none; }
.back-to-top {
  position: fixed;
  z-index: 50;
  right: clamp(16px, 2.8vw, 40px);
  bottom: clamp(16px, 2.8vw, 40px);
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 14px;
  border: 3px solid var(--ink);
  background: var(--green);
  box-shadow: 4px 4px 0 var(--blue);
  color: var(--ink);
  font: 700 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-decoration: none;
}
.back-to-top[hidden] { display: none; }
.back-to-top span:first-child { font-size: 23px; line-height: .8; }
.back-to-top:hover, .back-to-top:focus-visible {
  background: var(--paper-light);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--blue);
}

@media (max-width: 700px) {
  .nav-inner.menu-enhanced { display: block; }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 700 13px/1 "IBM Plex Mono", monospace;
    letter-spacing: .09em;
  }
  .menu-toggle-icon {
    display: grid;
    gap: 5px;
    width: 27px;
  }
  .menu-toggle-icon span {
    display: block;
    height: 3px;
    background: var(--ink);
    transition: transform .18s ease, opacity .18s ease;
  }
  .menu-open .menu-toggle { background: var(--green); }
  .menu-open .menu-toggle-icon span:first-child { transform: translateY(8px) rotate(45deg); }
  .menu-open .menu-toggle-icon span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle-icon span:last-child { transform: translateY(-8px) rotate(-45deg); }
  .nav-inner.menu-enhanced nav { display: none; }
  .nav-inner.menu-enhanced.menu-open nav {
    display: flex;
    flex-direction: column;
    border-top: 3px solid var(--ink);
  }
  .nav-inner.menu-enhanced nav a,
  .nav-inner.menu-enhanced nav a:first-child {
    flex: none;
    justify-content: flex-start;
    min-height: 47px;
    padding: 0 15px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    text-align: left;
    font-size: 12px;
  }
  .nav-inner.menu-enhanced nav a:last-child { display: flex; }
  .nav-inner.menu-enhanced .header-search { border-top: 3px solid var(--ink); }
  .topic-card { min-height: 0; padding: 0 0 18px; }
  .topic-card h3 { margin: 15px 15px 10px; font-size: 20px; }
  .topic-card .topic-index { margin: 15px 15px 0; }
  .topic-card p { margin: 0 15px 48px; }
  .topic-card-image { aspect-ratio: 1.25; }
}
@media (max-width: 430px) {
  .topic-card { min-height: 0; }
  .topic-card h3 { margin-top: 15px; }
  .topic-card-image { aspect-ratio: 1.55; }
}