/* ==========================================================
   CELLA HƯƠNG PHƯỢNG — Blog cá nhân
   Bộ nhận diện: NỀN ĐEN · vàng gold · giấy kem
   Đổi sang nền đen 21/08/2026 cho đồng bộ với cellamakeup.vn.
   Bố cục và kiểu chữ giữ nguyên, chỉ đổi màu.
   Bản nền trắng cũ: ../style.css.truoc-doi-nen-den.bak
   ========================================================== */
:root{
  /* Nền — từ đậm nhất tới nhạt nhất */
  --black:#08080A;          /* nền trang */
  --ink-850:#0A0A0C;        /* topbar, footer */
  --ink-800:#101013;        /* thẻ, khối nhấn nhẹ */
  --ink-700:#16161A;        /* khối nổi lên: nút, ô ngày, side-cta */
  --charcoal:#F2EFE9;       /* chữ tiêu đề phụ (trước là màu than, nay là màu chữ sáng) */
  --charcoal-2:#C9C5BC;

  /* Vàng */
  --gold:#C9A24B;
  --gold-light:#E7C975;
  --gold-glow:rgba(201,162,75,.35);

  /* Rượu vang — giữ làm dải nhấn */
  --wine:#3B1F2B;
  --wine-2:#4A2233;

  /* Chữ & đường kẻ */
  --paper:#08080A;               /* nền trang (tên giữ nguyên để không phải sửa build.js) */
  --cream:#101013;               /* nền khối phụ */
  --line:rgba(242,239,233,.08);  /* đường kẻ mảnh */
  --line-gold:rgba(201,162,75,.18);
  --ink:#F2EFE9;                 /* chữ đậm nhất */
  --body:rgba(255,255,255,.82);  /* chữ thân bài */
  --muted:#8A877F;               /* chữ phụ */

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Montserrat chỉ dùng cho thanh menu, để giống hệt chữ trên menu web chính
     (28/08/2026). Thân bài blog vẫn giữ Be Vietnam Pro như cũ. */
  --display:'Montserrat', var(--sans);
  --wrap:1180px;
  --hdr-h:84px;                        /* chiều cao thanh menu, bằng web chính */
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:18px;
  line-height:1.85;
  color:var(--body);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- HEADER — DÙNG CHUNG VỚI cellamakeup.vn ----------
   28/08/2026: chị Phượng chốt bấm BLOG là sang phần blog chứ không nhảy sang
   một giao diện khác. Cả khối dưới đây chép từ index.html của web chính
   (output/2026-08-15-web-gioi-thieu-cella/site/index.html, mục HEADER), chỉ
   đổi tên biến màu cho khớp bộ biến của blog. Sửa menu web chính thì phải
   sang đây sửa theo, và ngược lại.

   Khác web chính đúng MỘT điểm, cố ý: web chính để position:fixed và trong
   suốt khi ở đỉnh trang (vì trang chủ có ảnh bìa cao kín màn hình chui xuống
   dưới). Blog thì phần đầu mỗi trang chỉ cao 86–110px, để fixed là thanh menu
   đè lên chữ. Nên ở đây dùng position:sticky — thanh menu vẫn dính đỉnh khi
   cuộn, nhưng chiếm chỗ thật nên không đè lên nội dung.
   ---------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(8,8,10,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-gold);transition:all .5s var(--ease);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--hdr-h);max-width:var(--wrap);margin:0 auto;padding:0 24px;
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{max-height:44px;width:auto;display:block}
.brand .b-name{
  font-family:var(--display);text-transform:uppercase;font-weight:700;
  letter-spacing:.16em;font-size:16px;line-height:1;color:var(--ink);display:block;white-space:nowrap;
}
.brand .b-sub{
  font-family:var(--display);font-size:8.5px;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;display:block;margin-top:5px;white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:1.3rem;list-style:none;flex-wrap:nowrap}
.nav-links li{white-space:nowrap}
/* ⚠️ Menu dùng cỡ 11,5px chứ KHÔNG dùng 13px: lòng trong của .nav chỉ rộng
   1132px (wrap 1180 − 24×2) dù màn 1920, mà các nhãn tiếng Việt ở 13px thì
   tràn lề. Đo bằng getBoundingClientRect, đừng tin mắt nhìn ảnh chụp. */
.nav-links a{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:11.5px;font-weight:500;color:var(--charcoal-2);transition:color .3s;
  position:relative;padding:6px 0;display:inline-block;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold-light)}
