barbican-reset 2.33.0 → 2.35.0

package/patterns/static/styles.css

@@ -1,25 +1,2140 @@
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-Book.woff") format("woff"), url("../fonts/FuturaLTPro-Book.woff2") format("woff2");
-  font-style: normal;
-}
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-BookOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BookOblique.woff2") format("woff2");
-  font-style: italic;
-}
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-Bold.woff") format("woff"), url("../fonts/FuturaLTPro-Bold.woff2") format("woff2");
-  font-style: normal;
-  font-weight: bold;
-}
-@font-face {
-  font-family: "FuturaLTPro";
-  src: url("../fonts/FuturaLTPro-BoldOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BoldOblique.woff2") format("woff2");
-  font-style: italic;
-  font-weight: bold;
+@media only screen and (max-width: 415px) {
+  .br-alert {
+    font-size: 0.875rem;
+  }
+}
+.br-alert .title {
+  font-family: Supreme-Black, "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  margin-bottom: 0.25rem;
+}
+.br-alert .flex {
+  justify-content: space-between;
+  display: flex;
+}
+.br-alert .icon {
+  grid-auto-flow: column;
+  display: inline-grid;
+  align-items: center;
+  gap: 0.75rem;
+}
+.br-alert .btn.btn-exit.error path.cross {
+  fill: hsl(0deg, 45%, 37%);
+}
+.br-alert .btn.btn-exit.error path.tint {
+  fill: hsl(0deg, 45%, 95%);
+}
+@media (hover: hover) {
+  .br-alert .btn.btn-exit.error:hover {
+    outline-color: hsl(0deg, 45%, 37%);
+  }
+  .br-alert .btn.btn-exit.error:hover path.cross {
+    fill: hsl(0deg, 45%, 95%);
+  }
+  .br-alert .btn.btn-exit.error:hover path.tint {
+    fill: hsl(0deg, 45%, 37%);
+  }
+}
+.br-alert .btn.btn-exit.error:active {
+  outline-color: hsl(0deg, 45%, 37%);
+}
+.br-alert .btn.btn-exit.error:active path.cross {
+  fill: hsl(0deg, 45%, 95%);
+}
+.br-alert .btn.btn-exit.error:active path.tint {
+  fill: hsl(0deg, 45%, 37%);
+}
+.br-alert .btn.btn-exit.error[data-focus-visible-added] {
+  outline-color: hsl(0deg, 45%, 37%);
+}
+.br-alert .btn.btn-exit.error[data-focus-visible-added] path.cross {
+  fill: hsl(0deg, 45%, 95%);
+}
+.br-alert .btn.btn-exit.error[data-focus-visible-added] path.tint {
+  fill: hsl(0deg, 45%, 37%);
+}
+.br-alert .btn.btn-exit.success path.cross {
+  fill: hsl(120deg, 30%, 37%);
+}
+.br-alert .btn.btn-exit.success path.tint {
+  fill: hsl(120deg, 30%, 95%);
+}
+@media (hover: hover) {
+  .br-alert .btn.btn-exit.success:hover {
+    outline-color: hsl(120deg, 30%, 37%);
+  }
+  .br-alert .btn.btn-exit.success:hover path.cross {
+    fill: hsl(120deg, 30%, 95%);
+  }
+  .br-alert .btn.btn-exit.success:hover path.tint {
+    fill: hsl(120deg, 30%, 37%);
+  }
+}
+.br-alert .btn.btn-exit.success:active {
+  outline-color: hsl(120deg, 30%, 37%);
+}
+.br-alert .btn.btn-exit.success:active path.cross {
+  fill: hsl(120deg, 30%, 95%);
+}
+.br-alert .btn.btn-exit.success:active path.tint {
+  fill: hsl(120deg, 30%, 37%);
+}
+.br-alert .btn.btn-exit.success[data-focus-visible-added] {
+  outline-color: hsl(120deg, 30%, 37%);
+}
+.br-alert .btn.btn-exit.success[data-focus-visible-added] path.cross {
+  fill: hsl(120deg, 30%, 95%);
+}
+.br-alert .btn.btn-exit.success[data-focus-visible-added] path.tint {
+  fill: hsl(120deg, 30%, 37%);
+}
+.br-alert .btn.btn-exit.neutral path.cross {
+  fill: hsl(205deg, 100%, 37%);
+}
+.br-alert .btn.btn-exit.neutral path.tint {
+  fill: hsl(205deg, 100%, 95%);
+}
+@media (hover: hover) {
+  .br-alert .btn.btn-exit.neutral:hover {
+    outline-color: hsl(205deg, 100%, 37%);
+  }
+  .br-alert .btn.btn-exit.neutral:hover path.cross {
+    fill: hsl(205deg, 100%, 95%);
+  }
+  .br-alert .btn.btn-exit.neutral:hover path.tint {
+    fill: hsl(205deg, 100%, 37%);
+  }
+}
+.br-alert .btn.btn-exit.neutral:active {
+  outline-color: hsl(205deg, 100%, 37%);
+}
+.br-alert .btn.btn-exit.neutral:active path.cross {
+  fill: hsl(205deg, 100%, 95%);
+}
+.br-alert .btn.btn-exit.neutral:active path.tint {
+  fill: hsl(205deg, 100%, 37%);
+}
+.br-alert .btn.btn-exit.neutral[data-focus-visible-added] {
+  outline-color: hsl(205deg, 100%, 37%);
+}
+.br-alert .btn.btn-exit.neutral[data-focus-visible-added] path.cross {
+  fill: hsl(205deg, 100%, 95%);
+}
+.br-alert .btn.btn-exit.neutral[data-focus-visible-added] path.tint {
+  fill: hsl(205deg, 100%, 37%);
+}
+.br-alert.center {
+  text-align: center;
+}
+.br-alert.center .wrap {
+  justify-content: center;
+}
+.br-alert .wrap {
+  background-color: hsl(205deg, 100%, 95%);
+  border-color: hsl(205deg, 100%, 75%);
+  color: hsl(205deg, 100%, 37%);
+  border-radius: 0.375rem;
+  border-width: 0.0625rem;
+  padding: 0.75rem 0.875rem;
+  border-style: solid;
+}
+.br-alert .wrap svg {
+  fill: hsl(205deg, 100%, 37%);
+}
+@media (hover: hover) {
+  .br-alert .wrap .btn.btn-link:hover, .br-alert .wrap a:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(205deg, 100%, 37%);
+    background-color: hsl(205deg, 100%, 37%);
+    color: hsl(205deg, 100%, 95%);
+  }
+}
+.br-alert .wrap .btn.btn-link:active, .br-alert .wrap a:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(205deg, 100%, 37%);
+  background-color: hsl(205deg, 100%, 37%);
+  color: hsl(205deg, 100%, 95%);
+}
+.br-alert .wrap .btn.btn-link[data-focus-visible-added], .br-alert .wrap a[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(205deg, 100%, 37%);
+  background-color: hsl(205deg, 100%, 37%);
+  color: hsl(205deg, 100%, 95%);
+}
+.br-alert .wrap.error {
+  background-color: hsl(0deg, 45%, 95%);
+  border-color: hsl(0deg, 45%, 75%);
+  color: hsl(0deg, 45%, 37%);
+}
+.br-alert .wrap.error svg {
+  fill: hsl(0deg, 45%, 37%);
+}
+@media (hover: hover) {
+  .br-alert .wrap.error .btn.btn-link:hover, .br-alert .wrap.error a:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 45%, 37%);
+    background-color: hsl(0deg, 45%, 37%);
+    color: hsl(0deg, 45%, 95%);
+  }
+}
+.br-alert .wrap.error .btn.btn-link:active, .br-alert .wrap.error a:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(0deg, 45%, 37%);
+  background-color: hsl(0deg, 45%, 37%);
+  color: hsl(0deg, 45%, 95%);
+}
+.br-alert .wrap.error .btn.btn-link[data-focus-visible-added], .br-alert .wrap.error a[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(0deg, 45%, 37%);
+  background-color: hsl(0deg, 45%, 37%);
+  color: hsl(0deg, 45%, 95%);
+}
+.br-alert .wrap.success {
+  background-color: hsl(120deg, 30%, 95%);
+  border-color: hsl(120deg, 30%, 75%);
+  color: hsl(120deg, 30%, 37%);
+}
+.br-alert .wrap.success svg {
+  fill: hsl(120deg, 30%, 37%);
+}
+@media (hover: hover) {
+  .br-alert .wrap.success .btn.btn-link:hover, .br-alert .wrap.success a:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(120deg, 30%, 37%);
+    background-color: hsl(120deg, 30%, 37%);
+    color: hsl(120deg, 30%, 95%);
+  }
+}
+.br-alert .wrap.success .btn.btn-link:active, .br-alert .wrap.success a:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(120deg, 30%, 37%);
+  background-color: hsl(120deg, 30%, 37%);
+  color: hsl(120deg, 30%, 95%);
+}
+.br-alert .wrap.success .btn.btn-link[data-focus-visible-added], .br-alert .wrap.success a[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(120deg, 30%, 37%);
+  background-color: hsl(120deg, 30%, 37%);
+  color: hsl(120deg, 30%, 95%);
+}
+.br-alert .wrap.inline {
+  vertical-align: middle;
+  display: inline-block;
+}
+.br-alert .wrap.toggle {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 0.625rem;
+}
+.br-alert .wrap.toggle.inline {
+  display: inline-flex;
+}
+.br-alert .wrap p {
+  margin-bottom: 0;
+}
+.br-alert .wrap p + p {
+  margin-top: 1rem;
+}
+
+.btn {
+  font-family: Supreme-Black, "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  text-decoration: none;
+  font-size: 1.0625rem;
+  text-align: center;
+  transition: none;
+  cursor: pointer;
+  line-height: 1;
+}
+.btn:focus {
+  box-shadow: none;
+  outline: none;
+}
+.btn[slim] {
+  padding: 0.75rem;
+}
+.btn[large] {
+  padding-bottom: 0.9375rem;
+  padding-top: 0.9375rem;
+  font-size: 1.125rem;
+}
+.btn:disabled, .btn.disabled {
+  opacity: 1;
+}
+.btn.btn-primary {
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  min-width: 8rem;
+}
+.btn.btn-primary path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-primary:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+    border: 1px solid hsl(21deg, 100%, 41%);
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+  }
+}
+.btn.btn-primary:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+}
+.btn.btn-primary[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+}
+.btn.btn-primary.hide {
+  visibility: hidden;
+}
+.btn.btn-primary[disabled=disabled] {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  cursor: not-allowed;
+}
+.btn.btn-primary[disabled=disabled] path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-primary[disabled=disabled]:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-primary[disabled=disabled]:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-primary[disabled=disabled][data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-primary[disabled=disabled].hide {
+  visibility: hidden;
+}
+.btn.btn-outline-primary {
+  background-color: white;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-outline-primary path {
+  fill: hsl(21deg, 100%, 41%);
+}
+@media (hover: hover) {
+  .btn.btn-outline-primary:hover {
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-outline-primary:hover path {
+    fill: white;
+  }
+}
+.btn.btn-outline-primary:active {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-outline-primary:active path {
+  fill: white;
+}
+.btn.btn-outline-primary[data-focus-visible-added] {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-outline-primary[data-focus-visible-added] path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-outline-primary:hover {
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid hsl(21deg, 100%, 41%);
+    outline: none;
+  }
+  .btn.btn-outline-primary:hover path {
+    fill: white;
+  }
+}
+.btn.btn-outline-primary:active {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  outline: none;
+}
+.btn.btn-outline-primary:active path {
+  fill: white;
+}
+.btn.btn-outline-primary[data-focus-visible-added] {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  outline: none;
+}
+.btn.btn-outline-primary[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-outline-header {
+  background-color: hsl(21deg, 100%, 41%);
+  border: 0.125rem solid white;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+}
+.btn.btn-outline-header path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-outline-header:hover {
+    background-color: white;
+    color: hsl(21deg, 100%, 41%);
+    box-shadow: none;
+    border: 1px solid 0.125rem;
+    outline: none;
+  }
+  .btn.btn-outline-header:hover path {
+    fill: hsl(21deg, 100%, 41%);
+  }
+}
+.btn.btn-outline-header:active {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+  box-shadow: none;
+  border: 1px solid 0.125rem;
+  outline: none;
+}
+.btn.btn-outline-header:active path {
+  fill: hsl(21deg, 100%, 41%);
+}
+.btn.btn-outline-header[data-focus-visible-added] {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+  box-shadow: none;
+  border: 1px solid 0.125rem;
+  outline: none;
+}
+.btn.btn-outline-header[data-focus-visible-added] path {
+  fill: hsl(21deg, 100%, 41%);
+}
+.btn.btn-info {
+  border: 1px solid hsl(205deg, 100%, 37%);
+  background-color: hsl(205deg, 100%, 37%);
+  color: white;
+}
+.btn.btn-info path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-info:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(205deg, 100%, 37%);
+    border: 1px solid hsl(205deg, 100%, 37%);
+    background-color: hsl(205deg, 100%, 37%);
+    color: white;
+  }
+}
+.btn.btn-info:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(205deg, 100%, 37%);
+  border: 1px solid hsl(205deg, 100%, 37%);
+  background-color: hsl(205deg, 100%, 37%);
+  color: white;
+}
+.btn.btn-info[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(205deg, 100%, 37%);
+  border: 1px solid hsl(205deg, 100%, 37%);
+  background-color: hsl(205deg, 100%, 37%);
+  color: white;
+}
+.btn.btn-info.hide {
+  visibility: hidden;
+}
+.btn.btn-outline-info {
+  background-color: white;
+  border: 1px solid hsl(205deg, 100%, 37%);
+  color: hsl(205deg, 100%, 37%);
+}
+.btn.btn-outline-info path {
+  fill: hsl(205deg, 100%, 37%);
+}
+@media (hover: hover) {
+  .btn.btn-outline-info:hover {
+    background-color: hsl(205deg, 100%, 37%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-outline-info:hover path {
+    fill: white;
+  }
+}
+.btn.btn-outline-info:active {
+  background-color: hsl(205deg, 100%, 37%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-outline-info:active path {
+  fill: white;
+}
+.btn.btn-outline-info[data-focus-visible-added] {
+  background-color: hsl(205deg, 100%, 37%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-outline-info[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-secondary {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-secondary path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-secondary:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-secondary:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-secondary[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-secondary.hide {
+  visibility: hidden;
+}
+.btn.btn-outline-secondary {
+  background-color: white;
+  border: 1px solid hsl(0deg, 0%, 20%);
+  color: hsl(0deg, 0%, 20%);
+}
+.btn.btn-outline-secondary path {
+  fill: hsl(0deg, 0%, 20%);
+}
+@media (hover: hover) {
+  .btn.btn-outline-secondary:hover {
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-outline-secondary:hover path {
+    fill: white;
+  }
+}
+.btn.btn-outline-secondary:active {
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-outline-secondary:active path {
+  fill: white;
+}
+.btn.btn-outline-secondary[data-focus-visible-added] {
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-outline-secondary[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-input-edit {
+  background-color: white;
+  border: 1px solid hsl(0deg, 0%, 35%);
+  color: hsl(0deg, 0%, 35%);
+  background-color: hsl(0deg, 0%, 85%);
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-color: hsl(0deg, 0%, 65%);
+  padding: 0.625rem 0.75rem;
+}
+.btn.btn-input-edit path {
+  fill: hsl(0deg, 0%, 35%);
+}
+@media (hover: hover) {
+  .btn.btn-input-edit:hover {
+    background-color: hsl(0deg, 0%, 35%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-input-edit:hover path {
+    fill: white;
+  }
+}
+.btn.btn-input-edit:active {
+  background-color: hsl(0deg, 0%, 35%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-input-edit:active path {
+  fill: white;
+}
+.btn.btn-input-edit[data-focus-visible-added] {
+  background-color: hsl(0deg, 0%, 35%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-input-edit[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-remove {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  line-height: 1.375;
+  padding: 0.625em;
+}
+.btn.btn-remove path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-remove:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-remove:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-remove[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-remove.hide {
+  visibility: hidden;
+}
+.btn.btn-link {
+  background-color: transparent;
+  text-decoration: underline;
+  vertical-align: baseline;
+  padding: 0;
+  border-radius: 0;
+  font-weight: 400;
+  text-align: left;
+  color: inherit;
+  border: none;
+  line-height: 1.3;
+}
+@media (hover: hover) {
+  .btn.btn-link:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    border-radius: 0;
+    color: #fff;
+  }
+}
+.btn.btn-link:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  border-radius: 0;
+  color: #fff;
+}
+.btn.btn-link[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  border-radius: 0;
+  color: #fff;
+}
+.btn.btn-video-help {
+  background-color: hsl(0deg, 0%, 95%);
+  text-decoration: underline;
+  vertical-align: baseline;
+  padding: 1.25em;
+  border-radius: 0;
+  font-weight: 400;
+  text-align: left;
+  color: inherit;
+  border: none;
+  font-family: Supreme-Black, "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  width: 100%;
+}
+@media (hover: hover) {
+  .btn.btn-video-help:hover {
+    background-color: hsl(0deg, 0%, 35%);
+    color: white;
+  }
+}
+.btn.btn-video-help:active {
+  background-color: hsl(0deg, 0%, 35%);
+  color: white;
+}
+.btn.btn-video-help[data-focus-visible-added] {
+  background-color: hsl(0deg, 0%, 35%);
+  color: white;
+}
+.btn.btn-exit {
+  background-color: transparent;
+  text-decoration: underline;
+  vertical-align: baseline;
+  padding: 0;
+  border-radius: 0;
+  font-weight: 400;
+  text-align: left;
+  color: inherit;
+  border: none;
+}
+.btn.btn-exit svg {
+  display: block;
+}
+@media (hover: hover) {
+  .btn.btn-exit:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.1875rem currentColor;
+    border-radius: 50%;
+  }
+  .btn.btn-exit:hover path.cross {
+    fill: white;
+  }
+  .btn.btn-exit:hover path.tint {
+    fill: currentColor;
+  }
+}
+.btn.btn-exit:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.1875rem currentColor;
+  border-radius: 50%;
+}
+.btn.btn-exit:active path.cross {
+  fill: white;
+}
+.btn.btn-exit:active path.tint {
+  fill: currentColor;
+}
+.btn.btn-exit[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.1875rem currentColor;
+  border-radius: 50%;
+}
+.btn.btn-exit[data-focus-visible-added] path.cross {
+  fill: white;
+}
+.btn.btn-exit[data-focus-visible-added] path.tint {
+  fill: currentColor;
+}
+@media only screen and (max-width: 519px) {
+  .btn.btn-remove-ticket {
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+    line-height: 1.375;
+    padding: 0.625em;
+    width: 100%;
+  }
+  .btn.btn-remove-ticket path {
+    fill: currentColor;
+  }
+}
+@media only screen and (max-width: 519px) and (hover: hover) {
+  .btn.btn-remove-ticket:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+@media only screen and (max-width: 519px) {
+  .btn.btn-remove-ticket:active {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+@media only screen and (max-width: 519px) {
+  .btn.btn-remove-ticket[data-focus-visible-added] {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+@media only screen and (max-width: 519px) {
+  .btn.btn-remove-ticket.hide {
+    visibility: hidden;
+  }
+}
+@media only screen and (min-width: 520px) {
+  .btn.btn-remove-ticket {
+    background-color: transparent;
+    text-decoration: underline;
+    vertical-align: baseline;
+    padding: 0;
+    border-radius: 0;
+    font-weight: 400;
+    text-align: left;
+    color: inherit;
+    border: none;
+    line-height: 1.3;
+  }
+}
+@media only screen and (min-width: 520px) and (hover: hover) {
+  .btn.btn-remove-ticket:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    border-radius: 0;
+    color: #fff;
+  }
+}
+@media only screen and (min-width: 520px) {
+  .btn.btn-remove-ticket:active {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    border-radius: 0;
+    color: #fff;
+  }
+}
+@media only screen and (min-width: 520px) {
+  .btn.btn-remove-ticket[data-focus-visible-added] {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    border-radius: 0;
+    color: #fff;
+  }
+}
+@media only screen and (max-width: 1199px) {
+  .btn.btn-remove-gift {
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+    line-height: 1.375;
+    padding: 0.625em;
+    width: 100%;
+  }
+  .btn.btn-remove-gift path {
+    fill: currentColor;
+  }
+}
+@media only screen and (max-width: 1199px) and (hover: hover) {
+  .btn.btn-remove-gift:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+@media only screen and (max-width: 1199px) {
+  .btn.btn-remove-gift:active {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+@media only screen and (max-width: 1199px) {
+  .btn.btn-remove-gift[data-focus-visible-added] {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+@media only screen and (max-width: 1199px) {
+  .btn.btn-remove-gift.hide {
+    visibility: hidden;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .btn.btn-remove-gift {
+    background-color: transparent;
+    text-decoration: underline;
+    vertical-align: baseline;
+    padding: 0;
+    border-radius: 0;
+    font-weight: 400;
+    text-align: left;
+    color: inherit;
+    border: none;
+    line-height: 1.3;
+  }
+}
+@media only screen and (min-width: 1200px) and (hover: hover) {
+  .btn.btn-remove-gift:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    border-radius: 0;
+    color: #fff;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .btn.btn-remove-gift:active {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    border-radius: 0;
+    color: #fff;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .btn.btn-remove-gift[data-focus-visible-added] {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    border-radius: 0;
+    color: #fff;
+  }
+}
+.btn.btn-membership-card {
+  background-color: transparent;
+  border: 1px solid white;
+  color: white;
+}
+.btn.btn-membership-card path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-membership-card:hover {
+    background-color: white;
+    color: transparent;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-membership-card:hover path {
+    fill: transparent;
+  }
+}
+.btn.btn-membership-card:active {
+  background-color: white;
+  color: transparent;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-membership-card:active path {
+  fill: transparent;
+}
+.btn.btn-membership-card[data-focus-visible-added] {
+  background-color: white;
+  color: transparent;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-membership-card[data-focus-visible-added] path {
+  fill: transparent;
+}
+@media (hover: hover) {
+  .btn.btn-membership-card:hover.member {
+    color: hsl(217deg, 72%, 53%);
+  }
+  .btn.btn-membership-card:hover.member-plus {
+    color: hsl(223deg, 87%, 21%);
+  }
+}
+.btn.btn-membership-card:active.member {
+  color: hsl(217deg, 72%, 53%);
+}
+.btn.btn-membership-card:active.member-plus {
+  color: hsl(223deg, 87%, 21%);
+}
+.btn.btn-membership-card[data-focus-visible-added].member {
+  color: hsl(217deg, 72%, 53%);
+}
+.btn.btn-membership-card[data-focus-visible-added].member-plus {
+  color: hsl(223deg, 87%, 21%);
+}
+.btn.btn-video-login {
+  border: 1px solid white;
+  background-color: white;
+  color: #0a0a0a;
+}
+.btn.btn-video-login path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-video-login:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem #0a0a0a, 0 0 0 0.4rem white;
+    border: 1px solid white;
+    background-color: white;
+    color: #0a0a0a;
+  }
+}
+.btn.btn-video-login:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem #0a0a0a, 0 0 0 0.4rem white;
+  border: 1px solid white;
+  background-color: white;
+  color: #0a0a0a;
+}
+.btn.btn-video-login[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem #0a0a0a, 0 0 0 0.4rem white;
+  border: 1px solid white;
+  background-color: white;
+  color: #0a0a0a;
+}
+.btn.btn-video-login.hide {
+  visibility: hidden;
+}
+.btn.btn-cta {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+  fill: white;
+}
+.btn.btn-cta path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-cta:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-cta:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-cta[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-cta.hide {
+  visibility: hidden;
 }
+.btn.btn-carousel {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white;
+  border-radius: 50%;
+  font-size: 0;
+  fill: white;
+}
+.btn.btn-carousel path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-carousel:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-carousel:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-carousel[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-carousel.hide {
+  visibility: hidden;
+}
+@media only screen and (max-width: 959px) {
+  .btn.btn-carousel {
+    padding: 0.75rem;
+  }
+}
+.btn.btn-carousel:disabled {
+  background-color: hsl(0deg, 0%, 85%);
+  border-color: hsl(0deg, 0%, 85%);
+  opacity: 1;
+}
+.btn.btn-carousel label {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  height: 1px;
+  padding: 0;
+  width: 1px;
+  border: 0;
+}
+.btn.btn-invisible {
+  color: inherit;
+  padding: 0;
+}
+@media (hover: hover) {
+  .btn.btn-invisible:hover {
+    box-shadow: none;
+  }
+}
+.btn.btn-invisible:active {
+  box-shadow: none;
+}
+.btn.btn-invisible[data-focus-visible-added] {
+  box-shadow: none;
+}
+.btn.btn-returns {
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  padding: 0.75em;
+  white-space: nowrap;
+}
+.btn.btn-returns path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-returns:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+    border: 1px solid hsl(21deg, 100%, 41%);
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+  }
+}
+.btn.btn-returns:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+}
+.btn.btn-returns[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+}
+.btn.btn-returns.hide {
+  visibility: hidden;
+}
+.btn.btn-returns:disabled, .btn.btn-returns.disabled {
+  background-color: white;
+  border: 1px solid hsl(0deg, 0%, 20%);
+  color: hsl(0deg, 0%, 20%);
+}
+.btn.btn-returns:disabled path, .btn.btn-returns.disabled path {
+  fill: hsl(0deg, 0%, 20%);
+}
+@media (hover: hover) {
+  .btn.btn-returns:disabled:hover, .btn.btn-returns.disabled:hover {
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-returns:disabled:hover path, .btn.btn-returns.disabled:hover path {
+    fill: white;
+  }
+}
+.btn.btn-returns:disabled:active, .btn.btn-returns.disabled:active {
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-returns:disabled:active path, .btn.btn-returns.disabled:active path {
+  fill: white;
+}
+.btn.btn-returns:disabled[data-focus-visible-added], .btn.btn-returns.disabled[data-focus-visible-added] {
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-returns:disabled[data-focus-visible-added] path, .btn.btn-returns.disabled[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-cancel-returns {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  padding: 0.75em;
+}
+.btn.btn-cancel-returns path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-cancel-returns:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-cancel-returns:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-cancel-returns[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-cancel-returns.hide {
+  visibility: hidden;
+}
+.btn.btn-resale {
+  background-color: white;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  color: hsl(21deg, 100%, 41%);
+  font-size: 0.875rem;
+  padding: 0.625em;
+}
+.btn.btn-resale path {
+  fill: hsl(21deg, 100%, 41%);
+}
+@media (hover: hover) {
+  .btn.btn-resale:hover {
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-resale:hover path {
+    fill: white;
+  }
+}
+.btn.btn-resale:active {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-resale:active path {
+  fill: white;
+}
+.btn.btn-resale[data-focus-visible-added] {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-resale[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-radio {
+  border: 1px solid hsl(0deg, 0%, 65%);
+  padding: 0.75rem 0.75rem 0.625rem;
+  font-weight: 400;
+  margin: 0.25rem;
+}
+@media (hover: hover) {
+  .btn.btn-radio:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.0625rem hsl(0deg, 0%, 35%);
+    border: 1px solid hsl(0deg, 0%, 35%);
+    background-color: hsl(0deg, 0%, 95%);
+  }
+}
+.btn.btn-radio:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.0625rem hsl(0deg, 0%, 35%);
+  border: 1px solid hsl(0deg, 0%, 35%);
+  background-color: hsl(0deg, 0%, 95%);
+}
+.btn.btn-radio[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.0625rem hsl(0deg, 0%, 35%);
+  border: 1px solid hsl(0deg, 0%, 35%);
+  background-color: hsl(0deg, 0%, 95%);
+}
+.btn.btn-menu {
+  background-color: hsl(21deg, 100%, 41%);
+  border: 1px solid white;
+  color: white;
+  line-height: 2.375rem;
+  padding: 0 0.75rem;
+  margin: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  vertical-align: middle;
+  min-height: 2.5rem;
+}
+.btn.btn-menu path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-menu:hover {
+    background-color: white;
+    color: hsl(21deg, 100%, 41%);
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-menu:hover path {
+    fill: hsl(21deg, 100%, 41%);
+  }
+}
+.btn.btn-menu:active {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-menu:active path {
+  fill: hsl(21deg, 100%, 41%);
+}
+.btn.btn-menu[data-focus-visible-added] {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-menu[data-focus-visible-added] path {
+  fill: hsl(21deg, 100%, 41%);
+}
+@media (hover: hover) {
+  .btn.btn-menu:hover {
+    background-color: white;
+    color: hsl(21deg, 100%, 41%);
+  }
+  .btn.btn-menu:hover path {
+    fill: currentColor;
+  }
+}
+.btn.btn-menu:active {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-menu:active path {
+  fill: currentColor;
+}
+.btn.btn-menu[data-focus-visible-added] {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-menu[data-focus-visible-added] path {
+  fill: currentColor;
+}
+.btn.btn-menu[data-clicked=true] {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-menu[data-clicked=true] path {
+  fill: currentColor;
+}
+.btn.btn-basket {
+  border: 1px solid white;
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+  line-height: 2.375rem;
+  padding: 0 0.75rem;
+  margin: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  vertical-align: middle;
+  min-height: 2.5rem;
+}
+.btn.btn-basket path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-basket:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem hsl(21deg, 100%, 41%), 0 0 0 0.4rem white;
+    border: 1px solid white;
+    background-color: white;
+    color: hsl(21deg, 100%, 41%);
+  }
+}
+.btn.btn-basket:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(21deg, 100%, 41%), 0 0 0 0.4rem white;
+  border: 1px solid white;
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-basket[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem hsl(21deg, 100%, 41%), 0 0 0 0.4rem white;
+  border: 1px solid white;
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-basket.hide {
+  visibility: hidden;
+}
+@media (hover: hover) {
+  .btn.btn-basket:hover {
+    background-color: white;
+    color: hsl(21deg, 100%, 41%);
+  }
+  .btn.btn-basket:hover path {
+    fill: currentColor;
+  }
+}
+.btn.btn-basket:active {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-basket:active path {
+  fill: currentColor;
+}
+.btn.btn-basket[data-focus-visible-added] {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-basket[data-focus-visible-added] path {
+  fill: currentColor;
+}
+.btn.btn-basket[data-clicked=true] {
+  background-color: white;
+  color: hsl(21deg, 100%, 41%);
+}
+.btn.btn-basket[data-clicked=true] path {
+  fill: currentColor;
+}
+.btn.btn-discover {
+  background-color: hsl(0deg, 0%, 20%);
+  border: 1px solid white;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.btn.btn-discover path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-discover:hover {
+    background-color: white;
+    color: hsl(0deg, 0%, 20%);
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-discover:hover path {
+    fill: hsl(0deg, 0%, 20%);
+  }
+}
+.btn.btn-discover:active {
+  background-color: white;
+  color: hsl(0deg, 0%, 20%);
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-discover:active path {
+  fill: hsl(0deg, 0%, 20%);
+}
+.btn.btn-discover[data-focus-visible-added] {
+  background-color: white;
+  color: hsl(0deg, 0%, 20%);
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-discover[data-focus-visible-added] path {
+  fill: hsl(0deg, 0%, 20%);
+}
+.btn.btn-discover span {
+  position: relative;
+  top: 0.125rem;
+}
+.btn.btn-membership-pill {
+  background-color: white;
+  border: 1px solid hsl(0deg, 0%, 10%);
+  color: hsl(0deg, 0%, 10%);
+}
+.btn.btn-membership-pill path {
+  fill: hsl(0deg, 0%, 10%);
+}
+@media (hover: hover) {
+  .btn.btn-membership-pill:hover {
+    background-color: hsl(0deg, 0%, 10%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-membership-pill:hover path {
+    fill: white;
+  }
+}
+.btn.btn-membership-pill:active {
+  background-color: hsl(0deg, 0%, 10%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-membership-pill:active path {
+  fill: white;
+}
+.btn.btn-membership-pill[data-focus-visible-added] {
+  background-color: hsl(0deg, 0%, 10%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-membership-pill[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-membership-pill:hover {
+  background-color: hsl(0deg, 0%, 85%);
+  color: hsl(0deg, 0%, 10%);
+  box-shadow: none;
+  border: 1px solid hsl(0deg, 0%, 10%);
+  outline: none;
+}
+.btn.btn-membership-pill:hover path {
+  fill: hsl(0deg, 0%, 10%);
+}
+.btn.btn-membership-pill[data-focus-visible-added] {
+  background-color: hsl(0deg, 0%, 85%);
+  color: hsl(0deg, 0%, 10%);
+  box-shadow: none;
+  border: 1px solid hsl(0deg, 0%, 10%);
+  outline: none;
+  outline: 1px solid hsl(0deg, 0%, 10%);
+}
+.btn.btn-membership-pill[data-focus-visible-added] path {
+  fill: hsl(0deg, 0%, 10%);
+}
+.btn.btn-membership-pill[data-status=active] {
+  background-color: hsl(0deg, 0%, 10%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid hsl(0deg, 0%, 10%);
+  outline: none;
+}
+.btn.btn-membership-pill[data-status=active] path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-membership-pill[data-status=active]:hover {
+    outline: 2px solid hsl(0deg, 0%, 10%);
+    outline-offset: 0.125rem;
+  }
+}
+.btn.btn-membership-pill[data-status=active]:active {
+  outline: 2px solid hsl(0deg, 0%, 10%);
+  outline-offset: 0.125rem;
+}
+.btn.btn-membership-pill[data-status=active][data-focus-visible-added] {
+  outline: 2px solid hsl(0deg, 0%, 10%);
+  outline-offset: 0.125rem;
+}
+.btn.btn-priority-row {
+  background-color: white;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  color: hsl(21deg, 100%, 41%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.btn.btn-priority-row path {
+  fill: hsl(21deg, 100%, 41%);
+}
+@media (hover: hover) {
+  .btn.btn-priority-row:hover {
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-priority-row:hover path {
+    fill: white;
+  }
+}
+.btn.btn-priority-row:active {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-priority-row:active path {
+  fill: white;
+}
+.btn.btn-priority-row[data-focus-visible-added] {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-priority-row[data-focus-visible-added] path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-priority-row:hover {
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid hsl(21deg, 100%, 41%);
+    outline: none;
+  }
+  .btn.btn-priority-row:hover path {
+    fill: white;
+  }
+}
+.btn.btn-priority-row:active {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  outline: none;
+}
+.btn.btn-priority-row:active path {
+  fill: white;
+}
+.btn.btn-priority-row[data-focus-visible-added] {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  outline: none;
+}
+.btn.btn-priority-row[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.btn-login-to-book {
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  min-width: 8rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
+  min-width: initial;
+}
+.btn.btn-login-to-book path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-login-to-book:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+    border: 1px solid hsl(21deg, 100%, 41%);
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+  }
+}
+.btn.btn-login-to-book:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+}
+.btn.btn-login-to-book[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(21deg, 100%, 41%);
+  border: 1px solid hsl(21deg, 100%, 41%);
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+}
+.btn.btn-login-to-book.hide {
+  visibility: hidden;
+}
+.btn.btn-login-to-book[disabled=disabled] {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  cursor: not-allowed;
+}
+.btn.btn-login-to-book[disabled=disabled] path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-login-to-book[disabled=disabled]:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-login-to-book[disabled=disabled]:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-login-to-book[disabled=disabled][data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-login-to-book[disabled=disabled].hide {
+  visibility: hidden;
+}
+@media only screen and (max-width: 767px) {
+  .btn.btn-login-to-book {
+    margin-top: 1rem;
+    width: 100%;
+  }
+}
+.btn.btn-sold-out {
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  pointer-events: none;
+  min-width: initial;
+}
+.btn.btn-sold-out path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-sold-out:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+    border: 1px solid hsl(0deg, 0%, 20%);
+    background-color: hsl(0deg, 0%, 20%);
+    color: white;
+  }
+}
+.btn.btn-sold-out:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-sold-out[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 0%, 20%);
+  border: 1px solid hsl(0deg, 0%, 20%);
+  background-color: hsl(0deg, 0%, 20%);
+  color: white;
+}
+.btn.btn-sold-out.hide {
+  visibility: hidden;
+}
+.btn.btn-add-membership-to-basket {
+  border: 1px solid hsl(217deg, 72%, 53%);
+  background-color: hsl(217deg, 72%, 53%);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.btn.btn-add-membership-to-basket path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-add-membership-to-basket:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(217deg, 72%, 53%);
+    border: 1px solid hsl(217deg, 72%, 53%);
+    background-color: hsl(217deg, 72%, 53%);
+    color: white;
+  }
+}
+.btn.btn-add-membership-to-basket:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(217deg, 72%, 53%);
+  border: 1px solid hsl(217deg, 72%, 53%);
+  background-color: hsl(217deg, 72%, 53%);
+  color: white;
+}
+.btn.btn-add-membership-to-basket[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(217deg, 72%, 53%);
+  border: 1px solid hsl(217deg, 72%, 53%);
+  background-color: hsl(217deg, 72%, 53%);
+  color: white;
+}
+.btn.btn-add-membership-to-basket.hide {
+  visibility: hidden;
+}
+.btn.btn-remove-membership-from-basket {
+  border: 1px solid hsl(0deg, 45%, 37%);
+  background-color: hsl(0deg, 45%, 37%);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.btn.btn-remove-membership-from-basket path {
+  fill: currentColor;
+}
+@media (hover: hover) {
+  .btn.btn-remove-membership-from-basket:hover {
+    position: relative;
+    outline: none;
+    z-index: 2;
+    box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 45%, 37%);
+    border: 1px solid hsl(0deg, 45%, 37%);
+    background-color: hsl(0deg, 45%, 37%);
+    color: white;
+  }
+}
+.btn.btn-remove-membership-from-basket:active {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 45%, 37%);
+  border: 1px solid hsl(0deg, 45%, 37%);
+  background-color: hsl(0deg, 45%, 37%);
+  color: white;
+}
+.btn.btn-remove-membership-from-basket[data-focus-visible-added] {
+  position: relative;
+  outline: none;
+  z-index: 2;
+  box-shadow: 0 0 0 0.25rem white, 0 0 0 0.4rem hsl(0deg, 45%, 37%);
+  border: 1px solid hsl(0deg, 45%, 37%);
+  background-color: hsl(0deg, 45%, 37%);
+  color: white;
+}
+.btn.btn-remove-membership-from-basket.hide {
+  visibility: hidden;
+}
+.btn.btn-additional-information {
+  background-color: white;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  color: hsl(21deg, 100%, 41%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.btn.btn-additional-information path {
+  fill: hsl(21deg, 100%, 41%);
+}
+@media (hover: hover) {
+  .btn.btn-additional-information:hover {
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid 1px;
+    outline: none;
+  }
+  .btn.btn-additional-information:hover path {
+    fill: white;
+  }
+}
+.btn.btn-additional-information:active {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-additional-information:active path {
+  fill: white;
+}
+.btn.btn-additional-information[data-focus-visible-added] {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid 1px;
+  outline: none;
+}
+.btn.btn-additional-information[data-focus-visible-added] path {
+  fill: white;
+}
+@media (hover: hover) {
+  .btn.btn-additional-information:hover {
+    background-color: hsl(21deg, 100%, 41%);
+    color: white;
+    box-shadow: none;
+    border: 1px solid hsl(21deg, 100%, 41%);
+    outline: none;
+  }
+  .btn.btn-additional-information:hover path {
+    fill: white;
+  }
+}
+.btn.btn-additional-information:active {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  outline: none;
+}
+.btn.btn-additional-information:active path {
+  fill: white;
+}
+.btn.btn-additional-information[data-focus-visible-added] {
+  background-color: hsl(21deg, 100%, 41%);
+  color: white;
+  box-shadow: none;
+  border: 1px solid hsl(21deg, 100%, 41%);
+  outline: none;
+}
+.btn.btn-additional-information[data-focus-visible-added] path {
+  fill: white;
+}
+.btn.expand {
+  display: block;
+}
+
 .br-container--outer {
   padding-right: 5%;
   padding-left: 5%;
@@ -41,7 +2156,7 @@
   padding-bottom: 1.5rem;
   padding-top: 1.5rem;
 }
-@media (min-width: 32.5em) {
+@media only screen and (min-width: 520px) {
   .br-container--inner:not(.footer) {
     padding-bottom: 2.5rem;
     padding-top: 2.5rem;
@@ -54,7 +2169,7 @@
 .br-container--inner.thin {
   max-width: 50rem;
 }
-@media (min-width: 32.5em) {
+@media only screen and (min-width: 520px) {
   .br-container--inner.masthead {
     padding-bottom: 3rem;
     padding-top: 3rem;
@@ -65,17 +2180,74 @@
 }
 
 body {
-  line-height: 1.4;
-  font-family: FuturaLTPro, "Helvetica", "Arial", sans-serif;
+  font-family: Supreme-Light, "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.35;
   color: hsl(0deg, 0%, 20%);
+  margin: 0;
+  background-color: hsl(0deg, 0%, 95%);
+}
+
+.topbar {
+  justify-content: space-between;
+  border-bottom: 1px solid grey;
+  background-color: white;
+  line-height: 60px;
+  display: flex;
+}
+
+.topbar .sections {
+  display: flex;
+}
+.topbar .sections h3 {
+  margin-bottom: 0;
+}
+.topbar .sections a {
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: inherit;
+}
+@media (hover: hover) {
+  .topbar .sections a:hover {
+    background-color: hsl(0deg, 0%, 95%);
+  }
+}
+.topbar .sections a:active {
+  background-color: hsl(0deg, 0%, 95%);
+}
+.topbar .sections a[data-focus-visible-added] {
+  background-color: hsl(0deg, 0%, 95%);
+}
+
+.page {
+  background-color: #ffffff;
+  padding: 1.25rem;
+}
+.page + .page {
+  margin-top: 1.25rem;
+}
+.page + .section-header {
+  margin-top: 2.5rem;
+}
+
+.section-header {
+  background-color: black;
+  padding: 1.25rem;
+  color: white;
+}
+.section-header h3 {
+  margin-bottom: 0;
+}
+.section-header + .page {
+  margin-top: 1.25rem;
 }
 
 .list.list-palette {
   list-style: none;
-  margin: 0 0 2rem;
   display: flex;
   gap: 0.125rem;
   padding: 0;
+  margin: 0;
 }
 .list.list-palette.brand-contemporary-music .item.item-palette {
   background-color: hsl(254deg, 44%, 33%);
@@ -414,6 +2586,10 @@ body {
   background-color: #f3f9f8;
 }
 
+.list.list-palette + .title.title-palette {
+  margin-top: 2rem;
+}
+
 .list.list-palette.grey .item.item-palette.l11 {
   background-color: hsl(0deg, 0%, 10%);
 }
@@ -455,4 +2631,8 @@ h2 {
 
 h3 {
   margin: 0 0 0.5rem;
+}
+
+.br-alert + .br-alert {
+  margin-top: 1.25rem;
 }