/* =========================================================
   Elizabeth Willaman — VFX Producer
   Green field, pink ink, topographic parallax backdrop.

   Conventions
   - BEM-ish class names (block__element--modifier)
   - Fluid type via clamp(min, preferred, max)
   - Design tokens live in :root
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* brand palette */
  --green:      #048646;   /* primary background        */
  --green-deep: #036437;   /* darker section panels      */
  --green-ink:  #024a29;   /* text on light-coloured cards */
  --pink:       #fbc4e1;   /* primary text              */
  --peri:       #b4d0e8;   /* accent                    */
  --cream:      #f4f1e8;   /* accent                    */
  --gold:       #e6be6a;   /* Emmy accent               */

  /* typefaces */
  --font-sans:   "Poppins", system-ui, sans-serif;   /* ≈ GT Walsheim */
  --font-serif:  "Fraunces", Georgia, serif;
  --font-script: "Lobster", cursive;

  /* fluid type scale */
  --fs-name: clamp(3.4rem, 1rem + 13vw, 10rem);
  --fs-big:  clamp(2.2rem, 1rem + 5vw, 5rem);

  /* layout */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw:   1360px;
  --ease:   cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--green);
  color: var(--pink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

img { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* shared display heading */
.big {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-big);
  line-height: .95;
  letter-spacing: -.01em;
}

/* scroll-reveal (progressive enhancement, toggled by script.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Topographic parallax backdrop ---------- */
.topo {
  position: fixed;
  inset: 0;
  height: 100vh;
  overflow: hidden;            /* clip the oversized svg; adds no page height */
  z-index: 0;
  color: var(--pink);          /* contour strokes use currentColor */
  opacity: .16;
  pointer-events: none;
}
.topo svg {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 142vh;               /* headroom for the parallax drift */
  display: block;
  will-change: transform;
}

/* everything above the backdrop */
.page { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 8rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.name {
  font-family: var(--font-script);
  font-size: var(--fs-name);
  line-height: .98;
  letter-spacing: 0;           /* Lobster is a connecting script — keep the joins */
  text-shadow: 0 3px 0 rgba(2, 74, 41, .25);
}
.role {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(1.1rem, .7rem + 1.8vw, 2.4rem);
  margin-top: clamp(1rem, 2.2vw, 1.8rem);
  color: var(--peri);
}
.tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, .85rem + 1vw, 1.6rem);
  line-height: 1.25;
  margin-top: clamp(.8rem, 1.6vw, 1.2rem);
  max-width: 32ch;               /* comfortably fits the longer line */
  text-wrap: balance;            /* smart wrapping around the explicit <br> */
}

/* ---------- Marquee (decorative; aria-hidden in markup) ---------- */
.marquee {
  overflow: hidden;
  background: var(--pink);
  color: var(--green-deep);
  margin-top: clamp(1rem, 3vw, 2rem);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee__track span {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(.84rem, .6rem + 1.2vw, 1.56rem);
  padding: .55rem 0;
  white-space: nowrap;
}
.marquee__track b { color: var(--green); margin: 0 .5em; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

/* ---------- Work: Monarch feature + 3-up masonry ---------- */
.work {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 5rem) var(--gutter) clamp(3rem, 6vw, 6rem);
}

/* feature (Monarch) on the left, 3-across grid on the right */
.stage {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(.9rem, 1.8vw, 1.8rem);
  align-items: start;
}
.stage__right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.6rem);
  align-content: start;
}
.stage__rest {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.6rem);
  margin-top: clamp(.9rem, 1.8vw, 1.8rem);
}

/* poster card */
.card { margin: 0; }
.card__frame {
  position: relative;
  aspect-ratio: 2 / 3;         /* every poster shown full, portrait */
  border-radius: 12px;
  overflow: hidden;
  background: var(--green-deep);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
/* the feature must let the Emmy capsule hang past its bottom edge */
.card--feature { position: relative; }
.card--feature .card__frame { overflow: visible; }

/* caption sits below the poster (no hover reveal) */
.card__cap {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: clamp(.7rem, 1vw, 1rem) .1rem 0;
}
.card--feature .card__cap {
  margin-top: clamp(1.9rem, 4.5%, 2.8rem);   /* clear the overhanging capsule */
  text-align: center;
}
.card__role {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: clamp(.72rem, .62rem + .3vw, .95rem);
}
.card--feature .card__role { font-size: clamp(.95rem, .7rem + .7vw, 1.5rem); }
.card__meta {
  font-weight: 500;
  font-size: clamp(.72rem, .62rem + .25vw, .92rem);
  color: var(--peri);            /* production-company + year line */
}
.card--feature .card__meta { font-size: clamp(.85rem, .65rem + .5vw, 1.15rem); }

/* Emmy capsule — centred on the poster's bottom edge, straddling it 50/50 */
.emmy-capsule {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);   /* lower half hangs below the poster */
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  max-width: 94%;
  padding: .5rem 1.1rem .5rem .55rem;
  border-radius: 999px;
  background: rgba(18, 16, 14, .86);
  border: 1px solid var(--gold);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7);
  backdrop-filter: blur(5px);
  white-space: nowrap;              /* keep each line intact; phones widen the pill below */
}
.emmy-ico {
  flex: none;
  width: clamp(2.6rem, 6vw, 3.6rem);
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.emmy-capsule__txt { display: flex; flex-direction: column; line-height: 1.06; }
.emmy-capsule__txt strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(.74rem, .65rem + .35vw, .98rem);
  color: var(--gold);
}
.emmy-capsule__sub {
  font-size: clamp(.62rem, .55rem + .22vw, .78rem);
  color: var(--cream);
}

