/* values and breakpoints mirror the astra, elementor and essential addons css
   of the wordpress site: astra header 921px, astra layout 1200/993/768/544px,
   elementor home 1024/767px, timeline 992/767/479px */
:root {
  --text: #4d4d4d;
  --heading: #2d5b62;
  --link: #bc9332;
  --link-hover: #bcac84;
  --gold: #c7a044;
  --bar: #b09453;
  --bg: #f5f5f5;
  --border: #e5e5e5;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Josefin Sans", system-ui, sans-serif;
}

*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; font: 16px/1.85 var(--serif); color: var(--text); background: var(--bg); }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); font-weight: 400; color: var(--heading); line-height: 1.3; margin: 1.2em 0 0.5em; }
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 26px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
p, ul, ol { margin: 0 0 1.6em; }
blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 4px solid var(--gold); font-style: italic; }
hr { width: 100px; margin: 2em auto; border: 0; border-top: 2px solid; }
hr.dots { width: auto; border: 0; text-align: center; }
hr.dots::before { content: ". . ."; letter-spacing: 1em; color: var(--text); }
::selection { background: var(--heading); color: #fff; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.home .container { max-width: 1140px; padding-inline: 10px; }
.plain { list-style: none; margin: 0; padding: 0; }

.button {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid var(--gold);
  border-radius: 50px;
  background: var(--gold);
  color: #fff;
  font: 600 15px/1 Montserrat, var(--sans);
  box-shadow: 0 20px 10px -20px #a5a3a0;
}
.button:hover { background: #fff; color: var(--bar); border-color: var(--bar); }

/* header */
.site-header { background: #fff; border-bottom: 1px solid var(--border); text-align: center; padding-top: 20px; }
.logo img { display: block; margin: 0 auto; width: 240px; height: 240px; }
.site-nav { padding: 57px 0 19px; font-size: 14px; }
.menu { display: flex; justify-content: center; gap: 25px; }
.menu a { color: var(--text); }
.menu a:hover, .menu a[aria-current], .menu .search-icon { color: var(--link); }
.menu-button { display: none; }
svg { vertical-align: middle; }

/* home */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding-top: 50px; padding-bottom: 50px; }
.hero h1 { font: 500 40px/1.3 Dosis, var(--sans); text-transform: uppercase; color: #bb9b51; margin-top: 0; }
.hero p { font-size: 21px; color: #54595f; text-align: justify; margin-bottom: 1.4em; }
.hero .button { margin-top: 30px; }
.episodes h2 { text-align: center; font-size: 30px; margin: 20px 0 30px; }
.timeline { display: grid; grid-template-columns: 1fr 1fr; position: relative; padding-bottom: 40px; }
.timeline::before { content: ""; position: absolute; top: 100px; bottom: 105px; left: calc(50% - 1px); border-left: 2px solid rgba(83, 85, 86, 0.2); }
.episode {
  position: relative;
  display: block;
  height: 320px;
  margin: 30px 40px 30px 0;
  border: 8px solid #e5eaed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  background: linear-gradient(45deg, #3f3f46, #05abe0);
}
.episode:nth-child(even) { margin: 30px 0 30px 40px; }
/* bullet on the center line and an arrow pointing at it */
.episode::after { content: ""; position: absolute; z-index: 3; width: 20px; height: 20px; border: 5px solid #fff; border-radius: 50%; background: #9fa9af; box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.1); }
.episode:nth-child(odd)::after { right: -59px; top: 22px; }
.episode:nth-child(even)::after { left: -59px; top: 262px; }
.episode::before { content: ""; position: absolute; border: 15px solid transparent; }
.episode:nth-child(odd)::before { right: -38px; top: 9px; border-left-color: #e5eaed; }
.episode:nth-child(even)::before { left: -38px; top: 249px; border-right-color: #e5eaed; }
.episode img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; display: block; }
.episode span { position: absolute; left: 25px; right: 25px; bottom: 55px; color: #fff; font: 700 13px/24px var(--sans); letter-spacing: 1px; text-transform: uppercase; }
.episode time { display: none; }

/* blog layout */
.with-sidebar { display: grid; grid-template-columns: 70% 30%; padding-top: 4em; padding-bottom: 4em; }
.box { background: #fff; padding: 5.34em 6.67em; border-bottom: 1px solid var(--border); }
.entry-title { font-size: 35px; margin: 20px 0 5px; }
.box > .entry-title:first-child { margin-top: 0; }
h1.entry-title { font-size: 30px; }
.entry-title a { color: var(--text); }
.meta { font-size: 16px; color: var(--link); margin: 0 0 20px; }
.featured { display: block; width: 100%; }
.content img { display: block; margin: 1em auto; }
/* astra's archive header shares the white column with the first post */
.archive-title { font-size: 35px; margin: 0 0 30px; text-transform: capitalize; }
.archive-title.box { margin: 0; padding: 48px; border: 0; color: var(--link); }
.video { aspect-ratio: 16 / 9; margin: 1.5em 0; }
.video iframe { width: 100%; height: 100%; border: 0; }
.signup { display: grid; gap: 12px; max-width: 420px; margin: 1.5em 0; }
.signup label { display: grid; font-size: 14px; }
.signup input { padding: 8px; border: 1px solid #ddd; font: inherit; }
.signup .honeypot { position: absolute; left: -5000px; }
.signup .button { justify-self: start; cursor: pointer; }
#search-status { margin: 15px 0 30px; font-size: 14px; }
#search-results { list-style: none; padding: 0; font-size: 15px; }
#search-results li { margin-bottom: 1.4em; }
#search-results a { font: 22px/1.3 var(--sans); color: var(--heading); }
.pager { display: flex; justify-content: space-between; padding: 20px 0; }

.sidebar { padding-left: 60px; margin-bottom: 2.5em; line-height: 2; }
.sidebar h2 { font-size: 22px; margin: 0 0 20px; color: var(--text); }
.sidebar section { margin-bottom: 3.5em; }
.sidebar li { margin-bottom: 0.4em; }
.tags a { display: inline-block; border: 1px solid var(--border); padding: 2px 10px; margin: 0 4px 8px 0; line-height: 1.6; }
.tags a:hover { background: var(--link); border-color: var(--link); color: #000; }

.search-form { display: flex; border: 1px solid #ddd; background: #fff; }
.search-form input { flex: 1; border: 0; padding: 10px 12px; font: inherit; font-size: 14px; min-width: 0; }
.search-form button { border: 0; background: none; color: var(--text); padding: 0 12px; cursor: pointer; }

/* footer */
.widgets { background: #0d1f26 url(img/footer.jpg) center bottom / cover no-repeat; border-top: 3px solid #ae914e; color: #fff; padding: 70px 0 60px; }
.widgets .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.widgets h2 { color: #fff; font-size: 20px; margin: 0 0 20px; }
.widgets a { color: #fff; font-size: 15px; }
.social { display: flex; gap: 15px; align-items: flex-start; }
.bar { background: var(--bar); color: #fff; text-align: center; margin: 0; padding: 40px 20px; font-size: 15px; }

@media (min-width: 1367px) {
  .episode span { font-size: 20px; }
}

@media (max-width: 1200px) {
  .box { padding: 3.34em 2.4em; }
}

@media (max-width: 1024px) {
  .home .container { padding-inline: 30px; }
}

@media (max-width: 993px) {
  .sidebar { padding-left: 30px; }
}

/* timeline drops its center line and shows dates under two columns of cards */
@media (max-width: 992px) {
  .timeline { row-gap: 30px; padding-top: 15px; }
  .timeline::before, .episode::before, .episode::after { display: none; }
  .episode, .episode:nth-child(even) { width: 90%; margin: 0 10px 0 0; justify-self: end; padding-bottom: 30px; }
  .episode:nth-child(even) { margin: 0 0 0 10px; justify-self: start; }
  .episode span { bottom: 65px; font-size: 13px; line-height: 1.2; }
  .episode time { display: block; position: absolute; left: 0; right: 0; top: 275px; height: 30px; line-height: 30px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; text-align: center; text-transform: uppercase; }
}

@media (max-width: 921px) {
  .site-nav { padding: 40px 0 2px; }
  .menu-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 100px; background: #f7f7f7; color: #000; font-size: 16px; font-weight: 700; cursor: pointer; }
  .menu { display: none; }
  #menu-toggle:checked ~ .menu { display: block; margin-top: 10px; border-top: 1px solid var(--border); text-align: left; }
  .menu a { display: block; padding: 0 20px; line-height: 3; border-bottom: 1px solid #eaeaea; }
}

@media (max-width: 768px) {
  .with-sidebar, .widgets .container { grid-template-columns: 1fr; }
  .with-sidebar { row-gap: 4em; }
  .sidebar { padding: 0 1em; }
  .box { padding: 1.5em 2.14em; }
  h1, .archive-title { font-size: 30px; }
  h2, .episodes h2 { font-size: 25px; }
  h3 { font-size: 20px; }
}

@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 30px; }
  .hero .button { margin-top: 26px; }
  .timeline { grid-template-columns: 1fr; row-gap: 20px; }
  .episode, .episode:nth-child(even) { margin: 0 auto; justify-self: center; }
}

@media (max-width: 544px) {
  .with-sidebar { padding-left: 0.54em; padding-right: 0.54em; }
  .box { padding: 1.5em 1em; }
  .archive-title { font-size: 28px; }
  h1.entry-title { font-size: 25px; }
}

@media (max-width: 479px) {
  .episode, .episode:nth-child(even) { width: 95%; height: 250px; }
  .episode time { top: 205px; }
}