/* =============================================================================
   LEGAL PAGES (privacy.html, terms.html). The landing page's v3 type and
   chrome in plain black and white: white paper, black ink, a black footer.
   Loads after zinthi-tokens.css, which supplies weights, durations, radii and
   the focus ring; only the Z ramp is overridden, on the tokens' own selectors.
   ============================================================================= */
@font-face { font-family:'Geist'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(fonts/geist-var-latin.woff2) format('woff2'); }
@font-face { font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/schibsted-grotesk-var-latin.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/fraunces-600-latin.woff2) format('woff2'); }

:root {
  color-scheme:light;
  --fs-giant:clamp(2.75rem, 6.9vw, 8rem);
  --fs-title:clamp(1.375rem, 1.9vw, 2rem);
  --fs-lead:clamp(1.0625rem, 1.4vw, 1.5rem);
  --fs-read:clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:clamp(.9375rem, 1.1vw, 1.125rem);
  --gutter:clamp(1rem, 5.4vw, 5rem);
  --col-gap:clamp(1rem, 1.7vw, 1.5rem);
  --font-display:'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:'Geist', system-ui, -apple-system, sans-serif;
}
:root, [data-theme="light"] {
  --color-z-00:#FFFFFF; --color-z-01:#FFFFFF; --color-z-02:#F2F2F2; --color-z-03:#E8E8E8;
  --color-z-04:#DCDCDC; --color-z-05:#C8CACD; --color-z-06:#6B6E70; --color-z-07:#4D5153;
  --color-z-08:#404040; --color-z-09:#1B1B1C; --color-z-10:#000000;
  --text-primary:var(--color-z-10); --text-link:var(--color-z-10);
  color-scheme:light;
}
[data-theme="dark"] {
  --color-z-00:#000000; --color-z-01:#111111; --color-z-02:#1B1B1C; --color-z-03:#2C2C2D;
  --color-z-04:#363637; --color-z-05:#4D5153; --color-z-06:#949494; --color-z-07:#ABADAF;
  --color-z-08:#C8CACD; --color-z-09:#F2F2F2; --color-z-10:#FFFFFF;
  --text-primary:var(--color-z-10); --text-link:var(--color-z-10);
  color-scheme:dark;
}

/* Base */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:2rem; background:var(--surface-page); }
body {
  margin:0; background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-body); font-weight:var(--weight-medium); font-size:var(--fs-read); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3,p,ol,ul,figure { margin:0; }
ol,ul { padding:0; list-style:none; }
::selection { background:var(--text-primary); color:var(--surface-page); }
:focus-visible { outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm); }
@media (forced-colors: active) { :focus-visible { outline:2px solid CanvasText; outline-offset:2px; } }
.pad { padding-inline:var(--gutter); }
.grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); }
.skip { position:absolute; left:var(--gutter); top:-4rem; z-index:10; padding:.5rem .75rem; background:var(--text-primary); color:var(--surface-page); }
.skip:focus { top:1rem; }

/* Underlined text link, as on the landing page */
.u {
  display:inline-flex; align-items:center; gap:.35em; padding-block:.35em .3em;
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% var(--border-thin) no-repeat;
  transition:background-size var(--duration-slower) var(--ease-editorial);
}
.u:hover { background-size:0 var(--border-thin); background-position:100% 100%; }
.plain { display:inline-flex; align-items:center; min-height:44px; transition:opacity var(--duration-normal) var(--ease-out); }
.plain:hover { opacity:.6; }

/* Nav: static, the landing page's top bar without the scroll behaviour */
.lnav { display:flex; align-items:center; gap:var(--col-gap); height:clamp(64px, 8.4vw, 124px); font-size:var(--fs-lead); }
.brand { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; }
.mark { width:clamp(1.75rem, 2.3vw, 2.5rem); height:clamp(1.75rem, 2.3vw, 2.5rem); flex-shrink:0; }
.wordmark { font-family:var(--font-brand); font-size:clamp(var(--text-xl), 1.9vw, 1.875rem); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight); line-height:1; }
.lnav-links { display:flex; gap:clamp(1.25rem, 2.6vw, 2.5rem); margin-inline:auto; }
.lnav-links a[aria-current="page"] { background:linear-gradient(currentColor,currentColor) 0 100% / 100% var(--border-thin) no-repeat; }
.lnav-end { margin-left:auto; }

