/* Chinaroutemap — city board layout.
   Shared by every city page: the 27 hand-written ones and the pages built from
   site/_templates/pages/city.html. It used to be copied inline into each page,
   which is why a templated city rendered full-width — it had no copy to inherit.
*/
/* ---------- city hero (full-bleed photo) ---------- */
  .city-hero{ position:relative; min-height:480px; display:flex; align-items:flex-end; background-size:cover; background-position:center; background-color:var(--ink); color:#FBF7EE; border-bottom:2px solid var(--ink); }
  .city-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,12,5,.18) 0%, rgba(18,12,5,.44) 52%, rgba(18,12,5,.86) 100%); }
  .city-hero .hero-inner{ position:relative; z-index:1; width:100%; max-width:1280px; margin:0 auto; padding:120px 56px 40px; }
  .crumbs{ font-family:"Courier Prime",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; color:rgba(251,247,238,.8); }
  .crumbs a{ color:rgba(251,247,238,.8); }
  .crumbs a:hover{ color:#fff; }
  .city-hero h1{ font-size:clamp(48px, 5.6vw, 78px); font-weight:790; line-height:.95; letter-spacing:-.025em; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; text-shadow:0 2px 34px rgba(0,0,0,.45); }
  .city-hero h1 .zh{ font-size:.4em; font-weight:500; color:#fff; letter-spacing:.3em; opacity:.9; }
  .city-sub{ margin-top:15px; font-size:18px; line-height:1.55; color:rgba(251,247,238,.93); max-width:54ch; text-shadow:0 1px 16px rgba(0,0,0,.5); }
  .facts-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
  @media (max-width:720px){ .facts-row{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; } .facts-row .fact{ flex:none; } }
  /* phone-width: strip clock+theme+lang widgets overflow <444px viewports —
     drop the decorative weather chip, then shrink strip padding */
  @media (max-width:480px){ .strip .bjw .bjw-sep, .strip .bjw .bjw-wx{ display:none; } }
  @media (max-width:380px){ .strip{ padding-left:14px; padding-right:14px; } }
  .fact{ font-family:"Courier Prime",monospace; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(251,247,238,.32); background:rgba(18,12,5,.3); border-radius:3px; padding:7px 11px; color:rgba(251,247,238,.82); }
  .fact b{ color:#fff; }
  .hero-pins{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px; font-family:"Courier Prime",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(251,247,238,.8); }
  .hero-pins a{ color:#fff; font-weight:700; border-bottom:1.5px solid rgba(255,255,255,.5); padding-bottom:1px; }
  .hero-pins a:hover{ border-color:#fff; }
  .section{ max-width:1280px; margin:0 auto; padding:44px 56px 8px; }
  .section-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
  .section-head h2{ font-size:27px; font-weight:760; letter-spacing:-.02em; }
  .section-head .mono-note{ font-family:"Courier Prime",monospace; font-size:12px; color:var(--ink-soft); letter-spacing:.05em; }
  .section-head .more{ margin-left:auto; font-weight:650; font-size:14px; color:var(--ink-soft); }
  .section-head .more:hover{ color:var(--accent); }
  .guide-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
  .gcard{ background:#fff; border:1.5px solid var(--ink); border-radius:8px; padding:18px; box-shadow:4px 4px 0 var(--cream), 4px 4px 0 1.5px var(--line); display:flex; flex-direction:column; gap:0; transition:transform .2s ease; }
  .gcard:hover{ transform:translateY(-3px); }
  .gcard .gtype{ font-family:"Courier Prime",monospace; font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
  .gcard h3{ font-size:18px; font-weight:720; line-height:1.25; letter-spacing:-.01em; margin-top:6px; }
  .gcard p{ margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--ink-soft); flex:1; }
  .gcard .stamps{ margin-top:14px; }
  .corkboard{ background-color:#B58456; background-image:radial-gradient(rgba(255,244,220,.10) 1px, transparent 1.4px), radial-gradient(rgba(61,35,10,.16) 1px, transparent 1.6px); background-size:9px 9px, 14px 14px; border:14px solid transparent; border-image:linear-gradient(135deg,#9A6B3E,#7C4F27 38%,#A87C4C 62%,#6E441F) 1; border-radius:8px; padding:26px 24px 10px; box-shadow:0 18px 40px -18px rgba(50,30,8,.5), inset 0 0 0 2px rgba(0,0,0,.25); }
  .cork-cols.three{ columns:3 250px; column-gap:22px; }
  .cork-cols .notice{ margin:0 0 22px; }
  .hub-grid{ max-width:1280px; margin:0 auto; padding:44px 56px 24px; display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; }
  @media (max-width: 1080px){
    .city-hero .hero-inner{ padding:104px 28px 32px; }
    .hub-grid{ grid-template-columns:1fr; }
    .guide-cards{ grid-template-columns:1fr; }
    .cork-cols.three{ columns:1; }
    .rail{ position:static; }
  }