/* ── Mục QUÀ MIỄN PHÍ: làm nổi để khách muốn bấm ── */
.nav-links a.qua{
  background:linear-gradient(100deg,var(--gold-light),var(--gold));
  color:var(--black);font-weight:800;letter-spacing:.05em;
  font-size:13px;border:2px solid var(--gold-light);
  padding:.7em 1.2em;border-radius:999px;white-space:nowrap;
  animation:quaNhay 1.7s ease-in-out infinite;
}
.nav-links a.qua:hover{color:var(--black);filter:brightness(1.1);transform:translateY(-1px)}
.nav-links a.qua::after{display:none}
.mobile-menu a.qua{
  background:linear-gradient(100deg,var(--gold-light),var(--gold));
  color:var(--black);font-weight:700;border-bottom:none;
  border-radius:14px;padding:19px 20px;margin:12px 0;text-align:center;font-size:15px;
  border:2px solid var(--gold-light);animation:quaNhay 1.7s ease-in-out infinite;
}
@keyframes quaNhay{
  0%,100%{filter:brightness(1);box-shadow:0 0 0 0 rgba(231,201,117,.55);transform:scale(1)}
  50%{filter:brightness(1.28);box-shadow:0 0 26px 5px rgba(231,201,117,.6);transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){.nav-links a.qua,.mobile-menu a.qua{animation:none}}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .35s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
/* ── Mục BLOG có tam giác xổ xuống 5 chuyên mục ──
   Mở bằng :hover và :focus-within, KHÔNG dùng JavaScript: webview cũ trong
   Facebook/Zalo hay nuốt script, menu mà phụ thuộc JS là mất luôn lối vào. */
.nav-links li.co-drop{position:relative}
.nav-links li.co-drop > a::before{
  content:"▾";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  font-size:.78em;line-height:1;color:var(--gold);transition:color .3s;
}
.nav-links li.co-drop:hover > a::before{color:var(--gold-light)}
.nav-links .drop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:286px;background:var(--ink-800);border:1px solid var(--line-gold);
  border-radius:14px;padding:10px;list-style:none;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
/* Cầu nối vô hình phía trên: chuột đi từ mục menu xuống hộp không rơi giữa khe */
.nav-links .drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-links li.co-drop:hover > .drop,
.nav-links li.co-drop:focus-within > .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-links .drop li{white-space:normal}
.nav-links .drop a{
  display:block;padding:11px 14px;border-radius:9px;letter-spacing:.06em;
  text-transform:none;font-size:13px;font-weight:500;color:var(--charcoal-2);
}
.nav-links .drop a::after{display:none}
.nav-links .drop a:hover{background:var(--ink-700);color:var(--gold-light)}
.nav-links .drop .tat-ca{
  border-bottom:1px solid var(--line);border-radius:9px 9px 0 0;
  margin-bottom:6px;padding-bottom:13px;color:var(--gold);text-transform:uppercase;
  letter-spacing:.1em;font-size:11.8px;
}
/* Menu điện thoại: bày thẳng chuyên mục ra, khỏi phải bấm mở */
.mobile-menu .drop{list-style:none;padding-left:16px}
.mobile-menu .drop a{
  text-transform:none;letter-spacing:.04em;font-size:14px;
  color:var(--muted);padding:13px 0;
}
.mobile-menu .drop a::before{content:"– ";color:var(--gold)}
.mobile-menu a.me-drop::after{content:" ▾";color:var(--gold)}

.nav-cta{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.nav-cta .btn{font-size:11.5px;padding:.95em 1.5em;letter-spacing:.1em}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;flex:0 0 auto}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s;display:block}

/* Menu 6 mục chiếm trọn hàng trên desktop: ẩn dòng phụ của logo và nút gọi
   để menu không tràn lề. Số hotline vẫn còn ở chân trang và thanh gọi mobile. */
@media(min-width:1261px){
  .brand .b-sub{display:none}
  .nav-cta .btn{display:none}
}
@media(max-width:1400px){
  .nav-links{gap:1.05rem}
  .nav-links a{letter-spacing:.075em}
}
@media(max-width:1260px){
  .nav-links{display:none}
  .burger{display:flex}
}
@media(max-width:760px){.nav-cta .btn{display:none}}
@media(max-width:600px){
  :root{--hdr-h:74px}
  .nav{gap:10px}
  .brand img{max-height:34px}
  .brand .b-name{font-size:13px;letter-spacing:.12em}
  .brand .b-sub{letter-spacing:.2em;margin-top:4px}
}

