/* TESTER · The feature: a magazine spread on warm brown. Big tight grotesque headline across the top that carries on
   down the left column, the portrait in the middle, small italic serif notes at the sides */
.ft{position:relative;min-height:100vh;min-height:100svh;box-sizing:border-box;background:#5a3a24;color:#f2ece0;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(14px,2vw,28px);
  padding:calc(var(--hh,53px) + clamp(16px,3vh,32px)) clamp(16px,2.4vw,36px) clamp(24px,4vh,44px)}
.ft-h,.ft-more{font-family:"Arimo","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-stretch:100%;letter-spacing:-.035em;line-height:.93;font-size:clamp(25px,2.55vw,46px);margin:0}
.ft-h{grid-column:1/-1;text-align:center;text-wrap:pretty;padding-inline:3%}
.ft-h i{font-style:normal}
.ft-more{text-align:left;margin-bottom:auto}
.ft-name{display:inline}
.ft-side,.ft-art{display:flex;flex-direction:column;min-height:0}
.ft-side{grid-column:1;grid-row:2;padding-top:.15em}
.ft-ph{grid-column:2;grid-row:2;margin:clamp(6px,1vh,12px) 0 0;align-self:start;aspect-ratio:747/959;width:100%;max-height:calc(100svh - var(--hh,53px) - 9.5em);max-width:calc((100svh - var(--hh,53px) - 9.5em) * .779);justify-self:center;background:#ddd}
.ft-ph img{display:block;width:100%;height:100%;object-fit:cover}
.ft-art{grid-column:3;grid-row:2;justify-content:center;padding-left:clamp(0px,2vw,40px)}
.ft-blurb,.ft-art p,.ft-link{font-family:"Times New Roman",Times,"Liberation Serif",serif;font-style:italic;font-size:clamp(11.5px,.95vw,14px);line-height:1.12;color:#f2ece0}
.ft-blurb{max-width:15em;margin:auto auto 2.4em;text-align:center}
.ft-side .ft-link{align-self:center;margin-bottom:auto}
.ft-art p{margin:0 0 .9em;text-align:justify;hyphens:auto}
.ft-art .ft-kick{margin:auto 0 2.4em;text-align:left}
.ft-art .ft-link{margin-top:auto}
.ft-link{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.ft-link:hover{border-bottom-color:currentColor}
.ft-link:focus-visible{outline:2px solid #f2ece0;outline-offset:3px}

/* phone: headline, then the portrait, then the notes and the article side by side */
/* desktop: the spread is exactly one screen; the portrait fills the height that's left */
@media (min-width:761px){
  .ft{height:100vh;height:100svh;min-height:620px}
  .ft-ph{height:100%;width:auto;max-width:100%;max-height:none;min-height:0;margin-top:clamp(8px,1.4vh,16px)}
}
@media (max-width:760px){
  .ft{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto auto;row-gap:16px}
  .ft-h{font-size:clamp(21px,6.5vw,32px);text-align:left;padding:0}
  .ft-ph{grid-column:1/-1;grid-row:2;width:78%;max-width:none;max-height:none;margin:4px 0 0}
  .ft-side{grid-column:1;grid-row:3;padding:0}
  .ft-more{font-size:clamp(17px,5.2vw,24px);margin-bottom:18px}
  .ft-blurb{margin:0 0 10px;text-align:left}
  .ft-side .ft-link{align-self:flex-start}
  .ft-art{grid-column:2;grid-row:3;padding:0;justify-content:flex-start}
  .ft-art .ft-kick{margin:0 0 .8em}
  .ft-art p{margin-bottom:1em}
}

/* arriving: the headline lines rise in one after another, then the picture and the notes */
.ft .ft-l{display:inline;opacity:0;transition:opacity .8s ease}
.ft.in .ft-l{opacity:1}.ft.in .ft-l:nth-child(2){transition-delay:.12s}.ft.in .ft-l:nth-child(3){transition-delay:.24s}
.ft .ft-ph,.ft .ft-side,.ft .ft-art{opacity:0;transform:translateY(12px);transition:opacity .9s ease .3s,transform .9s cubic-bezier(.2,.8,.2,1) .3s}
.ft.in .ft-ph,.ft.in .ft-side,.ft.in .ft-art{opacity:1;transform:none}
.ft.in .ft-side{transition-delay:.42s}.ft.in .ft-art{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.ft .ft-l,.ft .ft-ph,.ft .ft-side,.ft .ft-art{opacity:1;transform:none;transition:none}}