:root{
  --ink:#0e110f;
  --parchment:#f3ead7;
  --forest:#1d2a22;
  --forest-deep:#0f1814;
  --ember:#c97a3b;
  --gold:#b89253;
  --mist:#5a8a8c;
  --display:"Cinzel Decorative",serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--forest-deep);
  color:var(--parchment);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ember);text-decoration:none;transition:color .2s}
a:hover{color:#dc8a4a;text-decoration:underline;text-underline-offset:3px}

.container{max-width:780px;margin:0 auto;padding:0 32px}

/* nav */
.legal-nav{
  position:sticky;top:0;z-index:10;
  background:rgba(14,17,15,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(184,146,83,.18);
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 44px;
}
.legal-nav .brand{
  font-family:var(--display);font-weight:700;letter-spacing:.08em;font-size:17px;
  color:var(--parchment);text-transform:uppercase;
}
.legal-nav .brand span{color:var(--ember);margin:0 .15em}
.legal-nav .back{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--parchment);opacity:.78;
}
.legal-nav .back:hover{opacity:1;color:var(--ember);text-decoration:none}

/* hero */
.legal{padding:80px 0 120px}
.legal .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ember);margin:0 0 22px;display:flex;align-items:center;gap:14px;
}
.legal .eyebrow::before{content:"";width:36px;height:1px;background:var(--ember)}
.legal h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(40px,5vw,68px);
  line-height:1.05;
  margin:0 0 24px;
  color:var(--parchment);
}
.legal .lede{
  font-size:22px;font-weight:300;line-height:1.55;
  color:rgba(243,234,215,.78);
  max-width:60ch;
  margin:0 0 56px;
  font-style:italic;
}
.legal section{margin:0 0 44px}
.legal h2{
  font-family:var(--display);font-weight:400;
  font-size:26px;line-height:1.2;
  color:var(--parchment);
  margin:0 0 14px;
  padding-top:18px;
  border-top:1px solid rgba(184,146,83,.18);
}
.legal h3{
  font-family:var(--display);font-weight:400;
  font-size:19px;line-height:1.3;
  color:var(--gold);
  margin:18px 0 8px;
}
.legal p{margin:0 0 14px;color:rgba(243,234,215,.85)}
.legal ul{margin:0 0 14px;padding-left:22px;color:rgba(243,234,215,.85)}
.legal ul li{margin:4px 0}
.legal .note{
  margin-top:48px;padding:20px 24px;
  border:1px solid rgba(184,146,83,.28);
  border-left:3px solid var(--ember);
  background:rgba(201,122,59,.06);
  border-radius:2px;
  font-size:16px;font-style:italic;
  color:rgba(243,234,215,.78);
}

/* footer */
.legal-foot{
  border-top:1px solid rgba(184,146,83,.14);
  background:#0a0d0b;
  padding:28px 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(243,234,215,.5);
}
.legal-foot .container{
  max-width:1240px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
}
.legal-foot .links{display:flex;gap:24px}
.legal-foot a{color:inherit}
.legal-foot a:hover{color:var(--ember);text-decoration:none}

@media (max-width:640px){
  .legal-nav{padding:14px 20px}
  .legal-nav .back{font-size:10px;letter-spacing:.14em}
  .container{padding:0 20px}
  .legal{padding:48px 0 80px}
}