@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0 auto;
  padding: 0;
  background: #fff;
}

body {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: #111;
}

/*
  Fixed editorial canvas.
  The positions below are deliberately explicit: this page is a collage,
  not a generic responsive image gallery.
*/
.page {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  height: 2520px;
  overflow: visible;
  
  transform: scale(1.25);
  transform-origin: top left;
}

/*
  Desktop scaling: the editorial collage keeps its original Illustrator
  coordinates inside a 1400px master canvas. The entire canvas scales as
  one unit to the available desktop viewport width, so the composition
  expands without changing any internal positions or proportions.
*/
.desktop-canvas {
  position: relative;
  width: 1400px;
  height: 2520px;
  margin: 0;
  transform-origin: top left;
  transform: scale(var(--desktop-scale, 1));
}

@media (min-width: 900px) {
  .page {
    width: 100vw;
  }
}

@media (max-width: 899px) {
  .page {
    width: 100vw;
    height: 2520px;
  }

  .desktop-canvas {
    transform: scale(1);
  }
}

.site-header {
  position: absolute;
  inset: 0;
  height: 98.504837px;
}

.logo-link {
  position: absolute;
  left: 59.102902px;
  top: 24.626209px;
  width: 75.109938px;
  display: block;
}

.logo-link img {
  display: block;
  width: 75.109938px;
  height: auto;
}

.main-nav {
  position: absolute;
  left: 344.766931px;
  top: 43.095866px;
  display: flex;
  align-items: center;
  gap: 29.551451px;
  white-space: nowrap;
}

.main-nav a {
  color: #111;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8.619173px;
  line-height: 1;
  font-weight: 400;
}

h1 {
  position: absolute;
  left: 65.259455px;
  top: 112.049252px;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 48.021108px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -1.477573px;
}

.star {
  position: absolute;
  left: 455.584872px;
  top: 109.586631px;
  width: 194.547054px;
  height: auto;
  display: block;
}

/* HERO */
.hero-main {
  position: absolute;
  left: 75.109938px;
  top: 197.009675px;
  width: 552.858399px;
  height: 539.313984px;
  object-fit: cover;
  display: block;
}

.side-image {
  position: absolute;
  left: 694.459103px;
  width: 278.276165px;
  height: 264.73175px;
  object-fit: cover;
  display: block;
}

.side-top {
  top: 203.166227px;
}

.side-bottom {
  top: 517.150396px;
}

/* INTRO */
.intro {
  position: absolute;
  left: 76.341249px;
  top: 753.562005px;
  width: 529.4635px;
  margin: 0;
  font-size: 12.313105px;
  line-height: 1.55;
  font-weight: 400;
}

/* CENTRAL COLLAGE */
.img-green {
  position: absolute;
  left: 60.334213px;
  top: 858.223395px;
  width: 277.044855px;
  height: 280.738786px;
  object-fit: cover;
  display: block;
}

.img-flower {
  position: absolute;
  left: 376.781003px;
  top: 858.223395px;
  width: 274.582234px;
  height: 279.507476px;
  object-fit: cover;
  display: block;
}

.img-manchas {
  position: absolute;
  left: 693.227792px;
  top: 858.223395px;
  width: 278.276165px;
  height: 575.021988px;
  object-fit: cover;
  display: block;
}

.img-blue {
  position: absolute;
  left: 60.334213px;
  top: 1162.35708px;
  width: 277.044855px;
  height: 279.507476px;
  object-fit: cover;
  display: block;
}

.img-room {
  position: absolute;
  left: 376.781003px;
  top: 1162.35708px;
  width: 274.582234px;
  height: 279.507476px;
  object-fit: cover;
  display: block;
}

/* LOWER COLLAGE */
.img-drawing {
  position: absolute;
  left: 60.334213px;
  top: 1461.565523px;
  width: 277.044855px;
  height: 279.507476px;
  object-fit: cover;
  display: block;
}

.img-sea {
  position: absolute;
  left: 391.556728px;
  top: 1461.565523px;
  width: 579.94723px;
  height: 565.171504px;
  object-fit: cover;
  display: block;
}

.house {
  position: absolute;
  left: 60.334213px;
  top: 1785.400176px;
  width: 277.044855px;
  height: auto;
  display: block;
}

.arrow-flower {
  position: absolute;
  left: 60.334213px;
  top: 1925px;
  width: 277.044855px;
  height: auto;
  display: block;
}

/* FINAL ROW */
.bottom-1,
.bottom-2,
.bottom-3 {
  position: absolute;
  top: 2068.601583px;
  height: 277.044855px;
  object-fit: cover;
  display: block;
}

.bottom-1 {
  left: 61.565523px;
  width: 277.044855px;
}

.bottom-2 {
  left: 373.087071px;
  width: 275.813544px;
}

.bottom-3 {
  left: 691.996482px;
  width: 277.044855px;
}




