/* Shared look for Halve's content pages (how to play, about, privacy, terms, contact). Same cutting mat as the game. */
:root{
  --bg:#1D5F4E; --panel:#174E40; --lift:#246B58;
  --cream:#F4E9D0; --white:#FFFFFF; --dim:rgba(244,233,208,.72); --rule:rgba(244,233,208,.2); --faint:rgba(244,233,208,.05);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background-color:var(--bg); color:var(--cream); font-family:var(--body); font-size:17px; line-height:1.6;
  background-image:linear-gradient(var(--faint) 1px,transparent 1px),linear-gradient(90deg,var(--faint) 1px,transparent 1px);
  background-size:40px 40px; background-position:center top;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px));
}
.site{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:24px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px; border-bottom:1px solid var(--rule)}
.brand{display:flex; align-items:center; gap:10px; color:var(--cream); text-decoration:none}
.brand svg{width:30px; height:30px; flex:none}
.brand span{font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.02em; line-height:1}
.play{font-weight:600; font-size:15px; text-decoration:none; color:var(--panel); background:var(--cream); padding:9px 16px; border-radius:12px}
.play:hover{background:var(--white)}
h1{font-family:var(--display); font-weight:800; font-size:clamp(36px,7vw,60px); line-height:1; letter-spacing:-.03em; margin:12px 0 0; color:var(--white); text-wrap:balance}
h2{font-family:var(--display); font-weight:800; font-size:26px; line-height:1.2; margin:28px 0 6px; color:var(--white)}
h3{font-size:18px; margin:20px 0 4px; color:var(--white)}
p,li{max-width:68ch}
p{margin:0 0 12px}
ul,ol{padding-left:22px; margin:0 0 12px}
li{margin-bottom:6px}
a{color:var(--white)}
.lede{font-size:19px; color:var(--dim)}
.updated{font-family:var(--mono); font-size:13px; color:var(--dim)}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:16px; padding:18px 20px}
.card p:last-child{margin-bottom:0}
.foot{display:flex; flex-wrap:wrap; gap:8px 18px; font-family:var(--mono); font-size:13px; color:var(--dim); border-top:1px solid var(--rule); padding-top:14px; margin-top:12px}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--white)}
:focus-visible{outline:3px solid var(--white); outline-offset:2px}