/* ============================================================
   BAR SETTE - 東京都港区六本木 秀英ビル6階-A
   The only stylesheet written for this site. ds.css, booking.css
   and media.css load after it and are shared; nothing here forks them.

   THE READ. A sixth floor room in Roppongi that opens at eight in the
   evening and is still open at seven in the morning, every day of the
   year. It is the highest rated of the eight venues (4.7) and it has
   the fewest photographs (three, all dark, and one of those three is
   unpublishable because it shows five other businesses' signs). That
   asymmetry is the whole brief: a page that tries to look full with two
   images looks thin, a page that is deliberately empty looks certain.

   So: near-empty screens, one idea per viewport, nothing between them
   but dark. No card, no grid, no gallery above the booking form. The
   booking form is the densest object on the page and that contrast is
   the point.

   THE DARKNESS OF THE PHOTOGRAPHS IS THE MATERIAL. No filter brightens
   them, no glow is added, nothing emits light. The only light on this
   page is the light that was in the room when the shutter opened.
   ============================================================ */

:root {
  /* ---- Colour. Green-black, one beam. Measured against the real
     values, not guessed:
        --text  #E8EAE6 on --bg   #0C100E  15.82:1
        --text  #E8EAE6 on --bg-2 #131815  14.83:1
        --muted #9AA39C on --bg            7.38:1
        --muted #9AA39C on --bg-2          6.92:1
        --accent #7FA88C on --bg           7.19:1   (links, chip, ring)
        --error #E8907E on --bg            7.96:1
     The accent is the cyan LED of the room drained of its glow. It
     exists as a hairline, a small chip and a focus ring. It is never
     an emission: no neon, no box-shadow used as light, no gradient
     behind type. ---- */
  --bg: #0C100E;
  --bg-2: #131815;
  --bg-3: #1A211D;
  --text: #E8EAE6;
  --muted: #9AA39C;
  --line: #232B26;
  --accent: #7FA88C;
  --accent-ink: #0C100E;
  --error: #E8907E;
  --success: #7FA88C;

  /* ---- Type. One family at two volumes on the Japanese page:
     Manrope carries the Latin (it has no CJK glyphs, so putting it
     first hands every ideograph straight to Murecho), Murecho carries
     the Japanese. Manrope was chosen because it is unremarkable: on a
     page this empty an expressive face becomes the subject.
     A 200 weight at 16px on near-black smears, so 200 is display only
     at 40px and above and body never goes below 400. ---- */
  --font-display: "Manrope", "Murecho", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-body: "Manrope", "Murecho", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --radius: 3px;
  --radius-sm: 2px;
  --nav-h: 60px;

  /* Read by ds.css. Small lift, slow settle: this page does not bounce. */
  --ds-lift: 2px;
  --ds-dur: 0.4s;
}

/* A JP face first in a Chinese or Korean stack renders those languages in
   Japanese glyph shapes, so both are overridden wholesale rather than
   appended to. Each page loads only its own script. */
html[lang="zh-Hant"] {
  --font-display: "Manrope", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-body: "Manrope", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
}
html[lang="ko"] {
  --font-display: "Manrope", "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
  --font-body: "Manrope", "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
}

/* The recorded address is Japanese on all four pages, because it is the
   string you show a driver. On the Chinese and Korean pages it is handed
   to a Japanese system face rather than being rendered in TC or KR glyph
   shapes; neither page pays for a second webfont to do it. */
html[lang="zh-Hant"] [lang="ja"],
html[lang="ko"] [lang="ja"],
html[lang="en"] [lang="ja"] {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

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

html {
  /* Without this the native date picker and the select chevron render as
     black-on-black furniture the guest cannot see. */
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.1em;
  margin: 0 0 1rem;
}
h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.9rem); }
h3 { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); font-weight: 400; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

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

/* A column of figures must line up: times, ratings, telephone numbers,
   the reference number the guest reads back down the line. */
.hours-range, .span-t, .val, .tel-big, .rating-figure {
  font-variant-numeric: tabular-nums;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* ---------- reveal ----------
   rise is zero on this site and only opacity moves. On a page of
   near-black screens a rise reads as a jolt and undoes the stillness the
   whole direction depends on, so the transition is a state change rather
   than a movement. motion.js takes over when it loads and ds.css stands
   this rule down; if it never loads, this is the reveal. */
.rv { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity 0.85s cubic-bezier(0.22, 0.75, 0.3, 1); }
}
.rv.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transition: none; }
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}
.btn-primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--bg-2); border-color: var(--accent); }

