/* 魅惑の七輪 らんまん 中目黒店 - the only stylesheet written for this site.
   Loaded FIRST, before ds.css, booking.css and media.css, so anything that has
   to beat one of those is written here with higher specificity and says so.

   The read: a second floor charcoal room in Nakameguro that runs to six in the
   morning. The page is a sequence of full bleed bands you walk into, not a
   deck of cards. Ground is cold ash over a warm base; one ember accent, taken
   from the coals in g4 and used identically in every section.

   CONTRAST, measured against the ground it actually sits on:
     --text   #EDE6DE on --bg   #14110F   15.20:1
     --text   #EDE6DE on --bg-2 #1E1A17   13.96:1
     --text   #EDE6DE on --bg-3 #262119   12.92:1
     --muted  #A99C90 on --bg              7.23:1   on --bg-2  6.64:1
     --accent #D9482B on --bg              4.40:1   BELOW 4.5, so it is a FILL
                                                    and a RULE colour only
     --accent-text #E9633F on --bg         5.66:1   every ember coloured WORD
     --err    #F5917C on --bg              8.26:1
     --ok     #94C2A0 on --bg              9.39:1
     --line-strong #7A6E63 on --bg         3.79:1   interactive borders (3:1)
     --on-accent #0B0908 on --accent       4.65:1   small bold label on ember
     --accent-ink #14110F on --accent      4.40:1   .book-ref only, 1.8rem bold,
                                                    which is large text (3:1)
   The raw red of the meat in g3 is a photographic colour. It is never sampled
   into the interface. */

:root {
  --bg: #14110F;
  --bg-2: #1E1A17;
  --bg-3: #262119;
  --text: #EDE6DE;
  --muted: #A99C90;
  --line: #2E2823;
  /* The same hairline, lifted until it carries 3:1 against the ground, for
     anything a finger or a caret lands on: input wells, ghost buttons. */
  --line-strong: #7A6E63;
  --accent: #D9482B;
  --accent-text: #E9633F;
  --accent-ink: #14110F;
  --on-accent: #0B0908;
  --err: #F5917C;
  --ok: #94C2A0;

  --font-ja-display: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-ja-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-display: var(--font-ja-display);
  --font-body: var(--font-ja-body);
  --font-latin: Anton, "Arial Narrow", Arial, sans-serif;
  --display-weight: 400;

  --r: 3px;
  --nav-h: 60px;
  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);
  --ds-lift: 2px;

  color-scheme: dark;
}

/* Dela Gothic One has no Hangul and no Traditional Chinese, and it covers
   enough Han to set Chinese in Japanese shapes without ever failing visibly.
   So the display face is replaced outright per language rather than left to
   fall back, and each replacement is a face that is genuinely heavy in its
   own script. */