/* FINAL SITE-WIDE MENU — desktop normalization; no page-content changes. */
@media (min-width: 901px) {
  .site-header .main-nav { gap: 26px; }
  .site-header .main-nav a { font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 1; font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
}


/* RESPONSIVE MOBILE — rebuild the fixed collage as a natural single-column reading flow. */
@media (max-width: 899px){
  .page{width:100% !important;height:auto !important;margin:0 !important;padding:0 20px !important;transform:none !important;}
  .desktop-canvas{width:100% !important;height:auto !important;transform:none !important;position:relative !important;}
  .site-header{position:relative !important;inset:auto !important;height:auto !important;width:100% !important;display:flex !important;align-items:flex-start !important;gap:16px !important;padding:20px 0 !important;}
  .logo-link{position:relative !important;left:auto !important;top:auto !important;width:72px !important;flex:0 0 72px !important;}
  .logo-link img{width:72px !important;}
  .main-nav{position:relative !important;left:auto !important;top:auto !important;width:auto !important;display:flex !important;flex:1 !important;justify-content:flex-end !important;flex-wrap:wrap !important;gap:9px 14px !important;white-space:normal !important;}
  .main-nav a{font-size:8px !important;line-height:1.1 !important;}
  main{position:relative !important;width:100% !important;height:auto !important;min-height:0 !important;}
  main > *{position:relative !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;transform:none !important;}
  main h1{font-size:42px !important;line-height:1.05 !important;margin:25px 0 22px !important;letter-spacing:-1px !important;}
  .star{width:60px !important;height:auto !important;margin:0 0 18px auto !important;}
  .hero-main,.side-image,.img-green,.img-flower,.img-manchas,.img-blue,.img-room,.img-drawing,.img-sea,.house,.arrow-flower,.bottom-1,.bottom-2,.bottom-3{width:100% !important;height:auto !important;max-width:100% !important;object-fit:contain !important;margin:0 0 14px !important;display:block !important;}
  .hero-main{max-height:none !important;}
  .intro{font-size:15px !important;line-height:1.55 !important;margin:10px 0 28px !important;}
  .img-manchas,.img-sea{width:100% !important;}
  .house,.arrow-flower{width:55% !important;margin-left:auto !important;margin-right:auto !important;}
}


/* RESPONSIVE SAFEGUARDS — turn the desktop collage into a natural mobile flow */
@media (max-width: 899px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .page { width:100% !important; max-width:100%; height:auto !important; margin:0; padding:0 20px 40px !important; transform:none !important; overflow:visible; }
  .desktop-canvas { position:relative !important; width:100% !important; max-width:100%; height:auto !important; margin:0; transform:none !important; }
  .site-header { position:relative !important; inset:auto !important; width:100% !important; height:auto !important; display:flex; align-items:flex-start; gap:14px; padding:20px 0 !important; }
  .logo-link { position:relative !important; inset:auto !important; width:68px !important; flex:0 0 68px; }
  .logo-link img { width:100% !important; height:auto !important; }
  .main-nav { position:relative !important; inset:auto !important; width:auto !important; min-width:0; flex:1 1 auto; display:flex !important; flex-wrap:wrap !important; justify-content:flex-end; gap:8px 11px !important; white-space:normal !important; }
  .main-nav a { font-size:8px !important; line-height:1.2; white-space:normal; }
  main { position:relative !important; width:100% !important; max-width:100%; height:auto !important; min-height:0 !important; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  main > * { position:relative !important; inset:auto !important; float:none !important; transform:none !important; width:100% !important; max-width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; }
  main img { display:block; max-width:100% !important; height:auto !important; object-fit:contain !important; }
  .star { width:56px !important; align-self:flex-end; }
  .hero-main, .side-image, .img-green, .img-flower, .img-manchas, .img-blue, .img-room, .img-drawing, .img-sea, .bottom-1, .bottom-2, .bottom-3 { width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; }
  .intro { font-size:15px !important; line-height:1.55 !important; }
  .house, .arrow-flower { width:55% !important; max-width:240px !important; margin:0 auto !important; }
}

/* V8 targeted refinements */

@media (max-width:800px){
  .site-header{flex-wrap:wrap !important;align-items:center !important;gap:10px 12px !important;}
  .site-header nav,.site-header .main-nav{order:2;display:flex !important;flex:0 0 100% !important;width:100% !important;max-width:100% !important;min-width:0 !important;flex-wrap:nowrap !important;justify-content:flex-start !important;gap:0 13px !important;overflow-x:auto !important;overflow-y:hidden !important;white-space:nowrap !important;padding:5px 0 8px !important;scrollbar-width:none;}
  .site-header nav::-webkit-scrollbar,.site-header .main-nav::-webkit-scrollbar{display:none;}
  .site-header nav a,.site-header .main-nav a{flex:0 0 auto !important;white-space:nowrap !important;font-size:8px !important;line-height:1.2 !important;letter-spacing:0 !important;}
}