.grid {
  --content-max-width: 50rem;
}

details.highlight {
  border: var(--space-2xs) solid var(--color-color-1);
  border-radius: var(--space-s);
  margin: 0 0 var(--space-l-2xl) 0;
}

details.highlight summary {
  cursor: pointer;
  font-size: var(--font-size-1);
  padding: var(--space-s);
}

details p {
  padding: .5em var(--space-s);
  color: var(--color-neutral-3);
}

details.highlight pre {
  padding: var(--space-s);
  margin: 0 var(--space-s) var(--space-s) var(--space-s);
  overflow-x: scroll;
  overflow-y: hidden;
  background: var(--color-neutral-8);
  border-radius: var(--space-2xs);
}

.n-post-detail {
  gap: 0;
  background-color: var(--color-neutral-9);
}

.n-post-detail>*+* {
  margin-block-start: var(--flow-space, 1em);
}

.n-post-detail ul,
.n-post-detail ol {
  gap: var(--space-s);
  display: flex;
  flex-direction: column;
  padding: 0 0 0 var(--space-s);
}

.n-post-detail pre {
  background: var(--color-neutral-10);
  border-radius: var(--space-xs);
  outline: var(--space-2xs) solid var(--color-neutral-8);
  line-height: 1;
  overflow-x: scroll;
  overflow-y: hidden;
  font-size: var(--font-size--1);
  padding: 1em var(--content-wide-1-width);
}

.n-post-detail p {
  color: var(--color-neutral-3);
}

.n-post-detail p span {
  font-size: inherit;
}

.n-post-detail p>.italic {
  font-style: italic;
}

.n-post-detail p>.bold {
  font-weight: bold;
}

.n-post-detail p>.underline {
  text-decoration: underline;
}

.n-post-detail p>a {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

.n-post-list>section.grid.full>article.hol-column>p>a {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

.edit-features {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-size: var(--font-size--1);

  >a {
    font-size: var(--font-size--1);
  }

  >label {
    padding: 0.5em 1.2em;
    border-radius: 0.3em;
    background: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-8);
    cursor: pointer;

    >span {
      line-height: 1;
      color: var(--color-light-neutral-9);
    }

    >input[type="checkbox"] {
      display: none;
    }

    &:has(input[type="checkbox"]:not(:checked)) {
      background: var(--color-color-4);
      color: var(--color-neutral-2);

      >span::after {
        content: "inactive";
      }
    }

    &:has(input[type="checkbox"]:checked) {
      background: var(--color-color-1);
      color: var(--color-neutral-1);

      >span::after {
        content: "active";
      }
    }
  }

  .delete-container {
    display: flex;
    gap: var(--space-xs);

    >label {
      padding: 0.3em 0;
      cursor: pointer;

      input[type=checkbox] {
        display: none;
      }
    }

    >button {
      padding: 0.3em 1.2em;
      display: none;
    }

    &:has(input:checked) {
      >button {
        display: initial;
      }
    }
  }
}

.padded-title {
  line-height: 1.314;
  /* padding: var(--space-2xs) 0;  */

  >span {
    /* background: var(--color-neutral-8); */
    display: inline;
    /* padding: 0 var(--space-xs); */
    font-size: inherit;

    /* Needs prefixing */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}

blockquote {
  /* border-inline-start: 10px solid var(--color-color-2); */
  /* padding: 0 var(--space-m); */
  /* border-left: 7px solid var(--color-color-1); */
  background: var(--color-neutral-8);
  padding: 1em var(--content-wide-1-width);
  border-radius: var(--space-xs);
  /* padding: var(--space-m) 0 var(--space-m) var(--space-m); */
  font-size: var(--font-size-0);
  font-weight: normal;
}

.n-footer-small {
  background-color: var(--color-color-9);
  color: var(--color-neutral-1);
  padding: calc(2*var(--space-2xl)) 0;
  position: sticky;
  bottom: 0;
  z-index: -1;

  >section {
    >nav {
      >a {
        color: var(--color-light-neutral-10);
      }
    }
  }

  >span {
    color: var(--color-light-neutral-10);
    text-align: left;
  }
}

main.grid {
  position: relative;
  z-index: 1;
}

.n-services {
  >div.hol-column {
    >ul.hol-column {
      >li {
        >aside.hol-column {
          >ul {
            >li {
              >p {
                color: var(--color-neutral-3);
              }
            }
          }
        }
      }
    }
  }
}

.n-navigation-small>section>nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
}

.n-feature-5>section.hol-column>ul.hol-wrapping-row>li.hol-column {
  justify-items: start;
  background-color: var(--color-neutral-9);
  align-self: stretch;
  padding: var(--space-xs) var(--space-s);
  border-radius: 0.3em;
}

.secondary {
  background-color: var(--color-neutral-9);
}

blockquote>*+* {
  margin-block-start: var(--flow-space, 1em);
}


.post-meta {
  display: flex;
  gap: var(--space-xs);
}

/* ---------------------------------------------------------------------
   home page editorial polish
   --------------------------------------------------------------------- */

.h-eyebrow {
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-neutral-5);
  line-height: 1.4;
}

.h-lede {
  /* font-family: var(--font-family-2); */
  font-style: italic;
  font-weight: 400;
  font-size: var(--font-size-2);
  line-height: 1.4;
  color: var(--color-neutral-4);
  max-width: 38ch;
  text-wrap: pretty;
}

