/* /free. One shape, five times, straight down the page.
   Lifted from BIF_SITE_FINALS/06_Source/genfree.py. */

.free h1{font-size:3.4rem;max-width:14ch}
.free .big{margin-top:18px;max-width:46ch}
.lead{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:center;margin-top:16px}

.cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.note{font-size:.88rem;color:#8C8880}

/* the ebook cover, on its ink card */
.coverwrap{display:flex;justify-content:center}
.coverink{background:var(--ink);padding:22px;display:inline-block}
.coverink img{width:268px;height:auto;display:block}

.taster{padding-top:44px}
.taster h2{margin-top:14px;max-width:24ch}
.taster .big{margin-top:16px;max-width:70ch}

/* the four ways, as a rail */
.ways{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ways div{padding:18px 24px 18px 0;border-right:1px solid var(--hair)}
.ways div:last-child{border-right:0;padding-right:0}
.ways div:not(:first-child){padding-left:24px}
.ways b{display:block;font-size:1.24rem;font-weight:800;letter-spacing:-.4px}
.ways span{display:block;font-size:.93rem;color:var(--muted);line-height:1.45;margin-top:5px}

/* the five rows. Same shape every time, no special cases */
.item{display:grid;grid-template-columns:1fr 440px;gap:60px;align-items:center;
  padding:46px 0;border-top:1px solid var(--hair)}
.item:first-child{border-top:0}
.item .num{font-size:1.02rem;font-weight:800;color:#C6C0B4;letter-spacing:-.2px}
.item .num .n{color:#C6C0B4}
.item h2{margin-top:12px}
.item .sub{font-size:1.16rem;font-weight:500;color:var(--ink);line-height:1.5;margin-top:11px;
  max-width:44ch}

/* the film, in a 16:9 box, playing here and not on somebody else's page */
.film{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* the audio, at the widget's own height */
.audioplayer{width:100%;height:166px;background:#EFEBE2}
.audioplayer iframe{width:100%;height:166px;border:0;display:block}

/* a landscape document on its card. The printed Introduction and Before We
   Start are both 1.41, so they take the same treatment. */
.doc{background:#EFEBE2;padding:18px}
/* the score sheet is portrait, so it sits centred on its panel rather than
   filling it, which is what the approved render draws for row 04 */
.doc.portrait{display:flex;justify-content:center;padding:14px}
.doc.portrait .docink{width:230px}
.docink{background:var(--ink);padding:12px}
.docink img{width:100%;height:auto;display:block;
  background:#2A2C2E}

@media (max-width:900px){
  .free h1{font-size:2.4rem;max-width:none}
  .lead{grid-template-columns:1fr;gap:34px}
  .coverwrap{justify-content:flex-start}
  .ways{grid-template-columns:1fr 1fr}
  .ways div:nth-child(2n){border-right:0;padding-right:0}
  .ways div:nth-child(2n+1){padding-left:0}
  .ways div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .item{grid-template-columns:1fr;gap:28px}
  .item .sub{max-width:none}
}
@media (max-width:680px){
  .free h1{font-size:2rem}
  .ways{grid-template-columns:1fr}
  .ways div{border-right:0;padding:16px 0;border-bottom:1px solid var(--hair)}
  .ways div:last-child{border-bottom:0}
  .coverink img{width:200px}
}