/* ============================================================
   蔬菜 -sosai- : seasonal organic izakaya, Ninomiya, Kobe
   Light editorial theme. VARIANCE 7 / MOTION 4 / DENSITY 3
   Theme lock: light, whole page. Accent lock: deep forest green.
   Radius lock: soft 12px everywhere.
   ============================================================ */

:root {
  --bg: #f6f5f0;
  --bg-2: #edece4;
  --bg-3: #e4e3d9;
  --line: rgba(34, 38, 31, 0.14);
  --text: #22261f;
  --muted: #666b5e;
  --accent: #3d6b4f;
  --accent-soft: #47755a;   /* button hover: 4.9:1 against --accent-ink */
  --warn: #9c3b22;
  --accent-ink: #f8f7f2;
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --r: 12px;
  --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: 1120px;
  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(246, 245, 240, 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: 900;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}

.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;
  border-radius: calc(var(--r) / 2);
  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); }

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

.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 (editorial stacked) ---------- */

.hero {
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) 0 0;
}

.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: 900;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
  max-width: 14em;
  margin-bottom: 1.4rem;
}

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

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.hero-photo {
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 21 / 9;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(0.98) brightness(1.03);
}

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

section { padding: clamp(5rem, 10vw, 8.5rem) 0; }

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.3;
}
.sec-head p {
  color: var(--muted);
  max-width: 40em;
  margin-top: 0.9rem;
}

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

/* ---------- Seasonal vegetables: asymmetric grid ---------- */

.veg-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
}

.veg {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
}
.veg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(0.98) brightness(1.02);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.veg:hover img { transform: scale(1.03); }

.veg-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.3rem 1.1rem;
  background: linear-gradient(to top, rgba(24, 28, 22, 0.72), rgba(24, 28, 22, 0));
  color: #f6f5f0;
}
.veg-label h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.veg-label p { font-size: 0.82rem; opacity: 0.9; }

.veg:nth-child(1) { grid-column: span 5; aspect-ratio: 4 / 5; }
.veg:nth-child(2) { grid-column: span 4; aspect-ratio: 4 / 5; }
.veg:nth-child(3) { grid-column: span 3; aspect-ratio: 3 / 5; }
.veg:nth-child(4) { grid-column: span 4; aspect-ratio: 5 / 4; }
.veg:nth-child(5) { grid-column: span 8; aspect-ratio: 16 / 7; }

/* ---------- Farm partners: scroll-snap cards ---------- */

.farms-strip { background: var(--bg-2); }

.farms {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}
.farms::-webkit-scrollbar { height: 4px; }
.farms::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.farm {
  scroll-snap-align: start;
  flex: 0 0 290px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.farm img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(0.98) brightness(1.02);
}
.farm-body { padding: 1.2rem 1.3rem 1.4rem; }
.farm-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.farm-body .region { color: var(--accent); font-size: 0.82rem; font-weight: 700; }
.farm-body p { color: var(--muted); font-size: 0.88rem; margin-top: 0.5rem; line-height: 1.7; }

/* ---------- Courses ---------- */

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

.course {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.course.hl { background: var(--bg-2); }

.course h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
}
.course .dishes { color: var(--accent); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; }
.course p { color: var(--muted); font-size: 0.95rem; }
.course .price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  margin-top: auto;
}
.course .price small { font-size: 0.9rem; color: var(--muted); font-weight: 400; }

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

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

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

/* ---------- 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: 900;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  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='%23666b5e' 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: var(--muted); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: #9c3b22;
  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);
  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: 900;
  font-size: 1.15rem;
  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 line discloses the demo data and must stay legible. */
.demo-note { margin-top: 1.6rem; font-size: 0.78rem; }

/* ---------- 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, .veg img { transition: none; }
  .veg:hover img { transform: none; }
}

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

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

  .hero-photo { aspect-ratio: 4 / 3; }

  .veg-grid { grid-template-columns: 1fr; }
  .veg:nth-child(n) { grid-column: auto; aspect-ratio: 4 / 3; }

  .courses { grid-template-columns: 1fr; }
  .info-grid, .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%; }
}


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


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