/* ─────────────────────────────────────────
   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: 0 var(--space-sm);
  overflow: hidden; 
}

main {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ─────────────────────────────────────────
   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;
  transition: transform 0.3s ease;
}

.contact-icon {
  width: 1.1em;
  height: 1.1em;
  opacity: 0;
  overflow: visible;
  max-width: 0;
  transition: opacity 0.3s ease, max-width 0.3s ease;
  color: var(--color-text);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.contact-email:hover .contact-icon,
.contact-email.copied .contact-icon {
  opacity: 1;
  max-width: 1.6em;
}

.icon-check {
  display: none;
}

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

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

/* ── Filter tokens ── */

.token {
  background: none;
  border: none;
  cursor: default;
  font-family: var(--font-family-base);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  color: inherit;
  padding: 0;
  text-decoration: none;
  pointer-events: none;
}

/* ── Circled words ── */

.circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  cursor: default;
}

.circled svg {
  position: absolute;
  inset: -0.45em -0.5em;
  width: calc(100% + 1em);
  height: calc(100% + 0.9em);
  pointer-events: none;
  overflow: visible;
}

/* ── Circled tooltip ── */

.circled-tooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
  width: 480px;
  font-family: 'Nothing You Could Do', cursive;
  font-size: clamp(1.1rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  text-align: center;
  color: rgba(0, 0, 0, 0.75);
  letter-spacing: -0.01em;
}

.circled-tooltip.visible {
  opacity: 1;
}

.circled-tooltip-text {
  font-family: 'Nothing You Could Do', cursive;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  line-height: 1.5;
  text-align: center;
  color: rgba(0, 0, 0, 0.75);
  letter-spacing: -0.01em;
}

.circled-tooltip-arrow {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.circled-tooltip-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.circled-arrow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}

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

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


.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;
  align-items: center;
  height: 100dvh;
  padding: var(--space-lg) var(--space-sm);
  overflow: hidden;
}
/* ─────────────────────────────────────────
   PROJECTS SECTION
───────────────────────────────────────── */

.projects-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-md) 0 var(--space-lg);
}

.section-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--space-sm);
  margin-bottom: var(--space-md);
  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);
}

/* ── Moodboard grid ── */

.moodboard {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0 var(--space-sm);
  align-items: stretch;
}

.card {
  --card-h: clamp(280px, 38vw, 480px);
  position: relative;
  height: var(--card-h);
  flex-shrink: 0;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
}

.card--l {
  flex-basis: clamp(320px, 55vw, 700px);
}

.card--s {
  flex-basis: clamp(180px, 28vw, 380px);
}

.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card:hover .card-bg {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.62) 100%
  );
  transition: opacity 0.4s ease;
}

.card:hover .card-overlay {
  opacity: 0.85;
}

.card-index {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  font-size: clamp(0.5rem, 0.9vw, 0.6rem);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.card-arrow {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 1.4em;
  height: 1.4em;
  color: rgba(255,255,255,0);
  transition: color 0.3s ease, transform 0.3s ease;
}

.card-arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.card:hover .card-arrow {
  color: rgba(255,255,255,0.9);
  transform: translate(2px, -2px);
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  transform: translateY(4px);
  transition: transform 0.4s ease;
}

.card:hover .card-content {
  transform: translateY(0);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.card-tag {
  font-size: clamp(0.48rem, 0.85vw, 0.58rem);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 1px;
  padding: 0.12em 0.45em;
}

.card-tag.discipline {
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.55);
}

.card-title {
  font-size: clamp(0.95rem, 1.8vw, 1.3rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-headline);
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
}

.card-desc {
  font-size: clamp(0.58rem, 0.95vw, 0.68rem);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-body);
  line-height: 1.55;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  max-width: 34ch;
}

.card.hidden {
  display: none;
}

.track-wrapper { display: none; }
.scroll-hint   { display: none; }