body[data-site="aroma"] {
  --ink: #332721;
  --muted: #5c4c42;
  --blue: #943d2e;
  --blue-deep: #793023;
  --red: #943d2e;
  --pale: #f8efe6;
  --line: #e5d4c6;
  --aroma-paper: #fffcf7;
  --aroma-cream: #fbf3eb;
  --aroma-accent: #943d2e;
  --aroma-accent-deep: #753025;
  --aroma-display: "Instrument Serif", Georgia, "Noto Serif SC", "Songti SC", SimSun, serif;
  background: var(--aroma-paper);
}

body[data-site="aroma"] :is(h1, h2, h3) {
  color: var(--ink);
  letter-spacing: -.023em;
}

body[data-site="aroma"] p { color: var(--muted); }

body[data-site="aroma"][data-language="zh"] {
  --aroma-display: "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
}

body[data-site="aroma"] :is(.section-head h2, .page-hero h1, .project-prompt h2, .cta-inner h2) {
  font-family: var(--aroma-display);
  font-weight: 500;
  color: var(--ink);
}

body[data-site="aroma"] :is(.topline, .value-strip, .pale) {
  background: var(--aroma-cream);
  border-color: var(--line);
}

body[data-site="aroma"] .topline,
body[data-site="aroma"] .value-inner > div,
body[data-site="aroma"] .value-icon,
body[data-site="aroma"] .vertical-brand span,
body[data-site="aroma"] .eyebrow,
body[data-site="aroma"] .section-head .eyebrow,
body[data-site="aroma"] .breadcrumb,
body[data-site="aroma"] .dropdown-title,
body[data-site="aroma"] .text-link,
body[data-site="aroma"] .section-heading-row > .text-link {
  color: var(--aroma-accent);
  text-decoration-color: #c28976;
}

body[data-site="aroma"] .header,
body[data-site="aroma"] .dropdown {
  background: var(--aroma-paper);
  border-color: var(--line);
}

body[data-site="aroma"] :is(.nav-item > a, .dropdown a, .lang-switch) {
  color: var(--muted);
  border-color: var(--line);
}

body[data-site="aroma"] .nav-item > a::after { background: var(--aroma-accent); }
body[data-site="aroma"] .dropdown a:hover { color: var(--aroma-accent); }
body[data-site="aroma"] .menu-toggle span { background: var(--aroma-accent); }

body[data-site="aroma"] .button { border-radius: 7px; }

body[data-site="aroma"] .button.red,
body[data-site="aroma"] .floating-contact a {
  border-color: var(--aroma-accent);
  background: var(--aroma-accent);
  color: #fff;
  box-shadow: 0 5px 16px #63302520;
}

body[data-site="aroma"] .button.red:hover,
body[data-site="aroma"] .floating-contact a:hover {
  border-color: var(--aroma-accent-deep);
  background: var(--aroma-accent-deep);
}

body[data-site="aroma"] .button.outline {
  border-color: #c89784;
  background: transparent;
  color: var(--aroma-accent-deep);
}

body[data-site="aroma"] .button.outline:hover {
  border-color: var(--aroma-accent);
  background: #f6e6dc;
  color: var(--aroma-accent-deep);
}

body[data-site="aroma"] :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--aroma-accent-deep);
  outline-offset: 4px;
}

body[data-site="aroma"] .vertical-hero {
  --hero-wash: #fbf3eb;
  background: var(--hero-wash);
}

body[data-site="aroma"] .vertical-hero .hero-slide { background: var(--hero-wash); }

body[data-site="aroma"] .vertical-hero .hero-slide .hero-copy .hero-title {
  max-width: 18ch;
  color: var(--ink);
  font-family: var(--aroma-display);
  font-weight: 500;
  font-size: clamp(40px, 4.2vw, 67px);
  line-height: 1;
  letter-spacing: -.032em;
}

body[data-site="aroma"][data-language="zh"] .vertical-hero .hero-slide .hero-copy .hero-title {
  max-width: 13em;
  font-size: clamp(36px, 4.05vw, 60px);
  line-height: 1.2;
}

body[data-site="aroma"] .vertical-hero .hero-slide .hero-copy .eyebrow,
body[data-site="aroma"] .hero-tags > * {
  color: var(--aroma-accent-deep);
}

