/* The one trail: back arrow, Japan > region > page. Guide pages and map.html write it into the HTML; the homepage draws the same
   markup from site-home.js. Buttons and links look the same. Edit here, nowhere else. */
.page-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:16px 20px 0; font-size:12.5px; font-weight:600; color:var(--grey-mid); }
.page-crumb a, .page-crumb button{ background:none; border:none; padding:0; font:inherit; color:var(--grey-mid); text-decoration:none; cursor:pointer; }
.page-crumb a:hover, .page-crumb button:hover{ color:var(--frost); }
.page-crumb .page-crumb-back{ display:flex; align-items:center; gap:4px; margin-right:4px; padding:4px 9px 4px 7px; border:1px solid var(--line); border-radius:6px; color:var(--grey-light); }
.page-crumb .page-crumb-back:hover{ border-color:var(--frost); color:var(--frost); }
.page-crumb-sep{ opacity:0.5; }
.page-crumb [aria-current], .page-crumb .current{ color:var(--white); cursor:default; }
/* on the homepage the crumb sits directly in the centre column (#feedCol), which has its own padding. Guide pages also use a
   .feed-col wrapper but their crumb sits inside .page, so this must name #feedCol, not .feed-col */
#feedCol > .page-crumb{ padding:0 0 16px; }
/* on map.html it sits in the page's own intro strip, which has its own padding */
.intro .page-crumb{ padding:0 0 12px; }
/* phones: the centre column already carries the side margin */
@media (max-width: 700px){ .page-crumb{ padding-left:0; padding-right:0; } }