.furniture-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xxlarge);
  max-width: none;
  padding-top: var(--padding-page-top);
  padding-bottom: var(--spacing-xxxlarge);
  text-align: center;
}

.collection-tiles {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-self: stretch;
  border-block: var(--stroke-small) solid var(--border-secondary);
  text-align: start;
}

.furniture-grid,
.furniture-about {
  transition: opacity var(--duration-hover) var(--ease-reveal);
}

:is(.furniture-grid, .furniture-about).is-fading {
  opacity: 0;
}

.collection-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacing-xsmall);
  min-height: calc(2 * var(--control-large));
  padding: var(--padding-large);
  border: 0;
  background: transparent;
  color: var(--content-secondary);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-reveal), color var(--duration-hover) var(--ease-reveal);
}

.collection-tile + .collection-tile {
  border-left: var(--stroke-small) solid var(--border-secondary);
}

.collection-tile:hover,
.collection-tile[aria-pressed="true"] {
  background: var(--background-elevated);
  color: var(--content-primary);
}

.collection-tile[aria-pressed="true"] {
  cursor: default;
}

.collection-tile-number {
  display: none;
  font: var(--text-caption-ac);
  letter-spacing: var(--text-caption-ac-tracking);
  text-transform: uppercase;
  color: var(--content-tertiary);
}

.collection-tile-name {
  font: var(--text-headline);
  letter-spacing: var(--text-headline-tracking);
}

.furniture-about {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  max-width: 60ch;
}

.furniture-about-text {
  font: var(--text-subheadline);
  letter-spacing: var(--text-subheadline-tracking);
  color: var(--content-secondary);
}

:root[data-furniture-intro="split"] .furniture-intro {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-xtreme1);
  text-align: start;
}

:root[data-furniture-intro="right"] .furniture-intro {
  align-items: flex-end;
  text-align: end;
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .furniture-about {
  max-width: 48ch;
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .collection-tiles {
  display: flex;
  align-self: auto;
  gap: var(--spacing-xlarge);
  border: 0;
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .collection-tile {
  min-height: 0;
  padding: 0 0 var(--spacing-small);
  color: var(--content-tertiary);
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .collection-tile + .collection-tile {
  border-left: 0;
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .collection-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--stroke-large);
  background: var(--border-strong);
  scale: 1 0;
  transform-origin: bottom;
  transition: scale var(--duration-hover) var(--ease-reveal);
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .collection-tile:is(:hover, [aria-pressed="true"]) {
  background: none;
  color: var(--content-primary);
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .collection-tile:is(:hover, [aria-pressed="true"])::after {
  scale: 1 1;
}

:root:is([data-furniture-intro="split"], [data-furniture-intro="right"]) .collection-tile-name {
  font: var(--text-title-3);
  letter-spacing: var(--text-title-3-tracking);
}

:root[data-furniture-intro="list"] .furniture-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--spacing-xxlarge);
  text-align: start;
}

:root[data-furniture-intro="list"] .collection-tiles {
  grid-auto-flow: row;
}

:root[data-furniture-intro="list"] .collection-tile {
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--spacing-medium);
  min-height: var(--control-large);
  padding: var(--padding-medium) var(--padding-large);
}

:root[data-furniture-intro="list"] .collection-tile + .collection-tile {
  border-left: 0;
  border-top: var(--stroke-small) solid var(--border-secondary);
}

:root[data-furniture-intro="list"] .collection-tile-number {
  display: inline;
}

:root[data-furniture-intro="list"] .furniture-about {
  padding-top: var(--padding-medium);
}

.furniture-list {
  max-width: none;
  padding-bottom: var(--padding-section);
}

:root {
  --tile-ratio: 4 / 5;
  --gap-base: var(--spacing-xxlarge);
}

:root[data-tile-ratio="1-1"] { --tile-ratio: 1 / 1; }
:root[data-tile-ratio="2-3"] { --tile-ratio: 2 / 3; }
:root[data-tile-ratio="3-2"] { --tile-ratio: 3 / 2; }
:root[data-gap="tight"] { --gap-base: var(--spacing-small); }
:root[data-gap="airy"] { --gap-base: var(--spacing-xtreme1); }

:root[data-captions="off"] :is(.drawing-row, .strip-caption),
.furniture-grid[data-dense][data-layout="drawing"] .drawing-row {
  display: none;
}

.furniture-grid {
  --gap: calc(var(--gap-base) * 2 / (var(--columns, 4) + 1));
  display: grid;
  grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
  gap: calc(var(--gap) * 1.5) var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: furniture-view-in var(--duration-fade) var(--ease-reveal);
}

.furniture-grid img {
  -webkit-user-drag: none;
}

.drawing-link {
  display: flex;
  flex-direction: column;
  gap: var(--padding-medium);
  height: 100%;
}

.drawing-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-xxsmall) var(--spacing-xsmall);
  color: var(--content-tertiary);
}

