:root {
  color-scheme: light;
  --ink: #17191c;
  --muted: #31363c;
  --bar: #303030;
  --footer: #303438;
  --footer-text: #b6b8bb;
  --paper: #fff;
  --content-width: 1380px;
  --font: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; color: var(--ink); background: var(--paper); font-family: var(--font); }
a { color: inherit; text-decoration: none; }
.site-header { flex: none; min-height: 42px; color: #fff; background: var(--bar); }
.header-inner { width: min(var(--content-width), calc(100% - 15vw)); min-height: 42px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand, nav a { font-size: 15px; line-height: 1; }
.brand { font-weight: 600; letter-spacing: .04em; transition: color .16s ease; }
.brand:hover { color: #c8d6ea; }
nav a { padding: 13px 0; transition: color .16s ease; }
nav a:hover { color: #c8d6ea; }
a:active { opacity: .75; }
.intro { width: min(var(--content-width), calc(100% - 15vw)); flex: 1; min-height: 670px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, .65fr) minmax(0, 1.35fr); align-items: center; gap: clamp(28px, 3vw, 50px); padding: 52px 0 60px; }
.intro-copy { max-width: 430px; padding: 105px 0 0 16px; align-self: start; }
h1 { margin: 0 0 36px; color: #111; font-size: clamp(23px, 2.1vw, 27px); line-height: 1.35; font-weight: 700; }
.intro-copy > p { margin: 0; color: #16181b; font-size: 16px; line-height: 2.05; }
.contact { display: grid; justify-items: start; gap: 8px; margin-top: 30px; }
.contact-label { margin: 0; color: #16181b; font-size: 15px; font-weight: 600; }
.contact-link { color: #16181b; font-size: 14px; line-height: 1.6; transition: color .16s ease; }
.contact-link:hover { color: #496992; text-decoration: underline; }
.intro-art { width: 100%; margin: 0; }
.intro-art img { display: block; width: 100%; max-height: 540px; object-fit: contain; }
.site-footer { flex: none; padding: 14px 24px 12px; color: var(--footer-text); background: var(--footer); text-align: center; }
.record { margin: 0 0 9px; font-size: 14px; line-height: 1.4; }
.record a, .footer-details a { color: inherit; transition: color .16s ease; }
.record a:hover, .footer-details a:hover { color: #fff; }
.footer-details { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 14px; row-gap: 5px; font-size: 12px; line-height: 1.6; }
.footer-details > * + *::before { content: "·"; margin-right: 14px; color: #85898d; }
:focus-visible { outline: 2px solid #7fb8f6; outline-offset: 3px; }

@media (max-width: 760px) {
  .header-inner { width: calc(100% - 36px); }
  .intro { width: calc(100% - 36px); min-height: 0; grid-template-columns: 1fr; gap: 18px; padding: 50px 0 36px; }
  .intro-copy { max-width: 560px; padding: 0; align-self: auto; }
  h1 { margin-bottom: 22px; }
  .intro-copy > p { font-size: 15px; line-height: 1.9; }
  .intro-art { max-width: 620px; margin: 0 auto; }
  .intro-art img { max-height: 360px; }
  .site-footer { padding: 16px 20px; }
  .record { font-size: 13px; }
  .footer-details { flex-direction: column; gap: 4px; font-size: 11px; }
  .footer-details > * + *::before { content: none; }
}

@media (max-width: 390px) {
  .intro { width: calc(100% - 32px); padding-top: 40px; }
  .intro-art img { max-height: 290px; }
  .site-footer { padding-right: 15px; padding-left: 15px; }
  .footer-details { overflow-wrap: anywhere; }
}

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