html[lang="zh-Hant"] {
  --font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --display-weight: 900;
}
html[lang="ko"] {
  --font-display: "Black Han Sans", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.wrap {
  width: min(1160px, 100% - 2.5rem);
  margin-inline: auto;
}

/* The shop's own name is always set in the shop's own face, on all four
   pages. Only the page's own language changes display face. */
.jp-display {
  font-family: var(--font-ja-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
html[lang="zh-Hant"] [lang="ja"],
html[lang="ko"] [lang="ja"] { font-family: var(--font-ja-body); }
html[lang="zh-Hant"] [lang="ja"].jp-display,
html[lang="ko"] [lang="ja"].jp-display { font-family: var(--font-ja-display); }

.latin {
  font-family: var(--font-latin);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* 18:00 - 翌06:00 has to line up wherever it appears. */
.val, .rating, .hour-val, time, .plate-num { font-variant-numeric: tabular-nums; }

a { color: var(--accent-text); }
.link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Reveal ----------
   motion.js takes ownership when it runs (html.ds-motion switches this off in
   ds.css). If it never runs, media.js and site.js still add .in, and the
   noscript block in each page shows everything from the start. */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn-primary {
  background: var(--accent);
  /* Not --accent-ink: at 16px bold this is body text and needs 4.5:1, which
     #14110F misses at 4.40. #0B0908 measures 4.65:1 on the same fill. */
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-text); color: var(--on-accent); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-2); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* ---------- Header ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(20, 17, 15, 0.9);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .nav { backdrop-filter: blur(10px); }
}
.nav .wrap {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 0.4rem 1rem;
  padding-block: 0.35rem;
}
.brand {
  font-family: var(--font-ja-display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.4em;
  margin-inline-end: auto;
  white-space: nowrap;
}
.brand:hover { color: var(--accent-text); }
.nav-links { display: flex; gap: 1.1rem; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav-links a:hover { color: var(--text); }
.lang { display: flex; gap: 0.5rem; }
.lang a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.3rem;
  border-bottom: 2px solid transparent;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.nav .btn { min-height: 44px; padding: 0.4rem 1rem; font-size: 0.92rem; }

@media (max-width: 960px) { .nav-links { display: none; } }
@media (max-width: 520px) {
  .brand-long { display: none; }
  .nav .wrap { gap: 0.3rem 0.6rem; }
  .lang { gap: 0.25rem; }
  .lang a { font-size: 0.78rem; padding-inline: 0.2rem; }
  .nav .btn { padding: 0.4rem 0.75rem; }
}

/* ---------- Family A: full bleed cinematic bands ----------
   The signature. Edge to edge photograph, type overlaid inside a scrim, no
   card and no container. Width is 100%, never 100vw: on a desktop with a
   classic scrollbar 100vw is wider than the page and produces exactly the
   horizontal scroll this page must not have. */
.hero-band,
.band {
  position: relative;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
}
.hero-band { min-height: 100dvh; display: grid; }
.hero-band .m-figure,
.band .m-figure {
  position: absolute;
  inset: 0;
  height: 100%;
  background: var(--bg);
}
.hero-band img,
.band img { width: 100%; height: 100%; object-fit: cover; }

.hero-scrim,
.band-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* TWO LAYERS, and the split is the whole point. The first is an atmospheric
   veil over the whole frame. The second is carried by the type block itself,
   so the ground behind a word is fixed by that block's own box rather than by
   where a percentage stop happens to land once the webfont has loaded and the
   headline has settled at its real height. A percentage scrim was measured
   first and put the 13px ember eyebrow at 2.3:1 on the worst pixel; this puts
   it at better than 4.5:1 and does not have to be re-measured every time a
   line of copy changes length. */
.hero-scrim {
  background:
    linear-gradient(to top,
      rgba(20, 17, 15, 0.6) 0%,
      rgba(20, 17, 15, 0.28) 58%,
      rgba(20, 17, 15, 0.5) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  padding-block: 4.5rem clamp(2.5rem, 7vw, 5rem);
  /* Flat from 4.5rem down, which is exactly where the first word starts. */
  background:
    linear-gradient(to bottom,
      rgba(20, 17, 15, 0) 0,
      rgba(20, 17, 15, 0.93) 4.5rem,
      rgba(20, 17, 15, 0.93) 100%);
}
.eyebrow {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-text);
}
.hero-title {
  margin: 0;
  font-family: var(--font-ja-display);
  font-weight: 400;
  /* Dela Gothic One at default tracking on a headline reads like a coupon. */
  letter-spacing: -0.015em;
  line-height: 1.03;
  font-size: clamp(2.3rem, 8.6vw, 5.4rem);
  /* Two lines, never three. */
  max-width: 14ch;
}
.hero-title .line { display: block; }
.hero-title .rom {
  display: block;
  font-family: var(--font-latin);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.95rem, 2.4vw, 1.5rem);
  color: var(--accent-text);
  margin-top: 0.7rem;
  line-height: 1;
}
.hero-lede {
  margin: 1.4rem 0 0;
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  line-height: 1.7;
  max-width: 34ch;
}
.hero-meta {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.8;
}
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

/* The honest line under a photograph that carries no signage. Full width,
   quiet, and never dressed up as a caption on the picture itself. */
.disclose {
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.disclose p {
  margin: 0;
  padding-block: 0.85rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Band two: same family, shorter, type on the left inside its own scrim. */
.band { min-height: min(74svh, 620px); display: grid; }
/* g3 is a bright photograph: a white plate under hard light, and raw beef
   that is the one loud colour in the whole set. A flat base veil sits under
   the directional gradient so the frame grades down into the page's own ash
   instead of shouting a slab of red at the reader. The marbling still reads;
   it is simply no longer the brightest thing on the page. */
.band-scrim {
  background:
    linear-gradient(to top,
      rgba(20, 17, 15, 0.5) 0%,
      rgba(20, 17, 15, 0.18) 60%,
      rgba(20, 17, 15, 0.34) 100%),
    rgba(20, 17, 15, 0.46);
}
.band-inner {
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  padding-block: 4.5rem clamp(2.2rem, 6vw, 4rem);
  background:
    linear-gradient(to bottom,
      rgba(20, 17, 15, 0) 0,
      rgba(20, 17, 15, 0.93) 4.5rem,
      rgba(20, 17, 15, 0.93) 100%);
}
.band-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.12;
  font-size: clamp(1.8rem, 5.4vw, 3.2rem);
}
.band-say {
  margin: 1rem 0 0;
  max-width: 40ch;
  font-size: 1.02rem;
}
@media (min-width: 900px) {
  .band-scrim {
    background:
      linear-gradient(to right,
        rgba(20, 17, 15, 0.8) 0%,
        rgba(20, 17, 15, 0.6) 34%,
        rgba(20, 17, 15, 0.1) 70%,
        rgba(20, 17, 15, 0.26) 100%),
      rgba(20, 17, 15, 0.46);
  }
  /* On a wide screen the words move off the bottom edge, so the block keeps
     its own ground: a left hand panel that fades out past the measure. It is
     stretched to the full height of the band on purpose. Centred, its own top
     and bottom edges cut two hard horizontal lines across the photograph and
     the panel reads as a stray rectangle rather than as a side of the frame. */
  .band-inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(2.2rem, 6vw, 4rem);
    background:
      linear-gradient(to right,
        rgba(20, 17, 15, 0.9) 0%,
        rgba(20, 17, 15, 0.9) 40%,
        rgba(20, 17, 15, 0) 64%);
  }
  .band-title, .band-say { max-width: 30ch; }
}

/* ---------- Section shell ---------- */
.sec { padding-block: clamp(3.2rem, 8vw, 6rem); }
.sec-2 { background: var(--bg-2); }
.sec-head {
  margin: 0 0 1.6rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.6rem, 4.4vw, 2.5rem);
}
/* The one accent rule. Same ember, same 3px, every section that uses it. */
.sec-head::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 1.1rem;
}
.measure { max-width: 62ch; }
.say p { margin: 0 0 1.1rem; }
.say p:last-child { margin-bottom: 0; }
.quiet { color: var(--muted); font-size: 0.94rem; }
.rating { font-weight: 700; color: var(--accent-text); }

/* ---------- Family B: the room split ----------
   .m-gallery is the stagger container motion.js already knows, so the
   photograph arrives and then the words do. media.css styles .m-gallery as a
   grid with a spanning first child; both are undone here with the extra class
   needed to win, since media.css loads after this file. */
.pair.m-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.pair.m-gallery .say { margin-block: clamp(0rem, 2vw, 1.5rem); }
.pair.m-gallery > *:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
@media (min-width: 860px) {
  .pair.m-gallery { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}
.shot { margin: 0; }
.shot .m-figure { aspect-ratio: 1 / 1; }
.shot figcaption,
.cap {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- Family C: the flat hours list ----------
   No card, no hairline under every row: a rule above the block, generous
   leading, and the weekday held in a fixed column so the times stack. */
.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.info-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.info-list .label {
  flex: 0 0 auto;
  min-width: 7.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.info-list .val {
  flex: 1 1 14rem;
  min-width: 0;
  font-weight: 700;
  font-size: 1.05rem;
}
.info-list .val .addr { font-style: normal; font-weight: 400; }
/* 翌 / after midnight / 次日 / 다음날. The one word a guest must not miss. */
.cross {
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.86em;
  margin-inline-end: 0.15em;
}
.note {
  margin: 1.6rem 0 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--accent);
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.9;
}

/* ---------- Family D: the 2F access block ---------- */
.access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: start;
}
@media (min-width: 780px) {
  .access-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}
.sign { margin: 0; }
.sign .m-figure { aspect-ratio: 3 / 4; }
.sign figcaption {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}
.plate {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
  background: var(--bg-3);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r);
}
.plate-num {
  font-family: var(--font-latin);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--accent-text);
}
.plate-say { margin: 0; font-size: 0.98rem; }
.info-actions { margin-top: 1.5rem; }
.si { vertical-align: -0.2em; }

