.page-contact {
  --contact-gap: clamp(20px, 3.4vw, 44px);
  --contact-cut: 24px;
}

.page-contact .breadcrumbs {
  padding-top: clamp(20px, 3vw, 34px);
}

.page-contact .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--steel-400);
}

.page-contact .breadcrumbs li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.page-contact .breadcrumbs li::after {
  content: "/";
  color: var(--ink-700);
}

.page-contact .breadcrumbs li:last-child::after {
  content: none;
}

.page-contact .breadcrumbs a {
  color: var(--steel-400);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.page-contact .breadcrumbs a:hover,
.page-contact .breadcrumbs a:focus-visible {
  color: var(--signal);
}

/* 首屏 */
.page-contact .contact-hero {
  padding-block: clamp(26px, 4.4vw, 60px) clamp(24px, 3.6vw, 48px);
  display: grid;
  gap: 16px;
  max-width: 46rem;
}

.page-contact .contact-hero .eyebrow {
  margin: 0;
  color: var(--track);
}

.page-contact .contact-hero .display-1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 7.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--mist-100);
}

.page-contact .contact-hero .lead {
  margin: 0;
  max-width: 34em;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.78;
  color: var(--steel-400);
}

/* 联系方式面板 */
.page-contact .desk {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .desk__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: stretch;
}

.page-contact .desk__lines .eyebrow {
  margin: 0 0 4px;
  color: var(--signal);
}

.page-contact .contact-lines {
  margin: 0;
  display: grid;
}

.page-contact .contact-line {
  padding-block: clamp(16px, 2.2vw, 24px);
  border-top: 1px solid var(--ink-700);
}

.page-contact .contact-line:first-child {
  border-top: 0;
  padding-top: 12px;
}

.page-contact .contact-line:last-child {
  border-bottom: 1px solid var(--ink-700);
}

.page-contact .contact-line dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-400);
}

.page-contact .contact-line dd {
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
}

.page-contact .contact-line__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(17px, 3vw, 28px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--mist-100);
  overflow-wrap: anywhere;
}

.page-contact .contact-line__value--addr {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.62;
  color: var(--mist-100);
}

.page-contact .contact-line__note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--steel-400);
  max-width: 30em;
}

.page-contact .desk__media {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-cut)), calc(100% - var(--contact-cut)) 100%, 0 100%);
}

.page-contact .desk__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.05) brightness(0.88);
}

.page-contact .desk__caption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--mist-100);
  opacity: 0.82;
}

/* 问题分流 */
.page-contact .routing {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .routing .display-2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.14;
  color: var(--mist-100);
}

.page-contact .routing__lead {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel-400);
}

.page-contact .routing__grid {
  margin-top: clamp(20px, 2.8vw, 34px);
  display: grid;
  gap: 1px;
  background: var(--ink-700);
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}

.page-contact .routing-card {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--ink-800);
  display: flex;
  flex-direction: column;
  gap: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-contact .routing-card:hover,
.page-contact .routing-card:focus-within {
  background: var(--ink-700);
  transform: translateY(-2px);
}

.page-contact .routing-card__no {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--track);
}

.page-contact .routing-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.2;
  color: var(--mist-100);
}

.page-contact .routing-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--steel-400);
}

.page-contact .routing-card__ask {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-700);
  font-size: 13px;
  line-height: 1.72;
  color: var(--steel-400);
}

.page-contact .routing-card__channel {
  font-family: var(--font-mono);
  color: var(--signal);
}

/* 怎么写清 */
.page-contact .write {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .write__grid {
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .write .display-2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.16;
  color: var(--mist-100);
}

.page-contact .write__lead {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--steel-400);
}

.page-contact .checklist {
  list-style: none;
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  padding: 0;
  display: grid;
}

.page-contact .checklist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: clamp(13px, 1.8vw, 17px);
  border-bottom: 1px solid var(--ink-700);
  font-size: 15px;
  line-height: 1.74;
  color: var(--mist-100);
}

