/* ===========================================================================
   VOE MEDIA — shared styles for legal pages (privacy.html, terms.html)
   Mirrors index.html's look: Ink background, Gold accents, Space Grotesk
   display + Inter body. Tuned for long-form reading (narrow measure).
   =========================================================================== */
:root{
  --ink:var(--voe-ink);
  --ink-2:var(--ink-700);
  --line:var(--ink-600);
  --paper:var(--voe-paper);
  --muted:#9CA0A8;
  --faint:#71757D;
  --grow:var(--voe-gold);
  --plum:var(--voe-plum);
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

.mono{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ---- top bar ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:21px;width:auto;display:block}
.back{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .25s var(--ease-standard,ease)}
.back:hover{color:var(--paper)}
.back:focus-visible{outline:2px solid var(--grow);outline-offset:3px;border-radius:2px}

/* ---- hero / title ---- */
.hero{padding:96px 0 46px;border-bottom:1px solid var(--line)}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-.025em}
.hero .meta{margin-top:22px;color:var(--muted);font-size:14px;letter-spacing:.01em}

/* ---- document body (narrow measure) ---- */
.doc{max-width:760px;margin:0 auto}
.doc .lead{padding:42px 0 4px;color:var(--muted);font-size:16px;line-height:1.75}
.doc section{padding:34px 0;border-bottom:1px solid var(--line)}
.doc section:last-of-type{border-bottom:none}
.doc h2{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--paper);margin-bottom:16px}
.doc h2 .n{color:var(--grow);font-variant-numeric:tabular-nums;margin-right:10px}
.doc p{color:var(--muted);font-size:15.5px;line-height:1.75;margin-bottom:14px}
.doc p:last-child{margin-bottom:0}
.doc ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.doc li{position:relative;padding-left:20px;color:var(--muted);font-size:15.5px;line-height:1.7}
.doc li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:2px;background:var(--plum)}
.doc li strong{color:var(--paper);font-weight:600}
.doc a{color:var(--grow);text-decoration:none;border-bottom:1px solid rgba(194,160,78,.32);transition:border-color .2s}
.doc a:hover{border-bottom-color:var(--grow)}
.doc a:focus-visible{outline:2px solid var(--grow);outline-offset:2px;border-radius:2px}
.doc .email{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--paper);margin-top:6px;display:inline-block;border-bottom:1px solid var(--line)}
.doc .email:hover{border-bottom-color:var(--grow);color:var(--grow)}
.doc .addr{color:var(--faint);font-size:13px;line-height:1.7;margin-top:30px}

/* ---- footer (matches index.html) ---- */
footer{margin-top:110px;border-top:1px solid var(--line);padding:56px 0 70px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
.foot-left img{height:30px;width:auto;display:block}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:50%;transition:.25s var(--ease-standard,ease)}
.socials a svg{width:18px;height:18px;display:block}
.socials a:hover{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.socials a:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.foot-base{margin-top:48px;display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.06em;flex-wrap:wrap;gap:10px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .25s var(--ease-standard,ease)}
.foot-links a:hover{color:var(--paper)}
.foot-links a:focus-visible{outline:2px solid var(--grow);outline-offset:3px;border-radius:2px}

/* ---- phone ---- */
@media(max-width:680px){
  .wrap{padding:0 20px}
  .topbar{padding:22px 0}
  .brand img{height:19px}
  .hero{padding:60px 0 38px}
  .hero .eyebrow{margin-bottom:20px}
  .doc .lead{padding:34px 0 0}
  .doc section{padding:28px 0}
  footer{margin-top:72px;padding:44px 0 56px}
  .foot-grid{flex-direction:column;align-items:center;gap:24px}
  .foot-left{display:flex;flex-direction:column;align-items:center}
  .socials{justify-content:center}
  .foot-base{flex-direction:column;gap:8px;margin-top:36px;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}