/* =========================================================
   香港大全 / HK Guide — civic wayfinding dossier theme
   ========================================================= */

:root{
  --bg: #FBFAF7;
  --ink: #1A2B28;
  --primary: #0B5A4E;
  --primary-ink: #06342c;
  --accent: #C0392B;
  --neutral: #6B7671;
  --line: #DEDACD;
  --card-bg: #FFFFFF;
  --max-w: 780px;
  --wide-w: 1100px;
  --radius: 4px;
  --font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }

a{ color:var(--primary); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--accent); }

.skip-to-content{
  position:absolute;
  left:.75rem;
  top:.5rem;
  display:inline-block;
  padding:.75rem 1rem;
  background:var(--primary-ink);
  color:var(--card-bg);
  text-decoration:none;
  border-radius:var(--radius);
  z-index:1001;
  transform:translateY(-140%);
  transition:transform .2s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible{
  transform:translateY(0);
}

h1,h2,h3,h4,h5{

h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  color:var(--ink);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin:0 0 .5em; }
h2{ font-size:clamp(1.35rem, 1.15rem + .8vw, 1.8rem); margin:2em 0 .6em; border-bottom:2px solid var(--line); padding-bottom:.3em; }
h3{ font-size:1.15rem; margin:1.6em 0 .5em; }

p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left:1.4em; }
li{ margin-bottom:.35em; }

blockquote{
  margin:1.4em 0;
  padding:.8em 1.2em;
  border-left:3px solid var(--accent);
  background:#F4F1E8;
  color:var(--neutral);
}

hr{ border:none; border-top:1px solid var(--line); margin:2em 0; }

code{ background:#F0EEE4; padding:.15em .4em; border-radius:3px; font-size:.9em; }

/* focus visibility */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Site header ---------------- */
.site-header{
  position:sticky; top:0; z-index:999;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header-inner{
  max-width:var(--wide-w);
  margin:0 auto;
  padding:.7em 1.2em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  flex-wrap:wrap;
}
.site-brand{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.05rem;
  color:var(--primary-ink);
  text-decoration:none;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:.4em;
}
.site-brand:hover{ color:var(--accent); }
.site-brand .stamp{
  display:inline-block;
  border:1.5px solid var(--accent);
  color:var(--accent);
  font-size:.62rem;
  font-weight:700;
  padding:1px 5px;
  border-radius:2px;
  letter-spacing:.04em;
  transform:rotate(-3deg);
}

.lang-switcher{ display:flex; gap:.2em; font-size:.85rem; }
.lang-switcher a{
  color:var(--neutral);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
  padding:.55rem .85rem;
  border-radius:var(--radius);
  border:1px solid transparent;
}
.lang-switcher a:hover{ background:#F0EEE4; color:var(--primary-ink); }
.lang-switcher a.active{
  color:var(--primary-ink);
  border-color:var(--line);
  background:#F0EEE4;
  font-weight:700;
}

/* ---------------- Journey stepper (homepage signature) ---------------- */
.journey-stepper{
  max-width:var(--wide-w);
  margin:1.6em auto 0;
  padding:0 1.2em;
}
.journey-stepper ol{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  gap:.5em;
  overflow-x:auto;
  padding-bottom:.4em;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.journey-stepper li{ margin:0; flex:1 0 auto; }
.journey-step{
  display:flex;
  align-items:center;
  gap:.55em;
  white-space:nowrap;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.55em 1.1em;
  text-decoration:none;
  color:var(--ink);
  font-family:var(--font-head);
  font-weight:600;
  font-size:.92rem;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.journey-step:hover{ border-color:var(--primary); color:var(--primary-ink); background:#F0F6F4; }
.journey-step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.5em; height:1.5em; border-radius:50%;
  background:var(--primary); color:#fff;
  font-size:.78rem; font-weight:700;
  flex:none;
}
.journey-step .en{ color:var(--neutral); font-weight:500; font-size:.85em; }
.journey-arrow{ color:var(--neutral); align-self:center; flex:none; padding:0 .1em; }

/* ---------------- Dossier cards ---------------- */
.dossier-section{
  max-width:var(--wide-w);
  margin:2.4em auto 0;
  padding:0 1.2em;
  scroll-margin-top:5em;
}
.dossier-section h2{
  display:flex; align-items:baseline; gap:.5em;
  border-bottom:none;
}
.dossier-section h2 .eyebrow{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent);
  text-transform:uppercase;
  border:1px solid var(--accent);
  border-radius:2px;
  padding:2px 6px;
}
.dossier-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1em;
  margin-top:1em;
}
.dossier-card{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:1em 1.1em;
}
.dossier-card h3{ margin:0 0 .5em; font-size:1rem; }
.dossier-card ul{ margin:0; padding-left:1.1em; font-size:.92rem; }
.dossier-card li{ margin-bottom:.4em; }
.dossier-card a{ text-decoration:none; }
.dossier-card a:hover{ text-decoration:underline; }

/* full article-index cards (existing category lists) */
.article-index h3{
  border-bottom:1px dashed var(--line);
  padding-bottom:.3em;
}

/* ---------------- Article column ---------------- */
.page-article{
  max-width:var(--max-w);
  margin:0 auto;
  padding:2.2em 1.2em 4em;
}
.page-article .meta{
  color:var(--neutral);
  font-size:.85rem;
  margin-bottom:1.6em;
  padding-bottom:1em;
  border-bottom:1px solid var(--line);
}

.page-home{
  padding-bottom:3em;
}
.home-intro{
  max-width:var(--wide-w);
  margin:1.4em auto 0;
  padding:0 1.2em;
}

.site-footer{
  max-width:var(--wide-w);
  margin:3em auto 0;
  padding:1.4em 1.2em 2.4em;
  color:var(--neutral);
  font-size:.85rem;
  border-top:1px solid var(--line);
}

@media (max-width: 640px){
  .site-header-inner{ padding:.6em .9em; }
  .journey-stepper{ padding:0 .9em; }
  .dossier-section{ padding:0 .9em; }
  .page-article{ padding:1.6em .9em 3em; }
}