.milan-villa {
  --surface: #f4eee4;
  --mv-warm: #b55a36;
  --mv-green: #6d725f;
  --mv-rose: #6a2831;
  --link: var(--color-ink-900);
  background: var(--surface);
}
.mv-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mv-hero { position: relative; display: grid; min-height: calc(100svh - 76px); overflow: hidden; background: #1c1510; }
.mv-hero > * { grid-area: 1 / 1; }
.mv-hero-media { margin: 0; min-height: 100%; }
.mv-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.mv-hero::after { content: ""; grid-area: 1 / 1; background: linear-gradient(90deg, rgba(24, 16, 10, 0.62), rgba(24, 16, 10, 0.16) 48%, rgba(24, 16, 10, 0.08)); pointer-events: none; }
.mv-hero-copy {
  z-index: 1;
  align-self: end;
  padding-bottom: var(--space-6);
  color: var(--color-ivory-50);
}
.mv-hero-copy h1,
.mv-hero-copy .lead,
.mv-hero-copy .kicker,
.mv-hero-copy .meta-row { color: inherit; }
.mv-hero-copy h1 { font-size: 6.2rem; }
.mv-hero-copy .lead { max-width: 760px; }
.mv-section { padding: var(--section-space) 0 0; }
.mv-intro { padding-bottom: var(--space-3); }
.mv-text { width: min(100%, 880px); display: grid; gap: var(--space-3); }
.mv-text .kicker { margin-bottom: 0; }
.mv-text h2,
.mv-section h2 { max-width: 16ch; font-size: 3.9rem; line-height: 1.04; }
.mv-text h2 { max-width: 22ch; line-height: 1.12; }
.mv-text .body-copy { max-width: 62ch; }
.mv-heading { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); gap: var(--space-5); align-items: end; margin-bottom: var(--space-5); }
.mv-heading .kicker { margin: 0; }
.mv-split,
.mv-interlude-grid,
.mv-development-grid,
.mv-closing-caption {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.mv-split--reverse > .stack { order: 2; }
.mv-figure { margin: 0; min-width: 0; }
.mv-figure img { width: 100%; height: auto; }
.mv-wide { width: min(100%, 850px); margin: 0 auto; }
.mv-section[aria-labelledby="ground-title"] .mv-wide { max-width: 640px; }
.mv-wide img { display: block; width: 100%; height: auto; }
.mv-diagram { align-self: center; background: var(--color-ivory-50); }
.mv-note {
  width: min(820px, 100%);
  margin: var(--space-6) auto 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mv-note h3 { margin-bottom: var(--space-3); font-size: 2.55rem; }
.mv-note .body-copy + .body-copy,
.mv-gallery-text .body-copy + .body-copy { margin-top: var(--space-2); }
.mv-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.mv-technical { position: relative; margin: 0; min-width: 0; }
.mv-technical-scroll { overflow-x: auto; overscroll-behavior-x: contain; background: var(--color-ivory-50); }
.mv-technical-link { display: block; cursor: zoom-in; }
.mv-technical img { display: block; width: 100%; min-width: 360px; height: auto; }
.mv-technical figcaption {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-2);
  color: var(--label);
  font-size: var(--fs-micro);
  line-height: 1.5;
}
.mv-technical figcaption > :first-child { color: var(--body); font-family: var(--font-display); font-size: 1.45rem; }
.mv-technical-expand {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--body);
  background: var(--surface);
}
.mv-technical-expand svg,
.mv-viewer-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mv-technical-tooltip {
  position: absolute;
  top: 60px;
  right: var(--space-2);
  z-index: 1;
  max-width: calc(100% - 32px);
  padding: var(--space-1) var(--space-2);
  background: var(--color-ink-900);
  color: var(--surface);
  font-size: var(--fs-micro);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-ui) ease;
  pointer-events: none;
}
.mv-technical-link:hover .mv-technical-tooltip,
.mv-technical-link:focus-visible .mv-technical-tooltip { opacity: 1; visibility: visible; }
.mv-gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: var(--grid-gap); align-items: start; }
.mv-gallery-large { grid-row: span 2; }
.mv-gallery--kitchen .mv-gallery-large { grid-row: auto; }
.mv-interlude-grid { grid-template-columns: minmax(0, 1fr); max-width: 800px; text-align: center; }
.mv-interlude-grid .body-copy { margin-inline: auto; }
.mv-gallery-text { padding: var(--space-4) 0; }
.mv-gallery--bedroom,
.mv-gallery--garden { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.mv-gallery--bedroom .mv-note { margin: 0; }
.mv-interlude {
  margin-top: var(--section-space);
  padding: var(--space-7) 0;
  background: #211611;
  color: var(--color-ivory-50);
}
.mv-interlude h2,
.mv-interlude .body-copy,
.mv-interlude .kicker { color: inherit; }
.mv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.mv-section[aria-labelledby="entrance-title"] .mv-split,
.mv-section[aria-labelledby="kids-title"] .mv-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.mv-section[aria-labelledby="entrance-title"] .stack,
.mv-section[aria-labelledby="kids-title"] .stack { order: 0; width: min(100%, 760px); margin-inline: auto; }
.mv-pair { width: min(100%, 960px); margin-inline: auto; }
.mv-development { padding-bottom: var(--section-space); }
.mv-development h2 { max-width: 12ch; }
.mv-closing { padding-bottom: var(--space-6); }
.mv-closing-image { width: min(100%, 736px); margin: 0 auto; padding-inline: var(--gutter); }
.mv-closing-image img { display: block; width: 100%; height: auto; }
.mv-closing-caption { align-items: center; padding-top: var(--space-5); }
.mv-closing-caption h2 { font-size: 3.5rem; }
.mv-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  color: var(--color-ink-900);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.mv-next span { color: var(--label); font-size: var(--fs-micro); }
.mv-next strong { display: flex; gap: var(--space-4); align-items: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; line-height: 1.15; }
.mv-next strong span { color: inherit; font-size: inherit; transition: transform var(--duration-ui) ease; }
.mv-next:hover strong span { transform: translateX(4px); }
.mv-drawing-open { overflow: hidden; }
.mv-drawing-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--body);
  overflow: hidden;
}
.mv-drawing-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.mv-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 80px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.mv-viewer-header p { margin: 0; min-width: 0; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.mv-viewer-controls { display: flex; gap: var(--space-1); flex: 0 0 auto; }
.mv-viewer-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--body);
}
.mv-viewer-button:hover,
.mv-viewer-button[aria-pressed="true"] { background: var(--color-ivory-100); }
.mv-viewer-button .mv-technical-tooltip { top: 48px; right: 0; max-width: none; white-space: nowrap; }
.mv-viewer-button:hover .mv-technical-tooltip,
.mv-viewer-button:focus-visible .mv-technical-tooltip { opacity: 1; visibility: visible; }
.mv-viewer-stage { display: grid; place-items: center; height: 100%; min-height: 0; padding: var(--space-4); overflow: auto; }
.mv-viewer-image { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 80px - var(--space-4) - var(--space-4)); object-fit: contain; }
.mv-drawing-viewer.is-actual-size .mv-viewer-stage { display: block; }
.mv-drawing-viewer.is-actual-size .mv-viewer-image { max-width: none; max-height: none; margin: 0 auto; }

