/* PickleScramble shared site styles — matches the app's court palette */
:root{
  --bg:#14332E;
  --panel:#1C4038;
  --panel-2:#235049;
  --court:#3E7CB1;
  --court-deep:#33689A;
  --kitchen:#2F6E5E;
  --line:#F2EFE6;
  --muted:#9DBBB0;
  --ball:#E7F15A;
  --danger:#E06A5A;
  --radius:14px;
}

/* ---------- nav ---------- */
.site-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin:0 0 22px;padding-bottom:14px;
  border-bottom:1px solid rgba(242,239,230,.12);
  font-family:'Archivo',system-ui,sans-serif;
}
.site-nav .brand{
  font-family:'Anton',sans-serif;font-size:18px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--line);text-decoration:none;
}
.site-nav .brand span{color:var(--ball)}
.site-nav .links{display:flex;gap:16px}
.site-nav .links a{
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;
}
.site-nav .links a:hover,.site-nav .links a:focus{color:var(--line)}
.site-nav .links a[aria-current="page"]{color:var(--ball)}

/* ---------- footer ---------- */
.site-footer{
  margin-top:36px;padding-top:18px;
  border-top:1px solid rgba(242,239,230,.12);
  font-family:'Archivo',system-ui,sans-serif;
}
.site-footer .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.site-footer .links a{color:var(--muted);text-decoration:none;font-size:13px}
.site-footer .links a:hover{color:var(--line)}
.site-footer p{color:var(--muted);font-size:12px}

/* ---------- content pages ---------- */
body.page{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--bg);color:var(--line);
  padding:18px 16px 60px;max-width:620px;margin:0 auto;
  background-image:
    linear-gradient(transparent 97%, rgba(242,239,230,.05) 97%),
    linear-gradient(90deg, transparent 97%, rgba(242,239,230,.05) 97%);
  background-size:44px 44px;
  line-height:1.65;
}
.page h1{
  font-family:'Anton',sans-serif;font-size:clamp(26px,7vw,34px);
  letter-spacing:.02em;line-height:1.1;text-transform:uppercase;margin-bottom:8px;
}
.page h2{
  font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.03em;
  text-transform:uppercase;margin:28px 0 10px;
}
.page .lede{color:var(--muted);font-size:15px;margin-bottom:22px}
.page p{margin-bottom:14px;font-size:15px}
.page ul,.page ol{margin:0 0 14px 20px;font-size:15px}
.page li{margin-bottom:6px}
.page a{color:var(--court);}
.page a:hover{color:var(--ball)}
.page strong{color:var(--line)}
.page .card{
  background:var(--panel);border-radius:var(--radius);padding:16px;
  margin-bottom:14px;border:1px solid rgba(242,239,230,.07);
}
.page .cta{
  display:inline-block;background:var(--ball);color:#1C2A10;
  font-family:'Anton',sans-serif;font-size:16px;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border-radius:12px;margin-top:6px;
}
.page .note{
  background:var(--panel-2);border-radius:10px;padding:12px 14px;
  font-size:13px;color:var(--muted);margin-bottom:14px;
}
.page details{
  background:var(--panel);border-radius:12px;padding:14px 16px;margin-bottom:10px;
  border:1px solid rgba(242,239,230,.07);
}
.page details summary{
  font-weight:700;cursor:pointer;font-size:15px;
}
.page details p{margin-top:10px;margin-bottom:0;color:var(--muted)}