*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--dark:#3c2414;--bean:#5c4033;--cream:#d4a574;--latte:#f5ebe0;--espresso:#2c1810;--sans:'Noto Sans JP',sans-serif;--serif:'Playfair Display','Noto Serif JP',serif}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--latte);color:var(--espresso);line-height:1.75}
img{max-width:100%;display:block;object-fit:cover}
a{color:var(--bean)}
.cr-head{display:flex;align-items:center;padding:1rem 2rem;background:var(--espresso);color:var(--latte);flex-wrap:wrap;position:sticky;top:0;z-index:50}
.logo{font-family:var(--serif);font-size:1.5rem;text-decoration:none;color:var(--cream)}
.cr-head nav{display:flex;gap:1.25rem;margin-left:auto;flex-wrap:wrap}
.cr-head nav a{color:var(--latte);text-decoration:none;font-size:.88rem}
.menu{display:none;background:var(--cream);color:var(--espresso);border:none;padding:.4rem .7rem;cursor:pointer;border-radius:4px}
.hero-roast{padding:5rem 2rem 4rem;background:linear-gradient(180deg,var(--espresso) 0%,var(--dark) 40%,var(--latte) 100%);color:var(--latte);text-align:center}
.hero-roast h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3rem);color:var(--cream);margin:.75rem 0}
.hero-roast .origin{font-size:.8rem;letter-spacing:.2em;opacity:.85}
.hero-roast p{max-width:560px;margin:1rem auto 1.5rem;opacity:.92}
.cta{display:inline-block;background:var(--cream);color:var(--espresso);padding:.9rem 2.2rem;text-decoration:none;font-weight:600;border-radius:2px}
.hero-roast img{max-width:520px;margin:2rem auto 0;border-radius:4px;box-shadow:0 16px 48px rgba(0,0,0,.35)}
.roast-ladder{padding:4rem 2rem;max-width:720px;margin:0 auto}
.roast-ladder h2{font-family:var(--serif);text-align:center;font-size:1.9rem;color:var(--dark);margin-bottom:.5rem}
.roast-intro{text-align:center;margin-bottom:3rem;opacity:.88}
.roast-step{position:relative;padding-left:3.5rem;padding-bottom:3rem;border-left:4px solid var(--cream);margin-left:1.5rem}
.roast-step:last-child{border-left-color:transparent;padding-bottom:0}
.roast-step::before{content:'';position:absolute;left:-14px;top:0;width:24px;height:24px;border-radius:50%;background:var(--cream);border:3px solid var(--dark)}
.roast-step.light::before{background:#e8d4b8}
.roast-step.medium::before{background:var(--cream)}
.roast-step.medium-dark::before{background:#8b6914}
.roast-step.dark::before{background:var(--espresso)}
.roast-step.extra::before{background:#1a0f0a}
.roast-step.v-dark::before{background:#000}
.roast-label{font-size:.75rem;font-weight:700;letter-spacing:.15em;color:var(--bean);margin-bottom:.25rem}
.roast-step h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:.5rem}
.roast-card{display:grid;grid-template-columns:140px 1fr;gap:1.25rem;background:#fff;padding:1.25rem;border-radius:4px;box-shadow:0 4px 20px rgba(60,36,20,.08);margin-top:.75rem}
.roast-card img{aspect-ratio:1;border-radius:4px}
.roast-card .price{font-weight:700;color:var(--bean);margin:.35rem 0}
.roast-card button{background:var(--dark);color:var(--latte);border:none;padding:.5rem 1.25rem;cursor:pointer;font-family:inherit;border-radius:2px;margin-top:.5rem}
.roast-card button:hover{background:var(--espresso)}
.features{padding:5rem 2rem;background:var(--dark);color:var(--latte)}
.features h2{font-family:var(--serif);text-align:center;color:var(--cream);margin-bottom:2.5rem}
.cr-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto}
.cr-feats article{padding:1.5rem;border:1px solid rgba(212,165,116,.3)}
.cr-feats strong{font-family:var(--serif);font-size:2rem;color:var(--cream);opacity:.5}
.cr-feats h3{color:var(--cream);margin:.5rem 0}
.roastery-img{max-width:900px;margin:2.5rem auto 0;display:block;border-radius:4px}
.voices{padding:4rem 2rem;max-width:950px;margin:0 auto}
.voices h2{font-family:var(--serif);text-align:center;color:var(--dark);margin-bottom:2rem}
.voices blockquote{margin-bottom:1.5rem;padding:1.5rem;background:#fff;border-bottom:3px solid var(--cream)}
.voices cite{font-size:.85rem;opacity:.75}
.faq{padding:4rem 2rem 5rem;max-width:700px;margin:0 auto}
.faq h2{font-family:var(--serif);color:var(--dark);margin-bottom:1.5rem}
.faq details{margin-bottom:1rem;background:#fff;padding:1.15rem;border-left:4px solid var(--bean)}
.faq summary{cursor:pointer;font-weight:600}
.legal{padding:4rem 2rem;background:var(--espresso);color:#c4b5a0;font-size:.86rem}
.legal h3,.legal h4{color:var(--cream);font-family:var(--serif);margin:1.5rem 0 .5rem}
.legal dl{display:grid;grid-template-columns:9em 1fr;gap:.35rem .75rem}
.legal a{color:var(--cream)}
.legal p{max-width:880px}
.copy{margin-top:2rem;opacity:.55}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--cream);color:var(--espresso);padding:1rem 1.5rem;font-weight:600;transform:translateY(150%);transition:transform .3s;z-index:99}
.toast.show{transform:translateY(0)}
@media(max-width:768px){
  .menu{display:block}
  .cr-head nav{display:none;width:100%;flex-direction:column}
  .cr-head nav.open{display:flex}
  .roast-card{grid-template-columns:1fr}
  .cr-feats{grid-template-columns:1fr}
}