.drawing-name {
  overflow: hidden;
  font: var(--text-caption-1-medium);
  letter-spacing: var(--text-caption-1-medium-tracking);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--content-primary);
}

.drawing-frame {
  display: block;
  aspect-ratio: var(--tile-ratio);
  overflow: hidden;
}

.drawing-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-reveal) var(--ease-glide);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .drawing-link:hover .drawing-frame img {
    scale: 1.03;
  }
}

.drawing-row {
  align-items: baseline;
  margin-top: auto;
}

.furniture-grid[data-layout="strip"] {
  display: flex;
  overflow-x: auto;
  margin-inline: calc(-1 * var(--padding-edge));
  padding: 0 var(--padding-edge) var(--spacing-small);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--padding-edge);
  scrollbar-width: thin;
}

.strip-item {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--spacing-xsmall);
  scroll-snap-align: start;
}

.strip-link {
  height: calc(var(--zoom) * 7svh);
  aspect-ratio: var(--tile-ratio);
  overflow: hidden;
  border-radius: var(--radius-xsmall);
}

.strip-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strip-caption,
.drawing-row {
  align-items: baseline;
}

.strip-caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxsmall) var(--spacing-small);
  color: var(--content-tertiary);
}

.strip-name {
  flex: 1;
  font: var(--text-footnote-medium);
  letter-spacing: var(--text-footnote-medium-tracking);
  color: var(--content-primary);
}

.furniture-grid[data-layout="scale"] {
  --cm: calc(var(--zoom) * var(--stroke-small) * 0.55);
  --mat-cell: calc(var(--cm) * 10);
  --mat-origin: var(--spacing-xxlarge);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(var(--cm) * 20);
  overflow: hidden;
  padding: var(--mat-origin);
  border-radius: var(--radius-small);
  background-color: var(--background-mat);
  background-image:
    linear-gradient(to top right, transparent calc(50% - var(--stroke-xsmall)), var(--border-mat-strong) 50%, transparent calc(50% + var(--stroke-xsmall))),
    linear-gradient(var(--border-mat-strong) var(--stroke-small), transparent var(--stroke-small)),
    linear-gradient(90deg, var(--border-mat-strong) var(--stroke-small), transparent var(--stroke-small)),
    linear-gradient(var(--border-mat) var(--stroke-xsmall), transparent var(--stroke-xsmall)),
    linear-gradient(90deg, var(--border-mat) var(--stroke-xsmall), transparent var(--stroke-xsmall));
  background-size:
    100% 100%,
    calc(var(--mat-cell) * 5) calc(var(--mat-cell) * 5),
    calc(var(--mat-cell) * 5) calc(var(--mat-cell) * 5),
    var(--mat-cell) var(--mat-cell),
    var(--mat-cell) var(--mat-cell);
  background-position: 0 0, var(--mat-origin) var(--mat-origin), var(--mat-origin) var(--mat-origin), var(--mat-origin) var(--mat-origin), var(--mat-origin) var(--mat-origin);
  color: var(--content-on-mat);
}

.furniture-grid[data-layout="scale"] .size-value {
  color: var(--content-on-mat);
}

