/* Editorial treatment for the building-health case study. */

:root {
  --alarm: #ea5a58;
  --alarm-dark: #c74442;
  --all-clear: #168846;
  --canvas: #ffffff;
  --figure: #f2f2f0;
  --ink: #181817;
  --line: #deded9;
  --muted: #6c6c67;
  --soft: #fafaf8;
  --ui: #2c2d30;
  --ui-line: #e4e4df;
  --reading: 42rem;
  --wide: 68rem;
  --ink-50: #6c6c67;
  --measure: 42rem;
  --rule: #deded9;
  --u: 1rem;
  --underline: #181817;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
  color: var(--ink);
  font-family:
    Arial,
    Helvetica Neue,
    Helvetica,
    sans-serif;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a {
  color: inherit;
  text-decoration-color: #a3a39d;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: currentcolor;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--alarm);
  outline-offset: 4px;
}

.skip {
  background: var(--ink);
  color: white;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 20;
}

.skip:focus {
  top: 1rem;
}

.site-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 1.25rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 90rem;
  padding: 1.15rem clamp(1.25rem, 4vw, 3rem);
}

.site-header a {
  text-decoration: none;
}

.site-header strong {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: flex-end;
}

.article-head {
  margin: 0 auto;
  max-width: 58rem;
  padding: clamp(5rem, 12vw, 10rem) 1.25rem clamp(4rem, 9vw, 7rem);
  text-align: center;
}

.article-head h1 {
  font-size: var(--type-display);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}

.dek {
  color: #4c4c48;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.45;
  margin: 2.25rem auto 0;
  max-width: 38rem;
  text-wrap: balance;
}

.byline {
  align-items: center;
  display: flex;
  font-size: 0.84rem;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 2rem;
}

/* .byline-org carries no styling of its own — the name
   and the company are one text style. All the class does
   is hang the separator between them, and the flex gap
   already sets the space on its left, so the margin
   matches it on the right. */
.byline-org::before {
  content: "\2022";
  margin-right: 0.65rem;
}

.hero-figure,
.wide-figure {
  margin: 0 auto;
  max-width: var(--wide);
  padding-inline: 1.25rem;
}

.hero-stage {
  align-items: center;
  background: #eeeeeb;
  display: flex;
  justify-content: center;
  min-height: clamp(26rem, 64vw, 43rem);
  overflow: hidden;
  padding: clamp(2rem, 7vw, 6rem);
  position: relative;
}

