/* ==========================================================================
   nav.css — the one navigation system.
   Loaded after style.css. Adds five things and removes two.

   Adds:   mega menu, mobile sheet, search overlay, reading rail, breadcrumbs,
           and the "keep exploring" block at the foot of a content page.
   Removes: the sticky chip bar (.inpage) and the table of contents that used
           to sit inside the hero (.hero .toc). Both were extra horizontal
           layers under the masthead. Neither is deleted from the markup here;
           the apply script strips them. These rules are belt and braces.

   Everything below is inert under prefers-reduced-motion: transitions and
   transforms are switched off at the end of this file, not merely shortened.
   ========================================================================== */

:root {
  --mast-h: 74px;        /* masthead height, matches .masthead .wrap min-height */
  --nav-panel-w: 1240px; /* = --maxw */
}
@media (max-width: 860px) { :root { --mast-h: 62px; } }

/* The two old layers. */
.inpage { display: none !important; }
.hero .toc { display: none !important; }

/* Anchor targets must clear the masthead when jumped to. */
section[id], .section-head[id], h2[id], h3[id] {
  scroll-margin-top: calc(var(--mast-h) + 20px);
}

/* ============================================================ MASTHEAD SHELL
   The masthead keeps its existing look. This only adds the tools cluster on
   the right and the burger, and lets a panel hang off the bar. */

/* .masthead is already sticky (or fixed over a photo hero), so it is the
   containing block a full-bleed panel hangs from. Nothing else needed. */

.navtools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.masthead nav.mainnav { margin-left: auto; flex-wrap: nowrap; }

/* A round icon button, used for search and the burger. */
.navicon {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--text-soft);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.navicon svg { width: 17px; height: 17px; display: block; }
.navicon:hover { color: var(--deep); border-color: var(--shallow); }
.navburger { display: none; }

/* Over a photo hero the bar floats white on the image, so the icon buttons
   follow the same two states the rest of the bar already uses. */
body:has(.hero .ph-hero) .masthead .navicon {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
  color: #fff;
}
html[data-scrolled="1"] body:has(.hero .ph-hero) .masthead .navicon {
  background: var(--bg-alt); border-color: var(--line); color: var(--text-soft);
}

/* ================================================================ MEGA MENU */

.mm { position: static; }                 /* panel resolves against .masthead */
.masthead nav .mm-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 8px 10px;
}
.masthead nav .bizlink { white-space: nowrap; }
@media (max-width: 1240px) { .mm-caret { display: none; } .masthead nav .mm-top { padding: 8px 8px; } }
.mm-caret {
  width: 9px; height: 9px;
  flex: none;
  opacity: .5;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.mm[data-open] .mm-caret { transform: rotate(180deg); opacity: .9; }
.masthead nav .mm-top[aria-current="page"] {
  color: var(--text);
  background: color-mix(in srgb, var(--shallow) 22%, transparent);
}

/* The panel. Full bleed under the bar, contents held to the page width. */
.mm-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 58;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - var(--mast-h));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .28s;
}
/* Hover opens it only where there is a real pointer. nav.js stamps
   data-nav-touch on <html> when there is not, which kills this rule. */
html:not([data-nav-touch]) .mm:hover .mm-panel,
.mm:focus-within .mm-panel,
.mm[data-open] .mm-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.mm-in {
  max-width: var(--nav-panel-w);
  margin: 0 auto;
  padding: 30px 22px 34px;
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 34px;
  align-items: start;
}
.mm-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 30px;
}
.mm-col > .mm-h {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mm-col ul { list-style: none; margin: 0; padding: 0; }
.mm-col li { margin: 0 0 1px; }

/* Panel links reset the pill styling the masthead gives every nav anchor. */
.masthead nav .mm-panel a,
body:has(.hero .ph-hero) .masthead nav .mm-panel a {
  display: block;
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  background: none;
  padding: 6px 9px;
  margin-left: -9px;
  border-radius: 9px;
  text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.masthead nav .mm-panel a:hover,
.masthead nav .mm-panel a:focus-visible,
body:has(.hero .ph-hero) .masthead nav .mm-panel a:hover {
  background: color-mix(in srgb, var(--shallow) 18%, transparent);
  color: var(--deep);
}
.mm-panel a span {
  display: block;
  font-size: .76rem;
  font-weight: 400;
  color: var(--text-soft);
  line-height: 1.3;
  margin-top: 1px;
}
/* Anything factual is mono. Bus stop numbers, counts, durations. */
.mm-panel a em, .mm-panel .mm-fact {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--text-soft);
  margin-left: 6px;
}

/* Twelve months as a compact mono row rather than twelve list rows. */
.mm-months { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.masthead nav .mm-panel .mm-months a {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
}
.masthead nav .mm-panel .mm-months a:hover { color: var(--deep); border-color: var(--shallow); }

/* One photograph per panel, doing the job of a picture rather than a label. */
.masthead nav .mm-panel a.mm-feature {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-sunk);
}
.mm-feature img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.28) contrast(1.04) brightness(1.09);
  transition: transform .7s var(--ease);
}
.masthead nav .mm-panel a.mm-feature:hover { background: none; }
.mm-feature:hover img { transform: scale(1.06); }
.mm-feature b {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 14px rgba(4,26,34,.6);
}
.mm-feature b small {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: .85;
  margin-bottom: 4px;
}
.mm-feature::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6,40,52,.72) 0%, rgba(6,40,52,.12) 46%, rgba(6,40,52,0) 68%);
}

