/* Homepage typography and retained comparison treatments. */
@font-face {
  font-family: 'Archivo Study';
  src: url('assets/Archivo-Semibold.woff') format('woff');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo Study Wide';
  src: url('assets/Archivo-Expanded-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html:is([data-home-study='a'], [data-home-study='a-large'], [data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero .eyebrow {
  font-size: .875rem;
  letter-spacing: .16em;
}

html:is([data-home-study='a'], [data-home-study='a-large']) body[data-page='/'] .hero[data-photo] .hero-title {
  font-family: 'Archivo Study', 'Instrument Sans', Arial, sans-serif;
  font-size: clamp(4rem, 7.4vw, 7rem);
  font-weight: 600;
  max-width: 9ch;
  letter-spacing: -.035em;
  line-height: .96;
  text-transform: uppercase;
  text-wrap: balance;
}

html[lang='es']:is([data-home-study='a'], [data-home-study='a-large']) body[data-page='/'] .hero[data-photo] .hero-title {
  font-size: clamp(3.3rem, 5.8vw, 5.8rem);
  max-width: 17ch;
  line-height: .99;
}

html:is([data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero[data-photo] .hero-title {
  font-family: 'Archivo Study Wide', 'Instrument Sans', Arial, sans-serif;
  font-size: clamp(2.6rem, 4.3vw, 4.8rem);
  font-weight: 400;
  max-width: 24ch;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}

html[lang='es']:is([data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero[data-photo] .hero-title {
  font-size: clamp(2.3rem, 3.8vw, 4rem);
  max-width: 24ch;
}

html:is([data-home-study='a'], [data-home-study='a-large'], [data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero-link {
  min-height: 3.25rem;
  margin-top: 1.75rem;
  padding: .875rem 1.5rem;
  gap: 1.25rem;
  border: 1px solid #ffffffcc;
  border-radius: 999px;
  background: #080a0c20;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

@media (hover: hover) {
  html:is([data-home-study='a'], [data-home-study='a-large'], [data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero-link:hover {
    border-color: #f6f8f9;
    background: #f6f8f9;
    color: #080a0c;
  }
}

@media (max-width: 700px) {
  html:is([data-home-study='a'], [data-home-study='a-large'], [data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero .eyebrow {
    font-size: .8125rem;
    margin-bottom: 1.25rem;
  }

  html:is([data-home-study='a'], [data-home-study='a-large']) body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(3.3rem, 13.3vw, 5.2rem);
    max-width: 9ch;
    line-height: .98;
  }

  html[lang='es']:is([data-home-study='a'], [data-home-study='a-large']) body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(2.25rem, 9.7vw, 3.8rem);
    max-width: 12ch;
    line-height: 1.01;
  }

  html:is([data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(1.7rem, 6.8vw, 2.9rem);
    max-width: 24ch;
    line-height: 1.15;
  }

  html[lang='es']:is([data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(1.65rem, 6.4vw, 2.6rem);
    max-width: 21ch;
    line-height: 1.15;
  }

  html:is([data-home-study='a'], [data-home-study='a-large'], [data-home-study='b'], [data-home-study='b-large']) body[data-page='/'] .hero-link {
    gap: 1rem;
    padding-inline: 1.25rem;
  }
}

@media (min-width: 701px) and (max-height: 600px) {
  html:is([data-home-study='a'], [data-home-study='a-large']) body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(3.4rem, 6.8vw, 5rem);
  }

  html[lang='es']:is([data-home-study='a'], [data-home-study='a-large']) body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(2.8rem, 5.5vw, 4rem);
  }
}

/* A+ changes headline size only: +15% desktop and +8% mobile.
   Both A sizes retain the same font, weight, tracking, line-height and measure. */
html[data-home-study='a-large'] body[data-page='/'] .hero[data-photo] .hero-title {
  font-size: clamp(4.6rem, 8.51vw, 8.05rem);
}

html[lang='es'][data-home-study='a-large'] body[data-page='/'] .hero[data-photo] .hero-title {
  font-size: clamp(3.795rem, 6.67vw, 6.67rem);
}

@media (max-width: 700px) {
  html[data-home-study='a-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(3.564rem, 14.364vw, 5.616rem);
  }

  html[lang='es'][data-home-study='a-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(2.43rem, 10.476vw, 4.104rem);
  }
}

@media (min-width: 701px) and (max-height: 600px) {
  html[data-home-study='a-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(3.91rem, 7.82vw, 5.75rem);
  }

  html[lang='es'][data-home-study='a-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(3.22rem, 6.325vw, 4.6rem);
  }
}

/* B+ keeps B's expanded regular face at approximately A's headline scale.
   A lower Spanish desktop minimum allows room for its longer wording. */
html[data-home-study='b-large'] body[data-page='/'] .hero[data-photo] .hero-title {
  font-size: clamp(4rem, 7.4vw, 7rem);
  max-width: min(24ch, 100%);
}

html[lang='es'][data-home-study='b-large'] body[data-page='/'] .hero[data-photo] .hero-title {
  font-size: clamp(2.8rem, 5.8vw, 5.8rem);
  max-width: min(24ch, 100%);
}

@media (max-width: 700px) {
  html[data-home-study='b-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(3.3rem, 13.3vw, 5.2rem);
  }

  html[lang='es'][data-home-study='b-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(2.25rem, 9.7vw, 3.8rem);
    max-width: min(21ch, 100%);
  }
}

@media (min-width: 701px) and (max-height: 600px) {
  html[data-home-study='b-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(3.4rem, 6.8vw, 5rem);
  }

  html[lang='es'][data-home-study='b-large'] body[data-page='/'] .hero[data-photo] .hero-title {
    font-size: clamp(2.8rem, 5.5vw, 4rem);
  }
}

/* Review controls appear only when a study is explicitly opened. */
.design-review {
  position: fixed;
  bottom: 1.5rem;
  left: clamp(1.25rem, 4.2vw, 5rem);
  z-index: 20;
  color: #fff;
  font-size: .875rem;
  line-height: 1.4;
}

.design-review details { position: relative; }
.design-review summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1rem;
  border: 1px solid #ffffff60;
  border-radius: 999px;
  background: #111820;
  cursor: pointer;
  list-style: none;
}

.design-review summary::-webkit-details-marker { display: none; }
.design-review details[open] > summary { background: #253440; }
.design-review-options {
  position: absolute;
  left: 0;
  bottom: calc(100% + .75rem);
  width: min(17rem, calc(100vw - 2.5rem));
  padding: .625rem;
  border: 1px solid #ffffff40;
  border-radius: .875rem;
  background: #111820;
  box-shadow: 0 .75rem 3rem #0006;
}

.design-review-options nav { display: grid; gap: .25rem; }
.design-review-options a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .75rem;
  border-radius: .375rem;
}

.design-review-options a[aria-current='true'] {
  background: #f6f8f9;
  color: #111820;
  font-weight: 600;
}

.design-review-options a:hover { text-decoration: underline; }
.design-review-exit {
  margin-top: .625rem;
  border-top: 1px solid #ffffff30;
  color: #d3dfe6;
  border-radius: 0 !important;
}

@media print { .design-review { display: none; } }