/* ============================================================
   酒とおばんざい たまや - Sake & Obanzai Tamaya
   Night-indigo theme. VARIANCE 7 / MOTION 4 / DENSITY 3
   Theme lock: cool blue-black night, whole page.
   Accent lock: muted karashi gold. Radius lock: 4px everywhere.
   ============================================================ */

:root {
  --bg: #151a26;
  --bg-2: #1c2333;
  --bg-3: #232b3d;
  --line: rgba(241, 237, 226, 0.13);
  --text: #f1ede2;
  --muted: #b3ad9c;
  --accent: #c9a227;
  --accent-ink: #1a1508;
  --warn: #eeb28c;
  --font-display: "Yuji Syuku", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --nav-h: 68px;
  --r: 4px;
}

* { 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: 1080px;
  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(21, 26, 38, 0.88);
  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-size: 1.45rem;
  letter-spacing: 0.1em;
}

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

.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: #d6b13a; }

.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: full-bleed photo, copy bottom-left ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.6) contrast(1.02) brightness(0.62) hue-rotate(-6deg);
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,26,38,0.94) 12%, rgba(21,26,38,0.35) 55%, rgba(21,26,38,0.25));
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

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

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 24px rgba(21, 26, 38, 0.6);
}

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

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

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

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

.sec-head { margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }

.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.35;
}

.sec-head p {
  color: var(--muted);
  max-width: 40em;
  margin-top: 0.9rem;
}

/* ---------- Obanzai board ---------- */

.board {
  max-width: 680px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.board-list { list-style: none; }

.board-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
}
.board-item + .board-item { border-top: 1px solid rgba(241,237,226,0.08); }

.board-item .name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

/* Reading gloss after a dish name on the EN and ES boards. */
.board-item .kana {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: 0.4rem;
}

.board-item .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(241,237,226,0.28);
  transform: translateY(-5px);
}

.board-item .price {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

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

/* ---------- Gallery: horizontal scroll-snap strip ---------- */

.gallery-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}

/* media.css loads after this file and would turn .m-gallery into a grid.
   Two-class specificity keeps the swipeable strip, which is the right
   phone behaviour here: the guest flicks through the room before deciding
   to ride the lift. The .m-gallery class is carried purely as the hook
   that media.js binds the full-screen viewer to. */
.gallery-strip.m-gallery { display: flex; }
.gallery-strip.m-gallery button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  /* The whole photo is the tap target, comfortably past 44px. */
  min-height: 44px;
}
.gallery-strip.m-gallery button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.gallery-strip::-webkit-scrollbar { height: 4px; }
.gallery-strip::-webkit-scrollbar-thumb { background: var(--line); }

.gallery-strip figure {
  scroll-snap-align: start;
  flex: 0 0 min(72%, 460px);
}

.gallery-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  filter: saturate(0.65) contrast(1.02) brightness(0.85) hue-rotate(-6deg);
}

.gallery-strip figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- Story: split text + photo ---------- */

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

.story-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  filter: saturate(0.65) contrast(1.02) brightness(0.8) hue-rotate(-6deg);
}

.story-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 1rem;
}

.story-copy p { color: var(--muted); max-width: 36em; }
.story-copy p + p { margin-top: 1rem; }

/* ---------- Access ---------- */

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

.steps {
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.4rem 3.2rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0.1rem;
  width: 2.1rem; height: 2.1rem;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: var(--r);
}

.steps li::after {
  content: "";
  position: absolute;
  left: 1rem; top: 2.5rem; bottom: 0.3rem;
  border-left: 1px dashed var(--line);
}
.steps li:last-child::after { display: none; }

.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.12rem; font-weight: 500; }

.info-list { list-style: none; margin-top: 1.8rem; }
.info-list li {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.info-list li + li { border-top: 1px solid rgba(241,237,226,0.08); }
.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.6rem; 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: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  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; }

.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='%23b3ad9c' 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);
}

.field input::placeholder { color: rgba(179, 173, 156, 0.75); }

.field-note {
  font-size: 0.8rem;
  color: var(--muted);
}

.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.2rem;
  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: this is the honesty disclaimer and has to stay readable
   (dimming --muted here drops it to about 4.2:1, under AA). */
.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 { min-height: 92dvh; }
  .hero-copy { padding-top: calc(var(--nav-h) + 2rem); }

  .story-grid { grid-template-columns: 1fr; }
  .story-grid img { aspect-ratio: 4 / 3; order: -1; }

  .access-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .board { max-width: none; }
  .gallery-strip figure { flex-basis: 82%; }
}

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


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


/* Device de-duplication. The dotted leader (six sites) and the numbered step
   badge (shared with 11) both go here; 11 keeps the numbered badges for its
   room-101 directions, and this board gets hairline rows and floor chips. */
.board-item .dots { display: none; }
.board-item { display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; align-items: baseline; border-bottom: 1px solid var(--line); }
.steps li::before {
  content: "";
  width: 0.7rem; height: 0.7rem;
  border: 2px solid var(--accent);
  border-radius: 0;
  background: none;
  color: transparent;
  font-size: 0;
}


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