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

:root {
  --page-width: 94%;
  --max-width: 1450px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --hand: "Caveat", cursive;
  --sans: Arial, Helvetica, sans-serif;
  --text: #111;
}

* { box-sizing: border-box; }

html { background: #fff; }

body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: var(--serif);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.site-header {
  width: var(--page-width);
  max-width: var(--max-width);
  margin: 28px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.logo-link { width: 92px; flex: 0 0 auto; }
.logo-link img { width: 100%; height: auto; }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 26px;
  padding-top: 14px;
  font-family: var(--sans);
  font-size: 10px;
  text-transform: uppercase;
}

.main-nav a:hover { text-decoration: underline; }

main {
  width: var(--page-width);
  max-width: var(--max-width);
  margin: 42px auto 70px;
}

/* TITLE: Cormorant Regular, 56px visual size, 62px leading, -2px tracking. */
.page-heading {
  position: relative;
  margin-bottom: 62px; /* 3 cm visual gap to the first image line */
}

.page-heading h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: -2px;
}

/* The line starts clearly to the RIGHT of “Rooms”, never underneath the title. */
.heading-line {
  position: absolute;
  width: 132.25px;
  left: 365px;
  top: 13px;
}

/* FIRST IMAGE LINE: the left image keeps its proportions; the fireplace is made the same height. */
.intro-visual {
  display: grid;
  grid-template-columns: 2.15fr .85fr;
  gap: 15px;
  align-items: stretch;
}

.intro-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-visual .universe,
.intro-visual .fireplace-intro {
  aspect-ratio: auto;
}

.intro-visual .universe {
  aspect-ratio: 1.95 / 1;
}

.intro-visual .fireplace-intro {
  aspect-ratio: 1.95 / 1;
}

.intro-text {
  text-align: center;
  max-width: 940px;
  margin: 18px auto 30px;
  font-size: 13px;
  line-height: 18px;
}

.intro-text p { margin: 0; }

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 40px;
}

.image-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* THIRD LINE: the two requested images flank the central quote. */
.quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  align-items: center;
  margin-bottom: 40px;
}

.quote-row > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.quote {
  text-align: center;
  padding: 0 10px;
}

.quote p {
  margin: -10px 0 0;
  font-family: var(--hand);
  font-style: normal;
  font-size: 43px;
  line-height: 38px;
  letter-spacing: 0;
}

/* Spiral increased by 25% from the previous 80px size. */
.quote .laberynth {
  width: 120px;
  margin: 18px auto 0;
}

.closing-line {
  margin: 5px 0 0;
  text-align: center;
  font-family: var(--hand);
  font-style: normal;
  font-size: 43px;
  line-height: 38px;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  :root { --page-width: 91%; }
  .main-nav { gap: 15px; font-size: 9px; }
  .page-heading { margin-bottom: 48px; }
  .heading-line { width: 105px; left: 330px; }
  .intro-text { font-size: 12px; }
}

