/* ============================================================
   大衆割烹 三州屋 六本木店 - 15-sanshuya-roppongi
   The only stylesheet written for this site. ds.css, booking.css
   and media.css load AFTER this file and are shared; nothing here
   forks them, and the three places where this file deliberately
   out-specifies booking.css are marked OVERRIDE and explained.

   THE READ. A weekday teishoku izakaya three minutes from Roppongi
   station, for the people who work around the crossing. Blue awning,
   white lettering, wood and green tile. It has no telephone published
   and takes no reservations today, and the page says both plainly:
   the signature is the plain-facts panel that leads into a form
   presented as the proposal, not as a claim. The hours component is a
   shop notice: one line of condensed display type, the weekdays and
   their hours, a slash, the weekend, the way it is written on the paper
   by the door. The hero is stacked, storefront first and copy under it.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text   #1C2230 on --bg #FCFCFA ........ 15.48:1
     --muted  #4F5666 on --bg ................  7.16:1  (6.44 on --bg-3)
     --accent #3A5BA9 on --bg ................  6.29:1  fills AND text
     --accent-text #2B4787 on --bg ...........  8.69:1  links
     --accent-ink #FBFCFF on --accent ........  6.30:1  button labels
     --error  #A8321F on --bg ................  6.51:1
     --success #2C6A47 on --bg ...............  6.27:1
   ============================================================ */

:root {
  /* Ground. Plain white, not pure. */
  --bg: #FCFCFA;
  --bg-2: #F3F5F9;
  --bg-3: #EDF0F6;

  --text: #1C2230;
  --muted: #4F5666;
  --line: #D9DEE8;

  /* The awning blue. One accent, everywhere. --accent-text is the same
     blue darkened for links and small text on tinted grounds. */
  --accent: #3A5BA9;
  --accent-text: #2B4787;
  --accent-ink: #FBFCFF;

  --error: #A8321F;
  --success: #2C6A47;

  /* One radius system, one step. A shop notice is squared off. */
  --radius: 4px;
  --radius-sm: 4px;

  --nav-h: 64px;
  --maxw: 1120px;
  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);

  /* TYPE. Archivo Narrow leads the display stack so Latin glyphs (clock
     times, the postcode, the rating) come from the condensed grotesque,
     while ideographs fall through to Zen Kaku Gothic Antique. */
  --font-display: "Archivo Narrow", "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-body: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* The per-language families REPLACE the Japanese one rather than sitting
   behind it. Zen Kaku Gothic Antique covers a wide ideograph range and
   would otherwise render Chinese and Korean in Japanese glyph shapes. */
html[lang="en"] {
  --font-display: "Archivo Narrow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Archivo Narrow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
html[lang="zh-Hant"] {
  --font-display: "Archivo Narrow", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
}
html[lang="ko"] {
  --font-display: "Archivo Narrow", "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
/* Smooth only while a link has focus, i.e. after a click on an anchor.
   Programmatic scrolls (and the QA probe) stay instant. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

body {
  /* The per-site motion dials ds.css reads. They sit on body because
     ds.css loads AFTER this file and redeclares both on :root; a rule on
     body wins for every element inside it. Motion dial 4: small lift,
     short settle. */
  --ds-lift: 2px;
  --ds-dur: 0.22s;

  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The condensed Latin face runs small; the English page lifts the body a
   step so it measures like the CJK pages. */
html[lang="en"] body { font-size: 1.08rem; line-height: 1.7; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0 0 0.6rem;
}
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* height:auto is load-bearing: every <img> carries width and height so the
   box is reserved, and the height attribute would otherwise win over the
   aspect-ratio crops below. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-text); }
a:hover { color: var(--text); }

/* Every clock time and figure lines up in its column. */
.notice, .facts, .fact-v, .ledger { font-variant-numeric: tabular-nums; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.sec { padding-block: clamp(3rem, 1.6rem + 5vw, 6rem); }

.sec-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.sec-head p { color: var(--muted); margin-bottom: 0; }

/* ---------- reveal ----------
   motion.js takes ownership by putting .ds-motion on <html>, and ds.css
   then switches this transition off. If it never runs, this is the
   reveal. If scripting is off, the <noscript> block turns it off. */
.rv { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity 0.44s var(--ease), transform 0.44s var(--ease); }
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); color: var(--accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-2); }

.si { flex: none; vertical-align: -0.15em; }

