/* ===== hunanfun.com — shared stylesheet ===== */

:root{
  --ink: #12181A;
  --ink-soft: #1D2624;
  --paper: #F3ECDC;
  --paper-dim: #E7DDC6;
  --jade: #3E6459;
  --jade-deep: #223B34;
  --mist: #8FAE9F;
  --chili: #C0392B;
  --chili-bright: #E0492F;
  --gold: #C9A24B;
  --line: rgba(243,236,220,0.14);
  --line-dark: rgba(18,24,26,0.12);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

h1,h2,h3,h4, .display{
  font-family: 'Noto Serif SC', serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.mono{ font-family: 'Space Mono', monospace; }
a{ color: inherit; }
img,svg{ max-width:100%; }

.eyebrow{
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chili);
}
.eyebrow.on-dark{ color: var(--gold); }

/* ================= SITE NAV (used on every page) ================= */
.site-nav{
  position: relative;
  z-index: 20;
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 1.6rem 2.4rem;
}
.site-nav.on-light{ background: var(--paper); border-bottom: 1px solid var(--line-dark); }
.brand{
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  display:flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
}
.brand .dot{ width:8px; height:8px; border-radius:50%; background: var(--chili-bright); display:inline-block; }
.site-nav ul{
  list-style:none;
  display:flex;
  gap: 2rem;
  font-size: 0.82rem;
  letter-spacing:0.04em;
}
.site-nav ul a{ text-decoration:none; transition: color .25s ease; }
.site-nav.on-dark ul a{ color: var(--mist); }
.site-nav.on-dark ul a:hover, .site-nav.on-dark ul a.current{ color: var(--paper); }
.site-nav.on-light ul a{ color: #5c5647; }
.site-nav.on-light ul a:hover, .site-nav.on-light ul a.current{ color: var(--chili); }

/* ================= HERO (home page) ================= */
.hero{
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #0C1214 0%, var(--ink) 45%, var(--jade-deep) 100%);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero-mist-wrap{ position:absolute; inset:0; z-index:1; }
.mountains{ position:absolute; bottom:0; left:0; width:100%; }
.mist-layer{
  position:absolute; left:-10%; width:120%; height:180px;
  background: linear-gradient(90deg, transparent, rgba(243,236,220,0.10), transparent);
  filter: blur(6px); opacity:0.5;
}
.mist1{ bottom: 22%; animation: drift 34s linear infinite; }
.mist2{ bottom: 12%; animation: drift 46s linear infinite reverse; opacity:0.35;}
.mist3{ bottom: 4%; animation: drift 60s linear infinite; opacity:0.6;}
@keyframes drift{ from{ transform: translateX(-6%); } to{ transform: translateX(6%); } }

.hero-content{
  position:relative; z-index: 10; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding: 2rem 2.4rem 8rem; max-width: 1100px;
}
.hero-title{ font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.97; margin: 1rem 0 1.4rem; }
.hero-title .accent{ color: var(--chili-bright); }
.hero-sub{ max-width: 46ch; color: var(--mist); font-size: 1.08rem; }
.hero-cta{ margin-top: 2.4rem; display:flex; gap: 1rem; align-items:center; flex-wrap: wrap; }

.btn{
  display:inline-flex; align-items:center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: 999px;
  font-family:'Space Mono', monospace; font-size: 0.82rem; letter-spacing: 0.03em;
  text-decoration:none; border: 1px solid var(--line); transition: all .25s ease;
}
.btn-solid{ background: var(--chili-bright); color: var(--paper); border-color: var(--chili-bright); }
.btn-solid:hover{ background: #c9401f; transform: translateY(-2px); }
.btn-outline{ color: var(--paper); }
.btn-outline:hover{ background: rgba(243,236,220,0.08); transform: translateY(-2px); }
.btn-outline.on-light{ color: var(--ink); border-color: var(--line-dark); }
.btn-outline.on-light:hover{ background: rgba(18,24,26,0.05); }

.scroll-cue{
  position:absolute; bottom: 2rem; left: 2.4rem; z-index: 10;
  font-family:'Space Mono', monospace; font-size: 0.7rem; color: var(--mist);
  display:flex; align-items:center; gap:0.6rem; letter-spacing:0.1em;
}
.scroll-cue .bar{ width:1px; height: 34px; background: var(--mist); position:relative; overflow:hidden; }
.scroll-cue .bar::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--chili-bright); animation: fall 2.2s ease-in-out infinite;
}
@keyframes fall{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ================= SECTION SHELL ================= */
section{ padding: 6rem 2.4rem; max-width: 1280px; margin: 0 auto; }
.section-head{ max-width: 62ch; margin-bottom: 3.2rem; }
.section-head h2{ font-size: clamp(2rem, 4vw, 3rem); margin-top: 0.6rem; color: var(--jade-deep); }
.section-head p{ margin-top: 1rem; color: #4b453a; }

/* ================= DESTINATIONS GRID ================= */
.dest-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }

.dest-card{
  background: var(--ink); color: var(--paper); border-radius: 4px;
  padding: 2rem 1.8rem 2.2rem; position:relative; overflow:hidden;
  min-height: 340px; display:flex; flex-direction:column; justify-content: flex-end;
  isolation:isolate; text-decoration:none; transition: transform .3s ease, box-shadow .3s ease;
}
.dest-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(18,24,26,0.25); }
.dest-card .glyph-wrap{ position:absolute; top:0; right:0; width:100%; height:62%; z-index:-1; overflow:hidden; }
.dest-card .glyph-wrap svg{ position:absolute; inset:0; width:100%; height:100%; opacity:0.9; }
.dest-card .glyph-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dest-card .glyph-wrap::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,24,26,0) 45%, rgba(18,24,26,0.9) 100%);
}
.dest-card .tag{
  font-family:'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem;
}
.dest-card h3{ font-size: 1.5rem; margin-bottom: 0.6rem; line-height:1.15; }
.dest-card p{ font-size: 0.92rem; color: var(--mist); margin-bottom: 1rem; }
.dest-card .tip{
  font-family:'Space Mono', monospace; font-size: 0.72rem; color: var(--paper);
  border-top: 1px solid var(--line); padding-top: 0.8rem; display:flex; gap:0.5rem;
}
.dest-card .tip::before{ content:"◆"; color: var(--chili-bright); }
.dest-card .go{
  font-family:'Space Mono', monospace; font-size: 0.72rem; color: var(--gold);
  margin-top: 0.9rem; display:flex; align-items:center; gap:0.4rem;
}

