/* ============================================================
   Brand A · LastRites Archive
   Trang: lastrites-home.html  (responsive: mobile 390 → desktop 1440)
   Tinh thần: archive tư liệu điện ảnh — trang trọng, hoài cổ,
   Western noir. Radius 0–2px, hairline 1px, không shadow mềm,
   không gradient trên nền giấy.
   ============================================================ */

body.lr {
  background: var(--lr-paper);
  color: var(--lr-text);
  font-family: var(--lr-font-body);
  font-size: 14px;
  line-height: 1.7;
}

/* :where() → specificity 0, không đè rule màu của .lr-logo / .lr-src a… */
.lr :where(a) { color: var(--lr-gold-ink); text-decoration: none; }
.lr :where(a):hover { color: var(--lr-gold); }
.lr ::selection { background: var(--lr-gold); color: var(--lr-ink); }

/* Bề rộng nội dung: 1200px trong khung 1440 (padding 120px) */
.lr-wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--lr-pad-x);
}

/* ---------- Chữ display: serif, uppercase, tracking rộng.
     Chỉ dùng cho tên phim, logo, tiêu đề section. ---------- */
.lr-display {
  font-family: var(--lr-font-display);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
}

.lr-logo {
  color: var(--lr-hero-text);
  font-family: var(--lr-font-display);
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ============ HEADER (nằm trong hero) ============ */
.lr-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}

.lr-nav { display: none; gap: 44px; align-items: center; }

.lr-nav a {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lr-hero-dim);
  padding-bottom: 7px;
  border-bottom: 1px solid transparent;
}
.lr-nav a:hover,
.lr-nav a[aria-current="true"] {
  color: var(--lr-hero-text);
  border-bottom-color: var(--lr-gold);
}

.lr-burger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 5px;
  padding-inline: 9px;
}
.lr-burger i { height: 1px; background: var(--lr-gold); }

/* ============ HERO ============ */
.lr-hero {
  position: relative;
  overflow: hidden;
  background: var(--lr-ink);
  padding-bottom: 34px;
}

/* Ảnh hero: mobile nằm trên, desktop phủ nửa phải */
.lr-hero__art {
  position: absolute;
  inset: 0 0 auto 0;
  height: 330px;
  background: repeating-linear-gradient(135deg, #1B1613 0 11px, #241D18 11px 22px);
  display: flex; align-items: center; justify-content: center;
  padding-inline: 30px;
}
.lr-hero__art .ph__label { font-size: 10px; }

/* Ảnh hero phủ kín vùng art; .lr-hero__scrim nằm đè lên giữ chữ đọc được. */
.lr-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.lr-hero__scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 330px;
  background: linear-gradient(0deg, var(--lr-ink) 6%, rgba(20, 16, 14, .35) 70%);
}

.lr-hero__body { position: relative; padding-top: 150px; }

.lr-hero__title { color: var(--lr-hero-text); line-height: 1; }
.lr-hero__title .l1,
.lr-hero__title .l2,
.lr-hero__title .l3 { display: block; }
.lr-hero__title .l1 { font-size: 18px; letter-spacing: .30em; padding-left: 56px; }
.lr-hero__title .l2 { font-size: 40px; letter-spacing: .04em; margin-top: 5px; }
.lr-hero__title .l3 { font-size: 24px; letter-spacing: .09em; margin-top: 8px; }

/* Signature element: hairline + kim cương vàng */
.lr-rule-orn {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 14px;
  max-width: 440px;
}
.lr-rule-orn::before,
.lr-rule-orn::after {
  content: ""; flex: 1; height: 1px;
}
.lr-rule-orn::before { background: linear-gradient(90deg, rgba(201,162,39,.55), rgba(201,162,39,.05)); }
.lr-rule-orn::after  { background: linear-gradient(270deg, rgba(201,162,39,.55), rgba(201,162,39,.05)); }
.lr-rule-orn i { width: 5px; height: 5px; background: var(--lr-gold); transform: rotate(45deg); }

.lr-tagline {
  font-family: var(--lr-font-display);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lr-gold);
}

.lr-hero__lede {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: #C4BAAD;
  text-wrap: pretty;
}

/* ---------- Meta chip: ô vuông, không fill, ngăn bằng hairline ---------- */
.lr-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 26px;
  background: var(--lr-hero-line);
  border: 1px solid var(--lr-hero-line);
}
.lr-meta__item {
  display: flex; align-items: center; gap: 11px;
  padding: 14px;
  background: var(--lr-ink);
}
.lr-meta__icon { flex: none; color: var(--lr-gold); }
.lr-meta__v {
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lr-hero-text);
}
.lr-meta__k {
  font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lr-hero-muted);
  margin-top: 2px;
}

