:root{
  --ink-900:#211a14;
  --ink-700:#4a3f34;
  --ink-500:#7a6d5f;
  --ink-300:#d9cec0;
  --ink-100:#f3ede3;
  --surface:#ffffff;
  --canvas:#faf7f2;
  --accent:#c1611b;
  --accent-ink:#9c4c12;
  --accent-100:#fbe7d4;
  --good:#3f7d4f;
  --radius:14px;
  --shadow:0 1px 2px rgba(33,26,20,0.06), 0 8px 24px rgba(33,26,20,0.07);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink-900);
  line-height:1.55;
}
a{color:var(--accent-ink);}
.wrap{max-width:780px;margin:0 auto;padding:0 20px;}
header.site{
  background:var(--surface);
  border-bottom:1px solid var(--ink-100);
  padding:18px 0;
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;color:var(--ink-900);text-decoration:none;}
.brand span{color:var(--accent);}
.tagline{color:var(--ink-500);font-size:0.85rem;}

nav.site-nav{display:flex;gap:18px;}
nav.site-nav a{
  color:var(--ink-700);
  text-decoration:none;
  font-size:0.9rem;
  font-weight:600;
}
nav.site-nav a:hover, nav.site-nav a[aria-current="page"]{color:var(--accent-ink);}

main{padding:8px 0 60px;}
h1{font-size:1.9rem;letter-spacing:-0.02em;margin:26px 0 10px;color:var(--ink-900);}
.lede{color:var(--ink-700);font-size:1.05rem;max-width:62ch;}

.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-top:24px;
}
.card h2{margin-top:0;font-size:1.2rem;}

.field-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.field{flex:1;min-width:200px;}
.field label{display:block;font-size:0.82rem;font-weight:600;color:var(--ink-700);margin-bottom:6px;}
select, input[type=text], input[type=email], textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--ink-300);
  border-radius:8px;
  font-size:1rem;
  background:var(--surface);
  color:var(--ink-900);
  font-family:inherit;
}
textarea{resize:vertical;}

.tier-toggle{display:flex;gap:10px;margin-bottom:16px;}
.tier-btn{
  flex:1;
  padding:12px;
  border:1px solid var(--ink-300);
  border-radius:9px;
  background:var(--surface);
  color:var(--ink-700);
  font-weight:700;
  cursor:pointer;
  text-align:center;
  font-size:0.95rem;
}
.tier-btn.active{
  background:var(--accent-100);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.tier-btn small{display:block;font-weight:500;color:var(--ink-500);font-size:0.75rem;margin-top:2px;}
.tier-btn.active small{color:var(--accent-ink);}

button#calcBtn, button.btn-primary{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:9px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  width:100%;
}
button#calcBtn:hover, button.btn-primary:hover{background:var(--accent-ink);}

#errorMsg, .form-msg{color:#b3261e;font-size:0.88rem;margin-top:10px;display:none;}
.form-msg.success{color:var(--good);}

#results{display:none;margin-top:24px;}
.cost-badge{
  display:flex;
  align-items:baseline;
  gap:10px;
  background:var(--accent-100);
  color:var(--accent-ink);
  padding:16px 18px;
  border-radius:10px;
  font-weight:700;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.cost-badge .num{font-size:1.8rem;}
.cost-badge .lbl{font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-700);}

table{width:100%;border-collapse:collapse;margin-bottom:8px;}
table th, table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--ink-100);font-size:0.92rem;}
table th{color:var(--ink-500);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;}
table td.mono{font-variant-numeric:tabular-nums;font-weight:600;}

.gear-list{list-style:none;padding:0;margin:0;}
.gear-list li{
  padding:10px 0;
  border-bottom:1px solid var(--ink-100);
  color:var(--ink-700);
  display:flex;
  gap:10px;
}
.gear-list li:last-child{border-bottom:none;}
.gear-list li::before{content:"—";color:var(--accent);font-weight:700;flex-shrink:0;}

.hobby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px;}
.hobby-chip{
  background:var(--surface);
  border:1px solid var(--ink-100);
  border-radius:10px;
  padding:12px;
  text-align:center;
  font-size:0.85rem;
  font-weight:600;
  color:var(--ink-700);
  box-shadow:var(--shadow);
}

.hobby-photo-card{
  background:var(--surface);
  border:1px solid var(--ink-100);
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow);
  cursor:pointer;
  padding:0;
  text-align:left;
  font-family:inherit;
  display:flex;
  flex-direction:column;
  transition:transform 0.12s ease;
}
.hobby-photo-card:hover{transform:translateY(-2px);}
.hobby-photo-card img{
  width:100%;
  height:100px;
  object-fit:cover;
  display:block;
  background:var(--ink-100);
}
.hobby-photo-card span{
  padding:10px 12px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--ink-700);
}
.hobby-photo-card.no-photo img{display:none;}
.hobby-photo-card.no-photo span{padding-top:12px;}

.result-photo{
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:18px;
  display:block;
}

.section-title{margin-top:44px;font-size:1.3rem;letter-spacing:-0.01em;}

details{
  background:var(--surface);
  border-radius:10px;
  box-shadow:var(--shadow);
  padding:14px 18px;
  margin-bottom:10px;
}
details summary{font-weight:700;cursor:pointer;}
details p{color:var(--ink-700);margin-bottom:0;}

.page-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  margin-top:24px;
}
.page-card h2{font-size:1.15rem;margin-top:30px;margin-bottom:8px;}
.page-card h2:first-child{margin-top:0;}
.page-card p, .page-card li{color:var(--ink-700);}
.page-card ul{padding-left:20px;}
.updated{color:var(--ink-500);font-size:0.82rem;margin-top:-4px;}

.source-note{color:var(--ink-500);font-size:0.8rem;margin-top:14px;}

footer{
  border-top:1px solid var(--ink-100);
  padding:26px 0 40px;
  color:var(--ink-500);
  font-size:0.82rem;
}
footer p{max-width:70ch;}
footer nav{display:flex;gap:14px;margin-bottom:10px;flex-wrap:wrap;}
footer nav a{color:var(--ink-500);text-decoration:underline;font-size:0.82rem;}

@media (max-width:480px){
  h1{font-size:1.5rem;}
  .card, .page-card{padding:18px;}
  nav.site-nav{gap:12px;font-size:0.85rem;}
  .tier-toggle{flex-direction:column;}
}