/* ---------- MENU ĐIỆN THOẠI ---------- */
.mobile-menu{
  position:fixed;inset:var(--hdr-h) 0 0 0;z-index:999;background:rgba(8,8,10,.98);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:28px 24px 60px;overflow-y:auto;display:none;
  border-top:1px solid var(--line-gold);
}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none}
.mobile-menu a{
  display:block;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:15.5px;font-weight:500;color:var(--charcoal-2);
}
.mobile-menu a:hover{color:var(--gold-light)}
.mobile-menu .btn{margin-top:26px;width:100%}

.btn{display:inline-block;padding:15px 30px;white-space:nowrap;font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:.3s;border:1px solid transparent;cursor:pointer;font-family:var(--sans)}
.btn-gold{background:linear-gradient(100deg,var(--gold-light),var(--gold));color:var(--black);box-shadow:0 10px 40px -12px var(--gold-glow)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 50px -10px var(--gold-glow)}
.btn-line{border-color:var(--line-gold);color:var(--ink)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-light)}
.btn-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-light:hover{background:#fff;color:var(--black)}
.btn-sm{padding:12px 22px;font-size:13.5px}
/* (Nút .hamb và thanh nav.main của bản blog cũ đã bỏ ngày 28/08/2026 — nay
   dùng .burger + .mobile-menu y như web chính, xem mục HEADER phía trên.) */

/* ---------- PAGE HERO ---------- */
.phero{position:relative;background:var(--black);color:#fff;overflow:hidden}
.phero .bg{position:absolute;inset:0;background:url('../images/hero-workshop.jpg') center/cover;opacity:.34}
.phero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.6) 0%,rgba(8,8,10,.8) 60%,var(--black) 100%)}
.phero .wrap{position:relative;z-index:2;padding:86px 24px 78px;text-align:center}
.phero .eyebrow{font-size:13.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-light);margin-bottom:22px}
.phero h1{font-family:var(--serif);font-weight:400;color:#fff;font-size:clamp(34px,5vw,60px);line-height:1.2;letter-spacing:.01em}
.phero p.lead{margin:24px auto 0;max-width:760px;color:rgba(255,255,255,.82);font-size:19px}
.phero .crumb{margin-top:26px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.phero .crumb a:hover{color:var(--gold-light)}

/* ---------- HOME HERO ---------- */
.hhero{position:relative;background:var(--black);color:#fff;overflow:hidden}
.hhero .bg{position:absolute;inset:0;background:url('../images/hero-workshop.jpg') center/cover;opacity:.36}
.hhero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.75) 55%,var(--black) 100%)}
.hhero .wrap{position:relative;z-index:2;padding:110px 24px 96px;text-align:center}
.hhero .eyebrow{font-size:13.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-light);margin-bottom:24px}
.hhero h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.6vw,68px);line-height:1.16;color:#fff}
.hhero h1 em{font-style:italic;color:var(--gold-light)}
.hhero p{margin:26px auto 0;max-width:800px;color:rgba(255,255,255,.84);font-size:19.5px}
.hhero .acts{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pillars{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin-top:56px;border-top:1px solid rgba(255,255,255,.16);padding-top:34px}
.pillars div{padding:0 22px;border-right:1px solid rgba(255,255,255,.16)}
.pillars div:last-child{border-right:0}
.pillars b{display:block;font-family:var(--serif);font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);font-weight:500}
@media(max-width:760px){.pillars div{border-right:0;padding:10px 14px;width:100%}}

/* ---------- SECTION ---------- */
section.pad{padding:82px 0}
section.cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 52px}
.sec-head .eyebrow{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.25;color:var(--ink)}
.sec-head p{margin-top:18px;color:var(--muted)}
.rule{width:56px;height:1px;background:var(--gold);margin:20px auto 0}

/* ---------- BLOG LAYOUT ---------- */
.blog-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
@media(max-width:1000px){.blog-grid{grid-template-columns:1fr;gap:64px}}

