/* home.css — depends on site.css tokens */

.home-wrap {
  max-width: var(--nav-max);
  margin: 0 auto;
  padding: 96px 32px 72px;
}

.hero {
  position: relative;
}

.hello-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 58px);
  margin: 0 0 6px;
}

.hello-subtitle {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  margin: 0;
  position: relative;
}

.hello-subtitle .highlight {
  position: relative;
  padding: 0 4px;
  white-space: nowrap;
}

.hello-subtitle .highlight::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -14px;
  top: 6%;
  bottom: -8%;
  background: url(/assets/home/highlight.svg) no-repeat center / 100% 100%;
  z-index: -1;
}

/* Curved arrow: travels from the end of the subtitle line down into the
   top of the definition box on the right. Positioned relative to .hero,
   so it's anchored to real layout geometry instead of a fixed guess.
   Below the two-column breakpoint the columns stack, so the arrow no
   longer has a sensible target — it's hidden there in favour of a
   small inline accent instead (see .hello-arrow-inline). */
.hello-arrow {
  display: none;
}

.hello-arrow-inline {
  display: inline-block;
  width: 26px;
  margin-left: 4px;
  transform: rotate(35deg) translateY(4px);
  opacity: 0.85;
}

/* main content row: illustration left, definition card right */
.gag {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.gag-illustration {
  flex: 0 0 auto;
  width: clamp(260px, 27vw, 420px);
  aspect-ratio: 4 / 3;
  transform: scaleX(-1); /* source animation faces left; flip to match design (facing right) */
}

.gag-col {
  flex: 1 1 360px;
  font-family: var(--font-def);
  min-width: 300px;
  position: relative;
}

.gag-subtitle-portfolio {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 40px);
  margin: 0 0 2px;
}

.gag-text-po-t-f-l {
  font-size: 17px;
  font-weight: 300;
  margin: 0 0 2px;
  color: #333;
}

.gag-text-noun {
  font-size: 16px;
  margin: 0 0 14px;
  color: #555;
}

.gag-subtitle-bottom1 {
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  color: #222;
}

.gag-notes {
  font-family: var(--font-display);
  margin-top: 32px;
}

.gag-notes p {
  font-size: clamp(19px, 1.7vw, 25px);
  margin: 0 0 6px;
}

.gag-subtitle-bottom2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  margin-top: 14px;
  color: #333;
}

/* Show the real curved connector only once the two-column layout is
   stable enough for it to land somewhere meaningful. The SVG is sized
   and the path drawn live by home.js (see drawConnector), so this just
   needs to cover the .hero box without intercepting clicks. */
@media (min-width: 721px) {
  .hello-arrow-inline { display: none; }
  .hello-arrow {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .gag { flex-direction: column; align-items: flex-start; }
  .gag-illustration { width: min(280px, 70vw); }
}

@media (max-width: 480px) {
  .home-wrap { padding: 64px 20px 48px; }
}