.mat-ruler {
  position: absolute;
  pointer-events: none;
}

.mat-ruler span {
  position: absolute;
}

.mat-ruler-x {
  top: var(--spacing-small);
  left: var(--mat-origin);
}

.mat-ruler-x span {
  left: calc(var(--at) * var(--cm));
  translate: -50% 0;
}

.mat-ruler-y {
  top: var(--mat-origin);
  left: var(--spacing-xsmall);
}

.mat-ruler-y span {
  top: calc(var(--at) * var(--cm));
  translate: 0 -50%;
}

.scale-link {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
}

.scale-plan {
  position: relative;
  display: block;
  width: calc(var(--width) * var(--cm));
  height: calc(var(--depth) * var(--cm));
  border: var(--stroke-medium) solid var(--content-on-mat);
  background: var(--background-mat-plan);
  transition: background-color var(--duration-hover) var(--ease-reveal);
}

.scale-link:hover .scale-plan {
  background: var(--background-mat-plan-hover);
}

.scale-dim {
  position: absolute;
}

.scale-dim-width {
  top: calc(-1 * var(--spacing-small) - var(--spacing-xxsmall));
  left: 50%;
  translate: -50% 0;
}

.scale-dim-depth {
  top: 50%;
  right: calc(-1 * var(--spacing-xlarge));
  translate: 0 -50%;
}

.scale-name {
  font: var(--text-caption-1-medium);
  letter-spacing: var(--text-caption-1-medium-tracking);
}

@keyframes furniture-view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.is-previewing {
  overflow: hidden;
}

.preview {
  --preview-top: calc(var(--padding-edge) + var(--control-small) + var(--spacing-xlarge));
  --preview-bottom: calc(var(--padding-edge) + var(--control-small) + var(--spacing-xlarge));
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--preview-overhang) 0;
  border: 0;
  background: transparent;
  color: var(--content-primary);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.preview,
.preview::backdrop {
  --preview-overhang: 0px;
  position: absolute;
  inset: auto;
  top: calc(var(--preview-scroll, 0px) - var(--preview-overhang));
  left: 0;
  width: 100%;
  height: calc(100dvh + var(--preview-overhang) * 2);
}

@media (hover: none) and (pointer: coarse) {
  .preview,
  .preview::backdrop {
    --preview-overhang: 100lvh;
  }

  .preview::backdrop {
    will-change: opacity;
  }

  .preview-strip {
    will-change: translate, scale;
  }

  .preview .viewer-nav {
    display: none;
  }
}

.preview::backdrop {
  background: var(--background-primary);
  opacity: calc(1 - var(--pull, 0));
}

.preview:focus {
  outline: none;
}

.preview .viewer-close,
.preview .viewer-nav {
  position: fixed;
  z-index: 1;
}

.preview :is(.viewer-close, .viewer-nav, .preview-hint, .preview-info) {
  opacity: calc(1 - var(--pull, 0) * 2);
}

.preview::backdrop,
.preview :is(.viewer-close, .viewer-nav, .preview-hint, .preview-info) {
  transition: opacity var(--duration-slide) var(--ease-glide);
}

.preview.is-pulling::backdrop,
.preview.is-pulling :is(.viewer-close, .viewer-nav, .preview-hint, .preview-info, .preview-strip) {
  transition: none;
}

.preview-body {
  display: grid;
  align-items: center;
  max-width: calc(var(--content-max) + 2 * var(--padding-edge));
  min-height: 100%;
  margin: 0 auto;
  padding: var(--preview-top) var(--padding-edge) var(--preview-bottom);
}

.preview-strip {
  --slide-inset: var(--padding-edge);
  --shadow-room: var(--spacing-xlarge);
  display: flex;
  align-items: flex-start;
  margin: calc(-1 * var(--shadow-room)) calc(-1 * var(--slide-inset));
  transition:
    translate var(--duration-slide) var(--ease-glide),
    scale var(--duration-slide) var(--ease-glide);
}

