/* About and contact, the privacy notice and the not-found page (engine.hub.legal). The
   desk's own parts only: a head with its rhythm (desk.css) and a reading column. No
   inline styles. */

.lg-head .sw{padding-block:30px 18px}
.lg-body{padding-block:12px clamp(44px,6vw,80px)}

/* reading text: About and contact, and the privacy notice */
.lg-text,.lg-read{max-width:68ch}
.lg-text .h3,.lg-read .h3{margin:34px 0 0}
.lg-text .h3:first-child,.lg-read .h3:first-child{margin-top:0}
.lg-text p,.lg-read p{margin:12px 0 0}
/* the trader's details: the small print's own size and strength (desk.css .small) */
.lg-text .trader{margin-top:28px}
.lg-read{background:var(--paper);padding:clamp(24px,4vw,44px);box-shadow:0 1px 0 var(--rule)}
.lg-list{margin:12px 0 0;padding-left:20px}
.lg-list li + li{margin-top:6px}
.lg-read a,.lg-text a{overflow-wrap:break-word}

/* not found: the head with a handwritten note, then the ways on */
.lg-404 .sw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.lg-note{font-size:26px;margin:0 12px 6px 0}
.lg-ways{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:60ch}
.lg-ways li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.lg-ways .lnk{font-size:18px}
.lg-ways span{font-size:14px;color:color-mix(in srgb,var(--ink) 74%,transparent)}

/* phones and small tablets: the desk's one breakpoint (desk.css, 820 px) */
@media (max-width:820px){
  .lg-404 .sw{grid-template-columns:minmax(0,1fr)}
  .lg-note{margin:0}
}