/* Article cover system: one visual metaphor, one editorial track, one issue number. */
.story-cover {
  --cover-paper: #f5f2ea;
  --cover-teal: #164b48;
  --cover-gold: #dfa822;
  --cover-red: #cf5550;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.11);
  color: var(--cover-paper);
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.075) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(145deg, #205f5a, #174b48 62%, #113f3c);
}
.story-cover::before {
  content: '';
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  right: -20%;
  top: -58%;
  border-radius: 50%;
  background: rgba(255,255,255,.035);
}
.cover-label,
.cover-issue,
.cover-sign {
  position: absolute;
  z-index: 3;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.cover-label { left: 16px; top: 15px; color: rgba(245,242,234,.82); }
.cover-issue { right: 16px; top: 15px; color: var(--cover-gold); }
.cover-sign {
  right: 15px;
  bottom: 13px;
  font-size: 12px;
  letter-spacing: -.4px;
  color: rgba(245,242,234,.78);
}
.cover-sign b { color: var(--cover-gold); font-weight: 800; }
.cover-art { position: absolute; z-index: 1; inset: 24% 10% 18%; transition: opacity .18s ease; }
.cover-art::before,
.cover-art::after { content: ''; position: absolute; display: block; box-sizing: border-box; }
.cover-canvas {
  display: none !important;
}
.cover-image {
  display: none !important;
}

/* Missing first step */
.cover-ladder .cover-art::before {
  left: 25%;
  bottom: 12%;
  width: 18%;
  height: 17%;
  border-radius: 4px 4px 0 0;
  background: var(--cover-paper);
  box-shadow:
    42px -18px 0 var(--cover-paper),
    84px -36px 0 var(--cover-paper),
    126px -54px 0 var(--cover-paper);
}
.cover-ladder .cover-art::after {
  left: 9%;
  bottom: 11%;
  width: 15%;
  height: 18%;
  border: 2px dashed rgba(245,242,234,.34);
  border-radius: 4px;
  background:
    linear-gradient(45deg, transparent 45%, var(--cover-red) 46%, var(--cover-red) 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--cover-red) 46%, var(--cover-red) 54%, transparent 55%);
}

/* Thinking routed into an answer card */
.cover-brain .cover-art {
  background:
    radial-gradient(circle at 54% 30%, var(--cover-gold) 0 3px, transparent 4px),
    radial-gradient(circle at 59% 50%, var(--cover-gold) 0 3px, transparent 4px),
    radial-gradient(circle at 54% 70%, var(--cover-gold) 0 3px, transparent 4px),
    linear-gradient(17deg, transparent 49%, rgba(245,242,234,.9) 50% 51%, transparent 52%) 44% 30% / 18% 28% no-repeat,
    linear-gradient(-2deg, transparent 49%, rgba(245,242,234,.9) 50% 51%, transparent 52%) 44% 50% / 18% 22% no-repeat,
    linear-gradient(-17deg, transparent 49%, rgba(245,242,234,.9) 50% 51%, transparent 52%) 44% 67% / 18% 28% no-repeat;
}
.cover-brain .cover-art::before {
  left: 12%; top: 10%; width: 34%; height: 72%;
  border: 5px solid #123f3c;
  border-radius: 50% 50% 38% 38%;
  background:
    radial-gradient(ellipse at 50% 32%, transparent 0 19%, var(--cover-gold) 20% 24%, transparent 25%),
    radial-gradient(ellipse at 50% 53%, transparent 0 22%, var(--cover-gold) 23% 27%, transparent 28%),
    var(--cover-paper);
}
.cover-brain .cover-art::after {
  right: 9%; top: 18%; width: 35%; height: 60%;
  border: 4px solid var(--cover-paper);
  border-radius: 18px;
  background:
    linear-gradient(var(--cover-gold),var(--cover-gold)) 20% 24% / 9px 9px no-repeat,
    linear-gradient(rgba(245,242,234,.88),rgba(245,242,234,.88)) 62% 25% / 44% 7px no-repeat,
    linear-gradient(rgba(245,242,234,.56),rgba(245,242,234,.56)) 53% 51% / 58% 7px no-repeat,
    linear-gradient(rgba(245,242,234,.42),rgba(245,242,234,.42)) 46% 72% / 45% 7px no-repeat,
    #123f3c;
}

/* Route tasks rather than crown one model */
.cover-routing .cover-art::before {
  left: 4%; top: 20%; width: 24%; height: 57%;
  border: 2px solid rgba(245,242,234,.82);
  border-radius: 12px;
  background: rgba(245,242,234,.1);
  box-shadow:
    92px 0 0 -1px #174b48, 92px 0 0 1px var(--cover-gold),
    184px 0 0 -1px #174b48, 184px 0 0 1px rgba(245,242,234,.82);
}
.cover-routing .cover-art::after {
  left: 13%; top: 47%; width: 73%; height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cover-paper) 0 18%, var(--cover-gold) 18% 73%, var(--cover-paper) 73%);
  box-shadow: 0 0 0 8px rgba(223,168,34,.08);
}