@media (max-width: 1200px) {
  .mv-hero-copy h1 { font-size: 5rem; }
  .mv-section h2,
  .mv-text h2 { font-size: 3.3rem; }
  .mv-split,
  .mv-interlude-grid,
  .mv-development-grid,
  .mv-closing-caption { gap: var(--space-5); }
}
@media (max-width: 980px) {
  .mv-hero { min-height: 74svh; }
  .mv-hero-copy h1 { font-size: 4.2rem; }
  .mv-heading,
  .mv-split,
  .mv-interlude-grid,
  .mv-development-grid,
  .mv-closing-caption { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .mv-split--reverse > .stack { order: 0; }
  .mv-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .mv-technical { width: min(100%, 760px); margin: 0 auto; }
  .mv-gallery,
  .mv-gallery--bedroom,
  .mv-gallery--garden,
  .mv-pair { grid-template-columns: minmax(0, 1fr); }
  .mv-gallery-large { grid-row: auto; }
  .mv-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .mv-pair { grid-template-columns: minmax(0, 1fr); }
  .mv-hero { min-height: auto; display: block; background: var(--surface); }
  .mv-hero::after { display: none; }
  .mv-hero-media { height: 64svh; }
  .mv-hero-copy { padding-top: var(--space-4); padding-bottom: var(--space-5); color: var(--heading); }
  .mv-hero-copy h1 { font-size: 3.5rem; }
  .mv-hero-copy .lead,
  .mv-hero-copy .kicker,
  .mv-hero-copy .meta-row { color: var(--body); }
  .mv-section h2,
  .mv-text h2 { font-size: 2.65rem; }
  .mv-heading { margin-bottom: var(--space-4); }
  .mv-note { margin-top: var(--space-5); padding: var(--space-4) 0; }
  .mv-note h3 { font-size: 2.1rem; }
  .mv-interlude { padding: var(--space-6) 0; }
  .mv-closing-caption h2 { font-size: 2.65rem; }
  .mv-next { align-items: flex-start; width: 100%; }
  .mv-next strong { width: 100%; justify-content: space-between; font-size: 2rem; }
  .mv-viewer-header { padding-inline: var(--space-2); }
}
@media (max-width: 400px) {
  .mv-hero-copy h1 { font-size: 3rem; }
  .mv-section h2,
  .mv-text h2 { font-size: 2.4rem; }
}