body[data-site="aroma"] .vertical-hero .hero-copy .eyebrow i { background: var(--aroma-accent); }
body[data-site="aroma"] .vertical-hero .hero-slide .hero-copy p { color: var(--muted); }
body[data-site="aroma"] .hero-tags > * { border-color: #dabbab; background: #fffcf7b8; }
body[data-site="aroma"] .vertical-pause { border-color: #d6b6a6; background: #fffaf4; color: var(--aroma-accent-deep); }

body[data-site="aroma"] .vertical-hero .hero-slide .hero-art::after {
  background: linear-gradient(90deg, #fbf3eb 4%, #fbf3ebf7 26%, #fbf3ebb8 43%, #fbf3eb00 71%);
}

body[data-site="aroma"] .equipment-footage-note,
body[data-site="aroma"] .vertical-hero .vertical-caption {
  background: #fffcf7f2;
  color: var(--ink);
}

@media (min-width: 1000px) {
  body[data-site="aroma"] .vertical-hero .hero-slides {
    height: clamp(610px, 43vw, 685px);
  }

  body[data-site="aroma"] .vertical-hero .hero-slide .hero-art {
    inset: 0 46% 0 0;
  }

  body[data-site="aroma"] .vertical-hero .hero-slide .hero-art::after {
    background: none;
    box-shadow: inset -1px 0 #d9c3b0;
  }

  body[data-site="aroma"] .vertical-hero .hero-slide .hero-art img {
    width: 100%;
    min-width: 0;
    margin: 0;
    object-position: right center;
  }

  body[data-site="aroma"] .vertical-hero .hero-container { justify-content: flex-end; }

  body[data-site="aroma"] .vertical-hero .hero-slide .hero-copy {
    width: 42.5%;
    max-width: 550px;
    padding: 0 0 0 clamp(10px, 2.3vw, 34px);
  }

  body[data-site="aroma"] .vertical-hero .hero-slide .hero-copy p { max-width: 435px; }
}

@media (max-width: 760px) {
  body[data-site="aroma"] .vertical-hero .hero-slide .hero-copy .hero-title {
    max-width: 16ch;
    font-size: clamp(36px, 8vw, 49px);
  }

  body[data-site="aroma"][data-language="zh"] .vertical-hero .hero-slide .hero-copy .hero-title {
    max-width: 12em;
    font-size: clamp(30px, 7.25vw, 43px);
  }

  body[data-site="aroma"] .vertical-hero .hero-slide .hero-art::after {
    background: linear-gradient(180deg, #fbf3eb 0%, #fbf3eb00 24%);
  }
}

body[data-site="aroma"] .application-section { background: var(--aroma-paper); }

body[data-site="aroma"] .application-tab {
  background: var(--aroma-cream);
  border: 1px solid var(--line);
  color: var(--aroma-accent-deep);
  border-radius: 7px;
}

body[data-site="aroma"] .application-tab:hover { background: #f1ded3; }

body[data-site="aroma"] .application-tab[aria-selected="true"] {
  color: #fff;
  background: var(--aroma-accent);
  border-color: var(--aroma-accent);
  box-shadow: none;
}

body[data-site="aroma"] :is(.application-panel, .application-image) { background: var(--aroma-cream); }

body[data-site="aroma"] .vertical-catalog .vertical-grid {
  gap: clamp(18px, 2vw, 27px);
}

body[data-site="aroma"] .vertical-catalog .vertical-card,
body[data-site="aroma"] :is(.vertical-photo, .vertical-guide-card, .vertical-faq details) {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffaf5;
  box-shadow: none;
}

body[data-site="aroma"] .vertical-catalog .vertical-card {
  padding: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}

body[data-site="aroma"] .vertical-catalog .vertical-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 27px #60423013;
}

body[data-site="aroma"] .vertical-catalog .vertical-card-media { background: var(--aroma-cream); }

body[data-site="aroma"] .vertical-catalog .vertical-card-media img {
  aspect-ratio: 1;
  object-position: center;
}

body[data-site="aroma"] .vertical-catalog .vertical-card-copy { padding: clamp(19px, 2.1vw, 28px); }

body[data-site="aroma"] .vertical-catalog .vertical-card h3 {
  font-family: var(--aroma-display);
  color: var(--ink);
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 500;
}

body[data-site="aroma"] .vertical-card-note,
body[data-site="aroma"] .vertical-caption { color: var(--muted); }

body[data-site="aroma"] .vertical-product { align-items: start; }
body[data-site="aroma"] .vertical-read .prose a { color: var(--aroma-accent-deep); }

body[data-site="aroma"] .page-hero {
  border-color: var(--line);
  background: linear-gradient(120deg, #f5e5d8, var(--aroma-paper));
}

body[data-site="aroma"] .page-hero p,
body[data-site="aroma"] .section-head p,
body[data-site="aroma"] .project-prompt p { color: var(--muted); }

body[data-site="aroma"] :is(.project-prompt, .cta-section) {
  border-color: var(--line);
  background: #f5e4d9;
}

body[data-site="aroma"] footer {
  background: var(--aroma-cream);
  border-color: var(--line);
}

body[data-site="aroma"] .footer-grid h3 { color: var(--aroma-accent-deep); }
body[data-site="aroma"] .footer-grid :is(a, p) { color: var(--muted); }
body[data-site="aroma"] .footer-bottom { color: var(--muted); border-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  body[data-site="aroma"] .vertical-catalog .vertical-card { transition: none; }
}