.catalog-page {
  --feature-fill: #4bcde2;
  --intro-fill: #ffd45a;
  --trend-fill: #d9c5f9;
  --bestseller-fill: #c9ec67;
  --catalog-gap: clamp(15px, 2.2vw, 34px);
  --catalog-inset: clamp(18px, 3.2vw, 46px);
}

.catalog-shell {
  padding-block: clamp(20px, 3.2vw, 47px) clamp(35px, 6vw, 84px);
}

.catalog-page :is([id], .find-search) { scroll-margin-block-start: 20px; }

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  grid-template-areas: "feature intro";
  gap: var(--catalog-gap);
  margin-block-end: clamp(28px, 4vw, 56px);
}

.home-feature {
  grid-area: feature;
  isolation: isolate;
  position: relative;
  min-inline-size: 0;
  min-block-size: 360px;
  margin-block-start: 22px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--feature-fill);
  text-decoration: none;
}

.home-feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: 47%;
  aspect-ratio: 1;
  background: #87e0ef;
  inset-block-start: 46%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(-13deg);
}

.home-feature .media-index { max-inline-size: calc(100% - 35px); }

.home-feature img {
  align-self: center;
  justify-self: center;
  inline-size: min(77%, 390px);
  block-size: clamp(228px, 23vw, 340px);
  object-fit: contain;
  filter: drop-shadow(8px 18px 20px rgb(19 58 70 / 18%));
  transition: transform .18s ease-out;
}

.home-feature:hover img { transform: translateY(-4px); }

.home-feature-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 14px;
  padding: 13px var(--catalog-inset) 15px;
  background: #14294f;
  color: #f6fbff;
}

.home-feature-name { font-size: clamp(17px, 2vw, 25px); font-weight: 700; letter-spacing: -.045em; }
.home-feature-action { font-size: 13px; font-weight: 650; text-underline-offset: 3px; }
.home-feature:hover .home-feature-action { text-decoration: underline; }

.home-intro {
  grid-area: intro;
  min-inline-size: 0;
  align-content: center;
  padding: var(--catalog-inset);
  background: var(--intro-fill);
}

.home-intro .section-kicker { margin-block-end: 11px; }

.catalog-page .home-intro h1 {
  margin-block-start: 0;
  font-size: clamp(47px, 6.65vw, 103px);
  line-height: .92;
  letter-spacing: -.086em;
  text-wrap: balance;
}

.home-lede {
  margin-block-start: 14px;
  max-inline-size: 42ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.4;
  color: var(--muted);
}

.find-search { margin-block-start: clamp(19px, 2.2vw, 29px); }
.find-search label { display: block; margin-block-end: 6px; font-size: 13px; font-weight: 750; }

.find-search-controls {
  display: flex;
  min-inline-size: 0;
  min-block-size: 49px;
  gap: 1px;
  background: #16284b;
  border: 1px solid #16284b;
}

