@font-face  {
  font-family: CitrusSerif;
  src: url("/assets/fonts/instrument-serif.woff2") format("woff2");
  font-display: swap;
}
@font-face  {
  font-family: CitrusScript;
  src: url("/assets/fonts/relation-regular.woff2") format("woff2");
  font-display: swap;
}:root {
  --vb-ink: #172338;

  --vb-paper: #f5f5ed;

  --vb-blue: #b4cedb;

  --vb-line: #17233833;

  --vb-accent: #87642d;
}* {
  box-sizing: border-box;
}html {
  scroll-behavior: smooth;

  scroll-padding-top: 110px;
}body.vb-citrus-detail {
  margin: 0;

  background: var(--vb-paper);

  color: var(--vb-ink);

  font-family: CitrusSerif,Georgia,serif;
}
.vb-citrus-detail a {
  color: inherit;

  text-underline-offset: 5px;
}
.vb-citrus-detail a:focus-visible,
.vb-citrus-detail summary:focus-visible {
  outline: 2px solid var(--vb-ink);

  outline-offset: 5px;
}
.vb-cd-header {
  position: sticky;

  top: 0;

  z-index: 20;

  background: var(--vb-paper);

  border-bottom: 1px solid var(--vb-line);

  padding: 14px 5vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;
}
.vb-cd-header>a {
  display: flex;

  align-items: center;

  gap: 16px;

  text-decoration: none;

  font-size: 24px;
}
.vb-cd-header img {
  width: 42px;

  height: 42px;
}
.vb-cd-lang {
  display: flex;

  gap: 8px;

  font-family: Arial,sans-serif;

  font-size: 14px;
}
.vb-cd-lang a {
  display: grid;

  place-items: center;

  width: 44px;

  height: 44px;

  text-decoration: none;
}
.vb-cd-lang a[aria-current] {
  border: 1px solid var(--vb-ink);

  border-radius: 50%;
}
.vb-cd-wrap {
  width: min(1240px,90%);

  margin: auto;
}
.vb-cd-back {
  display: inline-flex;

  align-items: center;

  min-height: 56px;

  font-size: 21px;
}
.vb-cd-hero {
  margin: 0;
}
.vb-cd-hero img {
  display: block;

  width: 100%;

  height: auto;

  max-height: 75vh;

  object-fit: contain;

  background: #e8eadf;
}
.vb-cd-hero figcaption {
  display: flex;

  justify-content: space-between;

  gap: 16px;

  padding: 12px 0;

  font-family: Arial,sans-serif;

  font-size: 12px;

  line-height: 1.5;

  letter-spacing: .07em;

  text-transform: uppercase;
}
.vb-cd-title {
  padding: 45px 0 35px;

  border-bottom: 1px solid var(--vb-line);

  display: grid;

  grid-template-columns: 1fr auto;

  align-items: end;

  gap: 30px;
}
.vb-cd-title h1 {
  font-size: clamp(54px,7vw,108px);

  line-height: 1.02;

  font-weight: 400;

  margin: 10px 0 18px;

  max-width: 1000px;
}
.vb-cd-kicker {
  font: 14px/1.5 Arial,sans-serif;

  letter-spacing: .1em;

  text-transform: uppercase;
}
.vb-cd-latin {
  font-size: 21px;

  line-height: 1.4;

  margin: 0;

  font-style: italic;

  max-width: 650px;
}
.vb-cd-number {
  font-size: 85px;

  line-height: 1;

  color: #677586;
}
.vb-cd-tag {
  font: clamp(32px,4vw,54px)/1.4 CitrusScript,cursive;

  margin: 28px 0 30px;
}
.vb-cd-nav {
  display: flex;

  flex-wrap: wrap;

  gap: 10px 28px;

  padding: 4px 0 34px;

  font-size: 21px;
}
.vb-cd-nav a {
  min-height: 44px;

  display: flex;

  align-items: center;
}
.vb-cd-summary {
  display: grid;

  grid-template-columns: repeat(3,1fr);

  border-top: 1px solid var(--vb-line);

  border-bottom: 1px solid var(--vb-line);

  padding: 28px 0;

  gap: 24px;

  margin: 0 0 64px;
}
.vb-cd-summary dt {
  font: 14px/1.5 Arial,sans-serif;

  color: #4c5b64;

  margin-bottom: 8px;
}
.vb-cd-summary dd {
  font-size: clamp(25px,3vw,36px);

  margin: 0;
}
.vb-cd-reading {
  max-width: 740px;

  margin: 0 auto;

  padding: 0 0 65px;
}
.vb-cd-reading p {
  font-size: 25px;

  line-height: 1.6;

  margin: 0 0 24px;
}
.vb-cd-reading h2,
.vb-cd-panel h2,
.vb-cd-feature h2 {
  font-size: clamp(36px,4vw,55px);

  line-height: 1.08;

  font-weight: 400;

  margin: 12px 0 24px;
}
.vb-cd-reading>p:first-of-type {
  font-size: 30px;

  line-height: 1.45;
}
.vb-cd-reading details {
  border-top: 1px solid var(--vb-line);

  margin-top: 30px;

  padding-top: 12px;
}
.vb-cd-reading summary {
  font-size: 25px;

  cursor: pointer;

  min-height: 48px;

  padding: 12px 0;
}
.vb-cd-reading details p:first-of-type {
  margin-top: 20px;
}
.vb-cd-panels {
  display: grid;

  grid-template-columns: 1fr 1fr;

  background: #e9eee7;

  margin: 0 -2vw 70px;
}
.vb-cd-panel {
  padding: 40px;

  min-width: 0;
}
.vb-cd-panel+ .vb-cd-panel {
  border-left: 1px solid var(--vb-line);
}
.vb-cd-panel p {
  font-size: 23px;

  line-height: 1.45;
}
.vb-cd-panel .vb-cd-note {
  font: 14px/1.6 Arial,sans-serif;

  color: #45534a;
}
.vb-cd-map {
  position: relative;

  aspect-ratio: 2/1;

  margin: 20px 0;

  background-image: linear-gradient(#17233809 1px,transparent 1px),linear-gradient(90deg,#17233809 1px,transparent 1px);

  background-size: 25% 33.333%;
}
.vb-cd-map>img {
  display: block;

  width: 100%;

  height: 100%;
}
.vb-cd-pin {
  position: absolute;

  width: 12px;

  height: 12px;

  background: var(--vb-ink);

  border: 2px solid var(--vb-paper);

  border-radius: 50%;

  transform: translate(-50%,-50%);

  box-shadow: 0 0 0 7px #17233820;
}
.vb-cd-calendar {
  display: grid;

  grid-template-columns: repeat(6,1fr);

  gap: 9px;

  margin: 26px 0;
}
.vb-cd-month {
  font: 14px/1.4 Arial,sans-serif;

  text-align: center;

  border: 1px solid #738173;

  padding: 12px 0;

  position: relative;
}
.vb-cd-month.vb-active {
  background: var(--vb-ink);

  color: white;

  border-color: var(--vb-ink);
}
.vb-cd-month.vb-active:after {
  content: "•";

  display: block;

  height: 8px;

  font-size: 12px;

  line-height: 8px;
}
.vb-cd-month:not(.vb-active):after {
  content: "";

  display: block;

  height: 8px;
}
.vb-cd-legend {
  font: 14px/1.5 Arial,sans-serif !important;
}
.vb-cd-feature {
  padding: 50px;

  background: var(--vb-blue);

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 50px;

  margin-bottom: 70px;
}
.vb-cd-feature p {
  font-size: 26px;

  line-height: 1.5;

  margin: 0;
}
.vb-cd-feature .vb-cd-kicker {
  font-size: 14px;

  margin-bottom: 20px;
}
.vb-cd-curiosity {
  max-width: 740px;

  margin: 0 auto 70px;

  border-left: 2px solid var(--vb-accent);

  padding: 0 0 0 30px;
}
.vb-cd-curiosity h2 {
  font-size: 38px;

  line-height: 1.15;

  font-weight: 400;

  margin: 15px 0;
}
.vb-cd-curiosity p {
  font-size: 24px;

  line-height: 1.5;
}
.vb-cd-sources {
  max-width: 740px;

  margin: 0 auto 65px;

  border-top: 1px solid var(--vb-line);

  padding-top: 18px;
}
.vb-cd-sources summary {
  font-size: 22px;

  cursor: pointer;

  padding: 10px 0;

  min-height: 44px;
}
.vb-cd-sources p,
.vb-cd-sources li {
  font: 14px/1.6 Arial,sans-serif;
}
.vb-cd-sources li {
  margin-bottom: 12px;
}
.vb-cd-next {
  border-top: 1px solid var(--vb-line);

  padding: 40px 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 30px;
}
.vb-cd-next a {
  display: block;

  text-decoration: none;

  padding: 10px 0;

  font-size: 30px;

  line-height: 1.15;
}
.vb-cd-next a:last-child {
  text-align: right;
}
.vb-cd-next span {
  display: block;

  font: 14px/1.5 Arial,sans-serif;

  margin-bottom: 14px;
}
.vb-cd-footer {
  padding: 40px 5vw 60px;

  background: var(--vb-blue);

  text-align: center;
}
.vb-cd-footer a {
  font-size: 27px;

  display: inline-block;

  padding: 12px;
}
.vb-cd-footer p {
  font: 14px/1.6 Arial,sans-serif;

  margin: 14px 0;
}
.vb-cd-skip {
  position: absolute;

  top: -100px;

  left: 20px;

  padding: 15px;

  background: white;

  z-index: 30;
}
.vb-cd-skip:focus {
  top: 10px;
}
.vb-citrus-catalogue .vb-citrus-card-link {
  display: block;

  text-decoration: none;
}
.vb-citrus-card-link:focus-visible {
  outline: 2px solid #172338;

  outline-offset: 8px;
}
.vb-citrus-card-cta {
  display: inline-block;

  margin-top: 16px;

  text-decoration: underline;

  text-underline-offset: 5px;

  font-size: 21px;
}
@media (max-width:700px) {
html {
    scroll-padding-top: 90px;
  }
.vb-cd-header {
    padding: 8px 5vw;
  }
.vb-cd-header>a {
    font-size: 21px;

    gap: 10px;
  }
.vb-cd-header img {
    width: 34px;

    height: 34px;
  }
.vb-cd-wrap {
    width: 90%;
  }
.vb-cd-back {
    font-size: 19px;

    min-height: 52px;
  }
.vb-cd-hero {
    margin: 0 -5.55%;
  }
.vb-cd-hero figcaption {
    padding: 12px 5%;

    font-size: 12px;

    letter-spacing: .03em;
  }
.vb-cd-hero img {
    max-height: none;
  }
.vb-cd-title {
    padding: 25px 0;

    gap: 12px;
  }
.vb-cd-title h1 {
    font-size: clamp(46px,12vw,68px);

    overflow-wrap: break-word;
  }
.vb-cd-latin {
    font-size: 19px;
  }
.vb-cd-number {
    display: none;
  }
.vb-cd-tag {
    font-size: 33px;

    line-height: 1.3;

    margin: 24px 0;
  }
.vb-cd-nav {
    gap: 5px 22px;

    font-size: 20px;

    padding-bottom: 24px;
  }
.vb-cd-summary {
    gap: 12px;

    padding: 23px 0;

    margin-bottom: 38px;
  }
.vb-cd-summary dt {
    font-size: 13px;
  }
.vb-cd-summary dd {
    font-size: 24px;

    line-height: 1.2;

    overflow-wrap: break-word;
  }
.vb-cd-reading {
    padding-bottom: 38px;
  }
.vb-cd-reading p {
    font-size: 22px;

    line-height: 1.5;
  }
.vb-cd-reading>p:first-of-type {
    font-size: 25px;
  }
.vb-cd-panels {
    grid-template-columns: 1fr;

    margin: 0 -5.55% 40px;
  }
.vb-cd-panel {
    padding: 32px 5%;
  }
.vb-cd-panel+.vb-cd-panel {
    border-left: 0;

    border-top: 1px solid var(--vb-line);
  }
.vb-cd-panel h2 {
    font-size: 38px;
  }
.vb-cd-feature {
    margin: 0 -5.55% 44px;

    padding: 35px 5%;

    gap: 0;

    grid-template-columns: 1fr;
  }
.vb-cd-feature p {
    font-size: 24px;
  }
.vb-cd-curiosity {
    padding-left: 20px;

    margin-bottom: 40px;
  }
.vb-cd-curiosity h2 {
    font-size: 32px;
  }
.vb-cd-curiosity p {
    font-size: 22px;
  }
.vb-cd-next {
    gap: 20px;
  }
.vb-cd-next a {
    font-size: 24px;
  }
.vb-cd-sources {
    margin-bottom: 35px;
  }
}
@media (prefers-reduced-motion:reduce) {
html {
    scroll-behavior: auto;
  }
}
@media print {
.vb-cd-header,
.vb-cd-nav,
.vb-cd-next,
.vb-cd-footer {
    display: none;
  }
.vb-cd-reading details>* {
    display: block;
  }
.vb-cd-panels,
.vb-cd-feature {
    break-inside: avoid;
  }
.vb-cd-hero img {
    max-height: 350px;
  }
}