:root {
  --ink: #1a2332;
  --paper: #f4f2ed;
  --span: #b8432a;
  --steel: #5c6974;
  --line: #d4cfc6;
  --field: #ebe7e0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Source Sans 3", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.zh, .en { display: none; }
html[data-lang="zh"] .zh { display: inline; }
html[data-lang="en"] .en { display: inline; }
.bar, main, footer { width: min(960px, calc(100% - 40px)); margin: 0 auto; }
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
}
.mark { font-family: Commissioner, sans-serif; font-weight: 620; letter-spacing: -0.03em; text-decoration: none; }
nav { display: flex; gap: 18px; align-items: center; }
nav a { color: var(--steel); text-decoration: none; font-size: 15px; }
#lang {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.hero { padding: 48px 0 24px; }
.kicker { margin: 0 0 12px; color: var(--span); font-family: Commissioner, sans-serif; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
h1 {
  margin: 0;
  font-family: Commissioner, sans-serif;
  font-weight: 620;
  font-size: clamp(40px, 6vw, 68px);
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 14ch;
}
.lead { max-width: 38rem; color: var(--steel); font-size: 20px; }
.span { margin: 36px 0 0; }
.span svg { width: 100%; height: auto; }
.span line { stroke: var(--span); stroke-width: 1.5; }
.span text { fill: var(--ink); font-family: Commissioner, sans-serif; font-size: 13px; letter-spacing: 0.18em; text-anchor: middle; }
.span figcaption { display: flex; justify-content: space-between; color: var(--steel); font-size: 14px; }
.work, .way, .contact { padding: 28px 0 8px; border-top: 1px solid var(--line); }
h2 { font-family: Commissioner, sans-serif; font-weight: 620; font-size: 28px; letter-spacing: -0.03em; }
.work ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work h3 { margin: 0 0 8px; font-family: Commissioner, sans-serif; font-size: 20px; }
.work p, .supports p { margin: 0; color: var(--steel); }
.supports { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.label { color: var(--span) !important; font-family: Commissioner, sans-serif; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px !important; }
.mail { font-family: Commissioner, sans-serif; font-size: 28px; letter-spacing: -0.03em; }
footer { display: flex; justify-content: space-between; padding: 28px 0 40px; color: var(--steel); font-size: 14px; }
:focus-visible { outline: 2px solid var(--span); outline-offset: 3px; }
@media (max-width: 720px) {
  .work ol, .supports { grid-template-columns: 1fr; }
  nav a:not(:last-of-type) { display: none; }
}
.wrap { width: min(720px, calc(100% - 40px)); margin: 32px auto 64px; }
.wrap h1 { font-size: 40px; max-width: none; }
.wrap article, .wrap form { border-top: 1px solid var(--line); padding: 16px 0; }
.wrap label { display: block; margin: 8px 0; color: var(--steel); }
.wrap input, .wrap select, .wrap button {
  font: inherit;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.wrap button { background: var(--ink); color: var(--paper); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}