/* ============================================================
   喫茶アイリット - Kissaten Eyelit
   Morning-light theme. VARIANCE 6 / MOTION 3 / DENSITY 3
   Theme lock: light porcelain, whole page. Accent lock: muted cobalt.
   Radius lock: uniform soft 16px.
   ============================================================ */

:root {
  --bg: #f7f7f4;
  --bg-2: #efefe9;
  --bg-3: #e7e7df;
  --ink: #2a2e35;
  --text: #2a2e35;          /* alias of --ink, used by the shared portal */
  --muted: #5c636e;
  --line: rgba(42, 46, 53, 0.14);
  --accent: #3a5fa0;
  --accent-deep: #2e4c82;
  --accent-ink: #ffffff;    /* text on the cobalt accent, 6.3:1 */
  --warn: #a03a3a;
  --r: 16px;
  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 68px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, a { transition: none !important; }
}

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);
  outline-offset: 3px;
}

.wrap {
  max-width: 1140px;
  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(247, 247, 244, 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: 900;
  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.55rem;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r);
  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.8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r);
  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: #ffffff; }
.btn-primary:hover { background: var(--accent-deep); }

.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--muted); }

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

/* ---------- Hero ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 6fr 5fr;
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 3rem) clamp(1.25rem, 5vw, 4rem) 3rem;
}

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

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

.hero-sub {
  color: var(--muted);
  max-width: 32em;
  margin-bottom: 2.2rem;
}

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-media {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 2rem) clamp(1rem, 3vw, 2.5rem) 2.5rem 0;
  display: flex;
}

.hero-media img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--r);
  filter: saturate(0.85) brightness(1.03);
}

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

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

.sec-head { margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }

.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  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 set ---------- */

.morning-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.morning-feature {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}

.morning-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.94);
}

.morning-feature-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.8rem;
  background: linear-gradient(to top, rgba(42,46,53,0.78), rgba(42,46,53,0));
  color: #f7f7f4;
}

.morning-feature h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
}
.morning-feature .desc { font-size: 0.95rem; opacity: 0.92; }
.morning-feature .price { font-size: 1.4rem; font-weight: 700; margin-top: 0.3rem; }

.rotation {
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rotation h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.rotation ul { list-style: none; }
.rotation li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
}
.rotation li + li { border-top: 1px solid var(--line); }
.rotation .day {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.9rem;
  min-width: 3.2em;
}
.rotation .note { color: var(--muted); font-size: 0.82rem; margin-top: 1rem; }

/* ---------- Classics menu ---------- */

.classics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 4vw, 4rem);
}

.classic {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.classic:nth-child(-n+2) { border-top: none; }
.classic .name { font-weight: 700; font-size: 1.05rem; }
.classic .kana { color: var(--muted); font-size: 0.8rem; }
.classic .dots { flex: 1; border-bottom: 1px dotted rgba(42,46,53,0.3); transform: translateY(-4px); }
.classic .price { font-weight: 700; white-space: nowrap; }
.classic .price.ask { color: var(--muted); font-weight: 500; font-size: 0.88rem; }

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

/* ---------- Story 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: saturate(0.8) brightness(0.82);
}

.band-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: linear-gradient(to top, rgba(42,46,53,0.82) 30%, rgba(42,46,53,0));
  color: #f7f7f4;
}

.band-copy h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 0.8rem;
}
.band-copy p { max-width: 36em; opacity: 0.94; }

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

.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); font-weight: 700; }
.info-list a.link:hover { text-decoration: underline; }
/* Caveat line for a fact that is still single-sourced. */
.info-list .sub { color: var(--muted); font-size: 0.82rem; }

.info-actions { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Reservation ---------- */

.reserve { background: var(--bg-2); }

.reserve-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

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

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

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

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.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.85rem 1rem;
  border-radius: var(--r);
  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='%235c636e' 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);
  outline-offset: 0;
  border-color: var(--accent);
}

/* Solid --muted, not a faded tint: at 0.6 alpha this composited to 2.5:1. */
.field input::placeholder { color: var(--muted); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: #a03a3a;
  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);
  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: 900;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.foot-links { display: flex; gap: 1.5rem; align-items: center; }
