/**
 * @file
 * Ekonopolitik. Editorial, serif-first, hand written — no build step.
 */

:root {
  --ep-ink: #1a1a1a;
  --ep-black: #111;
  --ep-teal: #0d7d8c;
  --ep-teal-dark: #085a66;
  --ep-page: #f7f7f7;
  --ep-rule: #dcdcdc;
  --ep-quote-bg: #ececec;
  --ep-measure: 70ch;
  --ep-hero-height: 60vh;
  --ep-sidebar-width: 17rem;
  --ep-column-gap: 3rem;
  --ep-serif: Georgia, "Charter", "Bitstream Charter", "Iowan Old Style", "Times New Roman", serif;
  --ep-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--ep-page);
  color: var(--ep-ink);
  font-family: var(--ep-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ep-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--ep-teal-dark);
}

img {
  max-width: 100%;
  height: auto;
}

/* Layout ------------------------------------------------------------------ */

.layout-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  /* The hero breaks out of the sidebar layout with a 100vw width; without this
     a scrollbar would turn that into a horizontal scroll. */
  overflow-x: hidden;
}

.ep-main {
  display: block;
  flex: 1 0 auto;
  width: 100%;
}

/* The centred reading column. */
.ep-shell {
  width: 100%;
  max-width: calc(var(--ep-measure) + 6rem);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Wider shell for pages that carry a sidebar. */
.ep-main--with-sidebar .ep-columns {
  display: flex;
  max-width: 76rem;
  margin: 0 auto;
  gap: var(--ep-column-gap);
  align-items: flex-start;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.ep-main--with-sidebar .ep-columns > .ep-content {
  flex: 1 1 auto;
  min-width: 0;
}

.ep-main--with-sidebar .ep-columns > .ep-content .ep-shell {
  padding-right: 0;
  padding-left: 0;
}

/* The content column is off centre because of the sidebar, so the full-bleed
   hero is pushed back by half the sidebar plus half the gap to sit centred on
   the viewport. The columns wrapper itself is centred, which makes that offset
   a constant. */
.ep-main--with-sidebar .ep-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw + (var(--ep-sidebar-width) + var(--ep-column-gap)) / 2);
}

/* A full-bleed hero runs across the sidebar column too, so on hero pages the
   sidebar starts below it. */
.ep-main--hero .ep-sidebar {
  margin-top: calc(var(--ep-hero-height) + 2.75rem);
}

