/* Long-form extras for the My story page. */
.story-page{padding:48px 0 24px}
.story{
  max-width:680px;
  margin:0 auto;
  font-size:1.14rem;
  line-height:1.78;
}
.story h1{
  font-size:2.55rem;
  margin:8px 0 14px;
  letter-spacing:-.04em;
  line-height:1.05;
}
.story-dek{
  font-style:italic;
  font-weight:400;
  color:var(--muted);
  font-size:1.16rem;
  line-height:1.55;
  margin:0 0 2.6em;
  max-width:34em;
}
.story h2{
  font-size:1.42rem;
  margin:2.5em 0 .7em;
  letter-spacing:-.02em;
  line-height:1.2;
}
.story p{margin:0 0 1.15em}
.story p:last-child{margin-bottom:0}
.story-figure{
  margin:1.8em 0 2.2em;
}
.story-figure-lg{margin:2em 0 2.4em}
.story-figure img,
.photo-grid img,
.photo-pair img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--r);
  box-shadow:var(--shadow);
  background:var(--birch);
}
.story-figure figcaption,
.photo-pair figcaption{
  margin:.6em 4px 0;
  font-size:.95rem;
  line-height:1.45;
  font-style:italic;
  color:var(--muted);
}
.photo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:1.8em 0 2.2em;
  align-items:start;
}
.photo-grid figure{margin:0}
.photo-pair{margin:1.8em 0 2.2em}
.photo-pair .photo-grid{margin:0}
.story-close{
  margin:3em 0 0;
  padding:2em 0 0;
  border-top:1px solid var(--line);
}
.story-close p{color:var(--ink);margin:0 0 1em}
.story-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:4px 0 0;
}
@media(min-width:760px){
  .story-page{padding:72px 0 32px}
  .story h1{font-size:3.5rem}
  .story h2{font-size:1.65rem}
}
@media(max-width:520px){
  .photo-grid{gap:10px;grid-template-columns:1fr}
}
