/* Generated file: edit the design source, not this copy. */
/* the topic's head: its number slot and drawing, like the tile on the homepage, at full size */
  .topic-head { padding: clamp(40px, 6vw, 72px) 24px clamp(28px, 4vw, 44px); }
  .crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .crumbs a { color: var(--accent); text-underline-offset: 4px; display: inline-block; padding-block: 6px; }   /* at least 24 px to tap (WCAG 2.2) */
  .topic-title { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 24px; align-items: center; margin-top: 22px; }
  .topic-title .n { width: 76px; height: 76px; display: grid; place-items: center; background: var(--ink); font: 400 1.75rem/1 var(--f-pixel); color: var(--amber); }
  .topic-title h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; text-wrap: balance; }
  .topic-title .icon { width: 96px; height: 96px; color: var(--fg); }
  .topic-title .icon .c { stroke: var(--coral); }
  .topic-title .icon .f { fill: var(--coral); stroke: none; }
  .topic-head .dek { margin-top: 18px; font-size: 1.25rem; color: var(--muted); max-width: 52ch; }
  .topic-head .count { margin-top: 10px; font: 600 .9375rem/1.4 var(--f-title); color: var(--muted); }
  /* the topic's mage does its job from the homepage next to the drawing, standing on a soft shadow like in the hero */
  .topic-art { display: flex; align-items: flex-end; gap: 4px; }
  /* negative margins: the sprite frame has empty space on both sides of the mage */
  .topic-art .mage { position: relative; height: 128px; margin: 0 -40px 0 -48px; background-repeat: no-repeat; }
  .topic-art .mage::after { content: ""; position: absolute; left: 51%; bottom: 0; width: 34%; height: 9%; transform: translate(-50%, 40%); border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 18, 20, .3), rgba(26, 18, 20, 0)); }
  :root[data-theme="dark"] .topic-art .mage::after { background: radial-gradient(closest-side, rgba(255, 158, 31, .4), rgba(255, 158, 31, 0)); }
  /* phones: the drawing goes and the mage moves down next to the line and count, so long titles keep the full width */
  @media (max-width: 640px) {
    .topic-head { position: relative; }
    .topic-title { grid-template-columns: auto 1fr; }
    .topic-title .icon { display: none; }
    .topic-art { position: absolute; right: 24px; bottom: clamp(28px, 4vw, 44px); }
    .topic-art .mage { height: 92px; margin: 0 -30px 0 -34px; }
    .topic-head .dek { max-width: calc(100% - 92px); }
    .topic-title .n { width: 56px; height: 56px; font-size: 1.25rem; }
  }

  .list { padding-bottom: clamp(64px, 8vw, 110px); }
  /* no articles with this tag yet */
  .none { display: flex; align-items: center; gap: 14px; padding: 28px; background: var(--surface); border: 2px dashed var(--rule); color: var(--muted); }
  .none .mage { position: static; flex: none; height: 110px; }

  /* the other topics: dashed chips, in shared/site.css (pages use them too) */