:root {
  --ink: #273228;
  --muted: #697268;
  --cream: #f6f1e5;
  --paper: #fffdf7;
  --green: #315e45;
  --lime: #b6cb65;
  --line: #ddd6c8;
  --danger: #8b3434;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.7;
}
.hero {
  min-height: 330px;
  padding: 34px max(24px, calc((100vw - 760px) / 2));
  color: white;
  background:
    radial-gradient(circle at 82% 20%, rgba(182,203,101,.55), transparent 28%),
    linear-gradient(145deg, #244834, #3d7253);
}
.brand { font-weight: 800; letter-spacing: .18em; font-size: 13px; }
.eyebrow, .label { margin: 54px 0 6px; color: var(--lime); font-weight: 800; letter-spacing: .14em; font-size: 12px; }
h1 { margin: 0; font-size: clamp(34px, 8vw, 58px); line-height: 1.25; letter-spacing: .03em; }
.intro { max-width: 540px; margin: 18px 0 0; opacity: .9; }
main { width: min(760px, calc(100% - 32px)); margin: -34px auto 60px; position: relative; }
.panel { margin-bottom: 18px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(39,50,40,.08); }
.state { text-align: center; }
.product-panel .label, .origin-section .label { margin-top: 0; color: var(--green); }
h2 { margin: 0 0 18px; font-size: 24px; line-height: 1.4; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 0; }
.facts div { padding: 14px; background: #f5f2e9; border-radius: 12px; }
dt { color: var(--muted); font-size: 12px; }
dd { margin: 3px 0 0; font-weight: 700; word-break: break-all; }
.origin-section { padding: 30px 2px; }
.origin-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.origin-card { min-height: 150px; padding: 22px; color: white; border-radius: 18px; background: linear-gradient(145deg,#37664b,#244a36); }
.origin-card .place { margin: 0 0 6px; font-size: 13px; color: #dbe7ad; }
.origin-card h3 { margin: 0; font-size: 25px; }
.origin-card .variety { margin: 18px 0 0; opacity: .92; }
.technical { box-shadow: none; }
summary { cursor: pointer; font-weight: 700; }
.compact { margin-top: 16px; }
.hidden { display: none !important; }
#error { color: var(--danger); }
footer { padding: 26px; color: var(--muted); text-align: center; font-size: 12px; }
@media (max-width: 560px) {
  .facts, .origin-grid { grid-template-columns: 1fr; }
  .hero { min-height: 360px; }
}