/* ============================================================
   喫茶クレセント - Kissaten Crescent
   Warm Showa-retro light theme. VARIANCE 6 / MOTION 3 / DENSITY 3
   Theme lock: light cream, whole page. Accent lock: burnt amber.
   Radius rule (documented): buttons = pill, cards/surfaces = 16px,
   inputs = 12px. Applied everywhere, no exceptions.
   ============================================================ */

:root {
  --bg: #f3ecda;
  --bg-2: #ebe1c6;
  --bg-3: #e2d5b4;
  --ink: #2b2118;
  --muted: #6f6151;
  --line: rgba(43, 33, 24, 0.16);
  --accent: #b07a1e;        /* button and badge surfaces only, never text */
  --accent-text: #7d4f08;   /* links, prices: AA on cream, bg-2 and bg-3 */
  --accent-ink: #241a10;    /* text on accent surfaces */
  --warn: #8c3418;          /* errors and the armed cancel button */
  --text: var(--ink);       /* alias so the shared portal markup resolves */
  --font-display: "Kaisei Opti", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --r-card: 16px;
  --r-input: 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(--ink);
  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-text);
  outline-offset: 3px;
}

.wrap {
  max-width: 1040px;
  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(243, 236, 218, 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: 700;
  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(--ink); }

.lang {
  display: flex;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.lang a {
  padding: 0.3rem 0.6rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.25s, border-color 0.25s;
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { color: var(--ink); border-color: var(--line); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: 999px;
  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: #9c6c17; }

.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: rgba(43, 33, 24, 0.06); }

.nav .btn { padding: 0.5rem 1.2rem; font-size: 0.9rem; }

/* ---------- Hero (centered manifesto) ---------- */

.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vh, 4.5rem));
  padding-bottom: 2.5rem;
}

.hero-copy {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-text);
  margin-bottom: 1.3rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 5.2vw, 3.8rem);
  line-height: 1.3;
  margin-bottom: 1.3rem;
}

.hero-sub {
  color: var(--muted);
  max-width: 36em;
  margin: 0 auto 2rem;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.hero-photo {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(96, 74, 42, 0.22);
  max-height: 42vh;
}
.hero-photo img {
  width: 100%; height: 100%;
  max-height: 42vh;
  object-fit: cover;
  filter: sepia(0.3) saturate(0.75) contrast(1.02);
}

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

section { padding: clamp(4rem, 8vw, 6.5rem) 0; }

.sec-head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.35;
}
.sec-head p { color: var(--muted); max-width: 40em; margin-top: 0.8rem; }

/* ---------- Morning board (menu card) ---------- */

.board {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.set-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
}
.set-row + .set-row { border-top: 1px dashed var(--line); }

.set-row .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.set-row .desc { color: var(--muted); font-size: 0.88rem; }
.set-row .leader { flex: 1; border-bottom: 1px dotted rgba(43,33,24,0.35); transform: translateY(-5px); }
.set-row .price {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent-text);
  white-space: nowrap;
}

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

.classics {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.classic {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  font-size: 0.95rem;
}
.classic .price { color: var(--accent-text); font-weight: 700; }

/* ---------- Fact cards (2x2 grid) ---------- */

/* Fact cards. Previously .beans/.bean, which described a house-roasting and
   retail-bean business the shop does not have. Same grid, honest names. */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.fact {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.6rem 1.7rem;
}
.fact h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
}
.fact .taste { color: var(--muted); font-size: 0.88rem; }

/* ---------- Atmosphere band ---------- */

.band {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.3) saturate(0.75) brightness(0.92);
}
.band-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: linear-gradient(to top, rgba(43, 33, 24, 0.78) 25%, rgba(43, 33, 24, 0));
  color: #f3ecda;
}
.band-copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 0.8rem;
}
.band-copy p { max-width: 38em; opacity: 0.95; }

