/* Legal pages: the same world, quieter. Long-form reading first. */

.legal{ position:relative; z-index:1; padding:calc(84px + clamp(40px,6vw,80px)) 0 clamp(60px,8vw,110px); }
.legal .wrap{ max-width:760px; }

.legal h1{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2rem,5vw,3.2rem); line-height:1.05; letter-spacing:-.03em;
  color:var(--paper); margin:0 0 10px;
}
.legal .legal__sub{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ochre); margin:0 0 clamp(30px,5vw,56px); }

.legal h2{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.25rem,2.6vw,1.7rem);
  color:var(--paper); margin:clamp(38px,5vw,60px) 0 14px; letter-spacing:-.015em;
  padding-top:22px; border-top:1px solid rgba(110,135,121,.18);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.legal h3{ font-family:var(--f-body); font-weight:600; font-size:1.02rem; color:#C6D2C8;
  margin:26px 0 8px; }

.legal p, .legal li{ color:#A8BAAD; }
.legal p{ margin:0 0 1.05em; }
.legal ul, .legal ol{ margin:0 0 1.2em; padding-left:1.2em; display:grid; gap:.5em; }
.legal a{ color:var(--ochre-soft); word-break:break-word; }
.legal address{ font-style:normal; color:#C6D2C8; margin:0 0 1.05em; line-height:1.75; }

.legal .quiet{ font-size:.86rem; color:var(--reed); }
.legal .caps{ font-size:.88rem; color:#93A899; background:rgba(46,68,56,.28);
  border-left:2px solid var(--reed); padding:16px 18px; border-radius:2px; }

.legal .back{
  display:inline-flex; align-items:center; gap:.55em; margin-top:clamp(40px,6vw,70px);
  font-weight:600; color:var(--ochre-soft); text-decoration:none;
}
.legal .back::before{ content:"←"; transition:transform .4s var(--ease-out); }
.legal .back:hover::before{ transform:translateX(-4px); }

/* ── touch targets on the legal pages ────────────────────────────────────
   Same rule as the main page: a finger, not a cursor. ".back" is the only
   real navigation on these pages, so it matters most. */
@media (hover:none) and (pointer:coarse), (max-width:900px){
  .back{ padding-block:10px; }
  /* An inline link inside a paragraph cannot become a block without breaking
     the sentence, so the hit area grows around the text instead. */
  .legal a, .quiet a{ display:inline-block; padding-block:12px; margin-block:-12px; }
}