:root {
  --habitan-ink: #111111;
  --habitan-secondary: #707070;
  --habitan-paper: #ffffff;
  --habitan-width: min(66%, 940px);
  --habitan-gap: clamp(12px, 1.35vw, 18px);
  --habitan-column-gap: clamp(12px, 1.4vw, 20px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--habitan-paper);
  color: var(--habitan-ink);
}

body {
  min-width: 320px;
  font-family: "Heebo", Arial, sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

p,
figure {
  margin: 0;
}

.habitan-width {
  width: var(--habitan-width);
  margin-inline: auto;
}

.flow-labeled {
  position: relative;
}

.flow-label {
  position: absolute;
  top: 50%;
  right: calc(100% + clamp(18px, 2.1vw, 34px));
  width: clamp(92px, 9vw, 138px);
  margin: 0;
  color: var(--habitan-ink);
  font-size: clamp(9px, 0.66vw, 11px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: normal;
  opacity: 0;
  transform: translate(-10px, -50%);
  transition:
    opacity 520ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.flow-labeled.is-in-view .flow-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.habitan-opening__views {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(250px, 29vw, 440px);
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
  transform: translateX(2.1%);
}

.habitan-opening {
  min-height: calc(100svh - var(--site-header-height));
  overflow: hidden;
}

.habitan-intro {
  padding-top: 16px;
}

.habitan-title {
  width: auto;
  max-width: none;
  height: clamp(38px, 3.6vw, 52px);
  object-fit: contain;
  object-position: left center;
}

.habitan-information {
  margin-top: 24px;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 400;
  line-height: 1.45;
}

.habitan-information p + p {
  margin-top: 8px;
}

.habitan-description {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--habitan-column-gap);
  margin-top: var(--habitan-gap);
  color: var(--habitan-secondary);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 300;
  line-height: 1.55;
}

.habitan-row,
.habitan-single {
  margin-top: var(--habitan-gap);
}

.habitan-location__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--habitan-column-gap);
}

.habitan-location__grid img {
  width: 100%;
  aspect-ratio: 1.72 / 1;
  object-fit: cover;
  object-position: center;
}

.habitan-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--habitan-gap);
}

.habitan-section {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
}

.habitan-section__media {
  display: flex;
  width: 100%;
  aspect-ratio: 2 / 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--habitan-paper);
}

.habitan-section--combined .habitan-section__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 5175 / 1345;
}

.habitan-section--combined .habitan-section__media::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--habitan-column-gap);
  background: var(--habitan-paper);
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}

.habitan-section--combined .habitan-section__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 108.2%;
  object-fit: contain;
  transform: translateY(-7.6%);
}

.habitan-section--combined {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.habitan-section__media img {
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

.habitan-sections + .habitan-single {
  margin-top: var(--habitan-gap);
}

.habitan-single + .habitan-row--assembly {
  margin-top: var(--habitan-gap);
}

.habitan-row {
  display: grid;
  align-items: start;
  gap: var(--habitan-column-gap);
}

.habitan-row--process {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.habitan-row--process figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.habitan-row--process .habitan-media {
  height: 100%;
  justify-content: flex-start;
}

.habitan-row--process .habitan-media img {
  width: 108.94%;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translateX(-5.033%);
}

.habitan-row--plan {
  grid-template-columns: 1fr;
}

.habitan-media--floorplan {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  background: var(--habitan-paper);
  border: 1px solid rgba(112, 112, 112, 0.45);
}

.habitan-row--assembly {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-bottom: var(--habitan-gap);
}

.habitan-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: var(--habitan-gap);
}

.habitan-carousel,
.habitan-final__static {
  min-width: 0;
  aspect-ratio: 1732 / 908;
  overflow: hidden;
}

.habitan-carousel {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.habitan-final__static {
  aspect-ratio: 1230 / 1278;
}

.habitan-final__static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.habitan-carousel .carousel-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--habitan-paper);
}

.habitan-carousel .carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.habitan-carousel .carousel-slide.is-active {
  z-index: 1;
  opacity: 1;
}

.habitan-carousel .carousel-control {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #ffffff;
  font: 400 20px / 1 "Heebo", Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 180ms ease;
}

.habitan-carousel .previous {
  left: clamp(10px, 1.2vw, 18px);
}

.habitan-carousel .next {
  right: clamp(10px, 1.2vw, 18px);
}

.habitan-carousel .carousel-stage:hover .carousel-control,
.habitan-carousel .carousel-control:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.habitan-carousel .carousel-control:focus-visible {
  outline: 1px solid #ffffff;
  outline-offset: 2px;
}

.habitan-carousel .carousel-indicators {
  position: absolute;
  bottom: clamp(8px, 1vw, 14px);
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 7px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
}

.habitan-carousel .carousel-stage:hover .carousel-indicators,
.habitan-carousel:focus-within .carousel-indicators {
  opacity: 1;
  pointer-events: auto;
}

.habitan-carousel .carousel-indicator {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
}

.habitan-carousel .carousel-indicator.is-active {
  background: rgba(255, 255, 255, 0.92);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.habitan-assembly-stack {
  display: grid;
  gap: var(--habitan-column-gap);
}

.habitan-structural-figure {
  align-self: start;
}

.habitan-media--assembly,
.habitan-media--structural {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--habitan-paper);
}

.habitan-media--assembly {
  border: 1px solid var(--habitan-ink);
}

.habitan-media--assembly-01 {
  aspect-ratio: 4602 / 2410;
}

.habitan-media--assembly-02 {
  aspect-ratio: 4816 / 2768;
}

.habitan-media--assembly img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.habitan-media--structural img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  height: auto;
}

