
.bn-wrap {
  --bn-bg: var(--paper);
  --bn-tile: var(--paper2);
  --bn-ink: var(--ink);
  --bn-muted: var(--ink-soft);
  --bn-line: var(--silver2);
  --bn-accent: var(--navy);
  --bn-accent-d: var(--navy-deep, var(--navy));
  --bn-warm: #c98a3c;
  --bn-deep: #34322c;
  --bn-radius: 20px;
  --bn-radius-s: 13px;
  --bn-gap: clamp(0.55rem, 1.9vw, 1rem);
  --bn-sans: var(--sans);
  --bn-disp: var(--en);
  --bn-serif: var(--display);
  --bn-pad: clamp(1.05rem, 3.2vw, 1.7rem);
  max-width: 1180px; margin: 0 auto; padding: clamp(0.7rem, 2.8vw, 1.5rem);
  color: var(--bn-ink); font-family: var(--bn-sans);
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--bn-bg) 88%, #000 4%) 0%, transparent 55%),
    var(--bn-bg);
}
.bn-wrap * { box-sizing: border-box; }
.bn-wrap img { max-width: 100%; height: auto; display: block; }
.bn-wrap a { color: inherit; }
.bn-wrap h1, .bn-wrap h2, .bn-wrap h3 { text-wrap: balance; }
.bn-wrap p { text-wrap: pretty; }

.bn-masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.4rem clamp(0.5rem, 2vw, 0.9rem); }
.bn-masthead__l { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.bn-masthead h1.bn-issue { font-family: var(--bn-serif); font-weight: 400; letter-spacing: 0.02em; font-size: clamp(1rem, 0.92rem + 0.5vw, 1.3rem); line-height: 1; }
.bn-masthead .bn-issue-en { font-family: var(--bn-disp); font-weight: 600; letter-spacing: 0.34em; font-size: 0.62rem; color: var(--bn-muted); text-transform: uppercase; }
.bn-masthead time { font-family: var(--bn-disp); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--bn-muted); }

.bn-head { display: flex; align-items: center; justify-content: space-between; background: var(--bn-deep); color: #fff; border-radius: var(--bn-radius); padding: 0.6rem 0.6rem 0.6rem 1.35rem; margin-bottom: var(--bn-gap); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.bn-brand { font-family: var(--bn-serif); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.04em; line-height: 1.1; }
.bn-brand small { display: block; font-family: var(--bn-disp); font-size: 0.6rem; font-weight: 600; opacity: 0.6; letter-spacing: 0.28em; margin-top: 0.18rem; }
.bn-nav { display: flex; gap: 0.15rem; align-items: center; }
.bn-nav a { display: none; padding: 0 0.85rem; min-height: 44px; align-items: center; text-decoration: none; font-size: 0.82rem; letter-spacing: 0.04em; opacity: 0.82; border-radius: 11px; transition: 0.18s; }
.bn-nav a:hover { background: rgba(255,255,255,0.1); opacity: 1; }
.bn-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.25rem; background: var(--bn-accent); color: #fff; border-radius: 13px; font-weight: 700; text-decoration: none; font-size: 0.88rem; letter-spacing: 0.04em; transition: 0.18s; }
.bn-cta:hover { background: var(--bn-accent-d); transform: translateY(-1px); }
@media (min-width: 780px) { .bn-nav a { display: inline-flex; } }

.bn-grid { display: grid; gap: var(--bn-gap); grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(58px, auto); grid-auto-flow: dense; }
.bn-card { position: relative; overflow: hidden; background: var(--bn-tile); border: 1px solid var(--bn-line); border-radius: var(--bn-radius); padding: var(--bn-pad); display: flex; flex-direction: column; justify-content: space-between; gap: 0.7rem; }
.bn-card[data-no]::after { content: attr(data-no); position: absolute; top: 0.85rem; right: 1rem; z-index: 3; font-family: var(--bn-disp); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--bn-muted); opacity: 0.7; }
.bn-card.is-dark[data-no]::after, .bn-card.is-accent[data-no]::after, .bn-card.is-warm[data-no]::after, .bn-card.is-photo[data-no]::after { color: #fff; opacity: 0.55; }
.bn-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--bn-disp); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bn-muted); }
.bn-tag::before { content: ""; width: 14px; height: 1.5px; background: var(--bn-accent); border-radius: 2px; }
.is-dark .bn-tag, .is-accent .bn-tag, .is-warm .bn-tag, .is-photo .bn-tag { color: rgba(255,255,255,0.8); }
.is-dark .bn-tag::before, .is-accent .bn-tag::before, .is-warm .bn-tag::before, .is-photo .bn-tag::before { background: rgba(255,255,255,0.7); }

