:root {
  --at-paper: #f7f0df;
  --at-paper-bright: #fffaf0;
  --at-ink: #263638;
  --at-muted: #657173;
  --at-teal: #0d5556;
  --at-teal-deep: #083f41;
  --at-coral: #e86647;
  --at-blush: #e7b7ad;
  --at-mustard: #d79b2b;
  --at-blue: #477f9e;
  --at-sage: #91a49a;
  --at-line: rgba(81, 77, 65, 0.28);
  --at-shadow: 0 12px 30px rgba(56, 51, 42, 0.17);
}

body {
  color: var(--at-ink);
  background: #eadfca url("/site-assets/atelier-2012-collage-background-q55.webp") center / cover fixed no-repeat;
  font-family: "Avenir Next", "Trebuchet MS", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.site-header {
  border-bottom: 1px solid rgba(13, 85, 86, 0.26);
  background: rgba(255, 250, 240, 0.94);
  box-shadow: 0 6px 18px rgba(56, 51, 42, 0.15);
  backdrop-filter: blur(12px);
}

.brand {
  color: var(--at-teal-deep);
  font-family: Georgia, "Songti SC", STSong, serif;
}

.nav a {
  color: #455658;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(13, 85, 86, 0.2);
  border-radius: 6px;
  background: #fffaf0 url("/site-assets/public-creative-sticker.png?v=20260801-publiccreative1") center / cover no-repeat;
  box-shadow: 0 3px 8px rgba(45, 48, 42, 0.18);
}

.hero-sticker {
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 52px;
  width: 116px;
  height: 116px;
  object-fit: contain;
  pointer-events: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  border-color: rgba(232, 102, 71, 0.32);
  background: #f7ddd3;
  color: #8c3927;
}

.button {
  border-color: rgba(70, 73, 66, 0.34);
  border-radius: 6px;
  background: #fffaf0;
  color: #344345;
  box-shadow: 0 3px 8px rgba(56, 51, 42, 0.12);
  text-shadow: none;
}

.button:hover {
  border-color: var(--at-coral);
  color: #8c3927;
}

.button-primary {
  border-color: #a9670d;
  background: var(--at-mustard);
  color: #302208;
  box-shadow: inset 0 1px 0 rgba(255, 244, 197, 0.7), 0 4px 10px rgba(135, 87, 18, 0.2);
}

.hero,
.page-hero,
.band,
.docs-layout,
.blog-list {
  border: 1px solid var(--at-line);
  border-radius: 7px;
  background: rgba(255, 250, 240, 0.95);
  box-shadow: var(--at-shadow), inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
}

.hero::before,
.page-hero::before {
  content: "CiYuanMax · Atelier 2012 拼贴画室";
  border-bottom: 1px solid rgba(255, 244, 219, 0.18);
  background: var(--at-teal);
  color: #fff1d4;
  font-family: Georgia, "Songti SC", STSong, serif;
  text-shadow: none;
}

.hero::after,
.page-hero::after {
  content: "●  ■  ▲";
  color: var(--at-mustard);
  font-size: 11px;
  letter-spacing: 6px;
  text-shadow: none;
}

.eyebrow,
.badge {
  border-color: rgba(13, 85, 86, 0.3);
  border-radius: 9999px;
  background: #e5ece7;
  color: var(--at-teal-deep);
}

.hero h1,
.section-head h2,
.page-hero h1,
.article h1,
.article h2,
.price-card h3,
.link-card h3,
.post-card h2 {
  color: var(--at-teal-deep);
  font-family: Georgia, "Songti SC", STSong, serif;
  text-shadow: none;
}

.hero h1 span,
.stat-card .v em,
.compare-item .n em,
.post-date,
.price-card .rate,
.link-card .number,
.article a,
.formula a {
  color: #b54b33;
}

.hero-copy,
.section-head p,
.page-hero p,
.price-card .desc,
.price-card .meta,
.link-card p,
.article p,
.article li,
.post-card p {
  color: var(--at-muted);
}

.hero-copy strong {
  color: #a84330 !important;
}

.stat-card,
.price-card,
.link-card,
.post-card,
.docs-nav,
.compare-item {
  border-color: var(--at-line);
  border-radius: 6px;
  background: rgba(255, 250, 240, 0.97);
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(56, 51, 42, 0.12);
}

.stat-card:nth-child(4n + 1),
.link-card:nth-child(4n + 1) {
  border-top: 5px solid var(--at-coral);
}

.stat-card:nth-child(4n + 2),
.link-card:nth-child(4n + 2) {
  border-top: 5px solid var(--at-blue);
}

.stat-card:nth-child(4n + 3),
.link-card:nth-child(4n + 3) {
  border-top: 5px solid var(--at-mustard);
}

.stat-card:nth-child(4n),
.link-card:nth-child(4n) {
  border-top: 5px solid var(--at-sage);
}

.price-card.featured {
  border: 2px solid var(--at-coral);
  background: #f7ddd3;
}

.featured .badge {
  border-color: #a7432d;
  background: var(--at-coral);
  color: #fffaf0;
}

.formula {
  border-color: rgba(13, 85, 86, 0.25);
  border-left-color: var(--at-teal);
  background: #e7ede8;
  color: #455557;
}

.article h2 {
  border-color: rgba(13, 85, 86, 0.22);
}

.article pre {
  border-color: rgba(13, 85, 86, 0.4);
  border-radius: 6px;
  background: var(--at-teal-deep);
  color: #fff0d2;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.22);
}

.article table {
  border-color: rgba(13, 85, 86, 0.35);
  border-radius: 6px;
  overflow: hidden;
  background: #fffaf0;
}

.status-note {
  border-color: rgba(13, 85, 86, 0.32);
  background: #e7ede8;
  color: var(--at-teal-deep);
}

.article th,
.article td {
  border-color: rgba(81, 77, 65, 0.2);
  color: #354547;
}

.article th {
  background: var(--at-teal);
  color: #fff3d8;
}

.poster {
  border-color: var(--at-coral);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(56, 51, 42, 0.2);
}

.site-footer {
  border-top: 1px solid rgba(255, 244, 219, 0.16);
  background: rgba(8, 69, 70, 0.96);
  color: #e5eee5;
  text-shadow: none;
  backdrop-filter: blur(10px);
}

.site-footer a {
  color: #ffd18e;
}

@media (max-width: 700px) {
  body {
    background-attachment: scroll;
  }

  .hero,
  .page-hero,
  .band,
  .docs-layout,
  .blog-list {
    border-radius: 6px;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .hero-sticker {
    display: none;
  }
}