/* ============================================================
   Darts & Bar KNOT - 神戸・三宮／北野坂
   Neon-on-slate. VARIANCE 7 / MOTION 5 / DENSITY 4
   Theme lock: dark (cool slate), whole page.
   Accent lock: electric cyan, single accent everywhere.
   Radius lock: 8px everywhere.

   Display face is Dela Gothic One: a heavy, squared Japanese
   display type with arcade-cabinet weight. It carries the late
   night darts energy without the neon glow effects that read as
   generic nightlife template work.
   ============================================================ */

:root {
  --bg: #1a1d24;
  --bg-2: #232830;
  --bg-3: #2c323c;
  --line: rgba(238, 241, 245, 0.13);
  --text: #eef1f5;
  --muted: #a4afbd;
  --accent: #3fbfd6;
  --accent-hover: #63cfe2;
  --accent-ink: #0a1417;
  --warn: #f0a882;
  --r: 8px;
  --font-display: "Dela Gothic One", "Hiragino Sans", sans-serif;
  --font-body: "IBM Plex 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.8;
  -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: 1220px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(26, 29, 36, 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-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.9rem;
  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.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lang a {
  padding: 0.3rem 0.55rem;
  border-radius: var(--r);
  color: var(--muted);
  border: 1px solid transparent;
  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);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.8rem 1.6rem;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  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 { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.88rem; }

/* ---------- Hero: full-bleed image with an overlapping card ---------- */

.hero { position: relative; padding: 0; }

.hero-media {
  position: relative;
  height: clamp(56vh, 66vh, 720px);
  overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.08) brightness(0.52);
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,29,36,0.72) 0%, rgba(26,29,36,0.35) 40%, rgba(26,29,36,0.96) 100%);
}

.hero-card {
  position: relative;
  z-index: 2;
  margin-top: clamp(-9rem, -14vw, -6rem);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 760px;
}

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

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}

.hero-tagline {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.7rem;
}

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

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

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

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

.sec-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.32;
}
.sec-head p { color: var(--muted); max-width: 42em; margin-top: 0.8rem; }

/* ---------- Pricing: big numbers, asymmetric grid ---------- */

.price-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.price-cell {
  background: var(--bg-2);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}
.price-cell .label { font-size: 1.05rem; font-weight: 700; }
.price-cell .note { color: var(--muted); font-size: 0.86rem; line-height: 1.7; }
.price-cell .figure { display: flex; align-items: baseline; gap: 0.45rem; }
.price-cell .value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  color: var(--accent);
  line-height: 1;
}
.price-cell .unit { color: var(--muted); font-size: 0.9rem; font-weight: 700; }

.price-note {
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Bento: one large cell plus two stacked ---------- */

.bento {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.bento-cell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}
.bento-cell.tall { grid-row: span 2; min-height: 460px; }
.bento-cell img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.06) brightness(0.5);
}
.bento-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: linear-gradient(to top, rgba(26,29,36,0.94) 25%, rgba(26,29,36,0));
}
.bento-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin-bottom: 0.4rem;
}
.bento-copy p { color: var(--muted); font-size: 0.92rem; line-height: 1.75; }

/* ---------- Menu: native disclosure, works without scripting ---------- */

.menu-highlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 2.4rem;
}
.hl-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.2rem 1.3rem;
}
.hl-card .nm { font-weight: 700; font-size: 1.02rem; }
.hl-card .en { color: var(--muted); font-size: 0.8rem; }
.hl-card .pr {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.35rem;
  margin-top: 0.5rem;
}

.menu-cat {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  margin-bottom: 0.75rem;
}
.menu-cat > summary {
  list-style: none;
  cursor: pointer;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.3rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.menu-cat > summary::-webkit-details-marker { display: none; }
.menu-cat > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
}
.menu-cat[open] > summary::after { content: "-"; }
.menu-cat > summary:hover { color: var(--accent); }

