/* Theme C: Coral Slate */
.theme-c {
  --bg: #fbf7f0; --ink: #26313a; --coral: #c95c4a; --slate: #2e5464; --blue: #5f8da2; --blue-lt: #b9d3df;
  --sage: #7b8a6b; --blush: #f2e2da; --night: #2b3037; --muted: #5f6b73;
  --max: 1280px; --reel-radius: 2px; --shot-radius: 0; --poster-radius: 0; --play-bg: rgba(20,20,20,.45);
  --imdb-text: var(--night);
  background: var(--bg); color: var(--ink);
}

/* hero */
.c-hero { position: relative; height: 480px; overflow: hidden; background: var(--bg); }
.c-hero__paint { position: absolute; inset: 0; background:
  radial-gradient(120% 140% at 85% 30%, #6f9ab0 0%, #5a889e 40%, rgba(90,136,158,.85) 55%, rgba(110,150,170,.35) 68%, rgba(251,247,240,0) 80%),
  linear-gradient(90deg, rgba(251,247,240,1) 28%, rgba(251,247,240,0) 52%); }
.c-hero__paint::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .3 0 0 0 0 .35 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
.c-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 46px; background: var(--bg); -webkit-mask: url(../assets/svg/wave.svg) center / 100% 100%; mask: url(../assets/svg/wave.svg) center / 100% 100%; z-index: 3; }
.c-nav { position: absolute; left: 88px; top: 20px; display: flex; gap: 52px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; z-index: 4; }
.c-nav a { text-decoration: none; padding-bottom: 8px; }
.c-nav a[aria-current] { border-bottom: 2px solid var(--ink); }
.c-hero__text { position: absolute; left: 88px; top: 50px; z-index: 2; width: 600px; }
.c-name { line-height: 1; }
.c-name__first { display: block; font: 400 190px/.8 "Yellowtail", cursive; color: var(--coral); rotate: -5deg; margin-left: -10px; position: relative; z-index: 1; }
.c-name__last { display: block; font: 400 128px/.9 "Anton", sans-serif; color: var(--slate); letter-spacing: .01em; text-transform: uppercase; margin: -18px 0 0 200px; }
.c-tag { position: relative; display: inline-block; margin-top: 22px; padding: 14px 46px; }
.c-tag__paint { position: absolute; inset: 0; background: #ecd5c6; }
.c-tag span:last-child { position: relative; font-size: 20px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.c-sub { margin: 14px 0 0 80px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--slate); }

/* labels */
.c-head { display: flex; align-items: center; gap: 22px; margin-bottom: 16px; }
.c-label { font-size: 26px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.c-label--lg { font-size: 24px; }
.c-rule { width: 110px; height: 1px; background: var(--ink); opacity: .7; }
.c-rule--grow { flex: 1; }
.c-kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); max-width: 230px; line-height: 1.5; }
.c-kicker--blue { color: #4d7286; margin: -8px 0 16px; }

/* reel + credits */
.c-work { display: grid; grid-template-columns: 1fr 540px; gap: 46px; padding: 16px 0 28px; }
.c-work__credits .c-label { font-size: 18px; }
.c-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.c-posters .poster__img { aspect-ratio: .95; }
.c-posters .poster__img img { object-position: 50% 0; }

/* highlights */
.c-hl { background: var(--sage); color: #fff; padding: 30px 0; }
.c-hl__in { display: grid; grid-template-columns: 220px repeat(4, 1fr); align-items: center; }
.c-hl__title { font-size: 28px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; line-height: 1.35; }
.c-hl__item { text-align: center; padding: 0 24px; border-left: 1px solid rgba(255,255,255,.4); }
.c-hl__icon svg { width: 30px; height: 30px; margin: 0 auto 12px; }
.c-hl__item h3 { font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.c-hl__item p { margin-top: 10px; font-size: 15px; line-height: 1.4; opacity: .95; }

/* headshots */
.c-shots { background: var(--blush); padding: 28px 0; }
.c-shots__in { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.c-shots__in .c-label { font-size: 19px; }
.c-shots__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.c-shots__grid .shot { aspect-ratio: 1; }

/* blue band */
.c-blue { background: var(--blue-lt); padding: 34px 0 40px; overflow: hidden; }
.c-blue__in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.c-comedy .reel { box-shadow: 0 8px 24px rgba(30,60,80,.2); }
.c-about { position: relative; display: grid; grid-template-columns: 1fr 230px; min-height: 360px; align-items: center; }
.c-about__paper { position: absolute; inset: 0 130px 0 0; background: #fbf7ef; }
.c-about__copy { position: relative; padding: 36px 20px 30px 48px; grid-column: 1; grid-row: 1; }
.c-about__copy .c-label { font-size: 20px; }
.c-about__copy p { font-size: 15.5px; line-height: 1.55; }
.c-about__copy p + p { margin-top: 10px; }
.c-about__photo { position: relative; grid-column: 2; grid-row: 1; align-self: center; margin: 0; background: #fff; padding: 10px; box-shadow: 0 8px 22px rgba(30,60,80,.2); rotate: 3deg; }
.c-about__photo > img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 50% 14%; }

/* footer */
.c-foot { background: var(--night); color: #f1ede7; padding: 36px 0; }
.c-foot__in { display: grid; grid-template-columns: 380px 1fr 1fr auto; gap: 40px; align-items: center; }
.c-foot .c-label { font-size: 20px; }
.c-foot .c-rule { background: #f1ede7; }
.c-foot__col { border-left: 1px solid rgba(255,255,255,.25); padding-left: 32px; font-size: 14px; letter-spacing: .06em; line-height: 1.6; }
.c-foot__col h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.c-foot__col a { text-decoration: none; }
.c-foot__socials { border-left: 1px solid rgba(255,255,255,.25); padding-left: 32px; color: #f1ede7; }

@media (max-width: 1100px) {
  .c-hero { height: auto; padding: 70px 24px 0; }
  .c-hero__text { position: relative; left: auto; top: auto; width: auto; }
  .c-nav { left: 24px; gap: 22px; }
  .c-work, .c-blue__in, .c-shots__in, .c-foot__in { grid-template-columns: 1fr; }
  .c-hl__in { grid-template-columns: 1fr 1fr; gap: 24px; }
  .c-hl__title { grid-column: 1 / -1; }
  .c-foot__col, .c-foot__socials { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .c-name__first { font-size: 130px; }
  .c-name__last { font-size: 82px; margin: -36px 0 0 80px; }
  .c-tag span:last-child { font-size: 14px; }
  .c-sub { margin-left: 0; }
  .c-label { font-size: 18px; white-space: normal; }
  .c-shots__grid { grid-template-columns: repeat(2, 1fr); }
  .c-about { grid-template-columns: 1fr; }
  .c-about__paper { inset: 0; }
  .c-about__photo { display: none; }
  .c-hl__in { grid-template-columns: 1fr; }
  .c-hl__item { border-left: 0; }
}
@media (max-width: 1100px) {
  .c-hero { display: flex; flex-direction: column; overflow: hidden; }
  .c-hero__text { order: 1; }
  .c-hero__paint { background: linear-gradient(180deg, var(--bg) 30%, #6f9ab0 60%); }
}
@media (max-width: 640px) {
  .c-name__first { font-size: 110px; }
  .c-name__last { font-size: 70px; margin: -8px 0 0 40px; }
  .c-tag { padding: 12px 20px; }
  .c-tag span:last-child { letter-spacing: .16em; }
  .c-head { flex-wrap: wrap; gap: 10px; }
  .c-hl__title { font-size: 22px; }
}

/* Photo fills the right side and fades into the cream on its left edge */
.c-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; margin: 0; z-index: 1;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 26%); mask: linear-gradient(90deg, transparent 0%, #000 26%); }
.c-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
@media (max-width: 1100px) {
  .c-hero__photo { position: relative; order: 2; width: auto; height: 460px; margin: 24px -24px 0;
    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 18%); mask: linear-gradient(180deg, transparent 0%, #000 18%); }
}