:root {
  color-scheme: light;
  --ink: #173126;
  --ink-soft: #52695d;
  --pine: #123f30;
  --forest: #1f6247;
  --leaf: #74a465;
  --water: #87c6c1;
  --water-light: #d8eee9;
  --mist: #edf4ee;
  --paper: #f7f5e9;
  --warm: #eee5cc;
  --gold: #d7a73d;
  --line: rgba(20, 71, 47, .14);
  font-family: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--paper); }
body { min-height: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding: 24px max(28px, calc((100vw - 1320px) / 2));
  color: #f6fff8;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(180deg, rgba(8, 52, 37, .36), transparent);
}
.brand { display: flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { position: relative; display: block; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; }
.brand-mark::before { content: ""; position: absolute; left: 8px; right: 8px; top: 22px; height: 1px; background: currentColor; transform: rotate(-12deg); }
.brand-mark::after { content: ""; position: absolute; left: 14px; top: 11px; width: 15px; height: 17px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; border-radius: 0 0 0 12px; transform: rotate(-12deg); }
.brand-mark i { position: absolute; left: 19px; top: 9px; width: 1px; height: 17px; background: currentColor; transform: rotate(-12deg); }
.brand b { display: block; font-family: "Songti SC", "STSong", serif; font-size: 18px; font-weight: 600; letter-spacing: .14em; }
.brand small { display: block; margin-top: 3px; opacity: .68; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.site-header nav { display: flex; align-items: center; gap: 30px; }
.site-header nav a { position: relative; padding: 8px 0; color: rgba(255,255,255,.82); font-size: 13px; font-weight: 700; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: white; transition: right .2s ease; }
.site-header nav a:hover::after { right: 0; }

.hero {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  color: #f7fff9;
  background: linear-gradient(180deg, #7bb3bd 0%, #b8d5c5 38%, #8eb59a 58%, #1f5038 100%);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -8; background: linear-gradient(90deg, rgba(5,52,34,.42), transparent 48%, rgba(8,48,34,.08)), radial-gradient(circle at 28% 15%, rgba(255,255,224,.28), transparent 24rem); }
.hero-sun { position: absolute; z-index: -7; top: 15%; right: 13%; width: 120px; height: 120px; border-radius: 50%; background: #fff2b4; box-shadow: 0 0 100px 30px rgba(255,239,171,.48); }
.hero-cloud { position: absolute; z-index: -6; height: 42px; border-radius: 50%; background: rgba(241,251,244,.35); filter: blur(7px); animation: drift 22s ease-in-out infinite alternate; }
.hero-cloud::before,.hero-cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.hero-cloud::before { width: 90px; height: 56px; left: 30px; bottom: 3px; }.hero-cloud::after { width: 110px; height: 47px; left: 95px; bottom: 0; }
.cloud-one { top: 20%; left: 35%; width: 180px; }.cloud-two { top: 32%; right: 4%; width: 140px; animation-duration: 28s; }
.mountain { position: absolute; left: -6%; right: -6%; z-index: -5; transform-origin: center bottom; }
.mountain-far { bottom: 28%; height: 48%; background: #6f9a7f; opacity: .68; clip-path: polygon(0 77%, 9% 60%, 17% 68%, 28% 28%, 37% 64%, 48% 18%, 58% 55%, 68% 30%, 78% 65%, 89% 36%, 100% 61%, 100% 100%, 0 100%); }
.mountain-mid { bottom: 18%; height: 51%; z-index: -4; background: linear-gradient(135deg, #4a7859, #23553c); clip-path: polygon(0 73%, 13% 47%, 22% 65%, 35% 20%, 48% 62%, 60% 33%, 72% 68%, 84% 26%, 100% 64%, 100% 100%, 0 100%); }
.mountain-near { bottom: -4%; height: 43%; z-index: -3; background: linear-gradient(180deg, #2d6547, #123f2e); clip-path: polygon(0 50%, 15% 28%, 31% 57%, 46% 18%, 62% 51%, 76% 24%, 91% 57%, 100% 42%, 100% 100%, 0 100%); }
.hero-river { position: absolute; z-index: -2; left: 41%; bottom: -24%; width: 31%; height: 69%; border-radius: 49% 54% 0 0; background: linear-gradient(90deg, #4f9b8d, #d8eee7 48%, #62a99b); box-shadow: 0 0 0 10px rgba(255,255,255,.06), inset 0 0 34px rgba(255,255,255,.32); transform: rotate(-5deg); }
.hero-river::before { content: ""; position: absolute; inset: 4% 26% 0; border-radius: 50%; border-left: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.16); }
.hero-bamboo { position: absolute; z-index: -1; top: 0; bottom: 0; width: 220px; opacity: .64; background: repeating-linear-gradient(101deg, transparent 0 24px, rgba(11,64,40,.68) 25px 30px, transparent 31px 50px); }
.hero-bamboo::before { content: ""; position: absolute; inset: 5% 0; background: repeating-linear-gradient(22deg, transparent 0 55px, rgba(25,91,52,.38) 56px 64px, transparent 65px 98px); clip-path: polygon(0 0, 100% 0, 78% 12%, 100% 22%, 62% 32%, 100% 44%, 63% 56%, 100% 68%, 58% 78%, 100% 88%, 80% 100%, 0 100%); }
.bamboo-left { left: -30px; transform: skewX(-5deg); }.bamboo-right { right: -55px; transform: scaleX(-1) skewX(-6deg); opacity: .42; }
.hero-content { position: relative; z-index: 2; width: min(1320px, calc(100% - 56px)); margin: 0 auto; padding-top: clamp(190px, 23vh, 260px); }
.kicker { margin: 0 0 16px; color: #2a6b4b; font-size: 11px; font-weight: 900; letter-spacing: .23em; text-transform: uppercase; }
.hero .kicker { color: rgba(255,255,255,.77); }
.hero h1 { margin: 0; max-width: 950px; text-shadow: 0 8px 38px rgba(4,48,30,.28); font-family: "Songti SC", "STSong", serif; font-size: clamp(72px, 10vw, 148px); font-weight: 400; line-height: .86; letter-spacing: -.07em; }
.hero h1 span { display: inline-block; margin-left: .56em; color: #f4f1d5; }
.hero-lead { margin: 30px 0 0; color: rgba(248,255,249,.86); font-family: "Songti SC", "STSong", serif; font-size: clamp(16px, 1.7vw, 22px); line-height: 1.8; text-shadow: 0 3px 20px rgba(3,45,28,.35); }
.hero-actions { display: flex; gap: 11px; margin-top: 30px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 19px; border-radius: 999px; font-size: 13px; font-weight: 900; }
.button.primary { background: #f4f1d5; color: #174631; box-shadow: 0 15px 35px rgba(5,40,25,.18); }
.button.glass { border: 1px solid rgba(255,255,255,.43); background: rgba(17,69,46,.18); color: white; backdrop-filter: blur(10px); }
.hero-note { position: absolute; right: max(28px, calc((100vw - 1320px)/2)); bottom: 70px; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 18px; width: 390px; padding: 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; background: rgba(10,54,36,.42); box-shadow: 0 20px 60px rgba(5,46,28,.18); backdrop-filter: blur(16px); }
.note-index { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-family: Georgia, serif; }
.hero-note small { color: #c6decf; font-size: 9px; font-weight: 900; letter-spacing: .16em; }.hero-note p { margin: 7px 0 0; color: rgba(255,255,255,.85); font-family: "Songti SC", serif; font-size: 14px; line-height: 1.75; }
.hero-scroll { position: absolute; left: 50%; bottom: 24px; z-index: 3; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; letter-spacing: .14em; transform: translateX(-50%); }.hero-scroll span { width: 34px; height: 1px; background: currentColor; }

.fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 max(28px, calc((100vw - 1320px)/2)); background: #f0f0e4; border-bottom: 1px solid var(--line); }
.fact-strip article { min-height: 165px; padding: 35px 28px; border-right: 1px solid var(--line); }.fact-strip article:first-child { border-left: 1px solid var(--line); }
.fact-strip strong { display: block; color: var(--forest); font-family: Georgia, "Songti SC", serif; font-size: 54px; font-weight: 400; line-height: 1; }.fact-strip sup { font-size: .42em; }.fact-strip span { display: block; margin-top: 13px; color: var(--ink-soft); font-size: 12px; font-weight: 700; line-height: 1.5; }
.section-shell { width: min(1320px, calc(100% - 56px)); margin: 0 auto; }

.story-section { padding: 120px 0; background: var(--pine); color: #f3f4e7; }
.story-layout { display: grid; grid-template-columns: .78fr 1.4fr; gap: 72px; align-items: start; }
.story-intro { position: sticky; top: 50px; }
.kicker.pale { color: #9bc2aa; }.story-intro h2,.rating-section h2 { margin: 0; font-family: "Songti SC", serif; font-size: clamp(56px, 6vw, 90px); font-weight: 400; line-height: .98; }.story-intro > p:not(.kicker) { max-width: 410px; margin: 26px 0; color: #b9cdc0; font-family: "Songti SC", serif; font-size: 17px; line-height: 1.9; }
.text-link { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid #aacdb7; color: #dceadf; font-size: 12px; font-weight: 800; }
.story-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chapter { position: relative; min-height: 610px; overflow: hidden; padding: 28px; border-radius: 8px; }
.chapter.dark { background: #19221e; }.chapter.green { background: #d8e6d8; color: #1a4530; }
.chapter-number { font-size: 10px; font-weight: 900; letter-spacing: .16em; }.chapter h3 { position: relative; z-index: 2; margin: 180px 0 16px; font-family: "Songti SC", serif; font-size: 42px; font-weight: 400; }.chapter p { position: relative; z-index: 2; margin: 0; max-width: 330px; opacity: .72; font-size: 14px; line-height: 1.9; }
.chapter-art { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; }
.quarry { background: linear-gradient(160deg, transparent 0 21%, #363a35 22% 45%, transparent 46%), linear-gradient(210deg, transparent 0 32%, #52514a 33% 58%, transparent 59%), linear-gradient(180deg, transparent 0 60%, #101713 61%); clip-path: polygon(0 70%, 15% 45%, 30% 62%, 44% 22%, 60% 57%, 75% 31%, 100% 65%, 100% 100%, 0 100%); }
.forest { background: linear-gradient(180deg, transparent 0 58%, #4c8b62 59%), repeating-linear-gradient(100deg, transparent 0 25px, #2d7250 26px 32px, transparent 33px 52px); clip-path: polygon(0 50%, 16% 30%, 29% 57%, 45% 15%, 61% 50%, 76% 21%, 100% 56%, 100% 100%, 0 100%); }

.timeline-section { padding: 115px 0 130px; background: #edf3ec; }
.section-heading h2 { margin: 0; font-family: "Songti SC", serif; font-size: clamp(48px, 5.6vw, 82px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.split-heading { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: end; }.split-heading > p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.85; }
.timeline-track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 72px; }
.timeline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 72px; height: 1px; background: #8fb29c; }
.timeline-track article { position: relative; min-height: 260px; padding: 0 18px 0 0; }.timeline-track time { display: block; color: #2f6e50; font: 400 38px/1 Georgia, serif; }.timeline-track span { position: relative; z-index: 2; display: block; width: 13px; height: 13px; margin: 21px 0 26px; border: 3px solid #edf3ec; border-radius: 50%; background: #2d7653; box-shadow: 0 0 0 1px #2d7653; }.timeline-track h3 { margin: 0 0 10px; font-family: "Songti SC", serif; font-size: 20px; font-weight: 600; }.timeline-track p { margin: 0; color: #687d70; font-size: 12px; line-height: 1.75; }

.works-section { padding: 120px 0; background: #f7f4e8; }
.works-heading { align-items: start; }.privacy-note { padding: 18px 20px; border-left: 3px solid #4f8b66; background: #e5ede2; }.privacy-note b { font-size: 12px; }.privacy-note p { margin: 7px 0 0; color: #5f7166; font-size: 12px; line-height: 1.7; }
.day-switcher { display: flex; gap: 10px; margin-top: 48px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.day-loading,.work-loading { display: block; width: 100%; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.58); color: #75867b; font-size: 13px; text-align: center; }
.work-loading.error { border-color: rgba(155,66,66,.22); background: #f8ece8; color: #8b514a; }
.day-tab { flex: 0 0 210px; display: grid; gap: 8px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.72); color: #557064; text-align: left; cursor: pointer; }
.day-tab.active { border-color: #256447; background: #1e5a40; color: white; box-shadow: 0 14px 30px rgba(32,91,63,.16); }
.day-tab-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.day-tab strong { font-family: "Songti SC",serif; font-size: 21px; font-weight: 600; }.day-tab em { padding: 4px 7px; border-radius: 999px; background: #d8a941; color: #173f2d; font-size: 9px; font-style: normal; font-weight: 900; }.day-tab small { opacity: .72; font-size: 10px; font-weight: 700; }
.day-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px 8px 0 0; background: #e5ede2; }
.day-summary-main { display: flex; align-items: center; gap: 13px; }.day-summary-label { padding: 6px 8px; border-radius: 999px; background: #d6a63b; color: #173f2d; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.day-summary-main strong { font-family: "Songti SC",serif; font-size: 22px; font-weight: 600; }
.day-summary-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.day-summary-meta span { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.58); color: #597064; font-size: 10px; font-weight: 800; }
.group-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; }
.group-work-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fcfbf5; box-shadow: 0 15px 35px rgba(42,74,54,.06); }
.group-work-header { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; padding: 18px 19px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg,#dae8db,#edf1e6); }
.group-work-number { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #85a892; border-radius: 50%; color: #286247; font: 400 14px/1 Georgia,serif; }.group-work-title small { display: block; color: #7a9182; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.group-work-title h3 { margin: 4px 0 0; font-family: "Songti SC",serif; font-size: 24px; font-weight: 600; }.group-submit-count { padding: 6px 8px; border-radius: 999px; background: #eef0e8; color: #7c887f; font-size: 9px; font-weight: 800; }.group-submit-count.has-work { background: #dcebdc; color: #27704b; }
.member-work-list { margin: 0; padding: 0 18px; list-style: none; }.member-work-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 11px; align-items: center; min-height: 74px; margin: 0 -8px; padding: 12px 8px; border-bottom: 1px dashed rgba(24,76,48,.13); transition: background .2s ease; }.member-work-row:last-child { border-bottom: 0; }.member-work-row.is-submitted:hover { background: rgba(224,237,222,.55); }.member-work-row.is-pending { background: repeating-linear-gradient(135deg,rgba(240,238,229,.42),rgba(240,238,229,.42) 8px,rgba(252,251,245,.2) 8px,rgba(252,251,245,.2) 16px); }.member-work-row.is-pending .member-work-avatar { border: 1px dashed #b9b6a6; background: rgba(240,238,229,.72); color: #989181; }.member-work-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e4ede2; color: #2a6649; font-family: "Songti SC",serif; font-size: 16px; font-weight: 600; }.member-work-name { display: flex; align-items: center; gap: 6px; }.member-work-copy strong { display: block; font-size: 13px; }.member-work-name em { padding: 2px 5px; border-radius: 999px; background: #ece3cd; color: #8a6c2b; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .06em; }.member-work-copy span { display: block; margin-top: 4px; color: #839087; font-size: 10px; }.member-work-row.is-pending .member-work-copy span { color: #a29b8a; }.member-work-pending,.member-work-link { justify-self: end; padding: 7px 9px; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }.member-work-pending { border: 1px dashed #c4bda9; background: rgba(250,248,239,.8); color: #9a8f78; }.member-work-link { background: #1f6247; color: white; box-shadow: 0 5px 14px rgba(31,98,71,.16); }.member-work-link:hover { background: #174c38; transform: translateY(-1px); }
.member-work-row { align-items: start; }
.member-work-avatar,.member-work-pending,.member-work-link { margin-top: 2px; }
.member-work-package { max-width: 420px; margin-top: 10px; border: 1px solid rgba(31,98,71,.12); border-radius: 8px; background: rgba(255,255,255,.55); }
.member-work-package summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; color: #47705b; font-size: 9px; font-weight: 900; cursor: pointer; list-style: none; user-select: none; }
.member-work-package summary::-webkit-details-marker { display: none; }
.member-work-package summary::after { content: "+"; display: grid; place-items: center; width: 17px; height: 17px; margin-left: auto; border-radius: 50%; background: #e1ece1; color: #276449; font-size: 12px; }
.member-work-package[open] summary::after { content: "−"; }
.member-work-package summary b { padding: 3px 6px; border-radius: 999px; background: #edf0e8; color: #718077; font-size: 8px; }
.member-work-package-list { display: grid; gap: 1px; padding: 0 6px 6px; }
.member-work-package-link { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px; border-radius: 6px; background: #f8f7ef; transition: background .18s ease, transform .18s ease; }
.member-work-package-link:hover { background: #e8f0e6; transform: translateX(2px); }
.member-work-package-link span { display: flex; align-items: center; gap: 5px; margin: 0; color: #70907c; font-size: 8px; font-weight: 900; }
.member-work-package-link span em { padding: 2px 4px; border-radius: 999px; background: #d8e8d8; color: #246143; font-size: 6px; font-style: normal; }
.member-work-package-link strong { overflow: hidden; color: #40534a; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 55px; }
.work-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fcfbf5; transition: transform .25s ease, box-shadow .25s ease; }.work-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(37,78,50,.12); }
.work-image { position: relative; height: 210px; overflow: hidden; background: linear-gradient(180deg, #9fc8c5, #9ebe9b 55%, #396f51); }.work-image::before { content: ""; position: absolute; inset: 26% -10% 0; background: rgba(35,95,63,.75); clip-path: polygon(0 75%, 18% 44%, 32% 65%, 48% 19%, 63% 62%, 79% 31%, 100% 69%, 100% 100%, 0 100%); }.work-image::after { content: ""; position: absolute; left: 39%; bottom: -32%; width: 34%; height: 75%; border-radius: 50%; background: linear-gradient(90deg, #7fc3b9, #e5f2e6, #74b1a4); transform: rotate(-8deg); }
.work-image span { position: absolute; left: 16px; top: 14px; z-index: 2; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: white; font: 700 12px/1 Georgia,serif; backdrop-filter: blur(8px); }
.work-two .work-image { background: linear-gradient(180deg,#c3beb0,#767c6f 55%,#30372f); }.work-three .work-image { background: linear-gradient(180deg,#a8d0b5,#93b56f 58%,#2e6648); }.work-four .work-image { background: linear-gradient(180deg,#e9d7ad,#b8c78e 58%,#5a7c54); }.work-five .work-image { background: linear-gradient(180deg,#8abfbd,#bad5bf 58%,#317061); }.work-six .work-image { background: repeating-linear-gradient(98deg,transparent 0 25px,rgba(20,91,55,.7) 26px 32px,transparent 33px 53px),linear-gradient(180deg,#a8cfbe,#326b4a); }.work-seven .work-image { background: linear-gradient(180deg,#c9d9d7,#9fbd9d 58%,#456f55); }.work-eight .work-image { background: linear-gradient(180deg,#e5d6ab,#a7be87 58%,#3b6c4e); }
.work-copy { padding: 20px; }.work-copy small { color: #6f8978; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.work-copy h3 { margin: 11px 0 7px; font-family: "Songti SC",serif; font-size: 26px; font-weight: 600; }.work-copy p { min-height: 43px; margin: 0; color: #6b7a71; font-size: 12px; line-height: 1.7; }.pending-link { display: inline-flex; margin-top: 18px; padding: 7px 9px; border-radius: 999px; background: #eff1e8; color: #78857c; font-size: 10px; font-weight: 800; }

.rating-section { padding: 120px 0; background: #133e30; color: #f4f3e4; }
.rating-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 70px; align-items: start; }.rating-layout > header > p:last-child { max-width: 470px; margin: 25px 0 0; color: #b6cbbd; font-family: "Songti SC",serif; font-size: 16px; line-height: 1.9; }
.rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.14); }.rating-grid article { min-height: 230px; padding: 28px; background: #194936; }.rating-grid article:nth-child(2),.rating-grid article:nth-child(3) { background:#20553e; }.rating-grid span { float: right; color: var(--gold); font-size: 29px; }.rating-grid small { color: #82ad92; font-size: 9px; font-weight: 900; letter-spacing: .17em; }.rating-grid h3 { margin: 45px 0 10px; font-family: "Songti SC",serif; font-size: 33px; font-weight: 400; }.rating-grid p { margin: 0; color: #b8cdbf; font-size: 12px; line-height: 1.7; }
.vote-rule { grid-column: 1 / -1; margin: 25px 0 0; padding: 17px 20px; border: 1px solid rgba(255,255,255,.12); color: #a9c1b1; font-size: 12px; line-height: 1.8; }.vote-rule b { color: #e1e9e0; }

.ranking-section { padding: 120px 0; background: #e8efe7; }
.ranking-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; align-items: start; }.ranking-layout header { position: sticky; top: 40px; }.ranking-layout h2 { margin: 0; font-family: "Songti SC",serif; font-size: clamp(60px,7vw,104px); font-weight: 400; line-height: .95; }.ranking-layout header > p:last-child { margin: 25px 0 0; color: #62776a; font-size: 14px; line-height: 1.85; }
.ranking-board { min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #f9f8ef; box-shadow: 0 30px 70px rgba(32,79,51,.1); }.ranking-tabs { display: grid; grid-template-columns: repeat(4,1fr); padding: 10px; border-bottom: 1px solid var(--line); background: #edf0e7; }.ranking-tabs span { padding: 12px; color: #718177; font-size: 12px; font-weight: 800; text-align: center; }.ranking-tabs .active { border-radius: 8px; background: #1f6247; color: white; }
.empty-ranking { display: grid; place-items: center; align-content: center; min-height: 450px; padding: 40px; text-align: center; }.empty-star { display: grid; place-items: center; width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid #c4a44d; border-radius: 50%; color: #c79d2f; font-size: 50px; }.empty-ranking strong { font-family:"Songti SC",serif; font-size: 28px; font-weight: 500; }.empty-ranking p { max-width: 400px; margin: 10px 0 0; color: #7b897f; font-size: 13px; line-height: 1.7; }

.source-section { padding: 100px 0; background: #f8f6ed; }.source-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; }.source-layout h2 { margin:0; font-family:"Songti SC",serif; font-size:clamp(47px,5vw,72px); font-weight:400; line-height:1.05; }.source-layout ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.source-layout li { border-bottom:1px solid var(--line); }.source-layout a { display:grid; grid-template-columns:44px 1fr; gap:15px; align-items:center; padding:17px 0; color:#53675b; font-size:13px; line-height:1.5; transition:color .2s ease,padding-left .2s ease; }.source-layout a:hover { padding-left:8px; color:#1e6245; }.source-layout a span { color:#2e7754; font:400 18px/1 Georgia,serif; }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; gap:30px; align-items:center; padding:34px max(28px,calc((100vw - 1320px)/2)); background:#102f26; color:#d8e6dc; }.footer-mark { display:flex; align-items:center; gap:12px; }.brand-mark.inverse { color:#d8e6dc; }.footer-mark b { display:block; font-family:"Songti SC",serif; letter-spacing:.12em; }.footer-mark small { display:block; margin-top:3px; color:#80a08d; font-size:10px; }.site-footer p { color:#809e8c; font-size:11px; text-align:center; }.site-footer > a { justify-self:end; font-size:11px; font-weight:800; }

@keyframes drift { from { transform: translateX(-20px); } to { transform: translateX(45px); } }

@media (max-width: 1080px) {
  .site-header { grid-template-columns:1fr auto; }.site-header nav { display:none; }
  .story-layout,.rating-layout,.ranking-layout,.source-layout { grid-template-columns:1fr; }.story-intro,.ranking-layout header { position:static; }.story-chapters { max-width:850px; }
  .works-grid { grid-template-columns:repeat(2,1fr); }.group-work-grid { grid-template-columns:1fr; }
  .timeline-track { grid-template-columns:repeat(3,1fr); row-gap:45px; }.timeline-track::before { display:none; }.timeline-track article { min-height:210px; }.timeline-track span { margin-bottom:18px; }
}

@media (max-width: 720px) {
  .site-header { padding:15px 18px; }.brand-mark { width:39px; height:39px; }.brand b { font-size:15px; }.brand small { display:none; }
  .hero { min-height:820px; }.hero-content { width:calc(100% - 36px); padding-top:185px; }.hero h1 { font-size:clamp(62px,20vw,90px); line-height:.91; }.hero h1 span { margin-left:0; }.hero-lead { margin-top:22px; font-size:16px; }.hero-actions { flex-direction:column; align-items:flex-start; }.button { width:210px; }
  .hero-note { right:18px; bottom:57px; width:calc(100% - 36px); }.hero-scroll { display:none; }.hero-sun { top:17%; right:2%; width:76px; height:76px; }.hero-river { left:58%; width:46%; }.bamboo-right { display:none; }
  .fact-strip { grid-template-columns:1fr 1fr; padding:0 18px; }.fact-strip article { min-height:135px; padding:25px 16px; border-bottom:1px solid var(--line); }.fact-strip strong { font-size:42px; }
  .section-shell { width:calc(100% - 36px); }.story-section,.timeline-section,.works-section,.rating-section,.ranking-section,.source-section { padding:78px 0; }
  .story-layout,.rating-layout,.ranking-layout,.source-layout { gap:45px; }.story-intro h2,.rating-section h2 { font-size:54px; }.story-chapters { grid-template-columns:1fr; }.chapter { min-height:500px; }.chapter h3 { margin-top:125px; }
  .split-heading { grid-template-columns:1fr; gap:22px; }.section-heading h2 { font-size:48px; }.timeline-track { grid-template-columns:1fr 1fr; margin-top:48px; }.timeline-track article { min-height:220px; padding-right:12px; }.timeline-track time { font-size:34px; }
  .works-grid { grid-template-columns:1fr; margin-top:35px; }.work-image { height:230px; }.work-copy p { min-height:auto; }
  .day-switcher { margin-top:32px; }.day-tab { flex-basis:180px; }.day-summary { display:grid; padding:17px; }.day-summary-main { align-items:flex-start; }.day-summary-meta { justify-content:flex-start; }.group-work-grid { gap:11px; }.group-work-header { grid-template-columns:auto 1fr; }.group-submit-count { grid-column:2; justify-self:start; }.member-work-list { padding:0 14px; }.member-work-row { grid-template-columns:34px 1fr; }.member-work-pending,.member-work-link { grid-column:2; justify-self:start; margin-top:-5px; }
  .rating-grid { grid-template-columns:1fr; }.rating-grid article { min-height:205px; }.vote-rule { margin-top:18px; }
  .ranking-board { min-height:460px; }.ranking-tabs { grid-template-columns:1fr 1fr; gap:5px; }.empty-ranking { min-height:350px; }
  .source-layout h2 { font-size:47px; }.source-layout a { grid-template-columns:34px 1fr; font-size:12px; }
  .site-footer { grid-template-columns:1fr; text-align:center; }.footer-mark { justify-content:center; }.site-footer > a { justify-self:center; }.site-footer p { margin:0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }.hero-cloud { animation:none; }.work-card { transition:none; }
}