html:not(.bk-js) .bk-sheet {
  display: none;
}

.bk-top {
  padding-block: clamp(16px, 3vw, 48px) calc(var(--section-y) * 0.8);
}
.bk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "desk"
    "aside";
}
.bk-intro {
  grid-area: intro;
  
  container: bk-intro / inline-size;
  padding-bottom: clamp(14px, 2.4vw, 24px);
}
.bk-desk {
  grid-area: desk;
  min-width: 0;
}

.bk-noscript {
  margin: 0;
  padding-top: var(--row);
  border-top: 1px solid var(--rule-strong);
  max-width: 44ch;
}
.bk-noscript a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.bk-aside {
  grid-area: aside;
  display: grid;
  align-content: start;
  gap: calc(var(--gap) * 1.1);
  min-width: 0;
  margin-top: calc(var(--section-y) * 0.6);
}

.bk-h1 {
  
  font-size: max(26px, min(calc(var(--step-3) * var(--display-scale)), 12.5cqi));
  line-height: var(--display-leading);
}

[data-titles="by-job"] .bk-h1 {
  letter-spacing: var(--title-tracking);
}
.bk-nb {
  white-space: nowrap;
}

[data-font="screening-room"] .bk-hy,
[data-font="instrument-pair"] .bk-hy {
  margin-inline: -0.04em;
}

[data-font="ballroom"] .bk-hy {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 9;
}
.bk-lede {
  margin-top: clamp(10px, 1.4vw, 20px);
  font-size: var(--step-0);
  line-height: 1.5;
  max-width: 34em;
}
.bk-strip {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  margin-top: 12px;
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
  font-variant-caps: var(--label-variant);
  font-stretch: var(--mono-stretch);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--muted);
}
[data-labels="smallcaps"] .bk-strip,
[data-labels="plain"] .bk-strip {
  font-stretch: var(--body-stretch);
}

.bk-strip {
  --sep: 13px;
  margin-left: calc(var(--sep) * -1);
  clip-path: inset(0 0 0 var(--sep));
}
.bk-strip li {
  padding: 1px calc(var(--sep) - 1px);
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .bk-js .bk-strip {
    display: none;
  }
}
.bk-notice {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--wash);
  font-size: var(--text-small, 14.5px);
  line-height: 1.45;
}

[data-accent="strict"] .bk-notice {
  border-left-color: var(--rule-strong);
}

@media (max-width: 760px) {
  .bk-top {
    padding-top: 12px;
  }
  .bk-intro {
    padding-bottom: 12px;
  }
  .bk-lede__more {
    display: none;
  }
  .bk-desk {
    --row: calc(11px * var(--density));
  }
  .bk-strip {
    --sep: 11px;
    letter-spacing: min(var(--label-tracking), 0.04em);
  }
  
  .bk-desk .gr-bk__time {
    min-height: 48px;
  }
}

[data-nav="dock"] body[data-page="book"] .gr-bar .gr-menu-btn {
  display: inline-flex;
  align-items: center;
}

@container gr-bk (min-width: 600px) {
  .bk-desk .gr-bk__times {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .bk-h1 {
    font-size: max(34px, min(calc(var(--step-4) * var(--display-scale)), 8.4cqi));
    max-width: 15em;
  }
  
  [data-titles="by-job"] .bk-h1 {
    font-size: max(34px, min(var(--title-page), 8.4cqi));
  }
}

@media (min-width: 1024px) {
  .bk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro desk"
      "aside desk";
    column-gap: clamp(40px, 5.6vw, 104px);
  }
  .bk-intro {
    padding-bottom: 0;
  }
  .bk-h1 {
    font-size: max(34px, min(calc(var(--step-4) * var(--display-scale)), 12.6cqi));
  }
  [data-titles="by-job"] .bk-h1 {
    font-size: max(34px, min(var(--title-page), 12.6cqi));
  }
  .bk-lede {
    font-size: max(var(--step-0), min(var(--step-1), 20px));
  }
  .bk-aside {
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 20px);
    margin-top: 0;
    padding-top: calc(var(--gap) * 1.2);
  }
  
  .bk-desk {
    padding-top: calc(var(--display-leading) * 0.12em);
  }
}

.bk-sheet {
  display: none;
}
@media (min-width: 1024px) {
  .bk-sheet {
    display: block;
  }
}
[data-cards="none"] .bk-sheet {
  border-top-color: var(--rule-strong);
}
.bk-sheet__row {
  display: grid;
  grid-template-columns: 5.4em minmax(0, 1fr);
  gap: 0 16px;
  padding: calc(var(--row) * 0.85) 0;
  border-top: 1px solid var(--line);
}
.bk-sheet__row:first-child {
  padding-top: 2px;
  border-top: 0;
}
.bk-sheet__row:last-child {
  padding-bottom: 0;
}
.bk-sheet dt {
  padding-top: 3px;
  color: var(--muted);
}
.bk-sheet dd {
  min-width: 0;
  font-size: 15px;
  line-height: 1.45;
}

.bk-sheet__face {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 6px;
  vertical-align: -8px;
}

.bk-sheet.is-idle .bk-ruler,
.bk-sheet.is-idle .bk-sheet__row--about {
  display: none;
}

