/* A polished, fashion-editorial cover for the CHLOE Brazil home page. */
:root {
  --cover-paper: #f5f0e9;
  --cover-ink: #21181a;
  --cover-wine: #6e243b;
  --cover-champagne: #bda27a;
}

.site-header {
  position: absolute;
  padding: 22px clamp(22px, 5vw, 76px);
  color: var(--cover-ink);
  background: rgba(245, 240, 233, .96);
  border-bottom: 1px solid rgba(126, 97, 76, .16);
  backdrop-filter: blur(12px);
}
.site-header .wordmark,
.site-header nav a,
.site-header .nav-private { color: var(--cover-ink); text-shadow: none; }
.site-header .wordmark span { color: var(--cover-wine); }
.site-header .nav-private { border-color: var(--cover-champagne); background: transparent; }

#top .hero {
  display: grid;
  grid-template-columns: minmax(390px, .72fr) minmax(0, 1.28fr);
  align-items: stretch;
  min-height: max(760px, 100svh);
  padding-top: 68px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cover-paper);
  color: var(--cover-ink);
}
#top .hero:before { display: none; }
#top .hero-image {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 59%;
  height: 100%;
  object-position: center 34%;
  border: 0;
  border-left: 1px solid rgba(189, 162, 122, .55);
  border-radius: 0;
  box-shadow: none;
  filter: saturate(1.02) brightness(1.02) contrast(1.03);
}
#top .hero-shade {
  display: none;
}
#top .hero-copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 100%;
  min-height: 0;
  padding: 110px clamp(26px, 4.5vw, 68px) 78px clamp(28px, 7vw, 108px);
  color: var(--cover-ink);
}
#top .hero .kicker { color: #8b6b4c; letter-spacing: .24em; }
#top .hero h1 {
  margin: 25px 0 23px;
  color: var(--cover-ink);
  font-size: clamp(72px, 7.8vw, 116px);
  line-height: .79;
  letter-spacing: -.055em;
}
#top .hero h1 em { color: var(--cover-wine); }
#top .hero-note {
  max-width: 410px;
  color: #5e5551;
  font-size: 14px;
  line-height: 1.9;
}
#top .hero-links { align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
#top .hero-links a {
  padding: 13px 16px;
  border-color: var(--cover-wine);
  background: transparent;
  color: var(--cover-wine);
  font-size: 9px;
  letter-spacing: .15em;
}
#top .hero-links a:first-child { background: var(--cover-wine); color: #fffaf6; }
#top .hero-links a:hover { background: #8a3d51; border-color: #8a3d51; color: #fffaf6; }
#top .hero-seal { top: 15%; right: 5%; width: 82px; height: 82px; border-color: rgba(245, 236, 222, .82); background: rgba(36, 20, 24, .34); }
#top .hero-seal small { color: #fff7ed; }
#top .edition { right: 4.5%; bottom: 28px; color: #fff7ed; font-size: 9px; letter-spacing: .19em; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
#top .edition span { color: #f1dfc2; }

#top .selected-moments { background: #f8f4ef; }
#top .selected-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: clamp(230px, 25vw, 355px) clamp(300px, 34vw, 445px);
  gap: clamp(9px, 1.2vw, 15px);
}
#top .selected-grid .selected-dining { grid-column: 1 / 4; grid-row: 1; }
#top .selected-grid .selected-wine { grid-column: 1; grid-row: 2; }
#top .selected-grid .selected-gym { grid-column: 2; grid-row: 2; }
#top .selected-grid .selected-champagne { grid-column: 3; grid-row: 2; }
#top .selected-grid .selected-dining img { object-position: center 35%; }
#top .selected-grid figure { border-color: rgba(189, 162, 122, .42); }
#top .selected-grid img { filter: saturate(1.03) brightness(1.025) contrast(1.02); }

@media (max-width: 900px) {
  .site-header { position: fixed; color: var(--cover-ink); background: rgba(245, 240, 233, .97); }
  .site-header .menu { border-color: rgba(80, 36, 54, .4); background: transparent; color: var(--cover-ink); }
  .site-header nav { background: rgba(245, 240, 233, .99); }
  .site-header nav a { color: var(--cover-ink); }
  #top .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 64px;
    overflow: hidden;
  }
  #top .hero-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(68svh, 720px);
    min-height: 470px;
    object-position: center 32%;
    border: 0;
  }
  #top .hero-copy {
    width: 100%;
    min-height: 0;
    padding: 48px clamp(28px, 8vw, 72px) 62px;
    background: var(--cover-paper);
  }
  #top .hero h1 { font-size: clamp(66px, 10vw, 92px); }
  #top .hero-seal { top: 86px; right: 24px; }
  #top .edition { top: calc(64px + min(68svh, 720px) - 55px); right: 22px; bottom: auto; }
  #top .selected-grid { grid-template-rows: clamp(230px, 31vw, 310px) clamp(270px, 34vw, 350px); }
}

@media (max-width: 560px) {
  #top .hero-image { height: 62svh; min-height: 410px; object-position: center 31%; }
  #top .hero-copy { padding: 39px 23px 53px; }
  #top .hero h1 { margin: 17px 0; font-size: clamp(59px, 14vw, 74px); }
  #top .hero-note { max-width: 360px; font-size: 13px; }
  #top .hero-links { align-items: flex-start; flex-direction: column; }
  #top .hero-seal { top: 82px; right: 18px; width: 68px; height: 68px; }
  #top .hero-seal small { font-size: 6px; }
  #top .edition { top: calc(64px + 62svh - 46px); right: 17px; font-size: 8px; }
  #top .selected-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px; }
  #top .selected-grid .selected-dining { grid-column: 1; grid-row: auto; aspect-ratio: 1.4 / 1; }
  #top .selected-grid .selected-wine,
  #top .selected-grid .selected-gym,
  #top .selected-grid .selected-champagne { grid-column: 1; grid-row: auto; }
  #top .selected-grid .selected-dining img { height: 100%; object-fit: cover; object-position: center 36%; }
  #top .selected-grid .selected-wine img,
  #top .selected-grid .selected-gym img,
  #top .selected-grid .selected-champagne img { height: auto; object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  #top .selected-grid img { transition: none; }
}