.menu-list { list-style: none; padding: 0 1.3rem 1.2rem; }
.menu-list li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.menu-list li:first-child { border-top: none; }
.menu-list .nm { font-weight: 500; }
.menu-list .en { color: var(--muted); font-size: 0.78rem; display: block; }
.menu-list .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(238,241,245,0.22);
  transform: translateY(-4px);
}
.menu-list .pr { font-weight: 700; white-space: nowrap; }
.flat-note { color: var(--accent); font-weight: 700; font-size: 0.86rem; }

.menu-tax { color: var(--muted); font-size: 0.86rem; margin-top: 1.2rem; }

/* ---------- Hours: per-day grid ---------- */

.info-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.hours-grid {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.hours-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.hours-row:first-child { border-top: none; }
.hours-row .day { font-weight: 700; }
.hours-row .time { color: var(--muted); }
.hours-row.closed .time { color: var(--warn); font-weight: 700; }

.info-list { list-style: none; }
.info-list li {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 1px solid var(--line);
}
.info-list li:first-child { border-top: none; }
.info-list .label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.info-list a.link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 700; text-decoration: underline;
}

/* Entry steps: finding room 202 in a shared building */
.steps { list-style: none; counter-reset: step; margin-top: 0.4rem; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.65rem 0 0.65rem 2.6rem;
  color: var(--muted);
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.6rem;
  width: 1.8rem; height: 1.8rem;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 0.85rem;
}

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

/* ---------- Group enquiry ---------- */

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

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

.inquiry-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}
.inquiry-copy p { color: var(--muted); max-width: 34em; }

.walkin {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  color: var(--text);
  font-weight: 700;
}

.inquiry-alt {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
}
.inquiry-alt a { color: var(--accent); font-weight: 700; 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);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 46px;
  padding: 0.75rem 1rem;
  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='%23a4afbd' 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); border-color: var(--accent); }
/* Solid muted, not a faded tint: a washed placeholder fails AA. */
.field input::placeholder { color: var(--muted); opacity: 1; }

.form-hint { grid-column: 1 / -1; color: var(--muted); font-size: 0.85rem; }

.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-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.foot-links { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.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.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s 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-media { height: 48vh; }
  .hero-card { margin-top: -5rem; }

  .price-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-cell.tall { grid-row: auto; min-height: 260px; }
  .info-split, .inquiry-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .nav .wrap { gap: 0.8rem; }
  .lang { font-size: 0.7rem; }
  .lang a { padding: 0.3rem 0.4rem; }
  .hero-ctas .btn { width: 100%; }
  .hours-row { grid-template-columns: 5.5rem 1fr; }
}


/* ============================================================
   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-B: single centred column, narrow measure. */
.inquiry-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; gap: 2rem; text-align: center; }
.inquiry-copy p { margin-left: auto; margin-right: auto; }
.inquiry-alt { text-align: center; }
.form { grid-template-columns: 1fr; text-align: left; }
.form .btn { justify-self: stretch; }


/* Dotted price leader removed (it ran on six of twelve sites). The menu keeps
   its disclosure structure and gains a hairline rank instead. */
.menu-list .dots { display: none; }
.menu-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; }

/* Dela Gothic One ships a SINGLE weight (400). Any heavier request is
   synthesised by the browser, which smears the glyphs: the h1 here
   was rendering visibly double-struck. Presence comes from size,
   tracking and colour instead, never from a weight the font lacks. */
.brand, .hero h1, .sec-head h2, .price-cell .value, .bento-copy h3,
.hl-card .pr, .inquiry-copy h2, .foot-brand {
  font-weight: 400;
}

@media (max-width: 560px) {
  /* Four languages stop fitting in a row once each label is
     unbreakable, so the switcher becomes a thumb-scrollable rail
     rather than wrapping into a second line that doubles the nav. */
  .lang {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 48vw;
  }
  .lang::-webkit-scrollbar { display: none; }
  .lang a { flex: 0 0 auto; }
}

@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; }
}