.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.link:hover { color: var(--text); }

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

/* ---------- header ----------
   Brand and the four languages. Nothing else: on a six screen page a
   second navigation is furniture. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  min-height: var(--nav-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  line-height: 1.2;
}
.brand-sub {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  line-height: 1.2;
}
.lang { display: flex; flex-wrap: wrap; gap: 0.1rem 0.35rem; }
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.45rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Measured at 390px: the brand and four language names do not fit on one
   line, and the last two were being clipped by the body's overflow guard
   rather than wrapping. So on a phone the header is two rows, and the four
   languages are spread across the full width where each is a 44px target. */
@media (max-width: 560px) {
  :root { --nav-h: 92px; }
  .brand-sub { display: none; }
  .brand-mark { letter-spacing: 0.16em; }
  .nav .wrap {
    align-items: flex-start;
    padding-block: 0.5rem;
    min-height: 0;
  }
  .brand { width: 100%; padding-block: 0.35rem; }
  .lang {
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }
  .lang a { padding-inline: 0; font-size: 0.8rem; }
}

/* ---------- the opening screen ----------
   Deliberately NOT called .hero. motion.js binds a scroll-linked scale
   drift to ".hero img", and this direction rules out scroll-linked
   motion: on near-black screens a drifting photograph is the one thing
   that moves while somebody is reading. Renaming the class is how the
   shared file is honoured without editing it. */
.open-screen {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  isolation: isolate;
}
.open-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}
.open-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The beam, the branches and the bottle shelf sit in the upper two
     thirds of the frame; a centred crop on a wide screen loses the beam. */
  object-position: 50% 38%;
}
/* The measure is set on the copy's children, not on .open-copy itself.
   .open-copy is also the page's .wrap, and a max-width there capped the
   centred container rather than the text, which pushed the whole block into
   the middle of the screen and ran the subtitle over the photograph. */
.open-copy { padding-block: clamp(2.5rem, 7vh, 5rem); }
.open-copy > * { max-width: 34rem; }
.open-copy h1 {
  font-size: clamp(1.9rem, 0.6rem + 7vw, 4.5rem);
  font-weight: 200;
  letter-spacing: 0.16em;
  margin-bottom: 0.9rem;
}
.open-sub {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  color: var(--text);
  margin-bottom: 1.2rem;
}
/* --text rather than --muted, and the hierarchy is carried by size and
   tracking instead. Measured on the rendered page: this line falls over the
   one part of g3 that is not near-black, the lit row of glassware, and
   --muted against that is the weakest contrast on the site. No scrim and no
   shadow is added to rescue it; the type is simply made bright enough. */
.open-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 1.8rem;
}

/* On a wide screen a 900x1200 portrait stretched across 1280px is cropped to
   a band, and measured on the rendered page that band put the lit bottle
   shelf directly behind the name. So above 861px the photograph keeps its
   own shape as a tall panel on the right and the copy sits on plain --bg
   beside it. Nothing is added to make the type readable; the type is simply
   moved off the one bright part of the picture. */
@media (min-width: 861px) {
  .open-media { inset-inline-start: auto; width: 42%; }
  .open-media img { object-position: 50% 50%; }
  .open-copy > * { max-width: 26rem; }
}

/* ---------- the near-empty screens ----------
   One idea per viewport and nothing else in it. */
.screen {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(4rem, 12vh, 8rem);
}
.screen > .wrap { width: 100%; }

/* The single display statement on the page. It is the largest type here
   because it is the most unusual true thing about this business: one
   session, eleven hours long, seven days a week, no closed day at all. */
.hours-range {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.2rem, 0.4rem + 8.2vw, 6rem);
  letter-spacing: 0.1em;
  line-height: 1.1;
  white-space: nowrap;
  margin: 0 0 0.6rem;
}
.hours-daily {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.6rem);
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}
.hours-note {
  color: var(--muted);
  max-width: 34em;
  margin-top: clamp(1.8rem, 5vh, 3rem);
}

/* One unbroken rule from opening to closing, with midnight marked on it
   rather than cutting it in two. Google's own listing splits this bar's
   night into two same-day segments; a guest reading that would think it
   shuts at midnight, and it does not. */
.span { max-width: 40rem; }
.span-rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0 0 0.9rem;
}
/* Midnight is marked where it actually falls, not at the middle: four of the
   eleven hours are before it and seven after, so the tick sits at 4/11.
   Drawing it at 50% would quietly say the night is half over at midnight,
   which is the exact misreading this whole page exists to prevent. */
