/*
  Lorem Ipsum type system.
  One definition per kind of text, with a desktop and a phone size.
  Loaded after the old theme stylesheets on both versions of the site.
  Two families only: PF Regal (serif) and Figtree (sans serif).

  Each style has one line-height ratio, used on desktop and phone alike.

  Styles
    display   largest titles: project titles, award names
    title     section statements, film and slider titles
    subhead   headings inside text (film descriptions, podcast hosts)
    lead      section introductions ("We design memorable experiences…")
    body      all running text; italics are true serif italics
    card      names on cards: projects, people, films
    meta      the line under a name: roles, positions
    label     small capitals: EXPERIENCE DESIGN, WINNER, RECENT, client names, tags
    caption   image captions, trailer captions, credits
*/

:root {
  --serif: 'PF Regal', Georgia, serif;
  --sans: 'Figtree', Helvetica, Arial, sans-serif;

  --display-size: 58px;  --display-lh: 1.1;
  --title-size: 44px;    --title-lh: 1.15;
  --subhead-size: 26px;  --subhead-lh: 1.35;
  --lead-size: 24px;     --lead-lh: 1.4;
  --body-size: 24px;     --body-lh: 1.4;
  --card-size: 20px;     --card-lh: 1.2;
  --meta-size: 16px;     --meta-lh: 1.35;   --meta-weight: 400;
  --label-size: 16px;    --label-lh: 1.35;
  /* Capital labels are spaced out like on the WordPress site (5px at 16-18px). */
  --label-tracking: 0.3em;
  --caption-size: 16px;  --caption-lh: 1.4;
  --tag-size: 14px;

  /* The one gray for secondary text (labels, tags, captions, dates, role lines,
     footer). #767676 is the lightest gray that stays readable at small sizes
     on both white (4.5:1) and black (4.6:1) backgrounds. */
  --gray: #767676;
}

/* In-between sizes: desktop windows 768–1100px wide */
@media (min-width: 768px) and (max-width: 1100px) {
  :root {
    --display-size: 46px;
    --title-size: 36px;
    --subhead-size: 24px;
    --lead-size: 21px;
    --body-size: 21px;
  }
}

/* Phone sizes: the phone version of the site, and narrow desktop windows */
:root.phone {
  --display-size: 36px;
  --title-size: 32px;
  --subhead-size: 22px;
  --lead-size: 20px;
  --body-size: 20px;
  --card-size: 18px;
  --meta-size: 14px;
  --label-size: 14px;
  --caption-size: 15px;
  --tag-size: 13px;
}
@media (max-width: 767px) {
  :root {
    --display-size: 36px;
    --title-size: 32px;
    --subhead-size: 22px;
    --lead-size: 20px;
    --body-size: 20px;
    --card-size: 18px;
    --meta-size: 14px;
    --label-size: 14px;
    --caption-size: 15px;
    --tag-size: 13px;
  }
}

/* display */
h1.project_title_name,
.home-blog-item-title-link {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: var(--display-size) !important;
  line-height: var(--display-lh) !important;
}

/* title */
h2.wp-block-heading.has-text-align-center.small,
.movie_text > span,
.projects_slider_text_in,
.mat_episodes > h2,
h1.home_slogan {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: var(--title-size) !important;
  line-height: var(--title-lh) !important;
}

/* subhead */
.movie_desc .wp-block-heading,
.host_info h2,
.episode_info h3,
.tbl_c_txt h4,
.mat_top_text h4 {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: var(--subhead-size) !important;
  line-height: var(--subhead-lh) !important;
}

/* lead */
h5.wp-block-heading.has-text-align-center.small,
.projects_slider_sub_text {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: var(--lead-size) !important;
  line-height: var(--lead-lh) !important;
}

/* body */
.blog-item-short-desc > p,
.news_item_path .blog-item-short-desc,
.company-iner-ttx > p,
.mat_tab_links span,
.movie_desc p,
.team_type p,
.teamcontent p,
.host_info span,
.mat_text_wrapper,
.tbl_c_txt p,
.episode_info_text,
.blog-item-short-desc > ul li,
.blog-item-short-desc > ol li,
.movie_desc ul li,
.movie_desc ol li {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: var(--body-size) !important;
  line-height: var(--body-lh) !important;
}
.blog-item-short-desc > p em, .blog-item-short-desc > p i,
.company-iner-ttx > p em, .company-iner-ttx > p i,
.movie_desc p em, .movie_desc p i,
.team_type p em, .team_type p i,
.host_info em, .mat_text_wrapper em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.blog-item-short-desc > p strong, .blog-item-short-desc > p b,
.movie_desc p strong, .movie_desc p b {
  font-weight: 500 !important;
}

/* card */
.team_name,
h1.team_name {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: var(--card-size) !important;
  line-height: var(--card-lh) !important;
}

/* meta: the line under a name (a role); a long biography paragraph stays body */
div.team_type,
.team_itm_txt .team_type,
.team_itm_txt .team_type p {
  font-family: var(--sans) !important;
  font-weight: var(--meta-weight) !important;
  font-size: var(--meta-size) !important;
  line-height: var(--meta-lh) !important;
}

