/* ============================================================
   灯火珈琲 -TOMOSHIBI-  |  css/store.css
   店舗情報ページ固有のレイアウト。
   すべて tokens.css の custom properties から構築。
   新しい色・書体は導入しない。
   ============================================================ */

/* ---- shared page rhythm ---- */
main > .section:first-child { padding-top: calc(var(--nav-h) + var(--space-6)); }

/* ============================================================
   HERO
   ============================================================ */
.hero-store { position: relative; }
.hero-store__grid {
  position: relative;
  width: 100%;
  row-gap: var(--space-4);
  /* left column rides UP with the title instead of sinking to the baseline */
  align-items: start;
}

.hero-store__ghost {
  top: -0.15em;
  right: -0.02em;
  font-size: clamp(4rem, 20vw, 16rem);
}

.hero-store__seats {
  align-self: start;
  padding-top: var(--space-2);
}
.hero-store__seats .label { margin-bottom: var(--space-3); }

.seats { max-width: 24rem; margin-bottom: var(--space-3); }
.seats__svg { width: 100%; height: auto; }

.hero-store__lead {
  font-family: var(--font-mincho);
  font-size: var(--step-0);
  color: var(--color-muted);
  line-height: 1.9;
  max-width: 34ch;
}

.hero-store__headline {
  display: flex;
  justify-content: flex-end;
  align-self: stretch;
}
.hero-store__title {
  /* CAPPED so both vertical lines fit inside one viewport fold */
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: 1.02;
  height: min(70vh, 34rem);
  display: flex;
  gap: 0.12em;
  margin-inline-start: auto;
}
.hero-store__line { display: block; }

.hero-store__body { justify-self: end; }
.hero-store__body p {
  max-width: 40ch;
  color: var(--color-fg);
  margin-left: auto;
}

/* ============================================================
   HOURS
   ============================================================ */
.hours__head { position: relative; margin-bottom: var(--space-4); }
.hours__head .index-num--giant { display: block; margin-bottom: var(--space-2); }
.hours__head h2 { margin-bottom: var(--space-2); }

.index-list { margin-top: var(--space-2); }

.hours-row {
  grid-template-columns: 3.2em 1fr;
  align-items: center;
}
.hours-row__label {
  font-size: var(--step--1);
  color: var(--color-muted);
  letter-spacing: 0.08em;
  height: 100%;
  align-self: start;
}
.hours-row__body {
  font-size: var(--step-0);
  line-height: 1.7;
}
.hours-row__sub {
  display: inline-block;
  color: var(--color-muted);
  font-size: var(--step--1);
  margin-left: 0.4em;
}

/* ============================================================
   ACCESS
   ============================================================ */
.access { padding-block: var(--space-7); }
.access__grid { row-gap: var(--space-5); align-items: start; }

.access__head { position: relative; display: flex; gap: var(--gutter); align-items: flex-start; }
.access__chapter {
  font-size: var(--step--1);
  color: var(--color-muted);
  letter-spacing: 0.12em;
  height: 12em;
}
.access__title {
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 600;
  line-height: 1.02;
  display: flex;
  gap: 0.1em;
}
.access__title > span { display: block; }

.access__map { margin-top: var(--space-4); width: 100%; max-width: 26rem; }
.access__map svg { width: 100%; height: auto; }

