/* 旅行杂志风样式 */
:root{--bg:#f6f7f9;--card:#ffffff;--accent:#ff6b35;--muted:#6b7280;--dark:#0b1220}
*{box-sizing:border-box}
.topnav{position:absolute;top:0;left:0;right:0;z-index:80;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:8px 0}
.nav-inner{display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 20px;max-width:1100px;margin:0 auto}
.brand{font-family:Merriweather,serif;font-size:20px;font-weight:700;color:var(--dark)}
.nav-actions .btn.small{padding:8px 12px;border-radius:8px;background:transparent;border:1px solid rgba(11,18,32,0.06);color:var(--dark)}

body{margin:0;font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;color:var(--dark);background:var(--bg);padding-top:0}
.container{max-width:1100px;margin:0 auto;padding:20px}

.topnav{/* replaced by fixed topnav above */}
.nav-inner{/* replaced by fixed nav-inner above */}
.brand{/* replaced by fixed brand above */}
.nav-actions .btn.small{/* replaced by fixed nav button styles above */}

.hero-mag{position:relative;min-height:420px;border-radius:10px;margin:12px 0 28px;overflow:hidden;background-image:linear-gradient(180deg,rgba(11,18,32,0.18),rgba(11,18,32,0.02)),url('../assets/background.jpg');background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0.25),rgba(11,18,32,0.05))}
.hero-content{position:relative;padding:64px 24px;color:#fff;z-index:2}
.hero-title{font-family:Merriweather,serif;font-size:48px;margin:0 0 8px}
.hero-lead{max-width:720px;color:rgba(255,255,255,0.9);margin:0 0 18px;font-size:18px}
.hero-mag{position:relative;min-height:100vh;border-radius:8px;margin:0;overflow:hidden;background-image:linear-gradient(180deg,rgba(11,18,32,0.18),rgba(11,18,32,0.02)),url('../assets/background.jpg');background-size:cover;background-position:center center;transition:background-position 0.6s ease,background-size 0.6s ease}
.hero-mag::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(11,18,32,0.0),var(--bg));pointer-events:none}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,0.32),rgba(11,18,32,0.06));transition:opacity 0.45s ease}
.hero-content{position:relative;padding:88px 20px 56px;color:#fff;z-index:2}
.hero-title{font-family:Merriweather,serif;font-size:44px;margin:0 0 8px}
.hero-lead{max-width:720px;color:rgba(255,255,255,0.95);margin:0 0 16px;font-size:18px}
.hero-cta .btn{margin-right:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:transparent;border:2px solid transparent;color:inherit;text-decoration:none}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.ghost{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.12)}
.btn.large{padding:12px 20px;font-size:16px}

.story-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:18px;margin:12px 0 36px}
.story{position:relative;overflow:hidden;border-radius:8px;background:#ddd}
.story img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.story:hover img{transform:scale(1.06)}
.story-meta{position:absolute;left:18px;bottom:18px;color:#fff;text-shadow:0 6px 20px rgba(2,6,23,0.6);max-width:88%}
.story h3,.story h4{margin:0 0 6px;font-family:Merriweather,serif}
.story p{margin:0;font-size:14px;color:rgba(255,255,255,0.92)}
.story.large{grid-column:span 3;grid-row:span 2}
.story.tall{grid-row:span 2}

.highlights{margin:18px 0 36px}
.highlights h2{font-family:Merriweather,serif;margin:0 0 14px}
.highlights .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.highlights .cards article{background:#fff;padding:18px;border-radius:10px;box-shadow:0 8px 24px rgba(11,18,32,0.06)}
.highlights h3{margin:0 0 8px}

.download-cta{text-align:center;background:linear-gradient(90deg,rgba(255,107,53,0.06),transparent);padding:24px;border-radius:10px;margin-bottom:36px}

.footer{padding:18px 0;text-align:center;color:var(--muted);font-size:14px}

@media(max-width:900px){
	.story-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:160px}
	.story.large{grid-column:span 2}
}
@media(max-width:600px){
	.container{padding:16px}
	.hero-title{font-size:32px}
	.story-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
	.story.large{grid-column:span 2}
	.hero-content{padding:64px 12px}
}