.bk-sheet__when {
  font-family: var(--font-body);
  font-variation-settings: var(--body-variation);
  font-stretch: var(--body-stretch);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.25;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bk-sheet__when .bk-sheet__time {
  font-family: var(--font-mono);
  font-variation-settings: var(--mono-variation);
  font-stretch: var(--mono-stretch);
  font-weight: var(--mono-weight);
  letter-spacing: -0.01em;
}
.bk-sheet:not(.is-set) .bk-sheet__when {
  color: var(--muted);
}

.bk-sheet__when {
  --sep: 3ch;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--sep) * -1);
  clip-path: inset(0 0 0 var(--sep));
}
.bk-sheet__when > span:not(.sr-only) {
  white-space: nowrap;
  padding-left: var(--sep);
}
.bk-sheet__when > span:not(.sr-only)::before {
  
  content: "\00B7";
  content: "\00B7" / "";
  display: inline-block;
  width: var(--sep);
  margin-left: calc(var(--sep) * -1);
  text-align: center;
}
.bk-sheet__sub {
  display: block;
  margin-top: 4px;
  font-size: var(--text-label, 13.5px);
  line-height: 1.4;
  color: var(--muted);
}
.bk-sheet__sub:empty {
  display: none;
}

.bk-sheet__sub > span {
  display: block;
}

.bk-ruler {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}
.bk-ruler__bar {
  display: flex;
  gap: 2px;
  height: 10px;
}
.bk-ruler__bar i {
  flex: 1;
  background: var(--line);
  transition: background-color var(--dur) var(--ease);
}
.bk-ruler__bar i:nth-child(2n + 1) {
  
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ink) 35%, transparent);
}
.bk-ruler__bar i.is-on {
  background: var(--accent);
  box-shadow: none;
}
.bk-ruler__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-variation-settings: var(--mono-variation);
  font-size: var(--text-label, 11px);
  line-height: 1.3;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bk-expect__h {
  margin: 0;
}
.bk-commit {
  margin-top: 16px;
  border-top: 1px solid var(--rule-strong);
}
.bk-commit__row {
  display: grid;
  grid-template-columns: 7.4em minmax(0, 1fr);
  gap: 0 16px;
  padding: calc(var(--row) * 0.9) 0;
  border-bottom: 1px solid var(--line);
}
.bk-commit dt {
  padding-top: 3px;
  color: var(--muted);
}
.bk-commit dd {
  min-width: 0;
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .bk-commit__row {
    grid-template-columns: var(--kv-key) minmax(0, 1fr);
    column-gap: var(--kv-gap);
  }
}
@media (max-width: 420px) {
  .bk-commit__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.bk-faq {
  border-top: 1px solid var(--line);
}

[data-rhythm="anchored"] .bk-faq {
  padding-block: var(--section-y-support);
}
.bk-faq .head-row h2 {
  max-width: 28ch;
}

@media (min-width: 900px) {
  .bk-faq .gr-faq {
    max-width: calc((100% - clamp(40px, 6vw, 112px)) * 1.618 / 2.618);
  }
}

.bk-faq .head-row h2,
.bk-close__h {
  font-size: min(calc(var(--step-3) * var(--display-scale)), clamp(30px, calc(12px + 2.3vw), 45px));
}

.bk-close {
  padding-block: calc(var(--section-y) * 0.85) var(--section-y);
  border-top: 1px solid var(--line);
}
.bk-close__h {
  max-width: 20ch;
}

.bk-close__link {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.035em);
  text-underline-offset: 0.14em;
  white-space: nowrap;
  transition: text-decoration-thickness var(--dur) var(--ease);
}
.bk-close__link:hover {
  text-decoration-thickness: max(2px, 0.07em);
}
.bk-close__p {
  margin-top: 18px;
  font-size: 15px;
  color: var(--muted);
  max-width: 64ch;
}

.bk-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-bottom));
  z-index: 58;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 560px;
  min-height: 60px;
  margin-inline: auto;
  padding: 8px 8px 8px 16px;
  
  border-radius: calc(var(--accent-radius) + 4px);
  background: var(--ink);
  color: var(--ground);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  --focus: var(--accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
[data-radius="0"] .bk-bar {
  border-radius: 0;
}
.bk-bar.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.bk-bar__txt {
  display: grid;
  min-width: 0;
  max-width: none;
  line-height: 1.3;
}
.bk-bar__k {
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
  font-variant-caps: var(--label-variant);
  color: color-mix(in srgb, var(--ground) 74%, var(--ink));
}
.bk-bar__k,
.bk-bar__v {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 359px) {
  .bk-bar__lead { display: none; }
}
.bk-bar__v {
  font-family: var(--font-mono);
  font-variation-settings: var(--mono-variation);
  font-stretch: var(--mono-stretch);
  font-weight: var(--mono-weight);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bk-bar__go {
  flex: none;
  min-height: 44px;
  padding-inline: 16px;
}
@media (min-width: 1024px) {
  .bk-bar {
    display: none;
  }
}

[data-palette="every-night"] .bk-bar {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px rgb(0 0 0 / 0.4);
}
[data-palette="every-night"] .bk-bar__k {
  color: var(--muted);
}

[data-palette="cyan-print"] .bk-ruler__bar i.is-on {
  background: var(--accent-text);
}

[data-accent="strict"] .bk-ruler__bar i.is-on {
  background: var(--ink);
}