/* 「北新地の夜」テーマ
 * 藍墨の地に生成りの文字、金茶の細い線。見出しは明朝（しっぽり明朝）。
 * content/site.js の theme を "yoru" にすると有効になります（html に .theme-yoru が付く）。
 */
html.theme-yoru {
  --white: #1e2533;       /* 地：夜の藍（少し明るめ） */
  --greige-50: #262e3e;   /* 帯：ひとつ明るい藍 */
  --greige: #3b4455;      /* 罫・写真の下地 */
  --greige-ink: #b9b0a1;  /* 補足の文字：枯れ色 */
  --black: #f1eadc;       /* 本文：生成り */
  --kin: #b8945c;         /* 金茶：線とボタン */
  --kin-deep: #9c7a45;
  --night: #161c27;       /* 表紙・フッターの一番深い色 */
  --sakura: #eab8c3;      /* 桜色：ワンポイントだけに使う */
  /* 桜の花と花びら（線や見出しに添える小さな飾り） */
  --sakura-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg fill='%23eab8c3'%3E%3Cpath id='p' d='M0 0C-2.8-2.1-3.1-6.3-1.1-8.7L0-7.5L1.1-8.7C3.1-6.3 2.8-2.1 0 0Z'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='1.4' fill='%23c98894'/%3E%3C/svg%3E");
  --sakura-petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -10 12 12'%3E%3Cpath fill='%23eab8c3' d='M0 0C-3.6-2.4-4-6.6-1.4-9.4L0-7.9L1.4-9.4C4-6.6 3.6-2.4 0 0Z'/%3E%3C/svg%3E");
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "IPAMincho",
    "Noto Serif KR", "Noto Serif SC", serif;
  color-scheme: dark;
}

