Pages Medium

Sushi / Omakase Landing — Kuro

Sushi & omakase landing — zen minimalism in bone + ink + vermillion, Noto Serif JP display, ink-wash divider, seat counter, and a 13-course omakase progression.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

/* ────────────────────────────────────────────
   KURO 黒 — Omakase palette
   Bone · ink · vermillion · jade
────────────────────────────────────────────── */
:root {
  --bone: #f3efe6;
  --bone-2: #e9e2d2;
  --paper: #fbf8f1;
  --ink: #0c0c0c;
  --ink-2: #3a3a3a;
  --mute: #8a857c;
  --vermillion: #b8362a;
  --jade: #3a6a5a;
  --rule: rgba(12, 12, 12, 0.08);
  --font-display: "Noto Serif JP", "Cormorant Garamond", Georgia, serif;
  --font-body: "Noto Sans JP", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--ink);
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  background: rgba(243, 239, 230, 0.84);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand-jp {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--vermillion);
}
.brand-en {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover {
  color: var(--vermillion);
}
.nav-cta {
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  padding: 9px 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--bone);
}
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
}

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 36px 80px;
  gap: 64px;
  align-items: center;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kicker {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.vm {
  color: var(--vermillion);
}
.hero-jp {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-en {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--vermillion);
}
.hero-en em {
  font-style: italic;
}
.hero-sub {
  font-size: 1.04rem;
  color: var(--ink-2);
  max-width: 480px;
  margin-top: 2px;
}
.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.btn {
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-block;
}
.btn-ink {
  background: var(--ink);
  color: var(--bone);
}
.btn-ink:hover {
  background: var(--vermillion);
}
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-quiet:hover {
  background: var(--ink);
  color: var(--bone);
}

.seat-status {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--ink-2);
}
.seat-status .dot {
  width: 8px;
  height: 8px;
  background: var(--jade);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(58, 106, 90, 0.18);
}

/* Enso (circle) */
.hero-art {
  position: relative;
  height: 360px;
  display: grid;
  place-items: center;
}
.ensō {
  width: 280px;
  height: 280px;
  border-radius: 999px;
  border: 12px solid var(--ink);
  /* Brush-end illusion */
  border-image: radial-gradient(circle, var(--ink) 70%, transparent 100%) 1;
  position: relative;
  /* Slight open gap on the right */
  -webkit-mask: conic-gradient(from 60deg, black 350deg, transparent 360deg);
  mask: conic-gradient(from 60deg, black 350deg, transparent 360deg);
}
.ensō::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(184, 54, 42, 0.12), transparent 50%);
}
.hero-art-cap {
  position: absolute;
  bottom: -6px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--mute);
}

@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 64px 28px;
  }
  .hero-art {
    height: 240px;
  }
  .ensō {
    width: 200px;
    height: 200px;
    border-width: 9px;
  }
}

/* ── Brush divider ── */
.brush {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 36px 28px 12px;
}
.brush span {
  width: 12px;
  height: 3px;
  background: var(--ink);
  border-radius: 4px;
  opacity: 0.65;
}
.brush span:nth-child(2) {
  width: 26px;
  height: 6px;
  opacity: 0.85;
}
.brush span:nth-child(3) {
  width: 42px;
  height: 7px;
  opacity: 1;
  background: var(--vermillion);
  border-radius: 6px;
}
.brush span:nth-child(4) {
  width: 26px;
  height: 6px;
  opacity: 0.85;
}
.brush span:nth-child(5) {
  width: 12px;
  height: 3px;
  opacity: 0.65;
}

/* ── About ── */
.about {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 36px;
  text-align: center;
  scroll-margin-top: 80px;
}
.kicker-jp {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--vermillion);
}
.about h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: 4px;
}
.about h2 em {
  font-style: italic;
  color: var(--vermillion);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  margin-top: 36px;
  text-align: left;
  align-items: start;
}
@media (max-width: 720px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.about-grid p {
  font-size: 1.05rem;
  color: var(--ink-2);
  font-weight: 300;
}
.about-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  border-left: 1px solid var(--rule);
  padding-left: 24px;
}
.about-meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
}
.about-meta dd {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}

/* ── Omakase ── */
.omakase {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 36px;
  scroll-margin-top: 80px;
}
.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-top: 4px;
}

.course-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
@media (max-width: 980px) {
  .course-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .course-list {
    grid-template-columns: 1fr;
  }
}

