/* The front page: the lead beside "The Latest.", then one row per section. */
main { overflow-x: clip; }
/* The live front page sits closer under the nav than other pages do. */
main:has(> .front-page) { padding-top: var(--space-5); }

.front-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.front-lead--solo { grid-template-columns: minmax(0, 1fr); }

.front-latest { padding-left: var(--space-5); border-left: 2px dotted var(--line-strong); }
.front-latest .section-header { padding-bottom: var(--space-2); }
.front-latest .section-header h2 { font: italic 500 2rem / 1 var(--font-display); letter-spacing: -0.03em; }
.front-latest .period { color: var(--blue); }
.front-latest .story-card--row { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.front-latest .story-card--row:last-of-type { padding-bottom: 0; border-bottom: 0; }
.front-latest .story-card--row h2 {
  color: var(--ink-1);
  font: 600 1.1875rem / 1.2 var(--font-sans);
  letter-spacing: -0.025em;
}
.front-latest .story-card--row .story-card-main:hover h2 { color: var(--blue-deep); }
.front-latest .story-card-dek {
  display: -webkit-box;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--ink-2);
  font: 400 1.1875rem / 1.2 var(--font-sans);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.front-latest .story-card--row .byline { margin-top: var(--space-1); color: var(--blue-deep); }

/* The app card follows "The Latest." and is no part of it: the rows keep their count and their
   deks, and the column may run below the lead. About 240px tall at the rail's width, it grows with
   its text rather than clip it; the screenshot leans in from the right, cropped by the card. */
.app-card {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--editorial-field);
  color: var(--field-ink);
}
.front-lead--solo > .app-card { max-width: 30rem; margin-top: 0; }
.app-card-copy { position: relative; z-index: 1; max-width: 60%; }
.app-card .kicker { color: var(--field-dim); }
.app-card h2 { margin: var(--space-3) 0; font: 500 1.875rem / 1.05 var(--font-display); letter-spacing: -0.025em; }
.app-card-copy > p:not(.kicker) { margin: 0; font: var(--text-ui-sm); color: var(--field-dim); }
.app-card-action {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--paper-0);
  color: var(--blue-ink);
  font: 600 0.8125rem / 1.2 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.app-card-action:hover { color: var(--blue-deep); background: var(--field-dim); }
.app-card-action:focus-visible { outline-color: var(--field-ink); }
.app-card-device {
  position: absolute;
  top: var(--space-5);
  right: -1.5rem;
  width: clamp(6rem, 34%, 8.5rem);
  padding: 4px;
  border-radius: 20px;
  background: #101114;
  transform: rotate(10deg);
  transform-origin: top left;
}
.app-card-device img { display: block; width: 100%; height: auto; border-radius: 16px; }

.front-section {
  display: grid;
  grid-template-columns: var(--section-rail) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink-1);
}
.front-section > .section-header { display: block; }
.front-section > .section-header h2 { width: fit-content; max-width: 100%; font: 600 1.4rem / 1.1 var(--font-sans); }
.front-section > .section-header .text-link {
  display: inline-block;
  margin-top: var(--space-4);
  color: var(--ink-2);
  font: var(--text-caption);
}
.front-section .story-grid {
  grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.front-section .story-grid > li + li { padding-left: var(--space-5); border-left: 2px dotted var(--line); }
.front-section .story-grid > li:first-child h2 { font-size: clamp(1.9rem, 3vw, 2.65rem); }
.front-section .story-card p:not(.byline) { font: var(--text-ui-sm); }
.front-section .story-card--typographic { padding: var(--space-5); }

/* Soft washes behind the lead's headline, "The Latest." and each row's name. */
.front-latest .section-header,
.front-section > .section-header h2,
.story-card--feature h1 { position: relative; }
.story-card--feature .story-card-copy { isolation: isolate; overflow: clip; }
.front-latest .section-header::before,
.front-section > .section-header h2::before,
.story-card--feature h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -350px;
  left: -500px;
  width: 1000px;
  height: 700px;
  pointer-events: none;
}
.story-card--feature h1::before {
  transform: translate(0.25em, 0.5em);
  background: radial-gradient(
    ellipse var(--radial-lead-size),
    rgb(var(--radial-lead) / 0.16),
    rgb(var(--radial-lead) / 0.053) 40%,
    rgb(var(--radial-lead) / 0) 100%
  );
}
.front-latest .section-header::before {
  transform: translate(4.5rem, 1rem);
  background: radial-gradient(
    ellipse var(--radial-latest-size),
    rgb(var(--radial-latest) / 0.14),
    rgb(var(--radial-latest) / 0.047) 40%,
    rgb(var(--radial-latest) / 0) 100%
  );
}
.front-section > .section-header h2::before {
  top: calc(50% - 350px);
  left: calc(50% - 500px);
  transform: translate(24px, 18px);
  background: radial-gradient(
    ellipse var(--radial-section-size),
    color-mix(in srgb, var(--tone) 11%, transparent),
    color-mix(in srgb, var(--tone) 3.7%, transparent) 40%,
    transparent 100%
  );
}

@media (max-width: 1080px) {
  .front-lead { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); }
  .front-lead--solo { grid-template-columns: minmax(0, 1fr); }
  .front-section { grid-template-columns: minmax(0, 1fr); }
  .front-section > .section-header { display: flex; }
  .front-section > .section-header h2::before { transform: none; }
  .front-section > .section-header .text-link { margin: 0; }
}

@media (max-width: 736px) {
  .front-lead { grid-template-columns: minmax(0, 1fr); }
  .front-latest { padding: var(--space-5) 0 0; border-top: 2px dotted var(--line-strong); border-left: 0; }
  .app-card-device { right: -2.25rem; }
  .front-section .story-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .front-section .story-grid > li + li { padding: var(--space-6) 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .front-section .story-grid > li:first-child h2 { font: var(--text-card); }
}

@media print, (forced-colors: active) {
  .front-latest .section-header::before,
  .front-section > .section-header h2::before,
  .story-card--feature h1::before { display: none; }
}