/* Title block */
.doc-head { padding-top:clamp(3.5rem, 9vw, 9rem); padding-bottom:clamp(3rem, 6vw, 6rem); align-items:end; row-gap:2rem; }
.doc-kicker { grid-column:1 / span 3; font-size:var(--fs-lead); text-transform:uppercase; line-height:1.38; align-self:start; padding-top:.6em; }
.doc-head h1 {
  grid-column:4 / -1; font-family:var(--font-display); font-weight:var(--weight-medium); font-size:var(--fs-giant);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.doc-meta { grid-column:4 / -1; font-size:var(--fs-lead); color:var(--text-secondary); line-height:1.38; }

/* Body: contents on the left, the text in a readable measure on the right */
.doc-body { border-top:var(--border-hairline) solid var(--border-default); padding-top:clamp(2.5rem, 5vw, 4.5rem); padding-bottom:clamp(6rem, 13vw, 12rem); align-items:start; }
.toc { grid-column:1 / span 3; position:sticky; top:2rem; font-size:var(--fs-small); }
.toc p { text-transform:uppercase; margin-bottom:1rem; }
.toc a { display:flex; gap:.75em; padding-block:.3rem; color:var(--text-muted); transition:color var(--duration-normal) var(--ease-out); }
.toc a span { font-variant-numeric:tabular-nums; min-width:1.5em; }
.toc a:hover, .toc a.is-on { color:var(--text-primary); }

.prose { grid-column:4 / span 7; max-width:44rem; }
.prose .intro { color:var(--text-primary); font-size:var(--fs-lead); line-height:1.38; margin-bottom:clamp(3rem, 5vw, 4.5rem); text-wrap:pretty; }
.prose section { padding-top:clamp(2rem, 3.5vw, 3rem); margin-top:clamp(2rem, 3.5vw, 3rem); border-top:var(--border-hairline) solid var(--border-subtle); }
.prose section:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.prose h2 { display:flex; gap:.75em; font-size:var(--fs-title); font-weight:var(--weight-medium); letter-spacing:-.01em; line-height:1.2; margin-bottom:1.25rem; }
.prose h2 .num { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.prose p, .prose li { color:var(--text-secondary); text-wrap:pretty; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top:1rem; }
.prose ul li { position:relative; padding-left:1.5rem; }
.prose ul li + li { margin-top:.6rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.8em; width:.6rem; height:var(--border-thin); background:currentColor; }
.prose strong { color:var(--text-primary); font-weight:var(--weight-semibold); }
.prose code { color:var(--text-primary); font-family:var(--font-mono); font-size:.88em; overflow-wrap:anywhere; }
.prose a { color:var(--text-primary); text-decoration:underline; text-decoration-thickness:var(--border-thin); text-underline-offset:.2em; text-decoration-color:var(--border-default); transition:text-decoration-color var(--duration-normal) var(--ease-out); }
.prose a:hover { text-decoration-color:currentColor; }

/* Footer: black, signed with the wordmark, as on the landing page */
.foot { background:var(--surface-page); color:var(--text-primary); padding-top:clamp(1.5rem, 2.2vw, 2.25rem); overflow:hidden; }
.foot-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--col-gap); }
.foot-top .mark { width:clamp(2.75rem, 3.6vw, 3.75rem); height:auto; }
.foot-word { font-family:var(--font-brand); font-size:clamp(4.5rem, 22vw, 26rem); font-weight:var(--weight-semibold); letter-spacing:-.02em; line-height:.8; padding-bottom:.08em; white-space:nowrap; }
.foot-grid { margin-top:clamp(4rem, 9vw, 8.5rem); padding-top:clamp(2.5rem, 4vw, 3.5rem); border-top:var(--border-hairline) solid var(--border-subtle); row-gap:2.5rem; }
.foot-col { grid-column:span 2; }
.foot-col h2 { font-size:var(--fs-lead); font-weight:var(--weight-medium); margin-bottom:.75rem; }
.foot-col a { display:inline-flex; align-items:center; min-height:40px; font-size:var(--fs-lead); color:var(--text-secondary); transition:color var(--duration-normal) var(--ease-out); }
.foot-col a:hover, .foot-col a[aria-current="page"] { color:var(--text-primary); }
.foot-ask { grid-column:8 / -1; }
.foot-ask p { font-size:var(--fs-lead); line-height:1.38; max-width:30ch; }
.foot-ask .u { margin-top:1.5rem; font-family:var(--font-display); font-size:clamp(var(--text-2xl), 2.6vw, var(--text-4xl)); letter-spacing:-.01em; }
.foot-legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem; align-items:center; margin-top:clamp(4rem, 8vw, 7rem); padding-block:1.75rem; font-size:var(--fs-small); }
.to-top { gap:.4em; }
.to-top svg { transform:rotate(-90deg); width:.9em; height:.9em; }

@media (max-width:1100px) {
  .foot-col { grid-column:span 3; }
  .foot-ask { grid-column:1 / -1; }
}
@media (max-width:900px) {
  .lnav-links { display:none; }
  .doc-kicker, .doc-head h1, .doc-meta { grid-column:1 / -1; }
  .doc-kicker { padding-top:0; }
  .toc { grid-column:1 / -1; position:static; margin-bottom:clamp(3rem, 8vw, 4rem); }
  .toc ol { columns:2; column-gap:var(--col-gap); }
  .toc li { break-inside:avoid; }
  .prose { grid-column:1 / -1; }
}
@media (max-width:700px) {
  :root { --fs-giant:15vw; }
  .toc ol { columns:1; }
  .foot-top { flex-direction:column; gap:2rem; }
  .foot-word { font-size:31vw; }
  .foot-col { grid-column:span 6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:0s !important; }
}
