/* ═══════════════════════════════════════════════════════════════
   Section A — the contents page, and pictures inside the stories.
   A magazine is carried by images; the interior had exactly one.
   Screenshots of the live sites are the photography.
   ═══════════════════════════════════════════════════════════════ */
.toc{display:grid;grid-template-columns:214px minmax(0,1fr) 296px;gap:22px;
  padding-top:6px;border-top:1px solid var(--ink)}

/* left rail — rubrics with folios, the way Tempo lists them */
.rubrics{border-right:1px solid var(--ink);padding-right:18px}
.rubrics__h{font:700 11px/1 var(--f-mono);letter-spacing:.2em;color:#000;background:var(--lime);
  border:2px solid #000;padding:6px 9px;margin-bottom:10px;display:inline-block}
.rubrics li a{display:flex;align-items:baseline;gap:12px;padding:9px 0;text-decoration:none;
  border-bottom:1px dotted var(--ink)}
.rubrics li a b{font:400 24px/1 var(--f-mast);color:var(--pink);min-width:26px}
.rubrics li a span{font:600 16px/1.2 var(--f-body);flex:1}
.rubrics li a:hover span{background:var(--yellow);color:#000;box-shadow:4px 0 0 var(--yellow),-4px 0 0 var(--yellow)}
.rubrics__note{margin-top:12px;font:400 italic 13px/1.4 var(--f-head);color:var(--sub)}

/* features */
.tfeat{display:block;text-decoration:none;color:inherit}
.tfeat figure{margin:0 0 9px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  background:var(--panel);overflow:hidden}
.tfeat img{width:100%;transition:transform .3s var(--snap)}
.tfeat:hover img{transform:scale(1.04)}
.tfeat figcaption{padding:6px 9px;border-top:2px solid var(--ink);
  font:700 10px/1.35 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.tfeat__k{display:flex;align-items:center;gap:9px;margin:0 0 5px;
  font:700 10.5px/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase}
.tfeat__k span{background:var(--ink);color:var(--paper);padding:5px 7px}
.tfeat__k b{font:400 19px/1 var(--f-mast);color:var(--pink)}
.tfeat--lead h3{font:400 clamp(21px,2.9vw,32px)/1.05 var(--f-head);margin-bottom:6px}
.tfeat h4{font:400 18px/1.1 var(--f-head);margin-bottom:4px}
.tfeat__d{font:400 italic 15px/1.35 var(--f-head);color:var(--sub);margin:0}
.tfeat:hover h3,.tfeat:hover h4{color:var(--pink)}

.tpair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;
  padding-top:14px;border-top:2px solid var(--ink)}

.tcol{position:relative;border-left:1px solid var(--ink);padding-left:18px;padding-bottom:64px}
.tcol__h{font:700 11px/1 var(--f-mono);letter-spacing:.2em;color:#000;background:var(--cyan);
  border:2px solid #000;padding:6px 9px;margin-bottom:11px;display:inline-block}
.tcol .tfeat{margin-bottom:15px}
.tcol .tfeat figure{margin-bottom:7px}
.tcol__cat{position:absolute;right:4px;bottom:2px;width:124px;height:auto;aspect-ratio:230/116}

/* pictures inside the stories */
.story__fig{margin:0 0 12px;border:var(--bw) solid var(--ink);box-shadow:var(--shadow-sm);
  background:var(--panel);overflow:hidden;break-inside:avoid}
.story__fig img{width:100%}
.story__fig figcaption{padding:6px 9px;border-top:2px solid var(--ink);
  font:700 9.5px/1.35 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.story__fig--lead{float:right;width:min(340px,42%);margin:0 0 12px 20px}

/* the starburst every newsstand cover has */
.burst{position:absolute;z-index:5;left:clamp(12px,3.6vw,46px);bottom:clamp(150px,22vh,220px);
  display:grid;place-items:center;width:clamp(88px,10vw,126px);aspect-ratio:1;
  background:var(--pink);clip-path:polygon(50.0% 0.0%, 60.0% 12.8%, 75.0% 6.7%, 77.2% 22.8%, 93.3% 25.0%, 87.2% 40.0%, 100.0% 50.0%, 87.2% 60.0%, 93.3% 75.0%, 77.2% 77.2%, 75.0% 93.3%, 60.0% 87.2%, 50.0% 100.0%, 40.0% 87.2%, 25.0% 93.3%, 22.8% 77.2%, 6.7% 75.0%, 12.8% 60.0%, 0.0% 50.0%, 12.8% 40.0%, 6.7% 25.0%, 22.8% 22.8%, 25.0% 6.7%, 40.0% 12.8%);
  animation:spin 22s linear infinite}
.burst i{font:700 clamp(9px,1vw,11.5px)/1.15 var(--f-mono);letter-spacing:.04em;font-style:normal;
  color:#000;text-align:center;max-width:72%;animation:spin-r 22s linear infinite}
@keyframes spin{to{rotate:360deg}} @keyframes spin-r{to{rotate:-360deg}}

@media (max-width:1020px){
  .toc{grid-template-columns:1fr 1fr}
  .rubrics{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--ink);padding:0 0 10px}
  .rubrics li a{padding:7px 0}
  .tcol{border-left:0;padding-left:0}
}
@media (max-width:760px){
  .toc{grid-template-columns:1fr;gap:18px}
  .tpair{grid-template-columns:1fr;gap:14px}
  .story__fig--lead{float:none;width:100%;margin:0 0 12px}
  .tcol{padding-bottom:56px}
  .tcol__cat{width:96px}
  .burst{left:auto;right:10px;bottom:auto;top:250px;width:78px}
}