/* Quote Gallery のページの色と書体（ロゴ H2・キラ「The cited words」から）
   墨黒 #161616 と白。＋版の藍 #25334C を差し色に。英字と引用符は Libre Baskerville */
body.quote {
  --bg: #121212;
  --ivory: #1b1b1b;
  --ink: #F4F2EC;
  --ink-2: rgba(244, 242, 236, .72);
  --ink-3: rgba(244, 242, 236, .46);
  --line: rgba(244, 242, 236, .14);
  --label: "Libre Baskerville", "Baskerville", Georgia, serif;
  --serif-en: "Libre Baskerville", "Baskerville", Georgia, serif;
  --indigo: #25334C;
  --sub-fg: #F4F2EC; --sub-bg: rgba(18, 18, 18, .88);
}
body.quote .label, body.quote .discover, body.quote .foot h4 { font-size: 10.5px; letter-spacing: .24em; }
body.quote .label:not(.discover) { color: #9aa6c0; }

/* 冒頭：名言を飾る。3つを順にゆっくり入れ替える */
.q-hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--kf-bar) + 58px + 40px) var(--gutter) 72px; overflow: hidden; }
.q-hero .mark { position: absolute; left: 50%; top: calc(var(--kf-bar) + 58px + 36px); transform: translateX(-50%); width: 44px; opacity: .9; }
.q-slides { position: relative; width: min(980px, 100%); min-height: 46vh; }
.q-slide { position: absolute; inset: 0; display: grid; align-content: center; opacity: 0; transition: opacity 1.6s ease; }
.q-slide.on { opacity: 1; position: relative; }
.q-slide .open { font-family: var(--serif-en); font-size: clamp(80px, 10vw, 140px); line-height: .6; color: var(--ink-3); display: block; height: .5em; }
.q-slide blockquote { margin: 0; font-family: var(--serif-ja); font-weight: 500; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.75; letter-spacing: .08em; }
.q-slide blockquote:lang(en) { font-family: var(--serif-en); font-weight: 400; line-height: 1.45; letter-spacing: 0; }
.q-slide .orig { margin: 18px 0 0; color: var(--ink-3); font-family: var(--serif-en); font-style: italic; font-size: 15px; }
.q-slide .who { margin: 28px 0 0; display: grid; gap: 8px; }
.q-slide .who::before { content: ""; width: 120px; height: 2px; background: var(--ink); }
.q-slide .who::after { content: ""; width: 70px; height: 2px; background: var(--ink-3); order: 3; }
.q-slide .who b { font-weight: 500; font-size: 16px; letter-spacing: .08em; }
.q-slide .who span { color: var(--ink-2); font-size: 13px; }
.q-hero .foot-line { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vh, 48px); text-align: center; }
.q-hero .soon { display: inline-block; border: 1px solid var(--ink-2); padding: 8px 22px; color: var(--ink); }

/* 機能：文字だけの6枚 */
.q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.q-grid > div { background: var(--bg); padding: clamp(28px, 3.6vw, 48px); }
.q-grid .n { font-family: var(--serif-en); font-size: 13px; letter-spacing: .2em; color: var(--ink-3); }
.q-grid h3 { font-family: var(--serif-ja); font-weight: 500; font-size: 19px; letter-spacing: .1em; margin: 12px 0 12px; }
.q-grid h3:lang(en) { font-family: var(--serif-en); font-weight: 400; letter-spacing: .02em; font-size: 21px; }
.q-grid p { color: var(--ink-2); font-size: 14px; margin: 0; }
.q-grid .moods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.q-grid .moods span { border: 1px solid var(--line); padding: 3px 12px; font-size: 12.5px; color: var(--ink-2); }
.q-grid .plus { background: var(--indigo); }
@media (max-width: 900px) { .q-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .q-grid { grid-template-columns: 1fr; } }

/* 出典のある言葉だけ：藍の帯 */
.q-source { background: var(--indigo); text-align: center; padding: clamp(96px, 14vw, 170px) 0; }
.q-source h2 { font-family: var(--serif-ja); font-weight: 500; font-size: clamp(24px, 3vw, 34px); letter-spacing: .16em; margin: 16px 0 18px; }
.q-source h2:lang(en) { font-family: var(--serif-en); font-weight: 400; letter-spacing: .01em; font-size: clamp(30px, 3.6vw, 42px); }
.q-source p { color: var(--ink-2); max-width: 34em; margin: 0 auto; }

.sisters3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sisters3 a { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 28px clamp(16px, 2.4vw, 32px); background: var(--ivory); text-decoration: none; }
.sisters3 img { width: 56px; height: 56px; border-radius: 13px; }
.sisters3 b { display: block; font-family: var(--serif-en); font-weight: 400; font-size: 20px; }
.sisters3 span { color: var(--ink-2); font-size: 13px; }
@media (max-width: 760px) { .sisters3 { grid-template-columns: 1fr; } }
body.quote footer.foot { background: #0a0a0a; }