/* ========================================================================
   02 — EXPERIENCE (intro, typographic nav)
   ======================================================================== */

.section-experience {
  background: var(--color-white);
}

/* ---- Intro (purple) ---- */
.experience-intro {
  position: relative;
  overflow: hidden;
  background: var(--color-accent); /* fallback shown until the canvas animation starts */
  color: var(--color-black);
  padding: var(--space-6) 0 var(--space-7);
}

/* Background motion layer (js/gradient-motion.js) — sized/positioned via
   JS to its container's own box, padded beyond it for the blur. Sits
   behind the text/portrait without affecting their layout. */
.experience-intro__bg-canvas {
  position: absolute;
  z-index: 0;
}

.experience-intro__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--space-3);
  align-items: start;
}

.experience-intro__eyebrow {
  margin-bottom: var(--space-3);
}

.experience-intro__lead {
  font-size: var(--fs-heading);
  font-weight: 400;
  line-height: var(--lh-snug);
  margin-bottom: 0.2em;
}

.experience-intro__formula {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.experience-intro__term {
  display: inline-block;
  transform: scale(1);
  transition: transform var(--dur-base) var(--ease-editorial), color var(--dur-base) var(--ease-editorial);
}
.experience-intro__term:hover {
  color: var(--color-accent);
  transform: scale(1.07);
}

.experience-intro__quote {
  margin-top: var(--space-5);
  margin-left: auto;
  max-width: 30rem;
  /* Same intro body-text scale as BRANDS (css/brands.css) — see profile.css. */
  font-size: clamp(0.92rem, 0.83rem + 0.42vw, 1.2rem);
  line-height: var(--lh-relaxed);
}

.experience-intro__quote-author {
  display: block;
  margin-top: var(--space-2);
  font-weight: 700;
  text-align: right;
}

.experience-intro__cta {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
}

.experience-intro__portrait {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-black);
}

.experience-intro__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.experience-intro__mark {
  position: absolute;
  z-index: 1;
  left: var(--container-pad);
  bottom: var(--space-3);
  width: clamp(44px, 3.4vw, 58px);
  opacity: 0.9;
  animation: experience-mark-spin 24s linear infinite;
}

@keyframes experience-mark-spin {
  to { transform: rotate(360deg); }
}

/* ---- Typographic nav (RETAIL / BUSINESS / BRANDS / FILMS) ---- */
.experience-typo-nav {
  padding-block: var(--space-5) var(--space-4);
}

.experience-typo-nav__item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-huge);
  line-height: 0.9;
  letter-spacing: var(--ls-tight);
  text-transform: capitalize;
  color: var(--color-pale-grey);
  transition: color var(--dur-base) var(--ease-editorial);
}

.experience-typo-nav__item:hover,
.experience-typo-nav__item:focus-visible {
  color: var(--color-black);
}

.experience-typo-nav__item[aria-disabled="true"] {
  pointer-events: none;
}

@media (max-width: 900px) {
  .experience-intro__grid { grid-template-columns: 1fr; }
  .experience-intro__portrait { max-width: 22rem; }
}

@media (max-width: 560px) {
  .experience-typo-nav__item {
    /* --fs-display-huge's vw-driven formula never actually reaches its
       own min bound at real phone widths, so the longest word
       ("Business") overflows its line — a dedicated mobile scale,
       tuned so every word (incl. "Business") fits with a small margin
       at 320-480px. */
    font-size: clamp(3rem, -0.62rem + 22.4vw, 6rem);
    letter-spacing: -0.02em;
  }
}

/* ========================================================================
   LAPTOP / LOW-HEIGHT DESKTOP — see profile.css for the breakpoint's
   rationale. Composition, hover logic and structure are unchanged; only
   the resolved sizes shrink (~10-20%, heaviest on the oversized nav
   words). Shared tokens (--fs-heading, --fs-display-huge, --fs-display-md)
   are not touched here — this file overrides the resolved property
   directly so Retail/Business/Films (which reuse those same tokens) are
   unaffected.
   ======================================================================== */
@media (min-width: 1100px) and (max-width: 1440px) and (max-height: 900px) {
  .experience-intro { padding: 4.8rem 0 7rem; }
  .experience-intro__lead { font-size: clamp(1.55rem, 1.1rem + 1.44vw, 2.2rem); }
  .experience-intro__formula { font-size: clamp(1.6rem, 1.05rem + 2.26vw, 2.7rem); }
  .experience-intro__portrait { max-width: 88%; margin-left: auto; }

  /* The main oversized element — down ~18%, still very large. */
  .experience-typo-nav { padding-block: 3.1rem 2rem; }
  .experience-typo-nav__item { font-size: clamp(3.3rem, 0.8rem + 16vw, 15rem); }
}