/* ============ SECTION ============ */
.lr-sec { padding-top: 40px; scroll-margin-top: 12px; }
.lr-sec--last { padding-bottom: 44px; }

.lr-sec__head { display: flex; align-items: center; gap: 14px; }

.lr-sec__title { font-size: 22px; letter-spacing: .10em; color: var(--lr-text); }

/* Signature element: thanh vàng ngắn dưới mọi tiêu đề section */
.lr-sec__bar { width: 38px; height: 2px; background: var(--lr-gold); margin: 12px 0 22px; }

.lr-hair { height: 1px; background: var(--lr-rule); border: 0; margin: 0; }

/* nhãn SEO cho dev — bỏ khi lên production */
.lr-tag {
  font-family: var(--lr-font-mono);
  font-size: 9px; letter-spacing: .10em;
  color: var(--lr-gold-ink);
  border: 1px solid rgba(201, 162, 39, .55);
  padding: 2px 6px;
}

/* ============ ABOUT ============ */
.lr-prose { display: flex; flex-direction: column; gap: 16px; }
.lr-prose p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--lr-body); text-wrap: pretty; }

/* Ảnh có khung viền mảnh */
.lr-mat {
  border: 1px solid var(--lr-rule-3);
  background: var(--lr-surface-3);
  padding: 8px;
  margin-top: 22px;
}

/* Khung mat ôm đúng tỉ lệ poster 2:3. Placeholder cũ là 4:5 (.ph--4x5); đổi theo
   ảnh thật để không phải cắt mất chữ tiêu đề ở đáy poster. */
.lr-mat__img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* ============ CAST ============ */
.lr-cast__row { display: flex; align-items: center; gap: 18px; margin-top: 4px; }

.lr-cast__track {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* KHÔNG scroll-behavior: smooth — smooth scroll không tick trong mọi
     engine, mũi tên carousel sẽ như bị liệt. Script dùng behavior:'instant'. */
  padding-bottom: 8px;
  scrollbar-width: none;
}
.lr-cast__track::-webkit-scrollbar { display: none; }

.lr-card {
  position: relative;
  flex: none;
  width: 132px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  scroll-snap-align: start;
  background: repeating-linear-gradient(135deg, #1E1915 0 9px, #262019 9px 18px);
}
/* Ảnh phủ kín thẻ; .lr-card__cap nằm đè lên nhờ gradient sẵn có. */
.lr-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lr-card__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 12px 8px;
  text-align: center;
  background: linear-gradient(0deg, rgba(12, 9, 7, .96) 30%, rgba(12, 9, 7, 0));
}
.lr-card__actor {
  font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.3; color: var(--lr-paper);
  min-height: 26px;
  display: flex; align-items: flex-end; justify-content: center;
}
.lr-card__as {
  font-family: var(--lr-font-display);
  font-style: italic; font-size: 10px;
  color: #9A8B78; margin: 3px 0;
}
.lr-card__role { font-size: 11px; line-height: 1.3; color: #D6CBBC; }

.lr-arrow {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--lr-rule-3);
  border-radius: 50%;
  align-items: center; justify-content: center;
  color: var(--lr-muted); font-size: 14px;
}
.lr-arrow:hover { border-color: var(--lr-gold); color: var(--lr-gold-ink); }

.lr-hint {
  font-family: var(--lr-font-mono);
  font-size: 10px; letter-spacing: .04em;
  color: var(--lr-faint);
  padding-top: 10px;
}

.lr-also { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.lr-also__k {
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lr-faint);
}
.lr-also__v { font-size: 13px; line-height: 1.85; color: var(--lr-body-2); text-wrap: pretty; }

/* ============ FILM DETAILS ============ */
.lr-dl { display: flex; flex-direction: column; }
.lr-dl__row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  padding-block: 11px;
  border-bottom: 1px solid var(--lr-rule-2);
}
.lr-dl__k { font-size: 12px; font-weight: 600; color: var(--lr-text); }
.lr-dl__v { font-size: 13px; line-height: 1.5; color: var(--lr-body-2); }

.lr-note { margin: 20px 0 0; font-size: 13px; line-height: 1.85; color: var(--lr-body-2); text-wrap: pretty; }
.lr-note--fine {
  margin-top: 14px;
  font-size: 11.5px; line-height: 1.8;
  font-style: italic; color: var(--lr-faint);
}

