/* ==========================================================
   Mayaalex Windows — base styles
   Layouts:
   1) phone (default)            — stacked: header + content
   2) tablet / portrait stage    — mirrors the portrait mockup
   3) desktop / landscape stage  — mirrors the landscape mockup
   Stage layouts use --u = one pixel of the 1536×1024 / 1024×1536
   mockup, so every element keeps the mockup's proportions.
   ========================================================== */

@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-display-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}

:root {
  --plum: #4e1234;
  --plum-dark: #3d0c28;
  --title: #561139;
  --value: #4a0f30;
  --text: #3a1a2c;
  --gold: #c48a2c;
  --gold-line: #d9a86a;
  --cream: #f8ece0;
  --wall: #f6e4cc;
  --serif-display: "DM Serif Display", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--wall);
  color: var(--text);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Menu buttons (shared look) ---------- */
.menu a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--serif);
  border: 1.5px solid var(--gold-line);
  border-radius: 999px;
  transition: background-color .2s;
}
.menu a:hover, .menu a:focus-visible { background-color: rgba(255, 236, 210, .08); }
.menu a.active {
  color: #2e0620;
  border-color: transparent;
  background: linear-gradient(180deg, #fff8ef 0%, #fbe9d2 55%, #f5d9b4 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 0 #fff;
}

/* ---------- Contact items (shared look) ---------- */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #781a52 0%, #5f133e 45%, #470e2e 100%);
  box-shadow: 0 2px 5px rgba(60, 10, 35, .25);
}
.icon svg {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: #e9b25a;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.label {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gold);
}
.value {
  display: block;
  font-family: var(--serif);
  color: var(--value);
  text-decoration: none;
}
a.value:hover { text-decoration: underline; }

h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  color: var(--title);
  letter-spacing: -.02em;
  margin: 0;
}
.lead { margin: 0; font-family: var(--sans); color: var(--text); }
.br-l, .br-p { display: none; }

/* ==========================================================
   1) PHONE (default)
   ========================================================== */
.stage { min-height: 100vh; display: flex; flex-direction: column; }

.sidebar {
  position: relative;
  background: #45112f;
  border-bottom: 3px solid #d29b4c;
  padding: 14px 16px 12px;
}
.logo { display: block; width: 170px; margin: 0 auto; }
.menu-toggle {
  position: absolute;
  right: 12px;
  top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: none;
  border: 1.5px solid var(--gold-line);
  border-radius: 12px;
  color: var(--cream);
  font: 600 11px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold-line);
  border-radius: 2px;
}
.menu-toggle-bars { position: relative; margin: 6px 0 8px; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -7px; }
.menu-toggle-bars::after { top: 7px; }

.menu { display: none; padding: 14px 4px 6px; }
.menu-open .menu { display: block; }
.menu ul { display: flex; flex-direction: column; gap: 8px; }
.menu a { min-height: 48px; padding: 8px 22px; font-size: 18px; line-height: 1.25; }

