/* rules-authority theme — a reference page, not a shop */
:root {
  --ink: #17181a;
  --muted: #5d6470;
  --line: #dfe3e8;
  --wash: #f6f5f2;
  --law: #7a1f1f;
  --ns-primary: #7a1f1f;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.6 "Segoe UI", system-ui, sans-serif; }
.masthead { padding: 20px clamp(16px, 4vw, 44px); border-bottom: 3px double var(--law); background: var(--wash); display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
h1 { margin: 0; font-size: 23px; }
.sub { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.links { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-start; }
.links a { color: var(--law); text-decoration: none; }
.links a:hover { text-decoration: underline; }
main { max-width: 960px; margin: 0 auto; padding: clamp(16px, 3vw, 32px); }
.hero h2 { font-size: clamp(19px, 2.6vw, 25px); margin: 0 0 10px; }
.hero p { max-width: 76ch; margin: 0 0 12px; }
.hero a { color: var(--law); }
.tiny { color: var(--muted); font-size: 12.5px; }
code { background: var(--wash); padding: 1px 5px; border-radius: 4px; }
#agent { margin: 0 0 28px; }
#app { border: 1px solid var(--line); border-radius: 12px; min-height: 480px; overflow: hidden; }
.fail { color: var(--law); padding: 18px; }
.law h3 { font-size: 16px; margin: 0 0 6px; }
.law ul { margin: 6px 0 10px; padding-left: 22px; }
.law li { margin-bottom: 4px; }
footer { border-top: 1px solid var(--line); background: var(--wash); padding: 18px clamp(16px, 4vw, 44px) 30px; font-size: 14px; }
footer p { margin: 0 0 6px; max-width: 92ch; }
footer a { color: var(--law); }