/* ============ SOURCES ============ */
.lr-src { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lr-src a {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px;
  padding-inline: 12px;
  border: 1px solid var(--lr-rule);
  background: var(--lr-surface-2);
  color: var(--lr-text);
  font-size: 12px;
}
.lr-src a:hover { border-color: var(--lr-gold); color: var(--lr-text); }
.lr-src__mark {
  flex: none;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--lr-rule-3);
  font-family: var(--lr-font-display);
  font-size: 11px; color: var(--lr-muted);
}

.lr-disclaimer { margin-top: 18px; font-size: 11px; line-height: 1.9; color: var(--lr-faint); }

/* ============ FOOTER ============ */
/* ============ NAV MOBILE (overlay) ============
   State: .lr-menu-open trên <html>. Không transition property mang state. */
.lr-menu {
  position: fixed; inset: 0;
  z-index: 40;
  background: var(--lr-ink);
  padding: 20px var(--lr-pad-x) 32px;
  display: flex; flex-direction: column;
  visibility: hidden;
}
.lr-menu-open .lr-menu { visibility: visible; }

.lr-menu__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--lr-hero-rule);
}
.lr-menu__close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--lr-gold); font-size: 17px;
}

.lr-menu__list { display: flex; flex-direction: column; padding-top: 8px; }
.lr-menu__list a {
  display: flex; align-items: center;
  min-height: 60px;
  border-bottom: 1px solid var(--lr-hero-rule);
  font-family: var(--lr-font-display);
  font-size: 21px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lr-hero-text);
}
.lr-menu__list a:hover { color: var(--lr-gold); }
.lr-menu__bridge { margin-top: auto; padding-block: 8px; }

