@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;800&family=ZCOOL+XiaoWei&display=swap');

:root { --ink:#193f3b; --deep:#123d3a; --pine:#1f5b54; --pine-2:#2d7565; --celadon:#b8d2c3; --mist:#dce9dc; --paper:#f3eddf; --paper-dark:#e8ddc8; --cream:#fbf7ec; --cinnabar:#c86e4b; --amber:#e4ab54; --sky:#a6c9ca; --line:rgba(25,63,59,.18); --shadow:0 24px 60px rgba(20,55,49,.13); --serif:'Noto Serif SC','Songti SC','STSong',serif; --display:'ZCOOL XiaoWei','Kaiti SC','STKaiti',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--serif); line-height:1.75; overflow-x:hidden; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-2; background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.68),transparent 28%), radial-gradient(circle at 12% 60%,rgba(207,224,208,.45),transparent 29%), linear-gradient(115deg,#f3eddf 0%,#eee6d4 55%,#e6dec9 100%); }
.paper-grain { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.section-shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; width:min(1240px,calc(100% - 32px)); margin:14px auto 0; padding:12px 18px; border:1px solid rgba(25,63,59,.14); border-radius:999px; background:rgba(248,243,231,.85); box-shadow:0 8px 26px rgba(28,61,54,.08); backdrop-filter:blur(18px); }
.brand,.footer-brand { display:flex; align-items:center; gap:10px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--cinnabar); color:var(--cinnabar); border-radius:50% 44% 48% 40%; font-family:var(--display); font-size:24px; line-height:1; transform:rotate(-8deg); }
.brand strong,.footer-brand strong { display:block; font-family:var(--display); font-size:21px; font-weight:400; letter-spacing:.06em; line-height:1.1; }
.brand small,.footer-brand small { display:block; margin-top:3px; color:var(--pine-2); font:10px/1.2 var(--serif); letter-spacing:.13em; }
.site-nav { display:flex; gap:4px; align-items:center; }
.site-nav a { padding:8px 12px; border-radius:999px; color:rgba(25,63,59,.68); font-size:12px; transition:.25s ease; }
.site-nav a:hover,.site-nav a.active { color:var(--cream); background:var(--pine); }
.menu-toggle { display:none; border:0; background:none; color:var(--ink); }
.hero { min-height:560px; display:grid; grid-template-columns:.92fr 1.08fr; gap:28px; align-items:center; padding:58px 0 44px; }
.hero-copy { position:relative; z-index:2; padding:12px 0 0 7%; }
.eyebrow { margin:0 0 15px; color:var(--cinnabar); font-size:11px; font-weight:700; letter-spacing:.22em; }
.eyebrow-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--cinnabar); box-shadow:0 0 0 5px rgba(200,110,75,.14); }
h1,h2,h3,h4,h5,p { margin-top:0; }
h1,h2,h3,h4,h5 { font-weight:600; }
h1,h2 { letter-spacing:-.04em; }
h1 { margin-bottom:24px; color:var(--deep); font-family:var(--display); font-size:clamp(56px,7vw,96px); font-weight:400; line-height:1.02; }
h1 em,h2 em { color:var(--cinnabar); font-style:normal; }
.hero-lede { max-width:420px; color:rgba(25,63,59,.76); font-size:15px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 20px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; min-width:166px; padding:12px 17px; border:1px solid transparent; border-radius:3px 16px 4px 15px; font-size:13px; transition:transform .25s,box-shadow .25s,background .25s; }
.button:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(25,63,59,.14); }
.button-primary { color:var(--cream); background:var(--pine); }
.button-quiet { border-color:var(--line); color:var(--pine); background:rgba(255,255,255,.22); }
.button-light { color:var(--deep); background:var(--cream); }
.hero-notes { display:flex; flex-wrap:wrap; gap:8px; color:var(--pine-2); font-size:11px; }
.hero-notes span { padding:3px 8px; border-bottom:1px dashed var(--pine-2); }
.hero-art { position:relative; min-height:410px; overflow:hidden; border-radius:47% 53% 8% 10% / 8% 8% 12% 12%; background:linear-gradient(145deg,#d3e1d3,#8fb4a5 49%,#2a6258); box-shadow:var(--shadow); transform:rotate(2deg); }
.hero-art:after { content:''; position:absolute; inset:18px; border:1px solid rgba(247,240,215,.45); border-radius:inherit; pointer-events:none; }
.sun-disc { position:absolute; top:55px; right:92px; width:116px; height:116px; border-radius:50%; background:#edc474; box-shadow:0 0 0 16px rgba(237,196,116,.12),0 0 55px rgba(237,196,116,.35); }
.landscape-svg { position:absolute; inset:auto 0 0; width:100%; height:88%; }
.stamp { position:absolute; display:grid; place-items:center; width:80px; height:80px; border:2px solid rgba(248,231,192,.86); border-radius:47% 53% 41% 59%; color:#f8e7c0; font-family:var(--display); font-size:23px; line-height:.9; text-align:center; transform:rotate(-14deg); }
.stamp small { font-size:13px; }
.stamp-top { top:35px; left:48px; }
.art-caption { position:absolute; right:38px; bottom:31px; left:38px; display:flex; justify-content:space-between; color:#e9ddc5; font-size:11px; letter-spacing:.1em; }
.art-caption span:first-child { font-family:var(--display); font-size:24px; }
.intro { padding:64px 0 76px; }
.section-heading { max-width:510px; }
.section-heading h2 { margin-bottom:18px; color:var(--deep); font-family:var(--display); font-size:clamp(42px,5vw,68px); font-weight:400; line-height:1.12; }
.section-heading > p:last-child { color:rgba(25,63,59,.72); font-size:14px; }
.route-overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
.route-summary { position:relative; min-height:218px; padding:23px 25px 22px; border:1px solid rgba(25,63,59,.15); border-radius:4px 30px 5px 28px; background:rgba(251,247,236,.75); box-shadow:0 15px 35px rgba(25,63,59,.07); overflow:hidden; }
.route-summary:after { content:'山'; position:absolute; right:15px; bottom:-36px; color:rgba(184,210,195,.32); font:180px/1 var(--display); transform:rotate(-13deg); }
.route-summary-long { background:var(--pine); color:var(--cream); border-color:transparent; transform:translateY(16px); }
.route-summary-long:after { color:rgba(233,221,197,.13); }
.card-topline { position:relative; z-index:1; display:flex; justify-content:space-between; color:var(--pine-2); font-size:10px; letter-spacing:.14em; }
.route-summary-long .card-topline { color:var(--celadon); }
.route-badge { padding:4px 8px; border-radius:999px; color:var(--pine); background:var(--celadon); font-size:10px; letter-spacing:0; }
.route-badge-amber { color:var(--deep); background:var(--amber); }
.route-summary h3 { position:relative; z-index:1; margin:20px 0 4px; font-family:var(--display); font-size:43px; font-weight:400; line-height:1; }
.route-tagline { position:relative; z-index:1; margin-bottom:18px; font-size:13px; }
.route-meta { position:relative; z-index:1; display:grid; gap:2px; color:rgba(25,63,59,.68); font-size:11px; }
.route-summary-long .route-meta { color:rgba(251,247,236,.72); }
.text-link { position:relative; z-index:1; display:inline-flex; gap:10px; align-items:center; margin-top:21px; color:var(--cinnabar); font-size:12px; font-weight:700; }
.text-link span { font-size:18px; transition:transform .2s; }
.text-link:hover span { transform:translateX(4px); }
.quick-facts { display:grid; grid-template-columns:130px 130px 130px 1fr; gap:20px; align-items:center; margin-top:82px; padding:23px 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quick-facts div { display:flex; align-items:baseline; gap:7px; }
.quick-facts strong { color:var(--cinnabar); font:42px/1 var(--display); }
.quick-facts span { color:var(--pine-2); font-size:11px; }
.quick-facts p { margin:0; justify-self:end; color:rgba(25,63,59,.65); font-size:12px; }
.route-section { padding:72px 0 86px; }
.section-heading-row { max-width:none; display:flex; justify-content:space-between; align-items:end; gap:20px; }
.section-heading-row h2 { margin-bottom:0; }
.route-switcher { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.24); }
.route-tab { border:0; border-radius:999px; padding:8px 15px; color:rgba(25,63,59,.65); background:transparent; cursor:pointer; font-size:12px; transition:.2s; }
.route-tab:hover,.route-tab.is-selected { color:var(--cream); background:var(--pine); }
.route-panel { margin-top:22px; animation:panel-in .45s ease both; }
.route-panel[hidden] { display:none; }
@keyframes panel-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
.route-panel-header { display:flex; justify-content:space-between; gap:24px; padding:22px 0 20px; border-top:2px solid var(--pine); border-bottom:1px solid var(--line); }
.route-number { color:var(--cinnabar); font:12px/1 var(--serif); letter-spacing:.22em; }
.route-panel-header h3 { margin:11px 0 5px; font-family:var(--display); font-size:37px; font-weight:400; line-height:1.15; }
.route-panel-header p { max-width:660px; margin:0; color:rgba(25,63,59,.7); font-size:13px; }
.route-note { align-self:center; min-width:200px; padding:12px 16px; border-left:3px solid var(--cinnabar); background:rgba(255,255,255,.3); }
.route-note span,.route-note small { display:block; color:var(--cinnabar); font-size:10px; letter-spacing:.1em; }
.route-note strong { display:block; margin:6px 0 3px; font-size:14px; }
.route-note small { color:rgba(25,63,59,.6); letter-spacing:0; }
.route-note-warm { border-left-color:var(--amber); }.route-note-warm span { color:#ad7131; }
.timeline { margin-top:16px; }
.timeline-day { display:grid; grid-template-columns:86px 1fr; gap:20px; padding:18px 0 20px; border-bottom:1px dashed rgba(25,63,59,.25); }
.day-marker { display:flex; flex-direction:column; align-items:center; width:58px; height:58px; padding-top:8px; border:1px solid var(--cinnabar); border-radius:50%; color:var(--cinnabar); transform:rotate(-7deg); }
.day-marker span { font-size:9px; letter-spacing:.16em; line-height:1; }.day-marker strong { font:31px/.95 var(--display); }
.day-title { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:12px; }.day-title h4 { margin:0; font-family:var(--display); font-size:29px; font-weight:400; }.day-mood { padding:4px 9px; border-radius:2px 10px 2px 9px; color:var(--pine); background:var(--celadon); font-size:10px; white-space:nowrap; }.day-mood-peak { color:#794f24; background:#efd09a; }
.timeline-items { display:grid; gap:0; }
.timeline-item { display:grid; grid-template-columns:108px 1fr; gap:14px; position:relative; padding:0 0 13px 20px; }.timeline-item:before { content:''; position:absolute; top:8px; left:0; width:8px; height:8px; border:2px solid var(--cinnabar); border-radius:50%; background:var(--paper); }.timeline-item:not(:last-child):after { content:''; position:absolute; top:18px; bottom:0; left:4px; border-left:1px solid rgba(200,110,75,.4); }.timeline-item time { color:var(--cinnabar); font-size:11px; letter-spacing:.05em; }.timeline-item h5 { margin:0 0 2px; font-size:15px; font-weight:700; }.timeline-item p { margin:0; color:rgba(25,63,59,.68); font-size:12px; }.mini-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }.mini-tags span { padding:1px 6px; border:1px solid rgba(45,117,101,.25); border-radius:999px; color:var(--pine-2); font-size:10px; }
.gentle-plan { display:flex; gap:12px; align-items:baseline; margin:2px 0 0 20px; padding:10px 13px; border-left:2px solid var(--amber); background:rgba(228,171,84,.1); }.gentle-plan strong { flex:none; color:#956228; font-size:12px; }.gentle-plan span { color:rgba(25,63,59,.72); font-size:11px; }
.info-section { padding:72px 0 82px; }.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }.info-card { position:relative; min-height:285px; padding:26px; overflow:hidden; border-radius:4px 38px 4px 31px; background:var(--deep); color:var(--cream); }.info-card:nth-child(2) { background:#d5e4d6; color:var(--deep); transform:translateY(24px); }.info-card:after { content:''; position:absolute; right:-10px; bottom:-40px; width:190px; height:190px; border:1px solid currentColor; border-radius:50%; opacity:.18; }.icon-badge { display:grid; place-items:center; width:37px; height:37px; margin-bottom:20px; border:1px solid var(--amber); border-radius:50%; color:var(--amber); font:24px/1 var(--display); }.info-card h3 { margin-bottom:14px; font-family:var(--display); font-size:34px; font-weight:400; }.info-card ul { position:relative; z-index:1; display:grid; gap:10px; margin:0; padding-left:17px; font-size:12px; }.info-card li::marker { color:var(--amber); }.info-card li strong { color:var(--amber); font-weight:600; }.info-card:nth-child(2) li strong { color:var(--cinnabar); }.card-footnote { position:absolute; right:26px; bottom:21px; color:rgba(255,248,229,.64); font-size:10px; }.info-card:nth-child(2) .card-footnote { color:rgba(25,63,59,.6); }
.food-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:58px; align-items:start; padding:72px 0 82px; border-top:1px solid var(--line); }.food-copy h2 { margin-bottom:20px; color:var(--deep); font-family:var(--display); font-size:clamp(40px,5vw,64px); font-weight:400; line-height:1.13; }.food-copy > p:not(.eyebrow) { color:rgba(25,63,59,.7); font-size:13px; }.food-list { border-top:2px solid var(--pine); }.food-item { display:grid; grid-template-columns:45px 1fr 65px; gap:15px; align-items:center; padding:15px 0; border-bottom:1px dashed rgba(25,63,59,.25); }.food-index { color:var(--cinnabar); font:24px/1 var(--display); }.food-item h3 { margin:0 0 3px; font-size:17px; }.food-item p { margin:0; color:rgba(25,63,59,.64); font-size:11px; }.spice { color:var(--cinnabar); font-size:11px; letter-spacing:3px; white-space:nowrap; }.spice-mild { color:var(--amber); }
.checklist-section { padding:72px 0 82px; }.checklist-layout { display:grid; grid-template-columns:1fr .8fr; gap:50px; align-items:start; margin-top:28px; }.checklist { border-top:2px solid var(--pine); }.checklist label { display:flex; align-items:center; gap:15px; min-height:56px; padding:10px 0; border-bottom:1px dashed rgba(25,63,59,.25); cursor:pointer; font-size:13px; }.checklist input { position:absolute; opacity:0; }.checkmark { position:relative; flex:none; width:21px; height:21px; border:1px solid var(--pine); border-radius:50%; background:transparent; transition:.2s; }.checklist input:checked + .checkmark { border-color:var(--cinnabar); background:var(--cinnabar); }.checklist input:checked + .checkmark:after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:var(--cream); font-size:13px; }.checklist input:checked ~ span:last-child { color:rgba(25,63,59,.42); text-decoration:line-through; }.checklist label:focus-within .checkmark { outline:3px solid rgba(200,110,75,.25); outline-offset:3px; }
.weather-note { position:relative; padding:27px 28px 24px; border-radius:45% 8% 42% 7% / 8% 9% 7% 8%; background:var(--cinnabar); color:#fff6e2; box-shadow:0 22px 45px rgba(151,69,43,.18); transform:rotate(2deg); }.weather-note:after { content:''; position:absolute; inset:14px; border:1px solid rgba(255,246,226,.45); border-radius:inherit; }.weather-icon { position:relative; z-index:1; width:44px; height:44px; margin-bottom:17px; border-radius:50%; background:var(--amber); }.weather-icon:before { content:''; position:absolute; top:8px; left:11px; width:21px; height:21px; border-radius:50%; background:#fff1c9; }.weather-icon:after { content:''; position:absolute; right:8px; bottom:8px; width:19px; height:8px; border-radius:10px; background:#fff1c9; }.weather-note .note-label { position:relative; z-index:1; font-size:10px; letter-spacing:.18em; }.weather-note h3 { position:relative; z-index:1; margin:18px 0 13px; font-family:var(--display); font-size:34px; font-weight:400; line-height:1.22; }.weather-note p { position:relative; z-index:1; margin:0; color:rgba(255,246,226,.84); font-size:12px; }.note-line { position:relative; z-index:1; width:100%; margin:23px 0 11px; border-top:1px dashed rgba(255,246,226,.55); }.weather-note small { position:relative; z-index:1; font-size:10px; }
.decision { display:flex; align-items:center; gap:24px; padding:30px 36px; border-radius:4px 48px 4px 43px; background:var(--pine); color:var(--cream); box-shadow:var(--shadow); }.decision h2 { margin-bottom:12px; color:var(--cream); font-family:var(--display); font-size:clamp(29px,4vw,47px); font-weight:400; line-height:1.18; }.decision .eyebrow { color:var(--amber); }.decision p:last-child { max-width:660px; margin:0; color:rgba(251,247,236,.76); font-size:12px; }.decision-stamp { display:grid; place-items:center; flex:none; width:72px; height:72px; border:1px solid var(--amber); border-radius:46% 54% 49% 51%; color:var(--amber); font:25px/1.05 var(--display); text-align:center; transform:rotate(10deg); }.decision .button { flex:none; margin-left:auto; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:48px 0 32px; color:rgba(25,63,59,.65); }.footer-brand strong { color:var(--deep); }.footer-brand small { color:rgba(25,63,59,.55); }.site-footer p { max-width:485px; margin:0; font-size:10px; }.footer-seal { display:grid; place-items:center; width:65px; height:65px; border:1px solid var(--cinnabar); border-radius:50%; color:var(--cinnabar); font:14px/1.15 var(--display); text-align:center; transform:rotate(-9deg); }
.back-to-top { position:fixed; right:20px; bottom:20px; z-index:15; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--pine); border-radius:50%; color:var(--cream); background:var(--pine); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px); transition:.25s; }.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:none; }.back-to-top:hover { background:var(--cinnabar); border-color:var(--cinnabar); }
.reveal { animation:reveal .75s cubic-bezier(.2,.75,.25,1) both; }.reveal-delay { animation-delay:.14s; } @keyframes reveal { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:800px) { .section-shell { width:min(100% - 32px,620px); }.site-header { width:calc(100% - 20px); margin-top:10px; }.menu-toggle { display:flex; flex-direction:column; gap:4px; padding:8px; cursor:pointer; }.menu-toggle > span:not(.sr-only) { display:block; width:21px; height:1px; background:var(--ink); }.site-nav { position:absolute; top:calc(100% + 8px); right:0; left:0; display:grid; gap:3px; padding:8px; border:1px solid var(--line); border-radius:18px; background:rgba(248,243,231,.97); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(-7px); transition:.2s; }.site-nav.is-open { opacity:1; pointer-events:auto; transform:none; }.site-nav a { padding:10px 13px; }.hero { grid-template-columns:1fr; min-height:0; padding:48px 0 38px; }.hero-copy { padding:0 5%; }.hero-art { min-height:300px; margin-top:4px; }.sun-disc { top:38px; right:55px; width:82px; height:82px; }.intro,.route-section,.info-section,.food-section,.checklist-section { padding-top:48px; padding-bottom:56px; }.route-overview-grid,.info-grid,.checklist-layout,.food-section { grid-template-columns:1fr; gap:16px; }.route-summary-long,.info-card:nth-child(2) { transform:none; }.quick-facts { grid-template-columns:1fr 1fr; margin-top:48px; }.quick-facts p { grid-column:1/-1; justify-self:start; margin-top:8px; }.section-heading-row { display:block; }.route-switcher { width:max-content; margin-top:23px; }.route-panel-header { display:block; }.route-note { margin-top:24px; }.timeline-day { grid-template-columns:62px 1fr; gap:10px; }.day-marker { width:50px; height:50px; }.day-marker strong { font-size:26px; }.day-title { display:block; }.day-mood { display:inline-block; margin-top:5px; }.timeline-item { grid-template-columns:1fr; gap:1px; padding-left:18px; }.timeline-item time { font-size:10px; }.gentle-plan { display:block; margin-left:18px; }.gentle-plan strong,.gentle-plan span { display:block; }.gentle-plan strong { margin-bottom:3px; }.food-copy { max-width:500px; }.decision { display:grid; grid-template-columns:64px 1fr; gap:16px; padding:24px 20px; }.decision .button { grid-column:1/-1; margin:0; width:max-content; }.site-footer { align-items:flex-start; flex-wrap:wrap; padding-top:40px; }.site-footer p { order:3; flex-basis:100%; }.footer-seal { margin-left:auto; } }
@media (max-width:480px) { h1 { font-size:54px; }.hero-art { min-height:260px; }.stamp-top { top:27px; left:27px; transform:scale(.8) rotate(-14deg); }.art-caption { right:23px; bottom:22px; left:23px; }.route-summary { min-height:0; padding:20px; }.route-summary h3 { font-size:38px; }.route-panel-header h3 { font-size:31px; }.day-title h4 { font-size:24px; }.quick-facts strong { font-size:35px; }.info-card { padding:23px; min-height:0; }.weather-note { padding:23px; }.site-footer { gap:16px; }.brand strong { font-size:18px; }.brand small { font-size:8px; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:3px solid rgba(200,110,75,.5); outline-offset:4px; }

/* UX refinement: one clear route-selection flow */
#choose-route,
#routes,
#logistics,
#food,
#checklist {
  scroll-margin-top: 108px;
}

.hero-action-label {
  margin: 22px 0 -14px;
  color: rgba(25,63,59,.54);
  font-size: 10px;
  letter-spacing: .08em;
}

.hero-notes {
  gap: 0;
  color: rgba(45,117,101,.72);
}

.hero-notes span {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  cursor: default;
}

.hero-notes span:not(:last-child)::after {
  content: '·';
  margin: 0 8px;
  color: var(--cinnabar);
}

.route-summary {
  display: block;
  cursor: pointer;
  isolation: isolate;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.route-summary::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 1px solid transparent;
  border-radius: 2px 24px 3px 22px;
  pointer-events: none;
  transition: border-color .28s ease;
}

.route-summary::after {
  pointer-events: none;
}

.route-summary:hover,
.route-summary:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px rgba(25,63,59,.14);
}

.route-summary-long:hover,
.route-summary-long:focus-visible {
  transform: translateY(11px);
}

.route-summary.is-active {
  border-color: var(--cinnabar);
  box-shadow: 0 20px 45px rgba(25,63,59,.12), 0 0 0 3px rgba(200,110,75,.12);
}

.route-summary.is-active::before {
  border-color: rgba(200,110,75,.36);
}

.route-summary-long.is-active {
  border-color: var(--amber);
  box-shadow: 0 22px 48px rgba(18,61,58,.2), 0 0 0 3px rgba(228,171,84,.15);
}

.route-summary-long.is-active::before {
  border-color: rgba(228,171,84,.45);
}

.card-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  color: var(--cinnabar);
  font-size: 12px;
  font-weight: 700;
}

.card-action span {
  font-size: 18px;
  transition: transform .2s ease;
}

.route-summary:hover .card-action span,
.route-summary:focus-visible .card-action span {
  transform: translateX(5px);
}

.route-summary-long .card-action {
  color: #f0b06f;
}

.route-badge,
.mini-tags span,
.info-card,
.food-item {
  cursor: default;
}

.mini-tags {
  gap: 0;
  color: rgba(45,117,101,.76);
}

.mini-tags span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mini-tags span:not(:last-child)::after {
  content: ' / ';
  margin: 0 5px;
  color: rgba(200,110,75,.66);
}

.family-principles {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: stretch;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.fact-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fact-strip > div {
  display: grid;
  align-content: center;
  min-height: 88px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(25,63,59,.2);
}

.fact-strip strong {
  color: var(--cinnabar);
  font: 38px/1.1 var(--display);
}

.fact-strip span {
  margin-top: 7px;
  color: rgba(25,63,59,.62);
  font-size: 10px;
  letter-spacing: .04em;
}

.principle-card {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 88px;
  padding: 17px 22px 17px 24px;
  border-left: 3px solid var(--amber);
  background: rgba(228,171,84,.1);
}

.principle-label {
  color: #9a6328;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}

.principle-card p {
  margin: 8px 0 0;
  color: rgba(25,63,59,.72);
  font-size: 12px;
}

.principle-card strong {
  color: var(--deep);
  font-size: 14px;
}

.route-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 390px);
  gap: 32px;
  align-items: end;
}

.route-heading h2 {
  margin: 0;
  color: var(--deep);
  font-family: var(--display);
  font-size: clamp(42px,5vw,68px);
  font-weight: 400;
  line-height: 1.12;
}

.route-heading > p {
  margin: 0 0 8px;
  color: rgba(25,63,59,.66);
  font-size: 12px;
}

.route-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(243,237,223,.8);
}

