.landing .page-section { max-width: 1220px; margin: auto; padding: 72px 42px; }
.landing h2 { font-family: "Noto Serif TC", "PMingLiU", serif; font-size: clamp(25px, 2.4vw, 34px); font-weight: 500; line-height: 1.7; letter-spacing: 2px; margin: 12px 0 20px; }
.landing h3 { font-size: 16px; font-weight: 500; letter-spacing: 1px; }
.landing p, .landing dd { font-size: 14px; line-height: 2; color: var(--muted); }
.landing .eyebrow { font-size: 10px; }
.landing nav { display: flex; gap: 24px; }
.landing nav a, .text-link, .back-link { color: var(--ink); font-size: 12px; text-decoration: none; }
.landing nav a:hover, .text-link:hover, .back-link:hover { color: var(--rose); text-decoration: underline; }
.landing .hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 72px; padding-top: 48px; }
.landing h1 { font-size: clamp(32px, 3.5vw, 48px); }
.landing .lead { font-size: 17px; }
.landing .hero-detail { margin-top: 24px; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.landing .play-link { display: inline-block; width: 200px; margin-top: 0; text-decoration: none; font-size: 14px; }
.landing .small-note { font-size: 11px; margin-top: 20px; }
.hero-shot { margin: 0; max-width: 380px; justify-self: center; width: 100%; }
.hero-shot img { display: block; width: 100%; height: auto; border: 6px solid #fffcf8; border-radius: 28px; box-shadow: 0 20px 65px #91665720, 0 0 0 1px var(--line); }
.hero-shot figcaption { display: flex; justify-content: space-between; padding-top: 18px; font-size: 10px; color: var(--muted); }
.landing .companions { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.companion { text-align: center; }
.companion h3 { margin: 12px 0 4px; }
.companion p { margin: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.gallery figure { margin: 0; min-width: 0; }
.gallery img { width: 100%; height: auto; display: block; border: 6px solid #fffcf8; border-radius: 24px; box-shadow: 0 0 0 1px var(--line); }
.gallery figcaption { padding: 24px 0 0; }
.gallery h3 { margin: 12px 0; }
.gallery p { margin: 0; }
.how-section { scroll-margin-top: 24px; border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 36px; }
.step-number { font-family: serif; font-size: 30px; color: var(--rose); }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px; margin-top: 24px; background: #fffaf5; border: 1px solid var(--line); border-radius: 15px; }
.controls p { font-size: 12px; margin: 8px 0; }
.landing .rules-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 72px; border-top: 1px solid var(--line); }
.rules { margin: 0; }
.rules > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules > div:first-child { padding-top: 0; }
.rules dt { font-size: 16px; letter-spacing: 1px; }
.rules dd { margin: 10px 0 0; }
.scenery { border-top: 1px solid var(--line); }
.scenery ol { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 36px; }
.scenery li { border-top: 2px solid var(--line); padding-top: 20px; }
.scenery li:first-child { border-color: var(--rose); }
.scenery li > span { font-size: 10px; color: var(--rose); letter-spacing: 1px; }
.scenery li p { font-size: 12px; }
.landing .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 72px; border-top: 1px solid var(--line); }
.landing .record-note { grid-column: 1 / -1; font-size: 11px; margin-bottom: 0; }
.landing .closing { text-align: center; border-top: 1px solid var(--line); padding-bottom: 96px; }
.closing .play-link { margin-top: 20px; text-align: left; }
.back-link { color: var(--rose); font-size: 12px; text-decoration: none; }
@media (max-width: 1000px) { .landing .hero { gap: 36px; } .section-heading { display: block; } .steps { gap: 24px; } .gallery { gap: 24px; } .landing .rules-section { gap: 36px; } }
@media (max-width: 650px) { .landing .page-section { padding: 48px 24px; } .landing .site-header { flex-wrap: wrap; gap: 16px; } .landing nav { width: 100%; justify-content: space-between; } .landing .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; } .landing h1 { margin-top: 16px; } .hero-actions { gap: 20px; } .landing .play-link { width: 180px; } .landing .companions { grid-template-columns: 1fr 1fr; } .companions > div:first-child { grid-column: 1 / -1; } .companion p { font-size: 12px; } .gallery { grid-template-columns: 1fr; gap: 36px; } .gallery figure { max-width: 380px; margin: auto; width: 100%; } .steps, .controls, .landing .rules-section, .landing .modes { grid-template-columns: 1fr; } .steps { gap: 16px; } .steps h3 { display: inline; margin-left: 16px; } .controls { padding: 20px; gap: 12px; } .scenery ol { grid-template-columns: 1fr 1fr; } .landing .closing { padding-bottom: 64px; } .back-link { font-size: 10px; } }