/* Homepage visual studies: a continuous composition, with complete image framing. */
.visual-stage {
  --vs-background: #0d1210;
  --vs-silver: #bfc5c2;
  --vs-white: #eae9e3;
  --vs-seam: 3px;
  position: relative;
  z-index: 3;
  isolation: isolate;
  color: var(--vs-silver);
  background: var(--vs-background);
  padding: 0 clamp(12px, 2.1vw, 42px);
  overflow: clip;
}
.vs-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  min-height: 58px;
  padding: 15px 1px 17px;
  border-top: 1px solid #bfc5c21c;
}
.vs-heading > div { display: flex; align-items: center; gap: 24px; }
.vs-section-number { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: #a2aaa6; }
.vs-heading h2 { font-size: 12px; font-weight: 400; letter-spacing: .12em; line-height: 1.6; }
.vs-heading h2 span { display: inline-block; margin-left: 16px; font-size: 10px; letter-spacing: .13em; color: #a1aaa5; }
.vs-heading > p { display: flex; flex-wrap: wrap; gap: 8px; color: #adb6b0; font-size: 11px; line-height: 1.6; letter-spacing: .02em; }
.vs-heading > p > span:last-child { color: #8c9790; }
.vs-archviz-row { display: grid; grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); gap: var(--vs-seam); align-items: start; }
.vs-editorial-row { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .87fr); gap: var(--vs-seam); align-items: start; margin-top: 6px; }
.vs-study {
  --vs-reveal: 1;
  --vs-mask-top: 0%;
  --vs-mask-bottom: 0%;
  --vs-mask-side: 0%;
  --vs-enter-y: 0px;
  --vs-parallax-y: 0px;
  --vs-pointer-x: 0px;
  --vs-pointer-y: 0px;
  min-width: 0;
  position: relative;
  margin: 0;
}
.vs-artwork {
  position: relative;
  transform: translate3d(var(--vs-pointer-x), calc(var(--vs-enter-y) + var(--vs-parallax-y) + var(--vs-pointer-y)), 0);
  clip-path: inset(var(--vs-mask-top) var(--vs-mask-side) var(--vs-mask-bottom));
}
.vs-image-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #080b09;
  color: var(--vs-white);
  cursor: zoom-in;
  text-align: left;
  aspect-ratio: var(--vs-image-ratio);
}
.vs-image-button:focus-visible { outline: 1px solid var(--vs-white); outline-offset: -4px; }
.vs-picture { display: block; width: 100%; }
.vs-image-button .vs-image { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: var(--vs-image-ratio); object-fit: contain; transition: filter .55s ease; }
.vs-arch-head {
  position: absolute;
  top: clamp(16px, 2vw, 34px);
  left: clamp(16px, 2vw, 34px);
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: #e3e5df;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-shadow: 0 1px 8px #000c;
  pointer-events: none;
}
.vs-arch-head > span:first-child { font-variant-numeric: tabular-nums; }
.vs-arch-statement {
  position: absolute;
  left: clamp(16px, 2vw, 34px);
  bottom: clamp(18px, 2.2vw, 40px);
  max-width: calc(100% - 32px);
  display: grid;
  gap: 3px;
  color: #eae9e3;
  font-size: clamp(13px, 1.08vw, 18px);
  line-height: 1.7;
  letter-spacing: .035em;
  text-shadow: 0 1px 8px #000d, 0 2px 20px #000a;
  pointer-events: none;
}
.vs-view-label {
  display: flex;
  gap: 12px;
  align-items: center;
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 10px 11px 10px 13px;
  background: #0d1210d9;
  color: var(--vs-white);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .24s, transform .3s;
  pointer-events: none;
}
.vs-view-label i { font-size: 16px; font-style: normal; line-height: .8; }
.vs-image-button:hover .vs-image { filter: brightness(1.035); }
.vs-image-button:hover .vs-view-label, .vs-image-button:focus-visible .vs-view-label { opacity: 1; transform: none; }
.vs-study--graphic .vs-view-label { display: none; }
.vs-caption {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 72px;
  padding: 20px 16px 16px 0;
  transform: translateY(calc((1 - var(--vs-reveal)) * 16px));
  opacity: calc(.3 + var(--vs-reveal) * .7);
}
.vs-number { font-size: 11px; line-height: 1.55; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #a5aea8; }
.vs-caption-copy h3 { margin: 0; color: #c8ceca; font-size: clamp(12px, .92vw, 14px); line-height: 1.7; letter-spacing: .045em; font-weight: 400; overflow-wrap: anywhere; }
.vs-caption-copy p { margin: 7px 0 0; color: #a1aba4; font-size: 12px; line-height: 1.7; letter-spacing: .035em; }
.vs-caption-copy .vs-caption-english { font-size: 10px; line-height: 1.65; letter-spacing: .055em; color: #939e97; }
.vs-category-link { display: flex; align-items: center; gap: 13px; font-size: 11px; letter-spacing: .04em; line-height: 1.7; padding: 1px 0 8px; color: #a8b2ab; white-space: normal; }
.vs-category-link span { display: block; font-size: 13px; line-height: 1; transition: transform .3s; }
.vs-category-link:hover { color: var(--vs-white); }
.vs-category-link:hover span { transform: translate(2px, -2px); }
.vs-study--archviz .vs-caption { grid-template-columns: minmax(0, 1fr) auto; gap: 15px; min-height: 58px; padding: 15px 12px 15px 0; align-items: baseline; }
.vs-study--archviz .vs-category-link { grid-column: auto; padding: 0; }
.vs-editorial-row .vs-caption { grid-template-columns: 23px minmax(0, 1fr); gap: 8px; min-height: 90px; padding-right: 14px; }
.vs-editorial-row .vs-category-link { grid-column: 2; width: fit-content; padding-top: 2px; }
.vs-editorial-row .vs-caption-copy h3 { font-size: 13px; letter-spacing: .025em; }
.vs-footnote { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 20px; padding: 30px 1px 38px; border-top: 1px solid #bfc5c21c; }
.vs-footnote p { color: #a3aea6; font-size: 11px; letter-spacing: .08em; line-height: 1.8; }
.vs-archive-link { display: flex; align-items: center; gap: 38px; color: #c1c8c3; font-size: 11px; letter-spacing: .065em; padding: 8px 0; }
.vs-archive-link span { font-size: 18px; transition: transform .3s; }
.vs-archive-link:hover span { transform: translate(3px, -3px); }
.vs-image-error { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 22px; font-size: 12px; line-height: 1.9; color: var(--vs-silver); background: #151b17; }
.vs-image-error small { font-size: 11px; }
.visual-stage[data-motion="running"][data-render-state="settling"] .vs-in-view .vs-artwork { will-change: transform, clip-path; }
.visual-stage[data-motion="paused"] .vs-artwork, .visual-stage[data-motion="reduced"] .vs-artwork, .visual-stage[data-motion="static"] .vs-artwork { transform: none; clip-path: none; }
.visual-stage[data-motion="paused"] .vs-caption, .visual-stage[data-motion="reduced"] .vs-caption, .visual-stage[data-motion="static"] .vs-caption { transform: none; opacity: 1; }
.visual-stage[data-motion="paused"] *, .visual-stage[data-motion="reduced"] * { transition: none !important; }

@media (min-width: 1800px) {
  .vs-heading { min-height: 68px; }
  .vs-caption { padding-top: 24px; min-height: 88px; }
  .vs-caption-copy h3, .vs-editorial-row .vs-caption-copy h3 { font-size: 14px; }
  .vs-caption-copy .vs-description { font-size: 13px; }
  .vs-category-link { font-size: 12px; }
}
@media (max-width: 1100px) {
  .vs-study--archviz .vs-caption { display: flex; flex-wrap: wrap; gap: 6px 20px; min-height: 76px; }
  .vs-study--archviz .vs-caption-copy { flex: 1 1 200px; }
  .vs-caption { min-height: 90px; }
  .vs-editorial-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px var(--vs-seam); }
  .vs-study--c1 { align-self: start; }
  .vs-study--c2 { width: 70%; justify-self: end; }
  .vs-editorial-row .vs-caption { min-height: 82px; }
}
@media (max-width: 680px) {
  .visual-stage { padding-inline: 12px; --vs-seam: 3px; }
  .vs-heading { display: block; padding: 22px 3px; min-height: 0; }
  .vs-heading > div { gap: 18px; }
  .vs-heading h2 { font-size: 12px; }
  .vs-heading h2 span { margin-left: 12px; font-size: 10px; letter-spacing: .06em; }
  .vs-section-number { font-size: 11px; }
  .vs-heading > p { margin-top: 12px; margin-left: 61px; font-size: 11px; gap: 5px; }
  .vs-archviz-row { display: block; }
  .vs-archviz-row .vs-study + .vs-study { margin-top: 24px; }
  .vs-study--archviz .vs-caption { display: flex; flex-wrap: wrap; gap: 6px 18px; min-height: 68px; padding: 14px 2px 0; }
  .vs-study--archviz .vs-caption-copy { flex: 1 1 210px; }
  .vs-study--archviz .vs-category-link { font-size: 11px; gap: 9px; min-height: 30px; }
  .vs-caption { padding: 16px 2px 0; gap: 9px; }
  .vs-caption-copy h3 { font-size: 13px; letter-spacing: .035em; }
  .vs-caption-copy p { font-size: 12px; letter-spacing: .02em; }
  .vs-caption-copy .vs-caption-english { font-size: 10px; }
  .vs-number { font-size: 11px; }
  .vs-arch-head { top: 14px; left: 14px; gap: 12px; font-size: 11px; }
  .vs-arch-statement { left: 14px; bottom: 16px; max-width: calc(100% - 28px); font-size: 13px; line-height: 1.65; gap: 1px; }
  .vs-editorial-row { grid-template-columns: minmax(0, 1fr); gap: 35px 0; margin-top: 35px; }
  .vs-study--g1 { grid-column: 1; width: 78%; justify-self: start; }
  .vs-study--g2 { grid-column: 1; width: 100%; margin-top: 0; }
  .vs-study--c1 { grid-column: 1 / -1; width: 100%; }
  .vs-study--c2 { grid-column: 1 / -1; width: 78%; justify-self: end; }
  .vs-editorial-row .vs-caption { grid-template-columns: 22px minmax(0, 1fr); padding: 14px 1px 0; min-height: 0; }
  .vs-editorial-row .vs-caption-copy h3 { font-size: 13px; line-height: 1.75; }
  .vs-editorial-row .vs-caption-copy p { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
  .vs-editorial-row .vs-caption-copy .vs-caption-english { font-size: 10px; }
  .vs-editorial-row .vs-category-link { font-size: 11px; gap: 9px; margin-top: 4px; min-height: 36px; }
  .vs-view-label { right: 10px; bottom: 10px; padding: 9px 10px; font-size: 11px; gap: 8px; }
  .vs-study--archviz .vs-view-label { top: 11px; bottom: auto; }
  .vs-footnote { display: block; margin-top: 34px; padding: 22px 3px 30px; }
  .vs-footnote p { font-size: 11px; }
  .vs-archive-link { width: 100%; justify-content: space-between; font-size: 11px; margin-top: 15px; padding-block: 12px; }
}
@media (max-width: 360px) {
  .vs-heading h2 span { display: block; margin-left: 0; font-size: 10px; letter-spacing: .05em; }
  .vs-study--archviz .vs-caption { min-height: 88px; }
  .vs-arch-head { gap: 9px; }
  .vs-study--archviz .vs-view-label > span { display: none; }
  .vs-editorial-row { gap-inline: 9px; }
}
@media (hover: none) {
  .vs-view-label { opacity: 1; transform: none; }
  .vs-study--graphic .vs-view-label { opacity: 0; }
  .vs-image-button:hover .vs-image { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visual-stage .vs-artwork { transform: none !important; clip-path: none !important; }
  .visual-stage .vs-caption { opacity: 1 !important; transform: none !important; }
  .visual-stage * { transition: none !important; }
}