.theme-yoru body { background: var(--white); color: var(--black); }
.theme-yoru .hero__lead,
.theme-yoru .body { color: #ddd5c6; }

/* ヘッダー */
.theme-yoru .site-header { background: rgba(22, 28, 39, 0.94); border-bottom-color: rgba(184, 148, 92, 0.25); }
.theme-yoru .wordmark { color: var(--black); }
.theme-yoru .lang button[aria-pressed="true"] { color: var(--kin); }

/* 表紙：店内写真に店名とひとことを重ねる */
.theme-yoru .hero { padding-top: 0; }
.theme-yoru .hero__cover {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 calc(var(--gutter) * -1);
  min-height: 440px; height: 68svh; max-height: 640px;
  padding: 24px var(--gutter) 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--night);
}
.theme-yoru .hero__cover-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%;
  filter: brightness(1.04);
  /* 写真の切り替え：ふわっと入れ替わり、ゆっくり寄ったり引いたりする */
  opacity: 0; transition: opacity 1.6s ease;
  animation: cover-drift 16s ease-in-out infinite alternate;
}
.theme-yoru .hero__cover-img.is-active { opacity: 1; }
.theme-yoru .hero__cover-img:nth-of-type(even) { animation-direction: alternate-reverse; }
@keyframes cover-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-2%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-yoru .hero__cover-img { animation: none; transition: none; }
}
/* 表紙に舞う花びら（左上にいくつか、控えめに） */
.theme-yoru .hero__cover::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.85;
  background:
    var(--sakura-petal) 12% 14% / 13px no-repeat,
    var(--sakura-petal) 26% 30% / 9px no-repeat,
    var(--sakura-flower) 8% 40% / 18px no-repeat,
    var(--sakura-petal) 34% 9% / 7px no-repeat,
    var(--sakura-petal) 18% 55% / 10px no-repeat;
}
.theme-yoru .hero__cover > :not(.hero__cover-img) { position: relative; z-index: 1; }
.theme-yoru .hero__cover::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22, 28, 39, 0.05) 0%, rgba(22, 28, 39, 0.22) 45%, rgba(22, 28, 39, 0.88) 100%);
}
/* 日本語はひとことを縦書きに（右上） */
.theme-yoru .hero__cover .hero__tagline {
  margin: 0; align-self: flex-end;
  color: #f3ecdf; font-size: 21px; line-height: 1.9; letter-spacing: 0.18em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
html[lang="ja"].theme-yoru .hero__cover .hero__tagline { writing-mode: vertical-rl; max-height: 15em; }
html:not([lang="ja"]).theme-yoru .hero__cover .hero__tagline { align-self: stretch; letter-spacing: 0.02em; font-size: 22px; line-height: 1.35; }
.theme-yoru .hero__cover .masthead { position: relative; }
.theme-yoru .masthead__en { color: #f3ecdf; }
.theme-yoru .masthead__ja { color: #f3ecdf; }
.theme-yoru .masthead__place { color: var(--kin); }
.theme-yoru .hero__cover .masthead::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 1px; background: var(--kin); opacity: 0.7;
}

.theme-yoru .hero__strip { margin-top: 4px; }
.theme-yoru .hero__strip .dish__name { color: var(--greige-ink); }
.theme-yoru .hero__lead { margin-top: 20px; }
.theme-yoru .floor-chip { background: transparent; color: var(--kin); border: 1px solid var(--kin); }

/* 見出し：明朝＋金茶の短い線 */
.theme-yoru .sec-title { color: var(--black); }
.theme-yoru .sec-title::after {
  content: ""; display: block; width: 52px; height: 14px; margin-top: 8px;
  background: linear-gradient(var(--kin), var(--kin)) left center / 32px 1px no-repeat, var(--sakura-flower) right center / 13px no-repeat;
}
.theme-yoru .dish__name, .theme-yoru .menu__name { color: var(--black); }

/* 写真：夜の店内に合わせて少しだけ落ち着かせる */


/* 「一杯だけでも」の帯の右上に、ひと枝分の桜 */
.theme-yoru .one-drink { position: relative; }
.theme-yoru .one-drink::before {
  content: ""; position: absolute; top: 22px; right: 22px; width: 60px; height: 44px; pointer-events: none; opacity: 0.9;
  background: var(--sakura-flower) 0 6px / 22px no-repeat, var(--sakura-flower) 30px 0 / 15px no-repeat, var(--sakura-petal) 46px 30px / 9px no-repeat;
}

/* お品書き */
.theme-yoru .menu__group {
  border-top-color: var(--kin); border-bottom-color: rgba(184, 148, 92, 0.45); color: var(--kin);
  background: var(--sakura-flower) 18% center / 14px no-repeat, var(--sakura-flower) 82% center / 14px no-repeat;
}
.theme-yoru .menu__cat li { border-bottom-color: var(--greige); }
.theme-yoru .menu__rec { color: var(--sakura); }

/* アクセス・店舗情報 */
.theme-yoru .floor-badge { background: var(--night); color: var(--black); border: 1px solid var(--kin); }
.theme-yoru .floor-badge__num { color: var(--kin); border-right-color: rgba(184, 148, 92, 0.45); }
.theme-yoru .step-no { color: var(--kin); }
.theme-yoru .info { border-top-color: var(--kin); }
.theme-yoru .info dd a { color: var(--black); text-decoration-color: var(--kin); }
.theme-yoru .more a { color: var(--kin); }

/* ボタン：金茶の地に藍墨の文字／金茶の線 */
.theme-yoru .btn { border-color: var(--kin); }
.theme-yoru .btn--primary { background: var(--kin); color: var(--night); }
.theme-yoru .btn--primary:active { background: var(--kin-deep); }
.theme-yoru .btn--outline { background: transparent; color: var(--black); }
.theme-yoru .btn--outline:active { background: rgba(184, 148, 92, 0.12); }
.theme-yoru .cta-bar { background: rgba(22, 28, 39, 0.96); border-top-color: rgba(184, 148, 92, 0.35); }

/* フッター */
.theme-yoru .site-footer { background: var(--night); color: var(--black); border-top: 1px solid rgba(184, 148, 92, 0.3); }
.theme-yoru .footer__addr { color: var(--greige-ink); }
.theme-yoru .footer__copy { color: #6f6a62; }
.theme-yoru .footer__links a { text-decoration-color: var(--kin); }
.theme-yoru .footer__name { padding-left: 24px; background: var(--sakura-flower) left center / 16px no-repeat; }

.theme-yoru .is-preview .tbd, .theme-yoru.is-preview .tbd { color: #000; }

@media (max-width: 374px) {
  .theme-yoru .hero__cover { min-height: 400px; }
  .theme-yoru .hero__cover .hero__tagline { font-size: 18px; }
}
@media (min-width: 720px) {
  .theme-yoru .hero__cover { margin-left: auto; margin-right: auto; max-width: 760px; }
}

/* Web予約ページ */
.theme-yoru .field input, .theme-yoru .field select, .theme-yoru .field textarea { background: var(--night); border-color: rgba(184, 148, 92, 0.45); }
.theme-yoru .field input:focus, .theme-yoru .field select:focus, .theme-yoru .field textarea:focus { outline-color: var(--kin); border-color: var(--kin); }
.theme-yoru .field__tag.is-req { border-color: var(--kin); color: var(--kin); }
.theme-yoru .field.is-error input, .theme-yoru .field.is-error select, .theme-yoru .field.is-error textarea { border-color: #e48a7e; }
.theme-yoru .field__err, .theme-yoru .rsv-error { color: #e48a7e; border-color: #e48a7e; }
.theme-yoru .field__warn { border-left-color: var(--kin); }
.theme-yoru .seg { border-color: rgba(184, 148, 92, 0.45); }
.theme-yoru .seg label + label { border-left-color: rgba(184, 148, 92, 0.45); }
.theme-yoru .seg input:checked + span { background: var(--kin); color: var(--night); }
.theme-yoru .rsv-sub { color: var(--black); }