:root {
  color-scheme: light;
  --ink: #432918;
  --paper: #f3e1bd;
  --paper-light: #fff0cf;
  --coral: #b94f35;
  --teal: #39776f;
  --moss: #607a4b;
  --gold: #e9b84c;
  --line: #704c2b;
  --serif: "Rye", Georgia, serif;
  --display: "ZCOOL KuaiLe", "Microsoft YaHei", sans-serif;
  --body: "Nunito", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: #eee0bf; color: var(--ink); font: 600 16px/1.5 var(--body); }
a { color: inherit; }
.site-header { position: sticky; z-index: 20; top: 0; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px clamp(18px,5vw,62px); background: #f8e9c9ee; border-bottom: 1px solid #79572a36; backdrop-filter: blur(12px); }
.brand { font-size: 15px; font-weight: 900; letter-spacing: .16em; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--coral); font-size: 22px; vertical-align: -2px; }
.site-header nav { display: flex; align-items: center; gap: clamp(12px,3vw,34px); font-weight: 900; letter-spacing: .06em; }
.site-header nav a { text-decoration: none; }
.site-header nav a span { margin-left: 5px; color: #896847; font-size: 12px; }
.nav-parent { padding: 10px 17px; color: #fff3d4; background: var(--coral); border-radius: 99px; }
.map-paper { background-color: #f3e1bd; background-image: radial-gradient(ellipse at 12% 19%,#ad7c4430 0 2px,transparent 3px),radial-gradient(ellipse at 83% 65%,#fff9dc66 0 1px,transparent 3px),repeating-linear-gradient(168deg,transparent 0 103px,#895f3020 105px,transparent 108px 142px),linear-gradient(135deg,#f8e9c9,#ead0a0 65%,#f4dfb8); }
.hero { min-height: 610px; position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 12px; padding: 56px clamp(22px,5vw,62px) 104px; overflow: hidden; }
.hero:after { content: ""; position: absolute; z-index: 0; width: 38vw; height: 15vw; left: -3%; bottom: 52px; border-radius: 50%; background: #75937442; filter: blur(8px); transform: rotate(8deg); }
.hero-copy { position: relative; z-index: 3; max-width: 650px; }
.map-label { display: inline-block; padding: 6px 12px; color: #543316; background: #efc15e; border: 1.5px solid #704b27; border-radius: 6px 9px 5px 7px; font-size: 12px; font-weight: 1000; letter-spacing: .13em; transform: rotate(-1.5deg); }
.hero h1 { margin: 24px 0 4px; color: #59371f; font: 900 clamp(76px,10vw,132px)/.78 var(--body); letter-spacing: -.075em; text-shadow: 4px 5px #f9e9c7; }
.hero-chinese { margin: 25px 0 10px; font: 700 clamp(24px,3vw,36px)/1.2 var(--display); letter-spacing: .12em; }
.hero-date { margin: 8px 0; font-size: 17px; font-weight: 900; }
.hero-verse { max-width: 580px; margin: 19px 0 9px; color: #76522f; font: italic 600 15px/1.6 Georgia,serif; }
.hero-intro { max-width: 560px; margin: 10px 0 0; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 23px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 11px 17px; border: 0; border-radius: 5px 15px 5px 12px; font: 1000 14px/1.25 var(--body); text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.button:hover { transform: translateY(-2px) rotate(-.5deg); }
.button-main { color: #fff3d4; background: var(--teal); box-shadow: 0 5px 0 #254b45; }
.button-main span { font-size: 12px; }
.button-quiet { color: var(--ink); background: #fff0cf; border: 1.5px solid #7d5a32; }
.button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #176bca; outline-offset: 3px; }
.hero-art { position: relative; z-index: 2; width: 100%; max-width: 520px; aspect-ratio: 1.14; justify-self: end; }
.sun-halo { position: absolute; width: 38%; aspect-ratio: 1; top: 9%; right: 11%; border-radius: 50%; background: #efbe4d; box-shadow: 0 0 0 16px #edbf4b31,0 0 0 34px #edbf4b1d; }
.flight-loop { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.flight-loop path { stroke: var(--coral); stroke-width: 4; stroke-dasharray: 7 7; stroke-linecap: round; }
.eagle { position: absolute; z-index: 2; top: 23%; right: 2%; width: 94%; height: 75%; object-fit: contain; filter: drop-shadow(3px 9px 0 #73502b50); }
.soar-stamp { position: absolute; right: 3%; bottom: 2%; z-index: 3; padding: 8px 14px; color: #75401e; background: #fff0cf; border: 1px solid #754c29; border-radius: 50%; font-size: 13px; font-weight: 1000; line-height: 1.1; transform: rotate(7deg); }
.hero-routebar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 15px; min-height: 58px; padding: 12px clamp(20px,5vw,62px); color: #fff0cf; background: #39776f; font-size: 13px; font-weight: 1000; letter-spacing: .08em; }
.routebar-line { flex: 1; border-top: 3px dotted #edc462; }
.routebar-end { color: #f4cc72; }
.tiny-spark { color: #edc462; }
.journey-section { position: relative; padding: 70px clamp(20px,5vw,62px) 56px; overflow: hidden; }
.section-heading { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.section-heading h2 { margin: 18px 0 7px; color: #375d56; font: 700 clamp(34px,5vw,54px)/1.1 var(--display); }
.section-heading h2 em { color: var(--coral); font-style: normal; }
.section-heading p { margin: 0; font-size: 17px; }
.section-heading p span { color: #755333; font-size: 15px; }
.trail { position: relative; width: min(1120px,100%); margin: 0 auto; padding: 10px 0; counter-reset: step; }
.trail:before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M500 0 C500 120 145 70 145 275 C145 490 855 380 855 600 C855 825 145 710 145 900' fill='none' stroke='%23b65336' stroke-width='5' stroke-linecap='round' stroke-dasharray='2 12' opacity='.75'/%3E%3C/svg%3E"); }
.day-row { position: relative; z-index: 1; display: grid; grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr); align-items:center; gap: 20px; min-height: 335px; padding: 20px 0; counter-increment: step; }
.day-copy { grid-column:1; grid-row:1; padding: 25px clamp(18px,3vw,32px); background: #fff0cfdf; border: 1.5px solid #9a7042; border-radius: 6px 32px 9px 28px; box-shadow: 6px 8px 0 #946b3e29; clip-path: polygon(0 2%,7% 0,14% 3%,24% 1%,33% 3%,44% 0,55% 3%,66% 1%,77% 3%,88% 0,100% 3%,98% 18%,100% 32%,98% 50%,100% 69%,98% 84%,100% 98%,86% 96%,74% 100%,62% 97%,50% 100%,39% 97%,28% 100%,16% 97%,0 100%,2% 83%,0 66%,2% 49%,0 33%,2% 17%); }
.row-reverse .day-copy { grid-column:3; }
.day-kicker { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-bottom: 7px; color:var(--coral); font-size:12px; font-weight:1000; letter-spacing:.12em; }
.day-kicker b { color:#896741; font-size:10px; letter-spacing:.08em; }
.day-copy h3 { margin: 7px 0 0; font: 900 clamp(27px,4vw,39px)/1 var(--body); letter-spacing:.025em; }
.accent-teal .day-copy h3 { color:#28766e; }
.accent-moss .day-copy h3 { color:#617c4b; }
.day-title-zh { margin:5px 0 12px; font:700 21px/1.2 var(--display); }
.day-summary { margin:0; font-size:16px; }
.day-summary-en { margin-top:4px; color:#76532f; font-size:14px; }
.activity-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.activity-pills span { padding:5px 9px; border:1px dashed #875a31; border-radius:99px; background:#f8e5bd; font-size:11px; font-weight:1000; letter-spacing:.05em; }
.day-marker { grid-column:2; grid-row:1; z-index:3; justify-self:center; align-self:center; display:flex; flex-direction:column; align-items:center; gap:5px; }
.day-marker span { display:grid; place-items:center; width:78px; height:78px; color:#fff4d6; background:var(--coral); border:4px double #fff0cf; border-radius:50%; box-shadow:0 0 0 5px #704822,0 8px 0 #70482255; font-size:30px; font-weight:1000; }
.accent-teal .day-marker span { background:var(--teal); }
.accent-moss .day-marker span { background:var(--moss); }
.day-marker small { padding:3px 7px; color:var(--ink); background:var(--paper-light); border:1px solid #79572a; font-size:9px; font-weight:1000; letter-spacing:.1em; }
.day-illustration { grid-column:3; grid-row:1; display:grid; place-items:center; min-height:230px; }
.row-reverse .day-illustration { grid-column:1; grid-row:1; }
.day-illustration svg { display:block; width:min(100%,350px); height:auto; overflow:visible; filter:drop-shadow(3px 6px 0 #75512b36); }
.schedule { margin-top:15px; border-top:1px solid #8d674137; }
.schedule summary { padding-top:10px; color:#376c66; cursor:pointer; font-size:13px; font-weight:1000; }
.schedule summary span { margin-left:5px; font-size:10px; letter-spacing:.05em; }
.schedule ol { list-style:none; margin:10px 0 0; padding:0; }
.schedule li { display:grid; grid-template-columns:92px 1fr; gap:10px; padding:9px 0; border-top:1px dashed #94714955; }
.schedule time { color:var(--coral); font-size:13px; font-weight:1000; white-space:nowrap; }
.schedule li b,.schedule li span { display:block; }
.schedule li b { font-size:14px; }
.schedule li span { margin-top:2px; color:#76532f; font-size:12px; }
.parent-section { padding:70px clamp(20px,5vw,62px) 50px; color:#fff1d2; background:#345b58; }
.parent-heading { max-width:740px; margin:0 auto 27px; text-align:center; }
.parent-heading .map-label { color:#412b19; }
.parent-heading h2 { margin:16px 0 6px; font:700 clamp(30px,4vw,43px)/1.15 var(--display); }
.parent-heading h2 span { display:inline-block; margin-left:8px; color:#f0cb72; font:900 14px/1 var(--body); letter-spacing:.06em; vertical-align:middle; }
.parent-heading p { margin:0; color:#f4e2be; }
.parent-cards { width:min(1120px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.parent-card { position:relative; min-height:240px; padding:19px 20px 18px; color:var(--ink); background:#fff0cf; border:2px solid #d9ae57; border-radius:8px 22px 7px 18px; box-shadow:4px 5px #1e39354a; }
.parent-card.parent-pending { background:#f8dfb8; border-color:#ca7b4d; }
.parent-icon { position:absolute; top:14px; right:14px; width:58px; height:58px; }
.parent-icon svg { width:100%; height:100%; }
.parent-tag { display:block; max-width:calc(100% - 60px); color:#995236; font-size:10px; font-weight:1000; letter-spacing:.1em; }
.parent-card h3 { margin:14px 0 6px; font:700 22px/1.15 var(--display); }
.parent-card strong { display:block; font-size:22px; font-weight:1000; }
.parent-en-time { display:block; color:#78522f; font-size:13px; }
.parent-card p { max-width:300px; margin:9px 0 0; font-size:14px; }
.parent-card .parent-detail-en { margin-top:3px; color:#78522f; font-size:12px; }
.pending-tag { display:inline-block; margin-top:10px; padding:5px 8px; color:#763c25; background:#f1c296; border:1px solid #b9663c; border-radius:99px; font-size:10px; letter-spacing:.04em; }
.parent-footnote { width:min(1120px,100%); margin:18px auto 0; color:#f7d99a; font-size:13px; text-align:center; }
.reflection-section { padding:54px clamp(20px,5vw,62px); }
.reflection-card { width:min(1120px,100%); margin:0 auto; display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:20px; padding:28px; background:#fff0cf; border:2px dashed #8c653c; border-radius:9px 27px 8px 23px; }
.reflection-mark { width:76px; height:76px; position:relative; transform:rotate(-5deg); }
.reflection-mark:before { content:""; position:absolute; inset:8px 13px; background:#dfb85a; border:3px solid #694821; border-radius:2px 17px 3px 14px; box-shadow:6px 5px 0 #b7653d; }
.reflection-mark span { position:absolute; z-index:1; left:26px; width:25px; border-top:2px solid #6f522e; }
.reflection-mark span:nth-child(1){top:27px}.reflection-mark span:nth-child(2){top:37px}.reflection-mark span:nth-child(3){top:47px}
.reflection-card h2 { margin:9px 0 4px; font:700 26px/1.2 var(--display); }
.reflection-card p { margin:0; font-size:15px; }
.reflection-card p span { color:#73512e; font-size:13px; }
.feedback-section { padding:67px clamp(20px,5vw,62px) 54px; background:#f7e7c7; border-top:1px solid #956d3b4d; }
.feedback-intro { width:min(780px,100%); margin:0 auto 25px; text-align:center; }
.feedback-intro h2 { margin:15px 0 7px; font:700 clamp(30px,4vw,42px)/1.15 var(--display); }
.feedback-intro p { margin:0; }
.feedback-intro p span { color:#78542f; font-size:13px; }
#feedback-form { width:min(780px,100%); margin:0 auto; padding:23px; background:#fff0cf; border:1.5px solid #936c3e; border-radius:8px 24px 7px 20px; box-shadow:5px 6px #78563023; }
#feedback-form label { display:block; margin-bottom:14px; font-size:14px; font-weight:1000; }
#feedback-form label span { margin-left:5px; color:#946d40; font-size:10px; letter-spacing:.1em; }
#feedback-form input,#feedback-form textarea { display:block; width:100%; margin-top:7px; padding:12px 13px; color:var(--ink); background:#fffaf0; border:1px solid #9b794e; border-radius:6px; font:600 15px/1.5 var(--body); }
#feedback-form textarea { min-height:120px; resize:vertical; }
.feedback-submit { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.feedback-submit small { max-width:390px; color:#76532f; font-size:12px; }
.feedback-submit button:disabled { opacity:.65; cursor:wait; }
.form-status { min-height:20px; margin:8px 0 0; color:#326b60; font-size:13px; font-weight:900; }
.comments-heading { width:min(780px,100%); margin:34px auto 12px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.comments-heading h3 { margin:0; font:700 21px/1.2 var(--display); }
.comments-heading h3 span { margin-left:5px; color:#926c41; font:900 10px/1 var(--body); letter-spacing:.1em; }
.comments-heading > span { color:#76532f; font-size:12px; }
.comments-list { width:min(780px,100%); margin:0 auto; display:grid; gap:9px; }
.comment-card { display:flex; gap:12px; padding:15px; background:#fff8e7; border:1px solid #c2a273; border-radius:7px 17px 7px 14px; }
.comment-avatar { flex:none; display:grid; place-items:center; width:36px; height:36px; color:#fff0cf; background:var(--coral); border-radius:50%; font-size:16px; font-weight:1000; }
.comment-card:nth-child(3n + 2) .comment-avatar { background:var(--teal); }
.comment-card:nth-child(3n) .comment-avatar { background:var(--moss); }
.comment-body { min-width:0; flex:1; }
.comment-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.comment-head b { font-size:14px; }
.comment-head time { color:#8a704f; font-size:11px; white-space:nowrap; }
.comment-body p { margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.comments-empty { margin:0; padding:20px; color:#76532f; background:#fff8e7; border:1px dashed #b99a6f; text-align:center; }
.preview-note { width:min(780px,100%); margin:12px auto; padding:10px 13px; color:#684825; background:#f0d499; border-radius:5px; font-size:12px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px clamp(20px,5vw,62px); color:#fff0cf; background:#2f504e; font-size:12px; font-weight:900; letter-spacing:.04em; }
.site-footer a { color:#f0ca70; text-decoration:none; }
@media (max-width:760px) {
  .hero { min-height:auto; grid-template-columns:1fr; padding:42px 22px 76px; }
  .hero-copy { max-width:100%; }
  .hero h1 { font-size:clamp(76px,19vw,116px); }
  .hero-art { width:min(100%,430px); justify-self:center; margin-top:-5px; }
  .hero-routebar { flex-wrap:wrap; gap:8px; font-size:10px; }
  .routebar-end { display:none; }
  .journey-section { padding:52px 18px 40px; }
  .trail:before { inset:0 0 0 24px; background-position:left center; background-size:100% 100%; opacity:.65; }
  .day-row,.row-reverse { grid-template-columns:54px minmax(0,1fr); gap:9px; min-height:0; padding:14px 0 22px; }
  .day-copy,.row-reverse .day-copy { grid-column:2; grid-row:1; padding:18px 15px; }
  .day-marker { grid-column:1; grid-row:1; align-self:start; margin-top:25px; }
  .day-marker span { width:46px; height:46px; font-size:18px; border-width:3px; box-shadow:0 0 0 3px #704822,0 5px 0 #70482255; }
  .day-marker small { display:none; }
  .day-illustration,.row-reverse .day-illustration { grid-column:2; grid-row:2; min-height:0; padding:8px 0; }
  .day-illustration svg { width:min(83%,300px); }
  .day-copy h3 { font-size:clamp(24px,7vw,32px); }
  .day-kicker { font-size:10px; }
  .activity-pills span { font-size:9px; }
  .parent-section { padding:50px 18px 36px; }
  .parent-cards { grid-template-columns:1fr; }
  .parent-card { min-height:0; padding-bottom:20px; }
  .reflection-card { grid-template-columns:62px 1fr; gap:13px; padding:20px 15px; }
  .reflection-mark { width:58px; height:58px; transform:scale(.8) rotate(-5deg); transform-origin:left center; }
  .reflection-card h2 { font-size:22px; }
  .reflection-card p { font-size:13px; }
  .reflection-card .button { grid-column:1/-1; }
  #feedback-form { padding:17px; }
  .feedback-submit { align-items:flex-start; flex-direction:column; }
  .comments-heading { align-items:flex-start; flex-direction:column; }
  .site-footer { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}