.page-contact .checklist li:first-child {
  border-top: 1px solid var(--ink-700);
}

.page-contact .checklist li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  border: 1px solid var(--teal-700);
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
}

.page-contact .write__tip {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel-400);
}

/* 邮件示例 */
.page-contact .sample {
  background: var(--parchment);
  color: var(--ink-900);
  padding: clamp(20px, 2.8vw, 34px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-cut)), calc(100% - var(--contact-cut)) 100%, 0 100%);
  align-self: start;
}

.page-contact .sample__label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.page-contact .sample__subject {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(6, 12, 22, 0.18);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.62;
  color: var(--ink-900);
}

.page-contact .sample__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-900);
}

.page-contact .sample__foot {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(6, 12, 22, 0.66);
}

/* 合作 */
.page-contact .coop {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .coop__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: start;
}

.page-contact .coop .display-2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.16;
  color: var(--mist-100);
}

.page-contact .coop p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-contact .coop__list {
  border-top: 2px solid var(--teal-700);
  padding-top: 16px;
}

.page-contact .coop__list-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

.page-contact .coop__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .coop__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--mist-100);
}

.page-contact .coop__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--track);
}

/* 回复节奏 */
.page-contact .rhythm {
  padding-block: 0 clamp(28px, 4vw, 56px);
}

.page-contact .rhythm__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: start;
}

.page-contact .rhythm .display-2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.16;
  color: var(--mist-100);
}

.page-contact .rhythm p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-contact .timeruler {
  margin-top: clamp(18px, 2.4vw, 26px);
}

.page-contact .timeruler__label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist-100);
}

.page-contact .timeruler__track {
  display: block;
  height: 6px;
  background: var(--ink-700);
  overflow: hidden;
}

.page-contact .timeruler__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--teal-700), var(--signal));
}

.page-contact .timeruler__marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-400);
}

.page-contact .rhythm__media {
  margin: 0;
  overflow: hidden;
  background: var(--ink-800);
}

.page-contact .rhythm__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04) brightness(0.9);
}

.page-contact .rhythm__caption {
  padding: 10px 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-400);
}

/* 收束 */
.page-contact .closing {
  padding-block: 0 clamp(30px, 4vw, 56px);
}

.page-contact .closing .slash-rule {
  margin-bottom: 16px;
}

.page-contact .closing__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: baseline;
}

.page-contact .closing__mark {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--steel-400);
}

.page-contact .closing__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
}

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

  .page-contact .write__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .coop__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .page-contact .rhythm__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .page-contact .rhythm__media {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 1000px) {
  .page-contact .desk__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
  }

  .page-contact .desk__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .page-contact .routing__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-contact .contact-hero {
    max-width: 50rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .routing-card {
    transition: none;
  }

  .page-contact .routing-card:hover,
  .page-contact .routing-card:focus-within {
    transform: none;
  }
}
<<<END>>>

等等，我把结束标记写错了。输出要求里只有一个 ``，然后 ``。末尾不应该有 `<<<END>>>`。我得确保输出里没有这种东西。

而且我还得再检查一下：为了可访问性，是不是用了 `aria-current="page"` 来给当前导航项做标记——不过那是 site-header 那边的事。这里没问题。

另外，我还得再确认一下 `.slash-rule` 这个共享类——应该会渲染成一条斜线。这没问题。

还有一点：`contact-line__value--addr` 已经定义过了。没问题。

再检查一下 `--contact-cut` 是在 `.page-contact` 作用域内定义的……对。

另外我需要确认没有选择器泄漏到 `.page-contact` 外面。所有选择器都以 `.page-contact` 开头。`.page-contact .closing .slash-rule` 也一样——没问题。

好了。最后再确认一下面包屑的 `li::after` 斜杠分隔符——问题不大。

