/* Guide-page bodies: approved Culture specification plus the first Colour guide pass. */
main.bv-container.bv-section {
  box-sizing: border-box;
  max-width: 1440px;
  padding-bottom: var(--bv-space-7);
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
  padding-top: 0;
  width: min(100%, 1440px);
}

.bvg-page {
  color: var(--bv-ink);
  font: 400 var(--bv-text-body)/1.7 var(--bv-sans);
}

.bvg-page *,
.bvg-page *::before,
.bvg-page *::after {
  box-sizing: border-box;
}

.bvg-page :where(h1, h2, h3, h4, p, figure, dl, dd) {
  margin-top: 0;
}

.bvg-page h1 {
  font: 400 clamp(34px, 4.4vw, 48px)/1.08 var(--bv-serif);
  letter-spacing: -.02em;
  margin-bottom: 20px;
}

.bvg-page h2 {
  font: 500 var(--bv-text-title-md)/1.25 var(--bv-serif);
}

.bvg-page h3 {
  font: 500 var(--bv-text-title-sm)/1.35 var(--bv-sans);
}

.bvg-page a {
  color: var(--bv-block);
}

.bvg-breadcrumb,
.bvg-breadcrumb a,
.bvg-kicker,
.bvg-period,
.bvg-cite,
.bvg-caption,
.bvg-stone figcaption {
  color: var(--bv-muted);
  font-size: var(--bv-text-xs);
}

.bvg-breadcrumb {
  margin-bottom: 20px;
}

.bvg-breadcrumb a {
  text-decoration: none;
}