.find-search-controls input,
.find-search-controls button,
.search-shortcuts button {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

.find-search-controls input {
  flex: 1 1 0;
  min-inline-size: 0;
  border: 0;
  padding: 9px 12px;
  background: #fff;
}

.find-search-controls input::placeholder { color: #596585; }
.find-search-controls input::-webkit-search-cancel-button { appearance: none; }

.find-search-controls button {
  min-block-size: 44px;
  border: 0;
  padding: 7px 12px;
  background: #fff1c0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.find-search-controls button:hover { background: #ffde79; }
.find-search-controls button[type="submit"] { background: var(--accent); color: var(--accent-ink); }
.find-search-controls button[type="submit"]:hover { background: #0c2f9d; }

.find-search-controls :focus-visible,
.search-shortcuts button:focus-visible {
  outline: 2px solid #123fc7;
  outline-offset: 2px;
}

.find-search-controls :focus-visible { position: relative; outline-offset: -4px; }
.find-search-controls button[type="submit"]:focus-visible { outline-color: #fff; }

.search-shortcuts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-block-start: 8px;
}

.search-shortcuts button {
  min-block-size: 30px;
  border: 1px solid #746329;
  padding: 4px 9px;
  background: #ffdf7e;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.search-shortcuts button:hover { background: #ffefb4; }

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--catalog-gap);
}

.rank-panel {
  --panel-fill: var(--trend-fill);
  --panel-tint: #f0ebf6;
  --panel-hover: #e5dcef;
  --panel-line: #d6cbe2;
  --panel-accent: #67527f;
  min-inline-size: 0;
  background: var(--panel-tint);
  border: 1px solid var(--panel-line);
}

.bestseller-panel {
  --panel-fill: var(--bestseller-fill);
  --panel-tint: #eff2df;
  --panel-hover: #e2e8c9;
  --panel-line: #d1d9b5;
  --panel-accent: #556332;
  margin-block-start: 24px;
}

.panel-heading { padding: clamp(16px, 2.8vw, 36px) var(--catalog-inset); background: var(--panel-fill); }
.panel-heading .section-kicker { margin-block-end: 8px; }

.rank-panel h2,
.search-results h2 {
  margin-block-end: 8px;
  font-size: clamp(31px, 3.85vw, 57px);
  line-height: .99;
  text-wrap: balance;
}

.rank-description { color: var(--muted); font-size: clamp(14px, 1.2vw, 17px); }

.rank-list,
.search-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rank-item + .rank-item { border-block-start: 1px solid var(--panel-line); }

.rank-item > a {
  display: grid;
  grid-template-columns: 2ch 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-block-size: 72px;
  padding: 8px clamp(12px, 1.8vw, 24px);
  text-decoration: none;
}

.rank-item > a:is(:hover, :focus-visible) { background: var(--panel-hover); }
.rank-item > a:focus-visible { outline: 2px solid var(--panel-accent); outline-offset: -4px; }

.rank-number {
  align-self: center;
  font: 700 13px/1 var(--mono);
  color: var(--panel-accent);
}

.rank-image { width: 56px; height: 56px; padding: 3px; border: 1px solid var(--panel-line); object-fit: contain; background: #fff; }

.rank-name {
  display: block;
  min-inline-size: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 740;
  line-height: 1.21;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.rank-item a:hover .rank-name { text-decoration: underline; text-underline-offset: 3px; }

.rank-meta {
  display: block;
  margin-block-start: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.rank-arrow {
  align-self: center;
  color: var(--panel-accent);
  font-size: 17px;
  line-height: 1;
}

.rank-source {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  border-block-start: 1px solid var(--panel-line);
  padding: 12px var(--catalog-inset) 14px;
  color: var(--panel-accent);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.rank-source a { text-underline-offset: 3px; }

.search-results {
  padding: var(--catalog-inset);
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 8px solid var(--accent);
}

.search-results h2 { text-wrap: wrap; overflow-wrap: anywhere; }
.search-results > p { color: var(--muted); overflow-wrap: anywhere; }
.search-list { margin-block-start: 14px; }
.search-result { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; padding-block: 16px; border-block-start: 1px solid var(--line); }
.search-image { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: contain; background: #fff; }
.search-result > a { grid-column: 2; justify-self: start; }
.search-result h3 { margin-block: 2px 5px; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.035em; }
.search-result p { max-inline-size: 65ch; color: var(--muted); overflow-wrap: anywhere; }
.search-result a { text-underline-offset: 4px; }
.search-result a:hover { color: var(--accent); }
.search-result a:not(h3 a) { display: inline-block; padding-block: 5px; }
.search-result .section-kicker { margin-block-end: 0; color: var(--accent); }

.is-searching .home-feature { display: none; }
.is-searching .home-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro"; margin-block-end: var(--catalog-gap); }
.is-searching .home-intro { margin-inline-start: 0; }
.catalog-page.is-searching .home-intro h1 { font-size: clamp(33px, 4.2vw, 58px); }
.is-searching .home-intro h1 br { display: none; }
.is-searching .home-lede { display: none; }

@media (max-width: 950px) {
  .home-feature .media-index { inset-block-start: 12px; inset-inline-start: 12px; }
  .home-intro { --catalog-inset: clamp(18px, 2.6vw, 30px); }
}

@media (max-width: 700px) {
  .home-hero, .discovery-grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero { gap: 10px; grid-template-areas: "intro" "feature"; }
  .home-feature { min-block-size: 216px; margin-block-start: 0; margin-inline-end: 8px; }
  .home-feature img { block-size: clamp(166px, 48vw, 270px); margin-block-start: 12px; }
  .home-feature::before { inline-size: 42%; }
  .home-feature-caption { padding-block: 9px; }
  .home-intro { margin-inline-start: 8px; }
  .catalog-page .home-intro h1 { font-size: clamp(45px, 12vw, 80px); }
  .find-search-controls button { padding-inline: 9px; }
  .bestseller-panel { margin-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-feature img { transition: none; }
}