/* =========================================================
   OHISHI & Co. — 和商店
   Design system: 和紙 (washi) + 朱 (vermilion)
   ========================================================= */

:root{
  --bg: #faf6ee;
  --bg-soft: #f3ecdc;
  --paper: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --muted: #8a8a82;
  --line: #e6dcc6;
  --accent: #b73a2f;        /* 朱红 vermilion */
  --accent-soft: #d98a72;
  --gold: #c8a96a;
  --shadow: 0 14px 40px rgba(26,26,26,.07);
  --shadow-lg: 0 22px 60px rgba(26,26,26,.12);
  --serif: "Noto Serif JP","Source Han Serif","Hiragino Mincho ProN","Microsoft YaHei",ui-serif,Georgia,serif;
  --sans:  "Noto Sans JP","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --maxw: 1240px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}

/* ---------- utilities ---------- */
.section__head{
  max-width:var(--maxw);
  margin:0 auto 40px;
  padding:0 32px;
  text-align:center;
}
.section__head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(28px,4vw,42px);
  letter-spacing:.04em;
  margin:8px 0 12px;
}
.section__lede{
  color:var(--ink-soft);
  max-width:620px;
  margin:0 auto;
}
.eyebrow{
  display:inline-block;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.32em;
  color:var(--accent);
  text-transform:uppercase;
  font-weight:600;
}
.eyebrow--light{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--ink);color:var(--bg)}
.btn--primary:hover{background:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn--light{background:var(--bg);color:var(--ink)}
.btn--light:hover{background:var(--accent);color:#fff}
.btn--block{width:100%;justify-content:center}

/* ---------- announce ---------- */
.announce{
  background:var(--ink);color:#f5e9d0;
  font-size:13px;
  text-align:center;
  padding:10px 24px;
  letter-spacing:.04em;
}
.announce__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.announce__sep{color:var(--accent-soft)}
.announce code{background:rgba(255,255,255,.08);padding:2px 8px;border-radius:4px;color:#fff}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,238,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 32px;
  display:flex;align-items:center;gap:36px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  display:grid;place-items:center;
  width:38px;height:38px;
  background:var(--ink);color:#f5e9d0;
  font-family:var(--serif);font-size:20px;font-weight:600;
  border-radius:6px;
}
.brand__txt strong{
  font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.08em;
  display:block;line-height:1;
}
.brand__txt em{
  font-style:normal;font-size:11px;letter-spacing:.32em;color:var(--muted);
  display:block;margin-top:4px;
}
.nav{margin-left:auto;display:flex;gap:28px;font-size:15px}
.nav a{position:relative;padding:6px 0;font-weight:500}
.nav a:hover{color:var(--accent)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover::after{transform:scaleX(1)}
.hdr__actions{display:flex;align-items:center;gap:8px;margin-left:14px}
.iconbtn{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);
  border:1px solid transparent;transition:background .2s;
}
.iconbtn:hover{background:var(--bg-soft);border-color:var(--line)}
.cartbtn{
  position:relative;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);border:1px solid transparent;
  transition:background .2s;
}
.cartbtn:hover{background:var(--bg-soft);border-color:var(--line)}
.cartbtn__count{
  position:absolute;top:2px;right:2px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--accent);color:#fff;
  border-radius:999px;font-size:11px;font-weight:700;
  display:grid;place-items:center;
}

/* ---------- hero ---------- */
.hero{padding:64px 32px 80px;max-width:var(--maxw);margin:0 auto}
.hero__inner{
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;
}
.hero__title{
  font-family:var(--serif);
  font-size:clamp(38px,5.4vw,72px);
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.18;
  margin:18px 0 24px;
}
.hero__lede{
  font-size:18px;color:var(--ink-soft);max-width:540px;margin:0 0 32px;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__metrics{
  display:flex;gap:36px;margin:48px 0 0;padding:28px 0 0;
  border-top:1px solid var(--line);list-style:none;
}
.hero__metrics li{display:flex;flex-direction:column}
.hero__metrics strong{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--accent)}
.hero__metrics span{font-size:12px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}

.hero__art{
  position:relative;aspect-ratio:5/6;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#f5e9d0 0%,#e8d8b8 60%,#d4c098 100%);
  box-shadow:var(--shadow-lg);
}
.hero__sun{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,#f8c97a 0%,#e8994a 60%,transparent 70%);
  filter:blur(2px);
}
.hero__mtn{position:absolute;left:0;right:0;bottom:0;width:100%;height:60%}
.hero__kanji{
  position:absolute;left:32px;top:28px;
  font-family:var(--serif);font-size:46px;color:#3a3530;opacity:.55;font-weight:500;
}

