:root {
  color-scheme: light;
  --paper: #eee7da;
  --paper-light: #f7f3ea;
  --ink: #292720;
  --muted: #777265;
  --line: rgba(47, 43, 34, .16);
  --accent: #9b452d;
  --accent-soft: rgba(155, 69, 45, .14);
  --green: #55685d;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 80% 8%, rgba(255,255,255,.54), transparent 44%), var(--paper); }
a { color: inherit; }
.atlas-home { width: min(1120px, calc(100% - 64px)); margin: 0 auto; padding: 27px 0 25px; }
.atlas-topline { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 0 0 17px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.brand i { color: var(--accent); font-style: normal; }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: Georgia, serif; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.topline-note { color: var(--muted); font-size: 12px; letter-spacing: .05em; }
.home-intro { max-width: 700px; padding: clamp(62px, 10vw, 115px) 0 47px; }
.eyebrow { margin: 0; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.home-intro h1 { margin: 17px 0 18px; font-family: "Songti SC", "Noto Serif CJK SC", "STSong", Georgia, serif; font-size: clamp(42px, 6vw, 69px); font-weight: 500; line-height: 1.13; letter-spacing: -.055em; }
.home-deck { max-width: 570px; margin: 0; color: #625e54; font-family: "Songti SC", "Noto Serif CJK SC", "STSong", serif; font-size: 17px; line-height: 1.95; }
.topic-card { position: relative; display: grid; grid-template-columns: 1.14fr .86fr; min-height: 330px; overflow: hidden; background: var(--paper-light); text-decoration: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s ease; }
.topic-card:hover { background: #fbf8f1; }
.topic-card-art { position: relative; min-height: 330px; overflow: hidden; background: #e5dfd2; background-image: linear-gradient(140deg, rgba(255,255,255,.36), transparent 55%), repeating-linear-gradient(0deg, transparent 0 39px, rgba(90,83,67,.06) 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(90,83,67,.05) 40px); }
.topic-card-art::before { content: ""; position: absolute; width: 430px; height: 295px; left: 7%; top: 9%; border: 1px solid rgba(72,83,69,.22); border-radius: 48% 43% 57% 39%; transform: rotate(-18deg); }
.topic-card-art::after { content: ""; position: absolute; width: 336px; height: 218px; left: 17%; top: 20%; border: 1px solid rgba(72,83,69,.18); border-radius: 43% 57% 34% 60%; transform: rotate(16deg); }
.art-range { position: absolute; z-index: 1; border: 1px dashed rgba(155,69,45,.42); background: rgba(155,69,45,.05); border-radius: 53% 44% 58% 39%; }
.art-range-one { left: 30%; top: 17%; width: 235px; height: 167px; transform: rotate(-18deg); }
.art-range-two { left: 38%; top: 30%; width: 155px; height: 115px; transform: rotate(12deg); }
.art-route { position: absolute; z-index: 2; left: 21%; top: 58%; width: 57%; border-top: 1px dashed var(--accent); transform: rotate(-15deg); }
.art-point { position: absolute; z-index: 3; width: 9px; height: 9px; border: 2px solid var(--paper-light); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.art-point-one { left: 23%; top: 61%; }.art-point-two { left: 52%; top: 48%; }.art-point-three { left: 76%; top: 40%; }
.art-label { position: absolute; z-index: 3; color: var(--ink); font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 13px; }
.art-label-one { left: 20%; top: 67%; }.art-label-two { left: 51%; top: 53%; }.art-label-three { left: 77%; top: 33%; }
.art-compass { position: absolute; right: 22px; top: 18px; color: #706b5e; font-family: Georgia, serif; font-size: 10px; letter-spacing: .12em; }
.topic-card-copy { align-self: center; padding: 35px clamp(26px, 5vw, 60px); }
.topic-card-copy h2 { margin: 15px 0 13px; font-family: "Songti SC", "Noto Serif CJK SC", "STSong", serif; font-size: clamp(25px, 3vw, 35px); font-weight: 500; letter-spacing: -.04em; }
.topic-card-copy > p:not(.eyebrow) { max-width: 380px; margin: 0; color: #686357; font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 15px; line-height: 1.9; }
.topic-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 650; letter-spacing: .06em; }
.topic-card-index { position: absolute; right: 18px; top: 14px; color: rgba(41,39,32,.27); font-family: Georgia, serif; font-size: 11px; letter-spacing: .1em; }
.atlas-footer { display: flex; justify-content: space-between; margin-top: 18px; color: #898373; font-size: 9px; letter-spacing: .13em; }

@media (max-width: 700px) {
  .atlas-home { width: calc(100% - 36px); padding-top: 18px; }
  .topline-note { max-width: 145px; text-align: right; font-size: 10px; line-height: 1.5; }
  .home-intro { padding: 68px 0 35px; }
  .home-intro h1 { font-size: 45px; }
  .home-deck { font-size: 15px; }
  .topic-card { grid-template-columns: 1fr; }
  .topic-card-art { min-height: 235px; }
  .topic-card-copy { padding: 27px 23px 30px; }
  .topic-card-copy h2 { font-size: 27px; }
  .atlas-footer { gap: 18px; font-size: 8px; }
}