.habitan-media--structural {
  aspect-ratio: 3074 / 3081;
}

.habitan-media--structural img {
  width: 171.31%;
  transform: translate(-5.74%, -8.17%);
}

.habitan-row--assembly figcaption {
  white-space: nowrap;
}

.habitan-row--assembly figcaption strong {
  font-weight: 700;
}

.habitan-row figure,
.habitan-single {
  min-width: 0;
}

.habitan-media {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
}

.habitan-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.habitan-row--assembly .habitan-media--structural img {
  width: 171.31%;
  max-width: none;
  transform: translate(-5.74%, -8.17%);
}

.habitan-row--assembly .habitan-media--assembly-01 img {
  position: absolute;
  top: -9.68%;
  left: 1.05%;
  width: 106.7%;
  max-width: none;
  height: auto;
}

.habitan-row--assembly .habitan-media--assembly-02 img {
  position: absolute;
  top: 0.45%;
  left: 1.5%;
  width: 96%;
  max-width: none;
  height: auto;
}

/* Keep the pavilion documentation as one precise two-column composition. */
.habitan-section figcaption {
  display: none;
}

.habitan-row--assembly figcaption {
  display: block;
  flex: 0 0 auto;
  margin-top: clamp(6px, 0.55vw, 10px);
  font-size: clamp(10px, 0.78vw, 13px);
  font-weight: 300;
  line-height: 1.2;
}

.habitan-media--model-strip {
  position: relative;
  aspect-ratio: 4.65 / 1;
}

.habitan-media--model-strip::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent calc(25% - (var(--habitan-column-gap) / 2)), var(--habitan-paper) 0 calc(25% + (var(--habitan-column-gap) / 2)), transparent 0),
    linear-gradient(to right, transparent calc(50% - (var(--habitan-column-gap) / 2)), var(--habitan-paper) 0 calc(50% + (var(--habitan-column-gap) / 2)), transparent 0),
    linear-gradient(to right, transparent calc(75% - (var(--habitan-column-gap) / 2)), var(--habitan-paper) 0 calc(75% + (var(--habitan-column-gap) / 2)), transparent 0);
  content: "";
  pointer-events: none;
}

.habitan-media--model-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 61%;
}

.habitan-row--assembly {
  aspect-ratio: 1.86 / 1;
  align-items: stretch;
}

.habitan-assembly-stack {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 100%;
}

.habitan-row--assembly figure,
.habitan-row--assembly .habitan-media {
  min-height: 0;
  height: 100%;
}

.habitan-row--assembly figure {
  display: flex;
  flex-direction: column;
}

.habitan-row--assembly figure .habitan-media {
  flex: 1 1 auto;
  height: auto;
}

.habitan-row--assembly .habitan-media--assembly,
.habitan-row--assembly .habitan-media--structural {
  aspect-ratio: auto;
  border: 1px solid rgba(74, 74, 74, 0.14);
  background: transparent;
  box-shadow: 0 3px 12px rgba(35, 35, 35, 0.055);
}

.habitan-row--assembly .habitan-media--assembly img,
.habitan-row--assembly .habitan-media--structural img {
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.habitan-row--assembly .habitan-media--structural img {
  width: 126%;
  max-width: none;
  height: 126%;
  object-fit: contain;
  object-position: center;
  transform: translateX(9%);
}

.habitan-media--facades {
  display: grid;
  grid-template-columns: 1650fr 2647fr;
  grid-template-rows: 1150fr 1070fr;
  gap: 8px;
  aspect-ratio: 4297 / 2220;
  overflow: visible;
}

.habitan-facade-piece {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("/assets/habitan/facades.png");
  background-repeat: no-repeat;
}

.habitan-facade-piece--east {
  background-position: 5.4% top;
  background-size: 290.86% 218.2%;
}

.habitan-facade-piece--north {
  background-position: right top;
  background-size: 181.29% 218.2%;
}

.habitan-facade-piece--west {
  background-position: 8.1% bottom;
  background-size: 290.86% 234.51%;
}

.habitan-facade-piece--south {
  background-position: right bottom;
  background-size: 181.29% 234.51%;
}

figcaption {
  margin-top: 16px;
  color: var(--habitan-secondary);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 300;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 760px) {
  :root {
    --habitan-width: 86%;
    --habitan-gap: clamp(12px, 3vw, 18px);
  }

  .flow-labeled {
    padding-top: 24px;
  }

  .flow-label {
    top: 0;
    right: auto;
    left: 0;
    width: auto;
    font-size: 9px;
  }

  .flow-labeled.is-in-view .flow-label {
    transform: translate(0, 0);
  }

  .habitan-opening__views {
    width: 100%;
    max-width: 100%;
    height: clamp(210px, 52vw, 350px);
    margin-inline: auto;
  }

  .habitan-description,
  .habitan-row {
    grid-template-columns: 1fr;
    gap: var(--habitan-gap);
  }

  .habitan-final {
    grid-template-columns: 1fr;
    gap: var(--habitan-gap);
  }

  .habitan-carousel,
  .habitan-final__static {
    aspect-ratio: auto;
  }

  .habitan-carousel .carousel-stage {
    aspect-ratio: 1732 / 908;
  }

  .habitan-final__static img {
    height: auto;
  }

  .habitan-opening {
    min-height: calc(100svh - var(--site-header-height));
  }

  .habitan-title {
    width: auto;
    max-width: none;
    height: 38px;
  }
}

@media (hover: none) {
  .habitan-carousel .carousel-control,
  .habitan-carousel .carousel-indicators {
    opacity: 1;
    pointer-events: auto;
  }
}