/* ---------- header ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 252, 250, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  flex: none;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 0.2rem;
  margin-inline-start: 0.6rem;
  flex: 1 1 auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.55rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }

.lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  margin-inline-start: auto;
}
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.42rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}
.nav-cta { flex: none; min-height: 44px; padding: 0.4rem 0.95rem; font-size: 0.92rem; white-space: nowrap; }

@media (max-width: 980px) {
  .nav-links { display: none; }
}
@media (max-width: 520px) {
  /* The brand drops its branch suffix so the switcher and the CTA fit
     beside it on one line at 360px. */
  .brand-x { display: none; }
}
@media (max-width: 420px) {
  .lang a { padding-inline: 0.28rem; font-size: 0.74rem; }
  .nav-cta { padding: 0.4rem 0.6rem; font-size: 0.82rem; }
  .brand { font-size: 0.95rem; }
  .nav .wrap { gap: 0.35rem; padding-inline: 14px; }
}

/* ---------- FAMILY 1: the stacked hero ----------
   The storefront first, the full width of the page, then the copy under
   it on the white ground: the headline in the left column, the one
   sentence and the one button in the right. The photograph is the awning
   frame h01, whose left window carries a handwritten price list. The
   image is therefore drawn 165% as wide as its box and pinned to the
   right edge: with object-fit cover the box always shows the right 61%
   of the source (x 630 to 1600 of 1600), which is the awning lettering,
   the light and the noren, never the paper. This holds at every viewport
   width because the crop is proportional, not pixel-based. */

.hero {
  display: grid;
  grid-template-rows: clamp(260px, 48vh, 560px) minmax(0, 1fr);
  /* dvh, never vh. Capped so that a tall desktop window does not stretch
     the copy row into empty space: past 900px the next section shows. */
  min-height: min(calc(100dvh - var(--nav-h)), 836px);
}
/* overflow:hidden is load-bearing twice: the image is wider than its box
   on purpose, and motion.js puts a scroll-linked scale(1.06 to 1.0)
   drift on `.hero img`. */
.hero-media { position: relative; overflow: hidden; background: var(--bg-3); }
.hero-media img {
  position: absolute;
  top: 0;
  right: 0;
  width: 165%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 100% 26%;
}
.hero-copy {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem) 20px clamp(2rem, 1.2rem + 3vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.2rem clamp(1.5rem, 1rem + 3vw, 4rem);
  align-content: start;
  align-items: start;
  border-top: 4px solid var(--accent);
}
.hero h1 {
  /* Two lines in all four languages with the manual <br> as the only
     break; measured at 1440 and 390. */
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3.1rem);
  margin: 0;
  max-width: 14em;
}
/* The English headline is the longest in glyphs; one step down keeps it
   on two lines in the same column. */
html[lang="en"] .hero h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem); }
/* The Chinese second line is twelve full-width glyphs; one more step down
   keeps it on two lines in the column at 1440 and at 390. */
html[lang="zh-Hant"] .hero h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem); }
/* Korean breaks between words, not inside them. */
html[lang="ko"] .hero h1, html[lang="ko"] .sec-hours h2 { word-break: keep-all; }
.hero-side { min-width: 0; padding-top: 0.35rem; }
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: var(--muted);
  max-width: 27rem;
  margin-bottom: 1.4rem;
}

@media (max-width: 860px) {
  .hero {
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .hero-media { aspect-ratio: 16 / 10; }
  .hero-copy {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding-bottom: clamp(2rem, 1.5rem + 3vw, 3rem);
  }
  .hero-side { padding-top: 0; }
  .hero-sub { margin-bottom: 1.1rem; }
}

/* ---------- FAMILY 2: the shop notice ----------
   One line of condensed display type on a tinted ground, ruled top and
   bottom like a paper pinned by the door. The open part is in the awning
   blue, the closed part in the muted ink. The two parts are their own
   spans so that, where the line cannot fit (phones), it breaks at the
   slash and nowhere else. */

.sec-hours { background: var(--bg-2); border-block: 1px solid var(--line); }

.notice {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45em;
  padding-block: 1rem 1.1rem;
  border-top: 4px solid var(--accent);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 0.9rem + 3.3vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* The Chinese line has the most ideographs; the Korean one is close. Each
   steps down so the whole notice stays on one line at 1440. */
html[lang="zh-Hant"] .notice { font-size: clamp(1.55rem, 0.8rem + 3vw, 3rem); }
html[lang="ko"] .notice { font-size: clamp(1.6rem, 0.85rem + 3.1vw, 3.2rem); }
.notice > span { white-space: nowrap; }
.notice-open { color: var(--accent-text); }
.notice-sep { color: var(--muted); font-weight: 400; }
.notice-closed { color: var(--muted); }

/* ---------- FAMILY 3: the teishoku gallery, 1 + 2 ----------
   One big frame at the left, two small at the right. The small tiles
   set the row heights (16:10 each); the big tile fills both rows. */

.teishoku {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tile { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); }
.tile img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 45%;
}
.tile-big { grid-row: 1 / 3; }
.tile-big img { height: 100%; aspect-ratio: auto; object-position: 50% 50%; }

@media (max-width: 719px) {
  .teishoku { grid-template-columns: 1fr; grid-template-rows: none; gap: 10px; }
  .tile-big { grid-row: auto; }
  .tile-big img { height: auto; aspect-ratio: 4 / 3; }
}

/* ---------- FAMILY 4: the storefront band ---------- */

.frame-band { position: relative; }
.frame-band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 26%;
}
.frame-note {
  max-width: var(--maxw);
  margin: 0.8rem auto 0;
  padding-inline: 20px;
  font-size: 0.84rem;
  color: var(--muted);
}
@media (max-width: 719px) {
  .frame-band img { aspect-ratio: 4 / 3; object-position: 50% 18%; }
}

