/* Editorial opening. These rules are scoped separately from the questionnaire. */
body[data-screen="cover"] {
  background: #fff;
  overflow-y: auto;
}

body[data-screen="cover"] .identity-scene { display: none; }

#cover {
  --cover-ink: #101d39;
  --cover-muted: #536176;
  --cover-rule: #d2d9e1;
  --cover-title: clamp(40px, 4.2vw, 68px);
  --cover-body: 18px;
  --cover-support: 14px;
  --cover-space-small: 12px;
  --cover-space-medium: 24px;
  --cover-space-large: 32px;
  --cover-gutter: clamp(28px, 4vw, 76px);
  position: relative;
  height: auto;
  min-height: 100svh;
  grid-template-rows: 56px 1fr 64px;
  color: var(--cover-ink);
  background: #fff;
}

#cover .cover-bar {
  height: auto;
  min-height: 0;
  padding: 0 var(--cover-gutter);
  background: #fff;
  border-bottom: 1px solid var(--cover-rule);
}

#cover .studio-logo { width: 128px; }
#cover .studio-logo img { filter: brightness(0); }

#cover .cover-main {
  display: grid;
  grid-template-columns: 47.5% 52.5%;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

#cover .cover-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--cover-space-large);
  min-width: 0;
  padding: 48px clamp(28px, 3vw, 56px) 48px var(--cover-gutter);
}

#cover .cover-message {
  display: flex;
  flex-direction: column;
  gap: var(--cover-space-medium);
}

#cover .display {
  margin: 0;
  padding: 0;
  min-height: 0;
  max-width: none;
  color: var(--cover-ink);
  font-size: var(--cover-title);
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}

#cover .display > span { display: block; white-space: normal; }

#cover .cover-description { display: grid; gap: var(--cover-space-small); }

#cover .cover-sub {
  max-width: 57ch;
  color: var(--cover-ink);
  font: 400 var(--cover-body)/28px var(--sans);
  letter-spacing: 0;
  text-wrap: pretty;
}

#cover .cover-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cover-space-small);
}

#cover .cover-cta .btn {
  width: 272px;
  min-width: 0;
  min-height: 56px;
  padding: 13px 24px;
  border: 1px solid var(--cover-ink);
  border-radius: 0;
  background: var(--cover-ink);
  color: #fff;
  font: 400 var(--cover-body)/28px var(--sans);
  box-shadow: 0 2px 4px #101d3910;
}

#cover .cover-aud {
  max-width: 62ch;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--cover-muted);
  font: 400 var(--cover-support)/20px var(--sans);
  text-wrap: pretty;
}

#cover .cover-photograph {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #303537;
}

#cover .cover-photograph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 55% center;
  /* Match the shared photographic blue treatment used through the questions. */
  filter: grayscale(1) contrast(.98) brightness(1.03) sepia(.12) hue-rotate(160deg) saturate(.35) var(--photo-gradient);
}

#cover .cover-foot {
  position: static;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px var(--cover-gutter);
  border-top: 1px solid var(--cover-rule);
  background: #fff;
  color: var(--cover-muted);
  font: 400 var(--cover-support)/20px var(--sans);
}

#cover .cover-legal { gap: var(--cover-space-medium); }

@media (hover: hover) and (pointer: fine) {
  #cover .cover-cta .btn:hover {
    background: #243852;
    border-color: #243852;
    box-shadow: 0 4px 10px #101d391c;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  #cover { --cover-gutter: 28px; --cover-title: clamp(36px, 4.2vw, 46px); }
  #cover .cover-main { grid-template-columns: 50% 50%; }
  #cover .cover-copy { padding: 40px 28px; }
}

@media (max-width: 760px) {
  #cover {
    --cover-gutter: 24px;
    --cover-title: clamp(38px, 7.4vw, 52px);
    min-height: 100svh;
    grid-template-rows: 56px 1fr 64px;
  }
  #cover .cover-main { display: flex; flex-direction: column; }
  #cover .cover-photograph { order: -1; width: 100%; aspect-ratio: 1672 / 941; }
  #cover .cover-photograph img { object-position: center; }
  #cover .cover-copy { padding: 32px var(--cover-gutter); }
  #cover .cover-cta .btn { width: 100%; min-height: 56px; }
}

@media (max-width: 360px) {
  #cover { --cover-gutter: 20px; --cover-title: clamp(32px, 9.44vw, 34px); }
}

@media print { #cover { display: none !important; } }