现在输出最终答案，不要 `<<<END>>>`。
<main id="main-content" class="page-contact">
  <div class="shell">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">首页</a></li>
        <li><a href="/consult/" aria-current="page">咨询中心</a></li>
      </ol>
    </nav>

    <section class="section contact-hero">
      <p class="eyebrow">服务台 · 人工处理</p>
      <h1 class="display-1">写清楚问题，<br>回复就快一步</h1>
      <p class="lead">内容纠错、同步异常、账号订阅、合作洽谈，四类事各有各的入口。把页面链接和截图一起附上，FH体育 的客服与内容团队会在工作日的 09:00 到 18:00 之间，按收到的顺序逐一回复。</p>
    </section>

    <section class="section desk" aria-labelledby="desk-title">
      <div class="desk__grid">
        <div class="desk__lines">
          <h2 id="desk-title" class="eyebrow">联系方式</h2>
          <dl class="contact-lines">
            <div class="contact-line">
              <dt>客服邮箱</dt>
              <dd>
                <span class="contact-line__value">info@fh-app-cn.com.cn</span>
                <span class="contact-line__note">赛程同步与资料库检索的问题，请附页面链接和截图，便于快速定位。</span>
              </dd>
            </div>
            <div class="contact-line">
              <dt>客服电话</dt>
              <dd>
                <span class="contact-line__value">17912812559</span>
                <span class="contact-line__note">工作日 09:00–18:00 有人接听，适合三句话说不清、需要当面确认的情况。</span>
              </dd>
            </div>
            <div class="contact-line">
              <dt>联系地址</dt>
              <dd>
                <span class="contact-line__value contact-line__value--addr">浙江省杭州市滨江区江虹路1750号润和信雅达创意中心3幢12层</span>
              </dd>
            </div>
          </dl>
        </div>
        <figure class="desk__media">
          <img src="{zhanqunpic:h:800w:1600}" width="1600" height="800" alt="杭州滨江片区傍晚的城市天际线与江面灯光，整体呈冷蓝色调">
          <figcaption class="desk__caption">傍晚的杭州滨江片区，江面灯光与楼体轮廓</figcaption>
        </figure>
      </div>
    </section>

    <section class="section routing" aria-labelledby="routing-title">
      <h2 id="routing-title" class="display-2">你的问题属于哪一类</h2>
      <p class="routing__lead">先对上类型，再发邮件或打电话，能少一个来回。</p>
      <div class="routing__grid">
        <article class="routing-card">
          <p class="routing-card__no">01</p>
          <h3 class="routing-card__title">内容纠错</h3>
          <p class="routing-card__desc">战报里的比分、轮次表述，或资料库条目的规则说明、来源标注出现偏差。</p>
          <p class="routing-card__ask">渠道：<span class="routing-card__channel">客服邮箱</span><br>请附：出错的页面链接、条目名称、截图</p>
        </article>
        <article class="routing-card">
          <p class="routing-card__no">02</p>
          <h3 class="routing-card__title">同步异常</h3>
          <p class="routing-card__desc">赛程状态色标与页面顶部提示不一致，或某一轮数据迟迟没有出现。</p>
          <p class="routing-card__ask">渠道：<span class="routing-card__channel">客服邮箱</span><br>请附：页面链接、同步轮次、状态点截图</p>
        </article>
        <article class="routing-card">
          <p class="routing-card__no">03</p>
          <h3 class="routing-card__title">账号与订阅</h3>
          <p class="routing-card__desc">关注项目、赛程提醒、战报订阅这三项功能用不起来，或提醒没有按时到达。</p>
          <p class="routing-card__ask">渠道：<span class="routing-card__channel">邮箱或电话</span><br>请附：注册邮箱、设备型号、出问题的操作步骤</p>
        </article>
        <article class="routing-card">
          <p class="routing-card__no">04</p>
          <h3 class="routing-card__title">合作与内容协作</h3>
          <p class="routing-card__desc">赛事主办方、场馆运营方、高校体育部门想把赛程与资料接进来。</p>
          <p class="routing-card__ask">渠道：<span class="routing-card__channel">客服邮箱</span><br>请附：单位名称、赛事名称与级别、可提供的资料清单</p>
        </article>
      </div>
    </section>

    <section class="section write" aria-labelledby="write-title">
      <div class="write__grid">
        <div class="write__left">
          <h2 id="write-title" class="display-2">四样东西写全，处理就不会来回问</h2>
          <p class="write__lead">一封信息完整的邮件，往往一次就能推进到底。缺了哪一样，我们都得回头再问一遍。</p>
          <ul class="checklist">
            <li>页面链接：把出问题的那一页地址整条贴上，别只写栏目名。</li>
            <li>轮次或时间戳：说明是第几轮同步、大概几点几分看到的。</li>
            <li>设备与浏览器：手机型号或电脑系统，加上浏览器名称与版本。</li>
            <li>截图：截到状态点和数字，一图胜过三行描述。</li>
          </ul>
          <p class="write__tip">着急的时候，也可以先翻一下<a class="link-track" href="/knowledge/">知识中心</a>，常见检索与同步问题那里有现成答案。</p>
        </div>
        <div class="sample">
          <p class="sample__label">照着写一封</p>
          <p class="sample__subject">主题：赛程状态与页面提示不一致 · 第 12 轮</p>
          <p class="sample__body">你好，我在赛事日志的赛程列表里看到某场省级赛事标为待同步，但页面顶部显示这一轮已经同步完成。<br>页面链接：/journal/<br>同步轮次：第 12 轮<br>看到的时间：下午 16:20 左右<br>设备：安卓手机，Chrome 浏览器<br>截图已附在附件里，麻烦帮忙看一下，谢谢。</p>
          <p class="sample__foot">把主题写清类型和轮次，我们就能直接分给对应的编辑。</p>
        </div>
      </div>
    </section>

    <section class="section coop" aria-labelledby="coop-title">
      <div class="coop__grid">
        <div>
          <h2 id="coop-title" class="display-2">合作与内容协作</h2>
          <p>我们已与 120 余家赛事主办方、场馆和高校体育部门建立内容协作关系，把赛事日程、场馆信息与历史战绩整理进赛程中心和资料库。</p>
          <p>如果你手上有成体系的赛事资源，欢迎从邮箱进来。邮件主题建议写成「合作 · 单位名称 · 赛事名称」，正文里说清楚赛事级别、举办城市、参赛规模，以及你能提供的资料范围。</p>
          <p>想先了解我们的内容团队怎么分工、四个版本迭代了什么，可以看<a class="link-track" href="/mission/">品牌与使命</a>。</p>
        </div>
        <div class="coop__list">
          <p class="coop__list-title">协作方向</p>
          <ul>
            <li>赛事日程同步：省级以上赛事的赛程、轮次与场地安排</li>
            <li>场馆资料补全：场馆位置、容量、交通与开放时段</li>
            <li>历史战绩归档：往届赛事结果与项目纪录</li>
            <li>专题内容共建：围绕特定项目或赛季的系列报道</li>
          </ul>
        </div>
      </div>
    </section>

    <section class="section rhythm" aria-labelledby="rhythm-title">
      <div class="rhythm__grid">
        <div>
          <h2 id="rhythm-title" class="display-2">工作日的处理顺序</h2>
          <p>工作日的 09:00 到 18:00 是我们受理咨询的时段。内容纠错与同步异常排在前面，因为它们直接影响你正在读的页面；账号与订阅问题由客服跟进；合作洽谈需要转给内容团队，回复会慢一些。</p>
          <p>周末与法定假日提交的信息，会在下一个工作日排入队列。所有咨询按收到时间排序，处理进度会随回复一并告诉你。</p>
          <div class="timeruler">
            <p class="timeruler__label mono">受理时段 09:00 — 18:00</p>
            <span class="timeruler__track" aria-hidden="true"><span class="timeruler__fill"></span></span>
            <span class="timeruler__marks" aria-hidden="true">
              <span>09:00</span><span>12:00</span><span>15:00</span><span>18:00</span>
            </span>
          </div>
        </div>
        <figure class="rhythm__media">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" loading="lazy" decoding="async" alt="四类咨询问题按受理顺序分流的流程示意，用色块与箭头表达先后的处理关系">
          <figcaption class="rhythm__caption">四类问题在工作日内的处理先后</figcaption>
        </figure>
      </div>
    </section>

    <section class="section closing">
      <div class="slash-rule" aria-hidden="true"></div>
      <div class="closing__row">
        <span class="closing__mark mono">FH体育 · 浙ICP备72839960号</span>
        <span class="closing__links">
          <a class="link-track" href="/data-protection/">数据保护说明</a>
          <a class="link-track" href="/terms/">使用条款</a>
        </span>
      </div>
    </section>
  </div>
