/* Legal pages — one column of text on the white page, held by the same rules,
   the same type scale and the same beige as the rest of the site. */

.legal{padding-top:calc(var(--step)*9)}

.legal__head{padding-bottom:22px;margin-bottom:calc(var(--step)*6);
  border-bottom:1px solid var(--line-2)}
.legal__head h1{font-size:var(--type-section);letter-spacing:-.02em;margin-bottom:14px}
.legal__meta{font-size:var(--type-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-3)}

/* the reading column stops well short of the full width */
.legal__body{max-width:66ch}
.legal__body h2{font-size:var(--type-subheading);margin:calc(var(--step)*5) 0 10px;
  letter-spacing:-.01em}
.legal__body h2:first-child{margin-top:0}
.legal__body p{color:var(--text-2);margin:0 0 14px}
.legal__body ul{margin:0 0 14px;padding-left:19px;color:var(--text-2)}
.legal__body li{margin-bottom:7px}
.legal__body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:var(--blue-08)}
.legal__body a:hover{text-decoration-color:var(--blue)}

/* the two legal pages point at each other, and back to the site */
.legal__nav{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  margin-top:calc(var(--step)*7);padding-top:20px;border-top:1px solid var(--line)}
.legal__nav a{font-size:var(--type-support);color:var(--text-2)}
.legal__nav a:hover{color:var(--text)}

@media(max-width:720px){
  .legal{padding-top:calc(var(--step)*5)}
  .legal__head{margin-bottom:calc(var(--step)*4)}
}