.h-rule {
  display: block;
  width: var(--space-l);
  height: 0;
  border: 0;
  border-top: 2px solid var(--color-color-1);
  margin: 0 0 var(--space-s);
}

.h-num {
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  letter-spacing: 0.06em;
  color: var(--color-color-1);
  line-height: 1.3;
}

.h-year-band {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-l) 0 var(--space-2xs);
  border-top: 1px solid var(--color-neutral-7);
  color: var(--color-neutral-5);
}

.h-year-band:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.h-year-band > .label {
  font-family: var(--font-family-2);
  font-style: italic;
  font-size: var(--font-size-3);
  color: var(--color-neutral-3);
  line-height: 1.1;
}

.h-year-band > .count {
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-5);
  line-height: 1.4;
}

.n-post-list article.hol-column h3 a {
  font-family: var(--font-family-2);
  color: var(--color-neutral-1);
  text-decoration: none;
  background-image: linear-gradient(var(--color-color-1), var(--color-color-1));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 280ms ease, color 180ms ease;
}

.n-post-list article.hol-column h3 a:hover {
  color: var(--color-color-1);
  background-size: 100% 1px;
  text-decoration: none;
}

.n-post-list article.hol-column p {
  max-width: 60ch;
  color: var(--color-neutral-3);
}

.n-post-list details.highlight {
  width: 100%;
  padding: var(--space-xs) var(--space-s);
  border-inline-start: 2px solid var(--color-neutral-7);
  background: transparent;
  border-radius: 0;
}

.n-post-list details.highlight > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-family-2);
  font-size: var(--font-size-1);
  color: var(--color-neutral-2);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
}

.n-post-list details.highlight > summary::-webkit-details-marker {
  display: none;
}

.n-post-list details.highlight > summary::before {
  content: "+";
  font-family: var(--font-family-1);
  color: var(--color-color-1);
  font-size: var(--font-size-0);
}

.n-post-list details.highlight[open] > summary::before {
  content: "−";
}

.n-post-list details.highlight pre {
  background: var(--color-neutral-9);
  border: 1px solid var(--color-neutral-7);
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  overflow-x: auto;
  margin: var(--space-xs) 0 0;
  color: var(--color-neutral-1);
  border-radius: var(--border-radius);
}

.n-post-list details.highlight code {
  font-family: var(--font-family-1);
}

.n-feature-5 ul.hol-wrapping-row {
  counter-reset: svc;
}

.n-feature-5 ul.hol-wrapping-row > li.hol-column {
  counter-increment: svc;
}

.n-feature-5 ul.hol-wrapping-row > li.hol-column > h3::before {
  content: "N° 0" counter(svc);
  display: block;
  font-family: var(--font-family-1);
  font-size: var(--font-size--1);
  letter-spacing: 0.06em;
  color: var(--color-color-1);
  margin-bottom: var(--space-3xs);
  font-weight: 400;
}

@keyframes h-wm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.logo svg g {
  animation: h-wm-fade 700ms ease-out 120ms both;
}

.logo svg > text {
  animation: h-wm-fade 700ms ease-out 320ms both;
}

.logo svg {
  transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
}

.logo:hover svg {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .logo svg g,
  .logo svg > text {
    animation: none;
  }
  .logo svg {
    transition: none;
  }
}

.n-post-list > section.grid.full {
  row-gap: var(--space-l);
}

.n-feature-5 > section.hol-column > p {
  color: var(--color-neutral-5);
}

.n-post-list > section.grid.full > article.hol-column {
  gap: var(--space-xs);
}

.n-post-detail {
  padding: var(--space-l-2xl) 0 calc(2*var(--space-l-3xl)) 0
}

/* ---------------------------------------------------------------------
   home page marketing bands (problem / work / why / cta)
   --------------------------------------------------------------------- */
.n-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.n-band {
  padding: var(--space-l-2xl) 0;
  row-gap: var(--space-xl);
  background-color: var(--color-neutral-10);

  > section {
    display: grid;
    gap: var(--space-l);
  }

  > section > header {
    display: grid;
    gap: var(--space-2xs);
    max-width: 70ch;
  }

  > section > header > p {
    color: var(--color-neutral-5);
  }
}

.n-band.alt {
  background-color: var(--color-neutral-9);
}

.n-band article {
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
  align-self: stretch;
  background-color: var(--color-neutral-9);
  padding: var(--space-s) var(--space-m);
  border-radius: 0.3em;

  > p {
    color: var(--color-neutral-3);
  }
}

.n-band.alt article {
  background-color: var(--color-neutral-10);
}

.n-home-hero .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-block-start: var(--space-s);
}

.n-home-hero .meta > .item {
  display: grid;
  gap: var(--space-3xs);
  border-top: 2px solid var(--color-color-1);
  padding-top: var(--space-2xs);
}

.n-home-hero .meta > .item > .k {
  font-weight: bold;
}

.n-home-hero .meta > .item > .v {
  color: var(--color-neutral-5);
}

.n-cta {
  padding: var(--space-l-2xl) 0;
  background-color: var(--color-neutral-8);

  > section > .panel {
    display: grid;
    gap: var(--space-s);
    justify-items: start;
    background-color: var(--color-neutral-9);
    padding: var(--space-l);
    border-radius: var(--border-radius);
  }
}