.course {
  padding: 22px 14px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
  transition: background 0.18s;
  position: relative;
}
.course:last-child {
  border-right: none;
}
.course:hover {
  background: var(--bone-2);
}
.course-no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--vermillion);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.course-jp {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
}
.course-en {
  font-size: 0.74rem;
  color: var(--mute);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.course.is-feat .course-jp {
  color: var(--vermillion);
}

.course-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--mute);
  margin-top: 18px;
  font-style: italic;
}

/* ── Sake ── */
.sake {
  background: var(--ink);
  color: var(--bone);
  padding: 96px 36px;
}
.sake-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sake .kicker {
  color: var(--bone);
}
.sake .kicker-jp {
  color: var(--vermillion);
}
.sake h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-top: 4px;
  line-height: 1.05;
}
.sake-desc {
  color: rgba(243, 239, 230, 0.7);
  margin-top: 14px;
  font-size: 1rem;
  max-width: 480px;
}
.sake-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.sake-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(243, 239, 230, 0.12);
}
.sake-list li:last-child {
  border-bottom: none;
}
.sake-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
}
.sake-name em {
  color: var(--vermillion);
  font-style: italic;
  font-weight: 400;
}
.sake-region {
  grid-column: 1;
  font-size: 0.78rem;
  color: rgba(243, 239, 230, 0.55);
  letter-spacing: 0.04em;
}
.sake-price {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bone);
  align-self: center;
}
@media (max-width: 880px) {
  .sake-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ── Seats ── */
.seats {
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 36px;
  text-align: center;
  scroll-margin-top: 80px;
}
.counter-art {
  margin: 48px auto 32px;
  max-width: 680px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  align-items: center;
}
.seat {
  height: 56px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--mute);
  display: grid;
  place-items: center;
}
.seat::before {
  content: attr(data-no);
}
.chef-area {
  height: 76px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;
}
@media (max-width: 720px) {
  .counter-art {
    grid-template-columns: repeat(4, 1fr);
  }
  .chef-area {
    grid-column: 1 / -1;
  }
}

.hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 24px auto 0;
  max-width: 480px;
}
.hours div {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
.hours dt {
  font-family: var(--font-display);
  font-weight: 500;
}
.hours dd {
  font-family: var(--font-mono);
  font-weight: 600;
}
.hours .closed dd {
  color: var(--mute);
}

/* ── Reserve ── */
.reserve {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 96px 36px;
  scroll-margin-top: 80px;
}
.reserve-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.reserve h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-top: 4px;
  line-height: 1.15;
}
.reserve-note {
  color: var(--ink-2);
  margin-top: 18px;
  font-size: 0.95rem;
  max-width: 380px;
}
.reserve-form {
  background: var(--bone);
  border: 1px solid var(--ink);
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.reserve-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}
.reserve-form input,
.reserve-form select {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.94rem;
  outline: none;
}
.reserve-form input:focus,
.reserve-form select:focus {
  border-color: var(--ink);
}
.full {
  width: 100%;
}
.check {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  font-size: 0.88rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}
.btn-ink {
  align-self: flex-start;
  margin-top: 4px;
}
.form-ok {
  color: var(--jade);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
@media (max-width: 880px) {
  .reserve-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ── Footer ── */
.footer {
  background: var(--ink);
  color: var(--bone);
  text-align: center;
  padding: 48px 28px;
}
.foot-jp {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--vermillion);
}
.foot-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 4px;
}
.foot-meta {
  color: rgba(243, 239, 230, 0.55);
  font-size: 0.82rem;
  margin-top: 6px;
}

const COURSES = [
  { jp: "先付", en: "Amuse" },
  { jp: "汁物", en: "Soup" },
  { jp: "刺身", en: "Sashimi" },
  { jp: "椀盛", en: "Wanmono" },
  { jp: "焼物", en: "Yakimono" },
  { jp: "強肴", en: "Shiizakana", feat: true },
  { jp: "握り", en: "Nigiri 1" },
  { jp: "握り", en: "Nigiri 2" },
  { jp: "握り", en: "Nigiri 3" },
  { jp: "巻物", en: "Maki" },
  { jp: "玉子", en: "Tamago" },
  { jp: "椀", en: "Miso" },
  { jp: "甘味", en: "Dessert" },
];

const list = document.getElementById("courseList");
list.innerHTML = COURSES.map(
  (c, i) => `
  <li class="course ${c.feat ? "is-feat" : ""}">
    <span class="course-no">— ${String(i + 1).padStart(2, "0")}</span>
    <span class="course-jp">${c.jp}</span>
    <span class="course-en">${c.en}</span>
  </li>`
).join("");

