/* Home page only, « Soda Bar Sushi ». Shared base: page.css. Tokens/chrome: brand.css.
   Reference lock (OLIPOP-led): cream canvas, one deep nori anchor for text and
   primary buttons, heavy soft display type, one pastel card per dish, pill
   buttons, sections separated by color, no shadows on cards.
   Borrowed from Eat Happy: the spinning round stamp, slightly tilted photos. */

/* ---- Hero: split panel (OLIPOP) + stamp (Eat Happy) ------------------------ */
.h-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(640px, calc(100vh - 120px)); }
.h-hero__txt {
  background: var(--p-wasabi); padding: 72px max(28px, calc((100vw - var(--sp-max)) / 2 + 28px)) 72px;
  padding-right: 64px; display: flex; flex-direction: column; justify-content: center;
}
.h-hero h1 { font-size: clamp(46px, 5.6vw, 84px); max-width: 11ch; }
.h-hero__lead { font-size: 20px; line-height: 1.5; max-width: 460px; margin: 20px 0 30px; text-wrap: pretty; }
.h-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.h-hero__note { margin: 22px 0 0; font-size: 15px; }
.h-hero__note a { font-weight: 700; }
.h-hero__photo { position: relative; min-height: 420px; }
.h-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-stamp {
  position: absolute; z-index: 2; left: -74px; top: 48px;
  width: 148px; height: 148px; border-radius: 50%; background: var(--saumon);
  display: grid; place-items: center;
}
/* only the text ring spins; the mascot stays upright and wobbles */
.h-stamp svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: h-spin 18s linear infinite; }
.h-stamp text { font: 700 10px var(--sp-body); letter-spacing: 1.5px; fill: var(--riz); }
.h-stamp img { position: relative; width: 60%; height: auto; animation: h-bob 2.6s ease-in-out infinite alternate; }
@keyframes h-spin { to { transform: rotate(360deg); } }
@keyframes h-bob { from { transform: rotate(-7deg); } to { transform: rotate(7deg) translateY(-2px); } }

/* ---- Product shelf: one pastel card per dish (OLIPOP) ---------------------- */
.h-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.h-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 16px; padding: 18px 18px 20px; text-decoration: none; color: var(--nori);
  transition: transform .22s ease;
}
.h-card:hover { transform: translateY(-4px) rotate(-1deg); }
.h-card:nth-child(2n):hover { transform: translateY(-4px) rotate(1deg); }
.h-card:focus-visible { outline: 3px solid var(--nori); outline-offset: 4px; }
.h-card__disc {
  aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .55);
  display: grid; place-items: center; margin-bottom: 16px;
}
.h-card__disc img { width: 88%; }
.h-card h3 { margin: 0 0 6px; font: 700 19px/1.2 var(--sp-body); }
.h-card p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; }
.h-card .h-allerg { font-size: 13px; opacity: .78; }
.h-price {
  margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center;
  font: 700 18px var(--sp-body);
}
.h-price span:last-child { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.c-saumon { background: var(--p-saumon); } .c-wasabi { background: var(--p-wasabi); }
.c-tamago { background: var(--p-tamago); } .c-gingembre { background: var(--p-gingembre); }

/* ---- Platters --------------------------------------------------------------- */
.h-plat .h-cards { grid-template-columns: repeat(3, 1fr); }
.h-plat .h-card__disc img { width: 92%; }
.h-card--cta { justify-content: center; text-align: center; gap: 14px; padding: 32px 26px; }
.h-card__big { font: 700 22px/1.25 var(--sp-body); }
.h-card__big .h-disp { display: block; font-size: 120px; line-height: .9; }
.h-card--cta .h-price { justify-content: center; margin-top: 8px; }

/* ---- About ------------------------------------------------------------------ */
.h-about { background: var(--brume); }
.h-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.h-about__photos { position: relative; padding: 10px 40px 60px 0; }
.h-about__photos img { border-radius: 16px; }
.h-about__main { transform: rotate(-2.5deg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.h-about__side {
  position: absolute; right: 0; bottom: 0; width: 40%; aspect-ratio: 4 / 5; object-fit: cover;
  transform: rotate(4deg); border: 6px solid var(--riz);
}
.h-about h2 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 20px; }
.h-about p { margin: 0 0 16px; font-size: 18px; text-wrap: pretty; }
.h-stats { list-style: none; margin: 28px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.h-stats li { background: var(--riz); border-radius: 16px; padding: 14px 12px; font-size: 14px; line-height: 1.3; }
.h-stats b { display: block; font: 900 30px/1 var(--sp-display); margin-bottom: 6px; }
.h-stats a { text-decoration: none; }

/* ---- Practical info -------------------------------------------------------- */
.h-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.h-info__grid > div { background: #fff; border-radius: 16px; padding: 26px 24px; }
.h-info h3 { margin: 0 0 10px; font: 900 26px/1.1 var(--sp-display); }
.h-info p { margin: 0 0 8px; }
.h-info table { border-collapse: collapse; width: 100%; }
.h-info th, .h-info td { text-align: left; padding: 6px 0; font-weight: 400; border-bottom: 1px solid rgba(18, 51, 43, .12); }
.h-info td { text-align: right; font-weight: 700; }
.h-info .h-small { font-size: 14px; opacity: .8; margin-top: 10px; }
.h-info__btns { display: grid; gap: 10px; margin-top: 14px; }
.h-info__btns .sp-pill { width: 100%; }

/* ---- Instagram ------------------------------------------------------------- */
.h-insta { background: var(--p-saumon); text-align: center; }
.h-insta h2 { font-size: clamp(36px, 5.4vw, 68px); word-break: break-word; }
.h-insta p { max-width: 560px; margin: 16px auto 26px; font-size: 18px; text-wrap: pretty; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1099.98px) {
  .h-cards { grid-template-columns: repeat(2, 1fr); }
  .h-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899.98px) {
  .h-hero { grid-template-columns: 1fr; min-height: 0; }
  .h-hero__txt { padding: 48px 20px 56px; }
  .h-hero__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .h-stamp { left: auto; right: 20px; top: -44px; width: 120px; height: 120px; }
  .h-info__grid, .h-plat .h-cards { grid-template-columns: 1fr; }
  .h-about__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .h-cards { gap: 12px; }
  .h-card { padding: 12px 12px 14px; }
  .h-card h3 { font-size: 16px; }
  .h-card p { font-size: 14px; }
  .h-card .h-allerg { display: none; }
  .h-plat .h-card .h-allerg { display: block; }
  .h-price { font-size: 16px; }
  .h-price span:last-child { display: none; }
  .h-hero__ctas .sp-pill { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .h-stamp svg, .h-stamp img { animation: none; }
  .h-card, .h-card:hover { transition: none; transform: none; }
}