/*
 * 赤盈餐饮集团 · 品牌排版系统
 * 作为最后一层加载，统一此前各门店模块的字体、节奏与细节。
 */
:root {
  --font-cn-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  --font-cn-text: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;
  --font-en-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "DM Sans", "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --type-gold: #c6a66a;
  --type-main: #eee5d6;
  --type-muted: #a69a89;
  --type-dark-main: #2b211a;
}

html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  font-kerning: normal;
}

::selection {
  color: #100d09;
  background: #c9a86c;
}

/* Header */
.brand {
  gap: 15px;
}

.brand b {
  font-family: var(--font-cn-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .12em;
}

.brand small {
  margin-top: 4px;
  font-family: var(--font-en-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
}

.seal {
  font-family: var(--font-cn-display);
  font-weight: 600;
}

.site-header nav a,
.menu-toggle {
  position: relative;
  font-family: var(--font-cn-text);
  font-size: 12px;
  letter-spacing: .16em;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -9px;
  left: 0;
  height: 1px;
  background: var(--type-gold);
  transition: right .35s ease;
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after {
  right: 0;
}

/* Shared editorial hierarchy */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-en-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .28em;
}

.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .72;
}

.hero h1,
.statement h2,
.section-head h2,
.kyoto-copy h2,
.guan-intro h2,
.banzen-copy h2,
.tan-copy h2,
.dali-copy h2,
.brunch-copy h2,
.juice-copy h2,
.quote blockquote,
footer h2 {
  font-family: var(--font-cn-display);
  font-weight: 500;
}

.hero h1 {
  max-width: 850px;
  margin: 28px 0 36px;
  font-size: clamp(52px, 7.2vw, 104px);
  line-height: 1.18;
  letter-spacing: -.045em;
}

.hero h1 em {
  font-weight: 400;
}

.intro {
  max-width: 620px;
  font-family: var(--font-cn-text);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: .055em;
}

.button {
  min-width: 126px;
  padding: 15px 25px;
  text-align: center;
  font-family: var(--font-cn-text);
  font-size: 12px;
  letter-spacing: .18em;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.statement {
  padding-top: clamp(120px, 11vw, 176px);
  padding-bottom: clamp(120px, 11vw, 176px);
}

.statement h2,
.section-head h2 {
  line-height: 1.3;
  letter-spacing: -.035em;
}

.statement > p:last-of-type {
  max-width: 800px;
  font-family: var(--font-cn-text);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 2.2;
  letter-spacing: .045em;
}

.values {
  font-family: var(--font-cn-text);
  font-size: 14px;
  letter-spacing: .12em;
}

.values b {
  font-family: var(--font-en-display);
  font-size: 15px;
  letter-spacing: .08em;
}

.section-head {
  margin-bottom: 64px;
}

.section-head > p {
  max-width: 500px;
  margin-bottom: 8px;
  font-family: var(--font-cn-text);
  font-size: 14px;
  line-height: 2;
  letter-spacing: .045em;
}

/* Brand cards */
.brand-card {
  min-height: 430px;
  padding: clamp(28px, 3vw, 42px);
}

.brand-card .num {
  font-family: var(--font-en-display);
  font-size: 15px;
  font-weight: 600;
}

.brand-card .en {
  margin: 0 0 12px;
  font-family: var(--font-en-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .18em;
}

.brand-card h3 {
  max-width: 94%;
  margin: 0 0 14px;
  font-family: var(--font-cn-display);
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.brand-card > p:last-child {
  margin: 0;
  font-family: var(--font-cn-text);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .055em;
}

/* Restaurant feature copy: one consistent editorial rhythm */
.kyoto-copy,
.guan-intro,
.banzen-copy,
.tan-copy,
.dali-copy,
.brunch-copy,
.juice-copy {
  padding-right: clamp(28px, 4vw, 68px);
  padding-left: clamp(28px, 4vw, 68px);
}

.kyoto-copy h2,
.guan-intro h2,
.banzen-copy h2,
.tan-copy h2,
.dali-copy h2,
.brunch-copy h2,
.juice-copy h2 {
  margin: 20px 0 30px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.28;
  letter-spacing: -.045em;
}

.kyoto-copy > p:not(.eyebrow),
.guan-intro > p:not(.eyebrow),
.banzen-copy > p:not(.eyebrow),
.tan-copy > p:not(.eyebrow),
.dali-copy > p:not(.eyebrow),
.brunch-copy > p:not(.eyebrow),
.juice-copy > p:last-child {
  max-width: 490px;
  font-family: var(--font-cn-text);
  font-size: 15px;
  line-height: 2.08;
  letter-spacing: .045em;
}

.kyoto-copy > span,
.guan-intro > span,
.banzen-copy > span,
.tan-copy > span,
.dali-copy > span,
.brunch-copy > span {
  display: block;
  margin-top: 42px;
  font-family: var(--font-en-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .2em;
}

.kyoto-shot figcaption,
.guan-photo figcaption,
.banzen-shot figcaption,
.tan-shot figcaption,
.dali-shot figcaption,
.brunch-shot figcaption,
.juice-shot figcaption {
  padding: 56px 28px 25px;
  font-family: var(--font-en-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
}

/* Store directory */
.filters {
  display: flex;
  gap: 8px;
}

.filters button {
  padding: 9px 14px;
  font-family: var(--font-cn-text);
  font-size: 12px;
  letter-spacing: .12em;
}

.store-row {
  gap: clamp(22px, 3vw, 48px);
  padding: 34px 0;
}

.store-row .index {
  align-self: start;
  padding-top: 4px;
  font-family: var(--font-en-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
}

.store-row h3 {
  margin: 0 0 10px;
  font-family: var(--font-cn-display);
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .01em;
}

.store-row p {
  font-family: var(--font-cn-text);
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: .055em;
}

.store-address span {
  font-family: var(--font-en-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
}

.store-address p {
  max-width: 580px;
  font-size: 13px;
  line-height: 1.85;
}

/* Closing statement and footer */
.quote blockquote {
  line-height: 1.55;
  letter-spacing: .015em;
}

.quote > p {
  font-family: var(--font-en-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
}

footer h2 {
  letter-spacing: .08em;
}

footer p {
  font-family: var(--font-cn-text);
  line-height: 1.9;
  letter-spacing: .035em;
}

.footer-label {
  font-family: var(--font-en-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
}

@media (max-width: 800px) {
  .brand b {
    font-size: 20px;
  }

  .brand small {
    font-size: 8px;
    letter-spacing: .14em;
  }

  .hero h1 {
    margin: 24px 0 28px;
    max-width: 100%;
    font-size: clamp(40px, 10.5vw, 50px);
    line-height: 1.2;
    letter-spacing: -.055em;
  }

  .hero h1 em {
    overflow-wrap: anywhere;
  }

  .intro {
    max-width: 94%;
    font-size: 14px;
    line-height: 2;
  }

  .statement h2,
  .section-head h2 {
    font-size: clamp(36px, 10vw, 52px);
  }

  .statement > p:last-of-type {
    font-size: 15px;
    line-height: 2.05;
    text-align: left;
  }

  .section-head {
    margin-bottom: 42px;
  }

  .section-head > p {
    margin-top: 20px;
  }

  .brand-card {
    min-height: 370px;
    padding: 28px;
  }

  .brand-card h3 {
    font-size: clamp(27px, 8.2vw, 38px);
  }

  .kyoto-copy,
  .guan-intro,
  .banzen-copy,
  .tan-copy,
  .dali-copy,
  .brunch-copy,
  .juice-copy {
    padding-right: 4px;
    padding-left: 4px;
  }

  .kyoto-copy h2,
  .guan-intro h2,
  .banzen-copy h2,
  .tan-copy h2,
  .dali-copy h2,
  .brunch-copy h2,
  .juice-copy h2 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .kyoto-copy > p:not(.eyebrow),
  .guan-intro > p:not(.eyebrow),
  .banzen-copy > p:not(.eyebrow),
  .tan-copy > p:not(.eyebrow),
  .dali-copy > p:not(.eyebrow),
  .brunch-copy > p:not(.eyebrow),
  .juice-copy > p:last-child {
    font-size: 14px;
    line-height: 2;
  }

  .store-row {
    padding: 27px 0;
  }

  .store-row h3 {
    font-size: 19px;
  }

  .quote blockquote {
    font-size: clamp(28px, 8vw, 42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}