/* ═══════════════════════════════════════════════════════════════
   Kalmit s. r. o. — long-form document layout.
   Used by privacy.html, terms.html, cookies.html.

   Legal pages are read, not scanned, so the measure narrows to ~68ch
   and the type scale drops. Same tokens as site.css — no new palette.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page head ─────────────────────────────────────────────── */
.doc__head{
  padding:calc(76px + clamp(44px,6vh,76px)) var(--gut) clamp(28px,4vh,44px);
  border-bottom:1px solid var(--border);
}
.doc__head h1{
  font-size:clamp(32px,5vw,64px);
  max-width:18ch;
  margin:14px 0 20px;
}
.doc__meta{
  display:flex; gap:28px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.doc__meta b{ font-weight:400; color:var(--fg); }

/* Lead banner — the one statement a reader should not miss. */
.doc__notice{
  margin:26px 0 0;
  max-width:78ch;
  border:1px solid var(--fg);
  padding:16px 20px;
  font-size:13.5px; font-weight:300; line-height:1.65;
}
.doc__notice strong{
  display:block;
  font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:8px;
}

/* ── Body layout ───────────────────────────────────────────── */
.doc{
  display:grid;
  grid-template-columns:216px minmax(0,1fr);
  gap:clamp(28px,5vw,80px);
  padding:clamp(32px,5vh,56px) var(--gut) var(--band);
  align-items:start;
}
.doc__nav{ position:sticky; top:100px; }
.doc__nav h2{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
  padding-bottom:14px; border-bottom:1px solid var(--border);
}
.doc__nav ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.doc__nav li{ counter-increment:toc; }
.doc__nav a{
  display:flex; gap:10px;
  padding:8px 0;
  font-size:13.5px; font-weight:300; line-height:1.45;
  color:var(--muted);
  transition:color .25s var(--ease);
}
.doc__nav a::before{
  content:counter(toc,decimal-leading-zero);
  font-size:10px; letter-spacing:.1em; padding-top:3px;
  flex:none;
}
/* Hover deepens toward full black — contrast rises, never falls. */
.doc__nav a:hover{ color:var(--fg); }

.doc__body{ max-width:68ch; }
.doc__body section{
  padding-top:clamp(30px,4vh,46px);
  scroll-margin-top:100px;   /* clears the fixed header on anchor jumps */
}
.doc__body section:first-child{ padding-top:0; }
.doc__body h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(23px,2.6vw,34px);
  line-height:1.2; margin-bottom:16px;
  text-wrap:balance;
}
.doc__body h3{
  font-size:13px; font-weight:500;
  letter-spacing:.04em;
  margin:26px 0 10px;
}
.doc__body p{
  font-size:15px; font-weight:300; line-height:1.75;
  color:var(--muted);
  text-wrap:pretty;
}
.doc__body p + p{ margin-top:14px; }
.doc__body ul{
  margin:14px 0 0; padding:0; list-style:none;
}
.doc__body li{
  position:relative;
  padding-left:20px; margin-top:9px;
  font-size:15px; font-weight:300; line-height:1.7;
  color:var(--muted);
}
.doc__body li::before{
  content:""; position:absolute;
  left:2px; top:12px;
  width:6px; height:1px; background:var(--muted);
}
.doc__body a:not(.ftr__link){
  color:var(--fg);
  border-bottom:1px solid var(--border);
  transition:border-color .25s var(--ease);
}
.doc__body a:not(.ftr__link):hover{ border-bottom-color:var(--fg); }

/* Definition-style rows for retention periods, categories, etc. */
.doc__table{
  margin-top:18px;
  border-top:1px solid var(--border);
}
.doc__table > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:20px;
  padding:14px 2px;
  border-bottom:1px solid var(--border);
}
.doc__table dt{
  font-size:13px; font-weight:400;
}
.doc__table dd{
  margin:0;
  font-size:14px; font-weight:300; line-height:1.6;
  color:var(--muted);
}


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:900px){
  .doc{ grid-template-columns:1fr; gap:0; }
  .doc__nav{
    position:static;
    padding-bottom:26px; margin-bottom:8px;
    border-bottom:1px solid var(--border);
  }
  .doc__nav ol{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px;
  }
  .doc__body{ max-width:none; }
}
@media (max-width:560px){
  .doc__nav ol{ grid-template-columns:1fr; }
  .doc__table > div{ grid-template-columns:1fr; gap:4px; }}