/* Shared chrome for Bulletin's document pages (privacy, contact), matched to
   the live landing: dark ground, cream ramp, Fredoka headings, grain.
   Type comes from bul-type.css, which must load first. */

:root{
  --bg:#050505;
  --surface:#0C0C0D;
  --cream:#ECE8DF;
  --ink:#070707;
  --text:#F1EDE4;
  --text-2:rgba(241,237,228,0.60);
  --text-3:rgba(241,237,228,0.38);
  --border:rgba(241,237,228,0.10);
  --border-strong:rgba(241,237,228,0.20);
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sys);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* The landing's grain, same tile, same weight. */
body::after{
  content:""; position:fixed; inset:0; z-index:80; pointer-events:none;
  background:url(/assets/textures/grain.webp); background-size:256px;
  opacity:.09; mix-blend-mode:overlay;
}

/* ── The site nav, identical to the landing's. ── */
.nav{
  position:sticky; top:0; z-index:50; padding-block:10px;
  background:rgba(5,5,5,0.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1060px; margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.wordmark{ display:block; height:38px }
.wordmark img{ height:100%; width:auto; aspect-ratio:2048/644; display:block }
.nav-cta{
  height:36px; padding:0 16px; border:0; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; text-decoration:none;
  background:var(--cream); color:var(--ink);
  font-family:var(--font-sys); font-size:14.5px; font-weight:600; letter-spacing:-0.2px;
}

.wrap{ max-width:720px; margin:0 auto; padding:52px 24px 96px }
header.doc{ margin-bottom:40px }

/* Headings speak the clay voice, same as the landing. */
h1{
  font-family:var(--font-clay); font-weight:400; letter-spacing:-0.5px;
  font-size:clamp(34px,5vw,46px); line-height:1.1; margin:0 0 10px;
}
.sub{ color:var(--text-3); font-size:15px; font-weight:500; margin:0 }

.lede{
  background:linear-gradient(180deg, rgba(241,237,228,.04), rgba(241,237,228,0) 38%), var(--surface);
  border:1px solid var(--border); border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(241,237,228,.07), 0 18px 40px rgba(0,0,0,.35);
  padding:22px 24px; margin:32px 0 44px; font-size:17px;
}
.lede p{ margin:0 }
.lede p + p{ margin-top:12px }

h2{
  font-family:var(--font-clay); font-weight:400; letter-spacing:-0.5px;
  font-size:clamp(22px,3vw,28px); line-height:1.15;
  margin:44px 0 14px; padding-top:24px; border-top:1px solid var(--border);
}
h2:first-of-type{ border-top:none; padding-top:0 }
h3{ font-size:17px; font-weight:700; margin:26px 0 6px }

p{ margin:0 0 14px; color:var(--text-2) }
.lede p{ color:var(--text) }
ul{ margin:0 0 16px; padding-left:22px; color:var(--text-2) }
li{ margin-bottom:8px }
strong{ font-weight:700; color:var(--text) }
a{ color:var(--text); text-decoration-color:var(--text-3) }
a:hover{ text-decoration-color:var(--text) }
.muted{ color:var(--text-3) }

.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; margin:8px 0 20px; font-size:15px }
th,td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text-2) }
td strong{ color:var(--text) }
th{ font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-3) }

footer{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--border);
  color:var(--text-3); font-size:14px;
}
footer a{ color:var(--text-2) }

@media (max-width:520px){
  .wrap{ padding:36px 18px 72px }
  .nav-inner{ padding-inline:18px }
  .wordmark{ height:30px }
  body{ font-size:16px }
}