.page-contact .c-hero {
  padding-block: clamp(20px, 4vw, 44px) clamp(36px, 5vw, 64px);
  overflow: hidden;
}

.page-contact .c-hero .breadcrumb a {
  color: var(--grape-300);
}

.page-contact .c-hero .breadcrumb li[aria-current="page"] {
  color: rgba(247, 244, 250, 0.62);
}

.page-contact .c-hero__layout {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(18px, 3vw, 30px);
}

.page-contact .c-hero__title {
  margin: 10px 0 0;
  font-size: clamp(30px, 6.4vw, 56px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--paper-050);
  max-width: 15em;
}

.page-contact .c-hero .eyebrow {
  color: var(--grape-300);
}

.page-contact .c-hero__lede {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(247, 244, 250, 0.78);
}

.page-contact .c-hero__figure {
  margin: 0;
}

.page-contact .c-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: 1px solid var(--line-dark);
}

@media (min-width: 900px) {
  .page-contact .c-hero__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* 渠道卡 */
.page-contact .c-channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(24px, 4vw, 42px);
}

.page-contact .c-channel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line-dark);
  border-top: 2px solid var(--grape-700);
  background: linear-gradient(160deg, rgba(107, 46, 138, 0.26), rgba(10, 7, 16, 0.55));
  transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}

.page-contact .c-channel:hover {
  transform: translateY(-4px);
  border-color: var(--grape-300);
}

.page-contact .c-channel__idx {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.page-contact .c-channel__title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--paper-050);
}

.page-contact .c-channel__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.5;
  color: var(--paper-050);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-contact .c-channel__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(247, 244, 250, 0.66);
}

.page-contact .c-channel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.page-contact .c-copy-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-500);
  min-height: 1em;
}

@media (min-width: 768px) {
  .page-contact .c-channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* 服务时间 */
.page-contact .c-hours {
  padding-block: clamp(36px, 5vw, 64px);
}

.page-contact .c-hours__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(22px, 3.4vw, 34px);
}

.page-contact .c-hours__clockbox {
  border-left: 3px solid var(--grape-700);
  padding-left: 18px;
}

.page-contact .c-hours__clock {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--grape-700);
}

.page-contact .c-hours__clockmeta {
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

.page-contact .c-hours__clocknote {
  margin: 14px 0 0;
  max-width: 32em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-900);
}

.page-contact .c-hours__fit {
  display: grid;
  gap: 16px;
}

.page-contact .c-fit {
  border: 1px solid var(--line-light);
  padding: 18px 18px 16px;
  background: rgba(107, 46, 138, 0.04);
}

.page-contact .c-fit__tag {
  margin: 0 0 10px;
}

.page-contact .c-fit__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-900);
}

@media (min-width: 860px) {
  .page-contact .c-hours__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .page-contact .c-hours__fit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 咨询分类 */
.page-contact .c-topics {
  padding-block: clamp(36px, 5vw, 64px);
}

.page-contact .c-topics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(22px, 3.4vw, 34px);
}

.page-contact .c-topic {
  border: 1px solid var(--line-dark);
  padding: 20px 18px 18px;
  background: rgba(247, 244, 250, 0.03);
  transition: transform 220ms var(--ease), background-color 220ms var(--ease);
}

.page-contact .c-topic:hover {
  transform: translateY(-4px);
  background: rgba(107, 46, 138, 0.22);
}

.page-contact .c-topic__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-400);
}

.page-contact .c-topic__title {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 900;
  color: var(--paper-050);
}

.page-contact .c-topic__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(247, 244, 250, 0.72);
}

.page-contact .c-topic__hint {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-dark-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--grape-300);
}

@media (min-width: 720px) {
  .page-contact .c-topics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* 留言怎么写 */
.page-contact .c-note {
  padding-block: clamp(40px, 6vw, 80px);
}

.page-contact .c-note__layout {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-contact .c-note__title {
  margin: 10px 0 0;
  font-size: clamp(24px, 4.6vw, 38px);
  line-height: 1.24;
  font-weight: 900;
  color: var(--ink-900);
  max-width: 18em;
}

.page-contact .c-note__lede {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-500);
}

.page-contact .c-note__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}

