/* Dragonfruit Society — Sculptures
   Page-specific patterns: hero, page statement, prose, about/contact layouts. */

/* ---- Home hero ---- */
.hero {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: var(--sp-8) var(--sp-9);
  align-items: center;
}
@media (min-width: 820px) {
  .hero { grid-template-columns: 4fr 5fr; }
}
.hero__lede {
  font-size: var(--step-3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 42ch;
  margin: var(--sp-4) 0 var(--sp-5);
}
.hero__support {
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero__cta {
  display: inline-block;
  margin-top: var(--sp-4);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hero__cta span { display: inline-block; transition: transform 0.35s var(--ease); }
.hero__cta:hover { color: var(--accent); }
.hero__cta:hover span { transform: translateX(0.3em); }

.hero__feature .card__frame {
  background: var(--bg-sunk);
  overflow: hidden;
}
@media (min-width: 820px) {
  .hero__feature .card__frame {
    width: fit-content;
    margin-inline: auto;
  }
  .hero__feature .card__frame img { max-height: calc(100vh - 16rem); width: auto; }
}

/* ---- Index head ---- */
.index-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-top: 1px solid var(--line);
}
.index-head__count {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---- Page statement (About / Contact / 404) ---- */
.statement {
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: var(--sp-8);
}

/* ---- Prose (About bio) ---- */
.prose :global(h2),
.prose h2 {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  margin: var(--sp-7) 0 var(--sp-3);
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink); }

/* ---- About layout ---- */
.about {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: var(--sp-8) var(--sp-9);
}
@media (min-width: 900px) {
  .about { grid-template-columns: 1.4fr 0.8fr; }
}
.about__side { display: flex; flex-direction: column; gap: var(--sp-7); }
.about__side-block dt,
.about__side-block .eyebrow { margin-bottom: var(--sp-3); display: block; }
.about__side-list li { color: var(--ink-soft); line-height: 1.7; }
.about__side-list li strong { color: var(--ink); font-weight: 500; }

.about__block--projects {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.about__project-link span { display: inline-block; transition: transform 0.35s var(--ease); }
.about__project-link:hover span { transform: translateX(0.3em); }

/* ---- Contact layout ---- */
.contact { padding-block: var(--sp-8) var(--sp-9); }
.contact__email {
  display: inline-block;
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.contact__email span { display: inline-block; transition: transform 0.35s var(--ease); }
.contact__email:hover { color: var(--accent); }
.contact__email:hover span { transform: translateX(0.3em); }
.contact__note { color: var(--ink-faint); margin-bottom: var(--sp-8); }

.contact__socials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  max-width: 46rem;
}
@media (max-width: 620px) {
  .contact__socials { grid-template-columns: 1fr; }
}
.contact__social-label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--sp-1);
}
.contact__social-handle { color: var(--ink-soft); }

/* ---- 404 ---- */
.error-page { padding-block: var(--sp-10) var(--sp-9); }