/* ============================================================
   Legal subpages — STONE system.
   Same ground, type and restraint as the homepage. These are
   long-form reading, so measure and contrast matter more than
   effect: no decoration that competes with the text.
   ============================================================ */
:root{
  --ground:    oklch(0.145 0.008 70);
  --ground-2:  oklch(0.185 0.008 70);
  --ink:       oklch(0.935 0.008 80);
  --ink-2:     oklch(0.745 0.007 78);
  --ink-3:     oklch(0.640 0.006 74);   /* 5.88:1 on ground */
  --hair:      oklch(0.935 0.008 80 / .16);
  --hair-soft: oklch(0.935 0.008 80 / .085);

  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;

  --pad: clamp(1.35rem, 5vw, 5.5rem);
  --ease: cubic-bezier(.22,1,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--ground); scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink-2);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1rem,.95rem + .2vw,1.08rem); line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair);
  transition:border-color .5s var(--ease)}
a:hover{border-bottom-color:var(--ink)}
::selection{background:var(--ink); color:var(--ground)}
:focus-visible{outline:1px solid var(--ink); outline-offset:3px}

.wrap{max-width:1360px; margin-inline:auto; padding-inline:var(--pad)}

/* ---------- nav ---------- */
nav{position:relative; z-index:3}
.nav-inner{max-width:1360px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:2rem; height:74px}
.mark{min-height:44px; display:inline-flex; align-items:center;
  font-family:var(--serif); font-weight:400; font-size:1.05rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); border:0}
.back{margin-left:auto; font-family:var(--sans); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); border:0; transition:color .5s var(--ease)}
.back:hover{color:var(--ink)}

/* ---------- page header ---------- */
header.page{position:relative; overflow:hidden; border-bottom:1px solid var(--hair-soft)}
header.page .bed{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
header.page .bed video{width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) sepia(.1) brightness(.62) contrast(1.04); opacity:.2}
header.page::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 110% at 50% 40%, transparent 10%, var(--ground) 92%)}
.head-in{position:relative; z-index:1; padding-block:clamp(3.5rem,12vh,7rem)}
.label{display:block; font-family:var(--sans); font-size:.685rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3)}
header.page h1{margin:1.3rem 0 0; font-family:var(--serif); font-weight:300; color:var(--ink);
  font-size:clamp(2.2rem,1.5rem + 3vw,4rem); line-height:1.06; letter-spacing:-.014em;
  text-wrap:balance}
.updated{margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--hair-soft);
  font-family:var(--sans); font-size:.685rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3)}

/* ---------- long-form body ---------- */
main{padding-block:clamp(3rem,8vh,5.5rem) clamp(4rem,10vh,7rem)}
/* constrain the measure on the children, so the column starts on the same
   left edge as the page header instead of floating centred away from it */
main .wrap > *{max-width:72ch}
main p{margin:0 0 1.15rem; text-wrap:pretty}
main strong{color:var(--ink); font-weight:400}
main h2{margin:clamp(2.6rem,6vh,4rem) 0 1.1rem; font-family:var(--serif); font-weight:300;
  color:var(--ink); font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem); line-height:1.14;
  letter-spacing:-.012em; padding-top:1.6rem; border-top:1px solid var(--hair-soft);
  text-wrap:balance}
main h2:first-of-type{margin-top:clamp(2rem,5vh,3rem)}
main h3{margin:2rem 0 .7rem; font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.08rem,1rem + .4vw,1.25rem); line-height:1.3}
main ul,main ol{margin:0 0 1.15rem; padding-left:1.15rem}
main li{margin-bottom:.5rem}
main li::marker{color:var(--ink-3)}
main table{width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.95rem}
main th,main td{text-align:left; padding:.75rem .9rem .75rem 0;
  border-bottom:1px solid var(--hair-soft); vertical-align:top}
main th{font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair-soft); padding-block:clamp(2.5rem,6vh,3.5rem) 2rem}
.foot-in{max-width:1360px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; flex-wrap:wrap; gap:1.4rem 3rem; justify-content:space-between; align-items:baseline}
.foot-links{display:flex; flex-wrap:wrap; gap:1.5rem}
.foot-links a,.foot-in .label{border:0}
.foot-links a{font-family:var(--sans); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); transition:color .5s var(--ease)}
.foot-links a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}