/* LosTechies archive – shared index + post styles */
body.lostechies-index,
body.lostechies-archive {
  margin: 0;
  font: 15px Arial, sans-serif;
  line-height: 1.45;
  color: #111;
  background: #fff;
  overflow-x: hidden;
}

.ed-header {
  height: 61px;
  background: #111315;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}
.ed-brand {
  font: 27px Georgia, serif;
  color: #fff;
  text-decoration: none;
}
.ed-nav {
  display: flex;
  gap: 3vw;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.ed-nav a {
  color: #fff;
  text-decoration: none;
  padding: 21px 0 6px;
}
.ed-footer {
  max-width: 1240px;
  margin: auto;
  padding: 14px 30px 20px;
  border-top: 1px solid #b8b8b8;
  font-size: 12px;
}

.wr-head {
  max-width: 1240px;
  margin: auto;
  padding: 34px 30px 16px;
}
.wr-head h1 {
  font: 400 clamp(44px, 6vw, 74px) / 1 Georgia, serif;
  letter-spacing: -2px;
  margin: 0 0 10px;
}
.wr-sub {
  font-size: 17px;
  color: #333;
  margin: 0;
  max-width: 70ch;
}

.wr-filter-bar {
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 30px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wr-filter-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #666;
}
.wr-pill,
a.wr-pill-link {
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font: 12px/1.2 Arial, sans-serif;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.wr-pill.active,
a.wr-pill-link.active {
  background: #111315;
  border-color: #111315;
  color: #fff;
  font-weight: 700;
}

.lt-filter-scroll {
  position: relative;
}
@media (max-width: 768px) {
  .lt-filter-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 56px;
    mask-image: linear-gradient(to right, #000 72%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(
      to right,
      #000 72%,
      rgba(0, 0, 0, 0.35) 88%,
      transparent 100%
    );
  }
  .lt-filter-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%);
  }
  .lt-filter-scroll::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 1280px) {
  .lt-filter-scroll {
    flex-wrap: wrap;
  }
}

.wr-list {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 30px 26px;
}
.lt-year-heading {
  font: 400 22px/1.2 Georgia, serif;
  margin: 28px 0 8px;
  color: #333;
}
article.wr-row {
  padding: 17px 2px 16px;
  border-bottom: 1px solid #e3e3e3;
}
article.wr-row.wr-hide {
  display: none !important;
}
article.wr-row h3 {
  font: 400 19px/1.28 Georgia, serif;
  margin: 0 0 5px;
}
article.wr-row h3 a {
  color: inherit;
  text-decoration: none;
}
article.wr-row h3 a:hover {
  text-decoration: underline;
}
.wr-date {
  font-size: 11.5px;
  color: #8c8c8c;
  margin: 0 0 6px;
}
.wr-tag {
  display: inline-block;
  background: #e7e7e7;
  color: #444;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
}
.lt-back {
  max-width: 1240px;
  margin: 0 auto 40px;
  padding: 0 30px;
  font-size: 14px;
}
.lt-noscript-filter {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 30px 12px;
  font-size: 13px;
  color: #555;
}
.lt-noscript-filter a {
  color: inherit;
  text-decoration: underline;
}

/* Archive-note colour — single source. Higher specificity than the leftover
   .lt-archive-note colour in the per-page inline <style> (no !important). */
body.lostechies-archive .lt-archive-note,
body.lostechies-index .lt-archive-note {
  color: #595959;
}
body.lostechies-archive .lt-archive-note .lt-archive-kicker,
body.lostechies-index .lt-archive-note .lt-archive-kicker {
  color: #595959;
}
body.lostechies-archive .lt-archive-note a.lt-archive-lostechies-link,
body.lostechies-index .lt-archive-note a.lt-archive-lostechies-link {
  color: #595959;
  text-decoration: underline;
}
body.lostechies-archive .lt-archive-note a.lt-archive-lostechies-link:hover,
body.lostechies-archive .lt-archive-note a.lt-archive-lostechies-link:focus,
body.lostechies-index .lt-archive-note a.lt-archive-lostechies-link:hover,
body.lostechies-index .lt-archive-note a.lt-archive-lostechies-link:focus {
  color: #4A4A4A;
}

/* Hash-based no-JS filter on index */
body.lostechies-index:has(#docker:target) article.wr-row:not([data-theme="docker"]),
body.lostechies-index:has(#javascript:target) article.wr-row:not([data-theme="javascript"]),
body.lostechies-index:has(#ddd:target) article.wr-row:not([data-theme="ddd"]),
body.lostechies-index:has(#dotnet:target) article.wr-row:not([data-theme="dotnet"]),
body.lostechies-index:has(#devops:target) article.wr-row:not([data-theme="devops"]),
body.lostechies-index:has(#design:target) article.wr-row:not([data-theme="design"]),
body.lostechies-index:has(#nhibernate:target) article.wr-row:not([data-theme="nhibernate"]),
body.lostechies-index:has(#talks:target) article.wr-row:not([data-theme="talks"]),
body.lostechies-index:has(#career:target) article.wr-row:not([data-theme="career"]) {
  display: none !important;
}

@media (max-width: 600px) {
  .ed-header {
    padding: 18px 20px;
    display: block;
    height: auto;
  }
  .wr-head,
  .wr-filter-bar,
  .wr-list,
  .lt-back {
    padding-left: 20px;
    padding-right: 20px;
  }
}