:root { --bg:#fbfaf7; --panel:#fff; --text:#1e1b16; --muted:#6b6459; --border:#e6e1d8; --mark:rgba(240,192,96,.45); --accent:#8a3b12; --radius:8px; }
* { box-sizing:border-box } body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid var(--border) }
.brand { display:flex; align-items:center } .brand img { display:block; height:40px; width:auto } nav a { margin-left:16px; color:var(--muted) }
main { max-width:960px; margin:0 auto; padding:24px 16px } main.wide { max-width:1400px }
.foot { color:var(--muted); font-size:.85rem; padding:24px 16px; border-top:1px solid var(--border); margin-top:40px }
h1 { font-size:1.6rem; margin:0 0 12px } h2 { font-size:1.1rem; margin:24px 0 8px } .muted { color:var(--muted) }
.grid { border-collapse:collapse; width:100% } .grid th, .grid td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); font-size:.9rem }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:24px } @media (max-width:900px){ .cols { grid-template-columns:1fr } }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px }
.label { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 6px }
mark { background:var(--mark); color:inherit; border-radius:2px; padding:0 1px } .flash { outline:2px solid var(--accent); outline-offset:2px }
.scores { display:flex; gap:12px; flex-wrap:wrap } .score { flex:1; min-width:120px; text-align:center; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel) }
.score b { display:block; font-size:1.8rem } .score.overall { border-color:var(--accent) }
.effort { margin:8px 0 0; color:var(--muted) } .effort b { color:var(--text) } .facts th { white-space:nowrap; width:1% }
.finding { padding:10px 0; border-bottom:1px solid var(--border) } .finding .q { font-style:italic } .finding .cat { font-size:.75rem; color:var(--muted) }
.teaser { color:var(--muted); font-size:.9rem } .teaser::before { content:"🔒 " }
.safety { border:2px solid #b4231a; background:#fff4f2; padding:12px 16px; border-radius:var(--radius) }
button, .btn { font:inherit; padding:8px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; text-decoration:none }
button.quiet { background:transparent; color:var(--accent) } input[type=text], input[type=url], input[type=email], textarea { font:inherit; width:100%; padding:8px; border:1px solid var(--border); border-radius:6px }
.rej { opacity:.45; text-decoration:line-through } .acc { border-left:3px solid #2f7d32; padding-left:8px } form.inline { display:inline }

/* RecipeScore identity tokens, from docs/brand/mockup/Final.dc.html.
   Ticket RS-72 (the product page) consumes this exact set: add here, never fork a second set. */
:root {
  --ink:#2A1E3B; --ink-muted:#6B6275;
  --ground:#FFF1D6; --ground-soft:#FFF8EC; --sand:#EADFCB; --line:#D9CFBF; --rule:#EFE6D6; --white:#fff;
  --score-completeness:#FFC93C; --score-precision:#5AA9E6; --score-clarity:#3CC4A8; --score-guidance:#F2643A;
  --font-head:'Crimson Pro',Georgia,serif; --font-body:'Nunito',sans-serif;
  --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --border-ink:3px solid var(--ink);
}
/* Public pages (/ and /methodology) set body class "public"; admin and /r/{id} never do, so they render as before. */
body.public { background:var(--ground); color:var(--ink); font-family:var(--font-body) }
body.public .top, body.public .foot { border-color:var(--line) }
body.public nav a, body.public .foot, body.public .muted, body.public .label { color:var(--ink-muted) }
body.public a { color:var(--ink) }
body.public h1, body.public h2 { font-family:var(--font-head); font-weight:600; letter-spacing:-.025em; color:var(--ink) }
body.public h1 { font-size:clamp(2rem,8vw,3.5rem); line-height:1.1 }
body.public h2 { font-size:1.6rem }
body.public .panel { background:var(--white); border:var(--border-ink); border-radius:var(--radius-lg); padding:20px 24px }
body.public input[type=url] { max-width:100%; border:2px solid var(--line); border-radius:var(--radius-sm); background:var(--ground-soft); color:var(--ink) }
body.public button { background:var(--score-completeness); color:var(--ink); border:2px solid var(--ink); border-radius:var(--radius-sm); font-weight:800 }
body.public .safety { background:var(--ground-soft); border-color:var(--score-guidance); color:var(--ink); border-radius:var(--radius-md) }
body.public .spaced { margin-top:24px }
body.public img { max-width:100% }