/* legal.css: the privacy, terms and security pages. Loaded only on those pages, on top
   of site.css and doc.css. Scoped under .legal for the same reason case.css is scoped
   under .cs: the names here are generic and must not reach the homepage.

   The shape is deliberately quiet. A legal page is read, not admired, so the work goes
   into the measure, the rhythm between sections and a contents rail that keeps the
   reader oriented, rather than into anything that moves. */

.legal{ padding-top:clamp(5rem,10vw,7rem); }

/* ---- masthead ---- */
.legal__head{ padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(1.6rem,4vw,2.4rem); }
.legal__kick{ color:var(--maroon); margin-bottom:clamp(1.2rem,3vw,1.8rem); }
.legal__t{ font-size:clamp(2.1rem,1.2rem + 3.6vw,3.4rem); letter-spacing:-.02em; max-width:18ch; }
.legal__lede{ margin-top:1.2rem; max-width:52ch;
  font-size:clamp(14.5px,.45rem + .55vw,16.5px); color:var(--ink-soft); line-height:1.7; }
.legal__stamp{ margin-top:clamp(1.4rem,3vw,2rem); display:flex; flex-wrap:wrap;
  align-items:center; gap:.5rem .9rem; }
.legal__stamp b{ font-weight:inherit; color:var(--maroon); }

/* ---- contents rail + document ---- */
.legal__grid{ display:grid; grid-template-columns:13rem minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); padding-top:clamp(2rem,5vw,3rem); }

.legal__toc{ position:sticky; top:clamp(6rem,9vw,7.5rem); align-self:start; }
.legal__toc h2{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.2em;
  font-size:8.5px; color:var(--ink-faint); margin-bottom:.9rem; }
.legal__toclist{ list-style:none; display:flex; flex-direction:column; gap:.05rem;
  border-left:1px solid var(--line); }
.legal__toclist a{ display:block; padding:.4rem 0 .4rem .9rem; margin-left:-1px;
  border-left:1px solid transparent;
  font-size:12px; line-height:1.4; color:var(--ink-faint); text-decoration:none;
  transition:color .25s ease, border-color .25s ease; }
.legal__toclist a:hover{ color:var(--ink); border-left-color:var(--maroon); }
/* the section being read. legal-toc.js sets aria-current, so the state is
   announced as well as drawn rather than being colour alone. */
.legal__toclist a[aria-current]{ color:var(--ink); border-left-color:var(--maroon); }

/* ---- a section ---- */
.legal__doc{ max-width:64ch; }
/* Any sibling, not just another section: the intro paragraphs sit above the first
   section, and .lsec + .lsec left them jammed against its number. */
.legal__doc > * + .lsec{ margin-top:clamp(2.4rem,5vw,3.4rem); }
.lsec__n{ font-family:var(--font-mono); font-size:9px; letter-spacing:.2em;
  color:var(--maroon); }
.lsec__h{ margin-top:.5rem; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); letter-spacing:-.015em;
  line-height:1.2; color:var(--ink); }
.lsec__b{ margin-top:.9rem; }
.lsec__b > * + *{ margin-top:.85rem; }

/* ---- list: hairline markers instead of bullets ---- */
.legal__list{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.legal__list li{ position:relative; padding-left:1.1rem;
  font-size:clamp(13.5px,.4rem + .5vw,15px); color:var(--ink-soft); line-height:1.7; }
.legal__list li::before{ content:""; position:absolute; left:0; top:.72em;
  width:.45rem; height:1px; background:var(--maroon); opacity:.55; }
.legal__list b{ font-weight:500; color:var(--ink); }

/* ---- callout: the one paragraph a reader must not skim past ---- */
.legal__note{ padding:1rem 1.15rem; border-left:2px solid var(--maroon);
  background:var(--surface); border-radius:0 8px 8px 0; }
.legal__note p{ font-size:clamp(13.5px,.4rem + .5vw,15px); line-height:1.7; color:var(--ink); }

/* ---- registered address and the like ---- */
.legal__addr{ font-family:var(--font-mono); font-size:11.5px; line-height:1.9;
  color:var(--ink-soft); font-style:normal; }
.legal__addr a{ color:var(--maroon); text-decoration:none; }
.legal__addr a:hover{ color:var(--maroon-soft); text-decoration:underline; text-underline-offset:.18em; }

.lsec__b a{ color:var(--maroon); text-decoration:none;
  border-bottom:1px solid rgba(122,48,48,.28); }
.lsec__b a:hover{ color:var(--maroon-soft); border-bottom-color:var(--maroon-soft); }

/* ---- closing panel ----
   Its own surface rather than more page. A hairline rule above it was doing the
   separating, which read as one more section break in a document already full
   of them; the panel's own edge does that job better and says "the document has
   ended, here is what to do next". */
.legal__closewrap{ padding:clamp(2.4rem,6vw,3.6rem) var(--pad) clamp(3rem,7vw,4.5rem); }
.legal__close{ position:relative; overflow:hidden;
  max-width:44rem; margin:0 auto; text-align:center;
  padding:clamp(2rem,5vw,3rem) clamp(1.4rem,4vw,2.6rem);
  border-radius:clamp(16px,2vw,22px);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(26,26,23,.03), 0 30px 60px -44px rgba(26,26,23,.4); }
/* a breath of the brand gold across the top edge, the same device the case
   study log band uses, so the panel belongs to the set */
.legal__close::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(201,169,106,.75), transparent); }
.legal__close__k{ color:var(--maroon); margin-bottom:.9rem; }
.legal__close h2{ font-family:var(--font-display); font-weight:400; color:var(--ink);
  font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); letter-spacing:-.015em; line-height:1.2; }
.legal__close__p{ margin:.7rem auto 1.5rem; max-width:40ch;
  font-size:clamp(13.5px,.4rem + .5vw,15px); color:var(--ink-soft); line-height:1.7; }
.legal__sib{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin-top:clamp(1.6rem,4vw,2.2rem);
  padding-top:clamp(1.4rem,3.5vw,2rem); border-top:1px solid var(--line); }
.legal__sib a{ font-family:var(--font-body); font-weight:500; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  text-decoration:none; padding:.75em 1.5em; border-radius:999px;
  border:1px solid rgba(26,26,23,.16);
  transition:border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease; }
.legal__sib a:hover{ color:var(--ink); border-color:rgba(122,48,48,.6);
  background:rgba(122,48,48,.05); transform:translateY(-1px); }
.legal__sib a[aria-current]{ color:var(--cream); background:var(--maroon); border-color:var(--maroon); }

@media (max-width:900px){
  /* the rail stops being a rail and becomes a plain contents list above the document */
  .legal__grid{ grid-template-columns:1fr; gap:2rem; }
  .legal__toc{ position:static; }
  /* Columns, not a two-track grid. A grid fills row first, so a numbered contents
     list read down the left column would go 1, 3, 5. Multi-column flows down then
     across, which is the order the sections are actually in. */
  .legal__toclist{ display:block; columns:2; column-gap:1.2rem;
    border-left:0; padding-left:0; }
  .legal__toclist li{ break-inside:avoid; }
  .legal__toclist a{ padding:.42rem 0; margin-left:0; border-left:0; }
  .legal__toclist a:hover{ border-left:0; color:var(--maroon); }
  /* no rail to draw against here, so the current section is marked by colour */
  .legal__toclist a[aria-current]{ border-left:0; color:var(--maroon); }
  .legal__doc{ max-width:none; }
}
@media (max-width:520px){
  .legal__toclist{ grid-template-columns:1fr; }
}