</main>

.page-contact {
  --contact-gap: clamp(20px, 3.4vw, 44px);
  --contact-cut: 24px;
}

.page-contact .breadcrumbs {
  padding-top: clamp(20px, 3vw, 34px);
}

.page-contact .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--steel-400);
}

.page-contact .breadcrumbs li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.page-contact .breadcrumbs li::after {
  content: "/";
  color: var(--ink-700);
}

.page-contact .breadcrumbs li:last-child::after {
  content: none;
}

.page-contact .breadcrumbs a {
  color: var(--steel-400);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.page-contact .breadcrumbs a:hover,
.page-contact .breadcrumbs a:focus-visible {
  color: var(--signal);
}

.page-contact .contact-hero {
  padding-block: clamp(26px, 4.4vw, 60px) clamp(24px, 3.6vw, 48px);
  display: grid;
  gap: 16px;
  max-width: 46rem;
}

.page-contact .contact-hero .eyebrow {
  margin: 0;
  color: var(--track);
}

.page-contact .contact-hero .display-1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 7.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--mist-100);
}

.page-contact .contact-hero .lead {
  margin: 0;
  max-width: 34em;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.78;
  color: var(--steel-400);
}

.page-contact .desk {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .desk__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: stretch;
}

.page-contact .desk__lines .eyebrow {
  margin: 0 0 4px;
  color: var(--signal);
}

