/* ============================================================
   Bar Sky - 神戸三宮・加納町
   Predawn theme. VARIANCE 7 / MOTION 4 / DENSITY 3
   Theme lock: dark, whole page. Accent lock: pale silver-blue.
   Radius lock: 3px everywhere.
   An after-hours bar (00:00-07:00), so the palette is the hour
   before sunrise: blue-charcoal ground, one cold pale accent.
   ============================================================ */

:root {
  --bg: #0f1418;
  --bg-2: #161d23;
  --bg-3: #1e262d;
  --line: rgba(232, 238, 242, 0.14);
  --text: #e8eef2;
  --muted: #9aa9b4;
  --accent: #9fc2d6;
  --accent-hover: #b7d3e3;
  --accent-ink: #0b1116;
  --warn: #e0a48c;
  --r: 3px;
  --font-display: "Zen Antique", "Hiragino Mincho ProN", serif;
  /* Noto Sans JP for body, not the project-wide Zen Kaku Gothic New, so this
     site stops sharing its largest type surface with fourteen others. Noto's
     even colour holds up in small sizes on a very dark ground, which is what
     this predawn palette is. Weights 400/500/700 all ship in the family. */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 66px;
}

* { 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: 1160px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* Zen Antique ships a single weight, so display type never asks for bold
   and the browser never synthesises it. */
.brand, h1, h2, h3, .stat .num, .charge-figure {
  font-family: var(--font-display);
  font-weight: 400;
}

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

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(15, 20, 24, 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: 1.75rem; }

.brand { font-size: 1.3rem; letter-spacing: 0.2em; }

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

.lang { display: flex; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; }
.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; 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-hover); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.nav .btn { padding: 0.5rem 1.1rem; font-size: 0.88rem; }

/* ---------- Hero: time rail + copy + image ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: stretch;
}

.hero-rail {
  border-right: 1px solid var(--line);
  padding: calc(var(--nav-h) + 2.5rem) 0 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.9rem;
  text-align: center;
}
.hero-rail .tick {
  font-size: 0.82rem; letter-spacing: 0.1em; color: var(--muted);
}
.hero-rail .tick.on { color: var(--accent); font-weight: 700; }
.hero-rail .rail-label {
  font-size: 0.7rem; letter-spacing: 0.18em; color: var(--muted);
  margin-bottom: 0.4rem;
}

.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 2.5rem) clamp(1.5rem, 4vw, 3.5rem) 2.5rem;
}

.eyebrow {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--accent); margin-bottom: 1.3rem;
}

.hero h1 {
  /* The cap is 3.15rem, not 3.7rem, because this hero is a three-column
     grid (rail + copy + media) and the copy column is only about 500px
     at a 1280px viewport. At 3.7rem each of the two intended lines
     needed roughly 531px, so both wrapped and the headline rendered as
     FOUR lines against the project's two-line rule. Sizing from the
     viewport is misleading whenever the text does not occupy the
     viewport width. Measured, not estimated. */
  font-size: clamp(2.2rem, 4.8vw, 3.15rem);
  line-height: 1.3; letter-spacing: 0.02em; margin-bottom: 1.4rem;
}

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

.hero-ctas { display: flex; gap: 0.9rem; 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.5) brightness(0.72) contrast(1.05);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(15,20,24,0.1) 35%, rgba(15,20,24,0.6));
  pointer-events: none;
}

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

section { padding: clamp(4rem, 8vw, 7rem) 0; }

.sec-head { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); }
.sec-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.35; }
.sec-head p { color: var(--muted); max-width: 40em; margin-top: 0.85rem; }

/* ---------- After-hours timeline band ---------- */

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

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 2.2rem;
}
.tl-step { background: var(--bg-2); padding: 1.5rem 1.3rem; }
.tl-step.is-open { background: var(--bg-3); }
.tl-step .t {
  font-family: var(--font-display);
  font-size: 1.45rem; margin-bottom: 0.35rem;
}
.tl-step.is-open .t { color: var(--accent); }
.tl-step .d { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }

/* ---------- Cast cards ---------- */

.cast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.cast-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
}
.cast-card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: saturate(0.5) brightness(0.72) contrast(1.05);
}
.cast-body { padding: 1.1rem 1.2rem 1.4rem; }
.cast-body h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.cast-body p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }

.sample-note {
  margin-top: 1.4rem; color: var(--muted); font-size: 0.86rem;
}

/* ---------- Charge panel: big figure + component list ---------- */

.charge {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.charge-figure {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.1;
  color: var(--accent);
}
.charge-figure-label { color: var(--muted); font-size: 0.92rem; margin-top: 0.7rem; }
.charge-source { color: var(--muted); font-size: 0.84rem; margin-top: 1.2rem; }

.charge-list { list-style: none; }
.charge-list li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
}
.charge-list li:first-child { border-top: none; }
.charge-list .k { font-weight: 700; }
.charge-list .dots {
  flex: 1; border-bottom: 1px dotted rgba(232,238,242,0.22);
  transform: translateY(-4px);
}
.charge-list .v { white-space: nowrap; font-weight: 700; }
.charge-list .tbc {
  white-space: nowrap;
  font-size: 0.82rem; font-weight: 700;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: var(--r);
  padding: 0.2rem 0.7rem;
}

