/* EMO extends the production grooming design system; it does not redefine it. */
.emotions-hub,
.emotions-article {
  --emotions-sage: #78907f;
  --emotions-mist: #dfe8df;
  --emotions-clay: #b87758;
}

.emotions-hub-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
}

.emotions-hub-hero h1 {
  font-size: clamp(49px, 6.25vw, 79px);
}

.emotions-hub-hero__art {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-left: 1px solid rgba(255, 249, 239, 0.08);
  background:
    radial-gradient(circle at 68% 30%, rgba(184, 154, 98, 0.26), transparent 34%),
    radial-gradient(circle at 28% 70%, rgba(120, 144, 127, 0.34), transparent 38%),
    linear-gradient(145deg, #24382f 0%, #17231f 68%, #101a17 100%);
}

.emotions-hub-hero__art::before,
.emotions-hub-hero__art::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 249, 239, 0.22);
  border-radius: 50%;
}

.emotions-hub-hero__art::before {
  top: 13%;
  right: -17%;
  width: 72%;
  aspect-ratio: 1;
}

.emotions-hub-hero__art::after {
  bottom: -21%;
  left: -22%;
  width: 78%;
  aspect-ratio: 1;
}

.emotions-orbit,
.emotions-signal {
  position: absolute;
  display: block;
}

.emotions-orbit {
  border: 1px solid rgba(184, 154, 98, 0.5);
  border-radius: 50%;
}

.emotions-orbit--one {
  top: 21%;
  left: 16%;
  width: 54%;
  aspect-ratio: 1;
}

.emotions-orbit--two {
  top: 36%;
  left: 31%;
  width: 42%;
  aspect-ratio: 1;
  border-color: rgba(255, 249, 239, 0.24);
}

.emotions-orbit--three {
  top: 48%;
  left: 43%;
  width: 19%;
  aspect-ratio: 1;
  border: 0;
  background: rgba(184, 154, 98, 0.84);
  box-shadow: 0 0 70px rgba(184, 154, 98, 0.25);
}

.emotions-signal {
  width: 74px;
  height: 1px;
  background: rgba(255, 249, 239, 0.66);
  transform-origin: left center;
}

.emotions-signal::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grooming-brass);
}

.emotions-signal--one { top: 29%; left: 50%; transform: rotate(-32deg); }
.emotions-signal--two { top: 58%; left: 53%; transform: rotate(19deg); }
.emotions-signal--three { top: 70%; left: 29%; transform: rotate(151deg); }

.emotions-directions,
.emotions-catalog {
  margin-top: clamp(58px, 8vw, 104px);
  scroll-margin-top: 104px;
}