.bn-hero { grid-column: span 8; grid-row: span 5; justify-content: flex-end; background: radial-gradient(130% 120% at 88% 8%, color-mix(in srgb, var(--bn-accent) 70%, #fff) 0%, transparent 50%), linear-gradient(160deg, var(--bn-accent) 0%, var(--bn-accent-d) 100%); color: #fff; border: none; }
.bn-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.16; pointer-events: none; background: linear-gradient(0deg, transparent 49.6%, rgba(255,255,255,0.6) 49.6% 50.4%, transparent 50.4%), linear-gradient(90deg, transparent 49.6%, rgba(255,255,255,0.6) 49.6% 50.4%, transparent 50.4%); background-size: 62px 62px; }
.bn-hero > * { position: relative; z-index: 1; }
.bn-hero .bn-eyebrow { font-family: var(--bn-disp); font-weight: 600; letter-spacing: 0.2em; font-size: 0.7rem; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.bn-hero h2.bn-hero-title { font-family: var(--bn-serif); font-weight: 400; letter-spacing: 0.01em; font-size: clamp(2.1rem, 1.2rem + 4.6vw, 4.2rem); line-height: 1.12; margin: 0.5rem 0 0.55rem; }
.bn-hero p { max-width: 32ch; opacity: 0.94; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem); }
.bn-hero .bn-herobtns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.bn-hero .bn-btn-w { background: #fff; color: var(--bn-ink); }
.bn-hero .bn-btn-w:hover { background: #f3efe6; }
.bn-hero .bn-btn-o { background: transparent; border: 1.5px solid rgba(255,255,255,0.6); color: #fff; }
.bn-hero .bn-btn-o:hover { background: rgba(255,255,255,0.12); }

.bn-photo { padding: 0; border: none; position: relative; color: #fff; }
.bn-ph { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bn-ph--dish { background: radial-gradient(60% 55% at 32% 30%, #e7b878 0%, transparent 60%), radial-gradient(70% 70% at 78% 82%, #9a6a3a 0%, transparent 62%), linear-gradient(150deg, #c98a4c 0%, #8a5a2e 100%); }
.bn-ph--room { background: radial-gradient(65% 60% at 70% 25%, #b9c2a4 0%, transparent 58%), radial-gradient(75% 75% at 20% 90%, #5b5640 0%, transparent 60%), linear-gradient(155deg, #8d9472 0%, #4f4d3c 100%); }
.bn-ph__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,14,0.05) 38%, rgba(20,18,14,0.62) 100%); }
.bn-photo__cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: var(--bn-pad); width: 100%; }
.bn-photo__cap h3 { font-family: var(--bn-serif); font-weight: 400; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.75rem); text-shadow: 0 2px 14px rgba(0,0,0,0.55); line-height: 1.25; }
.bn-photo__cap p { font-size: 0.86rem; text-shadow: 0 1px 8px rgba(0,0,0,0.7); opacity: 0.95; margin-top: 0.2rem; }
.bn-photo--tall { grid-column: span 4; grid-row: span 5; min-height: 280px; }
.bn-photo--wide { grid-column: span 5; grid-row: span 3; min-height: 220px; }

.bn-stat { grid-column: span 4; grid-row: span 2; background: var(--bn-warm); color: #fff; border: none; justify-content: flex-end; background-image: linear-gradient(135deg, #d29a4f 0%, #bd7c2f 100%); }
.bn-stat .bn-num { font-family: var(--bn-disp); font-weight: 800; font-size: clamp(2.6rem, 1.6rem + 5vw, 4.2rem); line-height: 0.95; letter-spacing: -0.02em; }
.bn-stat .bn-num span { font-size: 0.42em; font-weight: 600; margin-left: 0.1em; }
.bn-stat .bn-num-lbl { font-size: 0.92rem; opacity: 0.92; margin-top: 0.2rem; }

.bn-hours { grid-column: span 4; grid-row: span 2; }
.bn-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 0.05rem 0.9rem; font-size: 0.95rem; align-content: end; }
.bn-hours dt { color: var(--bn-muted); padding: 0.32rem 0; border-bottom: 1px solid var(--bn-line); }
.bn-hours dd { text-align: right; font-variant-numeric: tabular-nums; padding: 0.32rem 0; border-bottom: 1px solid var(--bn-line); }
.bn-hours dt:last-of-type, .bn-hours dd:last-of-type { border-bottom: none; }
.bn-hours .bn-rest { color: var(--bn-accent-d); font-weight: 700; }

.bn-feat { grid-column: span 4; grid-row: span 2; }
.bn-feat h3 { font-family: var(--bn-serif); font-weight: 400; font-size: 1.25rem; line-height: 1.4; }
.bn-feat p { font-size: 0.92rem; color: var(--bn-muted); }

.bn-menu { grid-column: span 5; grid-row: span 3; }
.bn-menu ul { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 0.2rem; }
.bn-menu li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.7rem; padding: 0.62rem 0; border-bottom: 1px dotted var(--bn-line); }
.bn-menu li:last-child { border-bottom: none; }
.bn-menu li .mi { font-family: var(--bn-disp); font-weight: 700; font-size: 0.7rem; color: var(--bn-accent); letter-spacing: 0.06em; }
.bn-menu li b { font-weight: 500; font-size: 0.98rem; }
.bn-menu li b small { display: block; font-weight: 400; font-size: 0.76rem; color: var(--bn-muted); letter-spacing: 0.02em; margin-top: 0.05rem; }
.bn-menu li .pr { color: var(--bn-ink); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.98rem; white-space: nowrap; }

.bn-voice { grid-column: span 4; grid-row: span 3; background: var(--bn-deep); color: #fff; border: none; justify-content: space-between; }
.bn-voice .qm { font-family: var(--bn-serif); font-size: 2.4rem; line-height: 0.6; color: var(--bn-accent); opacity: 0.9; }
.bn-voice blockquote { font-family: var(--bn-serif); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.45rem); line-height: 1.6; }
.bn-voice cite { display: block; margin-top: 0.9rem; font-style: normal; font-size: 0.82rem; opacity: 0.62; letter-spacing: 0.02em; }

.bn-map { grid-column: span 3; grid-row: span 3; padding: 0; border: none; position: relative; color: #fff; min-height: 200px; }
.bn-map__cv { position: absolute; inset: 0; background: radial-gradient(closest-side at 62% 44%, transparent 0 5%, var(--bn-accent) 5% 6%, transparent 6%), radial-gradient(closest-side at 62% 44%, transparent 0 13%, rgba(86,98,74,0.35) 13% 13.7%, transparent 13.7%), radial-gradient(closest-side at 62% 44%, transparent 0 22%, rgba(86,98,74,0.25) 22% 22.6%, transparent 22.6%), radial-gradient(closest-side at 62% 44%, transparent 0 32%, rgba(86,98,74,0.18) 32% 32.5%, transparent 32.5%), linear-gradient(0deg, transparent 39%, rgba(255,255,255,0.5) 39% 41%, transparent 41%), linear-gradient(118deg, transparent 67%, rgba(255,255,255,0.45) 67% 68.4%, transparent 68.4%), linear-gradient(150deg, #dfe3d6 0%, #cdd3c2 100%); }
.bn-map__pin { position: absolute; left: 62%; top: 44%; z-index: 2; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--bn-warm); transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
.bn-map__pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); }
.bn-map__lbl { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; padding: var(--bn-pad); color: var(--bn-ink); }
.bn-map__lbl .bn-tag { color: var(--bn-muted); }
.bn-map__lbl .bn-tag::before { background: var(--bn-accent); }
.bn-map__lbl p { font-weight: 500; font-size: 0.92rem; margin-top: 0.3rem; text-shadow: 0 1px 4px rgba(255,255,255,0.6); }

.bn-feat--soft { grid-column: span 5; grid-row: span 2; background: color-mix(in srgb, var(--bn-accent) 14%, #fff); border-color: color-mix(in srgb, var(--bn-accent) 24%, #fff); }

.bn-contact { grid-column: span 8; grid-row: span 4; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1rem, 3vw, 2.1rem); }
.bn-contact__l { display: flex; flex-direction: column; justify-content: center; }
.bn-contact h2 { font-family: var(--bn-serif); font-weight: 400; font-size: clamp(1.55rem, 1.2rem + 1.8vw, 2.3rem); line-height: 1.25; }
.bn-contact__l > p { color: var(--bn-muted); margin-top: 0.7rem; font-size: 0.95rem; }
.bn-contact__info { margin-top: 1.1rem; border-top: 1px solid var(--bn-line); padding-top: 0.9rem; font-size: 0.9rem; line-height: 1.9; }
.bn-contact__info b { font-family: var(--bn-disp); font-weight: 700; letter-spacing: 0.04em; }
.bn-contact__actions { display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; }
.bn-contact__actions .bn-cta { min-height: 48px; }
.bn-contact__note { font-size: 0.82rem; color: var(--bn-muted); }

.bn-band { grid-column: span 4; grid-row: span 4; background: var(--bn-accent); color: #fff; border: none; justify-content: center; text-align: center; align-items: center; gap: 0.9rem; }
.bn-band h3 { font-family: var(--bn-serif); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem); line-height: 1.4; }
.bn-band p { font-size: 0.92rem; opacity: 0.92; max-width: 24ch; }
.bn-band .bn-cta { background: #fff; color: var(--bn-accent-d); }
.bn-band .bn-cta:hover { background: #f1eee4; }

.bn-foot { grid-column: span 12; background: transparent; border: none; padding: 0.5rem 0.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem; color: var(--bn-muted); font-size: 0.8rem; }
.bn-foot__brand { font-family: var(--bn-serif); color: var(--bn-ink); font-size: 0.95rem; }
.bn-foot a { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.bn-foot a:hover { color: var(--bn-accent-d); }
.bn-foot__links { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.bn-foot__links a { padding: 0 0.55rem; }

@media (max-width: 920px) {
  .bn-hero { grid-column: span 12; grid-row: span 4; }
  .bn-photo--tall { grid-column: span 6; grid-row: span 4; }
  .bn-photo--wide { grid-column: span 6; grid-row: span 3; }
  .bn-stat, .bn-hours, .bn-feat { grid-column: span 6; }
  .bn-menu { grid-column: span 12; grid-row: auto; }
  .bn-voice { grid-column: span 7; grid-row: span 3; }
  .bn-map { grid-column: span 5; grid-row: span 3; }
  .bn-feat--soft { grid-column: span 12; }
  .bn-contact { grid-column: span 12; }
  .bn-band { grid-column: span 12; grid-row: span 2; flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; justify-content: space-between; }
  .bn-band .bn-band__t { flex: 1 1 60%; }
}
@media (max-width: 600px) {
  .bn-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .bn-hero, .bn-photo--tall, .bn-photo--wide, .bn-menu, .bn-voice, .bn-contact, .bn-band, .bn-foot { grid-column: 1 / -1; grid-row: auto; }
  .bn-stat, .bn-hours, .bn-feat, .bn-feat--soft, .bn-map { grid-column: span 1; grid-row: auto; }
  .bn-photo--tall, .bn-photo--wide { min-height: 210px; }
  .bn-map { min-height: 200px; grid-column: 1 / -1; }
  .bn-contact { grid-template-columns: 1fr; }
  .bn-band { flex-direction: column; text-align: center; align-items: center; }
  .bn-hero::before { background-size: 46px 46px; }
}
@media (max-width: 380px) {
  .bn-grid { grid-template-columns: 1fr; }
  .bn-stat, .bn-hours, .bn-feat, .bn-feat--soft, .bn-map { grid-column: 1 / -1; }
}
