/* =========================================================
   SATORI LIFE TECH · legal documents
   Loaded only by /privacy/ and /terms/, after styles.css.
   Inherits every token from styles.css :root — this file adds
   the reading column and nothing else.

   Contrast note: --gold-2 on --cream measures 2.92:1, below the
   4.5:1 floor for body text. Gold is therefore confined to the
   dark header band (7.1:1 on --abyss); prose links use --teal
   (8.6:1 on --cream).
   ========================================================= */

/* styles.css sets html,body{overflow-x:hidden}, which makes the body a
   scroll container and silently kills position:sticky on the contents rail.
   `clip` gives the same horizontal safety net without creating one. Browsers
   that don't know `clip` drop this line and keep the hidden behaviour. */
html,body{overflow-x:clip}

/* =============== DOCUMENT HEADER =============== */
.lg-head{
  background:var(--abyss);color:var(--cream);
  border-bottom:1px solid var(--line);
}
.lg-head-inner{
  max-width:1440px;margin:0 auto;
  padding:104px 44px 88px;
}
.lg-head .display{max-width:14ch}
.lg-meta{
  margin-top:30px;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(244,239,230,.62);
}
.lg-meta span+span::before{content:"·";margin:0 12px;opacity:.5}
.lg-summary{
  font-family:var(--serif-cn);font-weight:300;
  font-size:18px;line-height:1.9;
  color:rgba(244,239,230,.8);
  max-width:62ch;margin-top:34px;
}

/* =============== READING GRID =============== */
.lg-wrap{
  max-width:1440px;margin:0 auto;
  padding:84px 44px 128px;
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:80px;align-items:start;
}

/* --- Contents rail --- */
.lg-toc{position:sticky;top:104px}
.lg-toc h2{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  font-weight:500;color:rgba(18,36,43,.7);
  padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid var(--line-d);
}
.lg-toc ol{list-style:none;counter-reset:toc}
.lg-toc li{counter-increment:toc}
.lg-toc a{
  display:flex;gap:12px;
  padding:9px 0;font-size:13px;line-height:1.5;
  color:rgba(18,36,43,.72);
  transition:color .3s;
}
.lg-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-size:11px;letter-spacing:.1em;padding-top:2px;
  /* .45 alpha measured 2.70:1 against --cream — under the floor for text
     this small. .70 lands at 5.59:1; the size step carries the hierarchy. */
  color:rgba(18,36,43,.7);
  font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.lg-toc a:hover{color:var(--teal)}
.lg-toc a:hover::before{color:var(--gold-2)}

/* --- Prose --- */
.lg-body{max-width:70ch}
.lg-body > section{scroll-margin-top:104px}
.lg-body h2{
  font-family:var(--serif-cn);font-weight:500;
  font-size:clamp(23px,2.2vw,30px);line-height:1.32;
  letter-spacing:-.01em;color:var(--abyss);
  margin:68px 0 22px;text-wrap:balance;
}
.lg-body > section:first-child h2{margin-top:0}
.lg-body h3{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--teal);
  margin:34px 0 12px;
}
.lg-body p{
  font-size:16px;line-height:1.85;
  color:rgba(18,36,43,.82);
  margin-bottom:18px;
}
.lg-body p:last-child{margin-bottom:0}
.lg-body ul{list-style:none;margin:0 0 18px}
.lg-body li{
  position:relative;padding-left:26px;margin-bottom:12px;
  font-size:16px;line-height:1.8;color:rgba(18,36,43,.82);
}
.lg-body li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--gold-2);
}
.lg-body strong{font-weight:600;color:var(--abyss)}
.lg-body a{
  color:var(--teal);
  text-decoration:underline;
  text-decoration-color:rgba(201,169,97,.75);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .3s,text-decoration-color .3s;
}
.lg-body a:hover{color:var(--abyss);text-decoration-color:var(--gold-2)}

/* Address / contact block */
.lg-card{
  margin-top:26px;padding:30px 32px;
  background:rgba(20,40,50,.035);
  border-left:1px solid var(--gold);
}
.lg-card p{margin-bottom:6px;font-size:15px}
.lg-card p:last-child{margin-bottom:0}

/* Closing note */
.lg-note{
  margin-top:76px;padding-top:26px;
  border-top:1px solid var(--line-d);
  font-size:13px;line-height:1.8;
  color:rgba(18,36,43,.7);
}

/* =============== BROWSER SURFACES =============== */
::selection{background:var(--gold);color:var(--abyss)}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
html{scrollbar-color:var(--gold-2) rgba(20,40,50,.07)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(20,40,50,.07)}
::-webkit-scrollbar-thumb{background:var(--gold-2);border:3px solid var(--cream)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* =============== RESPONSIVE =============== */
@media (max-width:1080px){
  .lg-head-inner{padding:72px 22px 60px}
  .lg-wrap{
    grid-template-columns:1fr;gap:52px;
    padding:56px 22px 96px;
  }
  .lg-toc{position:static}
  .lg-toc ol{
    display:grid;grid-template-columns:1fr 1fr;
    gap:0 28px;
  }
  .lg-body h2{margin-top:56px}
}
@media (max-width:620px){
  .lg-toc ol{grid-template-columns:1fr}
}