/* ============================================================
   Mykonos KOBE Bar - Aegean whitewash theme
   VARIANCE 7 / MOTION 4 / DENSITY 3
   Theme lock: LIGHT, whole page. One accent: deep Aegean blue.
   Radius lock: 14px everywhere.

   Type: Figtree for display. Chosen over a serif or a script because the
   brand is a contemporary Mediterranean bar, not a taverna pastiche: Figtree
   is a humanist geometric sans that reads as clean whitewashed architecture
   and carries Latin and Greek-adjacent branding without costume. Japanese
   body text falls to Zen Kaku Gothic New, which shares its open counters.

   Every colour pairing below was computed for WCAG AA before use:
   text/bg 13.27, text/bg-2 11.92, muted/bg 5.81, muted/bg-2 5.22,
   accent/bg 6.12, accent/bg-2 5.50, accent-ink/accent 6.53,
   accent-ink/accent-hi 9.10, warn/bg 6.53, warn/bg-2 5.87,
   placeholder muted/input 6.22.
   ============================================================ */

:root {
  --bg: #f4f2ed;          /* whitewashed limestone */
  --bg-2: #eae6dd;        /* shaded plaster, elevated surfaces */
  --bg-3: #ded9ce;        /* deeper recess */
  --input: #fbfaf7;
  --line: rgba(35, 40, 46, 0.16);
  --text: #23282e;        /* charcoal ink */
  --muted: #565f68;
  --accent: #1f5f8b;      /* deep Aegean blue, the only accent on this page */
  --accent-hi: #17496b;   /* hover, same family */
  --accent-ink: #f7fafc;  /* type that sits on the blue */
  --warn: #9a3412;
  --font-display: "Figtree", "Helvetica Neue", Arial, sans-serif;
  /* Murecho for body, not the project-wide Zen Kaku Gothic New. Fifteen sites
     sharing one body face was the largest remaining reason two of them felt
     like siblings, and body text is the biggest surface on any page. Murecho's
     slightly narrower Latin suits a bar whose brand is Mediterranean while its
     customers read Japanese. Weights 400/500/700 are all real in the family,
     so nothing is synthesised. */
  --font-body: "Murecho", "Hiragino Kaku Gothic ProN", sans-serif;
  --r: 14px;
  --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.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: 1240px;
  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(244, 242, 237, 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: 800;
  font-size: 1.25rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.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.6rem;
  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, 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 { padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* ---------- Hero: offset overlap (copy card rides over the photo) ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding-top: var(--nav-h);
  position: relative;
}

.hero-copy {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  margin-right: -7vw;
  padding: clamp(2rem, 4vw, 3.25rem);
  margin-left: clamp(1.25rem, 4vw, 3rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.2rem;
}
.hero h1 .blue { color: var(--accent); }

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

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

.hero-media {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  min-height: 60vh;
  overflow: hidden;
  border-radius: var(--r) 0 0 var(--r);
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
}

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

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

.sec-head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); max-width: 46rem; }

.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sec-head p { color: var(--muted); margin-top: 0.9rem; }

/* ---------- Shisha band: the single strongest differentiator ---------- */

.band {
  background: var(--accent);
  color: var(--accent-ink);
}
.band h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.band p { color: #cfe0ec; max-width: 38em; }

.band-top {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: 2.5rem;
}

.band-figure { text-align: right; }
.band-figure .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.band-figure .cap { color: #cfe0ec; font-size: 0.95rem; }

.flavours {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}
.flavours::-webkit-scrollbar { height: 4px; }
.flavours::-webkit-scrollbar-thumb { background: rgba(247, 250, 252, 0.35); border-radius: 999px; }

.flavour {
  scroll-snap-align: start;
  flex: 0 0 auto;
  padding: 0.7rem 1.25rem;
  background: var(--accent-hi);
  border-radius: var(--r);
  white-space: nowrap;
  font-weight: 500;
}

.band-note { margin-top: 1.5rem; color: #cfe0ec; font-size: 0.85rem; }

/* ---------- Menu bento: exactly four cells for four items ---------- */

.bento {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  grid-template-areas:
    "shak price-a price-b"
    "shak pizza   pizza";
  gap: 1rem;
}

.cell {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
}
.cell-shak { grid-area: shak; min-height: 26rem; }
.cell-pizza { grid-area: pizza; min-height: 12rem; }
.cell-a { grid-area: price-a; }
.cell-b { grid-area: price-b; }

.cell-photo { position: relative; flex: 1; }
.cell-photo img { width: 100%; height: 100%; object-fit: cover; }

.cell-cap {
  padding: 1.25rem 1.35rem;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.cell-cap h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}
.cell-cap p { color: var(--muted); font-size: 0.9rem; }

.cell-price {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  justify-content: center;
}
.cell-price .label { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.cell-price .amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.cell-price .sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; }

.menu-note { margin-top: 1.25rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- Events: agenda rows ---------- */

.agenda { border-top: 1px solid var(--line); }

.ev {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0.25rem;
  border-bottom: 1px solid var(--line);
}
.ev-date {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.ev-body h3 { font-size: 1.1rem; font-weight: 700; }
.ev-body p { color: var(--muted); font-size: 0.92rem; }
.ev-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.events-note { margin-top: 1.5rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- Access: steps + hours ---------- */

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

.steps { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.6rem 3.5rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r);
  font-family: var(--font-display);
  font-weight: 800;
}
.steps li h3 { font-size: 1.05rem; font-weight: 700; }
.steps li p { color: var(--muted); font-size: 0.94rem; }

.facts { border-top: 1px solid var(--line); }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.facts dd { text-align: right; font-weight: 500; }
.facts a { color: var(--accent); font-weight: 700; text-decoration: underline; }

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

/* ---------- 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: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.reserve-copy p { color: var(--muted); max-width: 34em; }

.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; text-decoration: underline; }

.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.03em; }

.field input,
.field select {
  background: var(--input);
  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='%23565f68' 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 muted, not a tint: any alpha below 1 fell under 4.5:1 on this input. */
.field input::placeholder { color: var(--muted); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: var(--warn);
  font-size: 0.9rem;
  font-weight: 700;
}
.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; }

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

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

footer {
  padding: 3rem 0 3.5rem;
  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: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.4rem;
}

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

.demo-note { margin-top: 1.6rem; 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: 900px) {
  .nav-links { display: none; }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 3rem;
    gap: 1.5rem;
  }
  .hero-copy {
    grid-column: 1; grid-row: 1;
    margin-right: clamp(1.25rem, 4vw, 3rem);
    margin-left: clamp(1.25rem, 4vw, 3rem);
  }
  .hero-media {
    grid-column: 1; grid-row: 2;
    min-height: 44vh;
    border-radius: 0;
  }

  .band-top { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .band-figure { text-align: left; }

  .bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "shak"
      "price-a"
      "price-b"
      "pizza";
  }
  .cell-shak { min-height: 20rem; }

  .ev { grid-template-columns: 1fr; gap: 0.4rem; }
  .ev-tag { justify-self: start; }

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

@media (max-width: 520px) {
  .lang { font-size: 0.72rem; }
  .nav .wrap { gap: 0.9rem; }
  .hero-ctas .btn { width: 100%; }
  .facts div { flex-direction: column; gap: 0.2rem; }
  .facts dd { text-align: left; }
}


/* ============================================================
   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-B: two-row navigation, brand centred over a hairline rule.
   --nav-h grows because the bar is now two rows; hero padding keys off it. */
:root { --nav-h: 108px; }
.nav { height: auto; }
.nav .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "lang brand cta" "links links links";
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.nav .brand { grid-area: brand; justify-self: center; }
.nav .lang  { grid-area: lang;  justify-self: start; margin-left: 0; }
.nav .btn   { grid-area: cta;   justify-self: end; }
.nav-links {
  grid-area: links; justify-self: stretch; justify-content: center;
  margin-left: 0; border-top: 1px solid var(--line); padding-top: 0.5rem;
}
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav .wrap { grid-template-columns: auto 1fr auto; grid-template-areas: "brand lang cta"; }
  .nav .brand { justify-self: start; }
  .nav .lang { justify-self: end; }
}

/* Chrome variant RES-B: single centred column, narrow measure. */
.reserve-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; gap: 2rem; text-align: center; }
.reserve-copy p { margin-left: auto; margin-right: auto; }
.reserve-alt { text-align: center; }
.form { grid-template-columns: 1fr; text-align: left; }
.form .btn { justify-self: stretch; }

/* Chrome variant FOOT-C: a bordered strip, brand and links on one rule-bound row. */
.foot-grid {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0;
}
.foot-links { justify-content: flex-end; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; text-align: left; }
  .foot-links { justify-content: flex-start; }
}

/* ---------- Media layer overrides ----------
   .m-gallery on .bento is a behaviour hook so the two food photos open
   in the tap-through viewer. media.css loads later and its grid rules
   (including a nth-child span that outranks .cell-*) would otherwise
   dismantle the named-area layout, so both are restored here at higher
   specificity. */
.bento.m-gallery {
  grid-template-columns: 6fr 3fr 3fr;
  grid-template-areas:
    "shak price-a price-b"
    "shak pizza   pizza";
  gap: 1rem;
}
.bento.m-gallery > .cell-shak  { grid-area: shak; }
.bento.m-gallery > .cell-a     { grid-area: price-a; }
.bento.m-gallery > .cell-b     { grid-area: price-b; }
.bento.m-gallery > .cell-pizza { grid-area: pizza; }
@media (max-width: 900px) {
  .bento.m-gallery {
    grid-template-columns: 1fr;
    grid-template-areas: "shak" "price-a" "price-b" "pizza";
  }
}

/* The photo IS the control. height:100% because .cell-photo img sizes
   against its parent, which is now the button. */
.m-shot {
  display: block; width: 100%;
  padding: 0; border: none; background: none;
  cursor: pointer; min-height: 44px;
}
.cell-photo .m-shot { height: 100%; }
.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; }
}