/* ============================================================
   Bar HONOR - 神戸・中山手通 クリスタルタワー1 4F
   Plum and pewter lounge theme. VARIANCE 7 / MOTION 4 / DENSITY 3
   Theme lock: dark aubergine, whole page. Accent lock: soft rose gold.
   Radius lock: 10px everywhere.

   Serif display is justified here rather than default: this is a luxury
   cocktail lounge, the one brief family where an editorial serif belongs.
   Cormorant Garamond carries the Latin; Japanese glyphs fall through to a
   mincho so both scripts stay in the same serif register.

   Contrast measured against the tokens below (WCAG, 1rem text):
     text/bg 14.5  text/bg-2 13.4  muted/bg 7.7  muted/bg-2 7.1
     accent/bg 6.3  accent/bg-2 5.8  ink/accent 6.5  ink/accent-hi 8.3
     warn/bg 8.9   placeholder/bg 5.4
   ============================================================ */

:root {
  --bg: #1d1620;
  --bg-2: #251d28;
  --bg-3: #2e2432;
  --line: rgba(236, 231, 234, 0.13);
  --text: #ece7ea;
  --muted: #b3a8b0;
  --accent: #c98a80;
  --accent-hi: #d9a099;
  --accent-ink: #1d1016;
  --warn: #e0b070;
  --font-display: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --r: 10px;
  --nav-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(29, 22, 32, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav .wrap { width: 100%; display: flex; align-items: center; gap: 2rem; }

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.14em;
}

.nav-links { display: flex; gap: 1.75rem; margin-left: auto; font-size: 0.92rem; font-weight: 500; }
.nav-links a { color: var(--muted); transition: color 0.25s; }
.nav-links a:hover { color: var(--text); }

.lang { display: flex; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.lang a {
  padding: 0.3rem 0.55rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: color 0.25s, border-color 0.25s;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { color: var(--text); border-color: var(--line); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: transform 0.15s, background 0.25s, border-color 0.25s;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); }

.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

.nav .btn { min-height: 0; padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* ---------- Hero: offset columns with a floor marker over the photo ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 6fr 5fr;
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 3rem) clamp(1.25rem, 5vw, 4.5rem) 3rem;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 1.4rem;
}

.hero-sub { color: var(--muted); max-width: 34em; margin-bottom: 2.2rem; }

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-media {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
}

.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.66);
}

.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(210deg, rgba(29,22,32,0.1) 45%, rgba(29,22,32,0.72));
  pointer-events: none;
}

/* The floor number is the point of the whole page: people hesitate at the
   lift, so the building level is stated as a design element, not fine print. */
.floor-mark {
  position: absolute;
  left: 0; bottom: clamp(2rem, 6vw, 4rem);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem clamp(1rem, 2.5vw, 1.6rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 var(--r) var(--r) 0;
}
.floor-mark .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--accent);
}
.floor-mark .lbl { font-size: 0.85rem; color: var(--muted); }

/* ---------- Sections ---------- */

section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

.sec-head { margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.25;
}
.sec-head p { color: var(--muted); max-width: 42em; margin-top: 0.9rem; }

/* ---------- Cost: the honest centrepiece ---------- */

.cost { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.cost-lead {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.cost-lead .figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--accent);
}
.cost-lead .caption { color: var(--muted); font-size: 0.95rem; }

.cost-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  max-width: 46rem;
}

.cost-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0;
}
.cost-row + .cost-row { border-top: 1px solid var(--line); }
.cost-row .k { font-weight: 700; }
.cost-row .k small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.cost-row .fill { flex: 1; }
.cost-row .v { font-weight: 700; white-space: nowrap; }

/* A value the shop has not published yet. Shown as an explicit blank rather
   than an invented number. */
.cost-row .tbc {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--muted);
  padding: 0 1.6rem 0.1rem;
  white-space: nowrap;
}

.cost-note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 46rem;
}

/* ---------- Room: two seat types ---------- */

.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }

.room {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.room img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.7) brightness(0.72); }
.room-copy { padding: clamp(1.25rem, 2.5vw, 1.8rem); }
.room-copy h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}
.room-copy p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Access: floor strip beside the details ---------- */

.access-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.floors { list-style: none; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 92px; }
.floors li {
  padding: 0.7rem 1.2rem;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}