// "Seats remaining tonight" — tick down occasionally so the demo feels alive
const seatText = document.getElementById("seatText");
let remaining = 3;
function paint() {
  if (remaining <= 0) seatText.textContent = "Tonight is fully booked · joining the waitlist?";
  else if (remaining === 1) seatText.textContent = "1 seat remaining tonight";
  else seatText.textContent = `${remaining} seats remaining tonight`;
}
paint();
setInterval(() => {
  remaining = Math.max(0, remaining - (Math.random() < 0.3 ? 1 : 0));
  paint();
  if (remaining === 0) {
    setTimeout(() => {
      remaining = 4;
      paint();
    }, 4000);
  }
}, 5200);

// Date default
const di = document.querySelector('input[name="d"]');
if (di) {
  const t = new Date();
  t.setDate(t.getDate() + 3);
  di.value = t.toISOString().slice(0, 10);
}

// Form
const form = document.getElementById("form");
const ok = document.getElementById("ok");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  ok.hidden = false;
  const btn = form.querySelector("button");
  btn.disabled = true;
  setTimeout(() => {
    ok.hidden = true;
    btn.disabled = false;
  }, 2800);
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@500;700&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>黒 · Kuro — Omakase</title>
  </head>
  <body>
    <header class="nav">
      <a class="brand" href="#top">
        <span class="brand-jp">黒</span>
        <span class="brand-en">Kuro</span>
      </a>
      <nav class="nav-links">
        <a href="#about">店</a>
        <a href="#omakase">献立</a>
        <a href="#seats">席</a>
        <a href="#reserve">予約</a>
      </nav>
      <a class="nav-cta" href="#reserve">Reserve · 予約</a>
    </header>

    <main id="top">
      <!-- Hero -->
      <section class="hero">
        <div class="hero-inner">
          <p class="kicker">
            <span class="vm">●</span> 二〇一八 · WEST VILLAGE
          </p>
          <h1 class="hero-jp">お任せ</h1>
          <p class="hero-en"><em>otsukai</em> — leave it to us.</p>
          <p class="hero-sub">
            An eight-seat omakase bar by chef Kenji Tanaka. Thirteen courses,
            two seatings a night, six nights a week. Fish sourced direct from
            Toyosu, flown on Mondays and Thursdays.
          </p>
          <div class="hero-actions">
            <a class="btn btn-ink" href="#reserve">Reserve a seat</a>
            <a class="btn btn-quiet" href="#omakase">Tonight's progression</a>
          </div>
          <p class="seat-status">
            <span class="dot"></span>
            <span id="seatText">— seats remaining tonight</span>
          </p>
        </div>
        <figure class="hero-art" aria-hidden="true">
          <div class="ensō"></div>
          <p class="hero-art-cap">圓相 · enzō</p>
        </figure>
      </section>

      <!-- Brushwork divider -->
      <div class="brush" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span>
      </div>

      <!-- About -->
      <section class="about" id="about">
        <p class="kicker-jp">店について</p>
        <p class="kicker">About the bar</p>
        <h2>Eight seats. <em>One chef.</em></h2>
        <div class="about-grid">
          <p>
            Kuro is an eight-seat counter that opens twice a night. Chef Kenji
            trained for nine years in Ginza before moving to New York in 2018.
            The bar is hinoki cypress, the knives are forged in Sakai, and the
            tea is sourced from a single farm in Uji.
          </p>
          <dl class="about-meta">
            <div><dt>Seats</dt><dd>8 only</dd></div>
            <div><dt>Service</dt><dd>17:30 · 20:30</dd></div>
            <div><dt>Course</dt><dd>13 pieces</dd></div>
            <div><dt>Sake</dt><dd>16 producers</dd></div>
          </dl>
        </div>
      </section>

      <!-- Omakase progression -->
      <section class="omakase" id="omakase">
        <header class="section-head">
          <p class="kicker-jp">献立</p>
          <p class="kicker">Tonight's progression</p>
          <h2>Thirteen pieces, in order.</h2>
        </header>

        <ol class="course-list" id="courseList"></ol>

        <p class="course-note">
          Tonight's progression · subject to the market and the season.
        </p>
      </section>

      <!-- Sake -->
      <section class="sake">
        <div class="sake-inner">
          <div>
            <p class="kicker-jp">酒</p>
            <p class="kicker">Sake</p>
            <h2>Three flights, ten by the glass.</h2>
            <p class="sake-desc">
              Our list runs sixteen producers, mostly junmai and junmai daiginjo
              from Niigata, Yamagata, and Hyōgo. Three flights nightly · three
              pours per flight. We also pour two single-vineyard sakes by the
              glass, changing weekly.
            </p>
          </div>
          <ul class="sake-list">
            <li>
              <span class="sake-name">Tedorigawa <em>Yamahai</em></span>
              <span class="sake-region">Ishikawa · Junmai</span>
              <span class="sake-price">$24</span>
            </li>
            <li>
              <span class="sake-name">Dassai <em>23</em></span>
              <span class="sake-region">Yamaguchi · Daiginjō</span>
              <span class="sake-price">$48</span>
            </li>
            <li>
              <span class="sake-name">Kamoizumi <em>Komekara</em></span>
              <span class="sake-region">Hiroshima · Nigori</span>
              <span class="sake-price">$22</span>
            </li>
            <li>
              <span class="sake-name">Tatenokawa <em>Seiryū</em></span>
              <span class="sake-region">Yamagata · Junmai Daiginjō</span>
              <span class="sake-price">$32</span>
            </li>
          </ul>
        </div>
      </section>

      <!-- Seats / hours -->
      <section class="seats" id="seats">
        <header class="section-head">
          <p class="kicker-jp">席</p>
          <p class="kicker">The counter</p>
          <h2>The room is the table.</h2>
        </header>
        <div class="counter-art" aria-hidden="true">
          <div class="seat" data-no="1"></div>
          <div class="seat" data-no="2"></div>
          <div class="seat" data-no="3"></div>
          <div class="seat" data-no="4"></div>
          <div class="chef-area"><span>板前 · chef</span></div>
          <div class="seat" data-no="5"></div>
          <div class="seat" data-no="6"></div>
          <div class="seat" data-no="7"></div>
          <div class="seat" data-no="8"></div>
        </div>
        <dl class="hours">
          <div><dt>火 — 土 · Tue – Sat</dt><dd>17:30 · 20:30</dd></div>
          <div><dt>日 · Sun</dt><dd>17:30 only</dd></div>
          <div class="closed"><dt>月 · Mon</dt><dd>休 · Closed</dd></div>
        </dl>
      </section>

      <!-- Reserve -->
      <section class="reserve" id="reserve">
        <div class="reserve-inner">
          <header>
            <p class="kicker-jp">予約</p>
            <p class="kicker">Reserve</p>
            <h2>$185 per seat · $96 with sake flight</h2>
            <p class="reserve-note">
              Seats released 21 days in advance · cards held but not charged
              until service · 48-hour cancellation.
            </p>
          </header>
          <form class="reserve-form" id="form">
            <div class="form-row">
              <label>
                <span>Seats</span>
                <select name="g">
                  <option>1</option>
                  <option selected>2</option>
                  <option>3</option>
                  <option>4</option>
                </select>
              </label>
              <label>
                <span>Date</span>
                <input type="date" name="d" />
              </label>
              <label>
                <span>Seating</span>
                <select name="t">
                  <option>17:30</option>
                  <option selected>20:30</option>
                </select>
              </label>
            </div>
            <label class="full">
              <span>Email</span>
              <input type="email" name="e" placeholder="you@example.com" />
            </label>
            <label class="check">
              <input type="checkbox" name="sake" checked />
              <span>Add sake flight (+$96 per seat)</span>
            </label>
            <button class="btn btn-ink" type="submit">Hold these seats</button>
            <p class="form-ok" id="ok" hidden>✓ お待ちしております · We're holding them.</p>
          </form>
        </div>
      </section>
    </main>

    <footer class="footer">
      <p class="foot-jp">黒</p>
      <p class="foot-brand">Kuro</p>
      <p class="foot-meta">217 Bedford St · West Village · NYC</p>
      <p class="foot-meta">kuro@kuro.nyc · +1 212 555 0184</p>
    </footer>

    <script src="script.js"></script>
  </body>
</html>

Sushi / Omakase Landing — Kuro

A zen-minimal landing for an eight-seat omakase bar. Bone background, ink-black type, vermillion + jade accents, Noto Serif JP for headlines + Noto Sans JP body. Content is bilingual — Japanese characters at the top of every section with English glosses underneath. Includes a horizontal omakase progression (13 courses), a live “seats remaining tonight” counter, and a brushwork divider built from CSS.