/* ===========================================================================
   legal.css — privacy notice, terms of sale, cookie policy.

   Restraint only, like the contact page. These are pages someone reads when
   they are worried about something or about to spend £295. Nothing animates,
   nothing fades in, nothing is between them and the text.

   Measure is capped at 68 characters. Longform face, generous leading.
   =========================================================================== */

.legal{
  padding:calc(var(--page-header-h) + var(--sp-4)) var(--sp-2) var(--sp-5);
  background:var(--plaster-000);
  min-height:calc(100svh - var(--page-header-h));
}
.legal__inner{ width:100%; max-width:760px; margin:0 auto; }

.legal h1{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(34px,5vw,54px); line-height:1.08;
  margin:0 0 var(--sp-2); color:var(--umber-900);
}
.legal__meta{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--on-light-3);
  margin:0 0 var(--sp-4); padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--on-light-4);
}
.legal__lead{
  font-family:var(--font-longform); font-size:var(--t-lead); line-height:1.6;
  color:var(--on-light-1); margin:0 0 var(--sp-4);
}

.legal h2{
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(21px,2.4vw,27px); line-height:1.2;
  margin:var(--sp-4) 0 var(--sp-2); color:var(--umber-900);
  padding-top:var(--sp-2); border-top:1px solid var(--on-light-4);
}
.legal h3{
  font-family:var(--font-sans); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-light-2);
  margin:var(--sp-3) 0 8px;
}
.legal p, .legal li{
  font-family:var(--font-longform); font-size:16px; line-height:1.7;
  color:var(--on-light-1); margin:0 0 var(--sp-2);
}
.legal ul{ margin:0 0 var(--sp-2); padding-left:1.15em; }
.legal li{ margin-bottom:8px; }
.legal strong{ font-weight:600; color:var(--umber-900); }

.legal a{
  color:var(--umber-900); text-decoration:none;
  border-bottom:1px solid var(--on-light-4);
  transition:color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui);
}
.legal a:hover, .legal a:focus-visible{ color:var(--gold); border-bottom-color:var(--gold); }

/* A plain table for things that are genuinely tabular: what is collected,
   what it is for, how long it is kept. Reads down on a phone. */
.legal-table{ width:100%; border-collapse:collapse; margin:0 0 var(--sp-3); }
.legal-table th{
  font-family:var(--font-sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--on-light-3); text-align:left;
  font-weight:400; padding:0 var(--sp-2) 8px 0;
  border-bottom:1px solid var(--on-light-4);
}
.legal-table td{
  font-family:var(--font-longform); font-size:15px; line-height:1.6;
  color:var(--on-light-1); vertical-align:top;
  padding:12px var(--sp-2) 12px 0; border-bottom:1px solid var(--on-light-5,rgba(0,0,0,.07));
}
@media (max-width:640px){
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{ display:block; width:100%; }
  .legal-table thead{ display:none; }
  .legal-table tr{ padding:var(--sp-2) 0; border-bottom:1px solid var(--on-light-4); }
  .legal-table td{ border:0; padding:0 0 6px; }
  .legal-table td:first-child{ font-weight:600; color:var(--umber-900); }
}

/* A blank that Siris still has to fill in. Deliberately loud: a legal page
   that goes live with a placeholder still in it is worse than no page.
   Once every one of these is filled, this rule can be deleted. */
.legal-fill{
  background:var(--gold); color:#16130f;
  font-family:var(--font-sans); font-size:.85em; letter-spacing:.06em;
  padding:1px 6px; border-radius:2px; white-space:nowrap;
}

@media print{
  .legal{ padding:0; background:#fff; }
  .legal-fill{ background:none; border:1px solid #000; }
}