/* BeardedFaces — shared styling for the legal pages.
   Tokens and type mirror site/index.html so these never look bolted on. */

:root{
  --bf-paper:#EDE8DE;
  --bf-plate:#DCD5C7;
  --bf-ink:#151311;
  --bf-graphite:#3B352F;
  --bf-muted:#6B6156;
  --bf-hairline:#BEB5A6;
  --bf-oxblood:#4B1B13;
  --bf-oxblood-hi:#792C20;
  --bf-tobacco:#8B6B4B;

  --bf-display:'Big Shoulders Display','Archivo',system-ui,sans-serif;
  --bf-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --bf-mono:'Overpass Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --bf-margin:20px;
}
@media(min-width:768px){ :root{ --bf-margin:32px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bf-paper);
  color:var(--bf-ink);
  font-family:var(--bf-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bf-oxblood-hi);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--bf-ink)}
a:focus-visible{outline:2px solid var(--bf-oxblood-hi);outline-offset:3px}

.wrap{max-width:1440px;margin:0 auto;padding:0 var(--bf-margin)}

/* masthead */
header{background:var(--bf-ink);color:var(--bf-paper)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:56px;border-bottom:1px solid rgba(185,190,193,.22)}
.mark{font-family:var(--bf-display);font-weight:900;text-transform:uppercase;
  font-size:22px;letter-spacing:.01em;color:var(--bf-paper);text-decoration:none}
.mark:hover{color:var(--bf-paper)}
.hd nav{display:flex;gap:18px}
.hd nav a{font-family:var(--bf-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(237,232,222,.72);text-decoration:none}
.hd nav a:hover{color:var(--bf-paper)}

/* page head */
.phead{padding:clamp(40px,8vw,72px) 0 clamp(24px,4vw,36px);
  border-bottom:1px solid var(--bf-hairline)}
.eyebrow{font-family:var(--bf-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bf-muted);margin:0 0 12px}
h1{font-family:var(--bf-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,9vw,68px);line-height:.9;letter-spacing:-.012em;
  word-spacing:.05em;margin:0;max-width:18ch}
.updated{font-family:var(--bf-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bf-muted);margin:16px 0 0}

/* body */
main{padding:clamp(32px,6vw,56px) 0 clamp(56px,10vw,96px)}
main .wrap{max-width:760px;margin-left:0}
@media(min-width:1100px){ main .wrap{margin-left:auto} }
h2{font-family:var(--bf-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(22px,4.5vw,30px);line-height:1;letter-spacing:-.005em;
  word-spacing:.05em;margin:44px 0 14px;padding-top:20px;
  border-top:1px solid var(--bf-hairline)}
h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
p{margin:0 0 16px;max-width:62ch}
ul{margin:0 0 16px;padding-left:20px;max-width:62ch}
li{margin:0 0 8px}
strong{font-weight:700}

.lede{font-size:clamp(17px,2.4vw,20px);line-height:1.55;color:var(--bf-ink);
  max-width:46ch;margin-bottom:28px}

/* the one accent: a plate for the contact block */
.plate{background:var(--bf-plate);border-left:3px solid var(--bf-oxblood);
  padding:20px 22px;margin:28px 0;max-width:62ch}
.plate p:last-child{margin-bottom:0}
.plate .label{font-family:var(--bf-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bf-muted);margin:0 0 8px}

.email{font-family:var(--bf-mono);font-size:15px;letter-spacing:.02em}

/* footer */
footer{background:var(--bf-ink);color:rgba(237,232,222,.64);
  padding:40px 0 48px;font-size:13px}
footer .cols{display:flex;flex-wrap:wrap;gap:14px 28px;margin-bottom:24px}
footer a{font-family:var(--bf-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(237,232,222,.64);text-decoration:none}
footer a:hover{color:var(--bf-paper)}
footer .legal{border-top:1px solid rgba(185,190,193,.2);padding-top:20px;
  max-width:70ch;line-height:1.6}
footer .legal p{max-width:none;margin:0 0 8px}