/* BOATS Studios — studio noir (from the Menace visual direction: 5-ink discipline) */
:root{
  --ink:#0a0a0c;      /* backyard black */
  --bone:#f2ede3;     /* bone white */
  --amber:#ff9a1f;    /* gasoline amber */
  --red:#d42a1e;      /* alarm red */
  --panel:#141417;
  --line:#2a2a2e;
  --muted:#b9b2a3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

.site-header{
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.wordmark{
  color:var(--bone);
  text-decoration:none;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  letter-spacing:.28em;
  font-size:15px;
}
.wordmark span{display:block;font-size:10px;letter-spacing:.52em;color:var(--muted);font-weight:400}
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:999px;
}
.nav a:hover,.nav a[aria-current]{color:var(--amber);border-color:var(--amber)}

.hero{padding:88px 24px 64px;text-align:center}
.kicker{
  color:var(--amber);
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  margin:0 0 18px;
}
.hero h1{font-size:clamp(38px,7vw,64px);line-height:1.05;margin:0 0 22px}
.lede{font-size:19px;color:var(--muted);max-width:600px;margin:0 auto}

.slate{padding:24px}
.slate h2,.ethics h2{font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin:0 0 20px}
.production{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:4px solid var(--amber);
  border-radius:8px;
  padding:28px;
}
.production h3{margin:0 0 10px;font-size:26px}
.production p{color:var(--muted);margin:0 0 12px}
.production .kicker{margin-bottom:10px}

.ethics{padding:72px 24px;text-align:center}
.ethics p{color:var(--muted);max-width:560px;margin:0 auto 22px;font-size:18px}
.button{
  display:inline-block;
  background:var(--amber);
  color:#101012;
  text-decoration:none;
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  letter-spacing:.06em;
  padding:14px 30px;
  border-radius:999px;
}

/* ---- Policy page ---- */
.policy{padding:64px 24px 80px}
.policy h1{font-size:clamp(32px,5.5vw,48px);line-height:1.1;margin:0 0 18px}
.policy section{margin:44px 0}
.policy h2{
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 14px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.policy p{margin:0 0 14px;font-size:18px}
.policy ul,.policy ol{margin:0 0 14px;padding-left:22px;font-size:18px}
.policy li{margin-bottom:10px}
.policy strong{color:var(--bone)}
.policy .status{
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.04em;
}
.policy-foot{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}

.site-footer{border-top:1px solid var(--line);padding:28px 0 40px}
.site-footer p{margin:0;font-size:14px;color:var(--muted)}
.site-footer a{color:var(--amber)}
a{color:var(--amber)}

@media (max-width:560px){
  .hero{padding:64px 24px 48px}
  .production{padding:22px}
}