.page-contact .contact-lines {
  margin: 0;
  display: grid;
}

.page-contact .contact-line {
  padding-block: clamp(16px, 2.2vw, 24px);
  border-top: 1px solid var(--ink-700);
}

.page-contact .contact-line:first-child {
  border-top: 0;
  padding-top: 12px;
}

.page-contact .contact-line:last-child {
  border-bottom: 1px solid var(--ink-700);
}

.page-contact .contact-line dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-400);
}

.page-contact .contact-line dd {
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
}

.page-contact .contact-line__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(17px, 3vw, 28px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--mist-100);
  overflow-wrap: anywhere;
}

.page-contact .contact-line__value--addr {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.62;
}

.page-contact .contact-line__note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--steel-400);
  max-width: 30em;
}

.page-contact .desk__media {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-cut)), calc(100% - var(--contact-cut)) 100%, 0 100%);
}

.page-contact .desk__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.05) brightness(0.88);
}

.page-contact .desk__caption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mist-100);
  opacity: 0.82;
}

.page-contact .routing {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .routing .display-2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.14;
  color: var(--mist-100);
}

.page-contact .routing__lead {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel-400);
}

.page-contact .routing__grid {
  margin-top: clamp(20px, 2.8vw, 34px);
  display: grid;
  gap: 1px;
  background: var(--ink-700);
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}

.page-contact .routing-card {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--ink-800);
  display: flex;
  flex-direction: column;
  gap: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.page-contact .routing-card:hover,
.page-contact .routing-card:focus-within {
  background: var(--ink-700);
  transform: translateY(-2px);
}