.page-contact .c-note__list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light-soft);
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-500);
}

.page-contact .c-note__idx {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--grape-700);
  padding-top: 3px;
}

.page-contact .c-note__cell strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 2px;
}

.page-contact .c-note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.page-contact .c-note__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.page-contact .c-note__figure {
  margin: 0;
  border: 1px solid var(--line-light);
  padding: 10px;
  background: var(--paper-050);
}

.page-contact .c-note__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-contact .c-note__caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gray-500);
}

@media (min-width: 900px) {
  .page-contact .c-note__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

/* 合作与纠错 */
.page-contact .c-coop {
  padding-block: clamp(38px, 5.5vw, 70px);
}

.page-contact .c-coop__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-contact .c-coop__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold-400);
}

.page-contact .c-coop__title {
  margin: 10px 0 0;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.28;
  font-weight: 900;
  color: var(--paper-050);
}

.page-contact .c-coop__text {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(247, 244, 250, 0.82);
}

@media (min-width: 860px) {
  .page-contact .c-coop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 地址与备案 */
.page-contact .c-office {
  padding-block: clamp(36px, 5vw, 64px);
}

.page-contact .c-office__grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 36px);
}

.page-contact .c-office__value {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(16px, 3.8vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

.page-contact .c-office__note {
  margin: 10px 0 0;
  max-width: 32em;
  font-size: 14px;
  line-height: 1.72;
  color: var(--gray-500);
}

.page-contact .c-office__links {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-contact .c-office__links li {
  border-bottom: 1px solid var(--line-light-soft);
  padding-bottom: 8px;
}

.page-contact .c-office__links a {
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--blue-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}

.page-contact .c-office__links a:hover,
.page-contact .c-office__links a:focus-visible {
  border-bottom-color: var(--blue-500);
}

.page-contact .c-office__rule {
  height: 1px;
  margin-top: clamp(28px, 4vw, 48px);
  background: linear-gradient(90deg, var(--gold-400), rgba(232, 177, 74, 0));
}

@media (min-width: 860px) {
  .page-contact .c-office__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .c-channel:hover,
  .page-contact .c-topic:hover {
    transform: none;
  }
}
<<<END>>>

等等，我漏了标签上的 `data-reveal`。像 `c-topic` 和 `c-channel` 上的 `data-reveal` —— 这些用的是共享的 `data-reveal` 协议，没问题。

还有 `band--grape` —— 它是不是共享类？是，在 global_css_classes 里。

不过 `band--grape` 上的文字颜色可能需要处理一下——我自己的 `.c-coop__title` 和 `.c-coop__text` 已经设置颜色了。没问题。

`eyebrow` 放在 `band--paper` 上——颜色可能默认偏深，我控制不了。应该没事。

另外我用了 `c-fit__tag tag tag--gold` —— 共享的 `tag` 类。没问题。

再检查一下 CSS 里用到的变量：`--line-dark`、`--line-dark-soft`、`--line-light`、`--line-light-soft` —— 都在 `css_variables` 里。`--ease`、`--font-mono`、`--gold-400`、`--grape-300`、`--grape-700`、`--paper-050`、`--ink-900`、`--gray-500`、`--green-500`、`--blue-500`、`--blue-700` —— 都在。

好，没问题。
<main id="main-content" class="page-contact">

  <section class="band band--ink c-hero">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">咨询服务</li>
        </ol>
      </nav>

      <div class="c-hero__layout">
        <div class="c-hero__copy">
          <p class="eyebrow">咨询服务</p>
          <h1 class="c-hero__title">问题说清楚，答复才到位</h1>
          <p class="c-hero__lede">规则对不上、收藏没反应、想谈谈内容合作，都可以直接找人。新葡萄棋牌在工作日 9:00–18:00 让电话和邮箱都有人值守，节假日的留言会在上班后统一处理。先挑一条通道，把事情一次讲明白。</p>
        </div>
        <figure class="c-hero__figure">
          <img class="c-hero__img" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="深紫背景中延展的霓虹光线与葡萄藤局部特写，右侧留出大片暗部">
        </figure>
      </div>

      <div class="c-channels">
        <article class="c-channel" data-reveal>
          <p class="c-channel__idx">通道 01</p>
          <h2 class="c-channel__title">客服邮箱</h2>
          <p class="c-channel__value">info@casual-xinputao.com.cn</p>
          <p class="c-channel__note">适合贴截图、写长说明、需要留存记录的咨询。内容纠错与合作意向走这里最顺。</p>
          <div class="c-channel__actions">
            <button class="btn btn--line copy-btn" type="button" data-copy="info@casual-xinputao.com.cn">复制邮箱</button>
            <span class="c-copy-status" data-copy-status role="status" aria-live="polite"></span>
          </div>
        </article>

        <article class="c-channel" data-reveal>
          <p class="c-channel__idx">通道 02</p>
          <h2 class="c-channel__title">客服电话</h2>
          <p class="c-channel__value">18484059792</p>
          <p class="c-channel__note">适合三言两语说不清、需要来回确认几句的情况。电话接通时把页面名称先报给我们。</p>
          <div class="c-channel__actions">
            <a class="btn btn--line" href="tel:18484059792">直接拨打</a>
            <button class="btn btn--line copy-btn" type="button" data-copy="18484059792">复制号码</button>
            <span class="c-copy-status" data-copy-status role="status" aria-live="polite"></span>
          </div>
        </article>

        <article class="c-channel" data-reveal>
          <p class="c-channel__idx">通道 03</p>
          <h2 class="c-channel__title">联系地址</h2>
          <p class="c-channel__value">上海市浦东新区张江路88号</p>
          <p class="c-channel__note">需要寄送资料或当面递交时使用，来访前请先通过邮箱或电话约好时间。</p>
          <div class="c-channel__actions">
            <button class="btn btn--line copy-btn" type="button" data-copy="上海市浦东新区张江路88号">复制地址</button>
            <span class="c-copy-status" data-copy-status role="status" aria-live="polite"></span>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="band band--paper c-hours">
    <div class="wrap">
      <header class="section__head">
        <p class="section__num">01</p>
        <h2 class="section__title">什么时候来，都有人接着</h2>
        <p class="section__lede">工作日白天是人工值守时段，周末与法定节假日可以先留言，上班后按到达顺序处理。急事打电话，复杂事写邮件，两条路都能走通。</p>
      </header>

      <div class="c-hours__grid">
        <div class="c-hours__clockbox">
          <p class="c-hours__clock">09:00 — 18:00</p>
          <p class="c-hours__clockmeta">周一至周五 · 人工在线</p>
          <p class="c-hours__clocknote">节假日期间邮箱与留言照常接收，上班后统一回复。着急确认的事情，建议直接拨打电话，接通后说明栏目与版本期数，沟通会更快。</p>
        </div>

        <div class="c-hours__fit">
          <div class="c-fit">
            <p class="c-fit__tag tag tag--gold">电话更合适</p>
            <ul class="c-fit__list">
              <li>规则看不明白，需要有人当场解释</li>
              <li>页面打不开或加载异常，想立刻确认</li>
              <li>三两句讲不清、需要来回追问的情况</li>
            </ul>
          </div>
          <div class="c-fit">
            <p class="c-fit__tag tag tag--blue">邮箱更合适</p>
            <ul class="c-fit__list">
              <li>需要附上截图、录屏或大段文字说明</li>
              <li>内容纠错、版本条目的字句问题</li>
              <li>合作洽谈，要留下书面往来记录</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="band band--ink c-topics">
    <div class="wrap">
      <header class="section__head">
        <p class="section__num">02</p>
        <h2 class="section__title">四类问题，各有各的走法</h2>
        <p class="section__lede">先对号入座再提交，能省掉一轮来回确认。每类问题把该带的信息一并说明，我们收到就能直接定位到具体条目。</p>
      </header>

      <div class="c-topics__grid">
        <article class="c-topic" data-reveal>
          <p class="c-topic__num">01</p>
          <h3 class="c-topic__title">内容纠错</h3>
          <p class="c-topic__text">条文与实际对局对不上、术语前后用词不一、页面出现错别字，都属于这一类。写清楚所在栏目和期数，通常比描述问题本身更有用。</p>
          <p class="c-topic__hint">建议附上：栏目名 · 期数 · 原文句子</p>
        </article>

        <article class="c-topic" data-reveal>
          <p class="c-topic__num">02</p>
          <h3 class="c-topic__title">版本与规则疑问</h3>
          <p class="c-topic__text">不确定某条变化从哪一期开始生效，或者新旧版本之间怎么衔接，可以直接问。说清你正在玩的玩法，以及页面上看到的期数即可。</p>
          <p class="c-topic__hint">建议附上：玩法名称 · 当前期数</p>
        </article>

        <article class="c-topic" data-reveal>
          <p class="c-topic__num">03</p>
          <h3 class="c-topic__title">收藏与回放问题</h3>
          <p class="c-topic__text">收藏没出现、换了浏览器后收藏不见了、回放加载卡住，这些情况多半和本地存储有关。告知手机型号与浏览器版本，我们更容易复现。</p>
          <p class="c-topic__hint">建议附上：设备型号 · 浏览器 · 操作步骤</p>
        </article>

        <article class="c-topic" data-reveal>
          <p class="c-topic__num">04</p>
          <h3 class="c-topic__title">合作与共建</h3>
          <p class="c-topic__text">栏目共建、专题约稿、术语库对接、回放素材授权，都可以从邮箱进来。写明你的身份、想合作的栏目与预期形式，会转给对应同事跟进。</p>
          <p class="c-topic__hint">建议附上：机构身份 · 目标栏目 · 合作形式</p>
        </article>
      </div>
    </div>
  </section>

  <section class="band band--paper c-note">
    <div class="wrap">
      <div class="c-note__layout">
        <div class="c-note__body">
          <p class="eyebrow">留言怎么写</p>
          <h2 class="c-note__title">四行字，把问题交到能处理的人手上</h2>
          <p class="c-note__lede">一封结构清楚的邮件，往往一次就能解决。把下面四项写全，剩下的交给我们。</p>

          <ol class="c-note__list">
            <li>
              <span class="c-note__idx">01</span>
              <span class="c-note__cell"><strong>怎么称呼你</strong>随便一个称呼就行，方便回信时开头不尴尬。</span>
            </li>
            <li>
              <span class="c-note__idx">02</span>
              <span class="c-note__cell"><strong>回信方式</strong>留一个能收到回复的邮箱或手机号，工作日白天回复更及时。</span>
            </li>
            <li>
              <span class="c-note__idx">03</span>
              <span class="c-note__cell"><strong>问题出在哪</strong>栏目名、版本期数、页面标题，越具体定位越快，能截图就附上。</span>
            </li>
            <li>
              <span class="c-note__idx">04</span>
              <span class="c-note__cell"><strong>你希望怎么处理</strong>是想改掉某句话、补一条说明，还是需要一份书面回复，写清楚就好。</span>
            </li>
          </ol>

          <div class="c-note__actions">
            <button class="btn btn--primary copy-btn" type="button" data-copy="info@casual-xinputao.com.cn">复制客服邮箱</button>
            <span class="c-copy-status" data-copy-status role="status" aria-live="polite"></span>
            <a class="c-note__link" href="/guide/">第一次来？先看使用指南</a>
          </div>
        </div>

        <figure class="c-note__figure">
          <img class="c-note__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="由细线与方形节点组成的抽象通信网格，浅紫低对比，适合作为表单区背景" loading="lazy" decoding="async">
          <figcaption class="c-note__caption">写清位置与期数，回复会更快</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="band band--grape c-coop">
    <div class="wrap">
      <div class="c-coop__grid">
        <div class="c-coop__col">
          <p class="c-coop__num">03</p>
          <h2 class="c-coop__title">合作怎么谈</h2>
          <p class="c-coop__text">我们长期和内容方、社区维护者、赛事组织方打交道。常见的几种合作形式是栏目共建、专题约稿、术语库对接，以及回放素材的授权使用。</p>
          <p class="c-coop__text">来信时说明机构名称、希望对接的栏目、大概的时间安排，我们在工作日排期后回复。涉及版权与署名的部分，会用书面形式确认后再推进。</p>
        </div>

        <div class="c-coop__col">
          <p class="c-coop__num">04</p>
          <h2 class="c-coop__title">纠错我们会怎么处理</h2>
          <p class="c-coop__text">收到纠错后，我们先在对应期数里复现问题，确认是真错还是表述差异；确认需要修改的，会在下一次更新时一并调整，并在同一期数标注改动时间。</p>
          <p class="c-coop__text">为了让定位一次到位，请在来信里附上栏目名称、版本期数，以及你看到的那句原文。如果同一处在多个栏目出现，一并列出会节省不少时间。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="band band--paper c-office">
    <div class="wrap">
      <div class="c-office__grid">
        <div class="c-office__block">
          <p class="eyebrow">联系地址</p>
          <p class="c-office__value">上海市浦东新区张江路88号</p>
          <p class="c-office__note">寄送资料或需要当面递交时使用，来访前请先通过邮箱或电话约好时间，避免白跑一趟。</p>
        </div>

        <div class="c-office__block">
          <p class="eyebrow">备案信息</p>
          <p class="c-office__value">沪ICP备64869812号</p>
          <p class="c-office__note">对外公示的站点备案编号，合作方核对主体信息时可直接使用。</p>
        </div>

        <div class="c-office__block">
          <p class="eyebrow">其他入口</p>
          <ul class="c-office__links">
            <li><a href="/">返回首页，查看当日版本与期数</a></li>
            <li><a href="/guide/">使用指南，处理查阅与收藏的常见问题</a></li>
            <li><a href="/data-privacy/">数据与隐私，了解本地收藏与访问日志</a></li>
          </ul>
        </div>
      </div>

      <div class="c-office__rule" aria-hidden="true"></div>
    </div>
  </section>

</main>

.page-contact .c-hero {
  padding-block: clamp(20px, 4vw, 44px) clamp(36px, 5vw, 64px);
  overflow: hidden;
}

.page-contact .c-hero .breadcrumb a {
  color: var(--grape-300);
}

.page-contact .c-hero .breadcrumb li[aria-current="page"] {
  color: rgba(247, 244, 250, 0.62);
}

.page-contact .c-hero .eyebrow {
  color: var(--grape-300);
}

.page-contact .c-hero__layout {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(18px, 3vw, 30px);
}

.page-contact .c-hero__title {
  margin: 10px 0 0;
  font-size: clamp(30px, 6.4vw, 56px);
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--paper-050);
  max-width: 15em;
}

.page-contact .c-hero__lede {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(247, 244, 250, 0.78);
}

.page-contact .c-hero__figure {
  margin: 0;
}

.page-contact .c-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: 1px solid var(--line-dark);
}

@media (min-width: 900px) {
  .page-contact .c-hero__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

.page-contact .c-channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(24px, 4vw, 42px);
}

.page-contact .c-channel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line-dark);
  border-top: 2px solid var(--grape-700);
  background: linear-gradient(160deg, rgba(107, 46, 138, 0.26), rgba(10, 7, 16, 0.55));
  transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}

