/* ============================================================
   DEMSEN - LEGAL PAGES (privacy, terms)
   The long-form document layer: a numbered contents rail beside
   a single readable column. Same face, same greys, same single
   orange accent, same header and footer as the rest of the site.

   Loads after site.css and depends on its tokens. The legal
   wording itself is untouched by anything in this file.
   ============================================================ */

body.legal{ background:var(--paper); }

/* ============================================================
   DOCUMENT HEADER
   ============================================================ */
.doc-hero{
  padding-top:calc(var(--header-h) + clamp(64px,10vh,120px));
  padding-bottom:clamp(44px,6vh,72px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(48px,7vh,88px);
}
.doc-title{
  font-size:clamp(2.6rem,1.7rem + 3.4vw,4.25rem); line-height:1.02;
  letter-spacing:-.04em; color:var(--ink); margin:0;
}
.doc-updated{
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin:var(--s-3) 0 0;
}
.doc-sub{
  font-size:var(--fs-lede); line-height:1.62; color:var(--ink-body);
  max-width:56ch; margin:var(--s-3) 0 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.doc-layout{
  display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(32px,5vw,88px); align-items:start;
  padding-bottom:clamp(72px,10vh,128px);
}

/* ---------- contents rail (desktop) ---------- */
.toc{ position:sticky; top:calc(var(--header-h) + 40px); }
.toc-cap{
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-muted); margin:0 0 var(--s-3);
}
.toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.toc a{
  display:grid; grid-template-columns:2.4em 1fr; gap:2px;
  padding:9px 0 9px 16px; margin-left:-1px;
  border-left:1px solid transparent;
  font-size:.8125rem; line-height:1.45; color:var(--ink-muted);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.toc a .n{ font-family:var(--mono); font-size:.6875rem; color:var(--ink-muted); }
.toc a:hover{ color:var(--ink); }
.toc a.active{ color:var(--accent); border-left-color:var(--accent); }
.toc a.active .n{ color:var(--accent); }

/* ---------- contents (mobile jump menu) ---------- */
.toc-mobile{ display:none; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--s-5); }
.toc-mobile summary{
  cursor:pointer; list-style:none; padding:16px 18px;
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); display:flex; align-items:center; justify-content:space-between;
}
.toc-mobile summary::-webkit-details-marker{ display:none; }
.toc-mobile .tgl{ position:relative; width:14px; height:14px; color:var(--accent); }
.toc-mobile .tgl::before,.toc-mobile .tgl::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.toc-mobile .tgl::before{ width:12px; height:1.5px; }
.toc-mobile .tgl::after{ width:1.5px; height:12px; }
.toc-mobile[open] .tgl::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.toc-mobile ol{ list-style:none; margin:0; padding:0 18px 14px; }
.toc-mobile a{
  display:grid; grid-template-columns:2.6em 1fr; padding:9px 0;
  font-size:.875rem; color:var(--ink-body); border-top:1px solid var(--line);
}
.toc-mobile a .n{ font-family:var(--mono); font-size:.6875rem; color:var(--ink-muted); }
.toc-mobile a:hover{ color:var(--accent); }

/* ============================================================
   THE DOCUMENT
   ============================================================ */
.doc{ max-width:72ch; }
.doc-intro p{
  font-size:var(--fs-lede); line-height:1.7; color:var(--ink); margin:0 0 clamp(40px,5vw,60px);
  padding-bottom:clamp(32px,4vw,44px); border-bottom:1px solid var(--line);
}
.doc-sec{ scroll-margin-top:calc(var(--header-h) + 32px); padding-bottom:clamp(36px,4.4vw,52px); }
.doc-sec h2{
  display:flex; align-items:baseline; gap:16px;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem); line-height:1.2; letter-spacing:-.028em;
  color:var(--ink); margin:0 0 var(--s-3);
}
.doc-sec h2 .sec-n{
  font-family:var(--mono); font-weight:500; font-size:.6875rem; letter-spacing:.2em;
  color:var(--accent); flex:none;
}
.doc-sec h3{
  font-size:1.0625rem; letter-spacing:-.015em; color:var(--ink);
  margin:clamp(26px,3vw,34px) 0 var(--s-2);
}
.doc-sec p{ margin:0 0 1.05em; color:var(--ink-body); font-size:.9375rem; line-height:1.8; }
.doc-sec ul,.doc-sec ol{ margin:0 0 1.15em; padding-left:1.2em; color:var(--ink-body); }
.doc-sec li{ margin:0 0 .6em; font-size:.9375rem; line-height:1.8; }
.doc-sec li::marker{ color:var(--accent); }
.doc-sec strong{ color:var(--ink); font-weight:600; }
.doc-sec a{
  color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent);
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color var(--hover) var(--ease);
}
.doc-sec a:hover{ color:var(--accent); }
.doc-sec table{ width:100%; border-collapse:collapse; margin:0 0 1.3em; font-size:.875rem; }
.doc-sec th,.doc-sec td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); }
.doc-sec th{ font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); }

/* ---------- document footer ---------- */
.doc-next{
  display:flex; flex-wrap:wrap; gap:20px 32px; justify-content:space-between; align-items:flex-end;
  margin-top:clamp(40px,5vw,64px); padding-top:var(--s-4); border-top:1px solid var(--line);
}
.doc-next .cap{
  display:block; font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px;
}
.top-link{
  font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-muted);
  transition:color var(--hover) var(--ease);
}
.top-link:hover{ color:var(--accent); }

/* ============================================================
   LOAD-IN
   The document header is above the fold, so it fades in on load
   rather than waiting on a scroll observer. Final state is the
   resting state, so a blocked script changes nothing.
   ============================================================ */
html.js .rise{ animation:docRise .8s var(--ease-out) both; }
html.js .rise.d1{ animation-delay:.04s; }
html.js .rise.d2{ animation-delay:.12s; }
html.js .rise.d3{ animation-delay:.2s; }
@keyframes docRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .doc-layout{ grid-template-columns:1fr; }
  .toc{ display:none; }
  .toc-mobile{ display:block; }
  .doc{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  html.js .rise{ animation:none; }
}