@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#f7f4ee; --ink:#241a14; --ink-soft:#5a4d43;
  --rust:#a85425; --rust-deep:#7e3d18; --sage:#6f7d5f; --line:#ddd3c4;
  --card:#fffdf9;
}
*{box-sizing:border-box;}
html{scroll-padding-top:1rem;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.6;
}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.15; letter-spacing:-0.01em;}
a{color:var(--rust-deep);}
.wrap{max-width:760px; margin:0 auto; padding:0 22px;}
.site-header{border-bottom:1px solid var(--line); padding:22px 0;}
.site-header .wrap{display:flex; justify-content:space-between; align-items:center;}
.brand{font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; color:var(--ink); text-decoration:none;}
.brand span{color:var(--rust);}
nav a{color:var(--ink-soft); text-decoration:none; margin-left:20px; font-size:0.92rem;}
nav a:hover{color:var(--rust-deep);}
main{padding:44px 0 70px;}
.kicker{color:var(--rust-deep); font-weight:600; font-size:0.85rem; margin:0 0 10px;}
h1.page-title{font-size:2.1rem; margin:0 0 14px; max-width:15ch;}
.dek{color:var(--ink-soft); font-size:1.08rem; max-width:60ch; margin:0 0 8px;}
.byline{color:var(--ink-soft); font-size:0.85rem; margin-top:18px;}
.disclosure{background:#efe8db; border-left:3px solid var(--rust); padding:12px 16px; font-size:0.88rem; color:var(--ink-soft); margin:26px 0; border-radius:0 6px 6px 0;}
.pick{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px; margin:26px 0;}
.pick-rank{font-family:'Fraunces',serif; font-size:0.85rem; color:var(--rust-deep); font-weight:600; margin:0 0 4px;}
.pick h3{font-size:1.3rem; margin:0 0 4px;}
.pick .price{color:var(--ink-soft); font-size:0.92rem; margin-bottom:12px;}
.pick p{margin:0 0 12px;}
.pros-cons{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0;}
.pros-cons div{font-size:0.92rem;}
.pros-cons .label{font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.02em; color:var(--ink-soft); margin-bottom:6px;}
.btn{display:inline-block; background:var(--rust); color:#fff9f2; text-decoration:none; padding:9px 18px; border-radius:6px; font-weight:600; font-size:0.92rem;}
.btn:hover{background:var(--rust-deep);}
article p{margin:0 0 18px;}
article h2{font-size:1.5rem; margin:38px 0 12px;}
article h3{font-size:1.15rem; margin:26px 0 10px;}
.card-list{list-style:none; padding:0; margin:24px 0; display:grid; gap:14px;}
.card-list a{display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; text-decoration:none; color:var(--ink);}
.card-list a:hover{border-color:var(--rust);}
.card-list h3{margin:0 0 6px; font-size:1.1rem;}
.card-list p{margin:0; color:var(--ink-soft); font-size:0.92rem;}
footer{border-top:1px solid var(--line); padding:28px 0; color:var(--ink-soft); font-size:0.85rem;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer a{color:var(--ink-soft);}
@media (max-width:600px){
  .pros-cons{grid-template-columns:1fr;}
  nav a{margin-left:12px; font-size:0.85rem;}
  h1.page-title{font-size:1.7rem;}
}