.preview-strip.is-paging {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.preview-strip.is-paging::-webkit-scrollbar {
  display: none;
}

.preview-strip.is-paging.is-zoomed {
  overflow-x: hidden;
}

.preview-slide {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-xtreme1);
  padding: var(--shadow-room) var(--slide-inset);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.preview-strip:not(.is-paging) .preview-slide:not(.is-current) {
  display: none;
}

.preview-stage {
  --hint-room: calc(var(--spacing-small) + var(--control-medium) + 2 * var(--spacing-medium));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-medium);
  height: calc(100svh - var(--preview-top) - var(--preview-bottom));
  container-type: size;
}

.preview-box {
  display: grid;
  place-items: center;
}

.preview-frame {
  position: relative;
  width: min(100cqw, (100cqh - var(--hint-room)) * var(--ratio));
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: var(--radius-xsmall);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}

.preview-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke-small) solid var(--border-primary);
  border-radius: inherit;
  pointer-events: none;
}

.preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slide) var(--ease-glide);
  -webkit-user-drag: none;
}

.preview-frame.is-zoomed {
  touch-action: none;
  cursor: grab;
}

.preview-frame.is-dragging {
  cursor: grabbing;
}

.preview-frame.is-dragging img {
  transition: none;
}

.preview-thumbs {
  display: flex;
  gap: var(--spacing-xsmall);
}

.preview-thumb {
  width: var(--control-medium);
  height: var(--control-medium);
  padding: 0;
  overflow: hidden;
  border: var(--stroke-small) solid var(--border-primary);
  border-radius: var(--radius-xsmall);
  background: none;
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-reveal);
}

.preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-thumb[aria-pressed="true"] {
  border-color: var(--border-strong);
  outline: var(--stroke-small) solid var(--border-strong);
}

.preview-hint {
  text-align: center;
  font: var(--text-caption-1);
  letter-spacing: var(--text-caption-1-tracking);
  color: var(--content-tertiary);
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xlarge);
}

.preview-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);
}

.preview-title {
  font: var(--text-title-3);
  letter-spacing: var(--text-title-3-tracking);
  color: var(--content-primary);
}

.preview-facts {
  margin: 0;
}

.preview-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-medium);
  padding: var(--padding-medium) 0;
  border-top: var(--stroke-small) solid var(--border-primary);
  font: var(--text-footnote);
  letter-spacing: var(--text-footnote-tracking);
}

.preview-fact:last-child {
  border-bottom: var(--stroke-small) solid var(--border-primary);
}

.preview-fact dt {
  color: var(--content-tertiary);
}

.preview-fact dd {
  margin: 0;
  text-align: end;
  color: var(--content-primary);
  font-variant-numeric: tabular-nums;
}

.preview-note,
.preview-contact p {
  font: var(--text-footnote);
  letter-spacing: var(--text-footnote-tracking);
  color: var(--content-secondary);
}

.preview-contact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-small);
}

.preview-contact .button {
  --button-radius: var(--radius-xsmall);
}

::view-transition-group(piece) {
  animation-duration: var(--duration-slide);
  animation-timing-function: var(--ease-glide);
}

@media (max-width: 768px) {
  :root[data-furniture-intro="split"] .furniture-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xlarge);
  }

  :root[data-furniture-intro="list"] .furniture-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-body {
    align-items: start;
    min-height: 0;
  }

  .preview-slide {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-xxlarge);
  }

  .preview-stage {
    --hint-room: 0px;
    height: auto;
    container-type: normal;
  }

  .preview-box {
    align-self: stretch;
    height: min(65svh, (100vw - 2 * var(--padding-edge)) / var(--ratio));
    container-type: size;
  }
}

@media (max-width: 600px) {
  .furniture-grid {
    gap: var(--spacing-xxlarge) var(--spacing-small);
  }
}

@media (prefers-reduced-motion: reduce) {
  .furniture-grid {
    animation: none;
  }

  .preview-strip,
  .preview-frame img,
  .preview::backdrop,
  .preview :is(.viewer-close, .viewer-nav, .preview-hint, .preview-info) {
    transition: none;
  }
}