@font-face {
  font-family: Geist;
  src: url(assets/Geist-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

h1, h2, h3, .sec-title { font-weight: 700 !important; }

.hero {
  display: grid !important;
  grid-template-columns: minmax(280px, 42%) 1fr !important;
  gap: 48px !important;
  align-items: center !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 72px 28px 84px !important;
  overflow: hidden !important;
}

.hero-torso {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(72vh, 640px) !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
  border: 1.5px solid var(--ink) !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.hero-torso img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(72vh, 640px) !important;
  object-fit: contain !important;
  object-position: center center !important;
}

[data-theme="dark"] .hero-torso { opacity: 1 !important; }
.hero-glow { display: none !important; opacity: 0 !important; }

.hero .hero-inner,
.hero-inner.wrap,
.hero .wrap {
  position: relative !important;
  z-index: 2 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 16px 28px !important;
    align-items: start !important;
  }
  .hero-torso {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 26vh !important;
    max-height: 26vh !important;
    justify-self: stretch;
    margin: 0 !important;
    align-self: start !important;
  }
  .hero-torso img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 50% !important;
  }
  .hero .hero-inner,
  .hero-inner.wrap,
  .hero .wrap {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0 !important;
  }
}

.pg.pg1 .grad, .pg1 .grad { background: url("hers/10-light-21.jpg") center/cover !important; }
.pg.pg2 .grad, .pg2 .grad { background: url("hers/20-street-21.jpg") center/cover !important; }
.pg.pg3 .grad, .pg3 .grad { background: url("hers/30-portrait-21.jpg") center/cover !important; }
.pg.pg4 .grad, .pg4 .grad { background: url("hers/80-land-21.jpg") center/cover !important; }

.pg .grad .cycle-layer {
  position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity 0.8s ease; pointer-events: none;
}
.pg .grad { touch-action: pan-y; }
.pg1 .grad .cycle-layer { background-position: 50% 40%; }
.pg2 .grad .cycle-layer { background-position: 50% 40%; }
.pg3 .grad .cycle-layer { background-position: 50% 40%; }
.pg4 .grad .cycle-layer { background-position: 50% 40%; }
.pg .grad .cycle-layer.on { opacity: 1; }
.pg .veil, .pg .frame, .pg .pgname { z-index: 2; }

.pg .grad .cycle-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
  pointer-events: auto;
}
.pg .grad .cycle-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(239, 237, 230, 0.35);
  cursor: pointer;
}
.pg .grad .cycle-dot.on {
  background: rgba(239, 237, 230, 0.92);
}