/* Two confident answers miss today on the timeline */
.cover-timeline .cover-art {
  left: 4%; right: 4%;
  background:
    radial-gradient(circle at 18% 50%, #d8d2c8 0 7px, transparent 8px),
    radial-gradient(circle at 51% 50%, #d8d2c8 0 7px, transparent 8px),
    radial-gradient(circle at 84% 50%, var(--cover-gold) 0 9px, transparent 10px),
    linear-gradient(90deg, rgba(245,242,234,.34), rgba(245,242,234,.85)) center / 82% 3px no-repeat;
}
.cover-timeline .cover-art::before,
.cover-timeline .cover-art::after {
  width: 20px; height: 20px; top: 57%;
  background:
    linear-gradient(45deg, transparent 44%, var(--cover-red) 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--cover-red) 45% 55%, transparent 56%);
}
.cover-timeline .cover-art::before { left: 32%; }
.cover-timeline .cover-art::after { left: 60%; }

/* AI colleague: one owner, three active work queues */
.cover-agent .cover-art::before {
  left: 17%; top: 12%; width: 25%; height: 65%;
  border-left: 11px solid var(--cover-paper);
  border-bottom: 11px solid var(--cover-paper);
  border-radius: 0 0 0 6px;
}
.cover-agent .cover-art::after {
  right: 13%; top: 18%; width: 34%; height: 13%;
  border: 3px solid var(--cover-paper); border-radius: 8px;
  background: linear-gradient(90deg, var(--cover-gold) 0 8px, transparent 8px);
  box-shadow:
    0 30px 0 -1px #174b48, 0 30px 0 1px rgba(245,242,234,.72),
    0 60px 0 -1px #174b48, 0 60px 0 1px rgba(245,242,234,.5);
}

/* Scattered notes reconnect into a reusable library */
.cover-network .cover-art {
  background:
    linear-gradient(27deg, transparent 49%, rgba(223,168,34,.85) 50% 51%, transparent 52%) 32% 20% / 38% 40% no-repeat,
    linear-gradient(-18deg, transparent 49%, rgba(223,168,34,.85) 50% 51%, transparent 52%) 32% 58% / 38% 35% no-repeat;
}
.cover-network .cover-art::before {
  left: 6%; top: 14%; width: 18%; height: 25%;
  border: 2px solid rgba(245,242,234,.8); border-radius: 5px; background: #205f5a;
  box-shadow:
    44px 42px 0 -1px #205f5a, 44px 42px 0 1px rgba(245,242,234,.65),
    3px 74px 0 -1px #205f5a, 3px 74px 0 1px rgba(245,242,234,.48);
}
.cover-network .cover-art::after {
  right: 10%; top: 17%; width: 30%; height: 62%;
  border: 3px solid var(--cover-paper); border-radius: 8px;
  background:
    linear-gradient(var(--cover-gold),var(--cover-gold)) 17% 24% / 10px 10px no-repeat,
    linear-gradient(rgba(245,242,234,.78),rgba(245,242,234,.78)) 63% 25% / 47% 7px no-repeat,
    linear-gradient(rgba(245,242,234,.48),rgba(245,242,234,.48)) 50% 52% / 62% 7px no-repeat,
    linear-gradient(rgba(245,242,234,.34),rgba(245,242,234,.34)) 42% 73% / 46% 7px no-repeat,
    #123f3c;
}

/* Rates rise while the old bond price falls */
.cover-bond .cover-art::before {
  left: 8%; top: 15%; width: 44%; height: 67%;
  border: 3px solid var(--cover-paper); border-radius: 9px;
  background:
    radial-gradient(circle at 19% 25%, var(--cover-gold) 0 8px, transparent 9px),
    linear-gradient(rgba(245,242,234,.82),rgba(245,242,234,.82)) 68% 25% / 44% 7px no-repeat,
    linear-gradient(rgba(245,242,234,.52),rgba(245,242,234,.52)) 50% 49% / 65% 6px no-repeat,
    linear-gradient(rgba(245,242,234,.36),rgba(245,242,234,.36)) 44% 69% / 53% 6px no-repeat,
    #123f3c;
}
.cover-bond .cover-art::after {
  right: 7%; top: 20%; width: 34%; height: 58%;
  background:
    linear-gradient(135deg, transparent 43%, var(--cover-gold) 44% 49%, transparent 50%) 0 0 / 100% 48% no-repeat,
    linear-gradient(45deg, transparent 43%, var(--cover-red) 44% 49%, transparent 50%) 0 100% / 100% 48% no-repeat;
}

/* Context-specific sizing */
.tile.has-cover .story-cover,
.card.has-cover .story-cover { margin-bottom: 18px; }
.tile.has-cover:not(.tile-lead) .story-cover { margin-top: -4px; }
.tile-lead.has-cover {
  grid-row: auto;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(190px,.92fr);
  gap: 24px;
  align-items: stretch;
}
.tile-lead .lead-copy { display: flex; flex-direction: column; min-width: 0; }
.tile-lead .story-cover { height: 100%; min-height: 260px; aspect-ratio: auto; }
.article-hero .story-cover { margin-top: 30px; }

@media (max-width: 980px) {
  .tile-lead.has-cover { grid-template-columns: minmax(0,1fr) minmax(230px,.78fr); }
}
@media (max-width: 620px) {
  .tile-lead.has-cover { display: flex; gap: 0; }
  .tile-lead .story-cover { order: -1; min-height: 0; height: auto; aspect-ratio: 16 / 9; margin-bottom: 20px; }
  .cover-label, .cover-issue { top: 13px; }
  .cover-label { left: 14px; }
  .cover-issue { right: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  a:hover .story-cover .cover-art,
  a:focus-visible .story-cover .cover-art { transform: translateY(-2px) scale(1.015); }
  .story-cover .cover-art { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
}

@media print {
  .story-cover { break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}