/* --- post card (list) --- */
.plist{display:flex;flex-direction:column;gap:46px}
.pcard{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;border-bottom:1px solid var(--line);padding-bottom:46px}
.plist .pcard:last-child{border-bottom:0;padding-bottom:0}
.pcard .thumb{position:relative;overflow:hidden;background:var(--ink-800)}
.pcard .thumb img{width:100%;height:210px;object-fit:cover;transition:transform .6s;filter:grayscale(.15) contrast(1.04)}
.pcard:hover .thumb img{transform:scale(1.06);filter:none}
.pcard .date{position:absolute;left:0;top:0;background:var(--ink-700);color:#fff;padding:10px 14px;text-align:center;line-height:1.1;border-right:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.pcard .date b{display:block;font-family:var(--serif);font-size:22px;font-weight:500}
.pcard .date span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-top:3px}
.pcard .cat{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:inline-block}
.pcard h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.32;color:var(--ink);margin-bottom:12px}
.pcard h3 a:hover{color:var(--gold-light)}
.pcard .meta{font-size:14.5px;color:var(--muted);margin-bottom:12px}
.pcard .exc{font-size:17px;line-height:1.8;color:var(--body)}
.more{display:inline-block;margin-top:16px;font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);border-bottom:1px solid var(--gold);padding-bottom:3px}
.more:hover{color:var(--ink)}
@media(max-width:700px){.pcard{grid-template-columns:1fr;gap:20px}.pcard .thumb img{height:230px}.pcard h3{font-size:23px}}

