.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;

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

  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);
  }
}

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

.n-post-detail {
  gap: 0;
  background-color: var(--color-neutral-9);
  padding: var(--space-l-2xl) 0 calc(2*var(--space-l-3xl)) 0;

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

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

  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);
  }

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

    span {
      font-size: inherit;
    }

    >.italic {
      font-style: italic;
    }

    >.bold {
      font-weight: bold;
    }

    >.underline {
      text-decoration: underline;
    }

    >a {
      text-decoration: underline;
      text-decoration-thickness: 0.1em;
      text-underline-offset: 0.15em;
    }
  }
}

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

    >article.hol-column {
      gap: var(--space-xs);

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

  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;

      &:hover {
        color: var(--color-color-1);
        background-size: 100% 1px;
        text-decoration: none;
      }
    }

    p {
      max-width: 60ch;
      color: var(--color-neutral-3);
    }
  }

  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;

    >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);

      &::-webkit-details-marker {
        display: none;
      }

      &::before {
        content: "+";
        font-family: var(--font-family-1);
        color: var(--color-color-1);
        font-size: var(--font-size-0);
      }
    }

    &[open]>summary::before {
      content: "−";
    }

    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);
    }

    code {
      font-family: var(--font-family-1);
    }
  }
}

.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;

  >span {
    display: inline;
    font-size: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
}

blockquote {
  background: var(--color-neutral-8);
  padding: 1em var(--content-wide-1-width);
  border-radius: var(--space-xs);
  font-size: var(--font-size-0);
  font-weight: normal;

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

.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;
  background-color: var(--color-neutral-9);
}

.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 {
    >p {
      color: var(--color-neutral-5);
    }

    >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;
    }
  }

  ul.hol-wrapping-row {
    counter-reset: svc;

    >li.hol-column {
      counter-increment: svc;

      >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;
      }
    }
  }
}

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

.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-weight: 400;
  line-height: 1.4;
  color: var(--color-neutral-3);
  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);

  &:first-of-type {
    border-top: 0;
    padding-top: 0;
  }

  >.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;
  }

  >.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;
  }
}

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

  to {
    opacity: 1;
  }
}

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

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

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

  &:hover svg {
    transform: scale(1.06);
  }

  @media (prefers-reduced-motion: reduce) {
    svg {
      transition: none;

      g,
      >text {
        animation: none;
      }
    }
  }
}

/* ---------------------------------------------------------------------
   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);

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

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

    >ul.hol-column {
      justify-items: start;
      padding: 0 0 0 var(--space-s);
    }
  }

  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);
    }
  }

  &.alt {
    background-color: var(--color-neutral-9);

    article {
      background-color: var(--color-neutral-10);
    }
  }
}

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

  >.item {
    display: grid;
    gap: var(--space-3xs);
    border-top: 2px solid var(--color-color-1);
    padding-top: var(--space-2xs);
    max-width: 20ch;

    >.k {
      font-weight: bold;
    }

    >.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);
  }
}