/* The ESA Times sheet: the home preview now, the edition and article pages later. Sizes in --u (css/stage.css). */
.times { display: flex; flex-direction: column; align-items: center; }
.paper { position: relative; width: calc(var(--u) * 681); color: var(--stage-ink); }
.paper-shadow { position: absolute; inset: 0; border-radius: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) color-mix(in srgb, var(--sky) 45%, transparent); }
/* The sheet image is a nine-slice (36 of 640 px per edge, centre filled: a narrow slice draws its deckle larger); its 18 px transparent margin is drawn outside the box. */
.paper-sheet {
  position: relative;
  border: calc(var(--u) * 22) solid transparent;
  border-image: var(--paper-edge) 36 fill / calc(var(--u) * 22) / calc(var(--u) * 10.3) stretch;
  background: var(--stage-paper) padding-box;
  padding: 0 calc(var(--u) * 5.5) 0 calc(var(--u) * 6.5);
  font-family: var(--font-news);
  text-align: center;
}
/* The aged rim: the same sheet drawn again, darker, and kept only near its deckled outline (the reference's edges are darkened, not clean). */
.paper-sheet::after { content: ""; position: absolute; inset: calc(var(--u) * -32.3); border: calc(var(--u) * 22) solid transparent; border-image: var(--paper-edge) 36 fill / calc(var(--u) * 22) / 0 stretch; filter: sepia(.35) brightness(.72); pointer-events: none;
  --edge: calc(var(--u) * 11.5); --rim: transparent calc(var(--u) * 22); -webkit-mask: linear-gradient(90deg, black var(--edge), var(--rim)), linear-gradient(-90deg, black var(--edge), var(--rim)), linear-gradient(black var(--edge), var(--rim)), linear-gradient(0deg, black var(--edge), var(--rim)); mask: linear-gradient(90deg, black var(--edge), var(--rim)), linear-gradient(-90deg, black var(--edge), var(--rim)), linear-gradient(black var(--edge), var(--rim)), linear-gradient(0deg, black var(--edge), var(--rim)); }
.paper :is(h2, h3, p) { margin: 0; }
.paper a { color: inherit; text-decoration: none; }
.paper :focus-visible { outline-color: var(--stage-ink); }
.paper-masthead { padding-bottom: calc(var(--u) * 4); border-bottom: calc(var(--u) * 2.5) solid var(--stage-ink); font: 700 calc(var(--u) * 77.5) / 1 var(--font-masthead); letter-spacing: -.01em; }
.paper-line { padding: calc(var(--u) * 6) 0; border-bottom: calc(var(--u) * 1.5) solid var(--stage-rule); font-size: calc(var(--u) * 13); font-weight: 600; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
.paper-sections { border-bottom: calc(var(--u) * 4) double var(--stage-ink); word-spacing: .38em; }
.paper-body { display: grid; grid-template-columns: calc(var(--u) * 398) 1fr; column-gap: calc(var(--u) * 12.5); text-align: left; }
.paper h3 { font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.paper img { display: block; width: 100%; object-fit: cover; border-radius: calc(var(--u) * 2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-ink) 20%, transparent); }
.paper-lead h3 { margin-top: calc(var(--u) * 8.5); font-size: calc(var(--u) * 42.5); }
.paper-lead img { height: calc(var(--u) * 197); margin-top: calc(var(--u) * 19.5); }
.paper-lead p { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 21); }
.paper-side { display: flex; flex-direction: column; gap: calc(var(--u) * 3.5); padding-left: calc(var(--u) * 19.5); border-left: 1px solid var(--stage-rule); }
.paper-story h3 { font-size: calc(var(--u) * 22); line-height: 1.05; text-wrap: balance; }
.paper-story img { height: calc(var(--u) * 72); margin-top: calc(var(--u) * 10); }
.paper-story + .paper-story { padding-top: calc(var(--u) * 4); background: linear-gradient(var(--stage-rule) 0 0) calc(var(--u) * 27) 0 / calc(var(--u) * 159.5) 1px no-repeat; }
.paper-story + .paper-story img { height: calc(var(--u) * 65); }
.paper-story p { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 15.5); }
.times > .btn { margin-top: calc(var(--u) * 16.5); width: calc(var(--u) * 233.5); height: calc(var(--u) * 36); }

@media (max-width: 699px) {
  .paper { width: calc(var(--u) * 369.4); }
  .paper-sheet { border-width: calc(var(--u) * 14); border-image-width: calc(var(--u) * 14); border-image-outset: calc(var(--u) * 6.56); padding: calc(var(--u) * 6) calc(var(--u) * 4) 0 calc(var(--u) * 3.8); }
  .paper-sheet::after { inset: calc(var(--u) * -20.56); border-width: calc(var(--u) * 14); border-image-width: calc(var(--u) * 14); --edge: calc(var(--u) * 7.5); --rim: transparent calc(var(--u) * 14); }
  .paper-sections { word-spacing: .2em; }
  .paper-masthead { padding-bottom: calc(var(--u) * 6); border-bottom-width: calc(var(--u) * 2); font-size: calc(var(--u) * 49.5); }
  .paper-line { padding: calc(var(--u) * 7) 0; font-size: calc(var(--u) * 10.4); }
  .paper-body { display: block; margin-top: calc(var(--u) * 12); }
  .paper-lead h3 { margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 36.7); }
  .paper-lead img { height: calc(var(--u) * 143.1); margin-top: calc(var(--u) * 4.5); }
  .paper-lead p { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 17.5); line-height: calc(var(--u) * 17); }
  .paper-side { gap: 0; margin-top: calc(var(--u) * 10); padding: 0; border: 0; }
  .paper-story { padding-block: calc(var(--u) * 7.2); border-top: 1px solid var(--stage-rule); display: grid; grid-template-columns: calc(var(--u) * 170.5) 1fr; grid-template-rows: auto 1fr; column-gap: calc(var(--u) * 12.8); }
  .paper-story img, .paper-story + .paper-story img { grid-row: 1 / 3; grid-column: 1; justify-self: end; width: calc(var(--u) * 168.8); height: calc(var(--u) * 82.7); margin: 0; }
  .paper-story h3 { grid-column: 2; font-size: calc(var(--u) * 23); line-height: .92; }
  .paper-story + .paper-story h3 { font-size: calc(var(--u) * 20.5); line-height: 1; }
  .paper-story p { grid-column: 2; font-size: calc(var(--u) * 12.5); line-height: calc(var(--u) * 15); }
  .paper-story + .paper-story { padding-top: calc(var(--u) * 7.2); background: none; }
  .times > .btn { margin-top: calc(var(--u) * 14); width: calc(var(--u) * 215.9); height: calc(var(--u) * 33.1); font-size: calc(var(--u) * 13); }
}