/* P1 lead story: kicker, h1, photo, standfirst, buy row, teasers, show-through. */
.front {
  position: relative; isolation: isolate; display: grid; padding-top: 20px;
  grid-template-columns: minmax(170px, 46%) minmax(0, 1fr); column-gap: var(--gap);
  grid-template-areas: "k k" "h h" "p s" "p t" "b b" "c c";
  grid-template-rows: auto auto auto 1fr auto auto;
}
.fr-k { grid-area: k; margin: 0 0 8px; }
.fr-h { grid-area: h; margin-bottom: 12px; }
.fr-p { display: contents; }
.photo-frame { grid-area: p; }
.fr-p figcaption { grid-area: t; align-self: start; margin-top: 10px; }
.fr-s { grid-area: s; align-self: start; font-size: 1.0625rem; line-height: 1.35; }
.fr-rule { display: block; grid-area: p; left: auto; right: calc(var(--gap) / -2); }
.fr-b { grid-area: b; margin-top: 14px; }
.fr-c { grid-area: c; margin-top: 14px; text-align: right; font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; }
.teasers { display: none; }
.photo-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--newsprint-deep); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame::after { content: ""; position: absolute; inset: 0; background: var(--newsprint); opacity: 0; pointer-events: none; }
.fr-p figcaption { font-size: 0.8125rem; line-height: 1.3; }
.fr-c a { display: inline-flex; align-items: center; min-height: 44px; }
.buynote { margin-top: 10px; font-size: 0.8125rem; color: var(--ink-soft); }
.bn-x { display: none; }
.show-through {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none;
  transform: scaleX(-1); color: rgb(23 21 18 / 0.04); filter: blur(1px); font-size: 1.25rem; line-height: 1.3;
  columns: 2; column-gap: 24px; padding-top: 24px;
}
.show-through p { margin-bottom: 1em; }
@media (min-width: 768px) and (max-width: 1023px) {
  .front { grid-template-areas: "k k" "h h" "p s" "p b" "p t" "c c"; grid-template-rows: auto auto auto auto 1fr auto; }
  .fr-s { font-size: 1.5rem; }
  .fr-b { margin-top: 24px; }
  .fr-p figcaption { font-size: var(--fs-cap); }
}
@media (max-width: 359px) {
  .front { grid-template-columns: 1fr; grid-template-areas: "k" "h" "p" "s" "t" "b" "c"; grid-template-rows: none; }
  .fr-rule { display: none; }
  .fr-s { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .front { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; grid-template-rows: none; padding-top: 40px; }
  .fr-k { grid-area: auto; grid-column: 1 / 8; grid-row: 1; }
  .fr-h { grid-area: auto; grid-column: 1 / 8; grid-row: 2; margin-bottom: 32px; }
  .fr-s { grid-area: auto; grid-column: 1 / 7; grid-row: 3; font-size: var(--fs-sf); }
  .fr-b { grid-area: auto; grid-column: 1 / 8; grid-row: 4; margin-top: 36px; display: flex; align-items: center; gap: 24px; }
  .fr-t { grid-column: 1 / 8; grid-row: 5; }
  .fr-p { display: block; grid-column: 8 / 13; grid-row: 1 / 7; align-self: start; justify-self: end; width: 100%; max-width: 440px; }
  .photo-frame { grid-area: auto; }
  .fr-p figcaption { grid-area: auto; }
  .fr-rule { grid-area: auto; grid-column: 8 / 13; grid-row: 1 / 7; left: calc(100% - 440px - var(--gap) / 2 - 12px); right: auto; }
  .fr-c { display: none; }
  .fr-p figcaption { font-size: var(--fs-cap); margin-top: 12px; }
  .buynote { margin: 0; max-width: 24ch; font-size: var(--fs-cap); }
  .bn-x { display: inline; }
  .teasers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid var(--ink); }
  .teasers a { display: block; padding: 20px 20px 0; text-decoration: none; font-size: 1rem; line-height: 1.4; border-left: 1px solid var(--rule); }
  .teasers a:first-child { padding-left: 0; border-left: 0; }
  .teasers b { display: block; font-size: 1.125rem; font-variation-settings: "opsz" 36; }
  .teasers .pg { display: block; margin-top: 8px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ledger-red); }
  .show-through { font-size: 1.75rem; columns: 3; }
}