.emotions-direction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.emotions-direction-card {
  display: flex;
  min-height: 238px;
  padding: 22px;
  flex-direction: column;
  border: 1px solid var(--grooming-line);
  background: var(--grooming-surface);
  color: var(--grooming-ink);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.emotions-direction-card:hover,
.emotions-direction-card:focus-visible {
  border-color: var(--grooming-brass);
  box-shadow: 0 12px 30px rgba(23, 35, 31, 0.08);
  transform: translateY(-2px);
}

.emotions-direction-card__number {
  color: var(--grooming-brass-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.emotions-direction-card strong {
  margin-top: 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.emotions-direction-card > span:not(.emotions-direction-card__number) {
  margin-top: 13px;
  color: var(--grooming-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.emotions-direction-card small {
  display: flex;
  min-height: 44px;
  margin-top: auto;
  padding-top: 16px;
  align-items: flex-end;
  justify-content: space-between;
  color: var(--grooming-ink);
  font-size: 12px;
  font-weight: 750;
}

.emotions-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(184, 154, 98, 0.4);
  border-top: 3px solid var(--grooming-brass);
  background: var(--grooming-surface);
  box-shadow: 0 8px 26px rgba(23, 35, 31, 0.045);
}

.emotions-filters label {
  display: grid;
  gap: 7px;
}

.emotions-filters label > span,
.emotions-focus-note > span {
  color: var(--grooming-brass-strong);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.emotions-filters select {
  width: 100%;
  min-height: 48px;
  padding: 0 38px 0 13px;
  border: 1px solid var(--grooming-line);
  border-radius: 0;
  background-color: #fff;
  color: var(--grooming-ink);
  font: 600 13px/1.3 "Manrope", "Segoe UI", system-ui, sans-serif;
}

.emotions-filters select:hover,
.emotions-filters select:focus-visible {
  border-color: var(--grooming-brass-strong);
}

.emotions-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.emotions-filter-actions button,
.emotions-filter-actions a {
  display: inline-flex;
  min-height: 46px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grooming-night);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.emotions-filter-actions button {
  background: var(--grooming-night);
  color: var(--grooming-ivory);
}

.emotions-filter-actions a {
  background: transparent;
  color: var(--grooming-night);
}

.emotions-filter-actions button:hover,
.emotions-filter-actions a:hover {
  border-color: var(--grooming-brass-strong);
  background: var(--grooming-ivory);
  color: var(--grooming-night);
}

.emotions-focus-note {
  display: flex;
  min-height: 52px;
  margin-top: 14px;
  padding: 8px 14px;
  align-items: center;
  gap: 12px;
  border-left: 2px solid var(--grooming-brass);
  background: rgba(255, 253, 248, 0.72);
}

.emotions-focus-note strong { font-size: 14px; }
.emotions-focus-note a {
  display: inline-flex;
  min-height: 44px;
  margin-left: auto;
  align-items: center;
  color: var(--grooming-ink);
  font-size: 12px;
  font-weight: 700;
}

.emotions-result-count {
  margin: 18px 0;
  color: var(--grooming-ink-soft);
  font-size: 13px;
}

.emotions-card-grid {
  align-items: stretch;
}

.emotions-card,
.emotions-card > a,
.emotions-card .grooming-card__content {
  height: 100%;
}

.emotions-card > a {
  display: flex;
  flex-direction: column;
}

.emotions-card .grooming-card__content {
  flex: 1;
}

.emotions-card h3 {
  font-size: 18px;
}

.emotions-card .grooming-card__cta {
  margin-top: auto;
}

.emotions-card__context {
  display: block;
  margin: 15px 0 18px;
  padding-top: 13px;
  border-top: 1px solid var(--grooming-line);
  color: var(--grooming-ink-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.emotions-card__placeholder,
.emotions-related__placeholder {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 26%, rgba(184, 154, 98, 0.38), transparent 28%),
    linear-gradient(145deg, #24382f, #17231f 72%);
}

.emotions-card__placeholder::before,
.emotions-card__placeholder::after,
.emotions-related__placeholder::before,
.emotions-related__placeholder::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 249, 239, 0.2);
  border-radius: 50%;
}

.emotions-card__placeholder::before,
.emotions-related__placeholder::before {
  top: -28%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
}

.emotions-card__placeholder::after,
.emotions-related__placeholder::after {
  bottom: -42%;
  left: -12%;
  width: 70%;
  aspect-ratio: 1;
}

.emotions-card__placeholder i,
.emotions-related__placeholder i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grooming-brass);
  box-shadow: 0 0 28px rgba(184, 154, 98, 0.42);
}

.emotions-card__placeholder i:nth-child(1) { transform: translate(-54px, -24px); }
.emotions-card__placeholder i:nth-child(2) { transform: translate(-4px, 14px); }
.emotions-card__placeholder i:nth-child(3) { transform: translate(50px, -38px); }

.emotions-empty {
  padding: 42px;
  border: 1px solid var(--grooming-line);
  background: var(--grooming-surface);
  text-align: center;
}

.emotions-empty h3 {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
}

.emotions-empty p { margin: 0; color: var(--grooming-ink-soft); }

.emotions-pagination {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
  gap: 14px;
  margin-top: 34px;
  align-items: center;
}

.emotions-pagination > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.emotions-pagination a,
.emotions-pagination [aria-current="page"],
.emotions-pagination__ellipsis {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grooming-line);
  background: var(--grooming-surface);
  color: var(--grooming-ink);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.emotions-pagination [aria-current="page"] {
  border-color: var(--grooming-night);
  background: var(--grooming-night);
  color: var(--grooming-ivory);
}

.emotions-pagination__edge:last-child { justify-self: end; }
.emotions-pagination__edge.is-disabled { opacity: 0; }
.emotions-pagination a:hover { border-color: var(--grooming-brass-strong); }
.emotions-pagination__ellipsis { min-width: 26px; padding: 0; border-color: transparent; background: transparent; }

.emotions-article-hero--text {
  grid-template-columns: minmax(0, 1fr);
  min-height: 490px;
}

.emotions-image-caption {
  margin: .65rem 0 0;
  color: var(--grooming-muted, #5e625f);
  font-size: .82rem;
  line-height: 1.45;
}

.emotions-article-hero--text .grooming-article-hero__copy {
  max-width: 980px;
  padding-right: clamp(34px, 8vw, 110px);
  padding-left: clamp(34px, 8vw, 110px);
}

.emotions-byline {
  margin: 25px 0 0;
  color: rgba(255, 249, 239, 0.64);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.emotions-facet-link {
  display: flex;
  min-height: 48px;
  padding: 8px 15px;
  align-items: center;
  border: 1px solid var(--grooming-line);
  background: rgba(255, 253, 248, 0.72);
  color: var(--grooming-ink-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.emotions-facet-link:hover { border-color: var(--grooming-brass); color: var(--grooming-ink); }

.emotions-author {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  margin-top: 58px;
  padding: 26px;
  align-items: center;
  border: 1px solid rgba(184, 154, 98, 0.44);
  background: var(--grooming-surface);
}

.emotions-author__mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--grooming-night);
  color: var(--grooming-brass);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 600;
}

.emotions-author h2 {
  margin: 4px 0 5px;
  color: var(--grooming-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.emotions-author p:last-child {
  margin: 0;
  color: var(--grooming-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.emotions-related__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.emotions-related__placeholder i:nth-child(1) { transform: translate(-24px, -9px); }
.emotions-related__placeholder i:nth-child(2) { transform: translate(19px, 14px); }

@media (max-width: 1050px) {
  .emotions-direction-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .emotions-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .emotions-hub-hero { grid-template-columns: 1fr; }
  .emotions-hub-hero__art { min-height: 300px; aspect-ratio: 16 / 9; border-top: 1px solid rgba(255, 249, 239, 0.08); border-left: 0; }
  .emotions-direction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .emotions-hub-hero h1 { font-size: clamp(42px, 14.5vw, 55px); }
  .emotions-hub-hero__art { min-height: 0; aspect-ratio: 4 / 3; }
  .emotions-directions,
  .emotions-catalog { margin-top: 58px; scroll-margin-top: 86px; }
  .emotions-direction-grid { grid-template-columns: 1fr; gap: 10px; }
  .emotions-direction-card { min-height: 0; padding: 20px; }
  .emotions-direction-card small { margin-top: 14px; }
  .emotions-filters { grid-template-columns: 1fr; padding: 18px; }
  .emotions-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .emotions-filter-actions button,
  .emotions-filter-actions a { width: 100%; padding: 0 10px; }
  .emotions-focus-note { align-items: flex-start; flex-direction: column; gap: 4px; }
  .emotions-focus-note a { margin-left: 0; }
  .emotions-card h3 { font-size: 20px; }
  .emotions-pagination { grid-template-columns: 1fr 1fr; gap: 8px; }
  .emotions-pagination > div { grid-column: 1 / -1; grid-row: 1; }
  .emotions-pagination__edge { grid-row: 2; width: 100%; }
  .emotions-pagination__edge:last-child { justify-self: stretch; }
  .emotions-article-hero--text { min-height: 0; }
  .emotions-article-hero--text .grooming-article-hero__copy { padding-right: 22px; padding-left: 22px; }
  .emotions-author { grid-template-columns: 48px minmax(0, 1fr); padding: 20px; }
  .emotions-author__mark { width: 48px; height: 48px; font-size: 29px; }
  .emotions-related__placeholder { width: 116px; height: 100%; min-height: 116px; aspect-ratio: auto; }
}

@media (max-width: 350px) {
  .emotions-hub-hero h1 { font-size: 41px; }
  .emotions-filter-actions { grid-template-columns: 1fr; }
  .emotions-pagination a,
  .emotions-pagination [aria-current="page"] { min-width: 44px; padding: 0 5px; }
  .emotions-pagination__ellipsis { min-width: 16px; }
  .emotions-author { grid-template-columns: 1fr; }
}