.page-contact .c-channel:hover {
  transform: translateY(-4px);
  border-color: var(--grape-300);
}

.page-contact .c-channel__idx {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold-400);
}

.page-contact .c-channel__title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--paper-050);
}

.page-contact .c-channel__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1.5;
  color: var(--paper-050);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-contact .c-channel__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(247, 244, 250, 0.66);
}

.page-contact .c-channel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.page-contact .c-copy-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-500);
  min-height: 1em;
}

@media (min-width: 768px) {
  .page-contact .c-channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.page-contact .c-hours {
  padding-block: clamp(36px, 5vw, 64px);
}

.page-contact .c-hours__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(22px, 3.4vw, 34px);
}

.page-contact .c-hours__clockbox {
  border-left: 3px solid var(--grape-700);
  padding-left: 18px;
}

.page-contact .c-hours__clock {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--grape-700);
}

.page-contact .c-hours__clockmeta {
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

.page-contact .c-hours__clocknote {
  margin: 14px 0 0;
  max-width: 32em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-900);
}

.page-contact .c-hours__fit {
  display: grid;
  gap: 16px;
}

.page-contact .c-fit {
  border: 1px solid var(--line-light);
  padding: 18px 18px 16px;
  background: rgba(107, 46, 138, 0.04);
}

