/* Bliss: cùng hệ token với Nail Jardin, đổi sang màu thương hiệu Bliss lấy từ Instagram
   (thẻ nâu mocha #614F40, kem #FFE8CE, chữ logo vàng). */
:root {
  --ivory: 36 45% 96%; --powder: 33 38% 88%; --nude: 30 30% 72%;
  --taupe: 26 16% 47%; --mocha: 27 21% 32%; --espresso: 26 24% 17%;
  --accent: 37 44% 60%; --border: 33 25% 84%; --muted-fg: 26 12% 48%;
  --gold: 37 44% 52%; --gold-soft: 38 55% 74%;
}
* { box-sizing: border-box; margin: 0; }
img { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: hsl(var(--ivory)); color: hsl(var(--espresso));
  font-family: 'Inter', system-ui, sans-serif; font-weight: 300;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(2.25rem, 5.5vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h2 em { font-style: italic; color: hsl(var(--gold)); font-weight: 400; }
.container { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
.kicker {
  text-transform: uppercase; letter-spacing: .22em; font-size: .78rem;
  font-weight: 500; color: hsl(var(--taupe));
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 2rem; border-radius: 3px; min-height: 48px; border: 1px solid transparent;
  font: 500 .8rem/1 'Inter', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn-primary { background: hsl(var(--mocha)); color: hsl(var(--ivory)); }
.btn-primary:hover { background: hsl(var(--espresso)); }
.btn-accent { background: hsl(var(--accent)); color: hsl(var(--espresso)); }
.btn-accent:hover { background: hsl(37 50% 68%); }
.btn-outline { border-color: hsl(var(--ivory) / .6); color: hsl(var(--ivory)); }
.btn-outline:hover { background: hsl(var(--ivory) / .12); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Chỉ riêng Bliss (không có ở Jardin) ===== */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; }
.wordmark b { font: italic 500 1.75rem/1 'Playfair Display', serif; color: hsl(var(--gold-soft)); letter-spacing: .01em; }
.wordmark small { margin-top: .3rem; font: 400 .5rem/1 'Inter', sans-serif; letter-spacing: .45em; color: hsl(var(--ivory) / .85); padding-left: .45em; }
.hero-mark b { font-size: clamp(4.5rem, 10vw, 7rem); }
.hero-mark small { font-size: .78rem; margin-top: .6rem; }
.hero-mark { margin-bottom: 1.75rem; }
/* Hero ảnh tĩnh, phóng rất chậm cho có chuyển động (video IG là video dọc có chữ đè). */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; } }
.hero-overlay { background: linear-gradient(180deg, hsl(var(--espresso) / .55), hsl(var(--espresso) / .4) 45%, hsl(var(--espresso) / .7)) !important; }
.gold-rule { display: block; width: 44px; height: 1px; background: hsl(var(--gold)); margin: 0 auto 1.1rem; }
.grid-2 .gold-rule, .decor-ending .gold-rule { margin-left: 0; }

/* Tým */
.team { text-align: center; }
.team .section-body { max-width: 640px; margin: 1.25rem auto 2.5rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: 1000px; margin-inline: auto; }
.team-card { margin: 0; }
.team-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: 3px; display: block; }
.team-card figcaption { padding-top: 1rem; }
.team-card strong { display: block; font: 500 1.35rem/1.2 'Playfair Display', serif; }
.team-card span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--taupe)); }
.team-card.more { display: grid; place-items: center; align-content: center; gap: .6rem; aspect-ratio: 4 / 5; background: hsl(var(--mocha)); color: hsl(var(--ivory)); border-radius: 3px; padding: 1.5rem; }
.team-card.more b { font: 500 3rem/1 'Playfair Display', serif; color: hsl(var(--gold-soft)); }
.team-card.more p { font-size: .85rem; line-height: 1.6; color: hsl(var(--ivory) / .8); }
@media (max-width: 767px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .team-card strong { font-size: 1.1rem; } }
.floor-note { display: inline-block; margin-top: .25rem; font-size: .8rem; color: hsl(var(--taupe)); }
