/* Text pages (site/terms.html, site/privacy.html) and the "page not found" page (site/404.html), on hub.css and the
   story kit (story.css): a short hero, then on wide screens the contents on the left and the text beside it. */

.legal-hero{min-height:0;gap:0;padding-block:clamp(48px,7vw,88px) clamp(28px,3vw,40px)}
.legal-hero .hero__in{gap:22px}
.legal-hero .hero__title{font-size:clamp(40px,6vw,80px);line-height:1.02}
.legal-lede{max-width:44rem;font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink2)}

.legal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px clamp(40px,6vw,96px);padding:28px 0 clamp(48px,7vw,96px);border-top:1px solid var(--ink)}
.legal-toc{position:sticky;top:calc(var(--bar-h) + 24px);align-self:start}
.legal-toc ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.legal-toc a{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:4px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.35;color:var(--ink2);text-decoration:none}
.legal-toc a span{font:500 12px/1.6 var(--mono);color:var(--stamp)}
.legal-toc a:hover{color:var(--stamp)}
.legal-body{max-width:44rem}
.legal-body section{scroll-margin-top:calc(var(--bar-h) + 24px)}
.legal-body section + section{margin-top:44px}
.legal-body h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.legal-n{font:500 12px var(--mono);letter-spacing:.06em;color:var(--stamp)}
.legal-body p{margin-top:12px;font-size:17px;line-height:1.7;color:var(--ink)}
.legal-body a{color:var(--stamp);text-underline-offset:3px}

/* page not found: the hero with our agent's log of its visit (the joke), then the doors to the main parts of the site */
.nf-hero{min-height:0}
.nf-hero .hero__title{font-size:clamp(44px,7vw,96px)}
.nf-hero .doors{margin-top:clamp(24px,3vw,40px)}
.nf-log{position:relative;margin:0;padding:22px 24px 26px;background:var(--stage);color:var(--stage-soft);box-shadow:8px 8px 0 var(--stamp);font:13px/1.65 var(--mono)}
.nf-log figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--stage-dash)}
.nf-log figcaption .cap{color:var(--stage-mute)} .nf-log figcaption .cap:first-child{color:var(--stamp-on-dark)}
.nf-log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-height:13.5em}
.nf-log li{padding-left:16px;position:relative}
.nf-log li::before{content:"·";position:absolute;left:2px;color:var(--stage-mute)}
.nf-log li.cmd{color:#fff} .nf-log li.cmd::before{content:""}
.nf-log li.bad{color:var(--stamp-on-dark)}
.nf-log [data-nf-path]{word-break:break-all}
.nf-log li.now::after{content:"▍";margin-left:2px;animation:nf-blink .8s steps(1) infinite;color:#fff}
@keyframes nf-blink{50%{opacity:0}}
/* the grade, stamped on once the log is done (straight away without JS or with reduced motion) */
.nf-grade{position:absolute;top:-22px;right:-14px;width:78px;height:78px;display:grid;place-items:center;border:3px solid var(--stamp);border-radius:50%;background:var(--ground);
  color:var(--stamp);font:700 44px/1 var(--display);transform:rotate(-12deg)}
html.js .nf-log:not(.is-done) .nf-grade{opacity:0;transform:rotate(-12deg) scale(2.2)}
html.js .nf-log.is-done .nf-grade{animation:nf-stamp .35s cubic-bezier(.3,.7,.2,1.3) both}
@keyframes nf-stamp{from{opacity:0;transform:rotate(-12deg) scale(2.2)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@media (min-width:861px){
  .nf-hero .hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:clamp(40px,6vw,96px);row-gap:22px}
  .nf-hero .hero__in > *{grid-column:1}
  .nf-hero .nf-log{grid-column:2;grid-row:1 / span 4;align-self:center}
}
@media (max-width:860px){
  .nf-log figcaption{padding-right:56px}
  .nf-grade{width:64px;height:64px;font-size:36px;top:-26px;right:-6px}
}
@media (prefers-reduced-motion:reduce){
  html.js .nf-log:not(.is-done) .nf-grade{opacity:1;transform:rotate(-12deg)}
}

@media (max-width:860px){
  .legal{grid-template-columns:minmax(0,1fr)}
  .legal-toc{position:static}
}