.foot-links a:hover { color: var(--ink); }

/* No extra opacity: this line discloses the sample data, so it has to be
   readable (dimming --muted here dropped it to 3.3:1). */
.demo-note { margin-top: 1.6rem; font-size: 0.8rem; }

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

@media (max-width: 900px) {
  .nav-links { display: none; }

  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero-media { padding: 0 1.25rem 2rem; }
  .hero-media img { min-height: 42vh; }

  .morning-grid { grid-template-columns: 1fr; }
  .morning-feature { min-height: 300px; }
  .classics { grid-template-columns: 1fr; }
  .classic:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .classic:first-child { border-top: none; }

  .info-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .band { min-height: 48vh; }
}

@media (max-width: 520px) {
  .lang { font-size: 0.72rem; }
  .nav .wrap { gap: 0.9rem; }
  .hero-ctas .btn { width: 100%; }
}


/* ============================================================
   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 RES-B: single centred column, narrow measure. */
.reserve-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; gap: 2rem; text-align: center; }
.reserve-copy p { margin-left: auto; margin-right: auto; }
.reserve-alt { text-align: center; }
.form { grid-template-columns: 1fr; text-align: left; }
.form .btn { justify-self: stretch; }

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


/* Palette move. 04 and 11 were the only pair in the set whose ground AND accent
   were perceptually the same (background dE 2.1, accent dE 15.4). 11's deep
   Aegean blue is core to that brand, so this 50-year morning kissaten moves
   instead: warmer cream ground, and a wine accent in a hue nothing else uses.
   Recomputed: wine on cream 7.57:1, white on wine 8.16:1, ink 12.65:1,
   muted 5.62:1, hover surface with white 10.85:1. */
:root {
  --bg: #faf6ee;
  --bg-2: #f3ede1;
  --bg-3: #e9e1d1;
  --accent: #7a3b52;
  --accent-deep: #5f2d40;
}
/* Dotted price leaders appeared on six of twelve sites with identical CSS.
   Kept on 01 and 03 where a written menu is the idiom; here the classics list
   becomes a plain two-column rank instead. */
.classic { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: baseline; }
.classic .dots { display: none; }

/* Hero column order reversed. 04 and 11 also shared a copy-left / photo-right
   split; 11 keeps that with its overlapping copy card, so this one leads with
   the photograph and sets the copy in a narrower column on the right.

   SCOPED TO DESKTOP ON PURPOSE. This block is appended after the mobile
   section, and a media query adds no specificity, so an unscoped
   `.hero { grid-template-columns: 5fr 6fr }` here beat the
   `@media (max-width: 900px) { .hero { grid-template-columns: 1fr } }`
   above it purely on source order. The hero therefore stayed two columns
   on a phone: the copy column measured 224px at a 390px viewport, leaving
   the h1 a 184px box while its two authored lines need 199px and 221px,
   so both wrapped and the headline rendered as FOUR lines against the
   project's two-line rule. Measured, not inferred. Keeping this rule at
   min-width 901px lets the mobile collapse apply again. */
@media (min-width: 901px) {
  .hero { grid-template-columns: 5fr 6fr; }
}
.hero-media { order: 1; }
.hero-copy { order: 2; }
@media (max-width: 900px) {
  .hero-media { order: 2; }
  .hero-copy { order: 1; }
}

/* ============================================================
   MEDIA LAYER OVERRIDES
   .m-gallery is carried purely as the hook media.js binds the
   full-screen viewer to. media.css loads after this file, so the
   original layouts are restored here at higher specificity.
   ============================================================ */

.hero-media.m-gallery { display: flex; }
.hero-media.m-gallery > button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* The morning-set photo fills its card absolutely, so its tap target
   must too. .morning-feature-copy already sits at z-index 2. */
.morning-feature.m-gallery { display: flex; align-items: flex-end; }
.morning-feature.m-gallery > button {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.hero-media.m-gallery > button:focus-visible,
.morning-feature.m-gallery > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}


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