.home-page { min-height: 100svh; }

.hero {
  position: relative;
  min-height: 88svh;
  padding: 118px 0 84px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 38%, rgba(239, 218, 228, .88), transparent 25rem),
    linear-gradient(135deg, var(--paper) 0 58%, var(--paper-warm) 58% 100%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  width: min(var(--page), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
  align-items: center;
  gap: clamp(38px, 6vw, 82px);
}

.hero-copy { max-width: 650px; }
.hero h1 {
  margin: 0 0 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 5.6vw, 5.8rem);
  line-height: 1.01;
  letter-spacing: -.038em;
}
.hero h1 .red-word { color: var(--red); }
.hero-description {
  max-width: 590px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.72;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 25px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.hero-meta span { position: relative; }
.hero-meta span:not(:last-child)::after { content: "•"; position: absolute; right: -12px; color: var(--red); }

.hero-art { position: relative; min-height: clamp(390px, 50vw, 535px); }
.hero-art-frame {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  transform: none;
}
.hero-artwork {
  position: absolute;
  z-index: 2;
  width: min(520px, 41vw);
  max-width: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 28px 44px rgba(98,30,48,.11));
  animation: hero-float 6s var(--ease) infinite;
}
.hero-yarn-origin { position: absolute; right: 0; bottom: 2%; z-index: 4; width: 105px; transform: rotate(6deg); }
.hero-thread { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 1; width: 100%; height: 130px; pointer-events: none; }
.hero-thread path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1900; stroke-dashoffset: 1900; animation: draw-thread 1.9s .55s var(--ease-out) forwards; }

.home-disciplines,
.thread-story,
.home-process,
.home-notes,
.home-close { position: relative; }

.home-disciplines { padding: clamp(72px, 8vw, 108px) 0; background: var(--paper); }
.home-section-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, .62fr); column-gap: clamp(40px, 7vw, 92px); align-items: end; margin-bottom: 38px; }
.home-section-heading .section-label { grid-column: 1 / -1; }
.home-section-heading .section-title { max-width: 720px; }
.home-section-heading .body-large { margin: 0; max-width: 520px; }

.discipline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.discipline-card {
  min-height: 270px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--paper-warm);
}
.discipline-card:nth-child(2) { background: var(--pink-soft); }
.discipline-card span { color: var(--red); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.discipline-card h3 { margin: auto 0 10px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 2.3vw, 2.35rem); line-height: 1.08; letter-spacing: -.02em; }
.discipline-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.62; }

.thread-story { padding: clamp(76px, 9vw, 118px) 0; overflow: hidden; border-block: 1px solid var(--line); background: var(--blush); }
.thread-story-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(300px, .7fr); gap: clamp(48px, 9vw, 118px); align-items: center; }
.thread-story-copy { max-width: 660px; }
.thread-story-copy .section-title { margin-bottom: 25px; }
.thread-story-copy p { color: var(--muted); line-height: 1.75; }
.thread-story-copy .thread-story-lead { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.35; }
.thread-story-art { position: relative; min-height: 430px; display: grid; place-items: center; }
.thread-story-art img { width: min(330px, 78%); position: relative; z-index: 2; transform: rotate(-5deg); }
.thread-story-art p { position: absolute; right: 4%; bottom: 7%; z-index: 3; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,251,.78); color: var(--red); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.thread-loop { position: absolute; width: 390px; aspect-ratio: 1; border: 3px solid var(--red); border-radius: 50% 44% 56% 48%; opacity: .35; transform: rotate(21deg); }

.home-process { padding: clamp(76px, 8vw, 108px) 0; background: var(--paper-warm); }
.process-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.process-card { min-height: 260px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,253,251,.86); }
.process-card-number { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--red); font-size: .72rem; font-weight: 800; }
.process-card h3 { margin: auto 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1.09; letter-spacing: -.02em; }
.process-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

