:root {
  color-scheme: light;
  --graphite: #242424;
  --soft-white: #f7f6f2;
  --warm-gray: #d8d5cf;
  --secondary: #66635e;
  --photo-ground: #e8e4de;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--graphite);
  background: var(--soft-white);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body, p, h1, figure { margin: 0; }
.page {
  min-height: 100svh;
  max-width: 1920px;
  margin-inline: auto;
  padding: 32px 32px 0 64px;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 48px;
}
.header {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 24px;
  gap: 24px;
}
.logo { display: block; width: 148px; height: auto; }
.status { font-size: 12px; text-transform: uppercase; letter-spacing: .17em; padding-right: 12px; white-space: nowrap; }
.intro { grid-column: 1; grid-row: 2; display: flex; align-items: center; padding-block: 80px 92px; }
.intro-content { animation: arrive 850ms ease-out both; }
.eyebrow { font-size: 14px; letter-spacing: .025em; margin-bottom: 29px; }
h1 { font-size: clamp(64px, 6.65vw, 112px); font-weight: 400; letter-spacing: -.065em; line-height: 1.035; }
.description { color: var(--secondary); font-size: 17px; line-height: 1.7; margin-top: 34px; max-width: 380px; }
.waiting { display: flex; align-items: center; gap: 15px; margin-top: 49px; }
.waiting p { font-size: 13px; color: var(--secondary); }
.waiting-line { width: 34px; height: 1px; background: var(--graphite); flex: 0 0 auto; }
.campaign { grid-column: 2; grid-row: 1 / 3; position: relative; min-height: 650px; background: var(--photo-ground); overflow: hidden; }
.campaign-image { position: absolute; inset: 0; background-image: url('assets/sokitt-essenciais.jpeg'); background-size: auto 163%; background-position: 50% 65%; background-repeat: no-repeat; }
.campaign figcaption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; padding: 20px 25px; font-size: 12px; letter-spacing: .025em; background: var(--soft-white); }
.collection-note { color: var(--secondary); }
.footer { grid-column: 1 / -1; grid-row: 3; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 13px; }
.copyright { color: var(--secondary); font-size: 12px; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1600px) { .page { padding-left: 88px; column-gap: 80px; } }
@media (max-width: 1050px) {
  .page { padding: 24px 24px 0 36px; column-gap: 32px; }
  .logo { width: 126px; }
  .status { padding-right: 0; }
  h1 { font-size: clamp(58px, 7.2vw, 76px); }
  .intro { padding-block: 68px; }
  .description { font-size: 16px; max-width: 315px; }
  .desktop-break { display: none; }
  .campaign { min-height: 620px; }
  .campaign figcaption { padding-inline: 16px; }
  .collection-note { display: none; }
}
@media (max-width: 700px) {
  .page { padding: 0 24px; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .header { grid-column: 1; grid-row: 1; padding-block: 30px; }
  .logo { width: 122px; }
  .status { font-size: 12px; }
  .intro { grid-column: 1; grid-row: 2; padding: 40px 0 47px; }
  .eyebrow { font-size: 13px; margin-bottom: 24px; }
  h1 { font-size: clamp(58px, 13.5vw, 88px); }
  .description { margin-top: 25px; line-height: 1.7; max-width: 355px; }
  .waiting { margin-top: 28px; }
  .campaign { grid-column: 1; grid-row: 3; min-height: 0; height: clamp(320px, 105vw, 610px); margin-inline: -24px; }
  .campaign-image { background-size: auto 168%; background-position: 50% 66%; }
  .campaign figcaption { padding: 18px 24px; background: var(--soft-white); }
  .collection-note { display: block; }
  .footer { grid-column: 1; grid-row: 4; border-top: 1px solid var(--warm-gray); min-height: 83px; font-size: 12px; gap: 16px; }
  .copyright { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .intro-content { animation: none; } }