.route-controls-label {
  color: rgba(25,63,59,.55);
  font-size: 10px;
  letter-spacing: .13em;
}

.route-switcher {
  flex: none;
}

.route-panel {
  margin-top: 22px;
}

.decision {
  align-items: flex-start;
}

.decision-copy {
  min-width: 0;
}

.decision-list {
  display: grid;
  gap: 8px;
  max-width: 760px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(251,247,236,.18);
  list-style: none;
}

.decision-list li {
  position: relative;
  padding-left: 17px;
  color: rgba(251,247,236,.78);
  font-size: 12px;
}

.decision-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--amber);
}

.decision-list strong {
  color: var(--cream);
}

@media (max-width: 800px) {
  #choose-route,
  #routes,
  #logistics,
  #food,
  #checklist {
    scroll-margin-top: 92px;
  }

  .hero-action-label {
    margin-top: 24px;
  }

  .route-summary-long,
  .route-summary-long:hover,
  .route-summary-long:focus-visible {
    transform: none;
  }

  .route-summary:hover,
  .route-summary:focus-visible {
    transform: none;
  }

  .family-principles {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .route-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .route-controls {
    position: sticky;
    top: 78px;
    z-index: 12;
    margin: 16px -8px 0;
    padding: 7px 9px;
    border: 1px solid rgba(25,63,59,.14);
    border-radius: 16px;
    background: rgba(248,243,231,.94);
    box-shadow: 0 10px 28px rgba(25,63,59,.1);
    backdrop-filter: blur(16px);
  }

  .route-switcher {
    width: auto;
    margin-top: 0;
  }

  .decision {
    grid-template-columns: 64px 1fr;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .button {
    width: 100%;
  }

  .route-summary {
    min-height: 0;
    padding: 20px;
  }

  .route-summary h3 {
    font-size: 38px;
  }

  .fact-strip {
    grid-template-columns: 1fr;
  }

  .fact-strip > div {
    min-height: 86px;
  }

  .route-controls-label {
    display: none;
  }

  .route-controls {
    justify-content: center;
  }

  .route-switcher,
  .route-tab {
    width: 100%;
  }

  .route-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .decision {
    display: block;
  }

  .decision-stamp {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    font-size: 20px;
  }
}

@media (max-width: 800px) {
  .site-nav {
    visibility: hidden;
    transition: opacity .2s, transform .2s;
  }

  .site-nav.is-open {
    visibility: visible;
  }
}