.floors li + li { border-top: 1px solid var(--line); }
.floors li.here {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.hours dt {
  font-weight: 700;
  margin-top: 1.4rem;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.hours dt:first-child { margin-top: 0; }
.hours dd { font-size: 1.15rem; font-weight: 500; }

.info-list { list-style: none; }
.info-list li { padding: 1.05rem 0; display: flex; flex-direction: column; gap: 0.15rem; }
.info-list li + li { border-top: 1px solid var(--line); }
.info-list .label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.info-list a.link { color: var(--accent); font-weight: 700; }
.info-list a.link:hover { text-decoration: underline; }

.info-actions { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Welcome strip ---------- */

.strip {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.strip p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 600;
  max-width: 30em;
  margin: 0 auto;
}
.strip .sub { font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; color: var(--muted); margin-top: 0.6rem; }

/* ---------- Reservation ---------- */

.reserve { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.reserve-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.reserve-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 1rem;
}
.reserve-copy p { color: var(--muted); max-width: 36em; }

.reserve-alt {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
}
.reserve-alt a { color: var(--accent); font-weight: 700; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; }

.field input,
.field select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r);
  appearance: none;
  -webkit-appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b3a8b0' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field input:focus,
.field select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* 0.8 alpha keeps the placeholder at 5.4:1 on the input background. */
.field input::placeholder { color: rgba(179, 168, 176, 0.8); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: var(--warn);
  font-size: 0.9rem;
  font-weight: 500;
}
.form-error.show { display: block; }

.form-ok {
  grid-column: 1 / -1;
  display: none;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
}
.form-ok.show { display: block; }

.form .btn { grid-column: 1 / -1; justify-self: start; }

/* ---------- Footer ---------- */

footer {
  padding: 3rem 0 3.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
}

.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.foot-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.foot-links { display: flex; gap: 1.5rem; align-items: center; }
.foot-links a:hover { color: var(--text); }

/* No extra opacity: dimming --muted further would drop this honesty
   disclosure under the 4.5:1 minimum. */
.demo-note { margin-top: 1.6rem; font-size: 0.8rem; }

/* ---------- Reveal on scroll ---------- */

.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .lang a, .nav-links a { transition: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .nav-links { display: none; }

  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero-media { min-height: 46vh; border-left: none; border-top: 1px solid var(--line); }

  .rooms { grid-template-columns: 1fr; }

  .access-grid { grid-template-columns: 1fr; }
  .floors { display: flex; min-width: 0; }
  .floors li { flex: 1; }
  .floors li + li { border-top: none; border-left: 1px solid var(--line); }

  .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .lang { font-size: 0.72rem; }
  .nav .wrap { gap: 0.9rem; }
  .hero-ctas .btn { width: 100%; }
  .cost-row { flex-wrap: wrap; }
  .cost-row .fill { display: none; }
}


/* ============================================================
   Chrome differentiation. Twelve sibling sites were sharing one
   nav, reservation block and footer, so two open tabs read as the
   same template. Variants are distributed so no two neighbouring
   sites repeat a combination.
   ============================================================ */

/* Chrome variant FOOT-B: everything centred in a single stacked block. */
.foot-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
.foot-links { justify-content: center; }
.demo-note { text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; }


/* Hero rebuilt. 01, 10 and 12 all ran a copy-left / portrait-right split whose
   .hero-copy padding was byte-identical. 01 keeps the split. This lounge moves
   to a centred editorial hero with the photograph as a band below, which fits
   Cormorant Garamond far better than a column of body copy. */
.hero { display: flex; flex-direction: column; min-height: auto; }
.hero-copy {
  order: 1; align-items: center; text-align: center;
  max-width: 40rem; margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(3rem, 8vh, 5rem)) 1.25rem clamp(2rem, 5vh, 3rem);
}
.hero-ctas { justify-content: center; }
.hero-media { order: 2; position: relative; width: 100%; height: clamp(260px, 44vh, 460px); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Media layer overrides ----------
   .m-gallery sits on .rooms purely as a behaviour hook, so the room
   photos open in the tap-through viewer. media.css loads after this
   file, so its grid rules would otherwise win; these two-class rules
   keep the layout the design intends at every width. */
.rooms.m-gallery { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
.rooms.m-gallery > *:nth-child(4n+1) { grid-column: auto; grid-row: auto; }
@media (max-width: 900px) {
  .rooms.m-gallery { grid-template-columns: 1fr; }
}

/* The photo IS the control, so the button carries no button chrome.
   min-height guarantees the 44px tap target even if an image fails. */
.m-shot {
  display: block; width: 100%;
  padding: 0; border: none; background: none;
  cursor: pointer; min-height: 44px;
}
.m-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ============================================================
   MOBILE HEADER REPAIR (2026-09-13)
   Found by rendering this site at a TRUE 390px viewport. Every
   code-level check passed: JSON-LD parsed, contrast computed,
   node --check clean. None of them can see that the shop's own
   name was breaking character by character in its own header
   (シ/ャ/ル/メ) and that 日本語 was stacking vertically in the
   language switcher.

   Appended last so it wins on source order without raising
   specificity, and uses no colour values, so nothing can regress.
   ============================================================ */

/* A shop's name must never break mid-word in its own header. */
.brand { white-space: nowrap; }

/* 日本語 is one word to a reader; it must not become 日/本/語. */
.lang a { white-space: nowrap; }

@media (max-width: 430px) {
  /* THE BOOKING BUTTON WAS RUNNING OFF THE SCREEN.
     Measured at a 358px viewport, the nav CTA's right edge sat between
     366px and 466px on eleven of fifteen sites. The nav is fixed and
     does not scroll, so the document reported no overflow and every
     automated check passed while the primary conversion control was
     partly invisible on a small phone.
     The header keeps brand, languages and the booking button; they just
     stop competing for room. */
  .nav .wrap { gap: 0.5rem; }
  .nav .btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    min-width: 0;
  }
  .lang { gap: 0.1rem; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.68rem; }
  .brand { font-size: 1.05rem; letter-spacing: 0.04em; }
}