/* Books page, v1 sections: what counts as a book, plates, what comes with every book, where it lives. */

/* what counts as a book: whole pages at their own proportions; a row's pages share one height */
.kinds{display:flex;flex-direction:column;gap:34px;margin-top:34px}
.kinds-row{display:flex;gap:22px;align-items:flex-start}
.kind{flex:var(--ar) 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.45;text-decoration:none;color:inherit}
.kind .im{aspect-ratio:var(--ar);border:1px solid var(--edge);background:#f0f1f5;margin-bottom:12px;overflow:hidden}
.kind .im img{width:100%;height:100%;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kind:hover .im img{transform:scale(1.03)}
.kind b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.kind span{color:var(--muted)}
.kind .dim{font-size:12px;opacity:.75}

/* plates: one found on its page. Open layout, no panel: the whole page on the left, the record on the right */
.card.plx-found{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;padding:0;background:none;border:0;box-shadow:none;min-height:0;overflow:visible}
.card.plx-found::before,.card.plx-found::after{display:none}
.plx-page{position:relative;overflow:hidden;height:min(680px,78vh);aspect-ratio:var(--par,.6078);box-shadow:0 40px 70px -40px rgba(20,25,60,.55),0 0 0 1px rgba(20,25,60,.08)}
.plx-page img{display:block;width:100%;height:100%}
.plx-box{position:absolute;border:2px solid var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.8),0 0 0 9999px rgba(15,17,25,.18);opacity:0;transform:scale(1.04);transition:opacity .7s ease .3s,transform .9s cubic-bezier(.2,.7,.2,1) .3s}
.play .plx-box{opacity:1;transform:none}
.plx-box i{position:absolute;left:-2px;bottom:100%;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 8px;white-space:nowrap}
.plx-rec{position:relative;padding:0;display:flex;flex-direction:column;align-self:center;max-width:560px}
.plx-rec::before{content:'';position:absolute;left:-56px;top:50%;width:44px;border-top:1.5px dashed var(--ink)}
.plx-rec .demo-tag{position:static;align-self:flex-start;margin-bottom:26px}
.plx-rec h3{font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.25;margin:8px 0 14px}
.plx-q{font-family:var(--serif);font-size:16px;line-height:1.65;margin:0;color:var(--text)}
.plx-kw{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.plx-kw span{font-size:11px;font-weight:700;letter-spacing:.05em;padding:4px 9px}
.plx-kw .b{background:#e3e9ff;color:#1b2a7a}
.plx-kw .g{background:#e0f3e9;color:#14603c}
.plx-kw .a{background:#faeeda;color:#7a4a12}
.plx-dl{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:0 18px;font-size:13px;line-height:1.5}
.plx-dl dt{color:var(--muted);padding:8px 0;border-top:1px solid var(--edge);white-space:nowrap}
.plx-dl dd{margin:0;padding:8px 0;border-top:1px solid var(--edge)}
.plx-rec .more,.plx-strip-head .more,.lv .more,.plx-src a{color:var(--ink);font-weight:600;font-size:13.5px;text-decoration:none}
.plx-rec .more{margin-top:22px}
.plx-rec .more:hover,.plx-strip-head .more:hover,.lv:hover .more{text-decoration:underline}

/* plates: deep zoom on a real plate */
.card.plx-zoom{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;padding:0;background:none;border:0;box-shadow:none;min-height:0}
.card.plx-zoom::before,.card.plx-zoom::after{display:none}
.plx-dz{box-shadow:0 40px 70px -40px rgba(20,25,60,.55)}
.plx-zoom h3{font-size:22px;font-weight:650;letter-spacing:-.02em;line-height:1.25;margin:8px 0 12px}
.plx-zoom p{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.plx-zoom .plx-src{font-size:13px}
.plx-dz{position:relative;height:440px;border:1px solid var(--edge);overflow:hidden;background:#efe9dc center 38%/cover no-repeat;cursor:crosshair}
.plx-lens{position:absolute;left:30%;top:30%;width:220px;height:130px;border:2px solid #fff;outline:1px solid rgba(0,0,0,.25);box-shadow:0 12px 34px -8px rgba(0,0,0,.55);background-repeat:no-repeat;pointer-events:none}

/* plates: a strip from the live gallery */
.plx-strip-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:44px}
.plx-strip{display:flex;flex-direction:column;gap:26px;padding-top:16px}
.plx-row{display:flex;gap:16px;align-items:flex-start}
.plx-it{flex:var(--ar) 1 0;min-width:0;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.plx-it img{width:100%;height:auto;aspect-ratio:var(--ar);display:block;border:1px solid var(--edge);background:#f0f1f5;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.plx-it:hover img{transform:translateY(-3px)}
.plx-it span{font-size:12px;line-height:1.4;color:var(--muted);margin-top:8px}
.plx-it span b{display:block;color:var(--text);font-weight:600;font-size:12.5px}

/* what comes with every book */
.incs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border-top:1px solid var(--edge)}
.inc{padding:22px 22px 26px 0;border-bottom:1px solid var(--edge)}
.inc b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;margin-bottom:6px}
.inc p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}

/* where it lives */
.card.lv{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:0 0 30px;overflow:hidden;min-height:0}
.lv-shot{border-bottom:1px solid var(--edge);margin-bottom:24px}
.lv-shot .strip{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:.12em;padding:9px 16px;background:#0f1119;color:#fff}
.lv-shot .strip em{font-style:normal;color:#9aa6d8}
.lv-shot img{display:block;width:100%;height:auto}
.lv h3,.lv p,.lv .more{padding:0 30px}
.lv h3{font-size:19px;font-weight:650;letter-spacing:-.015em;margin:0 0 8px}
.lv p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 16px}

@media (max-width:1000px){
  .incs{grid-template-columns:repeat(2,1fr)}
  .kinds-row{flex-wrap:wrap}.kind{flex-basis:calc(var(--ar) * 220px)}
  .card.plx-found,.card.plx-zoom{grid-template-columns:1fr}
  .card.plx-found{gap:26px}.plx-page{height:auto;width:100%;max-width:520px}.plx-rec::before{display:none}
  .plx-rec{padding:30px 24px}
  .card.plx-zoom{padding:28px 24px;gap:24px}
}
@media (max-width:600px){
  .kinds-row{gap:16px}.kind{flex-basis:calc(var(--ar) * 150px)}
  .incs{grid-template-columns:1fr}
  .plx-dz{height:320px}
  .plx-row{flex-wrap:wrap;gap:18px 12px}.plx-it{flex-basis:calc(var(--ar) * 140px)}
}
#lives .desc a{color:var(--ink);font-weight:600;text-decoration:none}
#lives .desc a:hover{text-decoration:underline}

/* devices with real corners: a laptop with a base, a tablet, a phone */
.dev.desk .bar{border-radius:14px 14px 0 0;padding:10px 14px}
.dev.desk img{border:10px solid #1c1d24;border-top:0;border-radius:0 0 4px 4px}
.dev.desk .base{display:block;position:relative;height:13px;margin:0 -6%;background:linear-gradient(180deg,#e3e5eb,#b9bcc6);border-radius:2px 2px 14px 14px;box-shadow:0 30px 40px -24px rgba(20,25,60,.5)}
.dev.desk .base::before{content:'';position:absolute;left:50%;top:0;width:14%;height:5px;translate:-50% 0;background:#c9ccd5;border-radius:0 0 8px 8px}
.dev.tab img{border-width:12px;border-radius:26px}
.dev.mob img{border:7px solid #1c1d24;border-radius:30px;box-shadow:0 40px 70px -40px rgba(20,25,60,.5)}

/* the rail on its own: two columns of tools */
.rd-grid .rd-col .rd-tools{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
@media (max-width:760px){.rd-grid .rd-col .rd-tools{grid-template-columns:1fr}}