/* Glassdrumman model block (assets/model-hero.js). From d-architects-model/variant.css, project-page form only. */
.mh {
  position: relative; height: 72vh; min-height: 520px; max-height: 820px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto 1fr auto auto;
}
.mh-stage { position: absolute; inset: 0; overflow: hidden; background: var(--white); }
.mh-poster { position: absolute; max-width: none; height: auto; transition: opacity 600ms ease-out; }
.mh-canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease-out; }
.mh-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.mh-canvas canvas:active { cursor: grabbing; }
.mh-live .mh-poster { opacity: 0; pointer-events: none; }
.mh-live .mh-canvas { opacity: 1; }
.mh-label { position: absolute; top: 20px; left: 0; right: auto; margin: 0; max-width: none; white-space: nowrap; text-align: left; }
.mh-num, .mh-controls { position: relative; z-index: 1; }
.mh-num { grid-column: 1 / 6; grid-row: 3; align-self: end; padding-bottom: 12px; }
.mh-n { display: block; font: 400 96px/1 var(--serif); color: var(--grey); }
.mh-cap { display: block; margin-top: 8px; }
.mh-controls {
  grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter); align-items: start; padding-bottom: 8px;
}
.mh-play { grid-column: 1 / 3; justify-self: start; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.mh-scrub { grid-column: 4 / 10; }
.mh-views { grid-column: 10 / 13; justify-self: end; display: flex; gap: 20px; }
.mh-btn {
  min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 12.5px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.10em; color: var(--grey);
  transition: color 120ms ease-out;
}
.mh-btn:hover, .mh-btn[aria-current], .mh-btn[aria-pressed="true"], .mh-play { color: var(--ink); }
.mh-stages { display: grid; grid-template-columns: 1fr auto 1fr; }
.mh-stages :first-child { justify-self: start; } .mh-stages :last-child { justify-self: end; }
.mh-track { position: relative; height: 48px; }
.mh-track::before, .mh-fill { content: ""; position: absolute; left: 0; top: 24px; height: 1px; }
.mh-track::before { right: 0; background: var(--hair); }
.mh-fill { width: calc(6px + (100% - 12px) * var(--p, 1)); background: var(--navy); }
.mh-track input { position: absolute; inset: 0; width: 100%; height: 48px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mh-track input::-webkit-slider-runnable-track { height: 48px; background: transparent; border: 0; }
.mh-track input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: 18px; background: var(--ink); border: 0; border-radius: 0; }
.mh-track input::-moz-range-track { height: 48px; background: transparent; border: 0; }
.mh-track input::-moz-range-thumb { width: 12px; height: 12px; background: var(--ink); border: 0; border-radius: 0; }
.mh-nogl .mh-views, .mh-nogl .mh-play, .mh-still .mh-play { visibility: hidden; }
@media (max-height: 820px) and (min-width: 768px) {
  .mh-n { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 767px) {
  .mh { display: block; height: auto; min-height: 0; max-height: none; }
  .mh-stage { position: relative; height: max(260px, 74vw); }
  .mh-label { top: 8px; left: 0; right: auto !important; z-index: 1; text-align: left; white-space: normal; }
  .mh-num { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mh-controls { display: flex; flex-wrap: wrap; column-gap: 0; padding: 8px 0 0; }
  .mh-scrub { order: 1; flex: 1 0 100%; }
  .mh-play { order: 2; }
  .mh-views { display: none; }
}