.ep-sidebar {
  flex: 0 0 var(--ep-sidebar-width);
  font-family: var(--ep-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (max-width: 60rem) {
  .ep-main--with-sidebar .ep-columns {
    display: block;
  }

  /* Stacked: the content column fills the wrapper, so no offset is needed and
     the sidebar already sits below the article. */
  .ep-main--with-sidebar .ep-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .ep-main--hero .ep-sidebar {
    margin-top: 0;
  }

  .ep-sidebar {
    margin-top: 3rem;
  }
}

/* Header ------------------------------------------------------------------ */

.ep-header {
  background: var(--ep-black);
  background-image: linear-gradient(90deg, var(--ep-black) 0%, #14454c 45%, var(--ep-teal) 100%);
  color: #fff;
}

.ep-header__inner {
  display: flex;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-sizing: border-box;
}

.ep-header a {
  color: #fff;
  text-decoration: none;
}

.ep-branding {
  display: flex;
  align-items: center;
}

.ep-branding__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ep-branding__logo {
  display: block;
  height: 46px;
  width: auto;
  flex: none;
}

.ep-branding__name {
  font-family: var(--ep-serif);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* Scoped to .menu on purpose: a descendant selector such as `.ep-header nav
   ul` also catches the contextual links list that the contextual module drops
   inside the menu block, and `display: flex` there beats its `display: none`,
   pinning the edit links open over the real menu. */
.ep-header .menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.ep-header .menu a {
  font-family: var(--ep-sans);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.ep-header .menu a:hover,
.ep-header .menu a:focus,
.ep-header .menu a.is-active {
  border-bottom-color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 40rem) {
  .ep-header__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Node --------------------------------------------------------------------- */

.ep-node {
  padding: 3.5rem 0 4rem;
}

/* A hero sits directly under the site header, so the spacing moves inside. */
.ep-node--has-hero {
  padding-top: 0;
}

.ep-node--has-hero > .ep-shell {
  padding-top: 2.75rem;
}

.ep-node__title {
  font-family: var(--ep-serif);
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 0.75rem;
  color: var(--ep-black);
}

.ep-node__meta {
  font-family: var(--ep-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 2.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ep-rule);
}

.ep-node__meta .field {
  display: inline;
}

.ep-node__meta .ep-node__category {
  color: var(--ep-teal);
}

.ep-node__body {
  max-width: var(--ep-measure);
}

.ep-node__body p {
  margin: 0 0 1.5rem;
}

.ep-node__body h2,
.ep-node__body h3 {
  font-weight: 400;
  line-height: 1.25;
  margin: 2.75rem 0 1rem;
  color: var(--ep-black);
}

.ep-node__body h2 {
  font-size: 1.75rem;
}

.ep-node__body h3 {
  font-size: 1.375rem;
}

.ep-node__body sup {
  font-size: 0.7em;
  line-height: 0;
}

.ep-node__body img {
  display: block;
  margin: 2rem 0;
}

/* Drop cap on the article's opening paragraph. */
.ep-node__body > p:first-of-type::first-letter,
.ep-node__body > .field > p:first-of-type::first-letter,
.ep-node__body > .field--name-body > p:first-of-type::first-letter {
  float: left;
  font-size: 4.25rem;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  color: var(--ep-teal);
  font-weight: 400;
}

/* Pull quotes: used heavily in the body copy. */
.ep-node__body blockquote {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem;
  background: var(--ep-quote-bg);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ep-black);
}

.ep-node__body blockquote p:last-child {
  margin-bottom: 0;
}

/* Footnote links ----------------------------------------------------------- */

.ep-links {
  max-width: var(--ep-measure);
  margin: 3.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ep-rule);
}

.ep-links__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ep-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ep-links__item {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
}

/* Small link icon, inlined so the theme needs no extra request. */
.ep-links__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1rem;
  height: 1rem;
  background-color: var(--ep-teal);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.5 9.5a3 3 0 0 0 4.24 0l2.12-2.12a3 3 0 1 0-4.24-4.25l-.7.71" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M9.5 6.5a3 3 0 0 0-4.24 0L3.14 8.62a3 3 0 1 0 4.24 4.25l.7-.71" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.5 9.5a3 3 0 0 0 4.24 0l2.12-2.12a3 3 0 1 0-4.24-4.25l-.7.71" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"/><path d="M9.5 6.5a3 3 0 0 0-4.24 0L3.14 8.62a3 3 0 1 0 4.24 4.25l.7-.71" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"/></svg>') no-repeat center / contain;
}

/* Teasers and listings ----------------------------------------------------- */

.ep-teaser {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ep-rule);
}

.ep-teaser__title {
  font-family: var(--ep-serif);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.25;
  margin: 0 0 0.35rem;
}

.ep-teaser__title a {
  color: var(--ep-black);
  text-decoration: none;
}

.ep-teaser__title a:hover,
.ep-teaser__title a:focus {
  color: var(--ep-teal);
}

.ep-teaser__date {
  font-family: var(--ep-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.ep-page-title {
  font-family: var(--ep-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin: 3rem 0 1.5rem;
  color: var(--ep-black);
}

/* Sidebar blocks ----------------------------------------------------------- */

.ep-sidebar .block {
  margin-bottom: 2.5rem;
}

.ep-sidebar h2 {
  font-family: var(--ep-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ep-teal);
  margin: 0 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ep-teal);
}

.ep-sidebar ol,
.ep-sidebar ul {
  margin: 0;
  padding-left: 1.25rem;
}

.ep-sidebar li {
  margin-bottom: 0.875rem;
}

.ep-sidebar a {
  text-decoration: none;
  color: var(--ep-black);
}

.ep-sidebar a:hover,
.ep-sidebar a:focus {
  color: var(--ep-teal);
  text-decoration: underline;
}

.ep-sidebar .ep-sidebar__date {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
}

/* Footer ------------------------------------------------------------------- */

.ep-footer {
  margin-top: 4rem;
  background: var(--ep-black);
  color: #cfcfcf;
  font-family: var(--ep-sans);
  font-size: 0.875rem;
}

.ep-footer__inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.ep-footer a {
  color: #fff;
}

/* Views pager -------------------------------------------------------------- */

.pager__items {
  font-family: var(--ep-sans);
  font-size: 0.875rem;
}