.content {
  flex: 1;
  padding: 30px 22px 48px;
  background:
    linear-gradient(90deg, rgba(250, 238, 222, .92) 0%, rgba(250, 238, 222, .82) 65%, rgba(250, 238, 222, .35) 100%),
    url("../images/bg-phone.webp") right top / cover no-repeat;
}
h1 { font-size: 52px; line-height: 1.05; }
h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, #c27a1a, #e2a640, #c88a2a);
}
.lead { margin-top: 18px; font-size: 16px; line-height: 1.5; }
.contacts { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.contacts li {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 16px;
  align-items: center;
}
.contacts .icon { grid-row: 1 / span 2; width: 64px; height: 64px; }
.label { font-size: 14px; align-self: end; }
.value { font-size: 19px; line-height: 1.3; align-self: start; margin-top: 2px; }

/* ==========================================================
   Shared rules for both stage layouts
   ========================================================== */
@media (min-width: 641px) and (min-height: 561px) and (min-aspect-ratio: 5/8) {
  .stage {
    display: block;
    position: relative;
    min-height: 0;
    overflow: hidden;
  }
  .sidebar { position: static; background: none; border: 0; padding: 0; }
  .logo { position: absolute; margin: 0; }
  .logo img { width: 100%; height: 100%; }
  .menu-toggle { display: none; }
  .menu { display: block; padding: 0; }
  .menu ul { position: absolute; }
  .menu a { width: 100%; }
  .content { position: absolute; top: 0; padding: 0; background: none; }
  h1::after { display: none; }
  h1, .lead, .content::before { position: absolute; left: 0; margin: 0; white-space: nowrap; }
  .content::before {
    content: "";
    background: linear-gradient(90deg, #c27a1a, #e2a640, #c88a2a);
  }
  .contacts { display: block; margin: 0; }
  .contacts li { position: absolute; left: 0; display: block; }
  .contacts .icon { position: absolute; }
  .label, .value { position: absolute; white-space: nowrap; margin: 0; }
}

/* ==========================================================
   2) TABLET / PORTRAIT STAGE  (mockup 1024 × 1536)
   ========================================================== */
@media (min-width: 641px) and (min-height: 561px) and (min-aspect-ratio: 5/8) and (max-aspect-ratio: 1/1) {
  .stage {
    --u: max(calc(100vw / 1024), calc(100vh / 1536));
    height: calc(1536 * var(--u));
    background: var(--wall) url("../images/bg-tablet.webp") 0 0 / calc(1024 * var(--u)) auto no-repeat;
  }
  .br-p { display: inline; }

  .logo { left: calc(26 * var(--u)); top: calc(130 * var(--u)); width: calc(346 * var(--u)); height: calc(266 * var(--u)); }
  .logo img { visibility: hidden; } /* the logo is already part of the background artwork */

  .menu ul { left: calc(37 * var(--u)); top: calc(462 * var(--u)); width: calc(342 * var(--u)); gap: calc(11 * var(--u)); }
  .menu a {
    min-height: calc(79 * var(--u));
    padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) calc(37 * var(--u));
    border-width: calc(1.8 * var(--u));
    font-size: calc(25.5 * var(--u));
    line-height: 1.35;
  }
  .menu a.active { width: calc(354 * var(--u)); min-height: calc(83 * var(--u)); }

  .content { left: calc(479 * var(--u)); width: calc(460 * var(--u)); }
  h1 { top: calc(302.9 * var(--u)); font-size: calc(88.7 * var(--u)); line-height: 1; }
  .content::before { top: calc(413 * var(--u)); width: calc(106 * var(--u)); height: calc(5.5 * var(--u)); }
  .lead { top: calc(445.7 * var(--u)); font-size: calc(22.8 * var(--u)); line-height: calc(34 * var(--u)); }

  .contacts li:nth-child(1) { top: calc(599 * var(--u)); }
  .contacts li:nth-child(2) { top: calc(748 * var(--u)); }
  .contacts li:nth-child(2) .icon { top: calc(-3 * var(--u)); }
  .contacts li:nth-child(3) { top: calc(892 * var(--u)); }
  .contacts .icon { left: calc(-6 * var(--u)); top: 0; width: calc(105 * var(--u)); height: calc(105 * var(--u)); }
  .label { left: calc(125 * var(--u)); top: calc(12.9 * var(--u)); font-size: calc(27.5 * var(--u)); line-height: 1; }
  .value { left: calc(125 * var(--u)); top: calc(48 * var(--u)); font-size: calc(26.6 * var(--u)); line-height: calc(38 * var(--u)); }
}
@media (min-width: 641px) and (min-height: 561px) and (min-aspect-ratio: 5/8) and (max-aspect-ratio: 1/1) and (max-width: 800px) {
  .stage { background-image: url("../images/bg-tablet-sm.webp"); }
}

/* ==========================================================
   3) DESKTOP / LANDSCAPE STAGE  (mockup 1536 × 1024)
   ========================================================== */
@media (min-width: 641px) and (min-height: 561px) and (min-aspect-ratio: 1/1) {
  .stage {
    --u: calc(100vh / 1024);
    height: 100vh;
    background: var(--wall) url("../images/bg-desktop.webp") 0 0 / auto 100% no-repeat;
  }
  .br-p { display: none; }
  .br-l { display: inline; }

  .logo { left: calc(48 * var(--u)); top: calc(86 * var(--u)); width: calc(346 * var(--u)); height: calc(266 * var(--u)); }
  .logo img { visibility: hidden; } /* the logo is already part of the background artwork */

  .menu ul { left: calc(51 * var(--u)); top: calc(375 * var(--u)); width: calc(333 * var(--u)); gap: calc(6.6 * var(--u)); }
  .menu a {
    min-height: calc(59.5 * var(--u));
    padding: calc(7 * var(--u)) calc(20 * var(--u)) calc(7 * var(--u)) calc(32 * var(--u));
    border-width: calc(1.6 * var(--u));
    font-size: calc(22.5 * var(--u));
    line-height: 1.32;
  }
  .menu a.active { width: calc(337 * var(--u)); min-height: calc(64 * var(--u)); margin-left: calc(-1 * var(--u)); }

  .content { left: calc(491 * var(--u)); width: calc(470 * var(--u)); }
  h1 { top: calc(188.1 * var(--u)); font-size: calc(99.2 * var(--u)); line-height: 1; }
  .content::before { top: calc(305 * var(--u)); width: calc(107 * var(--u)); height: calc(5 * var(--u)); }
  .lead { top: calc(333.7 * var(--u)); font-size: calc(21.3 * var(--u)); line-height: calc(29 * var(--u)); }

  .contacts li:nth-child(1) { top: calc(433 * var(--u)); }
  .contacts li:nth-child(2) { top: calc(561 * var(--u)); }
  .contacts li:nth-child(3) { top: calc(684 * var(--u)); }
  .contacts .icon { left: calc(-3 * var(--u)); top: calc(0 * var(--u)); width: calc(90 * var(--u)); height: calc(90 * var(--u)); }
  .contacts li:nth-child(2) .icon { top: calc(-3 * var(--u)); }
  .contacts li:nth-child(3) .icon { top: calc(2 * var(--u)); }
  .label { left: calc(116 * var(--u)); top: calc(10.5 * var(--u)); font-size: calc(23 * var(--u)); line-height: 1; }
  .value { left: calc(116 * var(--u)); top: calc(40.4 * var(--u)); font-size: calc(27.5 * var(--u)); line-height: calc(37 * var(--u)); }
}
@media (min-width: 641px) and (min-height: 561px) and (min-aspect-ratio: 1/1) and (max-height: 760px) {
  .stage { background-image: url("../images/bg-desktop-sm.webp"); }
}