/* ---------- Family E: the booking form ----------
   The only boxed thing on the page, which is the point: everything else is a
   band or a list, so the one container reads as the one place you act. */
/* Wider than the reading measure on purpose: the two column form needs room
   for a date control and a time control side by side, and squeezing it into a
   62ch text column left both of them at 215px with the hint stacked five lines
   deep underneath. */
.book-box {
  max-width: 44rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.2rem, 4vw, 2.2rem);
}
.book-intro p { margin: 0 0 1rem; }
.book-intro p:last-child { margin-bottom: 0; }
.book-intro { margin-bottom: 1.8rem; }

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 620px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}
.field select { appearance: none; padding-inline-end: 2.2rem; }
/* The chevron is drawn by the control, not by a hand rolled SVG: a background
   gradient wedge, so nothing here pretends to be an icon. */
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 2px),
    calc(100% - 0.85rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field optgroup {
  font-weight: 700;
  color: var(--text);
  background: var(--bg-3);
}
.field option { color: var(--text); background: var(--bg-3); font-weight: 400; }
.field .hint {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--muted);
}

/* booking.css sets these two to #f0a08c, which is a different salmon from the
   one this palette measured. Restated here, and given the specificity to win
   over a file that loads after this one. Both pass on this ground: #F5917C is
   8.26:1 on --bg and 7.6:1 on --bg-2. */
