/* =========================================================================
   ビストロ「ひだまり」専用デザイン上書き（style.css の後に読み込む）
   -------------------------------------------------------------------------
   コンセプト：手仕事のあたたかみ・くつろぎ。大きな丸み・ポラロイド風に
   傾いた写真・丸ゴシックの太い見出しで、割烹版とは正反対の空気にする。
   theme.css（色）・style.css（骨格）はそのまま。ここでは
   フォント・写真の見せ方・カード/ボタンの形だけを差し替える。
   ========================================================================= */

:root {
  --font-serif: "Zen Maru Gothic", "Noto Serif JP", serif;
  --font-sans:  "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-price: "Fraunces", var(--font-serif);
}

.section-title,
.feature-band__title,
.article__title,
.staff__name,
.hero__title {
  font-weight: 700;
}

/* ---- セクションラベルを丸いバッジに ---- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background-color: var(--color-brand-tint);
  color: var(--color-brand-accent);
  padding: 0.35em 1.1em;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}
.section-label::before {
  content: "●";
  font-size: 0.5em;
}
.section--deep .section-label { background-color: rgba(255, 255, 255, 0.14); color: var(--color-gold); }

/* =========================================================================
   ヒーロー：大きく丸めた写真カードを、余白のあるキャンバスに置く
   ========================================================================= */
.hero { background-color: var(--color-canvas); }
.hero__bg {
  inset: clamp(0.75rem, 3vw, 2rem);
  width: auto;
  height: auto;
  border-radius: 32px;
  filter: saturate(1.1) brightness(1.02);
}
.hero__scrim {
  inset: clamp(0.75rem, 3vw, 2rem);
  border-radius: 32px;
  background: linear-gradient(
    200deg,
    rgba(var(--hero-scrim-color), calc(var(--hero-scrim-strength) + 0.1)) 0%,
    rgba(var(--hero-scrim-color), var(--hero-scrim-strength)) 46%,
    rgba(var(--hero-scrim-color), calc(var(--hero-scrim-strength) - 0.38)) 100%
  );
}
.hero__eyebrow {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.22);
  padding: 0.4em 1.1em;
  border-radius: 999px;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.hero__title { line-height: 1.3; }

/* =========================================================================
   カード・写真：大きな丸みとやわらかい影で、ぬくもりを出す
   ========================================================================= */
.card,
.review,
.staff {
  border-radius: 24px;
  box-shadow: 0 10px 24px -8px rgba(var(--hero-scrim-color), 0.22), 0 2px 6px rgba(var(--hero-scrim-color), 0.08);
}
.card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover { transform: rotate(-1deg) translateY(-2px); }
.card:nth-child(even):hover { transform: rotate(1deg) translateY(-2px); }

.section-figure,
.page-figure,
.article__lead,
.feature-band__media,
.map-embed {
  border-radius: 24px;
  box-shadow: 0 10px 24px -8px rgba(var(--hero-scrim-color), 0.22);
}

.staff__photo { box-shadow: 0 0 0 4px var(--color-surface), 0 0 0 6px var(--color-brand-tint); }

/* 看板メニューの写真：ポラロイド風に白フチ＋ゆるく傾ける */
/* フェードをやめてポラロイド風に傾ける分、style.cssの負のマージンを解除し、傾き分の余白も足して下の項目とかぶらないようにする */
.signature-photos {
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.signature-photos figure {
  background-color: var(--color-surface);
  padding: 10px 10px 22px;
  border-radius: 6px;
  box-shadow: 0 10px 20px -6px rgba(var(--hero-scrim-color), 0.28);
  transform: rotate(-2.5deg);
}
.signature-photos figure:nth-child(even) { transform: rotate(2.5deg); }
.signature-photos img {
  border-radius: 2px;
  -webkit-mask-image: none;
          mask-image: none;
}

/* =========================================================================
   ボタン：大きめのピル＋押すと少し弾む
   ========================================================================= */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.96) translateY(0); }

/* =========================================================================
   価格表示：手書き感のあるイタリック数字で温かみを
   ========================================================================= */
.menu-item__price,
.signature-item__price {
  font-family: var(--font-price);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05em;
}

/* お品書き：カテゴリ見出しをダッシュ罫線で、チョークボード風に */
.menu-category__title {
  border-bottom: 3px dashed var(--color-brand-accent);
  font-weight: 700;
}

/* お知らせタグも丸く大きめに */
.news-list__tag {
  border-width: 2px;
  font-weight: 700;
}

/* 引用の星マークをアクセントカラーで大きめに */
.review__stars { font-size: 1.1em; }