/* Distinct category identity system: thematic colors + premium marker. */
[data-tone="wine"] {
  --tone: #8f3651;
  --tone-deep: #642038;
  --tone-soft: #f1dce4;
  --tone-card: #fff8fa;
}
[data-tone="rose"] {
  --tone: #c13d72;
  --tone-deep: #84274d;
  --tone-soft: #f7dbe6;
  --tone-card: #fff8fb;
}
[data-tone="violet"] {
  --tone: #7047d8;
  --tone-deep: #4a2da1;
  --tone-soft: #e8e0fb;
  --tone-card: #fbf9ff;
}
[data-tone="indigo"] {
  --tone: #4f5fc0;
  --tone-deep: #34418f;
  --tone-soft: #e0e5f8;
  --tone-card: #f8f9ff;
}
[data-tone="gold"] {
  --tone: #a66a14;
  --tone-deep: #71480c;
  --tone-soft: #f3e5c7;
  --tone-card: #fffaf0;
}
[data-tone="teal"] {
  --tone: #22847f;
  --tone-deep: #145c58;
  --tone-soft: #d7eeeb;
  --tone-card: #f6fdfc;
}
[data-tone="amber"] {
  --tone: #c46a22;
  --tone-deep: #854310;
  --tone-soft: #f7e2cf;
  --tone-card: #fff9f4;
}
[data-tone="blue"] {
  --tone: #326db8;
  --tone-deep: #214d87;
  --tone-soft: #dce9f8;
  --tone-card: #f7fbff;
}
[data-tone="cyan"] {
  --tone: #258da8;
  --tone-deep: #176277;
  --tone-soft: #d9f0f5;
  --tone-card: #f6fdff;
}
[data-tone="emerald"] {
  --tone: #35835b;
  --tone-deep: #245d41;
  --tone-soft: #dceee4;
  --tone-card: #f7fcf9;
}
[data-tone="plum"] {
  --tone: #9544a8;
  --tone-deep: #672b78;
  --tone-soft: #efddf2;
  --tone-card: #fff8ff;
}
[data-tone="coral"] {
  --tone: #c34e43;
  --tone-deep: #87352e;
  --tone-soft: #f5ddd9;
  --tone-card: #fff8f7;
}
[data-tone="slate"] {
  --tone: #586b7b;
  --tone-deep: #394957;
  --tone-soft: #e1e7eb;
  --tone-card: #f9fbfc;
}
[data-tone="olive"] {
  --tone: #788245;
  --tone-deep: #535a30;
  --tone-soft: #e6ead7;
  --tone-card: #fbfcf6;
}

.category-section[data-tone] {
  background: var(--tone-card);
  border-color: color-mix(in srgb, var(--tone) 44%, #c9c4bf);
  box-shadow:
    0 18px 42px rgba(24, 27, 28, 0.14),
    inset 0 0 0 1px color-mix(in srgb, var(--tone) 8%, transparent);
}

.category-section[data-tone]:hover {
  border-color: var(--tone);
  box-shadow:
    0 23px 48px rgba(24, 27, 28, 0.18),
    0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent);
}