#reserve-form .field .field-msg { color: var(--err); }
#reserve-form .field.bad input,
#reserve-form .field.bad select,
#reserve-form .field.bad textarea { border-color: var(--err); }

.form-error,
.form-ok {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid currentColor;
  font-size: 0.97rem;
  line-height: 1.75;
}
.form-error.show,
.form-ok.show { display: block; }
.form-error { color: var(--err); }
.form-error a { color: var(--err); font-weight: 700; text-decoration: underline; }
.form-ok { color: var(--ok); }

.book-result { border-radius: var(--r); margin-top: 1.5rem; }
/* booking.css colours this link with --accent, which measures 4.40:1 here and
   is the reason --accent is a fill value. The ember lifted to --accent-text
   measures 5.66:1. #book-result beats .book-result on specificity. */
#book-result .tel-row a { color: var(--accent-text); }
#book-result .book-ref { border-radius: var(--r); }

.after-form {
  margin: 1.5rem 0 0;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--muted);
}
.after-form strong { color: var(--text); }
/* Written under the confirmation panel on the zh and ko pages, because
   site.js carries no strings for those two languages and the panel itself
   comes back in Japanese. */
.result-note {
  margin: 1rem 0 0;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--accent);
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.foot {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-size: 0.94rem;
  color: var(--muted);
}
.foot p { margin: 0 0 0.6rem; }
.foot-name {
  font-family: var(--font-ja-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.9rem;
}
.foot .addr { font-style: normal; margin-bottom: 0.6rem; }
.foot .demo {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.8;
}

/* ---------- Narrow ----------
   Every multi column layout above declares its own collapse to one column.
   Nothing below 400px may scroll sideways, so the only remaining risks are a
   long unbroken string and the hero measure, both handled here. */
@media (max-width: 420px) {
  body { line-height: 1.8; }
  .hero-title { max-width: none; }
  .acts .btn { flex: 1 1 100%; }
  .info-list .label { min-width: 100%; }
  .plate-num { font-size: 1.9rem; }
}