/* =========================================================================
   割烹「一乃瀬」専用デザイン上書き（style.css の後に読み込む）
   -------------------------------------------------------------------------
   コンセプト：静けさ・余白・墨。丸み/影/派手な演出を落とし、
   ヘアライン（細い罫線）と縦組みの文字で「和の間（ま）」を作る。
   theme.css（色）・style.css（骨格）はそのまま。ここでは
   フォント・写真の見せ方・カード/ボタンの形だけを差し替える。
   ========================================================================= */

:root {
  --font-serif: "Shippori Mincho", "Noto Serif JP", serif;
  --font-sans:  "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

body { letter-spacing: 0.01em; }

/* ---- 見出し全般：字間を少し広めに、細めのウェイトで静かに ---- */
.section-title,
.feature-band__title,
.article__title,
.staff__name {
  font-weight: 600;
  letter-spacing: 0.03em;
}
.hero__title { font-weight: 600; letter-spacing: 0.02em; }

/* ---- セクションラベルを縦組みに（signage的な小さな縦文字） ---- */
.section-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  line-height: 1.6;
  color: var(--color-brand-accent);
}
.section--deep .section-label { color: var(--color-gold); }

/* =========================================================================
   ヒーロー：全面写真の派手な帯をやめ、額装のように余白で囲む
   ========================================================================= */
.hero {
  background-color: var(--color-canvas);
  align-items: flex-end;
  min-height: clamp(480px, 82vh, 760px);
}
.hero__bg {
  inset: clamp(0.6rem, 2vw, 1.4rem);
  width: auto;
  height: auto;
  border: 1px solid var(--color-line);
  filter: grayscale(0.32) contrast(1.06) brightness(0.98);
}
.hero__scrim {
  inset: clamp(0.6rem, 2vw, 1.4rem);
  background: linear-gradient(
    to top,
    rgba(var(--hero-scrim-color), 0.72) 0%,
    rgba(var(--hero-scrim-color), 0.28) 32%,
    rgba(var(--hero-scrim-color), 0) 60%
  );
}
.hero__inner { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem); }
.hero__content--kappo { display: flex; align-items: flex-start; gap: 1.1em; max-width: 42rem; }
.hero__eyebrow {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  flex: none;
  align-self: stretch;
  letter-spacing: 0.28em;
  border-right: 1px solid var(--hero-text-soft);
  padding-right: 0.9em;
  margin-bottom: 0;
}
.hero__text { min-width: 0; }
@media (max-width: 640px) {
  .hero { text-align: left; }
  .hero__content--kappo { margin-inline: 0; }
  .hero__lead { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }
}

/* =========================================================================
   カード・写真：影と丸みをやめ、ヘアラインで区切る
   ========================================================================= */
.card,
.review,
.staff {
  border-radius: 2px;
  box-shadow: none;
  border: 1px solid var(--color-line);
}
.card__media { border-radius: 0; }
.card__media img { filter: grayscale(0.08); }

.section-figure,
.page-figure,
.article__lead,
.feature-band__media,
.map-embed {
  border-radius: 2px;
  box-shadow: none;
  border: 1px solid var(--color-line);
}

.staff__photo { border-radius: 2px; }

/* 看板メニューの写真：フェードをやめ、細枠でくっきりと */
/* フェードをやめた分、style.cssの負のマージン(下の項目とかぶせる仕様)を解除して重なりを防ぐ */
.signature-photos {
  margin-bottom: var(--space-5);
}
.signature-photos img {
  border-radius: 2px;
  -webkit-mask-image: none;
          mask-image: none;
  border: 1px solid var(--color-line);
}

/* =========================================================================
   ボタン：ピルをやめ、角の立った枠線ボタンに
   ========================================================================= */
.btn {
  border-radius: 2px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.btn--primary {
  background-color: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.btn--primary:hover {
  background-color: var(--color-brand);
  color: var(--color-text-on-dark);
}
/* ヘッダーナビの「ご予約」ボタン：style.cssが .nav__list .btn に color:#fff を強制するため、
   同等以上の詳細度で上書きしないと白文字が明るい地に消えてしまう */
.nav__list .btn.btn--primary { color: var(--color-brand); }
.nav__list .btn.btn--primary:hover { color: var(--color-text-on-dark); }

.btn--on-dark {
  background-color: transparent;
  color: var(--hero-text);
  border-color: var(--hero-text);
}
.btn--on-dark:hover { background-color: rgba(255, 255, 255, 0.14); }

/* フローティング予約ボタンも角を落とす */
.frap { border-radius: 2px; letter-spacing: 0.06em; }

/* =========================================================================
   区切り線を強調（章と章のあいだに墨のような一本線）
   ========================================================================= */
.section-head { margin-bottom: var(--space-9); }
.section + .section { position: relative; }
.section + .section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: var(--space-6);
  background-color: var(--color-line);
  transform: translate(-50%, -50%);
}

/* お品書き：カテゴリ見出しの下線を細く、余白を広く */
.menu-category__title {
  border-bottom: 1px solid var(--color-brand-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.menu-category { margin-bottom: var(--space-9); }

/* お知らせタグも角を落として静かに */
.news-list__tag { border-radius: 2px; }