/* ---------- FAMILY 5: the facts grid ---------- */

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 1rem + 3vw, 4rem);
}
.fact { min-width: 0; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.fact dt {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.fact dd { margin: 0; }
.fact-v {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-text);
}
.fact-note { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.7; margin-top: 0.3rem; }
.fact-action dd { padding-top: 0.2rem; }

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ---------- FAMILY 6: the plain-facts panel ----------
   Same theme as the rest of the page: a tinted ground and a thick accent
   rule on top, like a notice pinned to the door. */

.sec-today { padding-top: 0; }
.today {
  background: var(--bg-2);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1rem + 3vw, 3rem);
}
/* em, not ch: ch is the width of "0", about half an em in a CJK face. */
.today h2 { max-width: 22em; }
.today-lede { color: var(--muted); max-width: 46rem; }
.ledger {
  margin: 1.6rem 0 0;
  max-width: 52rem;
  border-top: 1px solid var(--line);
}
.ledger-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.3rem 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.ledger dt {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-text);
}
.ledger dd { margin: 0; }
.today-lead { margin-top: 1.4rem; max-width: 46rem; font-weight: 500; }

@media (max-width: 560px) {
  .ledger-row { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------- FAMILY 7: the booking block ---------- */

.reserve { border-top: 1px solid var(--line); }
.reserve-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.reserve-copy p { color: var(--muted); }
.no-tel {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.no-tel p { color: var(--text); font-weight: 500; }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  border-top: 4px solid var(--accent);
  padding-top: 1.4rem;
  border-radius: var(--radius);
}
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.5;
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field .hint {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
/* booking.css styles .form textarea already; it reads --bg-3 and --line
   from here, so only the radius and ground need saying. */
.form textarea { border-radius: var(--radius-sm); background: var(--bg-2); }

/* OVERRIDE 1 and 2. booking.css hardcodes #f0a08c for the field error
   text and the rejected input's border, which is invisible on this white
   ground. booking.css loads AFTER this file, so these rules are written
   one step more specific on purpose. */
.form .field .field-msg { color: var(--error); font-weight: 700; }
.form .field.bad input,
.form .field.bad select,
.form .field.bad textarea { border-color: var(--error); border-width: 2px; }

.form-error, .form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  line-height: 1.7;
}
.form-error.show, .form-ok.show { display: block; }
.form-error {
  color: var(--error);
  background: rgba(168, 50, 31, 0.07);
  border: 1px solid rgba(168, 50, 31, 0.32);
  font-weight: 700;
}
.form-error a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  color: var(--success);
  background: rgba(44, 106, 71, 0.07);
  border: 1px solid rgba(44, 106, 71, 0.3);
}

.book-result { border-radius: var(--radius); margin-top: 1.2rem; }
/* OVERRIDE 3. booking.css paints this link with --accent; the id raises
   the specificity above booking.css's own selector. */
#book-result .tel-row a { color: var(--accent-text); }
.ref-note {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

@media (min-width: 861px) {
  .reserve-grid > #book-result,
  .reserve-grid > .ref-note { grid-column: 2; }
}
@media (max-width: 860px) {
  .reserve-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.2rem);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1.6rem;
}
.foot-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.foot-grid p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--muted);
}
.foot-links a:hover { color: var(--text); }
.demo-note {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62rem;
  margin-bottom: 0.4rem;
}