/* ---------- Access: three-column band ---------- */

.access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
}
.access-col h3 {
  font-size: 1.15rem; margin-bottom: 0.9rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
}
.access-col p, .access-col li { color: var(--muted); }
.access-col .strong { color: var(--text); }

.hours-list { list-style: none; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0;
}
.hours-list li + li { border-top: 1px solid rgba(232,238,242,0.07); }
.hours-list .closed { color: var(--warn); font-weight: 700; }

.steps { list-style: none; counter-reset: s; }
.steps li {
  counter-increment: s;
  padding: 0.55rem 0 0.55rem 2.1rem;
  position: relative;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0.55rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: 0.78rem; font-weight: 700; color: var(--accent);
}

.access-actions { margin-top: 1.6rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }

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

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

.reserve-grid {
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(2.2rem, 5vw, 4rem); align-items: start;
}
.reserve-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.reserve-copy p { color: var(--muted); max-width: 34em; }

.date-note {
  margin-top: 1.4rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-3);
  color: var(--text); font-size: 0.9rem; line-height: 1.75;
}

.reserve-alt {
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem; color: var(--muted);
}
.reserve-alt a { color: var(--accent); font-weight: 700; }
.reserve-alt a:hover { text-decoration: underline; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.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.04em; }

.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='%239aa9b4' 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);
}
/* Solid tone rather than a faded wash, so the hint stays readable. */
.field input::placeholder { color: #7b8892; }

.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.15rem; font-size: 0.95rem;
}
.form-ok.show { display: block; }
.form .btn { grid-column: 1 / -1; justify-self: start; }

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

footer {
  padding: 2.8rem 0 3.2rem;
  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-size: 1.1rem; color: var(--text); margin-bottom: 0.35rem; }
.foot-links { display: flex; gap: 1.4rem; align-items: center; }
.foot-links a:hover { color: var(--text); }
.demo-note { margin-top: 1.5rem; font-size: 0.8rem; }

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

.rv {
  opacity: 0; transform: translateY(20px);
  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: 980px) {
  .cast-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .access-grid { grid-template-columns: 1fr; }
  .charge { grid-template-columns: 1fr; }
  .reserve-grid { grid-template-columns: 1fr; }
}

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

  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-rail {
    flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    gap: 0.9rem 1.2rem;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: calc(var(--nav-h) + 1.5rem) clamp(1.25rem, 4vw, 3rem) 1.2rem;
    text-align: left;
  }
  .hero-rail .rail-label { width: 100%; margin-bottom: 0; }
  .hero-copy { padding-top: 2rem; }
  .hero-media { min-height: 44vh; border-left: none; border-top: 1px solid var(--line); }

  .form { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; }
}

@media (max-width: 520px) {
  .cast-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .lang { font-size: 0.72rem; }
  .nav .wrap { gap: 0.85rem; }
}


/* ============================================================
   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 NAV-C: minimal rail. Brand is divided off by a rule, links sit
   left, language and a text-style CTA sit right. Heavier bottom border. */
.nav { border-bottom-width: 2px; }
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; }
.nav .brand { margin-right: 1.4rem; padding-right: 1.4rem; border-right: 1px solid var(--line); }
.nav-links { margin-left: 0; margin-right: auto; font-size: 0.86rem; letter-spacing: 0.07em; }
.nav .lang { order: 8; }
.nav .btn.btn-primary {
  background: none; color: var(--text); border: none; border-radius: 0;
  border-bottom: 2px solid var(--accent);
  padding-left: 0; padding-right: 0; order: 9;
}
.nav .btn.btn-primary:hover { background: none; color: var(--accent); }
@media (max-width: 900px) {
  .nav .brand { margin-right: auto; padding-right: 0; border-right: none; }
}

/* Chrome variant RES-C: full-width band, copy across the top, form in a
   three-column rank beneath it. */
.reserve-grid { grid-template-columns: 1fr; gap: 2.4rem; }
.reserve-copy p { max-width: 62ch; }
.form { grid-template-columns: repeat(3, 1fr); }
.form .field.full { grid-column: auto; }
.form .btn { grid-column: 1 / -1; justify-self: center; min-width: 16rem; }
@media (max-width: 900px) { .form { grid-template-columns: 1fr; } }


/* The three-column hero with its vertical hours rail is already unlike anything
   else in the set; only the .hero-copy padding echoed 01 and 10, so it is
   retuned here. The charge list also drops the shared dotted leader. */
.hero-copy { padding: calc(var(--nav-h) + 3.5rem) clamp(1.5rem, 3.5vw, 3rem) 3.5rem; }
.charge-list .dots { display: none; }
.charge-list li { display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; align-items: baseline; border-bottom: 1px solid var(--line); }


/* ============================================================
   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; }
}