/* ---------- 写真（触れると光る） ---------- */
.plate__frame {
  position: relative;
  overflow: hidden;
  background: var(--color-line);
}

.plate__frame img {
  width: 100%;
  object-fit: cover;
}

.plate__caption {
  margin-top: 14px;
  font-family: var(--font-note);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-silver);
}

/* 触れた場所に、青緑の光がにじむ */
.plate__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--color-glow-soft), transparent 38%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.plate__frame.is-lit::after {
  opacity: 1;
}

/* タップした場所から広がる光の輪 */
.plate__ripple {
  position: absolute;
  left: var(--gx);
  top: var(--gy);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1px solid var(--color-glow);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- 表紙 ---------- */
.cover__plate .plate__frame img {
  aspect-ratio: 5 / 3;
}

.cover__logo {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 10vw, 168px);
  line-height: 1;
  letter-spacing: 0.18em;
}

.cover__sub {
  display: block;
  margin-top: 1rem;
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: 0.5em;
  color: var(--color-silver);
}

.cover__catch {
  font-size: clamp(20px, 2.6vw, 38px);
  line-height: 1.8;
  letter-spacing: 0.14em;
}

.cover__phrase {
  display: block;
}

.cover__phrase--en {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.8em;
  letter-spacing: 0.12em;
  color: var(--color-silver);
}

.cover__dive {
  font-family: var(--font-note);
  font-size: 14px;
  letter-spacing: 0.3em;
  border-bottom: 1px solid var(--color-silver);
}

/* ---------- 深さ ---------- */
.depth__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(96px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

.depth__unit {
  margin-left: 0.08em;
  font-size: 0.3em;
  letter-spacing: 0.1em;
  color: var(--color-silver);
}

.depth__plate .plate__frame img {
  aspect-ratio: 4 / 5;
}

.depth--a .depth__plate .plate__frame img,
.depth--e .depth__plate .plate__frame img {
  aspect-ratio: 5 / 3;
}

/* 全幅（出血）の写真でも、説明文は本文と同じ左余白にそろえる */
.depth--a .plate__caption,
.depth--e .plate__caption {
  padding-left: var(--margin);
}

.depth__label {
  font-family: var(--font-note);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--color-silver);
}

.depth__title {
  margin-top: 0.6rem;
  line-height: 1.3;
}

.depth__ja {
  display: block;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 60px);
  letter-spacing: 0.24em;
}

.depth__en {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.22em;
  color: var(--color-silver);
}

.depth__text {
  margin-top: 1.4rem;
  font-size: 15px;
  line-height: 2.2;
  text-wrap: pretty;
}

.depth__spec {
  margin-top: 1.8rem;
  border-top: 1px solid var(--color-silver);
}

.depth__spec > div {
  display: grid;
  grid-template-columns: 7em 1fr;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--color-line);
}

.depth__spec dt {
  font-family: var(--font-note);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--color-silver);
}

.depth__spec dd {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.08em;
}

.depth__spec small {
  margin-left: 0.6em;
  font-family: var(--font-note);
  font-size: 11px;
  color: var(--color-silver);
}

.depth__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 1.6rem;
}

.depth__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-size: 13px;
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--color-silver);
}

/* ---------- ご予約・店舗情報 ---------- */
.reserve__en,
.info__en {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.95;
}

.reserve__ja,
.info__ja {
  display: inline-block;
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-silver);
  font-size: 14px;
  letter-spacing: 0.4em;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
}

.field label {
  font-family: var(--font-note);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--color-silver);
}

.field input,
.field select {
  min-height: 48px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-silver);
  border-radius: 0;
  background: none;
  color: var(--color-ink);
  font-family: var(--font-ja);
  font-size: 16px;
  color-scheme: dark;
}

.field select option {
  background: var(--color-surface);
  color: var(--color-ink);
}

/* 控えめだが存在感のある予約ボタン：細い銀の枠。触れると青緑に点く */
.reserve__submit {
  min-height: 52px;
  padding: 0 40px;
  border: 1px solid var(--color-silver);
  background: none;
  color: var(--color-ink);
  font-family: var(--font-ja);
  font-size: 15px;
  letter-spacing: 0.3em;
  cursor: pointer;
}

.reserve__submit:hover,
.reserve__submit:focus-visible,
.reserve__submit:active {
  border-color: var(--color-glow);
  box-shadow: 0 0 18px var(--color-glow-faint);
}

.reserve__message {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-silver);
}

.info__list > div {
  display: grid;
  grid-template-columns: 7em 1fr;
  align-items: baseline;
  padding-block: 16px;
  border-top: 1px solid var(--color-line);
}

.info__list > div:last-child {
  border-bottom: 1px solid var(--color-line);
}

.info__list dt {
  font-family: var(--font-note);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--color-silver);
}

.footer__logo {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: 0.3em;
}

.footer__note,
.footer__copy {
  margin-top: 1rem;
  font-family: var(--font-note);
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-silver);
}

.footer__top {
  margin-left: 1.6em;
  border-bottom: 1px solid var(--color-silver);
}

/* ---------- 動き（光るのは触れた時だけ。動かさなくても成立する） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cover__phrase {
    animation: phrase-in 1.4s var(--ease-quiet) both;
  }

  .cover__phrase:nth-child(1) { animation-delay: 0.3s; }
  .cover__phrase:nth-child(2) { animation-delay: 0.9s; }

  .plate__frame::after {
    transition: opacity 0.5s var(--ease-quiet);
  }

  .plate__ripple {
    animation: ripple 1.2s var(--ease-quiet) forwards;
  }

  /* スクロールを速く動かすと、水面がさざめく（全体に一瞬だけ青緑の線が走る） */
  .plate__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 42%, var(--color-glow-faint) 50%, transparent 58%);
    transform: translateX(-120%);
    pointer-events: none;
  }

  .is-stirred .plate__frame::before {
    animation: stir 1.1s var(--ease-quiet) 1 forwards;
  }
}

@keyframes phrase-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes ripple {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(14); }
}

@keyframes stir {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

.gauge__tick.is-current {
  color: var(--color-ink);
}

.gauge__tick.is-current::after {
  width: 16px;
  background: var(--color-ink);
}