.page-contact .routing-card__no {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--track);
}

.page-contact .routing-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.2;
  color: var(--mist-100);
}

.page-contact .routing-card__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--steel-400);
}

.page-contact .routing-card__ask {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-700);
  font-size: 13px;
  line-height: 1.72;
  color: var(--steel-400);
}

.page-contact .routing-card__channel {
  font-family: var(--font-mono);
  color: var(--signal);
}

.page-contact .write {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .write__grid {
  display: grid;
  gap: var(--contact-gap);
}

.page-contact .write .display-2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.16;
  color: var(--mist-100);
}

.page-contact .write__lead {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--steel-400);
}

.page-contact .checklist {
  list-style: none;
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  padding: 0;
  display: grid;
}

.page-contact .checklist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: clamp(13px, 1.8vw, 17px);
  border-bottom: 1px solid var(--ink-700);
  font-size: 15px;
  line-height: 1.74;
  color: var(--mist-100);
}

.page-contact .checklist li:first-child {
  border-top: 1px solid var(--ink-700);
}

.page-contact .checklist li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  border: 1px solid var(--teal-700);
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
}

.page-contact .write__tip {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--steel-400);
}

.page-contact .sample {
  background: var(--parchment);
  color: var(--ink-900);
  padding: clamp(20px, 2.8vw, 34px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--contact-cut)), calc(100% - var(--contact-cut)) 100%, 0 100%);
  align-self: start;
}

.page-contact .sample__label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.page-contact .sample__subject {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(6, 12, 22, 0.18);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.62;
}

.page-contact .sample__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
}

.page-contact .sample__foot {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(6, 12, 22, 0.66);
}

.page-contact .coop {
  padding-block: 0 clamp(30px, 4.6vw, 64px);
}

.page-contact .coop__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: start;
}

.page-contact .coop .display-2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.16;
  color: var(--mist-100);
}

.page-contact .coop p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-contact .coop__list {
  border-top: 2px solid var(--teal-700);
  padding-top: 16px;
}

.page-contact .coop__list-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

.page-contact .coop__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-contact .coop__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--mist-100);
}

.page-contact .coop__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--track);
}

.page-contact .rhythm {
  padding-block: 0 clamp(28px, 4vw, 56px);
}

.page-contact .rhythm__grid {
  display: grid;
  gap: var(--contact-gap);
  align-items: start;
}

.page-contact .rhythm .display-2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.16;
  color: var(--mist-100);
}

.page-contact .rhythm p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--steel-400);
}

.page-contact .timeruler {
  margin-top: clamp(18px, 2.4vw, 26px);
}

.page-contact .timeruler__label {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mist-100);
}

.page-contact .timeruler__track {
  display: block;
  height: 6px;
  background: var(--ink-700);
  overflow: hidden;
}

.page-contact .timeruler__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--teal-700), var(--signal));
}

.page-contact .timeruler__marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-400);
}

.page-contact .rhythm__media {
  margin: 0;
  overflow: hidden;
  background: var(--ink-800);
}

.page-contact .rhythm__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04) brightness(0.9);
}

.page-contact .rhythm__caption {
  padding: 10px 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-400);
}

.page-contact .closing {
  padding-block: 0 clamp(30px, 4vw, 56px);
}

.page-contact .closing .slash-rule {
  margin-bottom: 16px;
}

.page-contact .closing__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: baseline;
}

.page-contact .closing__mark {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--steel-400);
}

.page-contact .closing__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
}

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

  .page-contact .write__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-contact .coop__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .page-contact .rhythm__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .page-contact .rhythm__media {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 1000px) {
  .page-contact .desk__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
  }

  .page-contact .desk__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .page-contact .routing__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-contact .contact-hero {
    max-width: 50rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .routing-card {
    transition: none;
  }

  .page-contact .routing-card:hover,
  .page-contact .routing-card:focus-within {
    transform: none;
  }
}