/* ================= FOOD ================= */
.food-wrap{ background: var(--jade-deep); color: var(--paper); border-radius: 4px; padding: 3rem 2.4rem; }
.food-wrap .section-head p{ color: var(--mist); }
.food-wrap .section-head h2{ color: var(--paper); }
.food-wrap .eyebrow{ color: var(--gold); }
.menu-list{ list-style:none; border-top: 1px solid var(--line); }
.menu-item{
  display:grid; grid-template-columns: 100px 1fr auto auto; gap: 1rem 1.6rem;
  align-items:center; padding: 1.3rem 0; border-bottom: 1px solid var(--line);
}
.dish-photo{
  width:100px; height:100px; border-radius:6px; overflow:hidden; background: var(--line);
  grid-row: span 2; align-self: center;
}
.dish-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.menu-item .name{ font-family:'Noto Serif SC', serif; font-weight:700; font-size: 1.15rem; }
.menu-item .desc{ grid-column: 2 / -1; font-size: 0.88rem; color: var(--mist); margin-top: -0.6rem; }
.heat{ display:flex; gap: 4px; font-family:'Space Mono', monospace; font-size: 0.65rem; align-items:center; color: var(--mist); }
.heat .dot{ width: 9px; height: 9px; border-radius:50%; background: var(--line); }
.heat .dot.lit{ background: var(--chili-bright); }
.romanized{ font-family:'Space Mono', monospace; font-size: 0.72rem; color: var(--gold); }

/* ================= PRACTICAL ================= */
.practical-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-top: 1rem; }
.practical-item{ border-left: 2px solid var(--chili); padding-left: 1.2rem; }
.practical-item .eyebrow{ margin-bottom: 0.4rem; }
.practical-item h4{ font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--jade-deep); }
.practical-item p{ font-size: 0.9rem; color: #4b453a; }

.route-map{ margin-top: 3.5rem; background: var(--paper-dim); border-radius: 4px; padding: 2rem; overflow-x:auto; }
.route-map svg{ display:block; min-width: 640px; width:100%; height:auto; }

/* ================= PAGE HERO (destination sub-pages) ================= */
.page-hero{
  position:relative; background: var(--ink); color: var(--paper);
  overflow:hidden; padding-bottom: 3.5rem;
}
.page-hero-banner{ position:relative; height: 280px; overflow:hidden; }
.page-hero-banner svg{ position:absolute; inset:0; width:100%; height:100%; }
.page-hero-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-banner::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,24,26,0.05) 0%, rgba(18,24,26,0.75) 100%);
}
.page-hero-inner{ padding: 2.4rem 2.4rem 0; max-width: 1280px; margin: 0 auto; }
.breadcrumb{
  font-family:'Space Mono', monospace; font-size: 0.72rem; color: var(--mist);
  display:flex; gap: 0.5rem; align-items:center; margin-bottom: 1.6rem; flex-wrap:wrap;
}
.breadcrumb a{ text-decoration:none; color: var(--mist); }
.breadcrumb a:hover{ color: var(--paper); }
.breadcrumb .sep{ color: var(--line); }
.page-hero h1{ font-size: clamp(2.4rem, 6vw, 4.2rem); line-height:0.98; margin-bottom: 1rem; }
.page-hero .hook{ max-width: 56ch; color: var(--mist); font-size: 1.05rem; }