.page-contact .c-fit__tag {
  margin: 0 0 10px;
}

.page-contact .c-fit__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-900);
}

@media (min-width: 860px) {
  .page-contact .c-hours__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .page-contact .c-hours__fit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-contact .c-topics {
  padding-block: clamp(36px, 5vw, 64px);
}

.page-contact .c-topics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(22px, 3.4vw, 34px);
}

.page-contact .c-topic {
  border: 1px solid var(--line-dark);
  padding: 20px 18px 18px;
  background: rgba(247, 244, 250, 0.03);
  transition: transform 220ms var(--ease), background-color 220ms var(--ease);
}

.page-contact .c-topic:hover {
  transform: translateY(-4px);
  background: rgba(107, 46, 138, 0.22);
}

.page-contact .c-topic__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-400);
}

.page-contact .c-topic__title {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 900;
  color: var(--paper-050);
}

.page-contact .c-topic__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(247, 244, 250, 0.72);
}

.page-contact .c-topic__hint {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-dark-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--grape-300);
}

@media (min-width: 720px) {
  .page-contact .c-topics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

.page-contact .c-note {
  padding-block: clamp(40px, 6vw, 80px);
}

.page-contact .c-note__layout {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-contact .c-note__title {
  margin: 10px 0 0;
  font-size: clamp(24px, 4.6vw, 38px);
  line-height: 1.24;
  font-weight: 900;
  color: var(--ink-900);
  max-width: 18em;
}

.page-contact .c-note__lede {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-500);
}

.page-contact .c-note__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}