.span-rule::before {
  content: "";
  display: block;
  width: 2px;
  height: 9px;
  margin-top: -4px;
  margin-inline-start: 36.36%;
  background: var(--accent);
}
.span-marks {
  position: relative;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}
.span-marks li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.span-marks li:nth-child(2) {
  position: absolute;
  inset-inline-start: 36.36%;
  transform: translateX(-50%);
  text-align: center;
}
.span-marks li:last-child { text-align: end; }
.span-t {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--text);
}
.span-l {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--muted);
}

/* The one sentence screen. This is where the late night trap is
   answered in words, at a size nobody scrolls past. */
.say {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.5rem, 0.8rem + 3.2vw, 3rem);
  letter-spacing: 0.08em;
  line-height: 1.55;
  max-width: 18em;
  margin-bottom: clamp(1.8rem, 5vh, 2.8rem);
}
.say-note {
  color: var(--muted);
  max-width: 34em;
}

/* ---------- the room ----------
   One photograph, once, large, and no caption that claims it is this
   shop: the bar's own name is not legible in any frame it has. */
.screen-room { padding-block: clamp(4.5rem, 13vh, 9rem); }
.room { margin: 0; }
.room-frame {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
}
.room-frame img { object-position: 50% 55%; }
/* The crop is what the caption and the alt text describe. Measured on the
   rendered page: the wide frame lands on the seating, the tables and the LED
   line and leaves the ceiling out, so neither string mentions anything above
   the wall. A caption naming something the reader cannot see is the same
   failure as a caption naming the wrong shop. */
.room figcaption {
  margin-top: 1rem;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 44em;
}
@media (min-width: 760px) {
  .room-frame { aspect-ratio: 3 / 2; }
}

/* ---------- access ---------- */
.screen-access { padding-block: clamp(4.5rem, 13vh, 9rem); }
/* The measure goes on the children, not on .access: it is also the .wrap, and
   capping the wrap centred the whole block while every other screen on the
   page starts at the gutter. */
.access > * { max-width: 42rem; }
.access h2 { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.2rem 1.2rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.info-list li:first-child { border-top: 1px solid var(--line); }
.info-list .label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  line-height: 1.9;
}
.info-list .val { min-width: 0; overflow-wrap: break-word; }
.info-list .val a { display: inline-flex; align-items: center; min-height: 44px; }
.val-note {
  display: block;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.7;
}
.rating-figure { font-size: 1.05rem; letter-spacing: 0.04em; }
.access-actions { margin-top: 1.8rem; }

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

/* ---------- reservation ----------
   The densest object on the page, and the only place anybody is asked to
   act. Everything above it is quiet on purpose. */
.reserve {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 10vh, 6rem);
}
.reserve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
}
.reserve-copy p { color: var(--muted); max-width: 34em; }
.reserve-alt { margin-top: 1.4rem; }
.tel-big {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline-start: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tel-big:hover { color: var(--text); }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
  align-items: start;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1.6;
}
.field input,
.field select,
.form textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field input:hover,
.field select:hover { border-color: var(--muted); }
.field .hint {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--muted);
}

/* booking.css hardcodes #f0a08c for the rejected field. It measures
   9.23:1 on this ground and passes, so this is a restatement for one
   consistent error colour rather than a correction. booking.css loads
   after this file, so both rules are written one step more specific. */
.form .field .field-msg { color: var(--error); font-weight: 500; }
.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);
  font-size: 0.92rem;
  line-height: 1.75;
}
.form-error.show, .form-ok.show { display: block; }
.form-error {
  color: var(--error);
  background: rgba(232, 144, 126, 0.07);
  border: 1px solid rgba(232, 144, 126, 0.35);
  font-weight: 500;
}
.form-error a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  color: var(--success);
  background: rgba(127, 168, 140, 0.07);
  border: 1px solid rgba(127, 168, 140, 0.32);
}

/* booking.css gives the action a flex-basis of 14rem inside a full width row,
   which on a wide form stretches one button across 38rem. Capped here so the
   primary reads as a button rather than a bar, and still fills the column on
   a phone. */
.book-actions .btn { max-width: 22rem; }

.book-result { border-radius: var(--radius); }
.ref-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 44em;
}

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

/* ---------- footer ---------- */
footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.4rem, 6vh, 3.5rem);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1.8rem;
}
.foot-brand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.4rem;
}
.foot-grid p { color: var(--muted); font-size: 0.86rem; margin-bottom: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--muted);
}
.foot-links a:hover { color: var(--text); }
.demo-note {
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--muted);
  max-width: 62rem;
  margin-bottom: 0.5rem;
}