/* Shared styling for the twohanders.com hub and its legal pages.
   Self-contained on purpose: the hub is static HTML served straight from nginx, with no app and no
   build step. Fonts are the same self-hosted files the bots use. */
@font-face { font-family: 'Cinzel'; src: url('/fonts/cinzel.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 300 600; font-display: swap; }

:root{
  --ink:#f3eefb; --muted:#a89cc4; --gold:#f0c05a; --gold-3:#ffe9b0; --gold-2:#c98d18;
  --bg:#0b0714; --card:rgba(255,255,255,.035); --line:rgba(255,255,255,.09);
  --serif:'Cinzel','Iowan Old Style',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.65;
  background:
    radial-gradient(1200px 700px at 15% -10%, #241a44 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 5%, #3a1f38 0%, transparent 50%),
    var(--bg);
  min-height:100vh; display:flex; flex-direction:column;
}
.wrap{width:min(1080px,92vw); margin:0 auto}
header{padding:2.2rem 0 1.4rem}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink)}
.brand svg{width:38px; height:38px; flex:0 0 auto}
.brand .word{
  font-family:var(--serif); font-size:1.02rem; letter-spacing:.26em; text-transform:uppercase;
  background:linear-gradient(100deg,var(--gold-3),var(--gold),var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
main{flex:1; padding:1rem 0 4rem}
h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.1;
  margin:0 0 1rem; max-width:22ch;
  background:linear-gradient(105deg,#fff 4%,var(--gold-3) 38%,var(--gold) 72%,#c08f22 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kicker{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem}
.lede{font-size:1.06rem; color:#cfc4e6; max-width:64ch; margin:0 0 2rem}
.prose p{margin:0 0 .95rem; max-width:70ch}
.prose h2{
  font-family:var(--serif); font-size:1.02rem; letter-spacing:.05em; color:var(--gold-3);
  margin:2rem 0 .5rem; font-weight:400;
}
.updated{margin-top:2.4rem; font-size:.78rem; color:var(--muted)}
a{color:var(--gold-3)}
footer{border-top:1px solid var(--line); padding:1.6rem 0 2.4rem; color:var(--muted); font-size:.8rem; line-height:1.8; text-align:center}
footer p{margin:.15rem 0}
footer a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(240,192,90,.35)}
footer a:hover{color:var(--gold); border-bottom-color:currentColor}
/* contact form: the hub's only interactive element */
.contact-form{margin:1.2rem 0 2rem; max-width:640px}
.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem}
.field label{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.field input, .field select, .field textarea{
  font:inherit; font-size:.98rem; color:var(--ink); background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; padding:.7rem .85rem; width:100%;
}
.field textarea{resize:vertical; min-height:9rem}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-2); background:rgba(255,255,255,.06);
}
.field select{appearance:none}
.hint{font-size:.78rem; color:var(--muted)}
.button{
  display:inline-block; font:inherit; font-size:.95rem; font-weight:500; cursor:pointer;
  color:#1a1206; background:linear-gradient(180deg,var(--gold-3),var(--gold));
  border:0; border-radius:999px; padding:.7rem 1.6rem; text-decoration:none;
}
.button:hover{filter:brightness(1.05)}
.note{font-size:.78rem; color:var(--muted); margin-top:.8rem; max-width:60ch}
.notice{
  border-left:3px solid var(--gold); background:rgba(240,192,90,.08);
  padding:.8rem 1rem; margin:0 0 1.6rem; border-radius:0 8px 8px 0; max-width:70ch;
}
/* the honeypot: off-screen, never focusable, invisible to a person */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}