/* Utility pages — legal (page-templates/legal.php) and 404. Both compose the
   photo-less .sub-hero from subpage.css with editorial tokens from main.css.
   Loads on top of subpage.css. */

/* ---- Compact hero band (legal) ---- */
.sub-hero.compact{min-height:clamp(300px,42vh,480px);padding:130px 0 70px}

/* ---- Legal prose (plain WP editor content) ---- */
.legal{padding:clamp(56px,8vh,104px) 0 var(--sectiony)}
.legal .ed-col{text-align:left} /* long legal text reads left-aligned, not editorial-centered */
.legal-body h2{font-size:clamp(24px,2.5vw,32px) /* type pass 2 */;letter-spacing:-.02em;line-height:1.15;
  margin:clamp(40px,6vh,60px) 0 16px}
.legal-body h3{font-size:clamp(19px,1.6vw,23px) /* type pass 2 */;letter-spacing:-.015em;line-height:1.2;
  margin:clamp(28px,4vh,40px) 0 12px}
.legal-body h2:first-child,.legal-body h3:first-child{margin-top:0}
.legal-body p,.legal-body li{font-size:clamp(18px,1.35vw,21px); /* type pass 2 */line-height:1.62;
  color:var(--grey-body);text-wrap:pretty}
.legal-body p{margin:0}
.legal-body p + p{margin-top:16px}
.legal-body ul,.legal-body ol{margin:16px 0;padding-left:22px}
.legal-body li + li{margin-top:10px}
.legal-body strong{color:var(--ink)}
.legal-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(15,91,161,.35);transition:text-decoration-color .2s}
.legal-body a:hover{text-decoration-color:var(--blue)}

/* ---- 404 ----
   Same shape as the legal page: a compact dark hero band over light editorial
   content, so only the header carries the dark background. Kicker + headline
   sit in the dark band; the copy and CTA live in the light .err-body below. */
/* Kicker in brand blue, matching the o nas section's eyebrow (.onas-dark
   .eyebrow in main.css). */
.err-hero .err-code{display:block;font-family:"Roboto Mono",monospace;font-size:15px; /* mono labels 12 -> 14 -> 15 */
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:20px}
.err-hero h1{max-width:16ch;margin-inline:auto}
.err-body{padding-top:clamp(48px,7vh,80px)}
.err-body .lede{max-width:44ch;margin:0 auto;font-size:clamp(20px,1.7vw,25px) /* type pass 2 */;line-height:1.6;
  color:var(--grey-body);text-wrap:pretty}
/* The link home is a .cta — the same underline-on-hover CTA the front page
   uses to reach the subpages (main.css), not a boxed button. */

/* Mono labels 12px on phone/tablet, 14px desktop. */
@media (max-width: 920px) {
  .err-hero .err-code { font-size: 13px; }
}