.page-contact .c-note__list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light-soft);
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-500);
}

.page-contact .c-note__idx {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--grape-700);
  padding-top: 3px;
}

.page-contact .c-note__cell strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-900);
  margin-bottom: 2px;
}

.page-contact .c-note__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.page-contact .c-note__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.page-contact .c-note__figure {
  margin: 0;
  border: 1px solid var(--line-light);
  padding: 10px;
  background: var(--paper-050);
}

.page-contact .c-note__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-contact .c-note__caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gray-500);
}

@media (min-width: 900px) {
  .page-contact .c-note__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.page-contact .c-coop {
  padding-block: clamp(38px, 5.5vw, 70px);
}

.page-contact .c-coop__grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-contact .c-coop__num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold-400);
}

.page-contact .c-coop__title {
  margin: 10px 0 0;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.28;
  font-weight: 900;
  color: var(--paper-050);
}

.page-contact .c-coop__text {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(247, 244, 250, 0.82);
}

@media (min-width: 860px) {
  .page-contact .c-coop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-contact .c-office {
  padding-block: clamp(36px, 5vw, 64px);
}

.page-contact .c-office__grid {
  display: grid;
  gap: clamp(22px, 3.4vw, 36px);
}

.page-contact .c-office__value {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(16px, 3.8vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

.page-contact .c-office__note {
  margin: 10px 0 0;
  max-width: 32em;
  font-size: 14px;
  line-height: 1.72;
  color: var(--gray-500);
}

.page-contact .c-office__links {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-contact .c-office__links li {
  border-bottom: 1px solid var(--line-light-soft);
  padding-bottom: 8px;
}

.page-contact .c-office__links a {
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--blue-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}

.page-contact .c-office__links a:hover,
.page-contact .c-office__links a:focus-visible {
  border-bottom-color: var(--blue-500);
}

.page-contact .c-office__rule {
  height: 1px;
  margin-top: clamp(28px, 4vw, 48px);
  background: linear-gradient(90deg, var(--gold-400), rgba(232, 177, 74, 0));
}

@media (min-width: 860px) {
  .page-contact .c-office__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .c-channel:hover,
  .page-contact .c-topic:hover {
    transform: none;
  }
}