@layer components {
:root {
  --hbd-on-body: #FFFFFF;
}

.hbd-bleed { width: auto; margin-inline: 0; }

.hbd-bleed--wide {
  margin-inline: -64px;
  --rail-in-64: 64px;
  --rail-in-32: 64px;
}

@media (max-width: 1439px) {
  .hbd-bleed,
  .hbd-bleed--wide {
    margin-inline: 0;
    --rail-in-64: 0px;
    --rail-in-32: 0px;
  }
}

.hbd-obj { position: relative; margin-block: 0; }

.hbd-svg { display: block; width: 100%; height: auto; }

@media (min-width: 901px) {
  .hbd-stage { outline: none; }
}

@media (max-width: 900px) {
  .hbd-stage {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hbd-stage:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

  .hbd-stage > .hbd-svg { min-width: 860px; }
}

.hbd-sec .site-head { margin-bottom: var(--space-8); }

.hbd-ovh { position: absolute; z-index: 3; }

.hbd-ovh { left: var(--rail-in-64); }

@media (max-width: 1439px) {
  .hbd-ovh { left: 0; }
}

.hbd-lab {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

.hbd-lab--on { fill: var(--hbd-on-body); }

.hbd-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  fill: var(--text-primary);
}

.hbd-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--space-5);
  margin-top: var(--space-5);
  padding-inline: var(--rail-in-64);
}

@media (max-width: 1439px) {
  .hbd-foot { padding-inline: 0; }
}

.hbd-foot-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hbd-foot-t {
  flex: 1 1 340px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}
}

@layer components {

.cut-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-10);
  align-items: end;

  margin-bottom: var(--space-6);
}

.cut-head .page-hero-title { margin: 0; }
.cut-head-r { margin: 0; max-width: 46ch; }

@media (max-width: 900px) {
  .cut-head { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
}

.cut-body { fill: rgba(255, 255, 255, 0.72); }

.cut-top { fill: rgba(255, 255, 255, 0.96); }

.cut-arris { stroke: #ffffff; stroke-width: 1.6; }

.cut-face { fill: rgba(255, 255, 255, 0.40); }

.cut-i { fill: #05070c; }

.cut-on-body { fill: rgba(5, 7, 12, 0.78); }

.cut-count { font-size: 13px; letter-spacing: 0.01em; }

.js .hbd-cut .cut-left  { transform: translateX(48px); }
.js .hbd-cut .cut-right { transform: translateX(-48px); }

.js .hbd-cut .cut-left,
.js .hbd-cut .cut-right {
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .hbd-cut.visible .cut-left,
.js .hbd-cut.visible .cut-right { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .js .hbd-cut .cut-left,
  .js .hbd-cut .cut-right { transform: none !important; transition: none !important; }
}
}

@layer components {

.hbd-worked .site-title { max-width: 26ch; }

.wk-band { fill: rgba(255, 255, 255, 0.30); }
.wk-arris { stroke: rgba(255, 255, 255, 0.62); stroke-width: 1.4; }

.wk-c {
  stroke: rgba(0, 0, 0, 0.70);
  stroke-width: 2.4;
  stroke-linecap: butt;
}

.wk-on-band { fill: var(--hbd-on-body); }

.js .hbd-worked .wk-cuts { opacity: 0; transition: opacity 0.9s ease 0.2s; }
.js .hbd-worked.visible .wk-cuts { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .hbd-worked .wk-cuts { opacity: 1 !important; transition: none !important; }
}
}

@layer components {

.fm-stage { position: relative; }

.fm-block { fill: rgba(255, 255, 255, 0.34); }
.fm-piece { fill: rgba(255, 255, 255, 0.72); }

.fm-reg {
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.fm-on-block { fill: var(--hbd-on-body); }

.fm-on-piece { fill: rgba(0, 0, 0, 0.80); }

.fm-head { top: 46px; }
.fm-head .site-head { max-width: 34rem; margin-bottom: 0; }
.hbd-form .site-title { max-width: 20ch; }

@media (max-width: 1100px) {

  .fm-head { position: static; }
  .fm-head .site-head { max-width: none; margin-bottom: var(--space-6); }
  .fm-stage { display: flex; flex-direction: column-reverse; }
}

.js .hbd-form .fm-piece { transform: translateY(-46px); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.js .hbd-form .fm-reg { opacity: 0; transition: opacity 0.5s ease 0.7s; }

.js .hbd-form.visible .fm-piece { transform: translateY(0); }
.js .hbd-form.visible .fm-reg { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .hbd-form .fm-piece { transform: none !important; transition: none !important; }
  .js .hbd-form .fm-reg { opacity: 1 !important; transition: none !important; }
}
}

@layer components {

.hbd-inlay .in-head { max-width: 32rem; }
.hbd-inlay .site-title { max-width: 24ch; }

.in-body { fill: rgba(255, 255, 255, 0.42); }
.in-arris { stroke: rgba(255, 255, 255, 0.72); stroke-width: 1.4; }

.in-fill { fill: #2e2f30; }

.in-lip {
  fill: none;
  stroke: #ababad;
  stroke-width: 2;
  stroke-linecap: square;
}

.in-on-body { fill: var(--hbd-on-body); }

.js .hbd-inlay .in-piece {
  transform: translateY(-18px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.js .hbd-inlay.visible .in-piece { transform: translateY(0); opacity: 1; }

.js .hbd-inlay.visible .in-piece:nth-of-type(3n) { transition-delay: 0.12s; }
.js .hbd-inlay.visible .in-piece:nth-of-type(3n + 1) { transition-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  .js .hbd-inlay .in-piece {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

.in-act { fill: rgba(255, 255, 255, 0.88); }

.in-on-act { fill: rgba(0, 0, 0, 0.86); }
}

@layer components {

.fa-stage { position: relative; }

.fa-body { fill: rgba(255, 255, 255, 0.28); }

.fa-face { stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.2; }

.fa-swell { fill: #5a5b5f; }

.fa-spine { stroke: rgba(255, 255, 255, 0.46); stroke-width: 1.6; }
.fa-tie { stroke: rgba(255, 255, 255, 0.46); stroke-width: 1.6; }

.fa-out { fill: rgba(255, 255, 255, 0.50); }

.fa-head { top: 196px; }
.fa-head .site-kicker { color: rgba(255, 255, 255, 0.80); }
.fa-head .site-lede { color: rgba(255, 255, 255, 0.86); }
.fa-head .site-head { max-width: 30rem; margin-bottom: 0; }
.hbd-faces .site-title { max-width: 20ch; }

@media (max-width: 1100px) {

  .fa-head { position: static; }
  .fa-head .site-head { max-width: none; margin-bottom: var(--space-6); }
  .fa-stage { display: flex; flex-direction: column-reverse; }
}

.js .hbd-faces .fa-swell,
.js .hbd-faces .fa-bare {
  opacity: 0;
  transition: opacity 0.7s ease 0.25s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.js .hbd-faces .fa-swell { transform: translateY(-14px); }
.js .hbd-faces .fa-bare { transform: translateY(14px); }

.js .hbd-faces.visible .fa-swell,
.js .hbd-faces.visible .fa-bare { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .hbd-faces .fa-swell,
  .js .hbd-faces .fa-bare {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.hbd-faces .section-route { text-align: left; margin-top: var(--space-5); }
}