/* ============================================================================
   JUSTICIAR THORNE — shared stylesheet for the legal pages.
   Mirrors the tokens in index.html. Change a colour there, change it here too
   (index.html is deliberately self-contained so it can be moved on its own).
   ========================================================================== */
:root{
  --void:#150B33;
  --night:#1B1240;
  --violet:#2E1A5E;
  --panel:rgba(64,40,124,.32);
  --edge:rgba(174,146,255,.20);
  --edge-lit:rgba(232,180,74,.55);
  --gold:#E8B44A;
  --gold-lit:#FFD98A;
  --rose:#E86A8C;
  --cream:#FFF6E8;
  --lav:#C9C0E8;
  --muted:#9A8FC4;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--night)}
body{
  margin:0;
  color:var(--cream);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-weight:300; font-size:17px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(90% 60% at 15% 6%,  rgba(232,106,140,.16), transparent 62%),
    radial-gradient(80% 55% at 88% 16%, rgba(120,86,220,.28),  transparent 60%),
    linear-gradient(175deg, var(--void) 0%, var(--night) 42%, var(--violet) 100%);
  background-attachment:fixed;
}

/* --------------------------------------------------------------- header --- */
.masthead{padding:1.75rem 1.25rem .5rem; text-align:center}
.wordmark{display:inline-flex; align-items:center; gap:.625rem; text-decoration:none}
.wordmark svg{width:24px; height:24px; flex:0 0 auto}
.wordmark span{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:.9375rem;
               letter-spacing:.22em; text-transform:uppercase; color:var(--cream)}
.wordmark:focus-visible{outline:2px solid var(--gold); outline-offset:6px; border-radius:6px}

/* ------------------------------------------------------------------ doc --- */
.doc{max-width:720px; margin:0 auto; padding:3rem 1.25rem 2rem}
.eyebrow{font-size:.75rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
         color:var(--muted); margin:0 0 1.25rem}
h1{font-family:'Playfair Display',Georgia,serif; font-weight:800;
   font-size:clamp(2rem,5.4vw,2.9rem); letter-spacing:-.015em; line-height:1.15; margin:0 0 1rem}
h2{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.3rem;
   color:var(--cream); margin:2.75rem 0 1rem; line-height:1.3}
.updated{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0}
.rule{height:1px; border:0; margin:2.25rem 0;
      background:linear-gradient(90deg,transparent,var(--edge),transparent)}
p{color:var(--lav); margin:0 0 1.25rem}
ul{color:var(--lav); margin:0 0 1.25rem; padding-left:1.25rem}
li{margin-bottom:.625rem}
li::marker{color:var(--gold)}
a{color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(232,180,74,.35)}
a:hover{border-bottom-color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:3px}
strong{color:var(--cream); font-weight:500}

/* Fill-in-the-blank markers the owner must replace before going live. */
.fillin{color:var(--gold-lit); background:rgba(232,180,74,.12);
        border-bottom:1px dashed rgba(232,180,74,.5); padding:.05rem .3rem;
        border-radius:3px; font-style:normal}

.callout{border:1px solid var(--edge); border-left:2px solid var(--gold);
         background:var(--panel); border-radius:14px; padding:1.25rem 1.5rem; margin:2rem 0;
         backdrop-filter:blur(6px)}
.callout p:last-child{margin-bottom:0}

.back{display:inline-block; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
      color:var(--muted); text-decoration:none; border:0; margin-top:2.5rem;
      transition:color .3s var(--ease)}
.back:hover{color:var(--gold); border:0}

/* --------------------------------------------------------------- footer --- */
.site-footer{padding:3rem 1.25rem 3rem; text-align:center;
             border-top:1px solid var(--edge); margin-top:3rem}
.footer-links{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
              gap:.5rem 1.25rem; margin-bottom:1.5rem}
.footer-links a{font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
                color:var(--lav); text-decoration:none; border:0}
.footer-links a:hover{color:var(--gold)}
.footer-links span{color:var(--edge)}
.disclaimer{font-size:.75rem; line-height:1.75; color:var(--muted);
            max-width:68ch; margin:0 auto 1.25rem}
.copyright{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:#6B5F96; margin:0}

.skip{position:absolute; left:-9999px; top:0; z-index:100; padding:1rem 1.5rem;
      background:var(--gold); color:#2A1A05; font-weight:600; border:0}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}