/* Base Styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; overflow-x: hidden; background: #fefaf4; color: #111; font-family: "ZhaohuaMinB", "STSong", "SimSun", serif; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul { margin: 0; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.page { position: relative; width: 1440px; height: 5996px; margin: 0 auto; overflow: hidden; background: #fefaf4; zoom: min(1, calc(100vw / 1440px)); }
.page > .background { position: absolute; inset: 0 0 600px; background: url("https://res.cloudinary.com/x9shjvco/image/upload/v1790147217/background.webp") top left / 1440px 3014px repeat-y; pointer-events: none; }

/* Header */
.header { position: fixed; z-index: 20; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; width: 1440px; height: 100px; padding: 0 50px 0 38px; }
.header-logo { width: 144px; height: 58px; }
.header-logo__marks { display: flex; align-items: center; gap: 14px; height: 58px; }
.header-logo__cross { font-family: "Playfair Display", Georgia, serif; font-size: 40px; font-weight: 900; line-height: 1; color: #393939; }
.header > .header-navigation { width: 303px; height: 48px; }
.header-navigation .header-navigation { position: static; display: flex; align-items: center; gap: 40px; width: 299px; height: 48px; list-style: none; }
.main-navigation__item { width: 16px; height: 48px; flex: 0 0 16px; }
.main-navigation__item:first-child { width: 19px; flex-basis: 19px; }
.main-navigation__link { display: block; width: 100%; height: 48px; overflow-wrap: anywhere; word-break: break-all; font-size: 20px; line-height: 24px; letter-spacing: 3px; color: #393939; }
.main-navigation__link--active, .main-navigation__link:hover { color: #a81f30; }
.main-navigation__link--active { color: #a81f30; }

/* Main Content */
.main { position: relative; z-index: 1; display: flex; flex-direction: column; width: 1440px; height: 5400px; }
.section1, .section2, .section3, .section4, .section5, .section6 { position: relative; flex: 0 0 900px; width: 1440px; height: 900px; overflow: hidden; }
.h2 { position: absolute; width: 66px; height: 372px; font-size: 40px; font-weight: 900; line-height: 1.5; letter-spacing: 20px; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; }
.h2 span { display: inline; }
.h2 span + span { margin-inline-start: 61px; }
.sidebar-text { position: absolute; display: flex; align-items: flex-end; justify-content: space-between; }
.sidebar-text > .h2 { position: relative; left: auto; top: auto; flex: 0 0 66px; }
.sidebar-text-desc { display: flex; align-items: flex-start; flex: 0 0 auto; }
.sidebar-text-desc p, .ending-text, .cup-text, .flavor-text { font-size: 20px; line-height: 25px; letter-spacing: 22px; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; }

/* Chapter 1: section1 */
.section1 .h1 { position: absolute; left: 306px; top: 93px; display: flex; align-items: center; width: 829px; height: 153px; }
.section1 .h1 img { opacity: .8; }
.section1 .chapter-illustration { position: absolute; left: 447px; top: 232px; width: 566px; height: 526px; }
.section1 .sidebar-text { left: 1123px; top: 316px; width: 188px; height: 364px; }
.section1 .sidebar-text > .h2 { height: 364px; }
.section1 .sidebar-text-desc { align-items: flex-end; gap: 11px; }
.article-pagination { position: absolute; left: 650px; top: 806px; width: 140px; height: 20px; }
.section-pagination { display: flex; gap: 10px; }
.section-pagination img { width: 20px; height: 20px; }
.section-pagination img:last-child { filter: brightness(0) saturate(100%) invert(17%) sepia(92%) saturate(3504%) hue-rotate(348deg) brightness(95%) contrast(90%); }

/* Chapter 2: section2 */
.section2 .chapter-illustration { position: absolute; left: 380px; top: 34px; width: 559px; height: 832px; }
.section2 .chapter-illustration img { position: absolute; }
.section2 .hand { left: 207px; top: 0; width: 306px; height: 321px; }
.section2 .bag { left: 121px; top: 130px; width: 438px; height: 702px; object-fit: cover; }
.section2 .signet { left: 0; top: 485px; width: 121px; height: 177px; }
.section2 .sidebar-text { left: 1123px; top: 316px; width: 188px; height: 364px; }
.section2 .sidebar-text > .h2 { height: 364px; }
.section2 .sidebar-text-desc { gap: 11px; }

/* Chapter 3: section3 */
.section3 .yuelu-gate { position: absolute; left: 133px; top: 167px; width: 933px; height: 514px; object-fit: cover; opacity: .8; }
.visual-label { position: absolute; z-index: 2; left: 154px; top: 186px; width: 249px; height: 94px; }
.visual-label { display: flex; align-items: start; }
.visual-label .h3 { position: relative; flex: 0 0 94px; width: 94px; height: 94px; }
.visual-label .h3 + .h3 { margin-left: -16px; }
.visual-label .h3 img { width: 94px; height: 94px; }
.visual-label .h3 span { position: absolute; left: 14px; top: 29px; font-size: 64px; line-height: 64px; letter-spacing: 3px; }
.visual-illustration { position: absolute; left: 39px; top: 307px; width: 1359px; height: 604px; }
.visual-illustration .landscape { position: absolute; inset: 0; width: 1359px; height: 604px; object-fit: cover; }
.visual-illustration .skate-girl { position: absolute; left: 39px; top: 204px; width: 339px; height: 356px; object-fit: cover; }
.section3 .sidebar-text { left: 1100px; top: 317px; width: 224px; height: 372px; gap: 61px; background: rgba(251, 248, 240, .8); }
.section3 .sidebar-text-desc { gap: 11px; }

/* Chapter 4: section4 */
.section4 .desk-scene { position: absolute; left: 60px; top: 128px; width: 1320px; height: 742px; }
.section4 .tea-drink { position: absolute; left: 365px; top: 114px; width: 295px; height: 512px; }
.section4 .sidebar-text { left: 1103px; top: 332px; width: 188px; height: 376px; background: rgba(251, 248, 240, .8); }
.section4 .sidebar-text > .h2 { height: 364px; }
.section4 .sidebar-text-desc { gap: 11px; }
.drink-vertical-text { position: absolute; left: 353px; top: 137px; display: grid; grid-template-columns: 12px 12px 16px 24px; grid-template-rows: 24px 19px 24px 29px 24px 29px 24px 31px 24px 24px 24px; width: 64px; height: 276px; font-size: 24px; }
.drink-vertical-text p { width: 24px; height: 24px; line-height: 24px; }
.drink-vertical-text p:nth-child(1) { grid-column: 4; grid-row: 1; }
.drink-vertical-text p:nth-child(2) { grid-column: 2; grid-row: 3; }
.drink-vertical-text p:nth-child(3) { grid-column: 1; grid-row: 5; }
.drink-vertical-text p:nth-child(4) { grid-column: 1; grid-row: 7; }
.drink-vertical-text p:nth-child(5) { grid-column: 2; grid-row: 9; }
.drink-vertical-text p:nth-child(6) { grid-column: 3; grid-row: 11; }

/* Chapter 5: section5 */
.section5 .desk-scene-under { position: absolute; left: 0; top: 219px; width: 1440px; height: 687px; object-fit: cover; }
.section5 .tea-drink-hand { position: absolute; left: 247px; top: 315px; width: 945px; height: 630px; }
.section5 .sidebar-text { left: 1094px; top: 344px; width: 197px; height: 364px; background: rgba(251, 248, 240, .8); }
.section5 .sidebar-text > .h2 { height: 364px; }
.section5 .sidebar-text-desc { align-items: flex-start; gap: 6px; }
.section5 .cup-text { position: relative; width: 25px; height: 141px; }
.section5 .flavor-text { position: relative; width: 39px; height: 111px; padding-top: 17px; padding-left: 9px; }
.section5 .flavor-text span { position: absolute; top: 0; left: 0; font-family: "DM Mono", monospace; font-size: 8px; line-height: 47px; letter-spacing: 2px; writing-mode: horizontal-tb; }

/* Chapter 6: section6 */
.section6 { display: grid; grid-template-columns: 240px 242px 160px 242px 216px 25px 14px 25px 61px 66px 149px; grid-template-rows: 258px 86px 90px 141px 141px 184px; }
.section6 .sidebar-text { position: relative; left: auto; top: auto; grid-column: 6 / span 5; grid-row: 3 / span 3; width: 191px; height: 372px; }
.section6 .sidebar-text-desc { gap: 14px; }
.section6 .ending-text { position: relative; left: auto; top: auto; }
.article-card-item { position: relative; top: auto; width: 242px; height: 458px; overflow: hidden; grid-row: 2 / span 4; }
.article-card-item { left: auto; grid-column: 2; }
.article-card-item + .article-card-item { grid-column: 4; }
.article-card-item > .background { position: absolute; inset: 0; width: 242px; height: 458px; }
.card-item__text { position: absolute; left: 51px; top: 93px; width: 138px; color: #e1af50; font-size: 32px; line-height: 57px; letter-spacing: 20px; }
.card-item__text img { width: 138px; height: 2px; margin: 53px 0; }
.card-item__text p { white-space: nowrap; }

/* Footer */
.footer { position: absolute; top: 5396px; left: 0; width: 1440px; height: 600px; background: #a81f30; color: white; }
.footer-content { position: relative; margin: 85px 68px; width: 1304px; height: 430px; }
.footer-title { position: absolute; left: 476px; top: 0; width: 344px; font-size: 40px; line-height: 1.25; letter-spacing: 4px; text-align: center; }
.footer-band { position: absolute; left: 0; top: 126px; display: flex; align-items: center; justify-content: space-between; width: 1304px; height: 150px; padding: 0 48px 0 73px; background: #962533; }
.footer-navigation { display: flex; gap: 44px; }
.footer-navigation a { width: 21px; font-size: 16px; line-height: 1.05; letter-spacing: 1.6px; color: #111; writing-mode: vertical-rl; text-orientation: upright; }
.footer-band > img { width: 420px; height: 79px; }
.footer-thanks { position: absolute; left: 50%; top: 346px; transform: translateX(-50%); font-size: 20px; letter-spacing: 2px; white-space: nowrap; }
.footer-credit { position: absolute; left: 50%; top: 385px; transform: translateX(-50%); color: #fefaf4; font-size: 14px; line-height: 1.1; letter-spacing: 1.4px; text-align: center; white-space: nowrap; }

@media (max-width: 1439px) {
  .page { margin-left: 0; margin-right: 0; }
  .header { left: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}