.home-notes { padding: clamp(72px, 8vw, 106px) 0; border-top: 1px solid var(--line); background: linear-gradient(135deg, var(--pink-soft), var(--paper) 70%); }
.notes-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .72fr); gap: clamp(44px, 8vw, 105px); }
.notes-heading { max-width: 650px; }
.notes-list { display: grid; border-top: 1px solid var(--line); }
.notes-list > div { padding: 21px 0; border-bottom: 1px solid var(--line); }
.notes-list strong { display: block; margin-bottom: 5px; color: var(--red); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.notes-list p { margin: 0; color: var(--muted); line-height: 1.6; }

.home-close { padding: clamp(64px, 7vw, 92px) 0; background: var(--paper); }
.home-close-inner { display: flex; align-items: end; justify-content: space-between; gap: 34px; }
.home-close h2 { max-width: 690px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.07; letter-spacing: -.028em; }

@media (max-width: 900px) {
  .hero { min-height: auto; padding: 116px 0 70px; }
  .hero-inner, .thread-story-grid, .notes-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 420px; }
  .hero-artwork { width: min(530px, 76vw); }
  .home-section-heading { grid-template-columns: 1fr; align-items: start; }
  .home-section-heading .body-large { margin-top: 18px; }
  .discipline-grid, .process-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discipline-card:last-child, .process-card:last-child { grid-column: 1 / -1; }
  .thread-story-art { min-height: 340px; }
}

@media (max-width: 620px) {
  .hero { padding: 104px 0 54px; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .hero-actions { align-items: stretch; }
  .hero-actions a { flex: 1 1 100%; }
  .hero-art { min-height: 330px; }
  .hero-artwork { width: min(470px, 92vw); }
  .hero-yarn-origin { width: 82px; }
  .discipline-grid, .process-cards { grid-template-columns: 1fr; }
  .discipline-card:last-child, .process-card:last-child { grid-column: auto; }
  .discipline-card, .process-card { min-height: 220px; }
  .thread-story-art { min-height: 280px; }
  .thread-loop { width: 290px; }
  .home-close-inner { align-items: stretch; flex-direction: column; }
}


/* --- Phone responsiveness pass --- */
@media (max-width: 620px) {
  .hero {
    padding-top: 94px;
    padding-bottom: 46px;
  }

  .hero-inner {
    gap: 26px;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 13.2vw, 4rem);
    line-height: 1.02;
  }

  .hero-description {
    line-height: 1.62;
  }

  .hero-meta {
    gap: 7px 16px;
  }

  .hero-art {
    min-height: 275px;
  }

  .hero-art-frame {
    inset: 0;
  }

  .hero-artwork {
    width: min(390px, 100%);
  }

  .hero-thread {
    height: 96px;
  }

  .home-section-heading {
    margin-bottom: 28px;
  }

  .discipline-card,
  .process-card {
    min-height: 205px;
    padding: 22px;
  }

  .thread-story-grid,
  .notes-grid {
    gap: 34px;
  }

  .thread-story-art {
    min-height: 245px;
  }

  .thread-loop {
    width: min(260px, 76vw);
  }

  .thread-story-art p {
    right: 0;
    bottom: 3%;
  }

  .home-close-inner .primary-btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .hero-meta span:not(:last-child)::after {
    right: -10px;
  }

  .thread-story-art img {
    width: min(280px, 82%);
  }
}

/* Keep the tall hero artwork inside its own grid row on tablet/phone. */
@media (max-width: 900px) {
  .hero-art {
    min-height: clamp(360px, 62vw, 480px);
  }

  .hero-artwork {
    width: auto;
    height: clamp(340px, 60vw, 460px);
    max-width: 82vw;
  }
}

@media (max-width: 620px) {
  .hero-art {
    min-height: clamp(330px, 100vw, 400px);
  }

  .hero-artwork {
    width: auto;
    height: clamp(300px, 92vw, 370px);
    max-width: 92%;
  }
}