/* /more lead: supplement flag, headline, standfirst, price and Buy, the cover as a clipping. Phone: text left, cover right. */
.hero {
  margin-top: 16px; display: grid; column-gap: var(--gap); align-items: start;
  grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-areas: "f f" "k k" "h h" "s c" "b c" "l c" "n n";
}
.hero-t { display: contents; }
.flag { grid-area: f; display: flex; align-items: stretch; margin: 0 0 20px; border: 1px solid var(--ink); }
.flag-l { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; line-height: 1.25; background: var(--ledger-red); color: var(--newsprint); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.1em; white-space: nowrap; }
.flag-t { padding: 2px 12px 4px; font-family: var(--black); font-size: clamp(1.5rem, 7vw, 2.25rem); line-height: 1.15; }
.hero .kicker { grid-area: k; margin-bottom: 8px; }
.hero h1 { grid-area: h; margin-bottom: 16px; }
.hero .standfirst { grid-area: s; font-size: 1.0625rem; line-height: 1.35; }
.buy-row { grid-area: b; margin-top: 16px; }
.buy-row .buy { padding: 0 10px; }
.hero .l2 { grid-area: l; }
.cont { grid-area: n; margin-top: 6px; font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; }
.cont a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-clip { grid-area: c; margin: 0; }
.hero-clip .sheet { padding: 5px; background: var(--newsprint-deep); outline: 1px dashed var(--ink-soft); outline-offset: 4px; }
.hero-clip .sh-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 40px; margin-top: 28px; }
  .hero .standfirst { font-size: 1.5rem; }
  .buy-row .buy { padding: 0 22px; max-width: 360px; }
  .hero-clip { transform: rotate(1.2deg); }
  .hero-clip .sh-cap { position: static; width: auto; height: auto; clip-path: none; margin-top: 12px; }
}
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    grid-template-areas: "f f f f f f f f f f f f" "k k k k k k k k . c c c" "h h h h h h h h . c c c" "s s s s s s . . . c c c" "b b b b b . . . . c c c" "l l l l l . . . . c c c" "n n n n n . . . . c c c";
  }
  .hero-clip { max-width: 400px; justify-self: end; }
  .hero .standfirst { font-size: var(--fs-sf); }
  .buy-row { margin-top: 32px; }
  .buy-row .buy { min-height: 56px; }
}
@media (hover: hover) and (pointer: fine) { .cont a:hover { color: var(--ledger-red); } }