/* /legal. One page, three sections.
   Lifted from BIF_SITE_FINALS/06_Source/gensite.py. */

.legal h1{margin-top:14px}
.legal > .big{margin-top:18px;max-width:78ch}

/* the three anchors at the top */
.anch{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.anch a{border:1.5px solid var(--ink);padding:9px 18px;font-size:.9rem;font-weight:700;
  border-radius:2px;transition:background-color .12s ease,color .12s ease}
.anch a:hover{background:var(--ink);color:var(--paper)}

.lsec{margin-top:52px;padding-top:26px;border-top:2px solid var(--ink);scroll-margin-top:24px}
.lsec h2{font-size:1.9rem;margin-top:8px}
.lsec h2.sub{font-size:1.6rem;margin-top:44px}
.lsec .lead{margin-top:14px;font-size:1.14rem}
.lgs{margin-top:26px}

/* a definition row: the term on the left, the answer on the right */
.lg{display:grid;grid-template-columns:262px 1fr;gap:44px;padding:20px 0;
  border-top:1px solid var(--hair)}
.lg h3{font-size:1.06rem;letter-spacing:-.2px;margin-top:2px}
.lg p{font-size:.99rem;max-width:70ch}
.lg p + p{margin-top:10px}
.lg b.k{font-weight:800;color:var(--ink)}

/* what you can and cannot do */
.can{display:grid;grid-template-columns:1fr 1fr;margin-top:6px}
.can > div{padding:18px 26px 18px 0;border-left:1px solid var(--hair);padding-left:26px}
.can > div:first-child{border-left:0;padding-left:0}
.can h4{font-size:10.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--muted)}
.can p{margin-top:9px;font-size:.99rem}

/* the two that matter most, on ink */
.own{background:var(--ink);color:var(--paper);padding:30px 34px;margin-top:22px}
.own p{color:#C6C2BA;max-width:74ch}
.own p + p{margin-top:14px}
.own b{color:var(--paper)}

.lfoot{margin-top:44px;padding-top:22px;border-top:1px solid var(--hair);font-size:.88rem;
  color:#8C8880;line-height:1.7}

@media (max-width:820px){
  .legal h1{font-size:2.3rem}
  .lsec h2{font-size:1.6rem}
  .lg{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .can{grid-template-columns:1fr}
  .can > div{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--hair);
    padding-top:18px}
  .can > div:first-child{border-top:0}
  .own{padding:24px 22px}
}