:root{--text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--text-2xl:clamp(2rem,1.2rem + 2.5vw,3.25rem);
--bg:#f7f5ef;--surface:#fffdf8;--ink:#1f2a1f;--muted:#5d665a;--line:#e3dfd3;--accent:#2f6b3a;--accent-ink:#fff;--soft:#eef2e6;--warn:#8a5a12;--r:10px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--text-base)/1.6 'DM Sans',system-ui,sans-serif}
a{color:var(--accent)}a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--text-xl)}h2{font-size:var(--text-lg);margin-top:2rem}h3{font-size:var(--text-base)}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
header.site{border-bottom:1px solid var(--line);background:var(--surface)}header.site .wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding-top:.85rem;padding-bottom:.85rem;flex-wrap:wrap}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:var(--text-base);color:var(--ink);text-decoration:none}.brand small{display:block;font-family:'DM Sans';font-weight:400;font-size:var(--text-xs);color:var(--muted)}
nav.top{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--text-sm)}nav.top a{text-decoration:none;color:var(--ink)}nav.top a:hover{color:var(--accent)}
main{padding:2rem 0 4rem}.crumbs{font-size:var(--text-xs);color:var(--muted);margin-bottom:1rem}.crumbs a{color:var(--muted)}
.hero h1{font-size:var(--text-2xl);max-width:20ch}.lede{font-size:var(--text-lg);color:var(--muted);max-width:60ch;line-height:1.45}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:var(--accent)}.card h3{margin:0 0 .35rem}.card p{margin:0;color:var(--muted);font-size:var(--text-sm)}
.tag{display:inline-block;font-size:var(--text-xs);padding:.1rem .5rem;border-radius:99px;background:var(--soft);color:var(--accent);margin:0 .25rem .25rem 0;text-decoration:none}
.tag.hi{background:var(--accent);color:var(--accent-ink)}
.pgrid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:2rem;align-items:start}
.pimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.price{font-size:var(--text-xl);font-family:'Fraunces',serif;font-weight:600;margin:.25rem 0}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:.7rem 1.1rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:var(--text-sm)}.btn:hover{opacity:.9}
.agentbox{background:var(--soft);border-left:3px solid var(--accent);padding:1rem 1.1rem;border-radius:0 var(--r) var(--r) 0;margin:1rem 0}
.agentbox strong{display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:.25rem}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
th,td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}th{width:34%;color:var(--muted);font-weight:500}
.tablewrap{overflow-x:auto}
ul.clean{padding-left:1.1rem;margin:.25rem 0}ul.clean li{margin:.2rem 0}
.ingr{font-size:var(--text-sm);color:var(--muted)}
.note{font-size:var(--text-sm);color:var(--warn);background:#fbf3e4;border:1px solid #efdcb8;border-radius:8px;padding:.6rem .8rem}
details{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.6rem .9rem;margin:.5rem 0}summary{cursor:pointer;font-weight:600}
.rank{display:grid;gap:.6rem}.rank .card{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center}
.rank img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.meta{font-size:var(--text-xs);color:var(--muted)}
footer{border-top:1px solid var(--line);padding:2rem 0;color:var(--muted);font-size:var(--text-xs)}
code{background:var(--soft);padding:.05rem .35rem;border-radius:4px;font-size:.9em}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}.pimg{max-width:280px}.rank .card{grid-template-columns:52px 1fr}.rank .card .rk{grid-column:1/-1}.rank img{width:52px;height:52px}}