/* Owned & Tested — site design system. Workshop palette, light-first, dark-aware. */
:root {
  --paper:#FAF8F4; --surface:#FFFFFF; --surface-2:#F1EDE6; --sunken:#EAE5DC;
  --ink:#211D18; --ink-soft:#453E35; --muted:#736A5D; --faint:#968C7D;
  --line:#DFD8CC; --line-strong:#C9C0B0;
  --rust:#A6431C; --rust-ink:#7C3013; --rust-tint:#F7E8E0;
  --steel:#39586E; --steel-tint:#E6EDF2;
  --go:#3D6B4F; --go-tint:#E6F0EA;
  --ph:#996F1F; --ph-tint:#F8F0DD; --ph-line:#D8B76A;
  --shadow:0 1px 2px rgba(45,35,20,.06), 0 8px 26px -14px rgba(45,35,20,.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#161310; --surface:#1E1A15; --surface-2:#26211A; --sunken:#120F0C;
    --ink:#EEE9E1; --ink-soft:#CCC4B7; --muted:#998F80; --faint:#7A7163;
    --line:#332D24; --line-strong:#4A4234;
    --rust:#E08A5F; --rust-ink:#EDAF8E; --rust-tint:rgba(166,67,28,.18);
    --steel:#8FB4CE; --steel-tint:rgba(57,88,110,.22);
    --go:#8CC3A3; --go-tint:rgba(61,107,79,.2);
    --ph:#D9AE55; --ph-tint:rgba(153,111,31,.14); --ph-line:#8A6F35;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --paper:#161310; --surface:#1E1A15; --surface-2:#26211A; --sunken:#120F0C;
  --ink:#EEE9E1; --ink-soft:#CCC4B7; --muted:#998F80; --faint:#7A7163;
  --line:#332D24; --line-strong:#4A4234;
  --rust:#E08A5F; --rust-ink:#EDAF8E; --rust-tint:rgba(166,67,28,.18);
  --steel:#8FB4CE; --steel-tint:rgba(57,88,110,.22);
  --go:#8CC3A3; --go-tint:rgba(61,107,79,.2);
  --ph:#D9AE55; --ph-tint:rgba(153,111,31,.14); --ph-line:#8A6F35;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.6);
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Sans 3", system-ui, sans-serif; font-weight:450;
  font-size:17.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:760px; margin:0 auto; padding:0 22px; }
h1,h2,h3 { font-family:"Zilla Slab", Georgia, serif; line-height:1.15; text-wrap:balance; color:var(--ink); }
p { margin:0 0 1em; }
a { color:var(--steel); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--steel) 40%, transparent); text-underline-offset:2px; }
strong { font-weight:600; color:var(--ink); }
code { font-family:"IBM Plex Mono", monospace; font-size:.85em; }

/* site chrome */
.site-head { border-bottom:2px solid var(--line-strong); background:var(--surface); }
.site-head .bar { max-width:760px; margin:0 auto; padding:14px 22px; display:flex; align-items:baseline; gap:22px; flex-wrap:wrap; }
.wordmark { font-family:"Zilla Slab", serif; font-weight:700; font-size:21px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.wordmark .amp { color:var(--rust); }
.site-nav { display:flex; gap:16px; margin-left:auto; }
.site-nav a { font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink-soft); }
.site-nav a:hover { color:var(--rust); }
.site-foot { margin-top:56px; border-top:2px solid var(--line-strong); padding:26px 0 60px; font-size:13.5px; color:var(--muted); }
.site-foot .wrap { display:grid; gap:10px; }

.kicker { font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rust); }
header.art { padding:48px 0 8px; }
h1 { font-size:clamp(32px, 6vw, 46px); font-weight:700; margin:10px 0 14px; letter-spacing:-.01em; }
.standfirst { font-size:19.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 18px; }
.byline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--muted); padding-bottom:18px; border-bottom:2px solid var(--line-strong); }
.byline .sep { color:var(--faint); }
.updatelog { display:flex; gap:14px; flex-wrap:wrap; margin:16px 0 0; padding:10px 14px; background:var(--surface-2); border-radius:8px; font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--muted); }
.updatelog b { color:var(--ink-soft); font-weight:600; }
.disclosure { margin:22px 0; padding:12px 16px; background:var(--sunken); border-radius:8px; font-size:14px; color:var(--muted); border:1px solid var(--line); }

