/* ════════════════════════════════════════════════════════════════════════
   THE CHARTER  ·  shared legal-document design system
   Used by /privacy, /terms, /legal. Codex aesthetic: Newsreader display,
   Manrope body, JetBrains Mono detail; amber-gold on obsidian. Sticky
   table-of-contents with scroll-spy + a vertical reading-progress rail.
   Namespace: .lgl
   ════════════════════════════════════════════════════════════════════════ */
.lgl{
  --void:#08090d; --void-2:#0b0c11; --panel:rgba(255,255,255,.035);
  --ink:#f1efe9; --ink-soft:#c3bdb1; --ink-mute:#8c877c;
  --gold:#e0a64e; --gold-2:#f0c878; --gold-3:#b9802f;
  --line:rgba(214,196,150,.12); --line-2:rgba(224,166,78,.30);
  --disp:'Newsreader',Georgia,serif; --body:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative; color:var(--ink); font-family:var(--body); background:var(--void);
  overflow:hidden; isolation:isolate; line-height:1.6;
}
.lgl *{box-sizing:border-box}
.lgl ::selection{background:rgba(224,166,78,.26);color:#fff}

/* ── atmosphere ─────────────────────────────────────────────────────────── */
.lgl__bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 640px at 78% -4%, rgba(224,166,78,.10), transparent 58%),
    radial-gradient(900px 720px at 6% 18%, rgba(90,78,150,.07), transparent 60%),
    linear-gradient(180deg, var(--void-2), var(--void) 64%)}
.lgl__grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ── layout ─────────────────────────────────────────────────────────────── */
.lgl__inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;
  padding:clamp(96px,12vw,140px) clamp(20px,5vw,56px) clamp(72px,9vw,120px);
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(30px,5vw,76px)}

/* ── sticky rail / table of contents ────────────────────────────────────── */
.lgl__rail{position:sticky;top:96px;align-self:start;height:max-content}
.lgl__rail-inner{position:relative;display:flex;gap:18px}
.lgl__rail-progress{position:relative;width:2px;flex:none;border-radius:2px;background:var(--line);overflow:hidden;margin-top:30px}
.lgl__rail-fill{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-3));box-shadow:0 0 8px rgba(224,166,78,.5);transition:height .12s linear}
.lgl__rail-body{flex:1;min-width:0}
.lgl__toc-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px}
.lgl__toc{display:flex;flex-direction:column;gap:2px}
.lgl__toc-item{display:flex;align-items:baseline;gap:11px;padding:7px 10px;border-radius:8px;text-decoration:none;
  color:var(--ink-mute);transition:color .25s,background .25s}
.lgl__toc-num{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--gold-3);min-width:22px;flex:none;
  text-align:right;transition:color .25s}