@media (max-width: 650px) {
  :root { --page-width: 88%; }
  .site-header { margin-top: 18px; }
  .logo-link { width: 75px; }
  .main-nav { gap: 8px 12px; padding-top: 0; font-size: 7px; }
  main { margin-top: 32px; }
  .page-heading { margin-bottom: 32px; }
  .page-heading h1 { font-size: 48px; line-height: 52px; }
  .heading-line { width: 95px; left: 270px; top: 5px; }
  .intro-visual { grid-template-columns: 1fr; gap: 12px; }
  .intro-visual img { aspect-ratio: 1.65 / 1 !important; }
  .intro-text { margin: 18px auto 25px; font-size: 11px; }
  .image-grid, .quote-row { grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
  .image-grid img, .quote-row > img { aspect-ratio: 1 / 1; }
  .quote-row .quote { grid-column: 1 / -1; grid-row: 2; padding: 10px 15%; }
  .quote-row > img:first-child { grid-column: 1; grid-row: 1; }
  .quote-row > img:last-child { grid-column: 2; grid-row: 1; }
  .quote p { font-size: 36px; line-height: 34px; }
  .quote .laberynth { width: 88px; }
  .third-row img:last-child { grid-column: 1 / -1; width: 50%; margin: auto; }
  .last-row { grid-template-columns: 1fr; }
  .last-row img { width: 70%; margin: auto; }
  .closing-line { font-size: 36px; line-height: 34px; margin-top: 8px; }
}


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


@media(max-width:650px){
  .site-header{width:88% !important;display:flex !important;align-items:flex-start !important;gap:16px !important;}
  .logo-link{width:72px !important;flex:0 0 72px !important;}
  .main-nav{flex:1 !important;justify-content:flex-end !important;flex-wrap:wrap !important;gap:9px 14px !important;padding-top:0 !important;}
  .main-nav a{font-size:8px !important;letter-spacing:0 !important;}
}


/* RESPONSIVE SAFEGUARDS — mobile only */
@media (max-width: 650px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .site-header { width:100%; max-width:100%; margin:0; padding:18px 6% 0; display:flex; align-items:flex-start; gap:14px; }
  .logo-link { width:68px; flex:0 0 68px; }
  .main-nav { min-width:0; flex:1 1 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 11px; padding:0; }
  .main-nav a { font-size:8px; line-height:1.2; white-space:normal; }
  main { width:88%; max-width:100%; margin:30px auto 45px; }
  .page-heading { margin-bottom:28px; }
  .page-heading h1 { max-width:100%; font-size:clamp(38px,11vw,48px); line-height:1.05; overflow-wrap:anywhere; }
  .heading-line { position:relative; inset:auto; display:block; width:95px; max-width:35%; height:auto; margin:10px 0 0 2px; }
  .intro-visual { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  .intro-visual img { width:100%; height:auto; max-width:100%; aspect-ratio:auto !important; object-fit:contain; }
  .intro-text { width:100%; max-width:100%; margin:22px auto 28px; font-size:15px; line-height:1.5; }
  .image-grid, .quote-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 24px; }
  .image-grid img, .quote-row > img { width:100%; height:auto; max-width:100%; aspect-ratio:auto; object-fit:contain; }
  .quote-row { align-items:center; }
  .quote-row .quote { grid-column:1 / -1; grid-row:2; min-width:0; padding:10px 6%; }
  .quote p { font-size:clamp(27px,8vw,36px); line-height:1; overflow-wrap:anywhere; }
  .quote .laberynth { width:75px; max-width:100%; }
  .third-row img:last-child { grid-column:1 / -1; width:52%; margin:0 auto; }
  .last-row { grid-template-columns:1fr; }
  .last-row img { width:70%; margin:0 auto; }
  .closing-line { font-size:clamp(28px,8vw,36px); line-height:1; overflow-wrap:anywhere; }
}

/* 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;}
}

/* V8 targeted refinements */

@media (max-width:650px){
  .page-heading{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:8px !important;}
  .page-heading h1{position:relative !important;margin-bottom:0 !important;z-index:1;}
  .heading-line{position:relative !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;display:block !important;width:min(110px,35vw) !important;max-width:100% !important;margin:8px 0 0 4px !important;transform:none !important;}
  .first-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .first-row img{width:100% !important;max-width:100% !important;height:auto !important;aspect-ratio:auto !important;object-fit:contain !important;}
  .last-row{grid-template-columns:minmax(0,1fr) !important;}
  .last-row img{display:block !important;width:100% !important;max-width:100% !important;height:auto !important;margin:0 !important;aspect-ratio:auto !important;object-fit:contain !important;}
  .third-row img:last-child{grid-column:auto !important;width:100% !important;margin:0 !important;}
}


/* Keep the desktop image order unchanged; use the extra tile only on mobile. */
.mobile-fill{display:none !important;}
@media (max-width:650px){
  .first-row .mobile-fill{display:block !important;}
  .last-row .desktop-last-image{display:none !important;}
}