.ec-es {
  padding: clamp(72px, 8vw, 130px) clamp(22px, 5vw, 90px);
  background: #e9e4d5;
  color: #092943;
  scroll-margin-top: 90px;
}
.ec-es-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr);
  gap: clamp(25px, 6vw, 100px);
  align-items: end;
  margin-bottom: clamp(38px, 5vw, 74px);
}
.ec-es-link { display: inline-block; margin: 18px 0 0 22px; color: #082846; font-size: 16px; text-underline-offset: 5px; }
.ec-es-heading h2 {
  font-size: clamp(46px, 6.4vw, 104px);
  line-height: .94;
  letter-spacing: -.065em;
  margin: 20px 0 0;
}
.ec-es-heading h2 em { color: #a96704; }
.ec-es-heading p { margin: 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.58; max-width: 570px; }
.ec-es-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 42px); align-items: stretch; }
.ec-es-study { margin: 0; min-width: 0; }
.ec-es-poster {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(510px, 42vw, 730px);
  padding: clamp(26px, 3.1vw, 52px);
  box-shadow: 0 24px 55px rgba(8, 34, 55, .17);
}
.ec-es-brand {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font: 800 clamp(17px, 1.5vw, 24px)/.96 Arial, sans-serif;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.ec-es-brand small { font: 700 10px/1.3 Arial, sans-serif; letter-spacing: .22em; margin-top: 5px; }
.ec-es-marker { position: relative; z-index: 3; margin-left: auto; font: 700 11px/1.4 monospace; letter-spacing: .12em; text-align: right; }
.ec-es-content { position: relative; z-index: 3; margin-top: auto; }
.ec-es-content h3 { margin: 0; max-width: 10ch; font-size: clamp(55px, 6.7vw, 108px); line-height: .84; letter-spacing: -.085em; text-wrap: balance; }
.ec-es-content p { max-width: 36ch; margin: 26px 0 0; font-size: clamp(16px, 1.6vw, 24px); line-height: 1.34; }
.ec-es-bottom { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 22px; align-items: end; margin-top: 44px; padding-top: 15px; border-top: 1px solid currentColor; font: 700 11px/1.5 monospace; letter-spacing: .08em; text-transform: uppercase; }
.ec-es-bottom span:last-child { text-align: right; }
.ec-es-study figcaption { display: flex; justify-content: space-between; gap: 15px; padding: 16px 0 0; font: 12px/1.5 monospace; letter-spacing: .04em; }
.ec-es-study figcaption span:last-child { color: #4d5f68; text-align: right; }

.ec-es-sun { color: #082846; background: #f8efd7; }
.ec-es-sun::before { content: ""; position: absolute; z-index: 0; width: 80%; aspect-ratio: 1; top: 6%; right: -21%; border-radius: 50%; background: #f3be2c; }
.ec-es-sun .ec-es-content h3 { max-width: 9ch; }
.ec-es-sun .ec-es-content h3 em { display: block; color: #a46a0b; font: italic 400 .83em/.9 Georgia, serif; letter-spacing: -.075em; }
.ec-es-sun .ec-es-bottom { border-color: #83919a; }

.ec-es-night { color: #fffaf0; background: #082846; }
.ec-es-night::after { content: ""; position: absolute; z-index: 0; width: 55%; aspect-ratio: 1; right: -12%; top: 25%; border-radius: 50%; background: radial-gradient(circle at 32% 33%, #e6b532 0 2%, #a96b13 3% 26%, #5f471e 61%, transparent 63%); opacity: .68; }
.ec-es-night .ec-es-marker { color: #f5c544; }
.ec-es-night .ec-es-content h3 { max-width: none; text-transform: uppercase; font-size: clamp(38px, 4.4vw, 70px); letter-spacing: -.07em; }
.ec-es-night .ec-es-content h3 span { color: #f5c544; }
.ec-es-night .ec-es-content p { color: #f3ecd9; }
.ec-es-night .ec-es-bottom { border-color: #718a9d; }
.ec-es-note { max-width: 820px; margin: 28px 0 0; color: #4a5c63; font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .ec-es-heading { grid-template-columns: 1fr; }
  .ec-es-grid { grid-template-columns: 1fr; max-width: 710px; }
  .ec-es-poster { min-height: 620px; }
  .ec-es-content h3 { font-size: clamp(60px, 11vw, 98px); }
  .ec-es-night .ec-es-content h3 { font-size: clamp(38px, 7vw, 63px); }
}
@media (max-width: 560px) {
  .ec-es-link { display: block; margin: 18px 0 0; }
  .ec-es-poster { min-height: 570px; padding: 24px; }
  .ec-es-content h3 { font-size: clamp(52px, 12.4vw, 74px); }
  .ec-es-night .ec-es-content h3 { font-size: clamp(34px, 8vw, 45px); }
  .ec-es-content p { font-size: 17px; }
  .ec-es-bottom { font-size: 9px; gap: 8px; }
  .ec-es-study figcaption { flex-direction: column; gap: 4px; }
  .ec-es-study figcaption span:last-child { text-align: left; }
}