.lgl__toc-text{font-size:.86rem;line-height:1.4}
.lgl__toc-item:hover{color:var(--ink-soft);background:rgba(224,166,78,.05)}
.lgl__toc-item.is-active{color:var(--gold-2)}
.lgl__toc-item.is-active .lgl__toc-num{color:var(--gold-2)}
.lgl__rail-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.lgl__rail-foot-title{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.lgl__rail-doc{font-size:.82rem;color:var(--ink-mute);text-decoration:none;transition:color .25s}
.lgl__rail-doc:hover{color:var(--gold-2)}
.lgl__rail-doc.is-active{color:var(--ink);font-weight:600}

/* ── document column ────────────────────────────────────────────────────── */
.lgl__doc{max-width:730px;min-width:0}

/* hero */
.lgl__hero{padding-bottom:clamp(34px,5vw,52px);margin-bottom:clamp(34px,5vw,52px);
  border-bottom:1px solid var(--line);position:relative}
.lgl__hero::after{content:"";position:absolute;left:0;bottom:-1px;width:84px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.lgl__kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;
  animation:lglRise .8s .02s cubic-bezier(.16,1,.3,1) both}
.lgl__kicker::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.lgl__title{font-family:var(--disp);font-weight:500;font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.02;
  letter-spacing:-.022em;color:#fff;margin:0;text-shadow:0 4px 40px rgba(0,0,0,.4);
  animation:lglRise .9s .1s cubic-bezier(.16,1,.3,1) both}
.lgl__title em{font-style:italic;color:var(--gold-2)}
.lgl__lede{margin:22px 0 0;max-width:60ch;font-size:1.1rem;line-height:1.7;color:var(--ink-soft);
  animation:lglRise .9s .18s cubic-bezier(.16,1,.3,1) both}
.lgl__seal{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  padding:9px 16px;border:1px solid var(--line-2);border-radius:99px;background:rgba(224,166,78,.05);
  animation:lglRise .9s .26s cubic-bezier(.16,1,.3,1) both}
.lgl__seal-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
@keyframes lglRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* articles */
.lgl__articles{display:flex;flex-direction:column;gap:clamp(30px,4vw,46px)}
.lgl__article{scroll-margin-top:96px;opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.lgl__article.in{opacity:1;transform:none}
.lgl__art-head{position:relative;display:flex;align-items:baseline;gap:16px;margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.lgl__art-no{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--gold-3);
  flex:none;min-width:30px;padding-top:4px}
.lgl__art-title{font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.15;
  letter-spacing:-.01em;color:#fff;margin:0;flex:1}
.lgl__art-anchor{flex:none;color:var(--gold);opacity:0;font-size:.85rem;text-decoration:none;
  transition:opacity .25s,transform .25s;transform:translateX(-4px)}
.lgl__article:hover .lgl__art-anchor{opacity:.6;transform:none}
.lgl__art-anchor:hover{opacity:1!important}
.lgl__art-body{font-size:1.02rem;line-height:1.78;color:var(--ink-soft)}
.lgl__art-body p{margin:0 0 1rem}
.lgl__art-body p:last-child{margin-bottom:0}
.lgl__art-body a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color .25s}
.lgl__art-body a:hover{border-color:var(--gold-2)}
.lgl__art-body strong{color:var(--ink);font-weight:600}

/* lists - illuminated bullets */
.lgl__list{list-style:none;margin:.4rem 0 1rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.lgl__list li{position:relative;padding-left:1.7rem;line-height:1.7}
.lgl__list li::before{content:"◇";position:absolute;left:0;top:.05em;color:var(--gold);font-size:.7rem;opacity:.7}
/* numbered variant (community code) */
.lgl__list--num{counter-reset:lglrule}
.lgl__list--num li{counter-increment:lglrule;padding-left:2.4rem}
.lgl__list--num li::before{content:counter(lglrule,upper-roman);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.04em;color:var(--gold-3);top:.35em;min-width:1.6rem;text-align:right;left:0}

/* document footer */
.lgl__doc-foot{margin-top:clamp(48px,7vw,76px);padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--line);text-align:center}
.lgl__ornament{font-size:.8rem;letter-spacing:.4em;color:var(--line-2);margin-bottom:20px}
.lgl__foot-note{max-width:54ch;margin:0 auto 22px;font-size:1rem;line-height:1.7;color:var(--ink-soft)}
.lgl__btn{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:12px;
  font-family:var(--body);font-weight:600;font-size:.96rem;text-decoration:none;color:#0a0a0a;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 12px 34px -12px rgba(224,166,78,.6);
  transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s}
.lgl__btn:hover{transform:translateY(-3px);box-shadow:0 20px 46px -12px rgba(224,166,78,.72)}
.lgl__btn-arr{transition:transform .25s}
.lgl__btn:hover .lgl__btn-arr{transform:translateX(4px)}
.lgl__related{margin-top:26px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.lgl__related a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);text-decoration:none;transition:color .25s}
.lgl__related a:hover{color:var(--gold-2)}

/* ── responsive: rail collapses to a horizontal pill scroller above doc ──── */
@media (max-width:880px){
  .lgl__inner{grid-template-columns:1fr;gap:30px}
  .lgl__rail{position:static;top:auto;order:-1}
  .lgl__rail-inner{flex-direction:column;gap:12px}
  .lgl__rail-progress{display:none}
  .lgl__toc{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lgl__toc::-webkit-scrollbar{display:none}
  .lgl__toc-item{flex:none;border:1px solid var(--line);border-radius:99px;padding:8px 14px;white-space:nowrap}
  .lgl__toc-item.is-active{border-color:var(--line-2);background:rgba(224,166,78,.08)}
  .lgl__rail-foot{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:6px;border-top:none;padding-top:0}
  .lgl__rail-foot-title{display:none}
}
@media (max-width:560px){
  .lgl__art-head{flex-wrap:wrap;gap:8px}
  .lgl__art-no{min-width:auto}
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .lgl__article,.lgl__kicker,.lgl__title,.lgl__lede,.lgl__seal{animation:none!important;opacity:1!important;transform:none!important}
  .lgl__rail-fill{transition:none}
}