.tug-page-fetch {
  --tug-fetch-bg: #f5f0e6;
  --tug-fetch-ink: #232323;
  --tug-fetch-accent: #d7a72d;
  --tug-fetch-border: rgba(35,35,35,.16);
  --tug-fetch-card: #fff;
  box-sizing: border-box;
  width: 100%;
  margin: 22px 0 28px;
  background: var(--tug-fetch-bg);
  color: var(--tug-fetch-ink);
  border: 1px solid var(--tug-fetch-border);
}
.tug-page-fetch *, .tug-page-fetch *::before, .tug-page-fetch *::after { box-sizing: border-box; }
.tug-page-fetch__inner { max-width: 1180px; margin: 0 auto; padding: 22px 24px; }
.tug-page-fetch__copy { text-align: center; margin-bottom: 14px; }
.tug-page-fetch__title { margin: 0 0 6px !important; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.2; }
.tug-page-fetch__intro { margin: 0 auto; max-width: 850px; }
.tug-page-fetch__form { max-width: 900px; margin: 0 auto; }
.tug-page-fetch__field-wrap { display: flex; gap: 8px; }
.tug-page-fetch__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.28);
  background: #fff;
  color: #111;
  font: inherit;
  border-radius: 3px;
}
.tug-page-fetch__button {
  flex: 0 0 auto;
  padding: 14px 22px;
  border: 0;
  background: #222;
  color: #fff;
  font: inherit;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  border-radius: 3px;
}
.tug-page-fetch__button:hover, .tug-page-fetch__button:focus { opacity: .9; }
.tug-page-fetch__examples { margin: 8px 2px 0; font-size: .92em; opacity: .78; }
.tug-page-fetch__status { max-width: 900px; margin: 13px auto 0; font-size: .96em; }
.tug-page-fetch__results { max-width: 900px; margin: 12px auto 0; display: grid; gap: 10px; }
.tug-page-fetch__result {
  background: var(--tug-fetch-card);
  border: 1px solid var(--tug-fetch-border);
  padding: 14px 16px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.tug-page-fetch__result:hover, .tug-page-fetch__result:focus { border-color: rgba(0,0,0,.45); transform: translateY(-1px); }
.tug-page-fetch__result-kicker { display: block; font-size: .76em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin-bottom: 3px; }
.tug-page-fetch__result-title { display: block; font-size: 1.08em; font-weight: 800; }
.tug-page-fetch__result-snippet { display: block; margin-top: 4px; line-height: 1.45; opacity: .82; }
.tug-page-fetch__browse { display: block; width: fit-content; margin: 14px auto 0; color: inherit; font-weight: 800; text-decoration: none; }
.tug-page-fetch__match { scroll-margin-top: 110px; }
.tug-page-fetch__match.tug-page-fetch__flash { animation: tug-fetch-flash 1.35s ease-out; }
@keyframes tug-fetch-flash { 0% { background: rgba(215,167,45,.38); } 100% { background: transparent; } }

@media (max-width: 700px) {
  .tug-page-fetch { margin: 14px 0 20px; }
  .tug-page-fetch__inner { padding: 17px 14px; }
  .tug-page-fetch__field-wrap { display: block; }
  .tug-page-fetch__input, .tug-page-fetch__button { width: 100%; }
  .tug-page-fetch__button { margin-top: 8px; }
  .tug-page-fetch__examples { font-size: .86em; }
}