.home-masthead {
  background: #f3f6f5;
  border-bottom: 1px solid var(--line);
}
.home-masthead-inner {
  position: relative;
  display: grid;
  justify-items: center;
  padding-block: clamp(76px, 8.6vw, 116px);
}
.home-hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.home-sticker {
  position: absolute;
  display: block;
  width: clamp(94px, 10vw, 142px);
  height: auto;
  filter: drop-shadow(0 2px 0 #cbd9d4);
}
.home-sticker--pad {
  inset-inline-start: 3%;
  bottom: 23%;
  transform: rotate(-12deg);
}
.home-sticker--key {
  inset-inline-end: 3%;
  bottom: 18%;
  transform: rotate(12deg);
}
.home-intro {
  position: relative;
  width: 100%;
  text-align: center;
}
.home-intro h1 {
  margin: 0 auto;
  font-size: clamp(41px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.home-deck {
  max-width: 60ch;
  margin: 17px auto 25px;
  color: #465953;
  font-size: clamp(16px, 1.55vw, 18px);
  line-height: 1.58;
}
.home-intro .store-search {
  max-width: 620px;
  margin-inline: auto;
  text-align: left;
}
.store-search {
  width: 100%;
  max-width: 530px;
}
.store-search label {
  display: block;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 650;
}
.home-intro .store-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.store-search-controls {
  display: flex;
  gap: 7px;
}
.store-search-controls input,
.store-search-controls button {
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
}
.store-search-controls input {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border-color: #a7b7b2;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
}
.store-search-controls input::placeholder { color: #5d6a68; }
.store-search-controls button {
  flex-shrink: 0;
  padding-inline: 16px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.store-search-controls button:hover { background: var(--brand-hover); }
.store-search-controls :is(input, button):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.home-search-note {
  margin: 10px 0 0;
  color: #52645f;
  font-size: 13px;
}
.home-catalog, .home-journal, .home-method, .home-about {
  padding-block: clamp(38px, 5.3vw, 72px);
}
.home-catalog .archive-feed-heading h2, .home-journal .archive-feed-heading h2,
.home-method h2, .home-about h2 {
  font-size: clamp(27px, 3.3vw, 38px);
  font-weight: 700;
}
.home-journal {
  padding-block: clamp(34px, 4.7vw, 60px);
  background: #eaf2ee;
  border-block: 1px solid #dbe7e1;
}
.home-journal .archive-feed-heading {
  margin-bottom: clamp(17px, 2.5vw, 30px);
  padding: 0;
  border: 0;
}
.recent-articles-actions,
.recent-articles-controls:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 12px;
}
.recent-articles-controls:not([hidden]) { gap: 5px; }
.recent-articles-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #a9bdb5;
  border-radius: 4px;
  background: transparent;
  color: #294a42;
  font: 26px/1 var(--font-body);
  cursor: pointer;
}
.recent-articles-controls button:not(:disabled):hover { background: #fff; }
.recent-articles-controls button:disabled { opacity: .45; cursor: default; }
.recent-articles-controls button:focus-visible,
.recent-articles-track:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.recent-articles-track {
  --recent-articles-gap: clamp(15px, 2.5vw, 28px);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--recent-articles-gap)) / 2);
  gap: var(--recent-articles-gap);
  padding-bottom: 9px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #a9bdb5 transparent;
}
.recent-articles-track--single {
  display: block;
  max-width: 760px;
  padding: 0;
  overflow: visible;
}
.recent-article {
  min-width: 0;
  scroll-snap-align: start;
}
.recent-article-link {
  display: grid;
  gap: 11px;
  text-decoration: none;
}
.recent-article-link:hover h3 { color: var(--brand); text-decoration: underline; }
.recent-article-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.recent-article-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 180px;
  overflow: hidden;
  border-radius: 2px;
  background: #dbe8e2;
}
.recent-article-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recent-article-thumb--fallback img { width: 36px; height: 36px; margin: auto; }
.recent-article-copy { min-width: 0; }
.recent-article h3 {
  margin: 4px 0 7px;
  font-size: clamp(21px, 2.5vw, 28px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.recent-article-excerpt {
  margin: 0;
  color: #465953;
  line-height: 1.58;
  overflow-wrap: anywhere;
}
.recent-articles-track--single .recent-article-link {
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 30px);
}
.home-method, .home-about { scroll-margin-top: 18px; }
.home-method h2, .home-about h2 { margin: 0 0 9px; }
.home-method p, .home-about p { max-width: 64ch; margin: 0; color: #465953; line-height: 1.65; }
.home-method-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0 0;
  border: 1px solid var(--line);
  background: #f5f8f6;
}
.home-method-list > div { padding: clamp(17px, 2.2vw, 28px); }
.home-method-list > div + div { border-inline-start: 1px solid var(--line); }
.home-method-list dt {
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
}
.home-method-list dd { margin: 0; color: #465953; line-height: 1.6; }
.home-about { background: #f3f6f5; border-top: 1px solid var(--line); }
.catalog-query { margin-block: 20px 7px; }

@media (max-width: 1024px) {
  .home-masthead-inner { padding-block: 54px 62px; }
  .home-hero-art {
    position: static;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 13px;
  }
  .home-sticker { position: static; width: 68px; }
}

@media (max-width: 720px) {
  .home-masthead-inner { padding-block: 33px 43px; }
  .home-sticker { width: 53px; }
  .home-intro h1 { font-size: clamp(29px, 7.8vw, 36px); }
  .home-title-break { display: none; }
  .home-deck { margin-block: 12px 19px; font-size: 15px; }
  .store-search-controls input, .store-search-controls button { min-height: 48px; }
  .recent-articles-track { grid-auto-columns: 88%; }
  .recent-articles-track--single .recent-article-link,
  .home-method-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .recent-articles-track--single { max-width: 390px; }
  .home-method-list > div + div {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 420px) {
  .store-search-controls button { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .recent-articles-track { scroll-behavior: auto; }
}

.not-found-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.not-found {
  display: grid;
  flex: 1;
  place-content: center;
  padding-block: clamp(48px, 10vh, 100px);
  text-align: center;
}

.not-found h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}