@font-face {
font-family: “Pratt”;
src: url(“https://www..com/files/interactive/assets/fonts/Pratt.woff2”) format(“woff2”),
url(“https://www..com/files/interactive/assets/fonts/Pratt.woff”) format(“woff”);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: “Pratt-Bold”;
src: url(“https://www..com/files/interactive/assets/fonts/Pratt-Bold.woff2”) format(“woff2”),
url(“https://www..com/files/interactive/assets/fonts/Pratt-Bold.woff”) format(“woff”);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: “Pratt-BoldItalic”;
src: url(https://www..com/files/interactive/assets/fonts/Pratt-BoldItalic.woff2) format(“woff2”),
url(https://www..com/files/interactive/assets/fonts/Pratt-BoldItalic.woff) format(“woff”);
font-display: swap;
}
@font-face {
font-family: “Pratt-Italic”;
src: url(https://www..com/files/interactive/assets/fonts/Pratt-Italic.woff2) format(“woff2”),
url(https://www..com/files/interactive/assets/fonts/Pratt-Italic.woff) format(“woff”);
font-display: swap;
}
@font-face {
font-family: “Pratt-Fine”;
src: url(“https://www..com/files/interactive/assets/fonts/prattfine-webfont.eot”);
src: local(“?”),
url(“https://www..com/files/interactive/assets/fonts/prattfine-webfont.woff”) format(“woff”),
url(“https://www..com/files/interactive/assets/fonts/prattfine-webfont.ttf”) format(“truetype”),
url(“https://www..com/files/interactive/assets/fonts/prattfine-webfont.svg#prattfine”) format(“svg”);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: “Pratt-FineBold”;
src: url(“https://www..com/files/interactive/assets/fonts/prattfine_bold-webfont.eot”);
src: local(“?”),
url(“https://www..com/files/interactive/assets/fonts/prattfine_bold-webfont.woff”) format(“woff”),
url(“https://www..com/files/interactive/assets/fonts/prattfine_bold-webfont.ttf”) format(“truetype”),
url(“https://www..com/files/interactive/assets/fonts/prattfine_bold-webfont.svg#prattfine_bold”) format(“svg”);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘Pratt-FineBoldItalic’;
src: url(‘https://www..com/files/interactive/assets/fonts/prattfine_bolditalic-webfont.eot’);
src: local(‘?’),
url(‘https://www..com/files/interactive/assets/fonts/prattfine_bolditalic-webfont.woff’) format(‘woff’),
url(‘https://www..com/files/interactive/assets/fonts/prattfine_bolditalic-webfont.ttf’) format(‘truetype’),
url(‘https://www..com/files/interactive/assets/fonts/prattfine_bolditalic-webfont.svg#prattfine_bold’) format(‘svg’);
font-display: swap;
}
@font-face {
font-family: “GMSans-Web-Regular”;
src: url(“https://www..com/files/interactive/assets/fonts/GMSans_Web_Regular.woff2”) format(“woff2”),
url(“https://www..com/files/interactive/assets/fonts/GMSans_Web_Regular.woff”) format(“woff”);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: “GMsans-Web-Regular-Italic”;
src: url(https://www..com/files/interactive/assets/fonts/GMSans_Web_Italic.woff2) format(“woff2”),
url(https://www..com/files/interactive/assets/fonts/GMSans_Web_Italic.woff) format(“woff”);
font-display: swap;
}
@font-face {
font-family: “GMSans-Web-Bold”;
src: url(“https://www..com/files/interactive/assets/fonts/GMSans_Web_Bold.woff2”) format(“woff2”),
url(“https://www..com/files/interactive/assets/fonts/GMSans_Web_Bold.woff”) format(“woff”);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: “GMsans-Web-Bold-Italic”;
src: url(https://www..com/files/interactive/assets/fonts/GMSans_Web_Bold_Italic.woff2) format(“woff2”),
url(https://www..com/files/interactive/assets/fonts/GMSans_Web_Bold_Italic.woff) format(“woff”);
font-display: swap;
}
@font-face {
font-family: “GMSans-Web-Label”;
src: url(“https://www..com/files/interactive/assets/fonts/GMSans_Web_Label.woff2”) format(“woff2”),
url(“https://www..com/files/interactive/assets/fonts/GMSans_Web_Label.woff”) format(“woff”);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: “GMsanC-Regular”;
src: url(https://www..com/files/interactive/assets/fonts/GMsanC-Regular.woff2) format(“woff2”),
url(https://www..com/files/interactive/assets/fonts/GMsanC-Regular.woff) format(“woff”);
font-display: swap;
}
@font-face {
font-family: “GMsanC-Bold”;
src: url(https://www..com/files/interactive/assets/fonts/GMsanC-Bold.woff2) format(“woff2”),
url(https://www..com/files/interactive/assets/fonts/GMsanC-Bold.woff) format(“woff”);
font-display: swap;
}
/* ========== Basic Resets ========== */
.gi-container *,
.gi-container *::before,
.gi-container *::after {
box-sizing: border-box;
}
.gi-container {
font-family: “Pratt”, Georgia, Palatino, Book Antiqua, Times New Roman, serif;
color: #333;
line-height: 1.6;
}
.gi-container img {
max-width: 100%;
display: block;
}
.gi-container a {
color: #0072bc;
text-decoration: none;
}
.gi-container a:hover {
text-decoration: underline;
}
.gi-container .container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 1rem 2rem;
}
/* HEADER */
.site-header {
background-color: #000;
text-align: center;
color: #fff;
padding: 3.5rem 0;
}
h1,
h2,
h3,
h4 {
font-family: “Pratt-Bold”, Georgia, serif;
font-weight: normal;
margin: 1rem 0;
color: #191919;
}
.heading-group h4 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
font-size: 24px;
line-height: 30px;
}
.gi-header__headline h1 {
color: #191919;
}
.heading-group h3 {
color: #191919;
margin-bottom: 0rem;
}
h3 {
font-size: 2.5rem;
}
h1.intro-text–heading {
font-size: 1.5rem;
line-height: 1.3;
margin: 1rem;
font-family: “GMSans-Web-Label”;
text-transform: uppercase;
color: #fff;
}
.intro-text–subheading {
font-family: “Pratt”, Georgia, serif;
font-size: 1.5rem;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0rem;
color: #fff;
}
span.intro-number–subheading {
font-size: 16rem;
line-height: 1;
font-family: “Pratt-Bold”, Georgia, serif;
}
p {
font-size: 1.25rem;
margin-bottom: 1.6rem;
line-height: 1.4;
}
.paragraph-italics {
font-style: italic;
font-family: “GMsans-Web-Regular-Italic”;
}
.paragraph-emphasis {
font-family: “Pratt-Bold”;
font-weight: 700;
}
.paragraph-hyperlink {
border-bottom: 1px solid;
color: #333;
text-decoration: none;
}
.paragraph-hyperlink:hover {
border-bottom: 1px solid;
color: #da161f;
text-decoration: none;
}
.hero-video {
position: relative;
overflow: hidden;
background: #000;
}
.pinned-video {
position: sticky;
top: 0;
width: 100%;
height: 100%;
background: #000;
margin: 0 auto;
overflow: hidden;
z-index: 1;
}
.pinned-video video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
margin: 0 auto;
}
.fade-overlay {
position: sticky;
top: 0;
height: 50vh;
pointer-events: none;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #000;
}
.hero-content {
position: relative;
max-width: 800px;
margin: 0;
font-size: 1.25rem;
line-height: 1.4;
padding: 1rem;
border-radius: 4px;
z-index: 3;
color: #fff;
}
.hero-content p {
margin-bottom: 0.8rem;
}
/* STORY BLOCKS */
.story-block {
margin: 0 0 1rem 0;
padding-top: 1rem;
border-top: 1px solid #eee;
min-height: 80vh;
}
.content-split {
display: flex;
gap: 5.5rem;
align-items: flex-start;
}
.story-block:first-of-type {
margin-top: 40px;
}
@media (min-width: 1024px) {
.l-grid–article-no-sidebar {
–gutter: 7.5rem;
–body-max-width: 95rem;
}
}
@media (min-width: 1024px) {
.story-block:nth-of-type(even) .content-split {
flex-direction: row-reverse;
}
}
@media (max-width: 1023px) {
.fade-overlay {
height: 60vh;
}
h3 {
font-size: 2rem;
line-height: 42px;
}
.image-block {
position: static !important;
}
.sticky {
position: static !important;
}
}
.text-block {
flex: 1 1 50%;
}
.image-block {
flex: 1 1 50%;
position: sticky;
top: 5rem;
align-self: flex-start;
}
.sticky {
width: 100%;
margin-top: 1rem;
height: auto;
}
@keyframes stickyFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.sticky-entering {
animation: stickyFadeIn 0.4s ease;
}
.l-grid–article-no-sidebar .l-grid–main .l-article>:not(.rawHtml):not(.c-article-body__subheading-v2) {
max-width: 700px;
width: 100%;
margin: 0 auto;
padding-top: 18px;
padding-bottom: 0;
margin-bottom: 0;
max-width: 700px;
}
@media (max-width: 1023px) {
.content-split {
flex-direction: column;
gap: 1rem;
}
.image-block,
.small-image {
text-align: center;
}
.image-block img,
.small-image img {
display: block !important;
margin: 0 auto;
position: static !important;
}
.image-block figcaption {
display: block !important;
}
.image-block {
margin: 0 -2rem;
width: calc(100% + 4rem);
max-width: none;
}
.image-block img {
width: 100%;
max-width: none;
height: auto;
display: block !important;
}
.l-grid–article-no-sidebar .l-grid–main .l-article>:not(.rawHtml):not(.c-article-body__subheading-v2) {
padding: 0 1.5rem;
padding-top: 18px;
}
}
@media (max-width: 1023px) {
.story-block {
margin: 0 -2rem;
width: calc(100% + 4rem);
max-width: none;
}
.story-block>.content-split {
padding: 0 1.5rem;
}
.image-block {
margin: 0;
width: 100%;
max-width: none;
}
.gi-header__caption-cutline {
padding: 1rem 24px 1rem 24px;
max-width: 700px;
}
}
.gi-header__caption {
padding: 1rem 0 1rem 0;
}
.gi-header-caption-cont {
width: 100%;
padding: 0;
}
figure.small-image {
max-width: 450px;
margin: 1rem auto;
}
figcaption {
font-size: 1rem;
color: #333333;
line-height: 1.5;
margin-top: 0.5rem;
text-align: left;
font-family: “GMsans-Web-Regular”, Helvetica, Arial, sans-serif;
}
.figcap-credit {
display: block;
text-transform: uppercase;
margin-top: .5rem;
font-size: .875rem;
padding-bottom: 1rem;
}
.fade-in {
transition: opacity 0.8s ease, transform 0.8s ease;
opacity: 1;
transform: translateY(0);
}
.fade-in-hidden {
opacity: 0;
transform: translateY(2rem);
}
/* FOOTER */
.site-footer {
border-top: 1px solid #ddd;
text-align: center;
font-size: 1rem;
color: #777;
padding: 1rem 0;
}