/* ============================================================
   sections.css — per-section styles for the homepage.
   Filled section-by-section in Phase 2 (Hero, Featured Works,
   Process, Experience, Footer card). Empty for now.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: calc(var(--nav-h) + var(--space-xl)); }
/* wider container for the hero so the big title fits on one line */
.hero > .container { max-width: 1360px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* title: one big full-width row. Real values from the old file:
   font-family "Designer Regular", font-size 58px, weight 400, no text-transform
   (the caps come from the Designer Regular display font itself). */
.hero-title {
  font-family: var(--f-decor);       /* Designer Regular */
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 48px); /* slightly smaller so it fits one line */
  line-height: 1.12;
  white-space: nowrap;                /* keep on one line on desktop */
  color: var(--c-ink);
}

/* rotating words: clipped box with a lime highlight, vertical marquee.
   An invisible sizer sets the box width to the longest word, so nothing clips.
   Words fill the box and center vertically via flex, so they never sit too high. */
.hero-rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  line-height: 1;
  background: var(--c-accent);        /* lime highlight behind the word */
  color: var(--c-ink);
  border-radius: 12px;
  padding: .12em .22em;
}
.rw-sizer { visibility: hidden; white-space: nowrap; }
.hero-rotator .word {
  position: absolute;
  left: .22em; right: .22em; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transform: translateY(120%);
  opacity: 0;
  will-change: transform, opacity;
}

@media (max-width: 640px) {
  .hero-title { white-space: normal; }  /* allow wrap on small phones */
}
@media (prefers-reduced-motion: no-preference) {
  .hero-rotator .word { transition: transform .55s var(--ease-out), opacity .4s ease; }
}
.hero-rotator .word.rw-current { transform: translateY(0); opacity: 1; }
.hero-rotator .word.rw-exit    { transform: translateY(-120%); opacity: 0; }
.hero-rotator .word.rw-below   { transform: translateY(120%); opacity: 0; transition: none; }

/* sub line */
.hero-sub {
  margin-top: 10px;                    /* real gap from the file (Title wrap gap) */
  font-family: var(--f-body);
  font-weight: var(--fw-medium);
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.4;
  color: var(--c-muted);
  /* one line on desktop (no max-width clamp) */
}
.hero-sub .hl {
  background: var(--c-accent);
  color: var(--c-ink);
  border-radius: 10px;
  padding: .06em .3em;
}

/* contact — label on top, email pill below */
.hero-contact {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.hero-contact-label {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--c-muted);
}
.hero-contact-label strong { color: var(--c-ink); font-weight: var(--fw-bold); }

/* email pill with copy icon on the left */
.hero-email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 10px 18px 10px 12px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.hero-email:hover { background: var(--c-primary-hover); transform: translateY(-2px); }
.hero-copy {
  position: relative;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  color: var(--c-on-primary);
  flex: none;
  transition: background var(--dur-fast) ease;
}
.hero-copy svg { width: 17px; height: 17px; }
.hero-copy:hover { background: rgba(255,255,255,.16); }
/* "Copied" confirmation bubble */
.hero-copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--c-ink);
  color: var(--c-accent);
  font-size: var(--fs-tag);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.hero-copy.copied .hero-copied { opacity: 1; transform: translateX(-50%) translateY(0); }

/* blurb below the social icons */
.hero-blurb {
  margin-top: var(--space-lg);
  max-width: 60ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: var(--lh-body);
  color: var(--c-muted);
}
.hero-blurb strong { color: var(--c-ink); font-weight: var(--fw-bold); }

/* social icons */
.hero-social { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); }
.hero-social a {
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  color: var(--c-ink);
  background: var(--c-primary-tint);   /* soft fill, a touch different from the page bg */
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.hero-social a:hover { background: var(--c-primary); transform: translateY(-2px); }
.hero-social a img,
.hero-social a svg { width: 19px; height: 19px; }

/* media: avatar on a LIME circle (teal vectors need lime behind them to show) */
.hero-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 460px;                 /* give the decorations room */
}
.hero-circle {
  position: absolute;
  width: min(100%, 430px);
  aspect-ratio: 1;
  background: var(--c-accent);       /* lime — matches the original */
  border-radius: 50%;
  z-index: 0;
}
/* extracted vectors behind the avatar (from the old hero code) */
.hero-deco { position: absolute; z-index: 1; pointer-events: none; }
.hero-deco-dots     { width: 26%; left: 8%;  bottom: 12%; }
.hero-deco-triangle { width: 42%; right: -8%; top: 30%; }   /* bigger, like the original */
.hero-avatar { position: relative; z-index: 2; width: min(100%, 440px); align-self: end; }

