/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  background-color: var(--color-background);
  font-family: var(--font-family-base);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-sm);
}

/* ─────────────────────────────────────────
   ATOMS
───────────────────────────────────────── */

.text-headline {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-headline);
  line-height: var(--line-height-headline);
  letter-spacing: var(--letter-spacing-headline);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text);
}

.text-body {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text);
}

.text-headline em,
.text-body em {
  font-style: italic;
}

.text-name {
    font-weight: var(--font-weight-light);
    font-size: clamp(0.65rem, 1.2vw, 0.75rem);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-text);
    opacity: 0.4;
  }
  
  .text-contact {
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    letter-spacing: var(--letter-spacing-body);
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 0.3em;
  }
  
  .contact-email {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-body);
    text-transform: uppercase;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0;
  }
  
  .contact-email-text {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transform: translateX(0);
    transition: transform 0.3s ease;
  }
  
  .contact-icon {
    width: 1em;
    height: 1em;
    opacity: 0;
    overflow: hidden;
    max-width: 0;
    transition: opacity 0.3s ease, max-width 0.3s ease;
    color: var(--color-text);
    flex-shrink: 0;
  }
  
  .contact-email:hover .contact-icon,
  .contact-email.copied .contact-icon {
    opacity: 1;
    max-width: 1.4em;
  }
  
  .contact-email.copied .contact-icon {
    color: var(--color-text);
  }

  .icon-check { display: none; }
  .contact-email.copied .icon-copy { display: none; }
  .contact-email.copied .icon-check { display: block; }

/* ─────────────────────────────────────────
   MOLECULES
───────────────────────────────────────── */

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.hero-copy .text-headline {
  max-width: var(--max-width-headline);
}

.hero-copy .text-body {
  max-width: var(--max-width-body);
}

/* ─────────────────────────────────────────
   ORGANISMS
───────────────────────────────────────── */

.hero {
  width: 100%;
  display: flex;
  justify-content: center;
}