/* label */
h3.wp-block-heading.has-text-align-center,
.blog-item-source,
.medias-tittles_name,
.text-pad-txt span,
.client_date_name,
.movie_tags span,
.projects_slider_text_in span,
.mat_hosts > h2,
.mat_content > h2,
h2._scroll-animate > span,
.films_list_rr > h2 > span {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: var(--label-size) !important;
  line-height: var(--label-lh) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--label-tracking) !important;
}

/* caption */
figcaption,
.wp-element-caption,
.trailer_caption_l,
.trailer_caption_r,
.episode_date_duration span,
.time-current,
.time-duration,
.blog-item-date,
.listen_on, .listen_on a,
.episode_author_links span {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: var(--caption-size) !important;
  line-height: var(--caption-lh) !important;
}

/* The phone podcast page used a third family (Greta Sans Pro); bring it into the system */
.mat_tab_links a, .load_more_episodes .more_title {
  font-family: var(--sans) !important;
}

/* Credits (Directed by, Cast, Date, Location): Figtree 18px, same on both devices.
   All spacing is in whole pixels so every line lands on the pixel grid and the gaps
   render identically (fractional values made some gaps look 1px larger than others).
   - lines of one wrapped entry: 25px line height
   - between entries, and between a heading and its first entry: 6px
   - between groups: 16px */
.cont_call_itm_i, .cont_call_itm_i a, .cont_call_itm_i b, .cont_call_itm_i span {
  font-size: 18px !important;
  line-height: 25px !important;
}
.cont_call_itm_i { padding-bottom: 16px !important; }
.cont_call_itm_i > b { display: block !important; margin: 0 0 6px !important; }
.cont_call_itm_i > br { display: none; }
.cont_call_itm_i .credit-line { display: block; }
.cont_call_itm_i .credit-line .cont_call_itm_itt { margin: 0 !important; }
.cont_call_itm_i .credit-line + .credit-line { margin-top: 6px; }

/* ---------- One gray for all secondary text ----------
   Previously eight different grays (#949494, #9e9e9e, #999, #7e7e7e, #7c7c7c,
   #767676, #6b6b6b, #333) depending on page and device. */
h3.wp-block-heading.has-text-align-center,          /* section labels: EXPERIENCE DESIGN, ABOUT US */
.mat_content h2, .mat_hosts h2,                     /* podcast labels: CONTACT US, MEET YOUR HOSTS */
.client_date_name, .medias-tittles_name,            /* client and category names above titles */
.movie_tags, .movie_tags span,                      /* film tags: genre, year, rating, length, language */
.blog-item-source, .blog-item-date,                 /* award level and year */
.team_type, .team_type p,                           /* role / client line under a name */
figcaption, .wp-element-caption, .blocks-gallery-caption,   /* image captions */
.trailer_caption_l, .trailer_caption_r,             /* trailer captions under videos */
.episode_date_duration, .episode_date_duration span, .time-current, .time-duration,  /* podcast dates, player */
.contact-item-desc, .contact-item-desc a, .contact-item-desc p,
.contact-bottom-item-desc, .contact-bottom-item-desc a, .contact-bottom-item-desc p,  /* contact page */
.footer-contact-item-desc a,                        /* footer links */
.main-footer-content-left h4, .main-footer-content-left-ttl {   /* footer copyright */
  color: var(--gray) !important;
  opacity: 1 !important;
}

/* Italic titles inside running text are body text, not gray (phone showed them in #333) */
.blog-item-short-desc p em, .blog-item-short-desc p i { color: inherit !important; }

/* ---------- Film tags: GENRE · YEAR · RATING · LENGTH · LANGUAGE ----------
   Gray, smaller than labels, with a centered dot between tags that stays
   at the end of a line when the row wraps. */
.movie_text .movie_tags {
  font-size: var(--tag-size) !important;
  line-height: 1.6 !important;
  max-width: none !important;   /* the old theme capped the row at 400px; use the full column */
  width: auto !important;
  display: block !important;
}
.movie_text .movie_tags span {
  font-family: var(--sans) !important;
  font-size: var(--tag-size) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
  position: static !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.movie_text .movie_tags span:after { display: none !important; }
.movie_text .movie_tags span:not(:last-child)::after {
  display: inline !important;
  content: '\00B7' !important;
  position: static !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--gray) !important;
  margin: 0 0.55em !important;
}

/* ---------- Labels that were in normal case on the original site ----------
   Same font, size and gray as labels, but normal case and no extra tracking
   (tracking is only for capitals). Labels that were capitals on the original
   site stay capitals: section labels, client names above titles, award levels,
   client group names. */
.client_date_name,                                  /* category: Museums and Exhibits */
.movie_text .movie_tags span,                       /* film tags */
.mat_hosts > h2, .mat_content > h2,                 /* Meet your hosts, Contact Us */
h2._scroll-animate > span, .films_list_rr > h2 > span,   /* Recent, Past Releases */
.projects_slider_text_in span {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Wide letter spacing also adds space after the last letter, which pushes a
   centered label left of center; an equal indent on the left balances it. */
h3.wp-block-heading.has-text-align-center { text-indent: var(--label-tracking); }