@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* Variables */
:root {
 --blue: #0078D4;
 --dark: #333;
 --muted: #777;
 --lightGrey: #EEE;
}

/* Reset & Base */
*,
*::before,
*::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: Georgia, serif;
 color: var(--dark);
 line-height: 1.6;
}
.container {
 max-width: 768px;
 margin: 0 auto;
 padding: 0 16px 8px 16px;
}

/* Header */
.advertorial {
 font-size: 10px;
 text-transform: uppercase;
 color: var(--muted);
 text-align: center;
}
.site-name {
 font-family: 'Playfair Display';
 font-size: 20px;
 font-weight: bold;
 text-transform: uppercase;
 margin: 4px 0;
 text-align: center;
}
.nav {
 font-size: 16px;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: var(--blue);
 font-weight: 700;
 margin-bottom: 12px;
}
.title-divider {
 border: none;
 height: 3px;
 background: var(--blue);
 margin: 0 16px 24px;
}
.article-title {
 font-family: 'Playfair Display';
 font-size: 2.5rem;
 margin: 0 0 12px;
 line-height: 1.2;
 font-weight: 600;
}
.subtitle p {
 font-size: 16px;
 color: var(--muted);
 margin: 0;
 line-height: 18px;
 font-style: italic;
 font-family: 'Domine';
}

/* Article */
article.container {
 margin-bottom: 16px;
}
article img {
 width: 100%;
 height: auto;
 margin: 12px 0;
 border-radius: 4px;
}
article p {
 font-size: 1.25rem;
 font-family: 'Domine';
 margin-top: 0;
 margin-bottom: 1em;
}
.article-link {
 color: var(--blue);
 text-decoration: none;
 font-weight: bold;
}
.watch-now-btn {
 display: block;
 width: 100%;
 padding: 15px 0;
 background: rgb(237, 133, 47);
 font-family: "Domine", sans-serif;
 font-weight: bold;
 font-size: 2rem;
 color: #fff;
 text-align: center;
 text-decoration: none;
 border-radius: 20px;
 margin-top: 20px;
}
.separator {
 height: 1px;
 background: var(--lightGrey);
 margin: 40px 0;
}

article blockquote {
 margin-left: 5px;
 padding-left: 20px;
 border-left: #0078D4 solid 3px;
 font-style: italic;
 font-size: 1.25rem;
}

/* Footer */
footer {
 border-top: 1px solid var(--lightGrey);
}
.footer-inner {
 padding: 24px;
 text-align: center;
 color: var(--muted);
}
.footer-inner .links a {
 color: var(--blue);
 text-decoration: underline;
 margin: 0 4px;
}
.footer-inner .links a:hover {
 text-decoration: none;
}

.show-746 {
 display: none;
}

@media (max-width: 746px) {
 .hide-746 {
 display: none;
 }
 
 .show-746 {
 display: inline-block;
 }
 
 div.container.footer-inner {
 padding: 24px 12px;
 }
}

/* Responsive */
@media (max-width: 480px) {
 .article-title { font-size: 1.5rem; }
 .site-name { font-size: 18px; }
}