:root{--ink:#233a2c;--paper:#f5f3eb;--line:#d5dbcd;--muted:#667061;--lime:#d8ed9c}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,sans-serif}
a{color:inherit}
header,main,footer{max-width:1280px;margin:auto;padding:0 5%}
header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font-size:26px;font-weight:800;letter-spacing:-1px}
.brand span{font-weight:400;color:var(--muted)}
nav{display:flex;gap:28px;font-size:14px}
nav a{text-decoration:none}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;padding:72px 0 58px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
h1{font:normal clamp(48px,6vw,78px)/1.05 Georgia,serif;letter-spacing:-3px;margin:22px 0}
p{color:var(--muted)}
.intro{max-width:540px;font-size:18px}
.button{display:inline-block;background:var(--ink);color:white;padding:12px 22px;text-decoration:none;border-radius:3px;margin-top:18px}

/* Hero illustration */
.art{background:#e6e8d9;border-radius:130px 130px 4px 4px;position:relative;overflow:hidden;min-height:345px;display:flex;align-items:flex-end;justify-content:center;gap:16px;padding-bottom:32px}
.stake{width:43px;height:240px;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);background:repeating-linear-gradient(91deg,#c59b65 0,#d8b783 5px,#caa673 8px,#e1c18d 13px);transform:rotate(-11deg);box-shadow:10px 10px 10px #777}
.stake:before{content:'';display:block;height:55px;background:#d26945}
.stake:nth-child(2){height:290px;transform:rotate(-4deg)}
.stake:nth-child(2):before{background:#f1f0df}
.stake:nth-child(3){height:265px;transform:rotate(5deg)}
.stake:nth-child(3):before{background:#d26945}
.stake:nth-child(4){height:205px;transform:rotate(12deg)}
.art-label{position:absolute;left:22px;bottom:8px;font-size:10px;letter-spacing:1.5px}

.summary{display:flex;gap:42px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px}
.summary b{font-size:21px;margin-right:8px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:58px 0 22px}
h2{font:normal 38px/1.1 Georgia,serif;margin:8px 0}
label{font-size:12px;display:block}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:0}
input,select{font:inherit;color:var(--ink);padding:11px;border:1px solid var(--line);background:transparent;border-radius:3px}
input{width:240px}

/* Supplier list */
.list{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:60px 1.3fr 1.4fr 155px;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.num{font:32px Georgia;color:#919c82}
.row h3{font-size:21px;line-height:1.3;margin:0 0 6px}
.tag{font-size:10px;letter-spacing:1px;text-transform:uppercase;background:#e5e8dc;padding:4px 8px;display:inline-block;margin-bottom:10px}
.top .tag{background:var(--lime)}
.place{font-size:13px;color:var(--muted)}
.desc{margin:0;font-size:14px}
.detail{font-size:12px;margin-top:10px;color:var(--muted)}
.visit{display:block;padding:10px 12px;text-align:center;text-decoration:none;border:1px solid var(--ink);font-size:13px;background:transparent;color:var(--ink);font-family:inherit;cursor:pointer}
.compare-label{font-size:12px;margin-top:14px;display:flex;gap:7px;align-items:center}
.compare-label input{width:auto;accent-color:var(--ink)}
.rationale{font-size:12px;color:var(--muted);margin-top:10px}

/* Methodology */
.method{display:grid;grid-template-columns:1fr 1.6fr;gap:60px;margin:64px 0;background:#e8ebdf;padding:32px}
.method p{font-size:14px;margin-top:0}
.method h2{font-size:30px}

/* Comparison table */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:650px;font-size:14px}
td,th{padding:15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#e8ebdf}
#comparison{margin-top:40px}
#empty{padding:30px 0;color:var(--muted)}

footer{padding-top:25px;padding-bottom:35px;border-top:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;gap:20px}
a:focus-visible,button:focus-visible{outline:3px solid #b27744;outline-offset:4px}

@media(max-width:800px){
  .hero{grid-template-columns:1fr;padding:40px 0}
  .art{min-height:300px;max-width:500px}
  .section-head{align-items:start;flex-direction:column}
  .row{grid-template-columns:35px 1fr}
  .row>div:nth-child(3),.row>div:nth-child(4){grid-column:2}
  .method{grid-template-columns:1fr;gap:15px}
  .summary{gap:16px;flex-wrap:wrap}
  nav{gap:14px;font-size:12px}
  h1{letter-spacing:-2px}
  footer{flex-direction:column}
}