:root {
  color-scheme: dark;
  --bg: #1e1e1e;
  --surface: #272727;
  --surface-dark: #1f1f1f;
  --border: #444;
  --text: #ddd;
  --muted: #ad8f79;
  --blue: #3779b2;
  --blue-bright: #69b0e0;
  --orange: #f68b1e;
  --wrap: 1170px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Ubuntu", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.866;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; transition: color .25s ease; }
a:hover, a:focus-visible { color: var(--blue-bright); }
img { display: block; max-width: 100%; height: auto; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg .cutout { fill: var(--bg); stroke: none; }
button, input { font: inherit; }
::selection { background: rgba(55, 121, 178, .7); }

.wrap { width: min(var(--wrap), calc(100% - 44px)); margin-inline: auto; }
.screen-reader, .skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus { z-index: 100; top: 8px; left: 8px; width: auto; height: auto; clip: auto; padding: 8px 14px; background: #fff; color: #111; }

.topbar { height: 44px; background: #fff; color: #777; box-shadow: 0 0 4px #eee; }
.topbar-inner { display: flex; align-items: center; height: 44px; }
.social-nav { display: flex; align-items: center; gap: 19px; }
.social-nav a { display: grid; place-items: center; min-width: 14px; color: #aaa; font-weight: 700; line-height: 1; }
.social-nav a:hover { color: var(--blue); }
.social-nav svg { font-size: 15px; }
.site-search { margin-left: auto; display: flex; height: 44px; align-items: center; }
.site-search input { width: 75px; padding: 0; border: 0; outline: 0; background: transparent; color: #444; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }
.site-search input::placeholder { color: #aaa; opacity: 1; }
.site-search button { border: 0; padding: 5px 0 5px 10px; background: transparent; color: #aaa; cursor: pointer; }
.mobile-toggle { display: none; border: 0; padding: 0; background: transparent; color: #777; cursor: pointer; }

.brand-area { height: 122px; }
.brand-inner { height: 100%; display: flex; justify-content: center; align-items: center; }
.brand img { width: 600px; max-height: 80px; object-fit: contain; }
.brand span { font-size: 56px; color: var(--blue); font-weight: 700; letter-spacing: -.03em; }

.primary-nav { height: 52px; background: var(--surface-dark); }
.menu { height: 52px; display: flex; justify-content: center; margin-block: 0; padding: 0; list-style: none; }
.menu-item { position: relative; }
.menu-item > a { display: block; height: 52px; padding: 0 20px; color: var(--blue); font-size: 14px; font-weight: 500; line-height: 52px; letter-spacing: 1.25px; text-transform: uppercase; }
.menu-item:hover > a, .menu-item:focus-within > a { color: var(--blue-bright); }
.caret { display: inline-block; margin-left: 5px; font-size: 14px; transform: translateY(-1px); }
.submenu { position: absolute; z-index: 20; top: 52px; left: 0; display: none; min-width: 230px; margin: 0; padding: 10px 0; list-style: none; background: #ddd; box-shadow: 0 8px 25px rgba(0,0,0,.35); }
.has-children:hover .submenu, .has-children:focus-within .submenu { display: block; }
.submenu a { display: block; padding: 8px 22px; color: var(--blue); line-height: 1.5; }
.submenu .view-all { margin-top: 8px; padding-top: 8px; border-top: 1px solid #bbb; }

.site-main { display: grid; grid-template-columns: minmax(0, 800px) minmax(300px, 400px); width: min(1200px, calc(100% - 44px)); margin-top: 65px; margin-bottom: 100px; }
.main-content { min-width: 0; padding-inline: 15px; }
.post-card { margin: 0 0 15px; padding: 20px; overflow: hidden; border: 1.5px solid var(--border); border-radius: 5px; background: var(--surface); }
.post-meta { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 1.1px; text-transform: uppercase; }
.post-meta .category { color: var(--blue); }
.meta-sep { margin: 0 8px; color: #777; }
.date-link, .post-meta time { color: var(--muted); }
.post-title { max-width: 92%; margin: 18px 0 28px; color: var(--blue-bright); font-size: 27px; line-height: 1.4; font-weight: 700; }
.post-title a { color: inherit; }
.post-title a:hover { color: var(--blue-bright); }
.featured-image { display: block; margin: 0 -20px 40px; }
.featured-image img { width: 100%; max-height: 560px; object-fit: cover; }
figure.featured-image { margin-top: 0; }
.featured-video { position: relative; margin: 0 -20px 40px; padding-top: 56.25%; background: #000; }
.featured-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-summary, .post-content { color: var(--text); font-size: 16px; line-height: 1.7; }
.post-summary > :first-child, .post-content > :first-child { margin-top: 0; }
.post-summary p { color: var(--text); }
.post-summary .read-more { display: inline-block; margin-top: 5px; color: var(--orange); }
.post-summary .read-more::after { content: ""; display: block; width: 52%; height: 1px; margin-top: 3px; background: var(--blue); transition: width .25s ease; }
.post-summary .read-more:hover::after { width: 100%; }

.post-content h2, .post-content h3, .post-content h4 { color: #66a5d9; line-height: 1.3; }
.post-content h2 { margin-top: 1.8em; font-size: 25px; }
.post-content h3 { margin-top: 1.6em; font-size: 21px; }
.post-content a { color: var(--blue); }
.post-content blockquote { margin: 1.5em 0; padding: .35em 1.5em; border-left: 3px solid var(--blue); color: #eee; }
.post-content pre { padding: 20px; overflow-x: auto; border-radius: 3px; background: #282c34; color: #abb2bf; }
.post-content :not(pre) > code { padding: .15em .35em; background: #282c34; color: #abb2bf; }
.post-content .chroma { color: #abb2bf; background: #282c34; }
.post-content .chroma .c,
.post-content .chroma .ch,
.post-content .chroma .cm,
.post-content .chroma .c1,
.post-content .chroma .cs,
.post-content .chroma .cp,
.post-content .chroma .cpf { color: #7f848e; font-style: italic; }
.post-content .chroma .k,
.post-content .chroma .kc,
.post-content .chroma .kd,
.post-content .chroma .kn,
.post-content .chroma .kp,
.post-content .chroma .kr,
.post-content .chroma .ow { color: #c678dd; }
.post-content .chroma .kt,
.post-content .chroma .nc,
.post-content .chroma .nn,
.post-content .chroma .nb,
.post-content .chroma .bp { color: #e5c07b; }
.post-content .chroma .nf,
.post-content .chroma .nd { color: #61afef; }
.post-content .chroma .s,
.post-content .chroma .sa,
.post-content .chroma .sb,
.post-content .chroma .sc,
.post-content .chroma .dl,
.post-content .chroma .sd,
.post-content .chroma .s1,
.post-content .chroma .s2,
.post-content .chroma .se,
.post-content .chroma .sh,
.post-content .chroma .si,
.post-content .chroma .sx,
.post-content .chroma .sr,
.post-content .chroma .ss { color: #98c379; }
.post-content .chroma .m,
.post-content .chroma .mb,
.post-content .chroma .mf,
.post-content .chroma .mh,
.post-content .chroma .mi,
.post-content .chroma .il,
.post-content .chroma .mo { color: #d19a66; }
.post-content .chroma .o { color: #56b6c2; }
.post-content .chroma .ne,
.post-content .chroma .nt { color: #e06c75; }
.post-content table { width: 100%; border-collapse: collapse; }
.post-content th, .post-content td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.post-tags span { margin-right: 5px; color: #aaa; text-transform: uppercase; }
.post-tags a { padding: 2px 9px; border: 1px solid #000; background: #777; color: #fff; font-size: 12px; }
.single-post .post-title { max-width: 100%; font-size: 36px; }
.post-subtitle { margin: -16px 0 28px; color: #aaa; font-size: 16px; font-style: italic; }

.sidebar { min-width: 0; padding: 20px 15px 20px 30px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); }
.widget { margin-bottom: 50px; }
.widget:last-child { margin-bottom: 0; }
.widget-title { margin: 0 0 30px; padding: 0 0 9px; border-bottom: 1px solid #aaa; color: var(--text); font-size: 20px; line-height: 30px; }
.link-list { margin: 0; padding-left: 40px; }
.link-list li { margin-bottom: 8px; padding-left: 0; color: #5e5e5e; }
.taxonomy-list { padding-left: 0; list-style: none; }
.taxonomy-list li { display: flex; justify-content: space-between; border-bottom: 1px solid #343434; }
.taxonomy-list span { color: #777; }
.recent-posts { margin: 0; padding: 0; list-style: none; }
.recent-posts li { margin-bottom: 18px; }
.recent-posts a { display: block; color: var(--blue); line-height: 1.5; }
.recent-posts span { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }

.archive-header { margin-bottom: 25px; padding: 20px; background: #1d1d1d; }
.archive-kicker { color: #999; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.archive-header h1 { margin: 10px 0 0; color: var(--blue-bright); font-size: 30px; }
.archive-description { margin-top: 10px; color: #bbb; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 62px; margin-top: 30px; padding: 0 20px; background: var(--surface-dark); }
.pagination > :last-child { text-align: right; }
.pagination a { color: var(--blue); font-size: 17px; }
.page-number { color: #777; font-size: 12px; }
.error-page { min-height: 350px; }

.site-footer { background: #000; }
.footer-rule { height: 156px; border-bottom: 1px solid #161616; }
.footer-main { min-height: 272px; }
.footer-inner { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 70px; color: #b4b4b4; font-size: 13px; }
.footer-social { display: flex; gap: 20px; margin-bottom: 20px; }
.footer-social a { display: grid; place-items: center; min-width: 18px; color: var(--blue); font-weight: 700; }
.footer-social svg { font-size: 17px; }
.back-to-top { position: absolute; right: 0; top: 75px; color: #b4b4b4; text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 900px) {
  .menu-item > a { padding-inline: 12px; font-size: 12px; }
  .site-main { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
  .sidebar { padding-left: 22px; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 44px); }
  .topbar-inner { position: relative; }
  .mobile-toggle { display: grid; place-items: center; width: 18px; margin-right: 18px; }
  .mobile-toggle svg { font-size: 17px; }
  .social-nav { display: none; }
  .site-search { flex: 1; justify-content: flex-end; }
  .site-search input { width: 95px; }
  .brand-area { height: 95px; }
  .brand img { width: 100%; max-height: 55px; }
  .primary-nav { display: none; height: auto; border-top: 1px solid #333; }
  .primary-nav.is-open { display: block; }
  .menu { display: block; width: 100%; height: auto; }
  .menu-item > a { height: 48px; padding: 0 22px; border-bottom: 1px solid #333; font-size: 13px; line-height: 48px; }
  .submenu { position: static; display: none; box-shadow: none; }
  .has-children.submenu-open .submenu { display: block; }
  .submenu a { padding-left: 40px; }
  .site-main { display: block; width: 100%; margin-top: 65px; margin-bottom: 80px; padding: 0 22px; }
  .main-content { padding: 0; }
  .post-card { padding: 20px 0; }
  .post-header > :not(.featured-image):not(.featured-video), .post-summary, .post-content, .post-tags { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .post-meta, .post-title, .post-summary, .post-content, .post-tags { width: calc(100% - 0px); }
  .post-title { max-width: 88%; margin-left: 0; font-size: 20px; line-height: 1.4; }
  .featured-image, figure.featured-image, .featured-video { margin-left: 0; margin-right: 0; }
  .post-summary, .post-content { font-size: 15px; }
  .single-post .post-title { font-size: 27px; }
  .sidebar { width: calc(100% + 30px); margin-top: 65px; margin-left: -15px; padding: 20px 15px 20px 30px; }
  .archive-header { margin-left: 0; margin-right: 0; }
  .footer-rule { height: 90px; }
  .footer-main { min-height: 235px; }
  .back-to-top { position: static; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}