/* Brake ducts page: additions to styles.css */

/* brake test */
.bt { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.bt__fig { position: relative; margin: 0; padding-top: 22px; }
#btCanvas { display: block; width: 100%; height: auto; background: var(--white); border: 1px solid var(--rule); touch-action: none; }
.bt__panel { display: flex; flex-direction: column; gap: 20px; padding-top: 22px; }
.bt__panel .seg { align-self: flex-start; }
.pedal {
  appearance: none; border: 0; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px 22px 22px; border-radius: 2px;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 8px 0 var(--ink-2);
  transition: transform .08s, box-shadow .08s, background .15s, color .15s;
}
.pedal__k { font: 800 30px/1 var(--sans); font-variation-settings: "wdth" 118; text-transform: uppercase; letter-spacing: -.02em; }
.pedal__s { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.pedal:hover { background: #1c1d20; }
.pedal.is-down { transform: translateY(8px); box-shadow: 0 0 0 var(--ink-2); background: var(--accent); color: var(--ink); }
.pedal:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.readout--3 { grid-template-columns: 1fr; max-width: none; margin: 0; }
.readout--3 div { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.readout--3 dt { margin: 0; }
.readout--3 .led { align-self: center; }
.bt__note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

/* gallery */
.tile--ink .tile__img { background: var(--ink); }
.tile--ink.tile--wide .tile__img img { object-position: 50% 45%; }
#detail .tile__img--pad img { transform: scale(1.5); }
#detail .tile:hover .tile__img--pad img { transform: scale(1.58); }

.foot a { display: block; }

@media (max-width: 1000px) {
  .bt { grid-template-columns: 1fr; gap: 16px; }
  .bt__panel { padding-top: 0; }
  .pedal { align-items: center; }
}

/* this headline is a touch wider than the homepage one */
.hero__title { font-size: clamp(40px, 5.3vw, 76px); }
.hero__title .line { white-space: nowrap; }