/* ============================================================
   Shared styles for the legal pages (privacy.html, terms.html)
   Same tokens and type system as the main site.
   ============================================================ */
:root{
  --ink:#070304; --ink-1:#0C0708; --ink-2:#120C0D;
  --gold:#C29C56; --gold-lt:#E3CB96;
  --bone:#F3EDE4; --bone-2:rgba(243,237,228,.66); --bone-3:rgba(243,237,228,.40);
  --line:rgba(194,156,86,.20); --line-2:rgba(243,237,228,.10);
  --f-d:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-a:'Instrument Serif',Georgia,'Times New Roman',serif;
  --pad:clamp(20px,5vw,72px);
  --e:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--f-d);font-size:clamp(15px,1.02vw,16.5px);line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.grain{
  position:fixed;inset:-120px;z-index:9;pointer-events:none;opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.lnav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:14px var(--pad);
  background:rgba(12,7,8,.82);border-bottom:1px solid var(--line-2);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
}
.lnav .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.lnav .brand img{width:40px;height:40px;object-fit:contain;flex:none}
.lnav .brand b{font-size:.98rem;font-weight:700;letter-spacing:-.015em;display:block;line-height:1.1}
.lnav .brand i{font-family:var(--f-a);font-style:italic;font-size:.8rem;color:var(--gold)}
.lnav .back{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  padding:.7em 1.4em;border:1px solid var(--line);border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--bone);
  transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e);
}
.lnav .back:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- layout ---------- */
.lwrap{max-width:1180px;margin-inline:auto;padding:clamp(40px,6vw,88px) var(--pad) clamp(60px,8vw,120px)}
.lhead{max-width:60ch;margin-bottom:clamp(30px,4vw,52px)}
.lhead .kicker{
  font-family:var(--f-a);font-style:italic;font-size:clamp(1rem,1.25vw,1.15rem);
  color:var(--gold);margin:0 0 .6em;
}
.lhead h1{
  margin:0;font-size:clamp(2.1rem,5.4vw,4.2rem);font-weight:800;
  line-height:.95;letter-spacing:-.035em;text-transform:uppercase;
}
.lhead .meta{
  margin-top:1.6em;padding-top:1.2em;border-top:1px solid var(--line-2);
  font-size:.86rem;color:var(--bone-3);
}
.lhead .meta b{color:var(--bone-2);font-weight:600}

.lgrid{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}

/* ---------- table of contents ---------- */
.ltoc{position:sticky;top:96px}
.ltoc h2{
  margin:0 0 1em;font-size:.72rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold);
}
.ltoc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.ltoc li{counter-increment:t}
.ltoc a{
  display:flex;gap:.7em;padding:.42em 0;text-decoration:none;
  font-size:.88rem;color:var(--bone-3);transition:color .3s var(--e);
}
.ltoc a::before{content:counter(t,decimal-leading-zero);
  font-family:var(--f-a);font-style:italic;color:var(--gold);opacity:.7;flex:none}
.ltoc a:hover{color:var(--bone)}

/* ---------- body copy ---------- */
.lbody{max-width:74ch}
.lbody section{scroll-margin-top:96px}
.lbody section + section{margin-top:clamp(34px,4vw,54px)}
.lbody h2{
  margin:0 0 .8em;font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.2;
}
.lbody h2 .n{font-family:var(--f-a);font-style:italic;font-weight:400;color:var(--gold);margin-right:.45em}
.lbody h3{margin:1.8em 0 .6em;font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--gold-lt)}
.lbody p{margin:0 0 1em;color:var(--bone-2)}
.lbody ul{margin:0 0 1em;padding-left:1.1em;color:var(--bone-2)}
.lbody li{margin-bottom:.5em}
.lbody li::marker{color:var(--gold)}
.lbody strong{color:var(--bone);font-weight:600}
.lbody a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line)}
.lbody a:hover{text-decoration-color:var(--gold)}

/* callouts */
.note{
  margin:1.4em 0;padding:clamp(16px,2vw,24px);border-radius:3px;
  border:1px solid var(--line-2);background:rgba(18,12,13,.6);
}
.note p:last-child{margin-bottom:0}
.note.warn{border-color:rgba(194,156,86,.42);background:rgba(108,71,18,.12)}
.note .tag{
  display:block;margin-bottom:.7em;font-size:.66rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold);
}
.todo{
  background:rgba(194,156,86,.13);border:1px dashed rgba(194,156,86,.5);
  border-radius:3px;padding:.15em .5em;color:var(--gold-lt);
  font-size:.92em;font-weight:600;
}

/* contact block */
.lcontact{
  margin-top:clamp(34px,4vw,54px);padding:clamp(20px,2.6vw,34px);
  border:1px solid var(--line);border-radius:3px;background:rgba(18,12,13,.6);
}
.lcontact h2{margin-bottom:.7em}
.lcontact address{font-style:normal;color:var(--bone-2);line-height:1.9}
.lcontact address a{color:var(--gold-lt)}

/* ---------- footer ---------- */
.lfoot{
  border-top:1px solid var(--line-2);padding:clamp(26px,3vw,40px) var(--pad);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  max-width:1180px;margin-inline:auto;
}
.lfoot p,.lfoot a{font-size:.8rem;color:var(--bone-3);margin:0}
.lfoot a{text-decoration:none;transition:color .3s var(--e)}
.lfoot a:hover{color:var(--gold)}
.lfoot nav{display:flex;flex-wrap:wrap;gap:12px 22px}

@media (max-width:860px){
  .lgrid{grid-template-columns:1fr}
  .ltoc{position:static;padding-bottom:1.4em;border-bottom:1px solid var(--line-2)}
  .ltoc ol{columns:2;column-gap:28px}
}
@media (max-width:520px){ .ltoc ol{columns:1} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;scroll-behavior:auto !important}
}