.lr-foot { background: var(--lr-ink); margin-top: 40px; padding-top: 36px; }
.lr-foot__intro {
  margin: 14px 0 26px;
  font-size: 13px; line-height: 1.8;
  color: var(--lr-hero-muted);
  max-width: 300px;
  text-wrap: pretty;
}
.lr-foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-bottom: 28px; }
.lr-foot__k {
  font-size: 10px; letter-spacing: .20em;
  text-transform: uppercase; color: var(--lr-hero-text);
  margin-bottom: 14px;
}
.lr-foot__list { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.lr-foot__list a { color: var(--lr-hero-muted); padding-block: 5px; }
.lr-foot__list a:hover { color: var(--lr-gold); }

.lr-social { display: flex; gap: 10px; }
.lr-social span {
  width: 34px; height: 34px;
  border: 1px solid #38302A; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--lr-hero-muted);
}

/* Ghi công nguồn ảnh — điều kiện dùng của TMDB. */
.lr-credit {
  margin: 0 0 18px;
  font-size: 11px; line-height: 1.8;
  color: var(--lr-hero-muted);      /* 4.91:1 trên --lr-ink */
  text-wrap: pretty;
}
.lr-credit a { color: var(--lr-gold); text-underline-offset: 2px; }   /* 7.82:1 */

.lr-foot__bar {
  border-top: 1px solid var(--lr-hero-rule);
  padding: 16px 0 20px;
  display: flex; flex-direction: column; gap: 10px;
}
/* --lr-muted trên nền ink chỉ đạt 3.10:1 → dùng --lr-hero-muted (4.98:1) */
.lr-copy { font-size: 11px; color: var(--lr-hero-muted); }

/* Cầu nối sang Brand B */
/* Cầu nối Brand A → Brand B. Trên nền ink: --rp-red-hot 5.18:1,
   --lr-hero-dim 7.4:1. Không dùng #B0202E / #7A6C60 (2.79 / 3.73). */
.lr-bridge {
  font-family: var(--rp-font), var(--lr-font-body);
  font-size: 11px; letter-spacing: .16em;
  padding-block: 5px;
}
.lr-bridge b { color: var(--rp-red-hot); font-weight: 700; }
.lr-bridge i { color: var(--lr-hero-dim); font-style: normal; letter-spacing: .32em; }

/* ============================================================
   DESKTOP ≥ 1024  (frame duyệt: 1440 × 900)
   ============================================================ */
@media (min-width: 1024px) {
  body.lr { font-size: 15px; }

  .lr-wrap { padding-inline: 120px; }

  .lr-nav { display: flex; }
  .lr-burger, .lr-menu { display: none; }

  .lr-head { padding-block: 34px; }

  .lr-hero { min-height: 640px; padding-bottom: 56px; }

  .lr-hero__art {
    inset: 0 0 0 38%;
    height: auto;
    padding-inline: 60px;
  }
  .lr-hero__art .ph__label { font-size: 12px; }

  .lr-hero__scrim {
    inset: 0;
    height: auto;
    background:
      linear-gradient(90deg, var(--lr-ink) 0%, var(--lr-ink) 34%, rgba(20,16,14,.86) 48%, rgba(20,16,14,0) 78%),
      linear-gradient(0deg, rgba(20,16,14,.9) 0%, rgba(20,16,14,0) 40%);
  }

  .lr-hero__body { padding-top: 52px; max-width: 800px; }

  .lr-logo { font-size: 26px; letter-spacing: .16em; }

  .lr-hero__title .l1 { font-size: 34px; letter-spacing: .30em; padding-left: 150px; }
  .lr-hero__title .l2 { font-size: 76px; letter-spacing: .045em; margin-top: 6px; }
  .lr-hero__title .l3 { font-size: 44px; letter-spacing: .10em; margin-top: 8px; }

  .lr-rule-orn { margin: 26px 0 18px; }
  .lr-tagline { font-size: 17px; letter-spacing: .22em; text-align: left; }
  .lr-hero__lede { margin-top: 24px; font-size: 15px; max-width: 520px; }

  /* hàng 4 chip: không co, ngăn nhau bằng hairline dọc */
  .lr-meta {
    display: flex;
    width: max-content;
    gap: 0;
    margin-top: 36px;
    background: none;
    border: 0;
  }
  .lr-meta__item {
    flex: none;
    white-space: nowrap;
    gap: 12px;
    padding: 0 20px 0 0;
    margin-right: 20px;
    border-right: 1px solid var(--lr-hero-line);
  }
  .lr-meta__item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .lr-meta__v { font-size: 14px; letter-spacing: .10em; }
  .lr-meta__k { font-size: 10px; letter-spacing: .18em; }

  .lr-sec { padding-top: 72px; }
  .lr-sec--first { padding-top: 76px; }
  .lr-sec--last { padding-bottom: 68px; }
  .lr-sec__head { gap: 20px; }
  .lr-sec__head .lr-hair { flex: 1; }
  .lr-sec__title { font-size: 30px; white-space: nowrap; }
  .lr-sec__bar { width: 44px; margin: 14px 0 32px; }

  .lr-about { display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: start; }
  .lr-prose { gap: 20px; }
  .lr-prose p { font-size: 15px; }
  .lr-mat { margin-top: 0; padding: 9px; }

  .lr-arrow { display: flex; }
  /* KHÔNG dùng `flex: 1` cho .lr-card. Track là flex item basis auto (tự co
     theo nội dung), nên nếu thẻ cũng basis 0 thì thành vòng lặp: track rộng
     theo thẻ, thẻ rộng theo track → cả hai bằng 0 và carousel biến mất.
     Thẻ phải có chiều rộng cố định — cũng là thứ khiến carousel có gì để cuộn. */
  .lr-cast__track { gap: 10px; }
  .lr-card { width: 152px; }
  .lr-card__actor { font-size: 9.5px; letter-spacing: .07em; }
  .lr-hint { display: none; }
  .lr-also { margin-top: 28px; padding-left: 62px; }
  .lr-also__v { max-width: 900px; }

  .lr-details { display: grid; grid-template-columns: 1fr 1fr 330px; gap: 52px; }
  .lr-dl { gap: 14px; }
  .lr-dl__row { border-bottom: 0; padding-block: 0; grid-template-columns: 168px 1fr; gap: 16px; }
  .lr-details__aside { border-left: 1px solid var(--lr-rule); padding-left: 32px; }
  .lr-details__aside .lr-note { margin: 0; }
  .lr-details__aside .lr-hair { margin-block: 20px; }

  .lr-src { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .lr-src a { justify-content: center; gap: 12px; min-height: 52px; font-size: 13px; }
  .lr-src__mark { width: 26px; height: 26px; font-size: 12px; }

  .lr-foot { margin-top: 0; padding-top: 56px; }
  .lr-foot__cols { grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding-bottom: 44px; }
  .lr-foot__k { font-size: 11px; margin-bottom: 18px; }
  .lr-foot__list { gap: 6px; }
  .lr-foot__intro { max-width: 290px; margin-bottom: 0; }
  .lr-foot__logo { font-size: 24px; letter-spacing: .16em; }
  .lr-foot__bar { flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 0; }
  .lr-copy { font-size: 12px; }
  .lr-bridge { font-size: 12px; }
  .lr-bridge i { letter-spacing: .34em; }
}