.access__body p { color: var(--color-fg); margin-bottom: var(--space-3); }
.access__list { margin-block: var(--space-3); }
.access__list .index-row { grid-template-columns: 5em 1fr; }
.access__k { font-family: var(--font-mincho); color: var(--color-muted); font-size: var(--step--1); }
.access__v { font-size: var(--step-0); }
.access__caution {
  font-family: var(--font-mincho);
  color: var(--color-muted);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

/* ============================================================
   MENU
   ============================================================ */
.menu__head { align-items: end; margin-bottom: var(--space-4); }
.menu__head .index-num--giant { display: block; margin-bottom: var(--space-2); }
.menu__intro { align-self: end; }

.menu-panel { padding: clamp(1.5rem, 4vw, 3.5rem); }
.menu-panel__inner { position: relative; }

.menu-list { border-top: 1px solid var(--hairline); }
.menu-row {
  display: grid;
  grid-template-columns: 6.5em 1fr auto;
  gap: var(--gutter);
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}
.menu-row__name {
  font-size: var(--step-1);
  font-weight: 600;
  height: 5.5em;
  letter-spacing: 0.04em;
}
.menu-row__desc {
  font-size: var(--step--1);
  color: var(--color-muted);
  line-height: 1.7;
}
.menu-row__price {
  font-family: var(--font-body);
  font-size: var(--step-0);
  text-align: right;
  white-space: nowrap;
}
.menu-row__price .tnum { font-size: var(--step-1); }

.menu-panel__note {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--color-muted);
  line-height: 1.9;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  padding-block: var(--space-8);
  background:
    radial-gradient(90% 60% at 50% 120%, var(--accent-glow) 0%, rgba(221,138,42,0) 55%),
    var(--color-bg-deep);
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  row-gap: var(--space-5);
  align-items: center;
}
.contact__lead { grid-column: 1 / 7; position: relative; display: flex; gap: var(--gutter); align-items: flex-start; }
.contact__side {
  font-size: var(--step--1);
  color: var(--color-muted);
  letter-spacing: 0.14em;
  height: 12em;
}
.contact__title {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.04;
  font-weight: 600;
}
.contact__body { grid-column: 8 / 13; }
.contact__body p { color: var(--color-fg); margin-bottom: var(--space-3); }
.contact__lines {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  flex-wrap: wrap;
  font-size: var(--step-0);
  margin-bottom: var(--space-4);
}
.contact__sep { color: var(--color-muted); }
.contact__btn { margin-top: var(--space-1); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { padding-bottom: var(--space-5); position: relative; }
.site-footer .marquee { margin-block: var(--space-4); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "word nav"
    "meta nav";
  gap: var(--space-4) var(--space-5);
  align-items: start;
  padding-block: var(--space-4);
}
.site-footer__wordmark { grid-area: word; }
.site-footer__word {
  font-weight: 900;
  font-size: clamp(3rem, 12vw, 12rem);
  letter-spacing: -0.04em;
  line-height: 0.82;
  color: var(--color-fg);
  display: block;
}
.site-footer__nav { grid-area: nav; }
.site-footer__navlist {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  height: 9em;
}
.site-footer__navlist a {
  font-size: var(--step-0);
  letter-spacing: 0.08em;
}
.site-footer__navlist a[aria-current="page"] { color: var(--color-accent); }

.site-footer__meta { grid-area: meta; font-style: normal; color: var(--color-muted); font-size: var(--step--1); line-height: 1.9; }
.site-footer__name { color: var(--color-fg); font-family: var(--font-mincho); font-size: var(--step-0); margin-bottom: var(--space-1); }

.site-footer__base { margin-top: var(--space-4); }
.site-footer__copy { margin-top: var(--space-2); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .hero-store__headline { justify-content: flex-start; }
  .hero-store__title {
    margin-inline-start: 0;
    font-size: clamp(2.8rem, 14vw, 4.6rem);
    height: min(56vh, 22rem);
  }
  .hero-store__body { justify-self: start; }
  .hero-store__body p { margin-left: 0; }

  .access__head { flex-direction: row; }
  .access__title { font-size: clamp(2.2rem, 13vw, 4rem); }

  .menu-row { grid-template-columns: 4.5em 1fr auto; gap: var(--space-2); }
  .menu-row__name { height: 6.5em; font-size: var(--step-0); }
  .menu-row__desc { font-size: var(--step--1); }

  .contact__lead,
  .contact__body { grid-column: 1 / -1; }

  .site-footer__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "word"
      "meta"
      "nav";
  }
  .site-footer__navlist { height: auto; flex-direction: row; }
  .site-footer__navlist a { writing-mode: horizontal-tb; }
}