/* Editorial refinement of the supplied blue-and-white layout.
   Design variance 6 / motion 3 / density 3. Native CSS, existing Soyuz type. */
.stories:not(.list-view){
  max-width:1100px;
  gap:88px clamp(80px,10vw,150px);
  margin-top:86px;
  padding:0 36px;
}
.stories:not(.list-view) .story-wrapper:nth-child(even){margin-top:44px}
.stories:not(.list-view) .story{
  --rotation:-5deg;
  aspect-ratio:.71;
  min-height:570px;
  padding:32px 36px 35px;
  border-radius:29% 28% 27% 28% / 20% 21% 22% 23%;
  transition:transform 260ms cubic-bezier(.2,.75,.2,1);
}
.stories:not(.list-view) .story-wrapper:nth-child(4n+2) .story{--rotation:5deg}
.stories:not(.list-view) .story-wrapper:nth-child(4n+3) .story{--rotation:4deg}
.stories:not(.list-view) .story-wrapper:nth-child(4n+4) .story{--rotation:-4deg}
.card-meta{
  align-self:stretch;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--blue);
  font-family:Arial,sans-serif;
  font-weight:400;
  font-size:12px;
  line-height:1.25;
  text-align:left;
}
.stories:not(.list-view) .portrait{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  width:55%;
  aspect-ratio:1;
  margin:22px 0 26px;
  border-radius:25%;
  color:white;
}
.window-age{font-family:Soyuz,Arial,sans-serif;font-size:clamp(76px,8vw,112px);line-height:.78;letter-spacing:-.06em;padding-right:.05em}
.window-unit{font-family:Soyuz,Arial,sans-serif;font-size:20px;line-height:1;margin-top:8px}
.age-long .window-age{font-size:clamp(48px,5.5vw,76px);letter-spacing:-.065em}
.card-body{display:block;width:100%;min-width:0}
.stories:not(.list-view) .name{font-size:clamp(44px,4.1vw,62px);line-height:.88;letter-spacing:-.035em}
.stories:not(.list-view) .name .surname{font-size:.57em;line-height:1;margin-top:7px;letter-spacing:-.02em}
.stories:not(.list-view) .age-inline{display:none}
.stories:not(.list-view) .summary{
  font-size:clamp(19px,1.8vw,25px);
  line-height:1.08;
  margin:19px auto 0;
  max-width:310px;
  -webkit-line-clamp:3;
  letter-spacing:-.015em;
}
.card-footer{display:block;width:100%;min-width:0;margin-top:auto;padding-top:26px}
.card-place{
  display:block;
  color:var(--blue);
  font-family:Arial,sans-serif;
  font-weight:400;
  font-size:12px;
  line-height:1.35;
  margin-bottom:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stories:not(.list-view) .read{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:12px;
  margin:0;
  padding:13px 0 0;
  border-top:1px solid #3847dc55;
  color:var(--blue);
  font-family:Soyuz,Arial,sans-serif;
  font-size:22px;
  line-height:1;
}
.read-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:35px;
  height:35px;
  border:1.5px solid currentColor;
  border-radius:50%;
  font-family:Arial,sans-serif;
  font-weight:400;
  font-size:24px;
  transition:background-color 180ms,color 180ms,transform 180ms;
}
@media(hover:hover){
  .stories:not(.list-view) .story:hover{transform:rotate(0deg) translateY(-8px)}
  .story:hover .read-arrow{background:var(--blue);color:white;transform:rotate(6deg)}
}
.stories:not(.list-view) .story:active{transform:rotate(0deg) scale(.985)}
.stories:not(.list-view) .story:focus-visible{outline:3px solid white;outline-offset:12px}
.stories:not(.list-view) .story-caption{margin:32px 0 0;font-size:12px;line-height:1.5;max-width:320px;justify-self:center}
.stories:not(.list-view) .story-caption span:first-child{font:inherit}
.stories:not(.list-view) .list-caption{display:none}
.stories:not(.list-view) .age-warning{font-style:normal}
/* The same content in the compact, accessible list view. */
.list-view .card-meta,.list-view .card-place{display:none}
.list-view .story{grid-template-columns:minmax(0,1fr) 130px}
.list-view .card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:30px;align-items:center}
.list-view .card-footer{padding:0;margin:0}
.list-view .read{display:flex;gap:8px;align-items:center;justify-content:flex-end;line-height:1.3}
.list-view .read-arrow{width:auto;height:auto;border:0;font-size:20px}
.list-view .story-caption span:first-child{font:inherit}
@media(min-width:701px) and (max-width:1000px){
  .stories:not(.list-view){gap:75px 72px;padding:0 25px}
  .stories:not(.list-view) .story{min-height:515px;padding:29px 25px 30px}
  .stories:not(.list-view) .portrait{width:60%;margin-top:21px;margin-bottom:25px}
  .stories:not(.list-view) .name{font-size:43px}
  .stories:not(.list-view) .summary{font-size:19px}
  .window-age{font-size:84px}
  .age-long .window-age{font-size:53px}
  .card-footer{padding-top:24px}
  .stories:not(.list-view) .read{font-size:19px}
}
@media(max-width:700px){
  .stories:not(.list-view){max-width:400px;padding:0 25px;grid-template-columns:minmax(0,1fr);gap:59px;margin-top:65px}
  .stories:not(.list-view) .story-wrapper:nth-child(n){margin-top:0}
  .stories:not(.list-view) .story{min-height:475px;padding:29px 25px 28px;aspect-ratio:.68;border-radius:29% 28% 27% 28% / 18% 19% 20% 21%}
  .card-meta{font-size:10px}
  .stories:not(.list-view) .portrait{width:59%;margin:21px 0 24px}
  .window-age{font-size:88px}
  .window-unit{font-size:18px;margin-top:6px}
  .age-long .window-age{font-size:56px}
  .stories:not(.list-view) .name{font-size:46px}
  .stories:not(.list-view) .name .surname{font-size:.58em;margin-top:7px}
  .stories:not(.list-view) .summary{font-size:21px;line-height:1.08;margin-top:17px}
  .card-footer{padding-top:24px}
  .card-place{font-size:11px;margin-bottom:10px}
  .stories:not(.list-view) .read{font-size:20px;padding-top:11px}
  .read-arrow{width:31px;height:31px;font-size:21px}
  .stories:not(.list-view) .story-caption{margin-top:25px;font-size:11px;padding:0 10px}
  .list-view .story{grid-template-columns:minmax(0,1fr);gap:15px}
  .list-view .card-body{grid-template-columns:minmax(0,1fr);gap:12px}
  .list-view .read{justify-content:flex-start}
}
@media(max-width:360px){
  .stories:not(.list-view){padding:0 23px}
  .stories:not(.list-view) .story{min-height:450px;padding:27px 21px 26px}
  .stories:not(.list-view) .portrait{width:62%;margin-bottom:22px}
  .window-age{font-size:74px}
  .age-long .window-age{font-size:46px}
  .window-unit{font-size:16px}
  .stories:not(.list-view) .name{font-size:39px}
  .stories:not(.list-view) .summary{font-size:18px}
  .stories:not(.list-view) .read{font-size:18px}
  .card-meta{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.story,.read-arrow{transition:none!important}}
/* Keep fine type inside the curved edge, including when the card rotates. */
.stories:not(.list-view) .card-meta{padding:0 19px}
.stories:not(.list-view) .story{padding-bottom:53px}
.stories:not(.list-view) .card-footer{width:calc(100% - 18px)}
.stories:not(.list-view) .card-place{text-align:left}
@media(max-width:700px){
  .stories:not(.list-view) .card-meta{padding:0 14px}
  .stories:not(.list-view) .story{padding-bottom:43px}
  .stories:not(.list-view) .card-footer{width:calc(100% - 8px)}
  .stories:not(.list-view) .read{font-size:19px}
}
@media(max-width:360px){.stories:not(.list-view) .read{font-size:17px}}
.age-long .window-age{display:flex;align-items:center;gap:.04em;letter-spacing:-.02em}
.range-separator{font-family:Arial,sans-serif;font-size:.45em;line-height:1;letter-spacing:0;margin:0 .03em}