.catalog-jump {margin-top: 30px;}
.catalog {background: #eee6da;}
.catalog-cover {
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 370px;
  background: radial-gradient(ellipse at 83% 15%, #523322, #211812 58%, #19130f);
  color: #f7ece0;
}
.catalog-intro {max-width: 640px;}
.catalog-intro .eyebrow {color: #e1b68c;}
.catalog-intro h2 {margin: 14px 0 19px; max-width: 12ch;}
.catalog-intro > p:last-child {max-width: 56ch; color: #eadbd0;}
.catalog-board {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(49%, 720px);
  display: grid;
  grid-template: repeat(2,minmax(0,1fr))/repeat(2,minmax(0,1fr));
  mask-image: linear-gradient(90deg, transparent, #000 56%);
  pointer-events: none;
}
.catalog-board span {
  border: 1px solid #e9bc8733;
  background: linear-gradient(135deg,#dca77822,#3b271c42);
}
.catalog-board span:is(:nth-child(2),:nth-child(3)) {
  background: linear-gradient(135deg,#bd7f4e45,#26191066);
}
.catalog-list {padding-block: clamp(30px,5vw,68px);}
.catalog-group {border-top: 1px solid #b7a48f;}
.catalog-group:last-child {border-bottom: 1px solid #b7a48f;}
.catalog-group summary {
  list-style: none;
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr) 1rem;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  padding: 19px 0;
}
.catalog-group summary::-webkit-details-marker {display: none;}
.catalog-group summary:is(:hover,:focus-visible) .catalog-group-title,
.catalog-group[open] .catalog-group-title {color: #784726;}
.catalog-index {color: #794b30; font-size: var(--type-caption);}
.catalog-group-title {font-size: var(--type-item); font-weight: 650; line-height: 1.2; letter-spacing: -.04em;}
.catalog-plus {width: 14px; height: 14px; position: relative; color: #784726;}
.catalog-plus::before,.catalog-plus::after {content: ''; position: absolute; background: currentColor;}
.catalog-plus::before {width: 14px; height: 1px; top: 6px;}
.catalog-plus::after {height: 14px; width: 1px; left: 6px;}
.catalog-group[open] .catalog-plus::after {display: none;}
.catalog-group dl {margin: 0 0 22px calc(2rem + 16px);}
.catalog-group dl > div {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 10px 25px;
  border-top: 1px solid #b7a48f80;
  padding: 13px 0;
}
.catalog-group dt {font-weight: 700; line-height: 1.5;}
.catalog-group dd {margin: 0; color: #494036; line-height: 1.6;}
.sector-cards {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid #c1af9b; gap: 1px; background: #c1af9b;}
.sector-card {
  background: #f6f0e7;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: clamp(18px,3vw,36px);
}
.sector-card:nth-child(even) {background: #eee4d6;}
.sector-card h3,.sector-card p {margin: 0;}
.sector-card p {line-height: 1.6;}
.sector-card .sector-examples {border-top: 1px solid #bcaa96; padding-top: 13px; color: #75472b; margin-top: auto; font-size: var(--type-control);}
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) .catalog-cover.is-visible .catalog-board span {
    animation: catalog-square .86s cubic-bezier(.2,.7,.25,1) both;
  }
  .js:not(.motion-off) .catalog-cover.is-visible .catalog-board span:nth-child(2) {animation-delay: .08s;}
  .js:not(.motion-off) .catalog-cover.is-visible .catalog-board span:nth-child(3) {animation-delay: .15s;}
  .js:not(.motion-off) .catalog-cover.is-visible .catalog-board span:nth-child(4) {animation-delay: .22s;}
  .js:not(.motion-off) .catalog-cover.is-visible .catalog-intro h2 {
    animation: catalog-heading .78s cubic-bezier(.2,.7,.25,1) .1s both;
  }
}
@keyframes catalog-square {
  from {opacity: .15; transform: translateX(26%) scale(.94);}
  to {opacity: 1; transform: translateX(0) scale(1);}
}
@keyframes catalog-heading {
  from {opacity: .4; transform: translateY(13px);}
  to {opacity: 1; transform: translateY(0);}
}
@media (max-width: 900px) {
  .sector-cards {grid-template-columns: repeat(2,minmax(0,1fr));}
}
@media (max-width: 600px) {
  .catalog-cover {min-height: 0;}
  .catalog-board {width: 66%; opacity: .62;}
  .catalog-group summary {grid-template-columns: 1.25rem minmax(0,1fr) 1rem; gap: 10px;}
  .catalog-group dl {margin-left: 0;}
  .catalog-group dl > div {grid-template-columns: 1fr; gap: 4px;}
  .sector-cards {grid-template-columns: 1fr;}
}