/* ==========================================================================
   Wuhan Handbook — static, dependency-free stylesheet
   Editorial handbook: paper, ink, vermilion, river green.
   Every component here is used by tools/build.py output.
   ========================================================================== */

:root{
  --paper:      #F7F3EB;
  --paper-2:    #EFE7D9;
  --card:       #FDFBF6;
  --ink:        #17201F;
  --ink-soft:   #44504C;
  --ink-mute:   #6B7671;
  --line:       rgba(23,32,31,.16);
  --line-soft:  rgba(23,32,31,.085);
  --red:        #A93426;
  --red-soft:   #F3DED8;
  --teal:       #265A5E;
  --teal-soft:  #DBE7E5;
  --gold:       #8A6528;
  --gold-soft:  #F2E7CE;

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Songti SC",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Inter,"PingFang SC","Hiragino Sans GB",sans-serif;

  --wrap: 1080px;
  --nav-h: 70px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:120px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--teal); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--red); }
ul,ol,dl,dd{ margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:rgba(169,52,38,.16); }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px; position:relative; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:300; }
.skip:focus{ left:12px; top:12px; }

/* ============================ NAV ============================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(247,243,235,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav__inner{
  max-width:var(--wrap); margin:0 auto; padding:12px 32px;
  display:flex; align-items:center; gap:26px; min-height:var(--nav-h);
}
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; color:var(--ink); text-decoration:none; flex-shrink:0; }
.brand__mark{
  width:36px; height:36px; display:grid; place-items:center;
  background:var(--red); color:#fff; font-family:var(--serif); font-size:20px;
  border-radius:3px; line-height:1;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.2; }
.brand__text b{ font-family:var(--serif); font-size:18px; letter-spacing:.005em; }
.brand__text i{ font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }
.nav__links{ display:flex; align-items:center; gap:22px; }
.nav__links a{
  color:var(--ink-soft); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--red); border-bottom-color:var(--red); }
.nav__cta{
  background:var(--ink); color:#fff; text-decoration:none; font-size:12.5px; font-weight:600;
  padding:9px 15px; border-radius:3px; white-space:nowrap;
}
.nav__cta:hover{ background:var(--red); color:#fff; }
.nav__toggle{ display:none; background:none; border:1px solid var(--line); border-radius:3px; padding:7px 12px; font-size:13px; color:var(--ink); }

/* ============================ CURRENCY BAR ============================ */
.fxbar{ background:var(--teal); color:#EAF2F0; font-size:12.5px; }
.fxbar__inner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:9px; padding-bottom:9px; min-height:40px;
}
.fxbar__tag{
  text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700;
  border:1px solid rgba(255,255,255,.42); padding:3px 7px; border-radius:2px; flex-shrink:0;
}
.fxbar__status{ flex:1 1 320px; line-height:1.45; }
.fxbar__status b{ color:#fff; }
.fxbar__btn{
  background:rgba(255,255,255,.13); color:#fff; border:1px solid rgba(255,255,255,.4);
  border-radius:2px; padding:4px 11px; font-size:12px; flex-shrink:0;
}
.fxbar__btn:hover{ background:rgba(255,255,255,.25); }
.fxbar__btn[disabled]{ opacity:.55; cursor:default; }
.fxbar__more{ color:#D6E8E5; text-decoration:underline; text-underline-offset:2px; flex-shrink:0; }
.fxbar__more:hover{ color:#fff; }
.fxbar__noscript{ flex-basis:100%; color:#CDE0DD; font-size:12px; }
.fxbar.is-stale{ background:#6B5B3E; }

/* ============================ PAGE HEAD ============================ */
.page{ padding-bottom:70px; }
.crumbs{ padding-top:26px; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; font-size:12.5px; color:var(--ink-mute); }
.crumbs li+li::before{ content:"/"; margin-right:8px; color:var(--line); }
.crumbs a{ color:var(--ink-mute); text-decoration:none; }
.crumbs a:hover{ color:var(--red); text-decoration:underline; }

.page-head{ padding:34px 0 30px; border-bottom:1px solid var(--line); margin-bottom:34px; }
.kicker{
  display:flex; align-items:center; gap:10px; text-transform:uppercase;
  letter-spacing:.16em; font-size:11px; font-weight:700; color:var(--red); margin-bottom:16px;
}
.kicker__line{ display:inline-block; width:26px; height:1px; background:var(--red); }
h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,5vw,52px);
  line-height:1.13; letter-spacing:-.015em; max-width:19ch;
}
h1 em{ font-style:italic; color:var(--red); }
.page-lead{
  font-family:var(--serif); font-size:19px; line-height:1.62; color:var(--ink-soft);
  max-width:62ch; margin-top:18px;
}
.page-stamp{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; font-size:12px; color:var(--ink-mute); }
.stamp-level{
  border:1px solid var(--line); border-radius:2px; padding:2px 8px; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
}
.stamp-level--a{ color:var(--red); border-color:rgba(169,52,38,.35); background:var(--red-soft); }
.stamp-level--b{ color:var(--gold); border-color:rgba(138,101,40,.35); background:var(--gold-soft); }
.stamp-level--c{ color:var(--teal); border-color:rgba(38,90,94,.3); background:var(--teal-soft); }

/* ============================ SHORT ANSWER ============================ */
.answer{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--teal);
  padding:22px 26px; margin-bottom:38px; border-radius:0 4px 4px 0;
}
.answer__k{
  display:block; text-transform:uppercase; letter-spacing:.14em; font-size:10.5px;
  font-weight:700; color:var(--teal); margin-bottom:9px;
}
.answer p{ font-family:var(--serif); font-size:19px; line-height:1.58; max-width:68ch; }

/* ============================ PROSE ============================ */
.prose{ max-width:74ch; }
/* Home is a router, not an article: let its bands use the full content width. */
.prose--wide{ max-width:none; }
.prose--wide .orient{ margin-left:-32px; margin-right:-32px; padding-left:32px; padding-right:32px; }
@media (max-width:720px){
  .prose--wide .orient{ margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; }
}
.h2, .prose h2{
  font-family:var(--serif); font-size:29px; line-height:1.25; font-weight:600;
  letter-spacing:-.01em; margin:48px 0 16px; padding-top:6px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:var(--serif); font-size:20px; font-weight:600; margin:30px 0 10px; }
.prose h4{ font-size:14px; text-transform:uppercase; letter-spacing:.1em; margin:24px 0 8px; color:var(--ink-soft); }
.prose p{ margin:0 0 16px; }
.prose ul, .prose ol{ margin:0 0 20px; padding-left:22px; }
.prose ul li{ list-style:disc; margin-bottom:7px; }
.prose ol li{ list-style:decimal; margin-bottom:7px; }
.prose li::marker{ color:var(--red); }
.prose strong{ font-weight:650; }
.prose em{ color:var(--ink-soft); }
.prose hr{ border:0; border-top:1px solid var(--line); margin:38px 0; }
.prose a{ text-decoration-thickness:1px; }
.prose .lede{ font-size:18px; font-family:var(--serif); color:var(--ink-soft); }

/* --- callouts --- */
.callout{
  border:1px solid var(--line); background:var(--card); padding:18px 22px;
  margin:24px 0; border-radius:4px; font-size:15px;
}
.callout p:last-child{ margin-bottom:0; }
.callout__k{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; margin-bottom:8px;
}
.callout--bad{ border-left:4px solid var(--red); background:#FCF3F0; }
.callout--bad .callout__k{ color:var(--red); }
.callout--warn{ border-left:4px solid var(--gold); background:#FAF5E9; }
.callout--warn .callout__k{ color:var(--gold); }
.callout--good{ border-left:4px solid var(--teal); background:#F0F6F4; }
.callout--good .callout__k{ color:var(--teal); }
.callout--official{ border-left:4px solid var(--ink); }
.callout--official .callout__k{ color:var(--ink); }

/* --- steps --- */
.steps{ list-style:none; counter-reset:step; margin:24px 0 28px !important; padding:0 !important; }
.steps li{
  position:relative; padding:0 0 20px 44px; margin:0 !important;
  border-left:1px solid var(--line); margin-left:13px !important;
}
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:-14px; top:-2px; width:28px; height:28px;
  display:grid; place-items:center; background:var(--ink); color:#fff;
  border-radius:50%; font-size:12px; font-weight:700;
}
.steps b{ display:block; font-size:15.5px; margin-bottom:3px; }
.steps span{ color:var(--ink-soft); font-size:14.5px; }

/* --- tables --- */
.tablewrap{ overflow-x:auto; margin:22px 0 26px; -webkit-overflow-scrolling:touch; }
table.cmp{ font-size:14.5px; min-width:560px; border:1px solid var(--line); }
table.cmp caption{
  text-align:left; font-size:12px; color:var(--ink-mute);
  padding-bottom:9px; caption-side:top;
}
table.cmp th, table.cmp td{ padding:11px 13px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; }
table.cmp thead th{
  background:var(--paper-2); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; border-bottom:1px solid var(--line);
}
table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp tbody tr:nth-child(even){ background:rgba(255,255,255,.42); }
table.cmp td:first-child{ font-weight:650; }
table.cmp .nowrap{ white-space:nowrap; }
.verdict{ font-weight:700; color:var(--teal); }
.verdict--no{ color:var(--red); }
.verdict--maybe{ color:var(--gold); }

/* --- money --- */
.money{
  display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap;
  border-bottom:1px dotted var(--line); padding-bottom:1px; cursor:help;
}
.money__usd{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.money__cny{ font-size:.82em; color:var(--ink-mute); font-variant-numeric:tabular-nums; }
.money--reported .money__usd, .money--estimate .money__usd{ color:var(--gold); }
.money--verified .money__usd{ color:var(--teal); }
.inline-cny{ font-variant-numeric:tabular-nums; }

/* --- price/source chips --- */
.chip{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:2px;
  background:var(--gold-soft); color:var(--gold); vertical-align:2px;
}
.chip--official{ background:var(--teal-soft); color:var(--teal); }
.chip--unverified{ background:var(--red-soft); color:var(--red); }
.srcnote{ font-size:13px; color:var(--ink-mute); margin-top:-8px !important; }

/* --- generic card grid --- */
.cardgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:24px 0 30px; }
.cardgrid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.isnisnt{ margin:30px 0 0; }
.minicard{
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:7px;
}
.minicard__n{ font-family:var(--serif); font-size:12px; color:var(--red); letter-spacing:.08em; }
.minicard h3{ margin:0 !important; font-size:17px !important; }
.minicard p{ font-size:14px; color:var(--ink-soft); margin:0 !important; line-height:1.6; }
.minicard .tag{ margin-top:auto; padding-top:8px; font-size:11px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.08em; }

/* --- route / link tiles --- */
.tilegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:26px 0 32px; }
/* Four time bands read better as 2x2 than as 3+1 with a dead right column. */
.tilegrid--time{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Five practical guides: three equal cards, then two cards splitting the row. */
.tilegrid--base{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.tilegrid--base > .tile{ grid-column:span 2; }
.tilegrid--base > .tile:nth-child(4),
.tilegrid--base > .tile:nth-child(5){ grid-column:span 3; }
@media (max-width:900px){
  .tilegrid--time, .tilegrid--base{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tilegrid--base > .tile,
  .tilegrid--base > .tile:nth-child(4),
  .tilegrid--base > .tile:nth-child(5){ grid-column:span 1; }
}
@media (max-width:640px){
  .tilegrid--time, .tilegrid--base{ grid-template-columns:1fr; }
}
.tile{
  display:block; background:var(--card); border:1px solid var(--line);
  border-top:3px solid var(--red); border-radius:3px; padding:20px 22px;
  text-decoration:none; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(23,32,31,.08); color:var(--ink); }
.tile--teal{ border-top-color:var(--teal); }
.tile--gold{ border-top-color:var(--gold); }
/* The shortest time band is the site's strongest subject — one visual accent,
   not a second CTA or a duplicated entry point. */
.tile--lead{ border:2px solid var(--red); border-top:5px solid var(--red); background:#FDF6F2; }
.tile--lead .tile__k{ color:var(--red); }
.tile__k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--red); font-weight:700; }
.tile--teal .tile__k{ color:var(--teal); }
.tile--gold .tile__k{ color:var(--gold); }
.tile h3{ font-family:var(--serif); font-size:21px; margin:8px 0 8px !important; }
.tile p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 12px !important; }
.tile__go{ font-size:12.5px; font-weight:700; color:var(--teal); }

/* --- auto-generated /all-guides/ index --- */
.gindex__group{ margin-top:38px; }
.gindex__group .h2{
  font-size:22px !important; margin:0 0 14px !important; padding-top:0;
  border-bottom:1px solid var(--line); padding-bottom:9px;
}
.gindex__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.gcard{
  display:flex; flex-direction:column; gap:5px; background:var(--card);
  border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:3px; padding:14px 16px; text-decoration:none; color:var(--ink);
}
.gcard:hover{ border-color:var(--red); border-left-color:var(--red); color:var(--ink); }
.gcard b{ font-family:var(--serif); font-size:17px; }
.gcard span{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.gcard em{
  font-style:normal; font-size:10.5px; color:var(--ink-mute);
  text-transform:uppercase; letter-spacing:.06em; margin-top:5px;
}

/* --- home hero --- */
.hero{ padding:56px 0 30px; }
.hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(40px,6vw,64px); max-width:16ch; }
.hero .page-lead{ font-size:20px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.btn{
  display:inline-block; padding:11px 18px; border-radius:3px; font-size:14px;
  font-weight:650; text-decoration:none; border:1px solid var(--ink);
}
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ border-color:var(--red); color:var(--red); }
.hero__art{ width:100%; height:auto; }
.hero__note{ margin-top:20px; font-size:13px; color:var(--ink-mute); max-width:56ch; }

.orient{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:36px 0; margin:20px 0 0; }
.orient__grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.orient h2{ margin-top:0 !important; font-size:26px !important; }
.orient p{ font-size:15px; color:var(--ink-soft); }
.orient__map{ width:100%; height:auto; }
.railtimes{ list-style:none; margin:16px 0 0 !important; padding:0 !important; }
.railtimes li{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.railtimes li:last-child{ border-bottom:0; }
.railtimes b{ font-variant-numeric:tabular-nums; color:var(--teal); }

.band{ padding:56px 0 8px; }
.band__head{ max-width:64ch; margin-bottom:22px; }
.band__head h2{ margin-top:0 !important; }
.band__head p{ color:var(--ink-soft); }

.statrow{ display:flex; flex-wrap:wrap; gap:26px; margin:30px 0 8px; }
.stat{ flex:1 1 150px; border-top:2px solid var(--ink); padding-top:12px; }
.stat b{ display:block; font-family:var(--serif); font-size:30px; line-height:1.1; }
.stat span{ display:block; font-size:13px; color:var(--ink-soft); margin-top:5px; }

/* --- FAQ / related / source note --- */
.faq, .related, .sourcenote{ margin-top:54px; padding-top:30px; border-top:1px solid var(--line); }
.faq__list{ margin-top:16px; }
.faq__item{ border-bottom:1px solid var(--line-soft); padding:2px 0; }
.faq__item summary{
  cursor:pointer; padding:13px 0; font-weight:650; font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; gap:16px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; color:var(--red); font-size:19px; line-height:1; flex-shrink:0; }
.faq__item[open] summary::after{ content:"\2212"; }
.faq__a{ padding:0 0 16px; color:var(--ink-soft); font-size:15px; max-width:70ch; }
.faq__a p{ margin-bottom:10px; }

.relgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:16px; }
.relcard{
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:4px; padding:17px 18px; text-decoration:none; color:var(--ink);
}
.relcard:hover{ border-color:var(--red); color:var(--ink); }
.relcard__k{ display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:7px; }
.relcard b{ display:block; font-family:var(--serif); font-size:18px; margin-bottom:6px; }
.relcard__d{ display:block; font-size:13px; color:var(--ink-mute); line-height:1.55; }

.sourcenote{ background:var(--paper-2); padding:24px 26px; border-radius:4px; border-top:0; }
.sourcenote .h2{ margin-top:0 !important; font-size:22px !important; }
.sourcenote p{ font-size:14px; color:var(--ink-soft); margin-bottom:12px; }
.sourcenote__fx{ font-size:13.5px !important; }
.sourcenote__level{ font-size:12.5px !important; color:var(--ink-mute) !important; margin-bottom:0 !important; }

/* ============================ FOOTER ============================ */
.foot{ background:var(--ink); color:#D9DFDA; padding:48px 0 22px; margin-top:20px; }
.foot a{ color:#ECEFEA; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; }
.foot a:hover{ color:#fff; text-decoration-color:var(--red); }
.foot__grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.foot__name{ font-family:var(--serif); font-size:22px; color:#fff; }
.foot__tag{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#E5B7A5; margin:4px 0 14px !important; }
.foot p{ font-size:13.5px; line-height:1.65; color:#B9C2BC; margin-bottom:12px; }
.foot__honest{ padding-top:12px; border-top:1px solid rgba(255,255,255,.13); }
.foot__col h2{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
.foot__col h2.foot__sub{ color:#93A39C; font-size:10px; margin:20px 0 9px; }
.foot__col > h2:first-child{ margin-bottom:12px; }
.foot__col ul{ list-style:none; }
.foot__col li{ font-size:13.5px; margin-bottom:7px; }
.foot__fine{ font-size:12px !important; color:#93A09A !important; margin-top:16px !important; }
.foot__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.13); margin-top:34px; padding-top:18px;
  font-size:12px; color:#96A39D;
}

/* ============================ 404 ============================ */
.notfound{ padding:70px 32px 100px; max-width:700px; }
.notfound h1{ font-size:44px; max-width:none; }
.notfound__list{ list-style:none; margin:22px 0; }
.notfound__list li{ padding:8px 0; border-bottom:1px solid var(--line-soft); }
.notfound .foot__fine{ color:var(--ink-mute); }

/* ============================ REVEAL (JS only) ============================ */
html.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
html.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================ RESPONSIVE ============================ */
/* Level-1 labels are longer than the previous five-item nav; fold the menu
   earlier so the 720-1040px range never squeezes them. */
@media (max-width:1040px){
  .nav__inner{ flex-wrap:wrap; gap:12px; }
  .nav__toggle{ display:block; order:3; }
  .nav__cta{ order:2; }
  .nav__links{
    display:none; order:4; flex-basis:100%; flex-direction:column; align-items:flex-start;
    gap:0; border-top:1px solid var(--line); padding-top:8px;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ width:100%; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
}
@media (max-width:900px){
  .hero__grid, .orient__grid, .foot__grid{ grid-template-columns:1fr; gap:26px; }
  .hero__art{ max-width:420px; margin:0 auto; }
  .nav__links{ gap:16px; }
  .nav__links a{ font-size:12.5px; }
}
@media (max-width:720px){
  .wrap{ padding:0 20px; }
  .nav__inner{ padding:10px 20px; }
  .nav__cta{ font-size:11.5px; padding:7px 11px; }
  .fxbar__inner{ gap:9px; }
  .fxbar__status{ flex-basis:100%; order:3; }
  .page-head{ padding:24px 0 22px; }
  h1{ font-size:34px; }
  .page-lead{ font-size:17.5px; }
  .answer{ padding:18px; }
  .answer p{ font-size:17px; }
  .prose h2, .h2{ font-size:25px; }
  .cardgrid--2{ grid-template-columns:1fr; }
  .sourcenote{ padding:20px; }
  .foot__bottom{ flex-direction:column; }
  .page{ padding-bottom:44px; }
}

/* ==================== SIGHT ENTRIES (/see/ deep guide) ==================== */
/* One article per place: judgement first, then the story, then a scannable
   fact block. Deliberately not a card grid — these entries are read, not
   compared at a glance. The ranking table above does the comparing. */
.sight{
  background:var(--card); border:1px solid var(--line);
  border-top:4px solid var(--teal); border-radius:3px;
  padding:26px 28px 22px; margin:30px 0;
}
.sight__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
  border-bottom:1px solid var(--line-soft); padding-bottom:12px; margin-bottom:18px;
}
.sight__n{
  font-family:var(--serif); font-size:30px; line-height:1;
  font-weight:600; color:var(--red);
}
.sight__head h3{
  font-family:var(--serif); font-size:24px; font-weight:600;
  margin:0; flex:1 1 300px;
}
.sight__tag{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-mute); white-space:nowrap;
}
.sight__verdict{
  font-family:var(--serif); font-size:19px; line-height:1.55;
  margin:0 0 18px; max-width:66ch;
}
.sight__body p{ margin:0 0 14px; max-width:76ch; }
.sight__facts{ display:grid; border-top:1px solid var(--line-soft); margin:22px 0 0; }
.sight__facts > div{
  display:grid; grid-template-columns:130px 1fr; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.sight__facts dt{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); font-weight:700; padding-top:4px;
}
.sight__facts dd{ font-size:14.5px; color:var(--ink-soft); line-height:1.62; }
.sight__facts dd strong{ color:var(--ink); }
.sight__src{
  font-size:12px !important; color:var(--ink-mute) !important;
  margin:16px 0 0 !important; padding-top:12px;
  border-top:1px dashed var(--line);
}
@media (max-width:720px){
  .sight{ padding:20px 18px 18px; margin:24px 0; }
  .sight__head h3{ font-size:21px; flex-basis:100%; }
  .sight__verdict{ font-size:17px; }
  .sight__facts > div{ grid-template-columns:1fr; gap:3px; }
  .sight__facts dt{ padding-top:0; }
}
/* --- sight illustrations: clearly captioned, never presented as photos --- */
.sight__fig{ margin:18px 0 4px; }
.sight__fig img{
  display:block; width:100%; height:auto; border-radius:3px;
  border:1px solid var(--line); background:#fff;
}
.sight__fig figcaption{
  font-size:11px; color:var(--ink-mute); margin-top:6px;
  font-style:italic;
}

/* --- "Beyond the eight" categorised index: names only, no verified details --- */
.beyond{ margin:20px 0 8px; }
.beyond__cat{ margin-top:20px; }
.beyond__cat h3{
  font-family:var(--serif); font-size:17px; margin:0 0 4px;
  color:var(--teal);
}
.beyond ul{ list-style:none; margin:0; padding:0; }
.beyond li{
  padding:9px 2px; border-bottom:1px solid var(--line-soft);
  font-size:14.5px; line-height:1.55;
}
.beyond li b{ font-family:var(--serif); font-weight:700; }

/* ============================ PRINT (A4, offline) ============================ */
@media print{
  @page{ size:A4; margin:14mm; }
  body{ background:#fff; color:#000; font-size:10.5pt; line-height:1.45; }
  .nav, .fxbar, .skip, .related, .foot, .crumbs, .nav__toggle{ display:none !important; }
  .wrap{ max-width:none; padding:0; }
  .page{ padding:0; }
  .page-head{ padding:0 0 10pt; margin-bottom:12pt; border-bottom:1pt solid #999; }
  h1{ font-size:21pt; max-width:none; }
  .page-lead{ font-size:11pt; margin-top:7pt; }
  .answer{ border:1pt solid #666; border-left:3pt solid #333; padding:8pt 10pt; margin-bottom:12pt; }
  .answer p{ font-size:11pt; }
  .prose{ max-width:none; }
  .prose h2, .h2{ font-size:14pt; margin:14pt 0 6pt; break-after:avoid; }
  .prose h3{ font-size:11.5pt; break-after:avoid; }
  .callout, .minicard, .tile{ break-inside:avoid; }
  .sight{ break-inside:avoid; background:#fff; border:1pt solid #999; padding:8pt 10pt; }
  .sight__verdict{ font-size:11pt; }
  .sight__facts dd{ font-size:9pt; }
  .sight__src{ font-size:8pt; }
  table.cmp{ min-width:0; font-size:9pt; }
  table.cmp th, table.cmp td{ padding:4pt 5pt; }
  .tablewrap{ overflow:visible; }
  .faq__item{ break-inside:avoid; }
  .faq, .sourcenote{ margin-top:14pt; padding-top:8pt; border-top:1pt solid #999; }
  .sourcenote{ background:#fff; padding:8pt 0; }
  a{ color:#000; text-decoration:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .money{ border-bottom:0; }
  .money--reported .money__usd, .money--estimate .money__usd{ color:#000; }
}