/* Kingswell Publishing
   /privacy-policy  —  legal document: sticky contents nav + illustration
   Tokens (ink / teal / mint / gold / paper) live in tokens.css. */

body.page-flat .pp{ background:var(--paper); }

.pp{
  padding-block:clamp(120px,15vh,180px) clamp(70px,10vw,130px);
  color:var(--ink);
}

.pp__grid{
  display:grid;
  grid-template-columns:210px minmax(0,1fr) 280px;
  column-gap:clamp(28px,4vw,64px);
  align-items:start;
}
/* /services: open books behind the page, washed with paper so the text stays readable */
/* The image sits on its own viewport-sized fixed layer rather than using
   background-attachment:fixed. That property, combined with the animated
   (blurred / transformed) text, stops Chrome from painting the page content.
   clip-path keeps the fixed layer inside this section, so it never shows behind the footer. */
body.page-flat .pp.pp--books{
  position:relative;isolation:isolate;
  clip-path:inset(0);
  background:var(--paper);
}
.pp--books::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(234,244,241,.86), rgba(234,244,241,.86)),   /* --paper at 86% */
    url("../assets/services-bg.jpg");
  background-size:cover;background-repeat:no-repeat;
  background-position:center, center var(--bg-y,0%);   /* --bg-y drifts on scroll (services.js) */
}

.pp--books .pp__h2{ transition:color .3s var(--ease-out-expo); }
.pp--books .pp__h2:hover{ color:var(--teal); }

/* contents nav: gold dots; the service in view (set by services.js) goes teal */
.pp--books .pp__toc li::before{
  background:var(--mint);
  transition:transform .4s var(--ease-out-expo);
}
.pp--books .pp__toc a{ display:inline-block;transition:color .3s, transform .4s var(--ease-out-expo); }
.pp--books .pp__toc a:hover,
.pp--books .pp__toc li.is-current a{ color:var(--teal);transform:translateX(4px); }
.pp--books .pp__toc li.is-current::before{ transform:scale(1.6); }
.pp--books .pp__toc ul{ padding-left:3px; }   /* room for the enlarged dot; the nav's overflow would clip it */

/* "What we do" items nudge right on hover, dot grows */
.pp--books .pp__ul li{ transition:transform .35s var(--ease-out-expo), color .3s; }
.pp--books .pp__ul li::before{ transition:transform .35s var(--ease-out-expo); }
.pp--books .pp__ul li:hover{ transform:translateX(6px);color:var(--ink); }
.pp--books .pp__ul li:hover::before{ transform:scale(1.5); }

/* /about: scattered book pages instead of open books. Covers the viewport-sized
   fixed layer (tiling showed hard seams); the paper wash hides the slight upscale. */
.pp--about::before{
  background-image:
    linear-gradient(rgba(234,244,241,.84), rgba(234,244,241,.84)),   /* --paper at 84% */
    url("../assets/about-bg.jpg");
}

/* /services uses this layout too, without the illustration column */
.pp__grid--no-aside{ grid-template-columns:210px minmax(0,1fr); }
@media (max-width:1180px){
  .pp__grid{ grid-template-columns:200px minmax(0,1fr); }
  .pp__aside{ display:none; }
}
@media (max-width:820px){
  .pp__grid{ grid-template-columns:1fr; }
  .pp__toc{ display:none; }
}

/* ---------- contents nav ---------- */
.pp__toc{
  position:sticky;top:96px;
  font-size:13.5px;line-height:1.5;
  max-height:calc(100vh - 130px);overflow-y:auto;
}
.pp__toc-head{
  font-family:Unbounded,serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(7,33,31,.45);margin-bottom:14px;
}
.pp__toc ul{ display:grid;gap:10px; }
.pp__toc li{ position:relative;padding-left:18px; }
.pp__toc li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.pp__toc a{ color:rgba(7,33,31,.72); }
.pp__toc a:hover{ color:var(--teal); }

/* ---------- document ---------- */
.pp__doc{ max-width:760px;min-width:0; }
.pp__header{ margin-bottom:clamp(36px,5vw,56px); }
.pp__title{
  font-size:clamp(40px,6vw,72px);
  padding-bottom:.18em;
  border-bottom:3px solid var(--gold);
  display:inline-block;
}
.pp__updated{
  margin-top:1em;font-size:14px;color:rgba(7,33,31,.55);
}

.pp__section{
  margin-bottom:clamp(34px,4.5vw,52px);
  scroll-margin-top:96px;
}
.pp__h2{
  font-family:Unbounded,serif;font-weight:400;letter-spacing:-0.02em;
  font-size:clamp(23px,2.6vw,32px);line-height:1.15;
  margin-bottom:.7em;
}
.pp__h3{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;
  font-size:15.5px;letter-spacing:-0.005em;
  margin:1.6em 0 .5em;
}
.pp__p{
  font-size:15px;line-height:1.7;color:rgba(7,33,31,.8);
  margin-bottom:1em;max-width:66ch;
}
.pp__p a{
  color:var(--teal);text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:anywhere;
}
.pp__ul{
  list-style:none;margin:0 0 1.2em;display:grid;gap:.5em;max-width:66ch;
}
.pp__ul li{
  position:relative;padding-left:1.6em;
  font-size:15px;line-height:1.6;color:rgba(7,33,31,.8);
}
.pp__ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--teal);
}
/* /services: the bright site gold, drawn as a background so services.js can sweep it in */
.pp__title--bright{
  border-bottom:0;padding-bottom:calc(.18em + 3px);
  background:linear-gradient(var(--mint),var(--mint)) left bottom / 100% 3px no-repeat;
}
.pp__intro{ margin-top:1.4em;margin-bottom:0;font-size:16px; }
.pp__intro + .pp__intro{ margin-top:.8em; }
.pp__label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
}
.pp__lines{
  font-size:15px;line-height:1.8;color:rgba(7,33,31,.8);
  margin-bottom:1.2em;
}