:root {
  --color-white: #ffffff;
  --color-primary: #385d8d;
  --color-primary-hover: #2d4a6f;
  --color-dark: #132333;

  --color-background: var(--color-white);
  --color-section-alt: #f4f3f8;
  --color-footer: var(--color-dark);

  --color-text: #1a1c1f;
  --color-text-muted: #43474f;
  --color-text-on-dark: var(--color-white);
  --color-text-on-primary: var(--color-white);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);

  --color-border: #e2e2e6;
  --color-border-strong: #c3c6d0;

  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
  --font-logo: "Aller", var(--font-body);

  --font-size-label: 0.75rem;
  --font-size-body: 1rem;
  --font-size-body-lg: 1.25rem;
  --font-size-headline-md: 2rem;
  --font-size-headline-lg: 3rem;
  --font-size-headline-xl: 5rem;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-body: 1.6;
  --line-height-headline: 1.2;
  --line-height-headline-xl: 1.1;
  --line-height-label: 1;

  --letter-spacing-label: 0.05em;
  --letter-spacing-headline-lg: -0.01em;
  --letter-spacing-headline-xl: -0.02em;

  --layout-max-width: 1440px;
  --layout-max-width-blog: 1000px;
  --spacing-unit: 8px;
  --spacing-gutter: 32px;
  --spacing-element: 24px;
  --spacing-section: 120px;
  --spacing-header-y: 24px;
  --spacing-header-x: var(--spacing-gutter);
  --spacing-posts-gap: 60px;
  --spacing-submenu: 12px;

  --admin-bar-height: 0px;
  --scroll-padding: 5rem;
  --nav-dropdown-max-height: 80vh;

  --z-header: 100;
  --z-nav-flyout: 101;
  --z-nav-dropdown: 200;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --button-padding-y: 12px;
  --button-padding-x: 24px;

  --transition-duration: 300ms;
  --transition-ease: ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-background);
}

html {
  scroll-padding-top: var(--scroll-padding);
}

html.admin-bar,
body.admin-bar {
  --admin-bar-height: var(--wp-admin--admin-bar--height, 32px);
  --scroll-padding: 7rem;
}

#main {
  flex: 1;
}

a {
  color: var(--color-link);
  transition: color var(--transition-duration) var(--transition-ease);
}

a:hover {
  color: var(--color-link-hover);
}

p {
  margin: 0 0 15px;
}

.wrap {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-gutter);
  padding-right: var(--spacing-gutter);
}

body.blog .wrap,
body.single-post .wrap,
body.archive .wrap,
body.search .wrap {
  max-width: var(--layout-max-width-blog);
}

#header {
  position: sticky;
  top: var(--admin-bar-height);
  z-index: var(--z-header);
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-header-y) var(--spacing-header-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-element);
}

body.admin-bar #header {
  top: var(--admin-bar-height, 32px);
}

#header .custom-logo,
#header .site-logo {
  display: block;
  max-width: 250px;
  font-family: var(--font-logo);
  height: auto;
}

#header .custom-logo img,
#header .site-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark);
}

#primary-navigation {
  min-width: 0;
  max-width: 100%;
}

#primary-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-element);
  list-style: none;
  margin: 0;
  padding: 0;
}

#primary-navigation a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

#primary-navigation li {
  position: relative;
}

#primary-navigation .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-nav-flyout);
  min-width: 12rem;
  flex-direction: column;
  padding: var(--spacing-element);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgb(19 35 51 / 0.12);
}

#primary-navigation li:hover > .sub-menu,
#primary-navigation li:focus-within > .sub-menu {
  display: flex;
}

header.blog {
  padding: var(--spacing-section) 0;
  text-align: center;
  background: var(--color-section-alt);
}

header.blog h1 {
  margin: 0;
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-headline);
  letter-spacing: var(--letter-spacing-headline-lg);
}

header.blog p {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
}

.intro,
.posts {
  padding: var(--spacing-section) 0;
}

.posts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-posts-gap);
}

.posts.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-element);
}

.post img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.posts .post > a:first-child img {
  max-height: 420px;
  object-fit: cover;
}

.post h2,
.post h3 {
  margin: var(--spacing-element) 0 0.5rem;
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.post h2 a,
.post h3 a {
  color: inherit;
  text-decoration: none;
}

.post .meta {
  margin-bottom: 0.75rem;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.post .meta a {
  color: var(--color-primary);
  text-transform: none;
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
}

.post > p {
  color: var(--color-text-muted);
}

.post.featured {
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.post.featured > div {
  background: linear-gradient(to top, rgb(19 35 51 / 0.92), rgb(19 35 51 / 0.4));
  padding: var(--spacing-section) var(--spacing-gutter);
  max-width: 36rem;
  color: var(--color-text-on-dark);
}

.post.featured h2 {
  margin: 0 0 1rem;
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-bold);
}

.post.featured > div > p {
  color: rgb(255 255 255 / 0.85);
}

.post.featured > div > p:first-child {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.post.featured a {
  color: var(--color-text-on-dark);
}

header.hero {
  background-size: cover;
  background-position: center;
}

header.hero > .wrap {
  background: linear-gradient(to top, rgb(19 35 51 / 0.92), rgb(19 35 51 / 0.4));
  padding: var(--spacing-section) var(--spacing-gutter);
  color: var(--color-text-on-dark);
}

header.hero h1 {
  margin: 0 0 1rem;
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-bold);
}

header.hero p {
  color: rgb(255 255 255 / 0.85);
}

header.hero p:first-child {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

header.hero a {
  color: var(--color-text-on-dark);
}

article.post > .wrap {
  padding: var(--spacing-section) 0;
}

article.post > .wrap > header h1 {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-bold);
}

article.post > .wrap > header p {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

/* article.post .entry {
  max-width: 48rem;
} */

aside.post-author {
  padding: var(--spacing-section) 0;
  background: var(--color-section-alt);
}

aside.post-author .wrap {
  display: flex;
  gap: var(--spacing-element);
  align-items: flex-start;
}

aside.post-author img {
  border-radius: var(--radius-md);
}

aside.post-author h2 {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-semibold);
}

aside.post-author p {
  color: var(--color-text-muted);
}

aside.post-author .meta,
aside.post-author .social {
  margin-bottom: 0.75rem;
  font-size: var(--font-size-label);
}

aside.post-author .wrap a {
  font-weight: var(--font-weight-semibold);
}

section.search {
  padding: var(--spacing-section) 0;
}

section.search form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--spacing-element);
}

section.search input[type="search"] {
  flex: 1 1 16rem;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}

section.search button {
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-dark);
  color: var(--color-text-on-dark);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

section.search ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

section.search li {
  padding: var(--spacing-element) 0;
  border-bottom: 1px solid var(--color-border);
}

section.search li:last-child {
  border-bottom: 0;
}

section.search h2 {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-semibold);
}

section.search h2 a {
  color: inherit;
  text-decoration: none;
}

section.not-found {
  padding: var(--spacing-section) 0;
  text-align: center;
  background: var(--color-dark);
  color: var(--color-text-on-dark);
}

section.not-found h1 {
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-bold);
}

section.not-found a {
  color: var(--color-text-on-dark);
  font-weight: var(--font-weight-semibold);
}

#comments {
  padding: var(--spacing-section) 0;
}

#comments h2 {
  margin: 0 0 var(--spacing-element);
  font-size: var(--font-size-headline-md);
  font-weight: var(--font-weight-semibold);
}

.navigation.pagination {
  margin-top: var(--spacing-section);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--color-background);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text);
  display: block;
  font-size: var(--font-size-body);
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}