.bvg-kicker {
  font-family: var(--bv-mono);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.45;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.bvg-lead {
  color: var(--bv-muted);
  max-width: 680px;
}

.bvg-button {
  align-items: center;
  background: var(--bv-block);
  border: 1px solid var(--bv-block);
  color: var(--bv-on-dark) !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: .08em;
  min-height: 48px;
  padding: 0 28px;
  text-decoration: none;
}

.bvg-button:hover,
.bvg-button:focus-visible {
  background: var(--bv-paper);
  color: var(--bv-block) !important;
}

.bvg-culture .bvg-cta a.bvg-button,
.bvg-culture .bvg-cta a.bvg-button:visited {
  color: var(--bv-on-dark) !important;
  opacity: 1;
  visibility: visible;
  -webkit-text-fill-color: var(--bv-on-dark) !important;
}

.bvg-culture .bvg-cta a.bvg-button:hover,
.bvg-culture .bvg-cta a.bvg-button:focus-visible {
  color: var(--bv-block) !important;
  -webkit-text-fill-color: var(--bv-block) !important;
}

.bvg-text-link {
  border-bottom: 1px solid var(--bv-line-strong);
  display: inline-block;
  font-size: var(--bv-text-body);
  min-height: 44px;
  padding: 10px 0 6px;
  text-decoration: none;
}

/* Stones & culture. */
.bvg-hero {
  padding: 88px 0 56px;
}

.bvg-standing {
  border-left: 2px solid var(--bv-line);
  color: var(--bv-muted);
  font-size: var(--bv-text-body-sm);
  margin: 24px 0 0;
  max-width: 680px;
  padding-left: 16px;
}

.bvg-jump {
  padding-bottom: 40px;
}

.bvg-bead-rail {
  --bvg-home-bead-size: calc((100% - 203px) / 30);
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 28px 0 20px;
  position: relative;
  scrollbar-width: none;
}

.bvg-bead-rail::-webkit-scrollbar {
  display: none;
}

.bvg-bead-rail::before {
  background: var(--bv-line);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: calc((var(--bvg-home-bead-size) * 33) + 224px);
  top: 50px;
  z-index: 0;
}

.bvg-bead-rail a {
  align-items: center;
  display: inline-flex;
  flex: 0 0 var(--bvg-home-bead-size);
  height: 44px;
  justify-content: center;
  min-height: 44px;
  min-width: var(--bvg-home-bead-size);
  position: relative;
  transition: transform .18s ease;
  width: var(--bvg-home-bead-size);
  z-index: 1;
}

.bvg-bead-rail a:hover,
.bvg-bead-rail a:focus-visible {
  transform: translateY(-4px);
}

.bvg-bead-rail img {
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.bvg-family-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-top: 16px;
}

.bvg-family-links a {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  font-size: var(--bv-text-body-sm);
  min-height: 44px;
  text-decoration: none;
}

.bvg-family-links i {
  background-image: var(--bvg-family-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  display: block;
  flex: 0 0 14px;
  height: 14px;
  width: 14px;
}

.bvg-family-name {
  border-bottom: 1px solid var(--bv-line-strong);
  color: var(--bv-ink);
  padding-bottom: 2px;
}

.bvg-family-count {
  color: var(--bv-muted);
  font-family: var(--bv-mono);
}

.bvg-family {
  padding-top: var(--bv-space-7);
}

.bvg-family > h2 {
  margin-bottom: var(--bv-space-5);
}

.bvg-stone {
  align-items: flex-start;
  border-top: 1px solid var(--bv-line);
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(230px, 340px) minmax(0, 680px);
  padding: 48px 0;
}

.bvg-stone__media {
  margin-bottom: 0;
}

.bvg-stone__media > img {
  aspect-ratio: 1;
  background: var(--bv-image-surface);
  display: block;
  object-fit: contain;
  width: 100%;
}

.bvg-stone__media > img.bvg-stone__image--clear {
  padding: 12%;
}

.bvg-stone__media figcaption {
  line-height: 1.5;
  margin-top: 8px;
  text-align: center;
}

.bvg-stone__design-link {
  align-items: center;
  border-bottom: 1px solid var(--bv-line-strong);
  display: inline-flex;
  min-height: 44px;
  text-decoration: none;
}

.bvg-stone__copy h3 {
  font-family: var(--bv-serif);
  font-size: 20px;
  margin-bottom: 2px;
}

.bvg-stone__summary {
  color: var(--bv-ink);
  margin-bottom: 20px;
}

.bvg-specs {
  display: grid;
  gap: 14px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
}

.bvg-specs dt {
  color: var(--bv-muted);
  font: 500 var(--bv-text-xs)/1.4 var(--bv-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bvg-specs dd {
  line-height: 1.5;
}

.bvg-disclosure {
  border-left: 2px solid var(--bv-alert);
  color: var(--bv-muted);
  font-size: var(--bv-text-body-sm);
  padding-left: 16px;
}

.bvg-disclosure strong {
  color: var(--bv-alert);
  display: block;
  font: 500 var(--bv-text-xs)/1.4 var(--bv-mono);
  letter-spacing: .1em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.bvg-traditions {
  border-top: 1px solid var(--bv-line);
}

.bvg-traditions summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 500;
  justify-content: space-between;
  min-height: 56px;
}

.bvg-traditions summary::-webkit-details-marker {
  display: none;
}

.bvg-traditions[open] summary span {
  transform: rotate(45deg);
}

.bvg-traditions > div {
  display: grid;
  gap: 24px;
  padding: 4px 0 24px 20px;
}

.bvg-traditions h4 {
  font: 500 var(--bv-text-body-sm)/1.4 var(--bv-sans);
  margin-bottom: 2px;
}

.bvg-period,
.bvg-cite {
  font-family: var(--bv-mono);
  margin-bottom: 8px;
}

.bvg-cta {
  align-items: center;
  background: var(--bv-deep);
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-top: var(--bv-space-7);
  padding: 40px 48px;
}

.bvg-cta h2,
.bvg-cta p {
  margin-bottom: 4px;
}

.bvg-culture .bvg-cta {
  display: block;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  width: 100vw;
}

.bvg-culture .bvg-cta__inner {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1440px;
  padding: 40px clamp(20px, 5vw, 64px);
}

/* Colour pairing. */
.bvg-colour-hero {
  align-items: center;
  border-bottom: 1px solid var(--bv-line);
  display: grid;
  gap: 56px;
  grid-template-columns: 1.12fr .88fr;
  padding: 60px 0 48px;
}

.bvg-colour-hero > div:first-child > p:not(.bvg-kicker) {
  color: var(--bv-muted);
  max-width: 700px;
}

.bvg-colour-hero strong {
  color: var(--bv-ink);
}

.bvg-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 28px;
}

.bvg-hero-ring {
  text-align: center;
}

.bvg-hero-ring .bvg-ring {
  height: 270px;
  margin: auto;
  width: 270px;
}

.bvg-hero-ring .bvg-ring > span {
  height: 30px;
  transform: translate(-50%, -50%) rotate(calc(var(--bead-index) * 17.142857deg)) translateY(-104px) rotate(calc(var(--bead-index) * -17.142857deg));
  width: 30px;
}

.bvg-hero-ring > p span,
.bvg-hero-ring > p strong {
  display: block;
}

.bvg-hero-ring > p span {
  color: var(--bv-muted);
  font: 500 var(--bv-text-xs)/1.4 var(--bv-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bvg-patterns {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 38px;
}

.bvg-patterns article {
  background: var(--bv-deep);
  padding: 20px;
}

.bvg-patterns h3 {
  font-family: var(--bv-serif);
  font-size: 21px;
  margin-bottom: 6px;
}

.bvg-patterns p:last-child,
.bvg-design-grid article > p:last-child {
  color: var(--bv-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 0;
}

.bvg-colour-family {
  padding-top: 52px;
}

.bvg-colour-family > header {
  align-items: flex-end;
  border-bottom: 1px solid var(--bv-line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
}

.bvg-colour-family > header h2 {
  font-size: 34px;
  margin-bottom: 0;
}

.bvg-colour-family > header > p {
  color: var(--bv-muted);
  font-size: var(--bv-text-body-sm);
  margin-bottom: 0;
  max-width: 620px;
}

.bvg-design-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bvg-design-grid article {
  min-width: 0;
}

.bvg-ring {
  background: var(--bv-deep);
  height: 144px;
  position: relative;
  width: 100%;
}

.bvg-ring > span {
  height: 15px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--bead-index) * 17.142857deg)) translateY(-52px) rotate(calc(var(--bead-index) * -17.142857deg));
  width: 15px;
}

.bvg-ring img {
  border-radius: 50%;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bvg-design-name {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin: 9px 0 4px;
}

.bvg-design-name span,
.bvg-design-name strong {
  font-size: var(--bv-text-xs);
}

.bvg-design-name strong {
  color: var(--bv-muted);
  font-family: var(--bv-mono);
  font-weight: 400;
}

.bvg-rules {
  background: var(--bv-deep);
  margin-top: 68px;
  padding: 52px 48px;
}

.bvg-rules > div {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
}

.bvg-rules article > span,
.bvg-wearing article > span {
  color: var(--bv-block);
  display: block;
  font: 500 24px/1 var(--bv-sans);
  margin-bottom: 10px;
}

.bvg-rules h3 {
  margin-bottom: 6px;
}

.bvg-rules article p {
  color: var(--bv-muted);
  font-size: var(--bv-text-body-sm);
  margin-bottom: 0;
}

.bvg-size-preview {
  padding-top: 52px;
}

.bvg-size-preview > div {
  border-left: 1px solid var(--bv-line-strong);
  border-top: 1px solid var(--bv-line-strong);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
}

.bvg-size-preview article {
  border-bottom: 1px solid var(--bv-line-strong);
  border-right: 1px solid var(--bv-line-strong);
  padding: 20px 22px;
}

.bvg-size-preview h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.bvg-size-preview article > p:last-child {
  color: var(--bv-muted);
  font-size: var(--bv-text-body-sm);
  margin-bottom: 0;
}

/* Size and Care. */
.bvg-split-hero {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 430px;
}

.bvg-split-hero > div {
  align-self: center;
  padding: 56px 56px 56px 0;
}

.bvg-split-hero figure {
  margin-bottom: 0;
}

.bvg-split-hero img,
.bvg-care-photo img,
.bvg-kit img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.bvg-guide-pair,
.bvg-care-pair {
  display: grid;
  gap: 56px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: var(--bv-space-7);
}

.bvg-number-list {
  list-style: none;
  margin: 28px 0;
  padding: 0;
}

.bvg-number-list li {
  border-top: 1px solid var(--bv-line);
  display: grid;
  gap: 16px;
  grid-template-columns: 40px 1fr;
  padding: 16px 0;
}

.bvg-number-list li > span {
  color: var(--bv-muted);
  font-family: var(--bv-mono);
  font-size: var(--bv-text-xs);
}

.bvg-number-list p {
  margin-bottom: 0;
}

.bvg-note {
  background: var(--bv-deep);
  padding: 20px;
}

.bvg-fit-table {
  border-left: 1px solid var(--bv-line-strong);
  border-top: 1px solid var(--bv-line-strong);
  margin-top: 28px;
}

.bvg-fit-row {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
}

.bvg-fit-row > span {
  border-bottom: 1px solid var(--bv-line-strong);
  border-right: 1px solid var(--bv-line-strong);
  font-size: var(--bv-text-body-sm);
  min-width: 0;
  padding: 12px 10px;
}

.bvg-fit-row small {
  color: var(--bv-muted);
  display: block;
}

.bvg-fit-head {
  background: var(--bv-deep);
  font-family: var(--bv-mono);
  font-weight: 500;
  text-transform: uppercase;
}

.bvg-caption {
  line-height: 1.6;
  margin-top: 14px;
}

.bvg-wearing,
.bvg-durability {
  padding-top: var(--bv-space-7);
}

.bvg-wearing > div,
.bvg-durability > div {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.bvg-wearing article,
.bvg-durability article {
  border-top: 1px solid var(--bv-line-strong);
  padding-top: 20px;
}

.bvg-care-pair aside {
  border-top: 1px solid var(--bv-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  padding-top: 16px;
}

.bvg-care-pair aside strong {
  flex-basis: 100%;
}

.bvg-care-pair aside span {
  color: var(--bv-muted);
  font-size: var(--bv-text-body-sm);
}

.bvg-check-list p {
  display: grid;
  gap: 12px;
  grid-template-columns: 20px 1fr;
}

.bvg-check-list span {
  color: var(--bv-block);
}

.bvg-care-photo {
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
  margin-top: 28px;
}

.bvg-durability > p:not(.bvg-kicker) {
  color: var(--bv-muted);
  max-width: 760px;
}

.bvg-durability article {
  position: relative;
}

.bvg-durability article::before {
  background: var(--bv-block);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  top: -1px;
  width: 48px;
}

.bvg-durability .bvg-tier--delicate::before {
  background: var(--bv-alert);
}

.bvg-durability small {
  color: var(--bv-muted);
}

.bvg-durability ul {
  padding-left: 20px;
}

.bvg-kit {
  align-items: stretch;
  background: var(--bv-deep);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--bv-space-7);
}

.bvg-kit > div {
  align-self: center;
  padding: 48px;
}

.bvg-kit figure {
  margin-bottom: 0;
  min-height: 360px;
}

@media (max-width: 1100px) {
  .bvg-design-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bvg-ring {
    height: 180px;
  }

  .bvg-ring > span {
    height: 18px;
    transform: translate(-50%, -50%) rotate(calc(var(--bead-index) * 17.142857deg)) translateY(-66px) rotate(calc(var(--bead-index) * -17.142857deg));
    width: 18px;
  }
}

@media (max-width: 780px) {
  main.bv-container.bv-section {
    width: 100%;
  }

  .bvg-hero {
    padding-top: 56px;
  }

  .bvg-stone,
  .bvg-colour-hero,
  .bvg-split-hero,
  .bvg-guide-pair,
  .bvg-care-pair,
  .bvg-kit {
    grid-template-columns: 1fr;
  }

  .bvg-bead-rail {
    --bvg-home-bead-size: 34px;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .bvg-patterns,
  .bvg-rules > div,
  .bvg-wearing > div,
  .bvg-durability > div {
    grid-template-columns: 1fr;
  }

  .bvg-colour-hero {
    padding-top: 48px;
  }

  .bvg-size-preview > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bvg-split-hero > div {
    padding: 48px 0 32px;
  }

  .bvg-split-hero figure {
    aspect-ratio: 4 / 3;
  }

  .bvg-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 32px 24px;
  }

  .bvg-culture .bvg-cta__inner {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 32px;
    padding-top: 32px;
  }

  .bvg-kit figure {
    min-height: 280px;
  }
}

@media (max-width: 520px) {
  .bvg-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bvg-ring {
    height: 150px;
  }

  .bvg-ring > span {
    height: 15px;
    transform: translate(-50%, -50%) rotate(calc(var(--bead-index) * 17.142857deg)) translateY(-54px) rotate(calc(var(--bead-index) * -17.142857deg));
    width: 15px;
  }

  .bvg-colour-family > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .bvg-rules,
  .bvg-kit > div {
    padding: 32px 20px;
  }

  .bvg-specs,
  .bvg-size-preview > div {
    grid-template-columns: 1fr;
  }

  .bvg-fit-table {
    overflow-x: auto;
  }

  .bvg-fit-row {
    min-width: 520px;
  }
}