.hero-stage::before {
  background:
    linear-gradient(#ffffffb8, #ffffffb8),
    repeating-linear-gradient(
      90deg,
      transparent 0 4.8rem,
      #d7d7d1 4.8rem calc(4.8rem + 1px)
    );
  content: "";
  inset: 0;
  opacity: 0.55;
  position: absolute;
}

.real-asset {
  background: var(--figure);
  overflow: hidden;
  padding: clamp(1.5rem, 6vw, 5rem);
  position: relative;
}

.real-asset > div {
  position: relative;
  width: 100%;
  z-index: 1;
}

.real-asset--narrow > div {
  margin-inline: auto;
  max-width: 28.8125rem;
}

.real-asset--alarm {
  background: #f6dedd;
}

/* ── Hero motion ─────────────────────────────────────
   Three patterns, none of them novel, which is the
   point — a shared indicator that travels between tabs
   instead of jumping, a stack that unfolds one card
   behind the other, and a container that resizes with
   its contents rather than snapping to them.

   Everything is gated behind .is-live, added a frame
   after the hero is wired up. Without it the pill
   would slide in from 0,0 and the cards would fade up
   on first paint, which is motion nobody asked for. */

.interactive-hero .bh-tile {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  position: relative;
  text-align: start;
  z-index: 1;
}

/* The white card behind the selected count used to be a
   property of the tile. It is now one object that moves,
   so .bh-tile--on must stop drawing its own. */
.interactive-hero .bh-tile--on {
  background: none;
  box-shadow: none;
}

.interactive-hero.is-live .bh-tile {
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

.interactive-hero .bh-tile:active {
  transform: scale(0.985);
}

.interactive-hero .bh-tile:focus-visible {
  outline: 2px solid var(--bh-ink);
  outline-offset: -3px;
}

.interactive-hero .bh-tiles {
  position: relative;
}

/* The travelling indicator. Its two edges are separate
   transitions and the leading one leaves first, so the
   pill stretches toward where it is going and the back
   edge catches up. Matched timing on both edges reads as
   a rectangle teleporting; this reads as one object
   moving, which is the whole point of lifting the white
   background out of the tile in the first place.

   The asymmetry has to come from the curves, not just
   the durations. The leading edge eases out and the
   trailing edge holds back before it goes; two ease-outs
   of different lengths arrive within a few per cent of
   each other and there is no stretch to see at all.
   Measured: a one-tile move peaks at about 1.55× the
   pill's resting width, a hundred milliseconds in, and
   is back to width by 350. */
.hero-pill {
  --pill-l: 320ms;
  --pill-r: 320ms;
  --pill-le: cubic-bezier(0.32, 0.72, 0, 1);
  --pill-re: cubic-bezier(0.32, 0.72, 0, 1);
  background: #fff;
  border-radius: 8px;
  bottom: 0;
  box-shadow: var(--bh-shadow);
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 0;
}

.interactive-hero.is-live .hero-pill {
  transition:
    left var(--pill-l) var(--pill-le),
    right var(--pill-r) var(--pill-re);
}

/* The frame is absolutely positioned inside this box and
   scaled, so it would clip the pill's shadow. Its height
   is written from JS; while the stack is opening a
   ResizeObserver rewrites it every frame, which is why
   there is no height transition here to lag behind. */
.interactive-hero .bh-fit {
  overflow: visible;
}

.interactive-hero .bh-deck {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: start;
}

.interactive-hero .bh-deck[disabled] {
  cursor: default;
}

.interactive-hero .bh-deck:focus-visible {
  border-radius: 12px;
  outline: 2px solid var(--bh-ink);
  outline-offset: 3px;
}

.interactive-hero .bh-deck:not([disabled]):active {
  transform: scale(0.995);
}

/* The press wants to feel immediate; the pile does not. */
.interactive-hero.is-live .bh-deck {
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Open and close are the same transition run in either
   direction, so the pile folds back the way it came. */
.interactive-hero.is-live .bh-deck-card {
  transition:
    margin-bottom 340ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 240ms ease,
    transform 340ms cubic-bezier(0.32, 0.72, 0, 1),
    width 340ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Stagger, mirrored. Collapsing, the bottom card leaves
   first; opening, it arrives last. */
.interactive-hero .bh-deck-card--1 {
  transition-delay: 50ms;
}

.interactive-hero .bh-deck.is-expanded .bh-deck-card--1 {
  transition-delay: 0ms;
}

.interactive-hero .bh-deck.is-expanded .bh-deck-card--2 {
  transition-delay: 50ms;
}

.interactive-hero .bh-deck.is-expanded .bh-deck-card {
  margin-bottom: 8px;
  opacity: 1;
  width: 100%;
}

.interactive-hero .bh-deck.is-expanded .bh-deck-card--2 {
  margin-bottom: 0;
}

/* The chevron on the card you actually click. */
.interactive-hero.is-live .bh-deck-card svg.bh-chev {
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.interactive-hero .bh-deck.is-expanded .bh-deck-card--0 svg.bh-chev {
  transform: rotate(90deg);
}

/* Switching category rebuilds the cards, so this fires on
   its own every time — no class to toggle. Each keyframe
   declares only its opening state; the landing values are
   whatever the card's own rules say they should be, which
   is full opacity for the top card and a quarter for the
   two behind it.

   The stagger is held inside the keyframes rather than
   set with animation-delay, and nothing fills backwards.
   A delayed animation on a card that starts at zero
   opacity means the card is invisible until the animation
   runs — and in a background tab, or anywhere frames are
   not being produced, that is content hidden behind
   motion. Started at once and staggered internally, the
   worst case is that the animation never plays and all
   three cards are simply there. */
@keyframes hero-card-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

@keyframes hero-card-in-1 {
  0%,
  16% {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

@keyframes hero-card-in-2 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

.interactive-hero.is-live .bh-deck-card {
  animation: hero-card-in 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.interactive-hero.is-live .bh-deck-card--1 {
  animation-duration: 305ms;
  animation-name: hero-card-in-1;
}

.interactive-hero.is-live .bh-deck-card--2 {
  animation-duration: 350ms;
  animation-name: hero-card-in-2;
}

@media (hover: hover) and (pointer: fine) {
  .interactive-hero .bh-tile:not(.bh-tile--on):hover {
    background: rgba(255, 255, 255, 0.55);
  }

  /* Hovering the pile lets four units of it out, which is
     the cheapest way to say the thing is openable. */
  .interactive-hero
    .bh-deck:not([disabled]):not(.is-expanded):hover
    .bh-deck-card--0,
  .interactive-hero
    .bh-deck:not([disabled]):not(.is-expanded):hover
    .bh-deck-card--1 {
    margin-bottom: -56px;
  }

  .interactive-hero
    .bh-deck:not([disabled]):not(.is-expanded):hover
    .bh-deck-card--1,
  .interactive-hero
    .bh-deck:not([disabled]):not(.is-expanded):hover
    .bh-deck-card--2 {
    opacity: 0.36;
  }
}

.real-asset--sheet {
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.real-asset--sheet .bj-sheet {
  gap: clamp(1rem, 2vw, 2rem);
  max-width: none;
}

.real-comparison {
  background: var(--figure);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.real-comparison-item {
  background: white;
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.real-comparison-frame {
  margin-inline: auto;
  max-width: 23.75rem;
}

.real-comparison-item > b {
  display: block;
  font-size: 0.82rem;
  margin-top: 1.4rem;
}

.real-comparison-item > span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.4;
  margin-top: 0.3rem;
}

.browser {
  background: white;
  border: 1px solid #d8d8d3;
  box-shadow: 0 1.5rem 4rem #2424201c;
  max-width: 50rem;
  position: relative;
  width: 100%;
}

.browser-bar {
  align-items: center;
  border-bottom: 1px solid var(--ui-line);
  display: flex;
  gap: 0.35rem;
  height: 2.35rem;
  padding: 0 0.85rem;
}

.browser-bar i {
  background: #d9d9d4;
  border-radius: 50%;
  display: block;
  height: 0.42rem;
  width: 0.42rem;
}

.building-shell {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: 1fr 16.5rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.temperature {
  background:
    linear-gradient(180deg, transparent 0 72%, #f1f1ee 72%),
    linear-gradient(90deg, #f7f7f5 49.8%, #ecece8 50%);
  border: 1px solid var(--ui-line);
  min-height: 19rem;
  overflow: hidden;
  padding: 1.25rem;
  position: relative;
}

.temperature::before {
  border-bottom: 2px solid #7c83d7;
  border-radius: 50%;
  content: "";
  height: 7rem;
  left: 12%;
  position: absolute;
  top: 34%;
  transform: rotate(-7deg);
  width: 78%;
}

.skeleton {
  background: #ddddda;
  display: block;
  height: 0.5rem;
  margin-bottom: 0.45rem;
  width: 42%;
}

.skeleton.short {
  width: 24%;
}

.health {
  color: var(--ui);
  font-family:
    Arial,
    Helvetica Neue,
    Helvetica,
    sans-serif;
  width: 100%;
}

.health-counts {
  background: #ededeb;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.28rem;
}

.health-count {
  padding: 0.72rem 0.45rem 0.65rem;
  text-align: center;
}

.health-count.active {
  background: white;
  box-shadow: 0 0.2rem 0.6rem #2222;
}

.health-count b {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}

.health-count span {
  color: #686864;
  display: block;
  font-size: 0.58rem;
  line-height: 1.2;
  margin-top: 0.42rem;
}

.alert-stack {
  padding-bottom: 0.85rem;
  position: relative;
}

.alert-stack::before,
.alert-stack::after {
  background: white;
  border: 1px solid var(--ui-line);
  bottom: 0.35rem;
  content: "";
  height: 3rem;
  left: 0.65rem;
  position: absolute;
  right: 0.65rem;
}

.alert-stack::after {
  bottom: 0.65rem;
  left: 0.35rem;
  right: 0.35rem;
}

.alert {
  background: white;
  border: 1px solid var(--ui-line);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 0.32rem 1fr auto;
  min-height: 5.4rem;
  padding: 0.8rem;
  position: relative;
  z-index: 1;
}

.alert-mark {
  background: var(--alarm);
  border-radius: 0.25rem;
}

.alert b {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
}

.alert small {
  color: var(--muted);
  display: block;
  font-size: 0.62rem;
  line-height: 1.35;
  margin-top: 0.3rem;
}

.alert-arrow {
  color: #999993;
  font-size: 0.8rem;
  padding-top: 0.15rem;
}

figcaption {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.45;
  margin: 0.8rem auto 0;
  max-width: var(--reading);
}

.article {
  margin: 0 auto;
  max-width: var(--reading);
  padding: clamp(5rem, 10vw, 8rem) 1.25rem 8rem;
}

.article > p {
  font-size: clamp(1.08rem, 1.6vw, 1.2rem);
  letter-spacing: -0.012em;
  line-height: 1.66;
}

.article > p {
  margin: 0 0 1.15em;
}

.article h2 {
  font-size: var(--type-section);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 3em 0 0.4em;
  text-wrap: balance;
}

.article h3 {
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 2.75em 0 0.8em;
}

.article .lead {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -0.025em;
  line-height: 1.45;
}

.facts {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 4rem 0 5rem;
}

.fact {
  padding: 1.3rem 0;
}

.fact:nth-child(odd) {
  border-right: 1px solid var(--line);
  padding-right: 1.3rem;
}

.fact:nth-child(even) {
  padding-left: 1.3rem;
}

.fact:nth-child(-n + 2) {
  border-bottom: 1px solid var(--line);
}

.fact strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -0.06em;
}

.fact span {
  color: var(--muted);
  font-size: 0.75rem;
}

blockquote {
  border-left: 0.28rem solid var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 2.25em 0;
  padding-left: 1.25rem;
}

.article blockquote p {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
}

blockquote cite {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0;
  margin-top: 1rem;
}

.article .wide-break {
  margin-left: calc((min(var(--wide), 100vw - 2.5rem) - 100%) / -2);
  margin-right: calc((min(var(--wide), 100vw - 2.5rem) - 100%) / -2);
  margin-top: clamp(3rem, 8vw, 6rem);
  margin-bottom: clamp(3rem, 8vw, 6rem);
}

.figure-stage {
  background: var(--figure);
  padding: clamp(1.5rem, 5vw, 4rem);
}

.figure-title {
  color: var(--muted);
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}

/* The in-context frame is 1440 wide and wants every
   pixel of the 68rem break, so the stage gives up most
   of its padding for this one figure. */
.figure-stage--app {
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
}

.app-asset {
  border-radius: 6px;
  overflow: hidden;
}

.app-asset > div > p {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0;
}

.three-cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, 1fr);
}

.concept-card {
  background: white;
  border: 1px solid #dcdcd7;
  min-height: 12rem;
  padding: clamp(1rem, 3vw, 1.75rem);
}

.concept-card strong {
  display: block;
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.07em;
}

.concept-card b {
  display: block;
  font-size: 0.9rem;
  margin-top: 1.8rem;
}

.concept-card span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0.3rem;
}

.alarm-interlude {
  background: var(--alarm);
  color: #2b1110;
  margin: 7rem calc(50% - 50vw);
  padding: clamp(5rem, 16vw, 11rem) 1.25rem;
  text-align: center;
  width: 100vw;
}

.alarm-interlude p {
  font-size: var(--type-feature);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.92;
  margin: 0 auto;
  max-width: 70rem;
  text-wrap: balance;
}

.alarm-interlude small {
  display: block;
  font-size: 0.78rem;
  margin-top: 2.5rem;
}

.swatches {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, 1fr);
}

.swatch {
  background: white;
  min-height: 15rem;
  padding: 1rem;
  position: relative;
}

.swatch::before {
  background: var(--tone);
  content: "";
  display: block;
  height: 5rem;
  margin-bottom: 1rem;
}

.swatch b,
.swatch span {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
}

.swatch span {
  color: var(--muted);
  margin-top: 0.35rem;
}

.swatch.cut {
  opacity: 0.42;
}

.swatch.cut::after {
  background: var(--ink);
  content: "";
  height: 1px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 2.9rem;
  transform: rotate(-18deg);
}

.tone-red {
  --tone: #ea5a58;
}

.tone-green {
  --tone: #168846;
}

.tone-purple {
  --tone: #6b41e3;
}

.tone-orange {
  --tone: #e49645;
}

.tone-grey {
  --tone: #999995;
}

.banner-concept {
  align-items: stretch;
  background: white;
  border: 1px solid #dcdcd7;
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  min-height: 13rem;
}

.banner-alert {
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.45rem 1fr;
  padding: clamp(1.25rem, 4vw, 2.4rem);
}

.banner-alert i {
  background: var(--alarm);
}

.banner-alert strong {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.banner-alert span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 0.75rem;
}

.banner-counts {
  border-left: 1px solid var(--ui-line);
  display: grid;
}

.banner-count {
  align-items: center;
  border-bottom: 1px solid var(--ui-line);
  display: flex;
  font-size: 0.72rem;
  justify-content: space-between;
  padding: 0 1.2rem;
}

.banner-count:last-child {
  border: 0;
}

.banner-count b {
  font-size: 1.1rem;
}

.placements {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.placement {
  background: white;
  padding: 1.25rem;
}

.page-map {
  border: 1px solid var(--ui-line);
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 1fr 0.55fr;
  grid-template-rows: 0.4fr 1fr 0.7fr;
  height: 10rem;
  padding: 0.55rem;
}

.page-map i {
  background: #e8e8e4;
}

.page-map i:first-child {
  grid-column: 1 / -1;
}

.page-map i.active {
  background: var(--alarm);
}

.placement b {
  display: block;
  font-size: 0.82rem;
  margin-top: 1rem;
}

.placement span {
  color: var(--muted);
  display: block;
  font-size: 0.7rem;
  line-height: 1.4;
  margin-top: 0.35rem;
}

.comparison {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
}

.comparison-item {
  background: white;
  padding: clamp(1rem, 4vw, 2.5rem);
}

.mini-health {
  margin: 0 auto;
  max-width: 16rem;
}

.mini-alert {
  background: white;
  border: 1px solid var(--ui-line);
  display: grid;
  font-size: 0.68rem;
  gap: 0.5rem;
  grid-template-columns: 0.22rem 1fr;
  min-height: 4.2rem;
  padding: 0.65rem;
}

.mini-alert i {
  background: var(--alarm);
}

.mini-counts {
  background: #ededeb;
  display: grid;
  font-size: 0.63rem;
  grid-template-columns: repeat(3, 1fr);
  margin-block: 0.5rem;
  padding: 0.7rem 0.3rem;
  text-align: center;
}

.comparison-item > b {
  display: block;
  font-size: 0.82rem;
  margin-top: 1.4rem;
}

.comparison-item > span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.4;
  margin-top: 0.3rem;
}

.decisions {
  list-style: none;
  margin: 2.5rem 0;
  padding: 0;
}

.decisions li {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  grid-template-columns: 2rem 1fr 1fr;
  padding: 1rem 0;
}

.decisions li:last-child {
  border-bottom: 1px solid var(--line);
}

.decisions span,
.decisions small {
  color: var(--muted);
  font-size: 0.74rem;
}

.decisions strong {
  font-size: 1rem;
}

.contact-sheet {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(6, 1fr);
}

.contact-frame {
  aspect-ratio: 1.22;
  background: white;
  border: 1px solid #deded9;
  display: grid;
  gap: 0.2rem;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.35rem;
}

.contact-frame i {
  background: #ededeb;
}

.contact-frame i:last-child {
  background: #e6a09e;
  grid-column: 1 / -1;
}

.contact-frame.turn {
  outline: 2px solid var(--alarm);
  outline-offset: 2px;
}

.all-clear .health-count b {
  color: var(--all-clear);
}

.all-clear {
  margin: 0 auto;
  max-width: 24rem;
}

.all-clear .health-count .zero {
  color: #777773;
}

.closing {
  border-top: 1px solid var(--line);
  margin-top: 7rem;
  padding-top: 2rem;
}

.closing p {
  color: var(--muted);
  font-size: 0.84rem;
}

.next {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 1.25rem 2rem;
  justify-content: space-between;
  margin: 5rem auto 0;
  max-width: var(--reading);
  padding: 0 1.25rem 4rem;
}

.page-footer {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 90rem;
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
}

.page-footer a {
  text-decoration: none;
}

.page-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

@media (max-width: 45rem) {
  .article-head {
    text-align: left;
  }

  .dek {
    margin-left: 0;
    text-wrap: pretty;
  }

  .byline {
    justify-content: flex-start;
  }

  .building-shell {
    grid-template-columns: 1fr;
  }

  .temperature {
    min-height: 11rem;
  }

  .three-cards,
  .placements {
    grid-template-columns: 1fr;
  }

  .swatches {
    grid-template-columns: repeat(2, 1fr);
  }

  .swatch {
    min-height: 11rem;
  }

  .banner-concept,
  .comparison {
    grid-template-columns: 1fr;
  }

  .real-comparison {
    grid-template-columns: 1fr;
  }

  .banner-counts {
    border-left: 0;
    border-top: 1px solid var(--ui-line);
    min-height: 9rem;
  }

  .contact-sheet {
    grid-template-columns: repeat(3, 1fr);
  }

  .decisions li {
    grid-template-columns: 1.5rem 1fr;
  }

  .decisions small {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .interactive-hero *,
  .interactive-hero *::before,
  .interactive-hero *::after {
    animation-delay: 0ms !important;
    animation-duration: 1ms !important;
    transition-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}