/* /magnum. Eleven frames. Lifted from BIF_SITE_FINALS/06_Source/genmagnum.py. */
.mag h1{margin-top:12px;font-size:3.1rem;letter-spacing:-1.4px}
.mag .big{margin-top:16px;max-width:74ch}
/* the second of the two deliberate italics on this site */
.mag .aside{margin-top:14px;font-size:1rem;font-style:italic;color:#8C8880;max-width:76ch}

.stage{background:#F1EEE7;border:1px solid var(--hair);height:500px;display:flex;
  align-items:center;justify-content:center;position:relative;margin-top:26px}
.stage img{max-height:464px;max-width:88%;width:auto;display:block;
  box-shadow:0 2px 14px rgba(16,17,18,.10)}
.arw{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;background:var(--paper);border:1px solid var(--hair);display:flex;
  align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--ink);
  cursor:pointer;transition:background-color .12s ease,color .12s ease}
.arw:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.arw.l{left:16px}
.arw.r{right:16px}

.capbar{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:baseline;
  padding:16px 2px 0}
.capbar .cn{font-size:.92rem;font-weight:800;letter-spacing:1px;color:#A9A296;
  font-variant-numeric:tabular-nums}
.capbar .ct{font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.45;max-width:78ch}

.strip{display:flex;gap:9px;margin-top:20px;align-items:flex-end;overflow-x:auto;
  padding-bottom:4px}
.strip .t{flex:0 0 auto;border:1px solid var(--hair);background:#fff;padding:3px;height:86px;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.strip .t.on{border:2.5px solid var(--yellow);padding:1.5px}
.strip .t img{max-height:78px;max-width:74px;width:auto;display:block}

.readcase{display:grid;grid-template-columns:1fr 330px;gap:44px;align-items:center;
  border:1.5px solid var(--ink);background:#FFFDF9;padding:24px 28px;margin-top:30px}
.readcase .n{display:block}
.readcase .rh{margin-top:7px;font-size:1.16rem;font-weight:700}
.readcase .rp{margin-top:6px;font-size:.97rem;color:var(--muted);max-width:62ch;line-height:1.6}
.readcase .capture{display:flex;flex-direction:column;gap:9px}
.readcase input{border:1.5px solid var(--ink);background:#fff;padding:12px 14px;font-size:1rem;
  border-radius:2px;width:100%}
.readcase input::placeholder{color:#A8A399}
.readcase .btn{border:0;cursor:pointer;text-align:center;width:100%}
.readcase .processor{font-size:.85rem;color:var(--muted);line-height:1.45;margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.credits{margin-top:14px;font-size:.88rem;color:#8C8880;max-width:88ch}

@media (max-width:900px){
  .mag h1{font-size:2.3rem}
  .stage{height:340px}
  .stage img{max-height:300px}
  .capbar{grid-template-columns:1fr;gap:6px}
  .readcase{grid-template-columns:1fr;gap:22px}
}