/* The Scarlet Recap cover, Issue 01: one design wherever the issue appears (the home page stand and archive shelf,
   the Recap's hero). Cream stock, the Recap's own masthead type (Big Shoulders Display Black, as on the Recap page) with "Scarlet" in red, the cover photo with its kicker,
   the cover line, and three numbered features. Everything scales with the cover's width (container units), so the
   same markup reads at 190 px on a shelf and 300 px in a hero. */
.sr-cover{--src-ink:#141010;--src-red:#C8102E;--src-paper:#F5F0E8;--src-display:'Big Shoulders Display','Arial Narrow',sans-serif;--src-serif:'Newsreader',Georgia,serif;--src-ui:'Archivo','Libre Franklin',system-ui,-apple-system,'Segoe UI',sans-serif;
  container-type:inline-size;position:relative;display:flex;flex-direction:column;gap:2.4cqi;width:100%;height:100%;box-sizing:border-box;
  padding:5.5cqi 6cqi 5cqi;background:var(--src-paper);color:var(--src-ink);text-align:left;overflow:hidden}
/* paper: a faint light from the top left, under the print */
.sr-cover{background-image:radial-gradient(ellipse 90% 70% at 30% 20%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(60,40,20,.05))}
.src-top{display:flex;justify-content:space-between;align-items:center;gap:3cqi;padding-top:1.8cqi;border-top:1cqi solid var(--src-ink);font:800 2.7cqi/1 var(--src-ui);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.src-mast{display:flex;flex-direction:column;margin:.6cqi 0 0;font:900 19.5cqi/.86 var(--src-display);letter-spacing:.012em}
.src-mast em{font-style:normal;color:var(--src-red)}
.src-photo{position:relative;flex:1;min-height:0;margin-top:1.2cqi;overflow:hidden;background:#E4DACB}
.src-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;filter:saturate(1.05) contrast(1.03)}
.src-tag{position:absolute;left:0;bottom:0;padding:1.4cqi 2.4cqi;background:var(--src-red);color:#FFFFFF;font:800 2.6cqi/1 var(--src-ui);letter-spacing:.12em;text-transform:uppercase}
.src-head{margin:.8cqi 0 0;font:600 5.3cqi/1.15 var(--src-serif);text-wrap:balance}
.src-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqi;margin:0;padding:2cqi 0 0;list-style:none;border-top:.45cqi solid var(--src-ink)}
.src-list li{display:flex;flex-direction:column;gap:.8cqi;font:700 2.7cqi/1.15 var(--src-ui)}
.src-list b{font:900 7cqi/1 var(--src-display);color:var(--src-red)}

/* the cover sits inside links and buttons, so its parts are spans set as blocks */
.sr-cover,.src-top,.src-mast,.src-mast > span,.src-photo,.src-head,.src-list,.src-li{display:block}
.sr-cover{display:flex}.src-top{display:flex}.src-mast{display:flex}.src-list{display:grid}.src-li{display:flex;flex-direction:column;gap:.8cqi;font:700 2.7cqi/1.15 var(--src-ui)}
.src-head{margin:.8cqi 0 0}