.verdicts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0; }
@media (max-width:640px){ .verdicts { grid-template-columns:1fr; } }
.vcard { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.vcard .award { font-family:"IBM Plex Mono", monospace; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:20px; align-self:flex-start; }
.vcard.top .award { background:var(--rust-tint); color:var(--rust-ink); }
.vcard.budget .award { background:var(--go-tint); color:var(--go); }
.vcard.sleeper .award { background:var(--steel-tint); color:var(--steel); }
.vcard h3 { font-size:19px; margin:0; }
.vcard p { font-size:13.5px; color:var(--ink-soft); margin:0; flex:1; }
.btn { display:block; text-align:center; font-weight:600; font-size:14px; text-decoration:none; padding:9px 12px; border-radius:8px; background:var(--rust); color:#FFF8F2 !important; border:none; }
.btn.alt { background:transparent; color:var(--steel) !important; border:1.5px solid var(--steel); }
.btn + .btn { margin-top:6px; }

h2 { font-size:clamp(24px, 4vw, 30px); font-weight:700; margin:44px 0 14px; padding-top:8px; }
h3 { font-size:20px; font-weight:600; margin:30px 0 10px; }
.answerbox { background:var(--surface); border-left:4px solid var(--rust); border-radius:0 10px 10px 0; padding:14px 18px; margin:0 0 18px; box-shadow:var(--shadow); font-size:16.5px; color:var(--ink-soft); }
.answerbox strong { color:var(--ink); }

.ph-block { border:2px dashed var(--ph-line); background:var(--ph-tint); border-radius:10px; padding:14px 16px; margin:18px 0; font-size:14px; color:var(--ph); line-height:1.5; }
.ph-block .tag { font-family:"IBM Plex Mono", monospace; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:4px; }

.tablewrap { overflow-x:auto; margin:20px 0; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--surface); min-width:640px; }
thead th { text-align:left; font-family:"IBM Plex Mono", monospace; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:10px 13px; background:var(--surface-2); border-bottom:1px solid var(--line-strong); }
tbody td { padding:10px 13px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; }
tbody tr:last-child td { border-bottom:none; }
td.prod { font-weight:600; color:var(--ink); white-space:nowrap; }
.num { font-variant-numeric:tabular-nums; font-family:"IBM Plex Mono", monospace; font-size:12.5px; }

ul { padding-left:1.2em; margin:0 0 1em; }
li { margin-bottom:7px; }
.note { background:var(--steel-tint); border:1px solid color-mix(in srgb, var(--steel) 30%, transparent); border-radius:10px; padding:14px 18px; margin:20px 0; font-size:15px; color:var(--ink-soft); }
.faq dt { font-weight:700; color:var(--ink); margin-top:16px; font-family:"Zilla Slab", serif; font-size:17.5px; }
.faq dd { margin:6px 0 0 0; color:var(--ink-soft); }
.authorbox { display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:20px; }
.authorbox .avatar { width:56px; height:56px; border-radius:50%; background:var(--sunken); border:2px dashed var(--ph-line); flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ph); text-align:center; }

/* index page cards */
.guide-list { display:grid; gap:14px; margin:26px 0; }
.guide-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow); }
.guide-card h3 { margin:0 0 6px; }
.guide-card h3 a { text-decoration:none; color:var(--ink); }
.guide-card h3 a:hover { color:var(--rust); }
.guide-card p { font-size:14.5px; color:var(--ink-soft); margin:0; }
.guide-card .meta { font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:8px; }
.guide-card.coming { opacity:.75; border-style:dashed; }