/* --- featured post --- */
.feat{position:relative;margin-bottom:56px;border:1px solid var(--line);background:var(--ink-850)}
.feat .im{position:relative;overflow:hidden}
.feat .im img{width:100%;height:420px;object-fit:cover;filter:grayscale(.12) contrast(1.04)}
.feat .body{padding:38px 40px 42px}
.feat .cat{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.feat h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,38px);line-height:1.25;color:var(--ink);margin:14px 0 14px}
.feat h2 a:hover{color:var(--gold-light)}
.feat .meta{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.feat .tag{position:absolute;left:0;top:0;background:var(--gold);color:var(--black);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:11px 20px;z-index:2;font-weight:600}
@media(max-width:700px){.feat .im img{height:250px}.feat .body{padding:28px 22px 32px}}

/* ---------- SIDEBAR ---------- */
.side{display:flex;flex-direction:column;gap:38px;position:sticky;top:110px}
@media(max-width:1000px){.side{position:static}}
.wid h4{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--ink);padding-bottom:14px;border-bottom:2px solid var(--gold);margin-bottom:20px;letter-spacing:.02em}
.searchbox{display:flex;border:1px solid var(--line)}
.searchbox input{flex:1;border:0;padding:14px 16px;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--ink-800);outline:none}
.searchbox input::placeholder{color:var(--muted)}
.searchbox input:focus{outline:1px solid var(--gold);outline-offset:-1px}
.searchbox button{border:0;background:var(--ink-700);color:#fff;padding:0 20px;cursor:pointer;font-size:16px}
.searchbox button:hover{background:var(--gold);color:var(--black)}
.catlist li{list-style:none;border-bottom:1px solid var(--line)}
.catlist a{display:flex;justify-content:space-between;gap:12px;padding:13px 0;font-size:16.5px;color:var(--body)}
.catlist a:hover{color:var(--gold-light)}
.catlist a span{color:var(--muted);font-size:14.5px}
.rlist{display:flex;flex-direction:column;gap:18px}
.rlist .it{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:start}
.rlist .it img{width:88px;height:70px;object-fit:cover;filter:grayscale(.15)}
.rlist .it b{display:block;font-family:var(--serif);font-weight:400;font-size:16.5px;line-height:1.42;color:var(--ink)}
.rlist .it:hover b{color:var(--gold-light)}
.rlist .it:hover img{filter:none}
.rlist .it span{font-size:13.5px;color:var(--muted)}
.side-cta{background:var(--ink-700);color:#fff;padding:34px 28px;text-align:center;border:1px solid var(--line-gold)}
.side-cta h4{font-family:var(--serif);font-weight:400;font-size:23px;color:#fff;border:0;padding:0;margin-bottom:12px;line-height:1.35}
.side-cta p{font-size:16px;color:rgba(255,255,255,.78);margin-bottom:22px}
.side-cta .btn{width:100%}
.side-quote{background:var(--cream);border-left:3px solid var(--gold);padding:26px 24px;font-family:var(--serif);font-style:italic;font-size:19.5px;line-height:1.65;color:var(--charcoal)}
.side-quote span{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- PAGINATION ---------- */
.pager{display:flex;gap:8px;justify-content:center;margin-top:58px;flex-wrap:wrap}
.pager a,.pager span{min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:16px;color:var(--body);padding:0 14px}
.pager a:hover{border-color:var(--gold);color:var(--gold-light);background:var(--ink-800)}
.pager .cur{background:var(--ink-800);border-color:var(--gold);color:var(--gold-light)}

/* ---------- ARTICLE ---------- */
.art{max-width:820px;margin:0 auto}
.art .a-meta{font-size:14.5px;color:var(--muted);margin-bottom:0}
.art-body{font-size:18.5px;line-height:1.92;color:var(--body)}
.art-body > *{margin-bottom:26px}
.art-body h2{font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.3;color:var(--ink);margin-top:52px;margin-bottom:20px}
.art-body h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.38;color:var(--charcoal);margin-top:38px;margin-bottom:16px}
.art-body ul,.art-body ol{padding-left:24px}
.art-body li{margin-bottom:11px}
.art-body li::marker{color:var(--gold)}
.art-body strong{font-weight:600;color:var(--ink)}
.art-body a{color:var(--gold-light);border-bottom:1px solid var(--gold)}
.art-body a:hover{color:var(--ink);border-color:var(--ink)}
.art-body blockquote{border-left:3px solid var(--gold);background:var(--cream);padding:26px 30px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.6;color:var(--charcoal);margin:36px 0}
.art-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.art-body img{margin:34px 0;border:1px solid var(--line)}
.art-body .cap{font-size:15px;color:var(--muted);text-align:center;margin-top:-22px}
.art-hero{width:100%;height:460px;object-fit:cover;margin-bottom:0;filter:grayscale(.12) contrast(1.04)}
@media(max-width:700px){.art-hero{height:250px}.art-body{font-size:17.5px}.art-body h2{font-size:26px}}
.share{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:52px 0}
.share b{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.share a{border:1px solid var(--line);padding:9px 18px;font-size:14.5px;color:var(--body)}
.share a:hover{background:var(--ink-700);color:var(--gold-light);border-color:var(--gold)}
.author-box{display:grid;grid-template-columns:120px 1fr;gap:26px;background:var(--cream);padding:32px;align-items:center;border:1px solid var(--line)}
.author-box img{width:120px;height:120px;object-fit:cover;border-radius:50%}
.author-box h4{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink);margin-bottom:8px}
.author-box p{font-size:16.5px;color:var(--body)}
@media(max-width:640px){.author-box{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* ---------- RELATED GRID ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:900px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rgrid{grid-template-columns:1fr}}
.rcard{border:1px solid var(--line);background:var(--ink-850);display:flex;flex-direction:column;transition:.3s}
.rcard:hover{border-color:var(--gold);transform:translateY(-4px)}
.rcard .im{overflow:hidden;height:200px}
.rcard .im img{width:100%;height:200px;object-fit:cover;filter:grayscale(.15) contrast(1.04);transition:.5s}
.rcard:hover .im img{filter:none;transform:scale(1.04)}
.rcard .bd{padding:24px 24px 28px}
.rcard .cat{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.rcard h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.38;color:var(--ink);margin:12px 0 10px}
.rcard:hover h3{color:var(--gold-light)}
.rcard .meta{font-size:14px;color:var(--muted)}

/* ---------- CTA BAND ---------- */
.band{background:radial-gradient(90% 70% at 50% 100%,rgba(201,162,75,.14),var(--black) 62%);color:#fff;text-align:center;padding:78px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.25;color:#fff}
.band p{margin:20px auto 0;max-width:680px;color:rgba(255,255,255,.82)}
.band .acts{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer.site{background:var(--ink-850);color:rgba(255,255,255,.72);padding:70px 0 30px;font-size:16.5px;border-top:1px solid var(--line-gold)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
@media(max-width:860px){.f-grid{grid-template-columns:1fr;gap:38px}}
.flogo{height:52px;margin-bottom:20px}
footer.site h5{font-family:var(--serif);font-weight:500;font-size:19px;color:#fff;margin-bottom:18px;letter-spacing:.02em}
footer.site ul{list-style:none}
footer.site li{margin-bottom:11px;line-height:1.7}
footer.site a:hover{color:var(--gold-light)}
.f-bot{border-top:1px solid rgba(255,255,255,.14);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px;color:rgba(255,255,255,.5)}

/* ---------- MOBILE CALLBAR ---------- */
.callbar{display:none}
@media(max-width:760px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80}
  .callbar a{flex:1;text-align:center;padding:15px 0;font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
  .callbar .c1{background:linear-gradient(100deg,var(--gold-light),var(--gold));color:var(--black)}
  .callbar .c2{background:var(--ink-700);color:#fff;border-top:1px solid var(--line-gold)}
  body{padding-bottom:54px}
}

/* ---------- REVEAL ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- EMPTY / SEARCH ---------- */
.empty{text-align:center;padding:60px 0;color:var(--muted)}
.empty b{display:block;font-family:var(--serif);font-size:24px;color:var(--ink);margin-bottom:10px}