/* ---------- Logo strip ---------- */
.logos {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(251, 196, 225, .25);
}
.logos__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.4rem) clamp(1rem, 3vw, 3rem);
  align-items: center;
}
.logo { display: grid; place-items: center; height: clamp(40px, 5vw, 60px); }
.logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* render monochrome logos in pink-white */
  opacity: .7;
}
/* text fallback (shown by inline onerror when a logo file is missing) */
.logo__txt {
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 700;
  font-size: clamp(.85rem, .7rem + .5vw, 1.15rem);
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--pink);
  opacity: .82;
}

/* ---------- Numbers ---------- */
.numbers { background: var(--green-deep); }
.numbers ul {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.numbers li {
  padding: clamp(2.4rem, 5vw, 4.5rem) 1rem;
  display: grid;
  gap: .4rem;
  text-align: center;
  border-left: 1px solid rgba(251, 196, 225, .18);
}
.numbers li:first-child { border-left: 0; }
.numbers__n {
  font-weight: 800;
  font-size: clamp(3.2rem, 2rem + 6vw, 8rem);
  line-height: .92;
  letter-spacing: -.02em;
}
.numbers__plus { color: var(--peri); }
.numbers__l {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(.7rem, .6rem + .3vw, .95rem);
  color: color-mix(in srgb, var(--pink) 78%, var(--green));
}

/* ---------- Approach: filled rounded power cards ---------- */
.approach {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 7rem) var(--gutter);
}
.approach__head { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.powers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.power {
  padding: clamp(1.8rem, 3vw, 2.8rem);
  border-radius: 28px;
  color: var(--green-ink);
  transition: transform .4s var(--ease);
}
.power--pink  { background: var(--pink); }
.power--cream { background: var(--cream); }
.power--peri  { background: var(--peri); }
.power:hover { transform: translateY(-6px); }
.power__no { font-weight: 800; font-size: 2rem; opacity: .5; }
.power h3 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  margin: .5rem 0 .8rem;
}
.power p {
  font-weight: 500;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.3rem);
  line-height: 1.4;
  color: color-mix(in srgb, var(--green-ink) 82%, #000);
}

/* ---------- Quotes (sized to match the Superpower titles) ---------- */
.quotes ul {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 4rem) var(--gutter) clamp(3.5rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-items: start;
}
.quote blockquote { margin: 0; }
.quote p {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  line-height: 1.22;
}
.quote footer { margin-top: clamp(.9rem, 1.6vw, 1.3rem); display: grid; gap: .2rem; }
.quote cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .3vw, 1.2rem);
}
.quote footer span {
  font-size: clamp(.82rem, .76rem + .18vw, 1rem);
  color: color-mix(in srgb, var(--pink) 65%, var(--green));
}

/* featured quote — spans the row inside a pink block */
.quote--feature {
  grid-column: 1 / -1;
  padding: clamp(2rem, 4vw, 3.4rem);
  border-radius: 28px;
  background: var(--pink);
  color: var(--green-ink);
}
.quote--feature p { font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem); }
.quote--feature cite { color: var(--green-ink); }
.quote--feature footer span { color: color-mix(in srgb, var(--green-ink) 80%, #000); }

/* ---------- Contact ---------- */
.contact {
  text-align: center;
  background: var(--green-deep);
  padding: clamp(4rem, 9vw, 9rem) var(--gutter) clamp(2.5rem, 4vw, 3.5rem);
}
.contact__title { font-size: clamp(2.6rem, 1rem + 7vw, 6.5rem); }
.contact__accent { color: var(--peri); }

/* social icons — tan, sized to ~half the footer title */
.contact__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 2rem);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--cream);
  font-size: clamp(1.3rem, .5rem + 3.5vw, 3.25rem);
}
.contact__social-link {
  display: inline-flex;
  color: inherit;
  line-height: 1;
  transition: transform .25s var(--ease), opacity .25s;
}
.contact__social-link:hover { transform: translateY(-3px); opacity: .82; }
.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.4rem;
  margin-top: 2.2rem;
  font-weight: 500;
  font-size: clamp(1rem, .9rem + .6vw, 1.35rem);
}
.contact__links a {
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .3s;
}
.contact__links a:hover { border-color: var(--pink); }
.contact__links span { color: color-mix(in srgb, var(--pink) 62%, var(--green)); }
.contact__fine {
  margin-top: 3rem;
  font-size: .8rem;
  color: color-mix(in srgb, var(--pink) 55%, var(--green));
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .card--feature { max-width: 62%; margin-inline: auto; }
  .stage__rest { grid-template-columns: repeat(3, 1fr); }
  .logos__grid { grid-template-columns: repeat(4, 1fr); }
  .powers,
  .quotes ul { grid-template-columns: 1fr; }
  .numbers ul { grid-template-columns: repeat(2, 1fr); }
  .numbers li:nth-child(3) { border-left: 0; }
}

@media (max-width: 560px) {
  .card--feature { max-width: 100%; }
  /* let the Emmy capsule grow to near screen width so its text never spills out */
  .emmy-capsule { width: calc(100vw - 1.5rem); max-width: calc(100vw - 1.5rem); justify-content: center; }
  .stage__right,
  .stage__rest { grid-template-columns: repeat(2, 1fr); }
  .logos__grid { grid-template-columns: repeat(3, 1fr); }
  .numbers li { border-left: 0; border-top: 1px solid rgba(251, 196, 225, .14); }
  .numbers li:nth-child(-n+2) { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  .topo { transform: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}