@media (max-width: 1240px) {
  .mm-in { grid-template-columns: 1fr; }
  .mm-feature { display: none !important; }
}

/* ============================================== DESKTOP / MOBILE SWITCH
   Gated on data-nav="on", which nav.js sets immediately. With scripting off
   the old scrolling nav stays exactly as it was, which is a working fallback. */

@media (max-width: 1080px) {
  html[data-nav="on"] .masthead nav.mainnav { display: none; }
  html[data-nav="on"] .navburger { display: inline-flex; }
  html[data-nav="on"] .masthead .tripchip { display: none; }
}

/* ============================================================ MOBILE SHEET */

.navsheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--wash);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .26s var(--ease), transform .3s var(--ease), visibility .3s;
}
:root[data-theme="dark"] .navsheet { background: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .navsheet { background: var(--bg); } }
.navsheet[data-open] { opacity: 1; visibility: visible; transform: none; }

.ns-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.ns-head .navicon { flex: none; }
.ns-head .ns-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 0 14px;
  height: 44px;
}
.ns-head .ns-field svg { width: 16px; height: 16px; flex: none; opacity: .55; }
.ns-head input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.ns-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 40px; }

.ns-sec { border-bottom: 1px solid var(--line); }
.ns-sec > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  color: var(--text);
}
.ns-sec > summary::-webkit-details-marker { display: none; }
.ns-sec > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(45deg);
  margin-right: 4px;
  transition: transform .25s var(--ease);
}
.ns-sec[open] > summary::after { transform: rotate(-135deg); }
.ns-sec ul { list-style: none; margin: 0; padding: 0 20px 14px; }
.ns-sec li { margin: 0; }
.ns-sec a {
  display: block;
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.ns-sec a:last-child { border-bottom: 0; }
.ns-sec > .mm-h {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 14px 0 2px;
  padding: 0 20px;
}
.ns-foot { padding: 20px; display: flex; gap: 9px; flex-wrap: wrap; }
.ns-foot a {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
}
.ns-foot a:hover { color: var(--deep); border-color: var(--shallow); }

/* =========================================================== SEARCH OVERLAY */

.navsearch {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: color-mix(in srgb, var(--deep) 42%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
}
.navsearch[data-open] { opacity: 1; visibility: visible; }
.navsearch-box {
  width: min(640px, 100%);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform .28s var(--ease);
}
.navsearch[data-open] .navsearch-box { transform: none; }
.navsearch-field {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  height: 58px;
  border-bottom: 1px solid var(--line);
}
.navsearch-field svg { width: 18px; height: 18px; opacity: .5; flex: none; }
.navsearch-field input {
  flex: 1;
  border: 0; background: none; outline: none;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--text);
  min-width: 0;
}
.navsearch-field kbd {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .06em;
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
}
.navsearch-results { overflow-y: auto; padding: 8px; }
/* The browser's own clear button and magnifier belong to the browser's design,
   not this one. */
.navsearch-field input::-webkit-search-decoration,
.navsearch-field input::-webkit-search-cancel-button,
.ns-field input::-webkit-search-decoration,
.ns-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.navsearch-results a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .94rem;
}
.navsearch-results a[data-on], .navsearch-results a:hover {
  background: color-mix(in srgb, var(--shallow) 20%, transparent);
  color: var(--deep);
}
.navsearch-results a i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-left: auto;
  flex: none;
}
.navsearch-empty, .navsearch-hint {
  padding: 22px 20px;
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: .9rem;
}

/* ======================================================== IN-PAGE: THE RAIL
   One component, two placements. Wide screens get a rail in the left margin;
   everything else gets a floating button that opens the same list. There is
   no second horizontal bar under the masthead in either case. */

.rrail { display: none; }