/* ---------- 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.3rem;
  color: var(--accent-text);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}
.hours dt:first-child { margin-top: 0; }
.hours dd { font-size: 1.12rem; font-weight: 500; }

.info-list { list-style: none; }
.info-list li {
  padding: 1.05rem 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-text); font-weight: 700; }
.info-list a.link:hover { text-decoration: underline; }

.info-actions { margin-top: 1.6rem; 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, 4.5rem);
  align-items: start;
}

.reserve-copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 1rem;
}
.reserve-copy p { color: var(--muted); max-width: 34em; }

.reserve-alt {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
}
.reserve-alt a { color: var(--accent-text); font-weight: 700; }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}

.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }

.field label { font-size: 0.85rem; font-weight: 700; }

.field input,
.field select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r-input);
  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='%236f6151' 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-text);
  outline-offset: 0;
  border-color: var(--accent-text);
}
/* Solid, not faded: a translucent placeholder dropped to 2.6:1 on cream. */
.field input::placeholder { color: var(--muted); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: var(--warn);
  font-size: 0.9rem;
  font-weight: 500;
}
.form-error.show { display: block; }

.form-ok {
  grid-column: 1 / -1;
  display: none;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  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: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.foot-links { display: flex; gap: 1.5rem; align-items: center; }
.foot-links a:hover { color: var(--ink); }
.demo-note { margin-top: 1.6rem; font-size: 0.78rem; opacity: 0.75; }

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

@media (max-width: 900px) {
  .nav-links { display: none; }
  .facts { grid-template-columns: 1fr; }
  .info-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .band { min-height: 48vh; }
  .hero { padding-top: calc(var(--nav-h) + 2rem); }
}

@media (max-width: 520px) {
  .lang { font-size: 0.72rem; }
  .nav .wrap { gap: 0.9rem; }
  .hero-ctas .btn { width: 100%; }
  .set-row { flex-wrap: wrap; }
  .set-row .leader { display: none; }
  .set-row .price { margin-left: auto; }
}


/* ============================================================
   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-C: minimal rail. Brand is divided off by a rule, links sit
   left, language and a text-style CTA sit right. Heavier bottom border. */
.nav { border-bottom-width: 2px; }
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; }
.nav .brand { margin-right: 1.4rem; padding-right: 1.4rem; border-right: 1px solid var(--line); }
.nav-links { margin-left: 0; margin-right: auto; font-size: 0.86rem; letter-spacing: 0.07em; }
.nav .lang { order: 8; }
.nav .btn.btn-primary {
  background: none; color: var(--text); border: none; border-radius: 0;
  border-bottom: 2px solid var(--accent);
  padding-left: 0; padding-right: 0; order: 9;
}
.nav .btn.btn-primary:hover { background: none; color: var(--accent); }
@media (max-width: 900px) {
  .nav .brand { margin-right: auto; padding-right: 0; border-right: none; }
}

/* Chrome variant RES-C: full-width band, copy across the top, form in a
   three-column rank beneath it. */
.reserve-grid { grid-template-columns: 1fr; gap: 2.4rem; }
.reserve-copy p { max-width: 62ch; }
.form { grid-template-columns: repeat(3, 1fr); }
.form .field.full { grid-column: auto; }
.form .btn { grid-column: 1 / -1; justify-self: center; min-width: 16rem; }
@media (max-width: 900px) { .form { grid-template-columns: 1fr; } }

/* Chrome variant FOOT-C: a bordered strip, brand and links on one rule-bound row. */
.foot-grid {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0;
}
.foot-links { justify-content: flex-end; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; text-align: left; }
  .foot-links { justify-content: flex-start; }
}

/* ============================================================
   MEDIA LAYER OVERRIDES
   The .m-gallery class on .hero-photo is only the hook media.js
   binds the full-screen viewer to; media.css loads afterwards and
   would otherwise turn this into a grid and drop the max-height.
   ============================================================ */

.hero-photo.m-gallery { display: block; }
.hero-photo.m-gallery > button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.hero-photo.m-gallery > button:focus-visible {
  outline: 2px solid var(--accent-text, var(--accent));
  outline-offset: 3px;
}


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