/* teal baseline that grounds the cut-off photo — runs off to the right edge
   of the screen (body has overflow-x:hidden, so it clips cleanly at the edge) */
.hero-baseline {
  position: absolute;
  z-index: 3;
  left: 4%;
  right: -50vw;          /* extend all the way to the viewport's right edge */
  bottom: 0;
  height: 6px;
  border-radius: var(--r-xs) 0 0 var(--r-xs);
  background: var(--c-primary);
}

@media (max-width: 809.98px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero-media { order: -1; }
  .hero-sub { max-width: none; }
  .hero-social { flex-wrap: wrap; }
}

/* ============================================================
   FEATURED WORKS
   ============================================================ */
.works-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.works-pill {
  display: inline-block;
  font-family: var(--f-decor);
  font-size: var(--fs-pill);
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-primary);        /* teal (button-style color) */
  border-radius: var(--r-pill);
  padding: var(--space-2xs) var(--space-md);
}
.works-count {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-nav);
  color: var(--c-muted);
  white-space: nowrap;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-cards);
}
/* editorial rhythm: every 2nd card sits lower */
.work-card:nth-child(even) { transform: translateY(var(--space-xl)); }

.work-card a { display: block; }
.work-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-primary-tint);
  aspect-ratio: 16 / 11;
}
.work-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-mid) var(--ease-out);
}
.work-card a:hover .work-media img { transform: scale(1.04); }
/* lime frame sweep on hover */
.work-media::after {
  content: "";
  position: absolute; inset: 0;
  border: 3px solid transparent;
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) ease;
  pointer-events: none;
}
.work-card a:hover .work-media::after { border-color: var(--c-accent); }

.work-meta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-3xs) 0;
}
.work-index {
  font-family: var(--f-decor);
  font-size: var(--fs-small);
  color: var(--c-primary);
  line-height: 1.9;
}
.work-title {
  font-size: var(--fs-h3);
  color: var(--c-ink);
  display: inline;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-size: 0% 45%;
  background-position: 0 78%;
  transition: background-size var(--dur-fast) var(--ease-out);
}
.work-card a:hover .work-title { background-size: 100% 45%; }
.work-sub {
  margin-top: var(--space-3xs);
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.work-arrow {
  margin-left: auto;
  font-size: var(--fs-h3);
  color: var(--c-primary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.work-card a:hover .work-arrow { transform: translate(4px, -4px); }

.works-cta {
  margin-top: calc(var(--space-xl) + var(--space-xl));
  text-align: center;
}

@media (max-width: 809.98px) {
  .works-grid { grid-template-columns: 1fr; }
  .work-card:nth-child(even) { transform: none; }
  .works-cta { margin-top: var(--space-xl); }
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.xp-bio {
  max-width: 62ch;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: var(--lh-body);
  color: var(--c-ink);
  margin-bottom: var(--space-xl);
}

/* timeline: lime markers on a vertical teal line; role + period stacked */
.xp-list { position: relative; }
.xp-list::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--c-primary-soft);
}
.xp-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0 var(--space-sm) 0;
}
.xp-marker {
  position: relative;
  z-index: 1;
  width: 16px; height: 16px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 3px solid var(--c-bg);
  box-shadow: 0 0 0 2px var(--c-primary);
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.xp-row:hover .xp-marker { transform: scale(1.25); }
.xp-role { font-size: var(--fs-h3); color: var(--c-ink); }
.xp-period {
  display: inline-block;
  margin-top: var(--space-3xs);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-nav);
  color: var(--c-muted);
}
.xp-years {
  font-style: normal;
  color: var(--c-primary);
  font-weight: var(--fw-bold);
}

.xp-cta { margin-top: var(--space-xl); }