@media (min-width: 1400px) {
  .rrail {
    display: block;
    position: fixed;
    top: 50%;
    left: max(16px, calc((100vw - var(--nav-panel-w)) / 2 - 190px));
    transform: translateY(-50%);
    z-index: 40;
    max-height: 74vh;
    overflow: hidden;
  }
  .rrail ol { list-style: none; margin: 0; padding: 8px 10px; }
  .rrail li { margin: 0; }
  .rrail a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 8px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-soft);
    transition: color .25s var(--ease), background .25s var(--ease);
  }
  .rrail a i {
    width: 7px; height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--line);
    transition: background .3s var(--ease), transform .3s var(--ease);
  }
  .rrail a span {
    font-family: var(--font-sans);
    font-size: .78rem;
    line-height: 1.25;
    max-width: 168px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s var(--ease), transform .3s var(--ease);
  }
  .rrail a[data-on] i { background: var(--deep); transform: scale(1.34); }
  .rrail a[data-on] { color: var(--text); }
  .rrail a[data-on] span, .rrail:hover a span, .rrail:focus-within a span { opacity: 1; transform: none; }
  .rrail a:hover { color: var(--deep); }
  .rrail a:hover i { background: var(--shallow); }
  /* Under 1620px the labels would sit over the text column, so the rail gets
     a surface of its own while it is open. */
  .rrail::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: var(--radius);
    background: var(--bg-alt);
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity .25s var(--ease);
    z-index: -1;
  }
  .rrail:hover::before, .rrail:focus-within::before { opacity: 1; }
}
@media (min-width: 1620px) {
  .rrail a span { opacity: 1; transform: none; }
  .rrail::before { display: none; }
}

/* The floating button, everywhere the rail is not. */
.rbtn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 42;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: min(74vw, 320px);
  padding: 11px 16px 11px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 500;
}
.rbtn svg { width: 15px; height: 15px; flex: none; opacity: .6; }
.rbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-nav="on"] .rbtn[data-live] { display: inline-flex; }
@media (min-width: 1400px) { html[data-nav="on"] .rbtn[data-live] { display: none; } }

.rsheet {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--deep) 40%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--ease), visibility .24s;
}
.rsheet[data-open] { opacity: 1; visibility: visible; }
.rsheet-box {
  width: min(560px, 100%);
  max-height: 76vh;
  overflow-y: auto;
  background: var(--bg-alt);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 0 26px;
  transform: translateY(14px);
  transition: transform .3s var(--ease);
}
.rsheet[data-open] .rsheet-box { transform: none; }
.rsheet-box p.mm-h {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 12px 22px 6px;
}
.rsheet-box ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rsheet-box a {
  display: flex;
  gap: 12px;
  padding: 13px 22px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .96rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.rsheet-box a::before {
  counter-increment: r;
  content: counter(r, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-soft);
  padding-top: 3px;
}
.rsheet-box a[data-on] { color: var(--deep); background: color-mix(in srgb, var(--shallow) 16%, transparent); }

/* =========================================================== BREADCRUMBS
   One line, above the h1. Inherits colour, so it works white over a photo
   hero and dark on a plain one without a second rule set. */

.crumbs {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  opacity: .78;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
}
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { border-bottom-color: currentColor; }
.crumbs span[aria-current] { opacity: .62; }
.crumbs li { list-style: none; display: flex; align-items: center; gap: 7px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 7px; }
.crumbs .sep { opacity: .45; }
.hero:has(.ph-hero) .crumbs { text-shadow: 0 1px 16px rgba(4,26,34,.62); }

/* ========================================================== KEEP EXPLORING */

.keepgoing { padding: 78px 0 88px; background: color-mix(in srgb, var(--shallow) 6%, var(--wash)); }
:root[data-theme="dark"] .keepgoing { background: var(--bg-alt); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .keepgoing { background: var(--bg-alt); } }
.keepgoing .kg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.keepgoing h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
  color: var(--text);
}
.keepgoing .kg-all {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
}
.keepgoing .kg-all:hover { color: var(--deep); }
.kg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .kg-grid { grid-template-columns: 1fr; } }

.kgcard {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.kgcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--shallow); }
.kgcard .kg-im { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-sunk); }
.kgcard img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.28) contrast(1.04) brightness(1.09);
  transition: transform .8s var(--ease);
}
.kgcard:hover img { transform: scale(1.06); }
.kgcard .kg-bd { padding: 18px 20px 22px; }
.kgcard .kg-kind {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: block;
  margin-bottom: 7px;
}
.kgcard h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0 0 7px;
  color: var(--text);
}
.kgcard p { margin: 0; font-family: var(--font-sans); font-size: .9rem; line-height: 1.5; color: var(--text-soft); }

/* ===================================================== REDUCED MOTION, PRINT
   Off, not shortened. Everything still opens and closes; nothing moves. */

@media (prefers-reduced-motion: reduce) {
  .mm-panel, .mm-caret, .navsheet, .navsearch, .navsearch-box, .rsheet, .rsheet-box,
  .rrail a, .rrail a i, .rrail a span, .rrail::before, .kgcard, .kgcard img,
  .mm-feature img, .ns-sec > summary::after, .navicon,
  .masthead nav .mm-panel a {
    transition: none !important;
    animation: none !important;
  }
  .mm-panel, .navsheet, .navsearch-box, .rsheet-box, .rrail a span { transform: none !important; }
  .kgcard:hover, .kgcard:hover img, .mm-feature:hover img { transform: none !important; }
}

@media print {
  .mm-panel, .navsheet, .navsearch, .rrail, .rbtn, .rsheet, .navtools { display: none !important; }
  .keepgoing { display: none !important; }
  .crumbs { color: #000; opacity: 1; }
}