.category-section[data-tone] .category-heading,
.category-page-header[data-tone] {
  background: linear-gradient(
    135deg,
    var(--tone-soft) 0%,
    color-mix(in srgb, var(--tone-soft) 48%, #ffffff) 64%,
    #ffffff 100%
  );
}

.category-section[data-tone] .category-heading {
  border-top: 5px solid var(--tone);
  border-bottom-color: color-mix(in srgb, var(--tone) 24%, #d6d0ca);
}

.category-section[data-tone] .category-heading h2,
.category-page-header[data-tone] h1 {
  color: var(--tone-deep);
}

.category-section[data-tone] .category-icon,
.category-page-header[data-tone] .category-icon {
  position: relative;
  color: #ffffff;
  background: var(--tone-deep);
  border-color: color-mix(in srgb, var(--tone-deep) 82%, #000000);
  box-shadow:
    0 7px 16px color-mix(in srgb, var(--tone) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.category-section[data-tone] .category-svg,
.category-page-header[data-tone] .category-svg {
  stroke-width: 2;
}

.category-section[data-tone] .section-description {
  background: color-mix(in srgb, var(--tone) 7%, #ffffff);
  border-bottom: 1px solid color-mix(in srgb, var(--tone) 15%, #e2ddd8);
}

.category-section[data-tone] .site-list {
  border-top-color: color-mix(in srgb, var(--tone) 18%, #ddd8d2);
}

.category-section[data-tone] .site-card-compact .site-name-line {
  background: color-mix(in srgb, var(--tone) 3.5%, #ffffff);
  border-bottom-color: color-mix(in srgb, var(--tone) 13%, #e1ddd8);
}

.category-section[data-tone] .site-card-compact:hover .site-name-line {
  background: color-mix(in srgb, var(--tone) 13%, #ffffff);
}

.category-section[data-tone] .see-all-link {
  color: var(--tone-deep);
  background: color-mix(in srgb, var(--tone) 9%, #ffffff);
  border-top-color: color-mix(in srgb, var(--tone) 18%, #ddd8d2);
}

.category-section[data-tone] .see-all-link:hover {
  color: #ffffff;
  background: var(--tone-deep);
}

.category-page-header[data-tone] {
  border-left: 6px solid var(--tone);
  border-color: color-mix(in srgb, var(--tone) 42%, #cfc8c1);
  border-left-color: var(--tone);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--tone) 12%, rgba(24, 27, 28, 0.12));
}

.category-page-header[data-tone] .eyebrow {
  color: var(--tone-deep);
}

.category-page-header[data-tone] > div > p:last-child {
  color: #4f4946;
}

/* Premium keeps the subject color, then adds a compact gold marker. */
.category-premium .category-icon::after {
  content: "◆";
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -7px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #4b3100;
  background: #f2bd43;
  border: 2px solid #fff9ed;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(90, 59, 0, 0.24);
  font-size: 0.48rem;
  line-height: 1;
}

.category-premium.category-section {
  box-shadow:
    0 18px 42px rgba(24, 27, 28, 0.14),
    inset 0 0 0 1px rgba(191, 133, 27, 0.20);
}

.category-premium.category-section .category-heading {
  box-shadow: inset 0 2px 0 rgba(242, 189, 67, 0.82);
}

/* Category-derived site rows inherit a stronger visual cue without becoming noisy. */
.category-ranked-list .site-card[data-tone] {
  border-left: 4px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 2.5%, var(--reference-panel-bright));
}

.category-ranked-list .site-card[data-tone]:hover {
  background: color-mix(in srgb, var(--tone) 8%, #ffffff);
}

/* Compact brand introduction above the category catalog. */
.directory-brand-intro {
  max-width: 820px;
  margin: 0 auto 22px;
  padding: 4px 2px 20px;
  text-align: center;
  border-bottom: 1px solid var(--content-shell-line);
}

.directory-brand-intro .eyebrow {
  margin-bottom: 7px;
  color: #88442f;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.directory-brand-intro h1 {
  max-width: 760px;
  margin: 0 auto 10px;
  color: #2d2b2a;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.directory-brand-intro > p:last-child {
  max-width: 760px;
  margin: 0 auto;
  color: #625c58;
  font-size: 0.98rem;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .category-section[data-tone] .category-heading {
    border-top-width: 4px;
  }

  .category-page-header[data-tone] {
    border-left-width: 4px;
  }

  .category-premium .category-icon::after {
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
  }

  .directory-brand-intro {
    margin-bottom: 16px;
    padding: 2px 2px 16px;
    text-align: left;
  }

  .directory-brand-intro h1,
  .directory-brand-intro > p:last-child {
    margin-left: 0;
    margin-right: 0;
  }
}