/* ================= ARTICLE LAYOUT ================= */
.article-shell{ padding: 4.5rem 2.4rem; max-width: 1280px; margin:0 auto; }
.article-grid{ display:grid; grid-template-columns: 1fr 300px; gap: 3.5rem; align-items:start; }
.article-body p{ margin-bottom: 1.2rem; max-width: 66ch; color: #4b453a; }
.article-body h2{ font-size: 1.6rem; color: var(--jade-deep); margin: 2.4rem 0 1rem; }
.article-body h2:first-child{ margin-top:0; }

.highlights{ list-style:none; margin: 1.2rem 0 1.6rem; }
.highlights li{
  position:relative; padding-left: 1.6rem; margin-bottom: 0.9rem;
  max-width: 60ch; color: #34302a;
}
.highlights li::before{ content:"◆"; color: var(--chili); position:absolute; left:0; top:0.1em; font-size:0.75em; }
.highlights li strong{ color: var(--ink); }

.figure-photo{ margin: 1.8rem 0; max-width: 66ch; }
.figure-photo img{
  width:100%; aspect-ratio: 16/10; object-fit:cover; display:block;
  border-radius: 4px; background: var(--paper-dim);
}
.figure-photo figcaption{
  font-family:'Space Mono', monospace; font-size: 0.72rem; color:#7a725f;
  margin-top: 0.6rem;
}

.callout{
  background: var(--jade-deep); color: var(--paper); border-radius: 4px;
  padding: 1.6rem 1.8rem; margin: 1.8rem 0; max-width: 66ch;
}
.callout .eyebrow{ color: var(--gold); margin-bottom: 0.5rem; }
.callout p{ color: var(--mist); margin:0; }

.at-a-glance{
  background: var(--ink); color: var(--paper); border-radius: 4px;
  padding: 1.8rem; position: sticky; top: 1.5rem;
}
.at-a-glance .eyebrow{ color: var(--gold); margin-bottom: 1rem; }
.at-a-glance dl{ display:grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; font-size: 0.85rem; }
.at-a-glance dt{ font-family:'Space Mono', monospace; color: var(--mist); font-size: 0.7rem; text-transform:uppercase; letter-spacing:0.05em; align-self:start; padding-top:0.15rem;}
.at-a-glance dd{ color: var(--paper); }
.at-a-glance .divider{ border-top: 1px solid var(--line); margin: 1.2rem 0; }
.at-a-glance .glance-cta{
  display:block; text-align:center; margin-top:1rem; padding: 0.7rem;
  border-radius: 999px; background: var(--chili-bright); color: var(--paper);
  text-decoration:none; font-family:'Space Mono', monospace; font-size: 0.78rem;
}

/* ================= PAGINATION ================= */
.pagination{
  display:flex; justify-content:space-between; align-items:center;
  border-top: 1px solid var(--line-dark); margin-top: 3rem; padding-top: 2rem;
  gap: 1rem; flex-wrap:wrap;
}
.pagination a{ text-decoration:none; }
.pagination .pg-link{
  font-family:'Space Mono', monospace; font-size: 0.78rem; color: var(--jade-deep);
  display:flex; flex-direction:column; gap:0.3rem;
}
.pagination .pg-link .eyebrow{ font-size:0.62rem; }
.pagination .pg-next{ text-align:right; align-items:flex-end; }
.pagination .pg-all{
  font-family:'Space Mono', monospace; font-size: 0.75rem; color: var(--chili);
  border: 1px solid var(--chili); border-radius: 999px; padding: 0.6rem 1.2rem;
}

.credits-table{ width:100%; border-collapse:collapse; margin: 1.5rem 0 2.5rem; font-size: 0.85rem; }
.credits-table th, .credits-table td{ text-align:left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line-dark); vertical-align: top; }
.credits-table th{
  font-family:'Space Mono', monospace; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #7a725f; font-weight: 400;
}
.credits-table td.muted{ color: #8b8474; font-family:'Space Mono', monospace; font-size: 0.78rem; }

/* ================= FOOTER ================= */
footer{ background: var(--ink); color: var(--mist); padding: 3.5rem 2.4rem 2.4rem; }
.footer-inner{ max-width: 1280px; margin: 0 auto; display:flex; justify-content:space-between; flex-wrap: wrap; gap: 2rem; }
.footer-brand{ font-family:'Noto Serif SC', serif; font-size: 1.4rem; color: var(--paper); }
.footer-note{ font-family:'Space Mono', monospace; font-size: 0.72rem; max-width: 34ch; }
.footer-note a{ text-decoration:none; }
.footer-note a:hover{ color: var(--paper); }
.footer-bottom{
  max-width:1280px; margin: 2.4rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid var(--line); font-family:'Space Mono', monospace; font-size: 0.68rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 0.6rem;
}
.footer-bottom a{ color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a:hover{ color: var(--paper); }

@media (max-width: 900px){
  .article-grid{ grid-template-columns: 1fr; }
  .at-a-glance{ position:static; }
}
@media (max-width: 720px){
  .site-nav ul{ display:none; }
  section, .article-shell{ padding: 4rem 1.4rem; }
  .hero-content{ padding: 2rem 1.4rem 6rem; }
  .page-hero-inner{ padding: 2rem 1.4rem 0; }
  .menu-item{ grid-template-columns: 44px 1fr auto; }
  .menu-item .desc{ grid-column: 1 / -1; }
  .dish-photo{ width:44px; height:44px; }
}
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }