/* Shared SNX canvas for the three local case studies. Client media keeps its own colours. */
body.web.journal-page{
  --journal-paper:#f3f6f8;
  --journal-ink:#18232e;
  --journal-dim:#536272;
  --journal-line:#cbd4dc;
  --journal-accent:#006b91;
  --nav-bg:rgba(243,246,248,.97);
  --nav-linie:#cbd4dc;
  --nav-ruhe:#536272;
  --nav-hell:#18232e;
  --nav-akzent:#006b91;
  background:var(--journal-paper);
  color:var(--journal-ink);
}
body.web.journal-page .j-rank strong{color:#82dcfa}
body.web.journal-page .j-rank>span,
body.web.journal-page .j-rank>small{color:#e0eaf2}
body.web.journal-page .pf-results dl>div:first-child dd{color:var(--journal-accent)}
body.web.journal-page .pf-chart--cyan .pf-bars rect{fill:var(--journal-accent)}
body.web.journal-page .pf-chart--magenta .pf-bars rect{fill:#29465f}
body.web.journal-page .j-compare-screens img,
body.web.journal-page .sc-menu-stage{border-color:#94a4b2}
body.web.journal-page .preview-bar{background:#102536;border-color:#29465f;color:#f3f6f8}
body.web.journal-page .preview-bar strong{color:#82dcfa}
body.web.journal-page .web-foot{background:#102536}
body.web.journal-page .topnav__cta{background:var(--journal-accent);border-color:var(--journal-accent);color:#fff}
body.web.journal-page .topnav__cta:hover,
body.web.journal-page .topnav__cta:focus-visible{background:#005b7b;border-color:#005b7b;color:#fff}

/* The header makes room for content; its mobile menu handle remains available. */
body.web.journal-page .topnav{
  transform:translateY(0);
  transition:transform .22s ease,background-color .22s ease,border-color .22s ease;
}
body.web.journal-page.case-nav-hidden .topnav{
  transform:translateY(calc(-100% - 1px));
  box-shadow:none;
  pointer-events:none;
}
body.web.journal-page .topnav:has(:focus-visible),
.is-edge-open body.web.journal-page .topnav{
  transform:translateY(0);
  opacity:1;
}
body.web.journal-page .topnav:has(:focus-visible){transition:none;pointer-events:auto}
body.web.journal-page .topnav a:focus-visible{outline:2px solid var(--journal-accent);outline-offset:5px}
@media(max-width:768px){
  body.web.journal-page .edge-handle{
    transition:opacity .2s ease,transform .16s ease;
  }
  .nav-compact body.web.journal-page .edge-handle i{width:4px;height:4px;border-radius:50%}
  body.web.journal-page .edge-handle:focus-visible{
    transition:none;
    pointer-events:auto;
    outline-color:var(--journal-accent);
  }
}
@media(prefers-reduced-motion:reduce){
  body.web.journal-page .topnav,
  body.web.journal-page .edge-handle{transition:none}
}

html.case-image-open{overflow:hidden}
body.web.journal-page.case-image-open{overflow:hidden;padding-right:var(--case-scroll-gap,0px)}
body.web.journal-page .case-image-dialog{
  box-sizing:border-box;
  inset:0;
  width:min(1320px,calc(100vw - 48px));
  height:calc(100dvh - 48px);
  max-width:none;
  max-height:none;
  margin:auto;
  padding:0;
  border:1px solid #8495a4;
  border-radius:0;
  background:var(--journal-paper);
  color:var(--journal-ink);
  box-shadow:0 18px 70px #02091455;
}
body.web.journal-page .case-image-dialog[open]{display:flex;flex-direction:column}
body.web.journal-page .case-image-dialog::backdrop{background:rgba(5,15,25,.82)}
body.web.journal-page .case-image-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 16px 10px 22px;border-bottom:1px solid var(--journal-line);flex-shrink:0}
body.web.journal-page .case-image-head h2{font:500 14px/1.45 Geist,Arial,sans-serif;letter-spacing:0;margin:0;max-width:92ch}
body.web.journal-page .case-image-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;background:transparent;color:var(--journal-ink);font:300 32px/1 Arial,sans-serif;cursor:pointer}
body.web.journal-page .case-image-close:hover{background:#dce6ee}
body.web.journal-page .case-image-close:focus-visible{outline:2px solid var(--journal-accent);outline-offset:-3px}
body.web.journal-page .case-image-media{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px;display:grid;place-items:center}
body.web.journal-page .case-image-full{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:auto}
body.web.journal-page .case-image-long .case-image-media{display:block;text-align:center}
body.web.journal-page .case-image-long .case-image-full{max-width:min(100%,680px);max-height:none;margin:0 auto}
body.web.journal-page .case-image-status{font:400 14px/1.5 Geist,Arial,sans-serif;color:var(--journal-dim);margin:20px}
body.web.journal-page .case-image-dialog [hidden]{display:none}
@media(max-width:680px){
  body.web.journal-page .case-image-dialog{width:calc(100vw - 20px);height:calc(100dvh - 24px)}
  body.web.journal-page .case-image-head{gap:10px;padding:8px 8px 8px 14px}
  body.web.journal-page .case-image-head h2{font-size:12px;line-height:1.45}
  body.web.journal-page .case-image-media{padding:10px}
}

body.web.journal-page{padding-bottom:0}