/* ---------- categories ---------- */
.cats{padding:80px 32px;max-width:var(--maxw);margin:0 auto}
.cats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.cat{
  display:block;background:var(--paper);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.cat__art{
  aspect-ratio:1;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--bg-soft),var(--bg));
}
.cat__art svg{width:62%;height:auto}
.cat__body{padding:18px 22px 24px}
.cat__body h3{font-family:var(--serif);font-size:22px;font-weight:500;margin:0 0 4px}
.cat__body p{margin:0;color:var(--ink-soft);font-size:14px}
.cat__count{display:inline-block;margin-top:10px;font-size:12px;color:var(--muted);letter-spacing:.18em}

/* ---------- products ---------- */
.products{padding:80px 32px 100px;max-width:var(--maxw);margin:0 auto}
.products__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card__art{
  aspect-ratio:1;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-soft),var(--bg));
  display:grid;place-items:center;
}
.card__art svg{width:70%;height:auto;transition:transform .4s ease}
.card:hover .card__art svg{transform:scale(1.05) rotate(-2deg)}
.card__tag{
  position:absolute;left:14px;top:14px;
  background:rgba(255,255,255,.92);
  padding:4px 10px;border-radius:999px;
  font-size:11px;letter-spacing:.18em;font-weight:600;
  color:var(--accent);text-transform:uppercase;
}
.card__tag--new{color:var(--accent)}
.card__tag--hot{color:#000;background:#f5d76e}
.card__tag--low{color:var(--ink-soft);background:#fff}
.card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card__cat{font-size:11px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.card__title{font-family:var(--serif);font-size:19px;font-weight:500;margin:0 0 6px;line-height:1.35}
.card__sub{font-size:13px;color:var(--ink-soft);margin:0 0 14px;flex:1}
.card__row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.card__price{font-family:var(--serif);font-size:20px;font-weight:600}
.card__price small{font-size:12px;color:var(--muted);font-family:var(--sans);margin-left:4px;font-weight:400}
.card__add{
  background:var(--ink);color:var(--bg);
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.card__add:hover{background:var(--accent);transform:rotate(90deg)}
.card__add.is-added{background:var(--accent)}

/* ---------- story ---------- */
.story{
  padding:100px 32px;background:var(--ink);color:#f5e9d0;
}
.story__inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.story__copy h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,44px);
  letter-spacing:.04em;line-height:1.25;margin:12px 0 24px;
}
.story__copy p{color:rgba(245,233,208,.78);font-size:16px;margin:0 0 16px;max-width:520px}
.story__copy strong{color:#f5e9d0;font-weight:600}
.story__points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px;max-width:520px}
.story__points li{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;border:1px solid rgba(245,233,208,.18);border-radius:12px;
  background:rgba(245,233,208,.04);
}
.story__points span{
  font-family:var(--serif);font-size:13px;color:var(--gold);
  border:1px solid var(--gold);border-radius:50%;width:28px;height:28px;
  display:grid;place-items:center;flex-shrink:0;
}
.story__card{
  background:linear-gradient(180deg,#f5e9d0 0%,#e8d8b8 100%);
  color:var(--ink);
  border-radius:18px;
  padding:36px 32px;
  box-shadow:var(--shadow-lg);
  position:relative;
  max-width:480px;margin-left:auto;
}
.story__cardTop{
  width:60px;height:4px;background:var(--accent);border-radius:2px;margin-bottom:24px;
}
.story__quote{font-family:var(--serif);font-size:24px;line-height:1.5;margin:0 0 16px}
.story__author{font-size:14px;color:var(--ink-soft);margin:0}

/* ---------- voices ---------- */
.voices{padding:100px 32px;max-width:var(--maxw);margin:0 auto}
.voices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.voice{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px 26px;
}
.voice__stars{color:var(--gold);margin:0 0 12px;letter-spacing:.08em;font-size:14px}
.voice p{margin:0 0 12px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.voice__by{font-family:var(--serif);font-size:14px;color:var(--muted);font-style:italic}

/* ---------- journal ---------- */
.journal{padding:100px 32px;max-width:var(--maxw);margin:0 auto;background:var(--bg-soft)}
.journal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.jpost{
  display:block;background:var(--paper);
  border-radius:16px;overflow:hidden;border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.jpost:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.jpost__art{aspect-ratio:16/10;position:relative}
.jpost__art--01{background:linear-gradient(135deg,#7a2d1d,#c75a3c 60%,#f5d76e)}
.jpost__art--02{background:linear-gradient(135deg,#3a3530,#524a40 60%,#c8a96a)}
.jpost__art--03{background:linear-gradient(135deg,#1a1814,#3a3530 60%,#7a6a4a)}
.jpost__body{padding:22px 26px 28px}
.jpost__meta{
  display:inline-block;font-size:11px;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase;margin-bottom:10px;
}
.jpost__body h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 10px;line-height:1.4}
.jpost__body p{margin:0;color:var(--ink-soft);font-size:14px}

/* ---------- newsletter ---------- */
.news{
  padding:100px 32px;background:var(--ink);color:#f5e9d0;text-align:center;
}
.news__inner{max-width:680px;margin:0 auto}
.news h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,38px);letter-spacing:.04em;margin:12px 0 12px}
.news p{color:rgba(245,233,208,.7);margin:0 0 28px}
.news__form{display:flex;gap:8px;max-width:460px;margin:0 auto;padding:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px}
.news__form input{
  flex:1;border:0;background:transparent;color:#f5e9d0;
  padding:12px 18px;font:inherit;outline:0;
}
.news__form input::placeholder{color:rgba(245,233,208,.4)}
.news__hint{font-size:13px;color:rgba(245,233,208,.5);margin-top:18px}

/* ---------- footer ---------- */
.ftr{background:#14110d;color:rgba(245,233,208,.7);padding:60px 32px 24px}
.ftr__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr 3fr;gap:48px}
.ftr__brand .brand__mark{width:46px;height:46px;font-size:24px}
.ftr__brand strong{display:block;font-family:var(--serif);font-size:22px;margin:14px 0 4px;color:#f5e9d0;font-weight:500;letter-spacing:.06em}
.ftr__brand p{margin:0;font-size:14px;color:rgba(245,233,208,.55)}
.ftr__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ftr__cols h4{font-family:var(--serif);font-size:14px;letter-spacing:.18em;color:#f5e9d0;margin:0 0 14px;font-weight:500;text-transform:uppercase}
.ftr__cols a{display:block;font-size:14px;padding:6px 0;color:rgba(245,233,208,.65)}
.ftr__cols a:hover{color:var(--gold)}
.ftr__legal{
  max-width:var(--maxw);margin:48px auto 0;padding:24px 0 0;
  border-top:1px solid rgba(245,233,208,.1);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:12px;color:rgba(245,233,208,.45);letter-spacing:.04em;
}

/* ---------- drawer / scrim ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:99;
}
.scrim.is-open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;right:0;top:0;bottom:0;width:min(420px,90vw);
  background:var(--paper);
  z-index:100;transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;
  box-shadow:-22px 0 60px rgba(0,0,0,.2);
}
.drawer.is-open{transform:translateX(0)}
.drawer__hd{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer__hd h3{margin:0;font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.04em}
.drawer__bd{flex:1;overflow-y:auto;padding:18px 24px}
.drawer__empty{color:var(--muted);text-align:center;margin-top:60px;line-height:1.8}
.drawer__row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:15px}
.drawer__row strong{font-family:var(--serif);font-size:18px;font-weight:600}
.drawer__ft{padding:20px 24px 28px;border-top:1px solid var(--line)}
.cartitem{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cartitem__art{width:64px;height:64px;border-radius:10px;background:var(--bg-soft);flex-shrink:0;display:grid;place-items:center;overflow:hidden}
.cartitem__art svg{width:70%;height:70%}
.cartitem__body{flex:1;min-width:0}
.cartitem__title{font-family:var(--serif);font-size:15px;margin:0 0 4px;font-weight:500}
.cartitem__price{font-size:13px;color:var(--ink-soft);margin:0}
.cartitem__rm{color:var(--muted);font-size:12px;text-decoration:underline}
.cartitem__rm:hover{color:var(--accent)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#f5e9d0;
  padding:12px 22px;border-radius:999px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  z-index:200;box-shadow:var(--shadow-lg);
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hdr__inner{padding:14px 20px;gap:18px}
  .nav{display:none}
  .hero{padding:48px 20px 60px}
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .hero__metrics{gap:24px}
  .cats{padding:60px 20px}
  .cats__grid{grid-template-columns:repeat(2,1fr)}
  .products{padding:60px 20px 80px}
  .products__grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .story{padding:80px 20px}
  .story__inner{grid-template-columns:1fr;gap:36px}
  .story__card{margin:0}
  .voices{padding:80px 20px}
  .voices__grid{grid-template-columns:1fr}
  .journal{padding:80px 20px}
  .journal__grid{grid-template-columns:1fr}
  .news{padding:80px 20px}
  .ftr{padding:48px 20px 20px}
  .ftr__inner{grid-template-columns:1fr;gap:32px}
  .ftr__cols{grid-template-columns:repeat(2,1fr)}
  .section__head{padding:0 20px}
  .hero__title{font-size:clamp(34px,8vw,52px)}
}
@media (max-width: 540px){
  .products__grid{grid-template-columns:1fr}
  .cats__grid{grid-template-columns:1fr}
  .news__form{flex-direction:column;border-radius:18px;padding:14px}
  .news__form input{padding:12px 16px}
  .news__form .btn{width:100%;justify-content:center}
}